1 / 45

XHTML

XHTML. H yper T ext M arkup L anguage Instructs a browser how to “render”/display/format text. XHTML Syntax. The basic building block is the “element” An element is composed of a “start tag”, some text (content) and an “end tag” E.g. <em class=“defn” id=“abc”> hello world </em>. End tag.

calix
Download Presentation

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. XHTML • HyperText Markup Language • Instructs a browser how to “render”/display/format text

  2. XHTML Syntax • The basic building block is the “element” • An element is composed of a “start tag”, some text (content) and an “end tag” • E.g. <em class=“defn” id=“abc”> hello world </em> End tag Starttag content

  3. Start Tag • “<“ • Name of the tag • 0 or more “attributes” • “>” • E.g. • <em class=“defn” id=“abc”> attributes name

  4. Content • May be plain text • May include other elements • E.g. • Hello world • She wore a <em>very</em> large hat

  5. Attributes • Name/value pairs • Syntax: name=“value” • E.g. • class=“defn” • id=“abc”

  6. End tag • “</” • Name of the corresponding start tag • “>” • E.g. • </em>

  7. XHTML vs. HTML • XML stands for eXtensible Markup Language • XML is a family of similar languages • XHTML is a reformulation of HTML in XML syntax • XHTML is the preferred language for new Web documents

  8. Case sensitivity • XHTML is case sensitive; tag and attribute names must be given in lower case • E.g. • <body> not <BODY> • <html> not <HTml>

  9. End tags • In XHTML, end tags are required • Applies particularly to <p> and <li> tags • E.g. • <p>…</p> <p>…</p> not …<p>…<p>…

  10. Empty elements • Empty elements must use the XML convention for empty elements • E.g. • <hr /> not <HR> • <br /> not <BR> • <img src=“foo.jpg” /> not <IMG SRC=“foo.jpg”>

  11. Attribute values • Attribute values must be quoted • E.g. • <em class=“defn” id=“abc”> not <EM CLASS=defn ID=abc>

  12. Html element • Every document consists of a single html element: [link]greendreams.html <html> <head> <title>Green Dreams</title> </head> <body> Green dreams sleep peacefully. </body></html>

  13. <meta> element • only inside a <head> element • “name” attribute specifies a property name • “content” attribute specifies a property value • typical properties: author, keywords, description <meta name=”author” content=”Brian Koehler” />

  14. Spacing • Adjacent spaces, tabs, newlines in the input reduce to a single space in the output linkspacing.html • The following will not display what you expect: Province Sales Tax Rate Ontario 8%Alberta 0%British Columbia 7%

  15. Paragraphs • The spacing rules apply to newlines between paragraphs: linkbad_para.htm This is paragraph 1. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog. This is paragraph 2. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog.

  16. <p> element • Enclose logical paragraphs inside a <p>…</p> element linkgood_para.html <p>This is paragraph 1. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog.</p> <p>This is paragraph 2. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog.</p>

  17. Header elements • Use the <h1> to <h6> elements to delineate sections of a document linkheader.html <h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4>

  18. Logical Highlighting • <em>…</em> - emphasis (usually italics)‏ • <strong>…</strong> - stronger emphasis (usually boldface)‏ linklogical html

  19. Physical Highlighting • <i>…</i> - italics • <b>…</b> - bold • <sub>…</sub> - subscript • <sup>…</sup> - superscript linkphysical.html

  20. Special Characters • &lt; < • &gt; > • &amp; & • &quot; “

  21. Misc. elements • Comments: <!-- your comment goes here --> • Horizontal rule: <hr />

  22. Images • Inserted using <img> element • Src attribute specifies file containing the image to insert • Alt attribute specifies the text to display when the browser can’t render the image • E.g. linkbill1.html <h1>Speedy Bill</h1><img src="bill.jpg" alt=“This is Bill G”/>

  23. Resizing Images • Use the “width” and “height” attributes to specify the desired size <img src=“bill.jpg” width=“200” height=“200”/> linkbill2.html <img src=“bill.jpg” width=“90%” height=“90%” /> linkbill3.html

  24. Links • Links to other documents are implemented with the <a>…</a> or “anchor” element • Href attribute specifies the document to link to • E.g linklink.html See Bill <a href=“bill1.html”>drive fast</a>!

  25. Block Level Elements • Lists • Tables • Framesets

  26. Layout (Block v. Inline)‏ • inline elements flow together one after another; a new line is started only if the next element will not fit on the current line • block level elements almost always start on a new line

  27. Lists (unordered)‏ • Produces a bulleted list: <ul>…</ul> • Each item in the list is a <li>…</li> element

  28. Lists (ordered)‏ • Produces a numbered list: <ol>…</ol> • The browser numbers the items automatically • Each item in the list is <li>…</li> element listlist1.html

  29. Tables • Creates a rectangular array of cells: <table>…</table> • The “border” attribute specifies the width, in pixels, of the border around the table • The “cellspacing” attribute specifies the amount of space, in pixels between adjacent cells • The “cellpadding” attribute specifies the amount of space, in pixels between a cell and its own contents

  30. Rows and Cells • A “table” element contains one or more rows: <tr>…</tr> • The first “tr” element usually contains one or more heading cells: <th>…</th> • The remaing row elements are composed of one or more regular cells: <td>…</td> linktable1.html

  31. Cell Spanning • By default all cells are the same size and shape • The “rowspan” attribute allows a cell to cross two or more rows • The “colspan” attribute allows a cell to cross two or more columns linktable2.html

  32. Definition Lists • <dl>…</dl> definition list • <dt>…</dt> term being defined • <dd>…</dd> definition linkdefinition_list.html <dl> <dt>Dweeb</dt> <dd>young excitable person who may mature into a <em>Nerd</em> or <em>Geek</em></dd> <dt>Hacker</dt> <dd>a clever programmer</dd> <dt>Nerd</dt> <dd>technically bright but socially inept person</dd></dl>

  33. Framesets • Used to display 2 or more entire web pages within a single window • <frameset>…</frameset> • Rows attribute – the number and style of rows to divide the window into • Cols attribute – the number and style of columns to divide the window into

  34. Frame • Identifies the HTML document to place inside a frame • <frame /> • Src attribute identifies the HTML file to display in the frame • Name attribute names the frame so that it can be targetted by an anchor (link)‏

  35. Frameset Example <html> <head> <title>Frameset Example</title> </head> <frameset cols=“75,*”> <frame src=“contents.html” /> <frame src=“good_para.html” name=“mainf” /> </frameset></html>

  36. Links (Anchors and frames)‏ • To have a link in one frame change the file in another frame, use the “target” attribute of the “img” tag • E.g <a href="bill1.html" target="mainf">Image 1</a>

  37. Cascading Style Sheets • Separates content from presentation • Used to globally alter the presentation of elements in a document • E.g definition lists linkdefinition_list.html • With font elements linkdl_with_font.html

  38. CSS Syntax • Styles are defined within a <style>…</style> element within the <head>…</head> element of the document • E.g. <style type=“text/css”>dt { color: red } </style>

  39. Syntax property selector dt { color: red } name value link dl_with_css

  40. Selector • name of an element <dt>, <ol>, <td> dt {...} • name of a class .pastoral {...} • name of an ID attribute h1#main_section {...}

  41. Common Properties Name Description color Foreground colour background-color font-weight Normal or bold font-style Normal, italic, or oblique margin-top Amount of space to leave vertically before element padding-left Amount of space to leave inside the element before its content to the left

  42. Length units Relative • em (ems, the height of the element's font) • ex (x-height, the height of the letter "x") • px (pixels, relative to the canvas resolution) Absolute • in (inches; 1in=2.54cm) • cm (centimeters; 1cm=10mm) • mm (millimeters) • pt (points; 1pt=1/72in) • pc (picas; 1pc=12pt)

  43. Linked Style Sheets • <link> element inside the <head> element <link rel=”stylesheet” href=”foo.css” type=”text/css” />

  44. Colours • 12 bit RGB triple e.g. #47B • 24 bit RGB triple e.g #F7342B • name: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow

  45. Other considerations • For filenames, stick to lowercase, numbers and underscores ‘_’ • Use the proper extension: • .html for HTML • .gif, .jpg for images • ‘src’ and ‘href’ attributes are relative to the current document

More Related