Úvod do jazyka HTML. Jiří Mühlfait

Rozměr: px

Začít zobrazení ze stránky:

Download "Úvod do jazyka HTML. Jiří Mühlfait"

Blažena Simona Novotná
před 7 lety
Počet zobrazení:

1 Úvod do jazyka HTML Jiří Mühlfait 1

2 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

3 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

4 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

dalo vzniknout zkratce www) Dnes existuje celá řada prohlížečů

5 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

editor (poznámkový blok, word) Pokročilé editory zvýrazňují syntaxi

6 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

- HTML, CSS, JS a další scriptovací jazyky (JS je nejčastější)

7 Zobrazení obrázku nad textem pomocí JS 7

8 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

9 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=" target="_blank" title="titulek" class="nazev_tridy">text odkazu</a> 9

elementy dokumentu Tagy v sobě mohou mít zpřesňující atributy <a

10 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, <title></title> </head> <body> </body> </html> 10

content="text/html; charset=windows-1250"> <meta name="generator"

11 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

její kódování, titulek, odkazy na externí soubory <title></title> titulek

12 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

13 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

14 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

15 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

(text) src - zdroj externích dat (obrázky, video,.

16 Syntaxe <tag atribut= hodnota > jednotlivé atributy elementů se oddělují čárkou např: <img src= krava.jpg, width= 70%, height= 70% > 16

17 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

jpg Výhodnější je použití relativního adresování, nemusíme složitě

18 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

..) předdefinován externím CSS souborem Pro získání potřebného vzhledu

19 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

Snažit se postupovat logicky a neskákat z místa na místo (text - odkazy -

20 Praktická cvičení 20

21 Praktická cvičení Pomoc při psaní HTML na PSPAD editor na 21

Podobné dokumenty

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení