Introduction to Programming the WWW I

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

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

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

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

Discussion (cont’d) • Nest HTML elements properly • What is element nesting? • Syntax rules guides elements nesting • block-level" elements (<P>,<BLOCKQUOTE> etc) can contain character-level elements (<EM>,<FONT>etc) but not the other way around • Examples • nestexample1.html • nestexample2.html

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

The Anatomy of Syllabus page • Top-level layout • Breakdown for each version

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

Some important preliminaries • Containment • Examples: containment.html • <div>…</div> • groups the contained matter together • block-level tag • What else? • Example: div-usage.html • <span>…</span> • inline version of <div>

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

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

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 • <h1 class=“isgreen”>This will appear green.<h1> • Can also create subclasses for elements: • h1.isblue {color: blue}

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 • <h1 id=“silverware ”>This will appear silver.<h1> • ID must be unique

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

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.htmlstylelib.css

Placing Style Sheets 1 • Inline Style Sheets • Applies to a single element • <p style="color : silver;">some text goes here.</p> • Discouraged by the W3C • Example: listing1-7.html

Placing Style Sheets 2 • Internal Style Sheets (placed in heading) • Applies to a single page <style type="text/css"> h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center; } p b {color : maroon;} .isgreen {color : green;} </style> • Example: listing1-4-1.html

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

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

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.

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

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

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

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

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

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

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!

Introduction to Programming the WWW I