(X)HTML Internetové publikování 1
Prohlížeč Obsluhuje přenos a interpretuje obsah Hlavní prohlížeče Microsoft Internet Explorer Firefox Opera Safari
WWW stránka WWW stránka dokument (soubor) s informacemi a pokyny pro jejich zobrazení Určena pro WWW prohlížeč interpret WWW dokumentu Standardizace W3C World Wide Web Consortium http://www.w3.org/
Co obsahuje WWW stránka? HyperText Markup Language HTML Text Značky (tagy) Pokyny pro interpretaci dokumentu Informace o struktuře dokumentu Odkazy na další (binární) data <html> <head> <title>title of page</title> </head> <body> This is my first homepage. <b>this text is bold</b> </body> </html>
Vývoj HTML Značkovací jazyk založený na SGML Standard Generalized Markup Language ISO 8879:1986 2.0 první verze s formální specifikací 3.0 neimplementovaný návrh Příliš složitá specifikace 3.2 standard na základě podmnožiny nestandardních řešení různých výrobců 4.0, 4.01 poslední verze Kaskádové styly CSS HTML5
Problémy s WWW Historické Prolínání obsahu a formy v HTML Problémy se strukturou dokumentu Nekompatibilita prohlížečů Současné Vyhledávání a indexace obsahu Sémantický web RDF Mikroformáty Web se zpětnou vazbou
XHTML extensible HyperText Markup Language Upravená verze HTML 4.01 Vyhovuje standardu XML Nevyžaduje podporu XML na straně prohlížeče Striktnější
XML extensible Markup Language SGML light Orientace na informační hodnotu dokumentu Možnost definovat další jazyky založené na XML Striktnější syntaxe
HTML5 Specifikace i podpora se vyvíjejí http://dev.w3.org/html5/spec/overview.html Rozsáhlý standard zahrnující Markup Javascriptová API Canvas (kreslení v prohlížeči) Offline aplikace Podpora v prohlížečích http://www.findmebyip.com/litmus/#html5-web-applications 9
První WWW stránka http://www.vscht.cz/kot/resources/studijni-materialy/ips-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
První správná WWW stránka http://www.vscht.cz/kot/resources/studijni-materialy/ips-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
Základní komponenty HTML jazyka Element <p>příklad elementu</p> Počáteční tag Obsah elementu Ukončovací tag Nepárové 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é vytvářejí zalomení odstavce <p> <h1> <h6> <pre> <div> <hr> <dl> <ul> <ol> <table> <form> Inline nevytvářejí zalomení odstavce <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>
Hlavička dokumentu <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> <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" />
Tělo dokumentu <body> text elementy </body> Interpretace a zápis textu Implicitní chování Mezery, tabelátory, konce řádku se interpretují jako jedna mezera Blokové a řádkové (inline) elementy
Elementy pro členění textu div oddíl p odstavec span inline blok br zalomení řádky (bezobsahový <br />)
HTML5: Sémantické oddíly <section> obecný dokument nebo část aplikace <article> samostatný a na zbytku stránky nezávislý obsah <aside> obsah, který je nějakým způsobem spojen s hlavním obsahem stránky, ale který nemusí nutně být jeho součástí (odkazy, boční panel) <header> <footer> <nav> hlavní navigace 20
Č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
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
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
Rozdělení formátovacích elementů Elementy strong a em vyjadřují sémantický formát, vyjadřují, že obsah je důležitý Elementy b a i (implicitně vypadají stejně jako ty předchozí) definují vzhled bez sémantickéhovýznamu
HTML5: Sémantika <i>, <b>, <em>, <strong> <i> část textu, která by měla být čtena jinak, než okolní text. Například tedy cizí slova. <b> část textu, která je stylisticky odlišná od zbytku textu. Například tedy klíčová slova a typograficky tučný text. <em> část textu, na kterou byste při čtení dali důraz. <strong> část textu, která je prostě důležitá 25
HTML5: Další sémantika formátů <small> označuje poznámky k textu <p>example Corp today announced record profits for the second quarter <small>(full Disclosure: Foo News is a subsidiary of Example Corp)</small>, leading to speculation about a third quarter merger with Demo Group.</p> 26
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
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
HTML5 sémantika <figure> a <figcaption> <figure> <img src="chroust.jpg" alt="obrázek chrousta"> <figcaption>obrázek XY: Chroust</figcaption> </figure> spárování obrázku s titulkem 29
Odkazy <body> <p><a href="http://www.google.com">absolutní odkaz na jinou stránku</a></p> <p><a href="priklad02-07.html">relativní odkaz na předchozí příklad</a></p> <p><a href="#navesti1">odkaz na návěští v tomto dokumentu</a></p> <p><a href="priklad02-08.html#navesti1">odkaz na návěští v tomto dokumentu</a></p> <p><a name="navesti1" />Příklad definice návěští</p> </body>
Cvičení http://www.vscht.cz/kot/cz/ip/cviceni1.doc Stáhněte si cvičný text Vytvořte na základě textu XHTML dokument se strukturou podobnou ukázce vpravo URL loga: http://www.vscht.cz/main/picture/mask/logo_cz.gif URL odkazu na FCHT: http://www.vscht.cz/main/soucasti/fakulty/fcht/ Zkontrolujte, zda je vytvořený dokument XHTML 1.0 validní
Struktura XHTML stránky <?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> Prolog XML Definice typu dokumentu použitý standard Vlastní dokument
Definice Typu Dokumentu Určuje standard podle kterého je dokument psán Vymezuje elementy, které se mohou použít Určuje pravidla vnoření elementů
Definice Typu Dokumentu Transitional (volnější) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Strict (přísnější, nepovoluje HTML formátování ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Frameset (rámce http://www.vscht.cz/kot/cz/ip/frameset.html) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">
Standard vs Quirk mód Standard(s) prohlížeč interpretuje data v souladu se standardy které podporuje Quirks Režim zpětné kompatibility Almost standards Jako standards, kromě obrázků v tabulkách (kvůli starým tabulkovým návrhům) https://developer.mozilla.org/en/images%2c_tables%2c_and_myster ious_gaps 35
Standards vs. Quirks čím se liší MSIE box model (do 5.5) Zarovnání inline elementů Quirks: často ke spodnímu okraji boxu Standards: k základní čáře Dědičnost velikosti fontů v tabulkách 36
Kdy se použije jaký mód Starší standardy a nedokonale specifikované standardy mají tendenci přepínat starší prohlížeče do Quirks módu Podrobná tabulka http://en.wikipedia.org/wiki/quirks_mode Zjištění módu PageInfo (Mozilla, Opera) Vlastnost DOM document.compatmode 37
Vlastní dokument element <html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>... </head> <body>... </body> </html> Musí obsaovat deklaraci jmenného prostoru xmlns=http://www.w3.org/1999/xhtml Pokud se deklarace vynechá nedochází k problémům, jedná-li se o čisté XHTML
HTML5: Doctype <!DOCTYPE html> staré stránky jsou kompatibilní aktivuje v prohlížečích mód standardů Omezená podpora v MSIE nové elementy nelze stylovat trik: document.createelement( elementxy") aktivuje stylování aktivační skript pro všechny elementy <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 39
Prolog XML <?xml version="1.0" encoding="utf-8"?> Určuje verzi XML a kódování pro programy které by dokument zpracovával jako XML Není povinná, ale některé editory (PSPad) ji vkládají Může působit problémy na některých instalacích MSIE Doporučení: neuvádět/smazat v kombinaci s UTF-8 Deklarace XML není vyžadována ve všech XML dokumentech; nicméně doporučujeme všem XHTML autorům používat XML deklaraci ve všech svých dokumentech. Takováto deklarace je potřebná, je-li kódování dokumentu jiné než UTF-8 nebo UTF-16 a nadřazeným protokolem nebylo určeno jiné. Toto je ukázka XHTML dokumentu, obsahujícího XML deklaraci.
Standardní atributy Lze je použít pro všechny elementy s výjimkou base, head, html, meta, param, script, style a title Zjednodušeně: lze je použít u všech viditelných elementů
Standardní atributy class definuje třídu (skupinu) elementů do které element patří id přiřazuje elementu unikátní identifikátor ( pojmenovává jej ) style umožňuje přímo vepsat styl elementu Výše uvedené atributy mají význam pro aplikaci stylů (vzhledu, umístění) a nastavení dynamického chování title definuje popisek elementu, který se zobrazí v bublině, ukáže-li se na element myší
Jazykové atributy Lze je použít pro všechny elementy s výjimkou base, br, frame, frameset, hr, iframe, param a script dir nabývá hodnot ltr rtl a určuje směr toku textu zleva doprava nebo zprava doleva lang identifikuje jazyk ve kterém je psán obsah elementu
Kódování znaků Počítače přirozeně pracují pouze s čísly Zprostředkování práce se znaky definice párování číslo ~ znak soubor definic = kódová stránka, kódování počet znaků které může kódování obsahovat = 2 bity Původní kódování ASCII 7 bitové, 128 znaků
Kódování znaků Osmibitová rozšíření 256 znaků různá kódování pro různé jazyky podle různých standardů Různá kódování češtiny CP852 osmibitové kódování češtiny v systému MS-DOS ISO 8859-2 osmibitové kódování češtiny v UNIXových systémech Windows-1250 osmibitové kódování češtiny používané v systémech Microsoft Windows
Kódování znaků Nelze použít více kódování najednou Vícebytová kódování (vícekrát 8 bit na 1 znak) utf-8 proměnná délka jednotky, min 8 bitů kompatibilní s ASCII utf-16 proměnná délka jednotky, min 16 bitů nekompatibilní s ASCII, varianty další, např. kódování čínštiny
Nastavení kódování Specifikace použitého kódování v dokumentu <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Specifikace kódování před/při uložení souboru
Nastavení kódování Kódování souboru Určuje fyzický způsob reprezentace znaků neobsažených v ASCII v souboru Označení kódování v dokumentu Informuje prohlížeč a umožňuje mu automaticky zvolit správné zobrazení <meta http-equiv="content-type" content="text/html; charset=windows- 1250"> <meta http-equiv="content-type" content="text/html; charset=iso 8859-2"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> Obě kódování musí být nastavena stejně
Prvky HTML jazyka Znakové entity Znaky které neumíme zadat z klávesnice Znaky jejichž použití je vyhrazeno HTML <, >, & Příklad &název_entity; > > < < & & " Pevná mezera &#číslo_unicode_znaku; Й Й
Prvky HTML jazyka Entity definované 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 Přehlednější v češtině (písmenné) http://www.jakpsatweb.cz/html/entity.html http://www.jakpsatweb.cz/html/entity-vsechny.html
Prvky HTML jazyka Entity zadané číslem znaku v tabulce UNICODE - http://en.wikipedia.org/wiki/unicode Seznam znaků http://alanwood.net/unicode/ Tyto znaky se zobrazí správně pokud je podporuje prohlížeč a jsou dostupné v použitém fontu
Tvořte validní kód Zvykněte si u každé stránky,kterou vytvoříte ověřit její validitu http://validator.w3.org/ Validace uploadem souboru nemusí fungovat správně při použití MSIE
Tabulky <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>
Strukturování <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>
Rozměry tabulky <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>
Ohraničení tabulky <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 />
Zarovnání tabulky <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 />
Sloučení buněk tabulky <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 />
Publikace dat na webserver Většinou použití FTP protokolu (nebo modernějších variant) klient např. WinSCP http://winscp.net Lokální síť např. uživatelské stránky na VŠCHT WWW formuláře omezený přístup většinou u služeb zdarma
Správa webové prezentace Webová prezentace se skládá ze 2 částí layout (rozložení) šablona, která určuje vzhled, způsob prezentace fixní část stránek, která je společná celému webu (hlavička, logo, navigace) obsah vlastní informace, typicky jiné na různých stránkách
Správa webové prezentace Systém samostatných stránek každá stránka je sama sobě svou šablonou tvoří se typicky tak, že se vytvoří jedna stránka jako šablona, ostatní stránky se vytvoří ručně jako kopie a přepíše se obsah funkční, ale pracné při údržbě nemá další požadavky na vybavení serveru
Správa webové prezentace Off-line generování obsahu obsah je tvořen odděleně od šablony HTML fragmenty data v jiném formátu program (skript), který dávkově zpracuje HTML fragmenty a vytvoří systém samostatných stránek automaticky nutná znalost / vytvoření skládacího programu dávkové generování po každé aktualizaci
Definice rozdělení <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <frameset rows="15%, 85%"> <frame src= 1.html" /> <frame src= 2.html" /> <noframes> <body> <p>prohlížeè nepodporuje rámy.</p> </body> </noframes> </frameset>
Element <frameset> Definován pouze v <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- frameset.dtd"> Atributy cols počet rámců vedle sebe rows počet rámců nad sebou cols="25%, 75%" cols="250, *, 20%"
Element <frame> Opět pouze ve FRAMESET DTD Atributy frameborder ="0 1" zobrazovat ohraničení marginwidth, marginheight velikost okraje noresize="noresize" zákaz změny velikosti name="jméno_rámu" scrolling="yes no auto" režim rolování
Vícenásobné dělení <frameset rows="15%, *, 15%"> <frame src="zahlavi.html" /> <frameset cols="200, *"> <frame src="obsah.html" /> <frame name="zobrazeni_kapitol" src="kap1.html" /> </frameset> <frame src="zapati.html" /> <noframes> <body> <p>prohlížeè nepodporuje rámy. Zde je <a href="obsah.html">obsah stránek</a>.</p> </body> </noframes> </frameset>
Odkazy v rámech <a href="url" target="cíl_odkazu">text</a> Atribut target určuje ve kterém rámci/okně se otevře odkazované URL target= _top _self _blank _parent Jméno_rámce
Správa webové prezentace iframe Vložení html z jiného souboru <iframe src = navigace.html" width="100%" height="300"> <p>your browser does not support iframes.</p> </iframe>
Správa webové prezentace Skriptování na serveru nutné aby server podporoval skriptování SSI <!--#include file= navigace.html "--> ASP <!--#include file= navigace.html "--> PHP <?php include navigace.html";?> možno složit stránku na serveru z více kousků v PHP a ASP ale i řadu dalších věcí
Správa webové prezentace Redakční systém pokročilé skriptování na serveru + databáze Wordpress Drupal Joomla