Úvod do jazyka HTML Jiří Mühlfait 1
Co je HTML? HTML je jedním z jazyků používaných pro tvorbu internetových stránek Byl vytvořen v roce 1990 pro CERN Představuje zjednodušenou verzi mnohem složitějšího jazyka SGML Jeho následný vývoj byl ovlivněn vývojem webových prohlížečů 2
Jak poznám HTML? Soubory HTML mají příponu *.html nebo *.htm Spouštěcí soubor se obvykle jmenuje index Po poklepání se soubor otevře v internetovém prohlížeči Existují modifikace jako DHTML a XHTML 3
Prohlížení HTML K prohlížení HTML se používá tzv. webový prohlížeč První prohlížeč se jmenoval World Wide Web (to dalo vzniknout zkratce www) Dnes existuje celá řada prohlížečů Některé prohlížeče zobrazují obsah trochu jinak než ostatní Optimalizace pro prohlížeče 4
Editace HTML K naprogramování jednoduché prezentace stačí znalost několika málo tagů K editaci HTML lze použít jakýkoliv textový editor (poznámkový blok, word) Pokročilé editory zvýrazňují syntaxi souborů a usnadňují orientaci ve zdrojovém kódu PSPAD - freeware editor 5
Rozšíření HTML Samotné HTML nedokáže vytvořit graficky a funkčně bohatou prezentaci Moderní prezentaci tvoří tři vrstvy - HTML, CSS, JS a další scriptovací jazyky (JS je nejčastější) HTML - obsahová vrstva CSS - vzhledová vrstva JS - funkční vrstva 6
Zobrazení obrázku nad textem pomocí JS 7
Podoba HTML HTML je značkovací jazyk - součástí zdrojového kódu je vlastní text i instrukce pro jeho zpracování <h1>nadpis</h1> <p>text prvního odstavce se <em>zvýrazněným</em> slovem.</p> 8
Podoba HTML Jednotlivé značky v kódu uzavřené ve špičatých závorkách se nazývají tagy Tagy mohou být párové <p>text odstavce</p> a nepárové <hr> Tvoří jednotlivé elementy dokumentu Tagy v sobě mohou mít zpřesňující atributy <a href="http://example.com" target="_blank" title="titulek" class="nazev_tridy">text odkazu</a> 9
HTML dokument <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="pspad editor, www.pspad.com"> <title></title> </head> <body> </body> </html> 10
Základní tagy <html></html> tag, kterým musí začínat a končit každá HTML stránka <head></head> párový tag head v sobě nese informace o stránce, např. její kódování, titulek, odkazy na externí soubory <title></title> titulek stránky v hlavičče <body></body> tělo dokumentu uchovávající veškerý zobrazovaný obsah 11
Přehled tagů 1 <p></p> odstavec <span></span> úsek textu <font></font> font (barva, velikost) <h1-6></h1-6> nadpis <b></b> tučné <i></i> kurzíva <em></em> kurzíva <u></u> podtržené <sub></sub> dolní index <sup></sup> horní index <br> zalomení řádku <strong></strong> tučné 12
Přehled tagů 2 <a></a> odkaz <li></li> položka seznamu <ul></ul> odrážkový seznam <ol></ol> číslovaný seznam <img> obrázek <table></table> tabulka <tr></tr> řádek tabulky <td></td> buňka tabulky <div></div> oddíl 13
Použití atributů Atributy se zapisují za jméno tagu mezi špičaté závorky Každý element může mít několik atributů Specifikují hodnoty elementu 14
Obecné atributy class - třída pro CSS (text) id - identifikátor pro CSS (text) style - zápis CSS stylu (u nás je načítaný z externího CSS) title - titulek prvku (text) alt - alternativní text (text) src - zdroj externích dat (obrázky, video,...) (adresa) width, height - šířka a výška elementů (px, %) align - zarovnání objektu (left, right, center) color - barva elementu (text, hexadecimálně) 15
Syntaxe <tag atribut= hodnota > jednotlivé atributy elementů se oddělují čárkou např: <img src= krava.jpg, width= 70%, height= 70% > 16
Adresování Absolutní src= d:/dvd/prezentace/obrazky/krava.jpg Relativní src= obrazky/krava.jpg, src=../obrazky/krava.jpg Výhodnější je použití relativního adresování, nemusíme složitě vypisovat celou cestu Odpovídá úrovni, na které jsou data vzhledem k úrovni souboru, do kterého se načítají 17
Vzhled prezentace V našem případě je vzhled prezentace (velikosti písma, řádkování, styly nadpisů,...) předdefinován externím CSS souborem Pro získání potřebného vzhledu postačí element správně identifikovat Ke vkládání složitějších objektů (fotky, videa) používejte předdefinované bloky kódu 18
Zásady programování Nejdůležitější je udržovat zdrojový kód přehledný. Zrychluje to programování a usnadňuje následné úpravy. Snažit se postupovat logicky a neskákat z místa na místo (text - odkazy - obrázky -...). Dávat si pozor, co kde mažete, nebo dopisujete. Poškození části kódu může rozhodit prezentaci. 19
Praktická cvičení 20
Praktická cvičení Pomoc při psaní HTML na www.jakpsatweb.cz PSPAD editor na www.pspad.com/cz 21