1 / 31

Internet publi shing HTML (XHTML) language

Learn about the essential components of HTML, including elements, attributes, character entities, and XHTML page structure. Understand how to create well-formed documents and use the correct syntax for HTML coding.

harnden
Download Presentation

Internet publi shing HTML (XHTML) language

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. Internet publishingHTML (XHTML) language Petr Zámostnýroom: A-72aphone.: 4222e-mail: petr.zamostny@vscht.cz

  2. Essential HTML components • Element • <p>Element example</p> • Start tag • Element content • End tag • „content-less elements“ • HTML 4.01: no closing needed<br> • XHTML: elements must be closed<br /> • Element can contain another elements • Well-formed documents

  3. Essential HTML components • Attribute • Example • Link <a href=“somewhere.html">somewhere else</a> • More detailed element specification • Must be placed in starting element brackets • Value must be enclosed in"" • Element may have more attributes • Attributes order is arbitrary

  4. Essential HTML components • Character entities • Characters difficult to enter via keyboard • HTML reserved characters • <, >, & • Example • &entity_name; • > &gt; • < &lt; • & &amp; • “ &quot; • Nonbreaking space &nbsp; • &#character_unicode_number; • ←&#8592; • Й &#1049;

  5. Essential HTML components • Entities defined by XHTML • http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent • http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent • http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent • Entity given by number in UNICODE table - http://en.wikipedia.org/wiki/Unicode • Character listings • http://alanwood.net/unicode/ • In order to display properly, the characters must be supported by the browser as well as they must be included in specified font

  6. XHTML page structure <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>...</title> </head> <body> ... </body> </html> XML declaration Document type definition – standard Core dokument

  7. XML declaration • Specifies the XML version and encoding for applications working at the XML level • It is not mandatory, but it is automatically included by some editors • It can cause problems in some MSIE installations • Recommendation: don not use it/delete it <?xml version="1.0" encoding="UTF-8"?>

  8. Document type definition • Transitional • <!DOCTYPE html • PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • Strict • <!DOCTYPE html • PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • Frameset • <!DOCTYPE html • PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  9. Document type definition • Specifies the standard used for writing the document • Lists elements that are allowed in the document and their nesting

  10. Core document – <html> element • Must contain the namespace declarationxmlns=http://www.w3.org/1999/xhtml • If it is missing it should work safely only in no other namespaces are used <html xmlns="http://www.w3.org/1999/xhtml"> <head> ... </head> <body> ... </body> </html>

  11. Head element content • <title> • Name of the page displayed in the browser window caption • <meta> • Document metadata • Usually they are not interpreted by browsers, used e.g. for fulltext search robots • Exception: document type and encoding info<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="HTML, XHTML" /> <meta name="Authors" content="Petr Zámostný" /> </head>

  12. bodyelement content • Text and formatting instructions • Default behavior • Consecutive spaces, tabs, line-breaksare rendered as single space • Block and inline elements <body> text elements </body>

  13. Examples of elements (rehearsing) • Block • <p> <h1>…<h6> <pre> • <div> • <hr> • <dl> <ul> <ol> • <table> • <form> • Inline • <a> <img> <map> <br> <script> <sub> <sup> • <span> • <em> <strong> <code> <cite> <dfn> <samp> <kbd> <var> <abbr> • <i> <b>

  14. Standard attributes • Can be used for all elements exceptbase, head, html, meta, param, script, style a title • More simply: they can be used in all visual elements

  15. Standard attributes • class – specifiesclass (group) the element belongs to • id – assigns unique identifier to the element • style – can be used to directly set element style in CSS • All attributes above are used for application of styles and dynamic behavior • title – specifies element tooltip

  16. Language attributes • For all elements exceptbase, br, frame, frameset, hr, iframe, param ascript • dir – can have valuesltr | rtland controls the text direction (left-to-right, right-to-left) • lang – document language

  17. Text structure elements • div – section • p – paragraph • span – inline block • br – line-break (content-less<br />)

  18. Text structure (example) <body> <div id=“section1"> <p>1st paragraph</p> <p>2nd paragraph</p> </div> <div id=“section2"> <p>3rd paragraph</p> <p>4th<span>paragraph</span> of<br /> text broken into 2 lines</p> </div> </body>

  19. Headings <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body>

  20. Formátting <body> <p><em>emphasized text</em></p> <p><strong>strong printed text</strong></p> <p><b>bold text</b></p> <p><i>italics</i></p> <p>text<sub>subscript</sub></p> <p>text<sup>superscript</sup></p> <p><code>monospace font</code></p> <pre> Preformatted text A B C 1 2 3 4 5 6 </pre> </body>

  21. Lists <body> <h1>Unordered list</h1> <ul> <li type="disc">kolečko</li> <li type="circle">kroužek</li> <li type="square">čtvereček</li> </ul> <h1>Ordered list</h1> <ol type="a"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <h1>Definition list</h1> <dl> <dt>HTML</dt><dd>HyperText Markup Language</dd> <dt>XML</dt><dd>eXtensible Markup Language</dd> </dl> </body>

  22. Graphics • img – inserts image • Attributes • src – URL of image file • alt – alternativetext • For users that cannot/does not want to display images • height, width • Enables the browser get image dimensions before they are actually downloaded – speeds up document display • Can be used to resize images ….. But there are better ways to do it

  23. Graphics (příklad) <body> <hr /> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31"width="88" /> </body>

  24. Tables • Tables are created hierarchically by following elements • table – table • tr – row • td – cell • th – heading cell

  25. Tables • Important attributes of table element • border • cellspacing • cellpadding • frame, rules

  26. Tables <table summary="anotace tabulky" border="1"> <tr> <th>záhlaví sloupce 1</th> <th>záhlaví sloupce 2</th> </tr> <tr> <td>buňka 1</td> <td>buňka 2</td> </tr> <tr> <td>buňka 3</td> <td>buňka 4</td> </tr> </table> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p01.html

  27. Table borders <table border="0"> <caption>Bez okraje</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1"> <caption>S okrajem</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1" frame="void"> <caption>Vnější okraj tabulky</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1" rules="none"> <caption>Vnitřní okraj tabulky</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br />

  28. Structuring <table summary="anotace tabulky" border="1"> <caption>Sklizeň ovoce</caption> <thead> <tr> <th></th> <th>Hrušky</th> <th>Jablka</th> </tr> </thead> <tfoot> <tr> <th>Celkem</th> <td>25</td> <td>17</td> </tr> </tfoot> <tbody> <tr> <th>Petr</th> <td>10</td> <td>10</td> </tr> <tr> <th>Pavel</th> <td>15</td> <td>7</td> </tr> </tbody> </table> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p02.html

  29. Table dimensions <table border="1"> <caption>Implicitní chování</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table> <table border="1" width="500"> <caption>Pevná šířka</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table> <table border="1" width="80%"> <caption>Šířka v % okna</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p03.html

  30. Table alignment <table border="1" width="100%"> <caption>Vodorovné zarovnání</caption> <tr><td align="left">buňka zarovnaná vlevo </td></tr> <tr><td align="right">buňka zarovnaná vpravo </td></tr> <tr><td align="center">buňka zarovnaná na střed </td></tr> <tr><td align="justify">buňka zarovnaná do bloku </td></tr> </table> <br /> <table border="1" width="100%"> <caption>Svislé zarovnání</caption> <tr height="50"><td valign="top">buňka zarovnaná nahoru </td></tr> <tr height="50"><td valign="middle">buňka zarovnaná na střed </td></tr> <tr height="50"><td valign="bottom">buňka zarovnaná dolů </td></tr> <tr height="50"><td valign="baseline">buňka zarovnaná na základní čáru</td></tr> </table> <br /> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p04.html

  31. Merging cells <table border="1"> <tr><td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td rowspan="2" colspan="2">expandovaná buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td></tr> </table><br /> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p05.html

More Related