(X)HTML. Internetové publikování

Transkript

1 (X)HTML Internetové publikování 1

2 Prohlížeč Obsluhuje přenos a interpretuje obsah Hlavní prohlížeče Microsoft Internet Explorer Firefox Opera Safari

3 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

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

5 Vývoj HTML Značkovací jazyk založený na SGML Standard Generalized Markup Language ISO 8879: 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

6 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

7 XHTML extensible HyperText Markup Language Upravená verze HTML 4.01 Vyhovuje standardu XML Nevyžaduje podporu XML na straně prohlížeče Striktnější

8 XML extensible Markup Language SGML light Orientace na informační hodnotu dokumentu Možnost definovat další jazyky založené na XML Striktnější syntaxe

9 HTML5 Specifikace i podpora se vyvíjejí Rozsáhlý standard zahrnující Markup Javascriptová API Canvas (kreslení v prohlížeči) Offline aplikace Podpora v prohlížečích 9

10 První WWW stránka 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

11 První správná WWW stránka Stránka vyhovuje standardu, takže bude fungovat ve všech prohlížečích, které jej podporují

12 Online zdoje informací Specifikace XHTML Tutorial, příklady, příručka

13 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

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

15 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ží

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

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

18 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

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

20 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

21 Č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> studijni-materialy/ip-s-001/p03.html

22 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> -materialy/ip-s-001/p04.html

23 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 </pre> </body>

24 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

25 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

26 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

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

28 Grafika <body> <hr /> <img src=" alt="valid XHTML 1.0!" height="31" width="88" /> </body>

29 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

30 Odkazy <body> <p><a href=" 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>

31 Cvičení Stáhněte si cvičný text Vytvořte na základě textu XHTML dokument se strukturou podobnou ukázce vpravo URL loga: URL odkazu na FCHT: Zkontrolujte, zda je vytvořený dokument XHTML 1.0 validní

32 Struktura XHTML stránky <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <title>...</title> </head> <body>... </body> </html> Prolog XML Definice typu dokumentu použitý standard Vlastní dokument

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

34 Definice Typu Dokumentu Transitional (volnější) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Strict (přísnější, nepovoluje HTML formátování ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Frameset (rámce <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

35 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) ious_gaps 35

36 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

37 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 Zjištění módu PageInfo (Mozilla, Opera) Vlastnost DOM document.compatmode 37

38 Vlastní dokument element <html> <html xmlns=" <head>... </head> <body>... </body> </html> Musí obsaovat deklaraci jmenného prostoru xmlns= Pokud se deklarace vynechá nedochází k problémům, jedná-li se o čisté XHTML

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

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

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

42 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ší

43 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

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

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

46 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

47 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

48 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 "> <meta http-equiv="content-type" content="text/html; charset=utf-8"> Obě kódování musí být nastavena stejně

49 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; Й Й

50 Prvky HTML jazyka Entity definované XHTML Přehlednější v češtině (písmenné)

51 Prvky HTML jazyka Entity zadané číslem znaku v tabulce UNICODE - Seznam znaků Tyto znaky se zobrazí správně pokud je podporuje prohlížeč a jsou dostupné v použitém fontu

52 Tvořte validní kód Zvykněte si u každé stránky,kterou vytvoříte ověřit její validitu Validace uploadem souboru nemusí fungovat správně při použití MSIE

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

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

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

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

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

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

59 Publikace dat na webserver Většinou použití FTP protokolu (nebo modernějších variant) klient např. WinSCP Lokální síť např. uživatelské stránky na VŠCHT WWW formuláře omezený přístup většinou u služeb zdarma

60 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

61 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

62 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

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

64 Element <frameset> Definován pouze v <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " frameset.dtd"> Atributy cols počet rámců vedle sebe rows počet rámců nad sebou cols="25%, 75%" cols="250, *, 20%"

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

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

67 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

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

69 Správa webové prezentace Skriptování na serveru nutné aby server podporoval skriptování SSI  ASP  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í

70 Správa webové prezentace Redakční systém pokročilé skriptování na serveru + databáze Wordpress Drupal Joomla