Internet publishing HTML (XHTML) language Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz
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
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
Essential HTML components Character entities Characters difficult to enter via keyboard HTML reserved characters <, >, & Example &entity_name; > > < < & & " Nonbreaking space &#character_unicode_number; Й Й
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
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
XML declaration <?xml version="1.0" encoding="utf-8"?> 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
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">
Document type definition Specifies the standard used for writing the document Lists elements that are allowed in the document and their nesting
Core document <html> element <html xmlns="http://www.w3.org/1999/xhtml"> <head>... </head> <body>... </body> </html> Must contain the namespace declaration xmlns=http://www.w3.org/1999/xhtml If it is missing it should work safely only in no other namespaces are used
Head element content <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> <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" />
body element content <body> text elements </body> Text and formatting instructions Default behavior Consecutive spaces, tabs, line-breaks are rendered as single space Block and inline elements
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>
Standard attributes Can be used for all elements except base, head, html, meta, param, script, style a title More simply: they can be used in all visual elements
Standard attributes class specifies class (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
Language attributes For all elements except base, br, frame, frameset, hr, iframe, param a script dir can have valuesltr rtl and controls the text direction (left-to-right, right-toleft) lang document language
Text structure elements div section p paragraph span inline block br line-break (content-less <br />)
Text structure (example) <body> <div id= section1"> <p>1 st paragraph</p> <p>2 nd paragraph</p> </div> <div id= section2"> <p>3 rd paragraph</p> <p>4 th <span>paragraph</span> of<br /> text broken into 2 lines</p> </div> </body>
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>
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>
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>
Graphics img inserts image Attributes src URL of image file alt alternative text 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
Graphics (příklad) <body> <hr /> <img src="http://www.w3.org/icons/valid-xhtml10" alt="valid XHTML 1.0!" height="31" width="88" /> </body>
Tables Tables are created hierarchically by following elements table table tr row td cell th heading cell
Tables Important attributes of table element border cellspacing cellpadding frame, rules
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
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 />
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
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
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
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