1 / 18

Internetové publikování

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222 , 4167 ( sekretari át ústavu 111) e-mail: petr.zamostny @ vscht.cz. Internetové publikování Jazyk HTML (XHTML). První „WWW stránka“.

blaze
Download Presentation

Internetové publikování

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D.místnost: A-72atel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz

  2. Internetové publikováníJazyk HTML (XHTML)

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

  4. 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í

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

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

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

  8. 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ží

  9. Zjednodušená struktura stránky • (Je skutečně zjednodušená) <html> <head> <title>...</title> </head> <body> ... </body> </html>

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

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

  12. Elementy pro členění textu • div – oddíl • p – odstavec • span – inline blok • br – zalomení řádky (bezobsahový <br />)

  13. Č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> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p03.html

  14. 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> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p04.html

  15. 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 C 1 2 3 4 5 6 </pre> </body> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p05.html

  16. Rozdělení formátovacích elementů • Elementy strong a emvyjadř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

  17. 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> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p06.html

  18. Grafika <body> <hr /> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31"width="88" /> </body> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p07.html

More Related