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 values ltr | rtl and controls the text direction (left-to-right, right-to- left) � 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
Recommend
More recommend
