Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Jazyk HTML, úvod.

Podobné prezentace


Prezentace na téma: "Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Jazyk HTML, úvod."— Transkript prezentace:

1 Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Jazyk HTML, úvod

2 Čí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.

3 3 Publikování na Internetu 1.Vytvoření stránek 2.Umístění stránek na webový server

4 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ódue-stránkywebnode, …)

5 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ů Tagy: párové tučně počáteční tag koncový tag nepárové Pozn.: Tagy se nesmí křížit (biib x bibi) Tagy na stránce určují tzv. elementy Elementy jsou blokové a řádkové

6 6 Základní struktura stránky Je povinná! fráze určující prohlížeči (nebo i validátorům) verzi použitého jazyka zde začíná část stránky psaná jazykem html služební informace pro prohlížeč (tagy meta, title a další) zobrazovaná část stránky zde končí část stránky psaná jazykem html

7 7 TAGY, ATRIBUTY Odstavec, řádek 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: obsah Př.: obsah více atributů oddělujeme mezerami

8 8 BARVY Slovně (red, green, navy, …) RGB v šestnáctkové soustavě #ff00ff RGB v desítkové soustavě rgb(40,114,110)

9 9 Nečíslovaný a číslovaný seznam Nečíslovaný seznam – odrážky.. Číslovaný seznam Seznamy do sebe lze zanořovat

10 10 Tabulky 1 Přehledné zobrazení dat Layout stránek pomocí neviditelných tabulek Petr Veliký Car Václav Klaus Prezident Harald Modrozub Dánský král

11 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 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 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="http://www.felis.cz/obrazky/kote.gif“ Pozn.: Webové servery rozlišují velikost písmen! Jméno souboru nesmí obsahovat mezery a české znaky

14 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 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 16 Odkazy 2 Párový tag: Jdi na Seznam Obsahem tagu a může být i obrázek Odkaz na obecný soubor text ke stažení zde

17 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 skok na místo Běž na místo skok na místo z jiné stránky: Běž na místo Pozn.: mailto:

18 18 Provázání stránek na webu pomocí odkazů index.html Úvodní stránka se jmenuje index.html Oba základní způsoby lze kombinovat a větvit Zpět Další

19 19 Umístění stránek na Internet Vlastní server Webhosting – placený (ignum, O2,...) – neplacený - freehosting (Sweb, Webpark, WZ, …), reklama

20 20 Doporučené zdroje a nástroje JPEG Resampler ColorScheme Zen Garden V různých prohlížečích thimble.webmaker.org/ (Chrome) thimble.webmaker.org/

21 Obrázky v prezentaci použité jsou dílem autora. Použité zdroje


Stáhnout ppt "Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Jazyk HTML, úvod."

Podobné prezentace


Reklamy Google