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

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, …) http://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html http://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html 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 www.jakpsatweb.cz 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