2. Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 6

3. 2 Topics Today Discussion  Homework1 problems Case study  To dissect a complicated Web page Cascading Style Sheet (CSS)  CSS1  CSS2

4. 3 Reminder Access homework1 grade online  http://people.cs.uchicago.edu/~hai/homework/ grade/ http://people.cs.uchicago.edu/~hai/homework/ grade/ Quiz2 on this Wednesday Midterm on this Friday

5. 4 Discussion Validate your page  Why it is highly recommended?  Embed Encoding and DTD information in page DTD: tag Encoding:  http-equiv="Content-Type"  content="text/html; charset=iso-8859-1“ HTTP transaction structure  Example:http://www.jmarshall.com/easy/http/#samplehttp://www.jmarshall.com/easy/http/#sample  Example: validationexample.htmlvalidationexample.html

6. 5 Discussion (cont’d) Nest HTML elements properly  What is element nesting?  Syntax rules guides elements nesting block-level" elements (, etc) can contain character-level elements (, etc) but not the other way around  Examples nestexample1.html nestexample2.html

7. 6 Case Study What will we study?  Two versions of course’s Web pages Tables Version  http://www.classes.cs.uchicago.edu/classes/archive/200 3/summer/10100-1/index_t.html http://www.classes.cs.uchicago.edu/classes/archive/200 3/summer/10100-1/index_t.html Frames Version  http://www.classes.cs.uchicago.edu/classes/archive/200 3/summer/10100-1/index.html http://www.classes.cs.uchicago.edu/classes/archive/200 3/summer/10100-1/index.html Why will we study this?

8. 7 The Anatomy of Syllabus page Top-level layout Breakdown for each version

9. 8 Cascading Style Sheets Removes formatting from HTML, leaving it to be a structure/content language Incorporated in HTML only at 4.0 Also can be used for other markup languages (XHTML, XML) Helps with scalability of Web sites

10. 9 Some important preliminaries Containment  Examples: containment.htmlcontainment.html …  groups the contained matter together  block-level tag What else?  Example: div-usage.htmldiv-usage.html …  inline version of

11. 10 Creating Your Own Style Rules A CSS rule; Selector and Declaration Properties and values H1 {font-family : Arial, sans-serif} P { font-family : “Times new roman", serif; color : red; text-align: left } Example: listing1-1.htmllisting1-1.html

12. 11 HTML Element Selectors Designate style for one or more HTML tags  h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center; } Contextual Selectors p b {color : maroon}  makes bold text within paragraphs maroon Example:  listing1-4.html listing1-4.html

13. 12 Class Selectors Applies rules to HTML content by class Create a rule in the style sheet.isgreen {color : green;} Reference the class name in the HTML This will appear green. Can also create subclasses for elements: h1.isblue {color: blue}

14. 13 ID Selectors Applies rules to HTML content by ID Create a rule in the style sheet #silverware {color : silver;} Reference the ID in the HTML This will appear silver. ID must be unique

15. 14 Pseudo-Elements Typically used for drop cap effect p.dropcap:first-letter { font-size: 300%; float: left; color: red; }

16. 15 What can you control? Fonts (color, size, caps, font, etc) Background (image, color, tiling properties) Text (spacing, line-height, alignment, decoration, word-spacing) Box properties (margin, border, float) List properties (image for bullets) Links (visited, hover, active, link) Example: listing1-6.html stylelib.csslisting1-6.htmlstylelib.css

17. 16 Placing Style Sheets 1 Inline Style Sheets  Applies to a single element  some text goes here.  Discouraged by the W3C  Example: listing1-7.htmllisting1-7.html

18. 17 Placing Style Sheets 2 Internal Style Sheets (placed in heading)  Applies to a single page h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center; } p b {color : maroon;}.isgreen {color : green;}  Example: listing1-4-1.htmllisting1-4-1.html

19. 18 External Style Sheets Store style rules in an external file Reference the external file using link in the tag-pair Page with external CSS <link rel=“stylesheet” type=“text/css” href=“SomeStyle.css”> Great for consistent styling on large sites Example: listing1-5.htmllisting1-5.html

20. 19 More about CSS Online CSS resources  http://www.w3c.org/Style/CSS http://www.w3c.org/Style/CSS Check W3C’s CSS1 documentW3C’s CSS1 document  A more detailed overview from Dave Raggettdetailed overview  See CNET builder.com’s reference for detailsCNET builder.com’s reference CSS validation service  http://jigsaw.w3.org/css-validator/validator-uri.html http://jigsaw.w3.org/css-validator/validator-uri.html You can point your browser to CSS files to look at what’s going on

21. 20 CSS1 summary We saw:  selectors, properties, values  placing style sheets  some examples CSS can control every aspect of a page, you may get impressed by the online references.

22. 21 CSS2 CSS2 adds positioning:  absolute (and fixed) vs. relative  specify coordinates (relative to top left of box)  z-index: for saying what’s on top when things are stacked The Clip, overflow, visibility properties

23. 22 CSS2 approach Make each section of the page a separate with an ID Use positioning for ID selectors, background colors, etc (exact control) Only need to include HTML, not formatting information on each page

24. 23 The Position Property Content positioning  Old solution: graphics version of the content CSS2 solution is more efficient  Example: listing2-1.htmllisting2-1.html Absolute positioning & Relative positioning  Example: listing2-3.htmllisting2-3.html

25. 24 The Visibility Property Hide any element by setting the visibility property to hidden. Example: visibility.htmlvisibility.html

26. 25 The Overflow Property CSS2 enable customizing the size of the bounding box of any block-level element Overflow content is handled by overflow property  Visible, hidden, scroll, auto Example: overflow.htmloverflow.html

27. 26 The Clip Property CSS2 permits cropping an image or other element Applied only to absolutely positioned elements. Examples:  cliporiginal.html cliporiginal.html  clipcropped.html clipcropped.html

28. 27 Dynamic HTML Dynamic HTML = HTML 4 + CSS + JavaScript HTML 4 represents the structure and it is static CSS represents the appearance details JavaScript works on the dynamic behaviors of the content!