~~NOCACHE~~ ~~REVEAL theme=dokuwiki&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&size=1024x768~~ ======Úvod HTML ====== =====HTML soubor ===== * Textový soubor s příponou htm či html. * Obsahuje běžný text, který je doplněn tagy. * Tagy = značky (výrazy) jazyka HTML. * HTML soubor lze vytvořit v obyčejném textovém editoru, který ukládá neformátovaný text, např. v poznámkovém bloku. * Aby se vytvořený soubor otevíral v Internetovém prohlížeči, musí mít příponu htm či html. * Zařídíme to tak, že příponu souboru změníme - přejmenujeme. =====HTML jazyk ===== * Jazyk obsahující značky – tagy. * Tagy se uzavírají do lomených závorek, např.:

text odstavce

* Tagy říkají prohlížeči (Exploreru,Mozille, Opeře ...), jak má dané texty či objekty zobrazovat - interpretovat. * Většina tagů je párových, tzn. vyskytují se před textem i na jeho konci. ===== Tagy ===== * Párové * Např.: **** je začátek tučného textu, **** je konec tučného textu. * První tag něco začíná a druhý to končí. * Lomítko znamená, že jde o uzavírací tag. * Nepárové * Např.: **** je tag pro vložení obrázku. * Jsou méně časté. ====Ukázka párového tagu ====

text

^ ^ ^ | | | začátek tagu text konec tagu ====Ukázka nepárového tagu ==== ^ ^ | | Tag s parametry obrazový soubor ====Párové tagy – další příklady ==== * * %%%% je začátek html souboru * %%%% je konec html souboru * je začátek hlavičky * je její konec * ; * je začátek těla stránky * je konec těla stránky ====Nepárové tagy – další příklady ==== * **** je tag pro obrázek ale nic jako neexistuje * **
** je tag pro řádkový zlom ale nic jako
neexistuje =====Struktura www stránky ===== * Doctype (typ dokumentu) * Head (hlavička) * Body (tělo stránky) ====Doctype ==== Tyto údaje např. řeknou prohlížeči: * v jaké verzi HTML je stránka napsána. * jaký je typ DTD (Document Type Definition). * DTD je jinými slovy návod pro prohlížeč zpracovávající dokument ----> ===Doctype – ukázka === [[https://www.w3.org/QA/2002/04/valid-dtd-list.html|Starší verze HTML]] <---- ====Head ==== * Hlavička je uzavřena do tagů * ... * Je v ní spousta užitečných informací. * Žádná z nich se ale nezobrazí přímo ve výsledné stránce * Přesto mají informace uvedené v hlavičce velký vliv zejména pro vyhledávání stránky. ----> Hlavička obsahuje zpravidla dvě základní informace: * Název stránky. Je vložen mezi tagy: * ... * Název stránky se zobrazí v horní liště prohlížeče. * Informace o kódování. Ta je uvozena tagem: * <---- ----> ===Head - ukázka === Toto je moje stránka <---- ====Body ==== * Tady je konečně všechno to, co se na naší stránce zobrazí. * Tělo je vloženo mezi párové tagy: * ... =====Ukázka HTML kódu www stránky ===== Toto je moje stránka

Úvod

Na těchto stránkách najdete všechno, co o mně chcete vědět.

 ==== Ukázka téže stránky v prohlížeči ==== {{:spse:pm3:pasted:20200922-200959.png}} ====== Shrnutí ====== * **** začíná dokument * **** končí dokument * **** a** ** začíná a končí hlavičku, která se sice nezobrazuje na stránce, ale obsahuje některé důležité údaje, například: * **** a **** - titulek vymezující název dokumentu * **** a ****, (co je mezi a , se bude zobrazovat.) * **** je tag, kterým začíná vlastní tělo dokumentu * (angl. body = tělo). === Zdroje === https://www.dumy.cz/material/49715-zaklady-tvorby-www-stranky-v-html-kodu-uvod