2.1 xhtml. motto high thoughts must have high language. –aristophanes
TRANSCRIPT
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., <html>– An end tag consists of / and the element name in angle
brackets – e.g., </html>
• 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., <br />
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., <a href = "www.cnn.com">CNN</a>
Hierarchy
• Tags must not overlap– a child element’s end tag must come before
the parent element's end tag – e.g., <b><i>hi</b>there</i> – 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 <p> contains text to be rendered– <p>USA Today</p>– whitespace is interpreted as a single space
• spaces• tabs• end of lines
• The <pre> element leaves whitespace intact
Comments
• Comments– begin with <!–- – end with -->– e.g. <!–- Author: Jan Stelovsky -->
• 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 <? and ?>– can contain attributes– e.g., <?xml version = "1.0"?>
• Are not rendered
• Tell the browser how process document
Top Level of a Document
• Every XHTML document • starts with the "processing instruction":
– <?xml version = "1.0" encoding = "utf-8"?>
• followed by specification of the XHTML grammar:– <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• then comes the root element : <html>– has an attribute: which version of XHTMT is meant
» <html xmlns = "http://www.w3.org/1999/xhtml">– all elements are nested in <html> and </html> tags– contains <head> and <body> elements
Main Elements
• <head> element– contains <title>– generally is not rendered
• <title> 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!
• <body> – contains elements to be rendered– contents of the page
• other elements and text
Example• <!-- First XHTML example
<!-- Copyrighht 2008 Jan Stelovsky, UH ICS --> <?xml version = "1.0" encoding = "utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Welcome</title> </head> <body> <p>Welcome to ICS 415!</p> </body></html>
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
• <html xmlns = "…"><head> <title>Welcome</title></head><body> <h1>Welcome to ICS 415!</h1> <p>Hope you'll enjoy it!</p></body></html>
• 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– <h1> through <h6>– for titles and subtitles– <h1> 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• <html xmlns = "…">
<head> <title>Headings</title></head><body> <h1>Level 1 Heading</h1> <h2>Level 2 heading</h2> <h3>Level 3 heading</h3> <h4>Level 4 heading</h4> <h5>Level 5 heading</h5> <h6>Level 6 heading</h6></body></html>
Links
• Hyperlinks reference other resources– web pages, files, e-mail addresses– browsers typically underline hyperlinks and
color them blue
• <a> (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., http://, or ftp://, or file://, or …
– or relative• no protocol• /./ means one level up
Links: Example• <html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title>Favorites</title></head><body> <h1>My Favorites</h1> <p><a href = "http://www.google.com">Google</a></p> <p><a href = "http://www.yahoo.com">Yahoo!</a></p> <p><a href = "http://www.cnn.com">CNN</a></p>
• </body></html>
Images
• <img> 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 <a> anchor element– that creates a link so that the user can click on the image
Images: Example• <html xmlns = "…">
<head> <title>Keiki</title></head><body> <h1>Keiki</h1> <a href="Waikiki.htm"> <img src="left.gif" width="31" height="31" border="0"></a> <img src="keiki.jpg" width="233" height="185" <a href="UH"> <img src="right.gif" width="31" height="31" border="0"></a></body></html>