internetové publikování

Internetové publikování

Doc. Ing. Petr Zámostný, Ph.D.místnost: A-72atel.: 4222, 4167 (sekretariát ústavu 111) e-mail: [email protected]

mailto:[email protected]



Internetové publikování

Jazyk HTML (XHTML)

N111031 Internetové publikování2. Základy HTML (XHTML)

První „WWW stránka“

»http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p01.html

»Tato stránka obsahuje nějaký text, který se zobrazí

»Obsahuje formátovací instrukce, které mohou fungovat

» Ignoruje standardy a pravidla tvorby, takže funkčnost není zaručena

http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p01.html






První správná WWW stránka

»http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p02.html

»Stránka vyhovuje standardu, takže bude fungovat ve všech prohlížečích, které jej podporují







Online zdoje informací

» Specifikace XHTML 1.0» http://www.w3.org/TR/xhtml1/» http://www.zralog.cz/translate/TR/REC-xhtml1-20020801/

Overview.html

» Tutorial, příklady, příručka» http://www.jakpsatweb.cz/html/ » http://www.w3schools.com/xhtml/default.asp

http://www.w3.org/TR/xhtml1/

http://www.zralog.cz/translate/TR/REC-xhtml1-20020801/Overview.html






http://www.jakpsatweb.cz/html/





http://www.w3schools.com/xhtml/default.asp





Základní komponenty HTML jazyka

»Element» <p>Příklad elementu</p>

» Počáteční tag» Obsah elementu» Ukončovací tag

» „bezobsahové elementy“» HTML 4.01: nemusí být ukončeny <br>» XHTML: všechny elementy ukončené <br />

» Obsahem elementu mohou být další elementy» Well-formed dokumenty


Typy elementů

»Blokové» <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>


Základní komponenty HTML jazyka

»Atribut» Odkaz <a href="nekam.html">jinam</a>

» Podrobnější specifikace elementu» Zapisuje se za počáteční tag» Přiřazuje se mu hodnota vymezená ""» U jednoho tagu více atributů» Na pořadí atributů nezáleží


Zjednodušená struktura stránky

»(Je skutečně zjednodušená)

<html> <head> <title>...</title> </head> <body> ... </body></html>


Obsah elementu head

» <title>» Název stránky v titulkovém pruhu okna prohlížeče

» <meta>» Metadata dokumentu

» Většinou se neinterpretují se prohlížečem, např. pro vyhledávače

» S výjimkou informace o typu a kódování dokumentu<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head> <title>Příklad 2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="HTML, XHTML, tvorba stránek" /> <meta name="Authors" content="Petr Zámostný" /> </head>


Obsah elementu body

» Interpretace a zápis textu» Implicitní chování

» Mezery, tabelátory, konce řádku se interpretují jako jedna mezera

»Blokové a řádkové (inline) elementy

<body> text elementy </body>


Elementy pro členění textu

»div – oddíl»p – odstavec»span – inline blok»br – zalomení řádky (bezobsahový <br />)


Členění textu

<body> <div id=„cast1"> <p>Toto je 1. odstavec textu</p> <p>Toto je 2. odstavec textu</p> </div>

<div id=„cast2"> <p>Toto je 3. odstavec textu</p> <p>Toto je 4. odstavec textu<br /> ručně zalomený na 2 řádky</p> </div>

</body>








Nadpisy

<body> <h1>Nadpis 1</h1> <h2>Nadpis 2</h2> <h3>Nadpis 3</h3> <h4>Nadpis 4</h4> <h5>Nadpis 5</h5> <h6>Nadpis 6</h6>

</body>








Formátování

<body><p><em>zdůrazněný text</em></p><p><strong>silně tištěný text</strong></p>

<p><b>tučný text</b></p><p><i>kurzíva</i></p>

<p>text<sub>dolní index</sub></p><p>text<sup>horní index</sup></p>

<p><code>zdrojové texty se zobrazují neproporcionálním písmem</code></p>

<pre>Obsah se zobrazí neproporcionálním písmem přesně tak, jak je v dokumentu zapsán, včetně formátovacích znakůA B C1 2 34 5 6</pre></body>







Rozdělení formátovacích elementů

»Elementy strong a em vyjadřují logický formát, vyjadřují, že obsah je důležitý

»Elementy b a i (implicitně vypadají stejně jako ty předchozí) definují vzhled bez logického významu


Seznamy

<body> <h1>Nečíslovaný seznam</h1> <ul> <li type="disc">kolečko</li> <li type="circle">kroužek</li> <li type="square">čtvereček</li> </ul>

<h1>Číslovaný seznam</h1> <ol type="a"> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ol>

<h1>Definiční seznam</h1> <dl> <dt>HTML</dt><dd>HyperText Markup Language</dd> <dt>XML</dt><dd>eXtensible Markup Language</dd> </dl>

</body>







Grafika

<body> <hr />

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></body>






internetové publikování

Documents