![Page 1: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/1.jpg)
Internet publishing
HTML (XHTML) language
Petr Zámostnýroom: A-72aphone.: 4222e-mail: [email protected]
![Page 2: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/2.jpg)
Essential HTML components
Element<p>Element example</p>
Start tagElement contentEnd tag
„content-less elements“HTML 4.01: no closing needed <br>XHTML: elements must be closed <br />
Element can contain another elementsWell-formed documents
![Page 3: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/3.jpg)
Essential HTML components
AttributeExample
Link <a href=“somewhere.html">somewhere else</a>
More detailed element specificationMust be placed in starting element bracketsValue must be enclosed in ""
Element may have more attributesAttributes order is arbitrary
![Page 4: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/4.jpg)
Essential HTML componentsCharacter entities
Characters difficult to enter via keyboardHTML reserved characters
<, >, &Example
&entity_name;> >< <& &“ "Nonbreaking space
&#character_unicode_number;← ←Й Й
![Page 5: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/5.jpg)
Essential HTML components
Entities defined by XHTMLhttp://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.enthttp://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.enthttp://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent
Entity given by number in UNICODE table -http://en.wikipedia.org/wiki/Unicode
Character listingshttp://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
![Page 6: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/6.jpg)
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
![Page 7: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/7.jpg)
XML declaration<?xml version="1.0" encoding="UTF-8"?>
Specifies the XML version and encoding for applications working at the XML levelIt is not mandatory, but it is automatically included by some editorsIt can cause problems in some MSIE installationsRecommendation: don not use it/delete it
![Page 8: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/8.jpg)
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">
![Page 9: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/9.jpg)
Document type definition
Specifies the standard used for writing the documentLists elements that are allowed in the document and their nesting
![Page 10: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/10.jpg)
Core document – <html> element
<html xmlns="http://www.w3.org/1999/xhtml"><head>...</head><body>...</body>
</html>
Must contain the namespace declarationxmlns=http://www.w3.org/1999/xhtmlIf it is missing it should work safely only in no other namespaces are used
![Page 11: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/11.jpg)
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 robotsException: document type and encoding info<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
![Page 12: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/12.jpg)
body element content<body>
textelements
</body>
Text and formatting instructionsDefault behavior
Consecutive spaces, tabs, line-breaks are rendered as single space
Block and inline elements
![Page 13: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/13.jpg)
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>
![Page 14: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/14.jpg)
Standard attributes
Can be used for all elements except base, head, html, meta, param, script, style atitleMore simply: they can be used in all visual elements
![Page 15: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/15.jpg)
Standard attributes
class – specifies class (group) the element belongs toid – assigns unique identifier to the elementstyle – can be used to directly set element style in CSSAll attributes above are used for application of styles and dynamic behavior
title – specifies element tooltip
![Page 16: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/16.jpg)
Language attributes
For all elements except base, br, frame, frameset, hr, iframe, param a scriptdir – can have values ltr | rtl and controls the text direction (left-to-right, right-to-left)lang – document language
![Page 17: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/17.jpg)
Text structure elements
div – sectionp – paragraphspan – inline blockbr – line-break (content-less <br />)
![Page 18: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/18.jpg)
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>
![Page 19: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/19.jpg)
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>
![Page 20: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/20.jpg)
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>
![Page 21: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/21.jpg)
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>
![Page 22: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/22.jpg)
Graphicsimg – inserts imageAttributes
src – URL of image filealt – alternative text
For users that cannot/does not want to display images
height, widthEnables the browser get image dimensions before they are actually downloaded – speeds up document displayCan be used to resize images ….. But there are better ways to do it
![Page 23: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/23.jpg)
Graphics (příklad)<body><hr />
<img src="http://www.w3.org/Icons/valid-xhtml10"alt="Valid XHTML 1.0!" height="31"width="88" />
</body>
![Page 24: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/24.jpg)
Tables
Tables are created hierarchically by following elementstable – table
tr – rowtd – cellth – heading cell
![Page 25: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/25.jpg)
Tables
Important attributes of table elementbordercellspacingcellpaddingframe, rules
![Page 26: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/26.jpg)
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
![Page 27: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/27.jpg)
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 />
![Page 28: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/28.jpg)
<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>
Structuring
http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p02.html
![Page 29: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/29.jpg)
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
![Page 30: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/30.jpg)
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
![Page 31: Internet publishing HTML (XHTML) languageold.vscht.cz/kot/resources/studijni-materialy/ip-p-002/presentation.pdf · Essential HTML components Element Element example](https://reader033.vdocument.in/reader033/viewer/2022050607/5fae39599fc75a431e4c09da/html5/thumbnails/31.jpg)
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