1. 1 HTML/CSS Tutorial Chapter 1

2. Agenda Defintion HTML Page strucutre Head Section Body Section Headings Paragraph Preformatted Text Special Charaters Colors Fonts Ordered Lists Unordered Lists Anchors Naming a section Hyperlinks Images Alignments Tables Frames Forms CSS 2

3. 3 Definitions WWW -- a software infrastructure layered on top of the Internet HTTP -- HyperText Transport Protocol, layered on top of TCP HTTPS -- secure HTTP using encryption HTML -- HyperText Markup Language, version 5.0 is current

4. 4 HTML Page Format Qi’s web! Hello World

5. 5 BODY Element Deprecated attributes (but still used) BACKGROUND=“Sunset.jpg” (can be tiled) BGCOLOR=color TEXT=color LINK=color (unvisited links) VLINK=color (visited links) ALINK=color (when selected)

6. 6 Headings text -- largest of the six text text -- smallest of the six ALIGN="position" --left (default), center or right

7. 7 Headings Document Headings Samples of the six heading types: Level-1 (H1) Level-2 (H2) Level-3 (H3) Level-4 (H4) Level-5 (H5) Level-6 (H6)

8. 8 Paragraph defines a paragraph Add ALIGN="position" (left, center, right) Multiple 's do not create blank lines Use for blank line Fully-specified text uses and But is optional

9. 9 Here is some text Centered text Right-justified text

10. 10 Preformatted Text if (a < b) { a++; b = c * d; } else { a--; b = (b-1)/2; }

11. 11 Special Characters CharacterUse << >> && "" Space

12. 12 Colors Values for BGCOLOR and COLOR many are predefined (red, blue, green,...) all colors can be specified as a six character hexadecimal value: RRGGBB FF0000 – red 888888 – gray 004400 – dark green FFFF00 – yellow

13. 13 Fonts This is the text of line one Line two contains this text <FONT COLOR="blue" SIZE="6" FACE="Courier" The third line has this additional text Note: is now deprecated in favor of CSS.

14. 14 Ordered (Numbered) Lists Item one Item two Sublist item one Sublist item two Sub-sublist item one Sub-sublist item two

15. 15 Unordered (Bulleted) Lists One Two Three Four Five Six

16. 16 Physical Character Styles Bold Italic Teletype (Monospaced) Underlined Subscripts: f 0 + f 1 Superscripts: x 2 + y 2 Smaller Bigger Strike Through Bold Italic Big Monospaced Small Italic Gray Delete Insert

17. 17 Logical Character Styles Emphasized Strongly Emphasized Code Sample Output Keyboard Text Definition Variable Citation Emphasized Code Gray Citation JDK Acronym

18. 18 Anchors (HyperLinks) Link to an absolute URL: If you get spam, contact Microsoft to report the problem. Link to a relative URL: See these references concerning our fine products. Link to a section within a URL: Amazon provided a reference for our company.

19. 19 Naming a Section Our References Example

20. 20 Hyperlinks Welcome to Computer Science at the University of Virginia.

21. 21 Images SRC is required WIDTH, HEIGHT may be in units of pixels or percentage of page or frame WIDTH="357" HEIGHT="50%" Images scale to fit the space allowed

22. 22 Align=positionImage/Text Placement LeftImage on left edge; text flows to right of image RightImage on right edge; text flows to left TopImage is left; words align with top of image BottomImage is left; words align with bottom of image MiddleWords align with middle of image Images

23. 23 Images This is a very cute dolphin on the left! You can see text wrap around it

24. 24 ALIGN="left"

25. 25 ALIGN="right"

26. 26 ALIGN=“bottom"

27. 27 Tables table tag optional table title table row table column header table data element

28. 28 Tables Table Caption Heading1 Heading2 Row1 Col1 Data Row1 Col2 Data Row2 Col1 Data Row2 Col2 Data Row3 Col1 Data Row3 Col2 Data

29. 29 Element Attributes ALIGN=position -- left, center, right for table BORDER=number -- width in pixels of border (including any cell spacing, default 0) CELLSPACING=number -- spacing in pixels between cells, default about 3 CELLPADDING=number -- space in pixels between cell border and table element, default about 1 WIDTH=number[%]-- width in pixels or percentage of page/frame width

30. 30 cellspacing=10 cellpadding=10

31. 31 Element Attributes BGCOLOR=color -- background color of table, also valid for,, and RULES=value -- which internal lines are shown; values are none, rows, cols, and all (default) EX:

32. 32 Table Row Attributes Valid for the table row: ALIGN -- left, center, right VALIGN -- top, middle, bottom BGCOLOR -- background color One Two Three Four Five Six

33. 33 Table Cell Attributes Valid for the table cell: colspan -- how many columns this cell occupies rowspan – how many rows this cell occupies a b c

34. 34 Frames Frames help control navigation and display attributes include FRAMEBORDER – yes or 1 for borders FRAMESPACING – width of border BORDERCOLOR – color SRC – location of HTML to display in frame NAME – destination for TARGET attribute

35. 35 Frames MARGINWIDTH – left/right margins MARGINHEIGHT – top/bottom margins SCROLLING – yes or 1 adds scroll bar NORESIZE – yes or 1 disables resizing

36. 36 Frames

37. 37 Frames <FRAMESET ROWS="25%,75%"

38. 38 Frames

39. FORM Tags The tag is used to create an HTML form for user input. The element can contain one or more of the following form elements:

40. FORM Attributes AttributeValueDescription acceptMIME_type Specifies the types of files that the server accepts (that can be submitted through a file upload) accept-charsetcharacter_set Specifies the character encodings that are to be used for the form submission actionURL Specifies where to send the form-data when a form is submitted autocompleteautocompleteNew on off Specifies whether a form should have autocomplete on or off enctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how the form-data should be encoded when submitting it to the server (only for method="post") method get post Specifies the HTTP method to use when sending form-data nametextSpecifies the name of a form novalidatenovalidateNewnovalidate Specifies that the form should not be validated when submitted target _blank _self _parent _top Specifies where to display the response that is received after submitting the form

41. Example First name: Last name:

42. Send Form Data to an E-mail Address Click where you want to insert a form and type <FORM METHOD=”post”. Type a space and ENCTYPE=”text/plain”. Type a space and ACTION=”mailto:?”>, replacing ? with the e-mail address to which you want to send the form data. Type. You can now add input elements to your form between the and tags.

43. Add a Text Box Between the and tags, add a new line for the text box. Type <INPUT TYPE=”text”. Type a space and NAME=”?”, replacing ? with a unique identifier for the text box. 3 Type a space and SIZE=”?”, replacing ? with a width in characters. To define a maximum number of characters for the field, type MAXLENGTH=”?”>, replacing ? with the maximum number of characters allowed.

44. Add a Large Text Area Between the and tags, add a new line for the large text box. Type. Type a space and NAME=”?”, replacing ? with a unique name for the text area. Type a space and ROWS=”?”, replacing ? with the number of rows you want to specify to determine the height of the text area. Type a space and COLS=”?”, replacing ? with a number of character columns to determine the width of the text area. Type a space and WRAP=”?”>, replacing ? with a text wrap control. soft wraps text within the text area but not in the form results. hard wraps text within both the text area and the form results. off turns off text wrapping, forcing users to add line breaks manually as they type. Type. You can add a default message between the and tags.

45. Add Check Boxes Between the and tags, type <INPUT TYPE=”checkbox”. Type a space and NAME=”?”, replacing ? with a unique name for the check box. Type a space and VALUE=”?”>, replacing ? with a value to be assigned if the check box is checked. Type the text you want to appear beside the check box. Repeat the previous steps to create more check boxes for a group of check box options.

46. Add Radio Buttons Between the and tags, type <INPUT TYPE=”radio”. Type a space and NAME=”?”, replacing ? with a unique name for the radio button group. Type a space and VALUE=”?”>, replacing ? with a value describing the radio button. Type the text you want to appear beside the radio button. Repeat the previous steps to add more radio buttons to the group, using the same name for all the buttons in a set.

47. Add a Menu List Between the and tags, type <SELECT NAME=”?”, replacing ? with a unique name for the menu. Type a space and SIZE=”?”>, replacing ? with the height, measured in character lines, for the menu input. If you want to display a dropdown menu, set the height to 1. Start a new line and type, replacing ? with a descriptive word for the menu item. Type the text you want to appear in the menu list. Repeat the previous steps to add more menu items to the list. To make one menu item appear as selected in the list, type SELECTED after the VALUE attribute. Type.

48. Add a Submit Button Between the and tags, type <INPUT TYPE=”submit”. Type a space and type VALUE=”?”>, replacing ? with the text you want to appear on the button.

49. Add a Reset Button Between the and tags, type <INPUT TYPE=”reset”. Type a space and VALUE=”?”>, replacing ? with the text you want to appear on the button.

50. Add Active Labels Click inside the tag for the form element you want to label and type ID=”?”, replacing ? with a descriptive word for the element. Before the text, type, replacing ? with the word you assigned in step 1. Type the label text and then. You can repeat the previous steps to add more labels.

51. Change the Tab Order Click inside the first form element tag and type TABINDEX=”?”, replacing ? with a number representing the element’s position in the tab order. Repeat the previous step for the remaining elements. Note: You can type a negative number to exclude an input element from the tab order. Users can move through your form using in the order you specified.

52. Add a File Upload Element Make sure the tag method is set to post. Within the tag, type ENCTYPE=”multipart/form-data”. Type the text you want to appear next to the upload element. Type Type a space and then NAME=”?”, replacing ? with a name for the input field. Type a space and SIZE=”?”>, replacing ? with the character length for the size of the input field.

53. Group Form Elements Type above the first input element you want to place in a group. Type after the last input element you want to place in the group. Below the tag, type <LEGEND. Type a space and ALIGN=”?”>, replacing ? with an alignment for the group title (left, right, top, or bottom). Type a title for the group. Type. You can repeat the previous steps to define other groups of input elements on your form.

54. Example of Form

55. 55 Cascading Style Sheets A powerful way to specify styles and formatting across all documents in a web site Style sheets can be specified inline or as a separate document Helps to keep a common look and feel

56. Types of CSS Styles 1. Internal Styles are defined in the section of the current web page. 2. Inline Styles are defined within the HTML markup of a particular page element. (avoid using) 3. External Styles are defined on the External Style Sheet, which is linked to the web pages(s). (Best choice)

57. Example body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} This is heading 1 This is a paragraph. This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector. This is a paragraph with class="ex". This text is blue.

58. CSS Background Properties PropertyDescription backgroundSets all the background properties in one declaration background- attachment Sets whether a background image is fixed or scrolls with the rest of the page background-colorSets the background color of an element background-imageSets the background image for an element background-positionSets the starting position of a background image background-repeatSets how a background image will be repeated

59. Example of CSS Background body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; } h1 {background-color:#6495ed;} p {background-color:#e0ffff;}

60. CSS Text Properties PropertyDescription colorSets the color of text directionSpecifies the text direction/writing direction letter-spacingIncreases or decreases the space between characters in a text line-heightSets the line height text-alignSpecifies the horizontal alignment of text text-decorationSpecifies the decoration added to text text-indentSpecifies the indentation of the first line in a text-block text-shadowSpecifies the shadow effect added to text text-transformControls the capitalization of text vertical-alignSets the vertical alignment of an element white-spaceSpecifies how white-space inside an element is handled word-spacingIncreases or decreases the space between words in a text

61. Example of CSS Text Properties body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} a {text-decoration:none;} h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} p {text-indent:50px;}

62. CSS Font Properties PropertyDescription fontSets all the font properties in one declaration font-familySpecifies the font family for text font-sizeSpecifies the font size of text font-styleSpecifies the font style for text font-variant Specifies whether or not a text should be displayed in a small-caps font font-weightSpecifies the weight of a font

63. Example of CSS Font Properties p{font-family:"Times New Roman", Times, serif;} p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} p.small{font-variant:small-caps;} p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}

64. CSS Links Links can be styled with any CSS property (e.g. color, font- family, background, etc.). In addition, links can be styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked Example a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */

65. CSS Links (Continued) Text Decoration The text-decoration property is mostly used to remove underlines from links: Example a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} Background Color The background-color property specifies the background color for links: Example a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

66. CSS List Properties PropertyDescription list-style Sets all the properties for a list in one declaration list-style-image Specifies an image as the list-item marker list-style-position Specifies if the list-item markers should appear inside or outside the content flow list-style-typeSpecifies the type of list-item marker

67. Example of CSS List Properties ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} ul{list-style-image: url('sqpurple.gif');} ul{list-style-position:inside;}

68. CSS Tables properties Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td elements: Example table, th, td { border: 1px solid black; }

69. Example of CSS Tables properties table {width:100%;} th{height:50px;} td{text-align:right;} td{height:50px;vertical-align:bottom;} td{padding:15px;} table, td, th {border:1px solid green;} th{background-color:green;color:white;}

70. CSS Units UnitDescription %percentage ininch cmcentimeter mmmillimeter em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses ex one ex is the x-height of a font (x-height is usually about half the font- size) ptpoint (1 pt is the same as 1/72 inch) pcpica (1 pc is the same as 12 points) pxpixels (a dot on the computer screen)

71. Color Values Color Color HEX Color RGB #000000rgb(0,0,0) #FF0000rgb(255,0,0) #00FF00rgb(0,255,0) #0000FFrgb(0,0,255) #FFFF00rgb(255,255,0) #00FFFFrgb(0,255,255) #FF00FFrgb(255,0,255) #C0C0C0rgb(192,192,192) #FFFFFFrgb(255,255,255)