HTML pokračování
Co obsahuje každý html dokument? <html><head> stránka stránka <body> ahoj světe </body></html> HTML
HTML uzavírá zdrojový kód uzavírá zdrojový kód Je dále rozdělen na hlavu a tělo Je dále rozdělen na hlavu a tělo
HTML - HEAD Přináší důležité informace prohlížeči Přináší důležité informace prohlížeči Definuje základní parametry Definuje základní parametry Jméno stránky Jméno stránky Verzi HTML Verzi HTML Výchozí adresář (k němu se vztahují relativní adresy externích souborů) Výchozí adresář (k němu se vztahují relativní adresy externích souborů) Nemá většinou vliv na výslednou podobu zobrazení kódu HTML v prohlížeči Nemá většinou vliv na výslednou podobu zobrazení kódu HTML v prohlížeči
HTML - HEAD Definuje základní adresář (ve vztahu k relativní cestě je adresářem kořenovým) Definuje základní adresář (ve vztahu k relativní cestě je adresářem kořenovým)Př. pokud je …pokus/obrazky a ve složce obrazky je logo.gif stačí napsat pouze relativní cestu obrazky/logo.gif (není třeba celé adresy) pokud je …pokus/obrazky a ve složce obrazky je logo.gif stačí napsat pouze relativní cestu obrazky/logo.gif (není třeba celé adresy) Nedefinování → jako základní adresář bude brán adresář, z něhož je zobrazena aktuální stránka v prohlížeči Nedefinování → jako základní adresář bude brán adresář, z něhož je zobrazena aktuální stránka v prohlížeči
HTML - HEAD Zvuk na pozadí Př. Př. Parametr SRC – definuje zvukový soubor (20-30 kB) formát MIDI (digitální vzorky nástrojů paměti zvukové karty) Parametr SRC – definuje zvukový soubor (20-30 kB) formát MIDI (digitální vzorky nástrojů paměti zvukové karty) WAV, AU, MP3, VOC apod. - nedokáží dodržet předepsanou délku WAV, AU, MP3, VOC apod. - nedokáží dodržet předepsanou délku Parametr LOOP – určuje počet opakování Parametr LOOP – určuje počet opakování 1x opakování: LOOP= “1“ 1x opakování: LOOP= “1“ nekonečné : LOOP= “infinite“ nekonečné : LOOP= “infinite“
HTML - HEAD Zvuk na pozadí Př. Př. <HEAD> Stránka Stránka <BODY> ahoj světe </BODY></HTML>
HTML – Formátování textu Obsahuje vše, co má prohlížeč zobrazit Obsahuje vše, co má prohlížeč zobrazit Enter = mezera Enter = mezera Odřádkování značka (nepárová) Odřádkování značka (nepárová) Slouží: Slouží: k odřádkování na další řádek bez ohledu na velikost okna nebo rozlišení obrazovky k odřádkování na další řádek bez ohledu na velikost okna nebo rozlišení obrazovky k ukončení odstavce nebo vynechání řádku k ukončení odstavce nebo vynechání řádku Př. Př.<BODY> Ahoj světe Jak se máš? Já se učím HTML! Ahoj světe Jak se máš? Já se učím HTML! </BODY>
HTML – Formátování textu Více mezer v kódu = 1 mezera v prohlížeči Více mezer v kódu = 1 mezera v prohlížeči Pevná mezera - syntaxe: Pevná mezera - syntaxe:
HTML – Formátování textu Odstavce a jejich zarovnání Př. Ahoj světe Jak se máš? Já se učím HTML! Ahoj světe Jak se máš? Já se učím HTML! </DIV> ALIGN = zarovnání ALIGN = zarovnání Left= vlevo Left= vlevo Right = vpravo Right = vpravo Center = na střed Center = na střed
HTML – Formátování textu Odstavce a jejich zarovnání Podoba s, ale mezi odstavce dává ještě prázdný řádek ( = ) Podoba s, ale mezi odstavce dává ještě prázdný řádek ( = )Př. Ahoj světe Jak se máš? Já se učím HTML! Ahoj světe Jak se máš? Já se učím HTML! </P>
HTML – Formátování textu Odstavce a jejich zarovnání Pro zobrazení textu, jak je uveden ve zdrojovém kódu Pro zobrazení textu, jak je uveden ve zdrojovém kódu
HTML – Formátování textu Písmo – zvýraznění, efekty Př. Písmo bez formátovacích znaků </P> Ahoj světe Ahoj světe Jak se máš? Jak se máš? Já se učím HTML! Já se učím HTML! Všechno najednou Všechno najednou </P>
HTML – Formátování textu Písmo – zvýraznění, efekty - přeškrtnutí - přeškrtnutí - písmo o 1 bod větší nežli standardní - písmo o 1 bod větší nežli standardní - písmo o 1 bod menší nežli standardní - písmo o 1 bod menší nežli standardní - dolní index - dolní index - horní index - horní indexPř.<BODY> objeví se mi přeškrtnutý text objeví se mi přeškrtnutý text
HTML - BODY Písmo Parametr SIZE= velikost – velikost zvoleného písma 1-7 Parametr SIZE= velikost – velikost zvoleného písma 1-7 Zadáním + zvětším aktuální velikost o 1 Zadáním + zvětším aktuální velikost o 1 Zadáním – zmenším aktuální velikost o 1 Zadáním – zmenším aktuální velikost o 1 Parametr FACE= písmo – název písma – přesně (jinak se zobrazí standardní Times New Roman) Parametr FACE= písmo – název písma – přesně (jinak se zobrazí standardní Times New Roman) Parametr COLOR = barva písma – red, yellow, blue Parametr COLOR = barva písma – red, yellow, blue Písmo velikosti 2, Arial, červeně Písmo velikosti 2, Arial, červeně “
HTML Písmo – implicitní nastavení Parametr SIZE= velikost – velikost zvoleného písma 1-7 Parametr SIZE= velikost – velikost zvoleného písma 1-7 “
HTML Nadpisy Nadpisy 6 úrovní nadpisů, … 6 úrovní nadpisů, … Standardně je nadpis zarovnán doleva Standardně je nadpis zarovnán doleva Lze použít parametr Align Lze použít parametr Align Nadpis zarovnaný na střed Nadpis zarovnaný na střed
HTML Barva Parametr Color = zadává se “jménem“ (základní barvy) nebo pomocí hexadecimálních čísel (8 bitů=256 kombinací=dvojciferné hexadecimální číslo) Parametr Color = zadává se “jménem“ (základní barvy) nebo pomocí hexadecimálních čísel (8 bitů=256 kombinací=dvojciferné hexadecimální číslo) RGB: Červená = 00, zelená = 00, modrá=FF RGB: Červená = 00, zelená = 00, modrá=FF Př.: Př.: Aqua (tyrkysová) = “#00FFFF“ Aqua (tyrkysová) = “#00FFFF“ Black (černá) = “#000000“ Black (černá) = “#000000“
HTML - BODY Výchozí nastavení barev Implicitní barvy se zadávají jako parametr tagu Implicitní barvy se zadávají jako parametr tagu Parametry Parametry BGCOLOR = pozadí BGCOLOR = pozadí TEXT = barva textu TEXT = barva textu LINK = barva odkazu (standardně – modrá) LINK = barva odkazu (standardně – modrá) VLINK = barva navštíveného odkazu (standardně – fialová) VLINK = barva navštíveného odkazu (standardně – fialová) ALINK = barva odkazu při klepnutí (standardně – červená) Př.: ALINK = barva odkazu při klepnutí (standardně – červená) Př.: Př.: Př.:
HTML - hyperlink Parametr HREF=“soubor“ Parametr HREF=“soubor“ Př.: Př.: Toto je odkaz na další stránku Toto je odkaz na další stránku Odkazů v textu na 1 stránku může být libovolné množství Odkazů v textu na 1 stránku může být libovolné množství “
HTML – Titulní stránka Př. Hlavní nabídka společnosti Hlavní nabídka společnosti Vítejte na stránkách společnosti Vítejte na stránkách společnosti Vyberte si jednu z následujících možností Vyberte si jednu z následujících možností Informace o společnosti Informace o společnosti Produktové portfolio Produktové portfolio Ceník Ceník Seznam prodejem Seznam prodejem Kontakty Kontakty Napište nám Napište nám </BODY></HTML>
HTML – provázanost stránek Př. Hlavní nabídka společnosti Hlavní nabídka společnosti Vítejte na stránkách společnosti Vítejte na stránkách společnosti Vyberte si jednu z následujících možností Vyberte si jednu z následujících možností Informace o společnosti Informace o společnosti Produktové portfolio Produktové portfolio Ceník Ceník Seznam prodejem Seznam prodejem Kontakty Kontakty Napište nám Napište nám [ Informace o společnosti - Produktové portfolio - Produktové portfolio - Ceník - Ceník - Seznam prodejem Seznam prodejem Kontakty - Kontakty - Napište nám ] Napište nám ]</BODY></HTML>