2.1 XHTML

Motto High thoughts must have high language. –Aristophanes

Why XHTML or HTML Web page editors (Dreamweaver, FrontPage, etc.) allow user to create pages without having to knowing HTML So why to learn it? 1.They don't always produce the layout we want 2.The HTML produced is messy & complicated 3.We can't create dynamic web pages without knowing the page elements

XHTML Extensible HyperText Markup Language –language that defines web page elements Based on HTML –HyperText Markup Language –becoming legacy technology Is a specific XML –obeys XML rules –subset of HTML elements XHTML 1.0 –defines only a document’s content and structure to appear in a valid XHTML document, –formatting specified with Cascading Style Sheets

Elements An element is delimited by a start tag and an end tag –A start tag consists of the element name in angle brackets –e.g., –An end tag consists of / and the element name in angle brackets –e.g., Some elements can be nested within other elements Start and end tags of a leaf element (does not contain other elements) can be combined into a single tag –it starts with < and tag name –it ends with space and /> e.g.,

Element Attributes Some start tags can have attributes –they provide additional information about an element –an attribute has a name and a value separated by an equals sign = –value is enclosed in double-quotes "…" –e.g., CNN

Hierarchy Tags must not overlap –a child element’s end tag must come before the parent element's end tag –e.g., hi there –this is illegal in XHTML –but it's legal in HTML

Text Some elements contain text enclosed in between their start and end tags E.g., a paragraph element contains text to be rendered – USA Today –whitespace is interpreted as a single space spaces tabs end of lines The element leaves whitespace intact

Comments –begin with <!–- –end with --> –e.g. Browsers ignore all text inside a comment Web page editors don't produce comments You must –document your pages using comments!

Processing Instructions Similar syntax as a leaf element –enclosed in –can contain attributes –e.g., Are not rendered Tell the browser how process document

Top Level of a Document Every XHTML document starts with the "processing instruction": – followed by specification of the XHTML grammar: – then comes the root element : –has an attribute: which version of XHTMT is meant » –all elements are nested in and tags –contains and elements

Main Elements element –contains –generally is not rendered element –names a web page –appears in the title bar of the browser's window –identifies the page in the list of Favorites or Bookmarks –Good style: Make the title expressive, but terse! –contains elements to be rendered –contents of the page other elements and text

Example Welcome Welcome to ICS 415!

Good Style XHTML is a data description language The same rules of good style apply as in a programming language Treat a document as a program –Document it –Indent according to the nesting depth –Be consistent in formatting

Acceptable Indenting Welcome Welcome to ICS 415! Hope you'll enjoy it! Acceptable only at top level and only because –top level structure is always the same –we may want to keep lines from running off to the right

Good Style: No Caps Don't use uppercase letters in tags –It violates XHTML syntax –Violates the principle of emphasis should correspond to importance –Caps emphasize disproportionally Tags are important But text is important, too –Reader's eyes are distracted by having to keep switching from upper to lower case

Validity Syntactically correct XHTML documents are guaranteed to render properly Some browsers will render incorrect documents, too –but they may not display them properly Validation tools ensure syntactic correctness –e.g., validator.w3.org Make sure your documents are valid

Headings Heading elements – through –for titles and subtitles – is rendered in the largest font –Successive heading elements are rendered in a progressively smaller and smaller font The font sizes vary significantly between browsers Use cascading style sheets to assure same size –see next lecture

Headings: Example Headings Level 1 Heading Level 2 heading Level 3 heading Level 4 heading Level 5 heading Level 6 heading

Links Hyperlinks reference other resources –web pages, files, addresses –browsers typically underline hyperlinks and color them blue (anchor) element defines a link – href attribute specifies the resource's URL

URL Uniform Resource Locator –path to a resource –either absolute starts with protocol –e.g., or ftp://, or file://, or … –or relative no protocol /./ means one level up

Links: Example Favorites My Favorites Google Yahoo! CNN

Images element src attribute: image’s URL alt attribute: contains text displayed if the browser can't render the image –a must for accessibility width and height attributes –size of the image in pixels –always use them so that browser can layout page right away –make sure that it's the actual size resize the picture itself if necessary, browser will distort it –unless you want to expand a line to create a strip An image can be embedded in an anchor element –that creates a link so that the user can click on the image

Images: Example Keiki Keiki