Internet publi shing HTML (XHTML) language

Internet publishing

HTML (XHTML) language

Petr Zámostnýroom: A-72aphone.: 4222e-mail: [email protected]

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 declarationDocument type definition – standardCore dokument

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"?>

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

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

<html xmlns="http://www.w3.org/1999/xhtml"> <head> ... </head> <body> ... </body> </html>

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>

body element content

Text and formatting instructions Default behavior

Consecutive spaces, tabs, line-breaks are rendered as single space

Block and inline elements

<body> text elements </body>

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

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 textA B C1 2 34 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>


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>


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


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


Documents

Internet publi shing HTML (XHTML) language