2. lekce: STRUKTURA DOKUMENTU
Úterý, 6. Leden. 2015 | 2. Lekce - Struktura dokumentu | Žádné komentáře
Webové stránky se neskládají pouze z textů a obrazků, ale také obsahují mnoho dalších informací, které využívá např. internetový prohlížeč nebo vyhledavací roboti. Tyto informace jsou nezbytné např. pro správné zobrazení stránky v prohlížeči. Uvadí se před samotným tělem dokumentu. Jsou to například tzv. meta-informace, skripty, styly a mnoho dalších.
Na začátku každé HTML stránky je potřeba uvést deklaraci typu dokumentu, která je nezbytná a prohlížeči řekne, jak má pracovat s obsahem souboru, o který jazyk se jedná atd. V HTML5 se zápis oproti předchozím verzím hodně zkrátil, nyní již není potřeba udávat zdlouhavé DTD specifikace dokumentu. Dokument v HTML5 začíná prostým zápisem:
Povinné elementy <html>, <head> a <body>
Element <html> ohraničuje veškerý obsah dokumentu včetně hlavičky.
Do hlavičky stránky <head> patří, mimo jiné, element title, který udává název stránky. Ten je důležitý pro vyhledávače, navíc je zobrazován z záhlaví okna prohlížeče.
<head>
<title>Základní HTML stránka</title>
Dále by měla být v hlavičče informace o kódování stránky. Ta vypadá takto:
Poté by mělo následovat ukončení hlavičky (head) a uvození těla stránky (body).
<body>
Do těla stránky již vkládáme vlastní obsah. Nyní vložíme jednoduchý řádek textu, který bude v elementu p neboli “paragraph” … česky odstavec.
Dále stačí jen zakončit tělo stránky a uzavřít element </html>.
</html>
Šablona dokumentu
Struktura dokumentu tak, jak by měla být součástí každé webové stránky, je tedy následující:
<html >
<head>
<meta charset=”utf-8″ />
<title>Základní HTML stránka</title>
</head>
<body>
<p>Samotný obsah stránky.</p>
</body>
</html>
TVORBA WEBOVÝCH STRÁNEK
ODKAZY
- CSS generátor písem
- CSS Pie – podpora CSS3 v IE
- CSS reset
- CSS3 generátor kódu
- Emulace starších verzí IE
- generátor barevných schémat
- generátor CSS spritů
- generátor CSS tlačítek
- generátor šablon 1
- generátor šablon 2
- generátor šablon 3
- generátor pozadí
- komprimace CSS souborů
- konsorcium W3C
- Lazy loading
- lorem ipsum generator
- obtékání komplikovaných objektů
- optimalizace CSS
- Podpora CSS3 a HTML5
- Podpora CSS3 v prohlížečích
- regulární výrazy
- Simulace pomalého připojení
- tabulky s kulatými rohy
- test barev z hlediska přístupnosti
- Testování webu na mobilních zařízeních
- W3C validátor XHTML
- w3schools – vše o tvorbě webu
- www.tvorba-webu.cz
- XHTML –> HTML 5
- získání palety barev
- změna barev v CSS souboru