1. 1 HTML/CSS Tutorial Alfred C. Weaver

2. 2 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 4.01 is current

3. 3 Definitions HTML/CSS does describe appearance and layout does not enforce an exact look is interpreted (rendered) by the browser some browser options can override HTML settings some CSS settings can override browser options

4. 4 HTML 4.01 Definition HTML defined by World Wide Web (w3) consortium http://www.w3.org/TR/REC-html40/

5. 5 Creating and Publishing HTML Create an HTML document by hand, using Notepad automatically, using FrontPage Publish to a public_html directory Set protections to allow world-wide read Access through http://hostname/~username/filename.html

6. 6 Validation If in doubt about syntax, validate http://validator.w3.org/ http://www.htmlhelp.com/tools/validator/ The supplied HTML is validated based upon the DOCTYPE definition

7. 7 HTML Page Format Page Title Goes Here Main Heading of Page is Often First

8. 8 HEAD Section Elements BASE -- explicitly specify a base URL META -- information about the document SCRIPT -- defines or points to a program to be run …

9. 9 BODY Element Deprecated attributes (but still used) BACKGROUND=uri (can be tiled) TEXT=color LINK=color (unvisited links) VLINK=color (visited links) ALINK=color (when selected)

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

11. 11 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)

12. 12 Headings

13. 13 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

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

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

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

17. 17 Unicode The Unicode organization http://www.unicode.org/ The Unicode encodings http://www.unicode.org/charts/ Example: © is © Example: ™ is ™

18. 18 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

19. 19 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.

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

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

22. 22 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

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

24. 24 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.

25. 25 Naming a Section Our References

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

27. 27 Images This is a picture of your instructor for CS453. <IMG SRC="http://www.cs.virginia.edu/~acw/weaver.jpg" ALIGN="left" WIDTH="150" HEIGHT="200"> His name is Alfred Weaver and his office is OLS 207. His telephone is 982-2201 and his email is weaver@virginia.edu. His research specialty is protecting the privacy and security of medical data by using web services to implement authentication, authorization, and federation. This work has been supported for two years by Mr. David Ladd at Microsoft Research (Redmond, WA) and has just been renewed for an additional two years. This work was demonstrated at Microsoft's annual Faculty Summit in August 2003 and again in August 2004.

28. 28 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

29. 29 ALIGN="left"

30. 30 ALIGN="right"

31. 31 ALIGN="top"

32. 32 ALIGN="middle"

33. 33 ALIGN="bottom"

34. 34 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

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

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

37. 37 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

38. 38 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) FRAME=value -- which external lines are shown; values are all, void (none), above (top), below (bottom), hsides (top and bottom), vsides (left and right), lhs (left), and rhs (right)

39. 39 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

40. 40 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

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

42. 42 Frames

43. 43 Frames

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

45. 45 Frames

46. 46 Frames

47. 47 Frames

48. 48 HTML See more HTML examples in our virtual labs http://www.cs.virginia.edu/cs453

49. 49 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

50. 50 CSS CSS definition from W3C Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification W3C Candidate Recommendation 25 February 2004 http://www.w3.org/TR/2004/CR-CSS21-20040225/ CSS tutorial from W3schools http://www.w3schools.com/css/default.asp CSS examples from Core Web Programming

51. 51 CSS General form: selector {property: value} or selector {property1: value1; property2: value2;... propertyn: valuen }

52. 52 CSS H1 {text-align: center; color: blue; font: Arial, Times New Roman} P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}

53. 53 Fizzics1 (no style sheet) New Advances in Physics New Advances in Physics Turning Gold into Lead In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a practical technique for transmutation! For more details, please see our transmutation thesis.... From: Core Web Programming, Marty Hall and Larry Brown, © 2002

54. 54 Fizzics1 From: Core Web Programming, Marty Hall and Larry Brown, © 2002

55. 55 Fizzics2 (with style sheet) Document Title BODY { background: URL(images/confetti-background.jpg) } H1 { text-align: center; font-family: Blackout } H2 { font-family: MeppDisplayShadow } STRONG { text-decoration: underline } From: Core Web Programming, Marty Hall and Larry Brown, © 2002

56. 56 Fizzics2 (with style sheet) From: Core Web Programming, Marty Hall and Larry Brown, © 2002

57. 57 CSS See more CSS in our virtual labs http://www.cs.virginia.edu/cs453