Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
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
2
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/ Čí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 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
3
Publikování na Internetu
Vytvoření stránek Umístění stránek na webový server
4
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
5
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é
6
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
7
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
8
BARVY Slovně (red, green, navy, …) RGB v šestnáctkové soustavě #ff00ff RGB v desítkové soustavě rgb(40,114,110)
9
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
10
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>
11
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)
12
Tabulky 3 Atributy pro tr, th a td align (left,center,right)
valign (top, bottom, middle) bgcolor width (absolutně, relativně, px,%) colspan rowspan
13
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=" Pozn.: Webové servery rozlišují velikost písmen! Jméno souboru nesmí obsahovat mezery a české znaky
14
Obrázky Nepárový tag img
img (src, alt, title, width, height, align, hspace, vspace, border) body, table atribut background - dláždění
15
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)
16
Odkazy 2 Párový tag: <a href=“ na Seznam</a> Obsahem tagu a může být i obrázek <a href=“ <img src=“sezn.jpg”></a> Odkaz na obecný soubor <a href=“soubory/dopis.doc“>text ke stažení zde</a>
17
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=“ na místo</a> Pozn.: mailto:
18
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
19
Umístění stránek na Internet
Vlastní server Webhosting placený (ignum, O2, ...) neplacený - freehosting (Sweb, Webpark, WZ, …), reklama
20
Doporučené zdroje a nástroje
JPEG Resampler ColorScheme Zen Garden V různých prohlížečích thimble.webmaker.org/ (Chrome)
21
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
Podobné prezentace
