Počítačové sítě a operační systémy
Jaromír Plhák, 5.4.2018PB169 Počítačové sítě a operační systémy
Cvičení 6 – HTML a tvorba
jednoduché webové stránky
PB169 Počítačové sítě a operační systémy Snímek 2 z 52
Struktura HTML stránky (1)
…
…
PB169 Počítačové sítě a operační systémy Snímek 3 z 52
Struktura HTML stránky (2)
Jaromír Plhák - osobní stránka
PB169 Počítačové sítě a operační systémy Snímek 4 z 52
Struktura HTML stránky (3)
Úvod
Na těchto stránkách najdete vše o mně
Formátovací značka
PB169 Počítačové sítě a operační systémy Snímek 5 z 52
DOM
PB169 Počítačové sítě a operační systémy Snímek 6 z 52
Tutoriál a úkol
• Tutoriál
– http://www.w3schools.com/html/html_intro.asp
– Pročíst po sekci „Colors“
• Vytvořte si vlastní jednoduché webové stránky na Aise
– https://www.fi.muni.cz/tech/unix/html-stranky.xhtml
– https://www.fi.muni.cz/tech/unix/ceske-html-stranky.xhtml
– Dvě úrovně nadpisů
– Krátký text v češtině (včetně háčků a čárek), který bude
formátovaný (nějaký text bude tučně, jiný barevně)
– Vložit alespoň dva obrázky (do adresáře img)
– Link na nějakou stránku (například www.fi.muni.cz)
– Jeden odstavec “lorem ipsum”
PB169 Počítačové sítě a operační systémy Snímek 7 z 52
Kódování - vlastní stránky
• https://www.fi.muni.cz/tech/unix/ceske-html-
stranky.xhtml
• Vytvořte soubor .htaccess (pokud již neexistuje)
• Nastavte AddDefaultCharset Off
• Do index.html
– V hlavičce vložte tag meta s příslušným kódováním
– Např.
• Ověřte, že se české znaky zobrazují korektně
PB169 Počítačové sítě a operační systémy Snímek 8 z 52
Utf-8
• Vytvořte si stránku index2.html s kódováním
utf-8
– Např. v LibreOffice Writer
– Nastavte správně meta tag
• Nahrajte jej na aisu
– Např. pomocí Altap Salamander - J:
• Ověřte si správné kódování souboru
– file -i
• Ověřte správné zobrazení v prohlížeči