Tvorba webu Jazyk HTML, úvod Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Jazyk HTML, úvod
CZ.1.07/1.5.00/34.0266 VY_12_INOVACE_PoP_IN_4OA_16 Číslo materiálu Číslo projektu CZ.1.07/1.5.00/34.0266 Číslo materiálu VY_12_INOVACE_PoP_IN_4OA_16 Autor Petr Polách Tematický celek Informační gramotnost Ročník 4. Datum tvorby 4. 5. 2013 Anotace Prezentace slouží jako podpora při výuce základů jazyka HTML Metodický pokyn Prezentace slouží jako podpora při výuce s použitím projektoru nebo programu typu Master Eye. XxX – značka autora, yy – číslo sady (bude přiděleno) zz – číslo materiálu v rámci sady (1–20) tttt – volitelné textové označení podle obsahu
Publikování na Internetu Vytvoření stránek Umístění stránek na webový server
Způsoby vytváření www stránek Přímou editací zdrojového kódu v jazyce html: Home Site, PsPad, Poznámkový blok + malé soubory = rychlé načítání + dokonalá kontrola nad kódem - nutná znalost HTML Metoda WYSIWYG (‘what you see is what you get’) MS FrontPage, NVU, Uložit jako html (např.: v MS Office) + není nutná znalost HTML - velké soubory – pomalé načítání - častěji se v různých prohlížečích zobrazují odlišně Vyplněním šablony na serveru (e-stránky, webnode, …) + není nutná znalost HTML + hezké stránky - malá kontrola kódu
Základy jazyka HTML Webová stránka je textový soubor obsahující pokyny pro prohlížeč, co a jak se má v prohlížeči zobrazit. Pokyny pro zobrazení jsou vloženy pomocí hypertextových značek – tagů <tag> Tagy: párové <b> tučně</b> počáteční tag koncový tag nepárové <hr> Pozn.: Tagy se nesmí křížit (biib x bibi) Tagy na stránce určují tzv. elementy Elementy jsou blokové a řádkové
Základní struktura stránky Je povinná! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> fráze určující prohlížeči (nebo i validátorům) verzi použitého jazyka <html> zde začíná část stránky psaná jazykem html <head> služební informace pro prohlížeč (tagy meta, title a další) </head> <body> zobrazovaná část stránky </body> </html> zde končí část stránky psaná jazykem html
TAGY, ATRIBUTY Odstavec <p>, řádek <br> Tagy pro nadpisy h1..h6 Tagy pro formátování písma: b, i, u, sub, sup, big, small Vodorovná čára – hr Atributy dají se použít jen ke svým elementům upravují vzhled elementů píší se do úvodního tagu: <tag atribut = "hodnota“>obsah</tag> Př.: <body bgcolor=“navy“ text=“white“> obsah</body> více atributů oddělujeme mezerami
BARVY Slovně (red, green, navy, …) http://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html RGB v šestnáctkové soustavě #ff00ff RGB v desítkové soustavě rgb(40,114,110)
Nečíslovaný a číslovaný seznam Nečíslovaný seznam – odrážky <ul> <li></li> . . <li></li> </ul> Číslovaný seznam <ol type="1, a, A, i, I“ start=“ "> Seznamy do sebe lze zanořovat
Tabulky 1 Přehledné zobrazení dat Layout stránek pomocí neviditelných tabulek <table border=“1“> <tr><td>Petr</td><td>Veliký</td><td>Car</td></tr> <tr><td>Václav</td><td>Klaus</td><td>Prezident</td></tr> <tr><td>Harald</td><td>Modrozub</td><td>Dánský král</td></tr> </table>
Tabulky 2 Atributy pro celou tabulku border width – absolutně (px) x relativně (%) bgcolor, bordercolor cellspacing, cellpadding align – center, left, right (text obtéká) Tag caption – align (center,left, right) – valign (top, bottom)
Tabulky 3 Atributy pro tr, th a td align (left,center,right) valign (top, bottom, middle) bgcolor width (absolutně, relativně, px,%) colspan rowspan
Volání souborů v html Zobrazení grafiky, odkaz na jinou stránku, volání externích skriptů, externích stylů,… Soubor umístěný společně s volající stránkou voláme relativně [cestou]/jménem: src="kote.gif“ (ve stejné složce) src="obrazky/kote.gif“ (v podsložce obrazky) src="..\kote.gif“ (v nadřízené složce) Pozn.: Před relativním voláním musí být volající stránka uložena!!! Soubor kdekoliv z internetu voláme absolutně (celé URL) src="http://www.felis.cz/obrazky/kote.gif“ Pozn.: Webové servery rozlišují velikost písmen! Jméno souboru nesmí obsahovat mezery a české znaky
Obrázky Nepárový tag img img (src, alt, title, width, height, align, hspace, vspace, border) body, table atribut background - dláždění
Odkazy 1 Odkaz: Absolutní Relativní Na konkrétní místo nějaké stránky Odkaz na: Webovou stránku Obrázek Obecný soubor (doc, zip, xls, ... - Otevřít x Uložit)
Odkazy 2 Párový tag: <a href=“http://www.seznam.cz“>Jdi na Seznam</a> Obsahem tagu a může být i obrázek <a href=“http://www.seznam.cz“> <img src=“sezn.jpg”></a> Odkaz na obecný soubor <a href=“soubory/dopis.doc“>text ke stažení zde</a>
Odkazy 3 Atribut target = "_blanc“ odkaz se otevře do nového (dalšího) okna prohlížeče Odkaz na jiné místo v dokumentu: označení místa <a name=“misto”></a> skok na místo <a href=“#misto”>Běž na místo</a> skok na místo z jiné stránky: <a href=“http://www.server.cz/stranka.html#misto”>Běž na místo</a> Pozn.: mailto:
Provázání stránek na webu pomocí odkazů Zpět index.html index.html Další Úvodní stránka se jmenuje index.html Oba základní způsoby lze kombinovat a větvit
Umístění stránek na Internet Vlastní server Webhosting placený (ignum, O2, ...) neplacený - freehosting (Sweb, Webpark, WZ, …), reklama
Doporučené zdroje a nástroje www.jakpsatweb.cz JPEG Resampler ColorScheme Zen Garden V různých prohlížečích thimble.webmaker.org/ (Chrome)
Obrázky v prezentaci použité jsou dílem autora. Použité zdroje Obrázky v prezentaci použité jsou dílem autora. XxX – značka autora, yy – číslo sady (bude přiděleno) zz – číslo materiálu v rámci sady (1–20) tttt – volitelné textové označení podle obsahu