1 / 24

2.1 XHTML

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? They don't always produce the layout we want

qamra
Download Presentation

2.1 XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2.1 XHTML

  2. Motto High thoughts must have high language. • Aristophanes

  3. 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? • They don't always produce the layout we want • The HTML produced is messy & complicated • We can't create dynamic web pages without knowing the page elements

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

  5. 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 />

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

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

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

  9. 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!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related