Ú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
•
Jeho následný vývoj byl ovlivněn vývojem webových prohlížečů
Představuje zjednodušenou verzi mnohem složitějšího jazyka SGML
2
Jak poznám HTML? • • •
Soubory HTML mají příponu *.html nebo *.htm
•
Existují modifikace jako DHTML a XHTML
Spouštěcí soubor se obvykle jmenuje index Po poklepání se soubor otevře v internetovém prohlížeči
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čů
•
Optimalizace pro prohlížeče
Některé prohlížeče zobrazují obsah trochu jinak než ostatní
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í
Nadpis
Text prvního odstavce se <em>zvýrazněným slovem.
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é
Text a nepárové
• •
Tvoří jednotlivé elementy dokumentu
•
odstavce
Tagy v sobě mohou mít zpřesňující atributy
text odkazu
9
HTML dokument <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com">
10
Základní tagy •
tag, kterým musí začínat a končit každá HTML stránka
•
párový tag head v sobě nese informace o stránce, např. její kódování, titulek, odkazy na externí soubory
• •
titulek stránky v hlavičče tělo dokumentu uchovávající veškerý zobrazovaný obsah
11
Přehled tagů 1 • •
odstavec <span> úsek textu
•
font (barva, velikost)
• • •
nadpis
tučné
• • • • • •
kurzíva <em> kurzíva
podtržené <sub> dolní index <sup> horní index
zalomení řádku
<strong> tučné
12
Přehled tagů 2 • • •
odkaz
položka seznamu
odrážkový seznam
•
číslovaný seznam
•
oddíl
• • • •
![]()
obrázek
tabulka
|
řádek tabulky
| buňka tabulky
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 • • •
jednotlivé atributy elementů se oddělují čárkou např: 
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
