Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.

Prezentace na téma: "Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př."— Transkript prezentace:

1 Jazyk HTML

2 Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.

3  Parametry př. Leden př. Leden  Hodnoty př. př.

4 Rodiče a potomci  Př.......... SPRÁVNĚ......... SPRÁVNĚ...... ŠPATNĚ...... ŠPATNĚ

5 Návrh webu  Proč stránky tvořím?  Pro koho?  Kolik stránek budu potřebovat? Jaká bude struktura?  Vymyslet systém pojmenování

6 Základní části stránky..... označení typu dokumentu a verze HTML..... označení typu dokumentu a verze HTML..... začátek textu ve formátu HTML..... začátek textu ve formátu HTML..... začátek hlavičky..... začátek hlavičky titulek..... popis zobrazovaný v titulku okna titulek..... popis zobrazovaný v titulku okna..... konec hlavičky..... konec hlavičky..... začátek zobrazovaného obsahu stránky..... začátek zobrazovaného obsahu stránky obsah stránky..... konec zobrazovaného obsahu stránky..... konec zobrazovaného obsahu stránky..... konec textu ve formátu HTML..... konec textu ve formátu HTML

7 Tag HTML  Označuje začátek a konec dat tvořících webovou stránku..... dokument HTML </html>

8 Tag HEAD  Vymezuje hlavičku webové stránky, která obsahuje informace o obsahu stránky..... meta informace..... meta informace titulek >..... popis zobrazovaný v titulku okna titulek >..... popis zobrazovaný v titulku okna

9 Tag BODY  Obsahuje vše, co se objeví uvnitř okna prohlížeče obsah stránky obsah stránky

10 Komentáře  Nemají žádný vliv na vzhled stránky, po zobrazení stránky se o nich nedozvíme

11 Nadpisy  V HTML jsou definovány nadpisy různých úrovní, může jich být 6 text nadpisu text nadpisu

12 Odstavce  Prohlížeče ignorují všechny mezery a znaky konce odstavce, které jsou ve zdrojovém kódu stránky, proto je nutné přesně označit, kde mají odstavce být text odstavce text odstavce

13 Odřádkování  Text v odstavci se automaticky zalamuje podle velikosti okna. Když je třeba, aby text začínal na novém řádku, použijeme

14 Formátování textu  Tučné písmo <b>text</b>  Kurzíva text text  Podtržené písmo text text  Neproporcionální písmo text text

15 Formátování textu  Přeškrtnutí text text  Zvětšení a zmenšení písma o 1 bod text text

16 Formátování textu  Horní index text text  Dolní index text text

17 URL  URL (Uniform Resource Locator) – jednoznačné umístění zdroje http://www.stranky.cz/abc/xxx.html Protokol https://www.stranky.cz ftp://ftp.stranky.cz/pub/prog.exe mailto:sloupova@gop.pilsedu.cz file:///c|/cesta/soubor.html file:///c|/cesta/soubor.html

18 Absolutní adresa URL  Obsahuje kompletní cestu k souboru, včetně protokolu, názvu serveru, cesty a názvu souboru  Používá se vždy, když odkazuji na soubor z jiného serveru nebo když adresa používá jiný protokol než http.

19 Relativní adresa URL  Popisuje umístění požadovaného souboru s odkazem na umístění souboru, který obsahuje adresu URL samotnou  Používá se pro soubory na stejném serveru => jednodušší zápis, funguje, i když stránky přesuneme

20 Relativní adresa URL  Př. xxx.html... soubor je ve stejném adresáři jako stránka obrazky/deticky.jpg... soubor je v podadresáři obrazky (aktuálního adresáře)../info/data.html... soubor je v adresáři na vyšší pozici ve stromové struktuře

21 Obrázky  formát jpg, gif, png  velikost a rozlišení  rychlost načítání  průhlednost  animace

22 Jak získat obrázky  Koupit nebo stáhnout už připravené  Digitalizovat nebo naskenovat fotky  Vyfotit digitálním fotoaparátem  Nakreslit v grafickém editoru  Grafické editory: Adobe Photoshop, Gimp, Irfan View, Paint Shop Pro atd.

23 Vložení obrázku na stránku    další parametry: alt... alternativní text width... šířka height... výška

24 Zarovnávání obrázků  vlastnost align, hodnoty left, right, top, middle, bottom  Ukončení obtékání textu další hodnoty left, right

25 Mezery kolem obrázků  Parametry hspace, vspace  Zavržené parametry, lépe nastavit pomocí stylů

26 Horizontální linka  Atributy:  size=“x”.....tloušťka čáry, v pixelech  width=“x”.....délka čáry, v pixelech nebo v % šířky okna  align..... zarovnávání  noshade..... čára bez stínu

27 Odkazy  Umožňují přecházet z jedné stránky na druhou, spouštět video nebo hudbu, stahovat soubory pomocí ftp atd. název odkazu název odkazu  Jiné formáty souboru: prohlížeč má určený program, jimž se soubor otevírá.

28 Odkazy  text odkazu  text odkazu  E-mailová adresa jako odkaz text odkazu text odkazu  

29 Odkazy  vlastnost target Př. název odkazu název odkazu

30 Odkazy  Výchozí cíl odkazů na stránce Pozn. Pozn.

31 Záložky  Lze odkazovat na jednotlivé části dokumentu  Definice záložky: Kapitola 1  Definice záložky: Kapitola 1  Odkaz na záložku Kapitola 1  Odkaz na záložku Kapitola 1 Pozn. Je možné odkazovat i na záložky umístěné v jiném dokumentu, např. text odkazu Pozn. Je možné odkazovat i na záložky umístěné v jiném dokumentu, např. text odkazu

32 Seznamy  Nečíslovaný seznam …

33 Seznamy  Číslovaný seznam …

34 Seznamy  Definiční seznamy Pojem Pojem Vysvětlení Vysvětlení …

35 Tabulky … … Pozn. … záhlaví tabulky

36 Tabulky  Rámeček tabulky BORDER  Slučování buněk COLSPAN, ROWSPAN  Velikost buněk WIDTH  Odsazení textu v buňkách CELLPADDING  Vzdálenost mezi buňkami CELLSPACING