1. Welcome To Website Design, Hosting And Management Prepared By Webdev Solution ip 82.145,223,96

2. Prepared By Webdev Solution Basic Terms

3. HTML - hypertext markup language CSS - cascaded stylish sheet PHP - IS a server-side scripting language designed for web development but also used as a general-purpose programming language. Prepared By Webdev Solution

4. Basic Terms ASPX-Active Server Page Extended file that's designed for Microsoft's ASP.NET framework language. JavaScript -is a high-level, dynamic, untyped, and interpreted programming language. Prepared By Webdev Solution

5. Introduction General Format:- Prepared By Webdev Solution

6. Introduction Head - includes a title for the document, scripts, styles, meta information. Note: You can NOT have more than one element in an HTML document. Prepared By Webdev Solution

7. Introduction The element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Prepared By Webdev Solution

8. Tags in HTML Defines a comment Defines the document type Defines a hyperlink Defines bold text Defines a single line break Prepared By Webdev Solution

9. Tags in HTML Defines centered text Defines a section in a document Defines an HTML form for user input to Defines HTML headings Prepared By Webdev Solution

10. Tags in HTML Defines an image Defines an input control such as (button, text, password, submit, radio, checkbox, email, number, tel). Defines a paragraph Defines a client- side script Prepared By Webdev Solution

11. Tags in HTML and Create a drop-down list Defines list of elements Defines an ordered list Defines unordered list Defines a section in a document Prepared By Webdev Solution

12. Table tags in HTML Defines a table Defines a row in a table Defines a header cell in a table Defines a cell in a table Prepared By Webdev Solution

13. Tags in HTML Defines a video or movie Defines a multiline input control (text area) Defines sound content Defines navigation links Prepared By Webdev Solution

14. Tags in HTML Defines the relationship between a document and an external resource (most used to link to style sheets) style Defines style information for a document id Specifies a unique id for an element Prepared By Webdev Solution

15. Marquee in HTML is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. Prepared By Webdev Solution

16. Marquee in HTML Prepared By Webdev Solution width This specifies the width of the marquee. This can be a value like 10 or 20% etc. height This specifies the height of the marquee. This can be a value like 10 or 20% etc. direction This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.

17. Marquee in HTML Prepared By Webdev Solution behavior This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and alternate. scrolldelay This specifies how long to delay between each jump. This will have a value like 10 etc. scrollamount This specifies the speed of marquee text. This can have a value like 10 etc.

18. Marquee in HTML Prepared By Webdev Solution loop This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly. bgcolor This specifies background color in terms of color name or color hex value. hspace This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc. vspace This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.

19. Introduction to css Styling can be added to HTML elements in 3 ways: Inline - using a style attribute in HTML elements Internal - using a element in the HTML section External - using one or more external CSS files Prepared By Webdev Solution

20. Example of inline css Prepared By Webdev Solution

21. Example of internal css Prepared By Webdev Solution

22. Example of external css Prepared By Webdev Solution

23. CSS font Prepared By Webdev Solution

24. CSS box model Prepared By Webdev Solution

25. CSS id Attribute Prepared By Webdev Solution

26. CSS class Attribute Prepared By Webdev Solution NOTE: we use id to address a single element. Use class to address groups of elements.

27. HTML Links Prepared By Webdev Solution General syntax

28. HTML Links Prepared By Webdev Solution The target attribute specifies where to open the linked document. home

29. HTML target attribute Prepared By Webdev Solution _blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame

30. Image as a link Prepared By Webdev Solution

31. HTML Bookmark Prepared By Webdev Solution HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

32. HTML Bookmark Prepared By Webdev Solution

33. HTML table Prepared By Webdev Solution

34. HTML table Prepared By Webdev Solution What to change on a table :  Cell padding  Cell spacing  Border  Apply id CSS style  Alignment of text  border-collapse  Column/rows span of cells

35. HTML table Prepared By Webdev Solution Assignment

36. CSS in details Prepared By Webdev Solution Reminder Cascaded stylish sheet describe how html elements will be displayed on the screen

37. CSS in details Prepared By Webdev Solution CSS can control a number of web pages. They are saved by extension “.css”

38. CSS background properties Prepared By Webdev Solution background-color background-image background-repeat background-attachment background-position

39. CSS background-color Prepared By Webdev Solution body { background-color: blue; }

40. CSS background-image Prepared By Webdev Solution Note: By default image is repeated body { background-image: url(“new.gif”); }

41. CSS background-repeat Prepared By Webdev Solution body { background-image: url(“new.gif”); background-repeat: repeat-x; } This results to horizontal repeat repeat-y; for vertical repeat no-repeat; for no repeat

42. CSS background-position Prepared By Webdev Solution You can set property such as right top, right bottom etc. background-position: right top;

43. CSS background-attachment Prepared By Webdev Solution Defines whether the background image scroll with the text or not background-attachment: fixed;

44. CSS shorthand property Prepared By Webdev Solution body { background: red url(“new.gif”) no-repeat right top; } This shorten the code by combining the properties

45. CSS border styles Prepared By Webdev Solution dotted dashed solid double groove ridge inset outset hidden none border-width border-color

46. CSS margin Prepared By Webdev Solution margin-top margin-right margin-bottom margin-left inherit

47. CSS padding Prepared By Webdev Solution used to generate space around content padding-top padding-right padding-bottom padding-left inherit

48. CSS height & width Prepared By Webdev Solution Height and width can be set auto (default). Both do not include [padding, borders or margins] instead sets the height/width of the area inside the (elements in []). Note: max-width property overrides width

49. CSS text color property Prepared By Webdev Solution Color background-color CSS text-align property center left right justify

50. CSS text-decoration property Prepared By Webdev Solution none overline line-through underline

51. CSS text-transform property Prepared By Webdev Solution Defines whether small or capital letters uppercase lowercase capitalize

52. CSS text-indent property Prepared By Webdev Solution Specifies the indentation of the first line p { text-indent: 50px; }

53. CSS letter/word-spacing property Prepared By Webdev Solution Specifies the decrease or increase of space between characters h1 { letter-spacing: 3px; } h2{ word-spacing: -3px; }

54. CSS line-height property Prepared By Webdev Solution Specifies the space between lines h1 { line-height: 0.8; } h2{ line-height: 1.9; }

55. CSS text direction property Prepared By Webdev Solution Specifies the text direction of an element div { direction: rtl; }

56. CSS font-style property Prepared By Webdev Solution Mostly used to specify italic text p { font-style: normal; } p{ font-style: italic } p{ font-style: oblique; }

57. CSS link state property Prepared By Webdev Solution a:link - a normal unvisited link a:visited - a link the user has visited a:hover - a link on mouse over a:active - a link at the moment clicked Note: a:hover MUST come after a:link and a:visited. a:active MUST come after a:hover

58. CSS list-styles property Prepared By Webdev Solution list-style-type circle square Upper-romanlower-alpha list-style-image ul{ list-style-image: url(‘new.gif’) } list-style-position- specifies whether the list-item marker appear inside or outside the content flow

59. CSS outline property Prepared By Webdev Solution outline-color p{ border: 1px solid black; outline-color: red; } outline-style Same as those of border e.g. dotted, dashed, solid, double, inset, outset, ridge outline-width e.g. outline-width: 3px;

60. CSS display property Prepared By Webdev Solution Is the most important property- specifies if/how an element is displayed. display-block-level element always starts on a new line and stretches out left and right as far as it can. display-inline-does not start in a new line and only take up as much width as necessary. display-none- hides and show elements without deleting or recreating them.

61. CSS float property Prepared By Webdev Solution used to wrap text around images img { float: right; margin: 0 0 10px 10px; }

62. CSS float property Prepared By Webdev Solution used to wrap text around images img { float: right; margin: 0 0 10px 10px; }

63. Creating a Navigation bar Prepared By Webdev Solution Navigation Bar Home About Us Contact Us

64. CSS for Navigation bar Prepared By Webdev Solution body{ background-color: grey; } nav{ background-color: blue; height:42px; margin-top: 0px; }

65. CSS for Navigation bar Prepared By Webdev Solution nav ul{ list-style: none; } nav ul li a{ padding:0px 20px; float:left; color: white; text-decoration:none; line-height:42px; height:42px; text-align:center; }

66. CSS for Navigation bar Prepared By Webdev Solution nav ul li a.active{ background-color: red; border-radius:8px; }