IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace. Na ukázku jsou připraveny webové stránky fiktivního knihkupectví, které budou sloužit jako návod nebo rámec, ve kterém se budeme pohybovat. Obsah ale není tak důležitý, jde především o principy. Tvorba webu (včetně formátování) je rozdělena do tří navazujících kroků, kdy se web postupně rozvíjí a doplňuje. Pro každý krok je dán rámec, v němž se budeme pohybovat, je zde shrnuto, co by web po dokončení každého kroku měl obsahovat. Zásady Při tvorbě webu je vhodné dodržovat následující zásady: Pište kód přehledně a čitelně, používejte odsazování a volné řádky. Dodržujte zásady jazyka HTML (uzavírání párových značek, vhodné parametry... ). Soubory pojmenujte přehledně a výstižně. Pro zjednodušení práce je vhodné vyhnout se v názvu mezerám a znakům s diakritikou. Zvolte si adresářovou strukturu pro ukládání všech potřebných souborů (HTML stránky, styly, obrázky a další) a dodržujte ji (není příliš vhodné mít soubory rozsypané po Ploše). Hotovou HTML stránku nebo soubor se styly je vhodné nechat zkontrolovat validátorem: http://validator.w3.org/ pro HTML, http://jigsaw.w3.org/css-validator/ pro CSS. Poznámka pro cvičení: Pokud pracujete na lokálním stroji, nahrajte po ukončení práce všechny potřebné soubory na server Akela (do adresáře s názvem public html). 1
Krok 1 jednoduchá stránka a styly HTML Tvorbu zahájíme úvodní stránkou. Jde (obvykle) o první stránku, kterou návštěvník webu uvidí. Obsahuje název webu a důležité informace (krátké představení, novinky, odkazy na další témata). V titulní stránce by se měly objevit tyto značky jazyka HTML: Hn, P, OL, UL, LI, popř. HR. Lze zařadit i znakové entity (např. pro nezlomitelnou mezeru a další speciální znaky). Vzor je uveden na obrázku 1. V dalším kroku již budeme využívat obrázky. Nakreslete ve vektorovém editoru vhodné logo a převeďte jej do rastrové podoby (logo může mít průhledné pozadí). Dále nakreslete nebo upravte rastrové obrázky (např. fotografie). CSS V rámci kaskádových stylů nastavíme barvu textu a pozadí, parametry nadpisu a odstavce (zarovnání apod.). Definici zapíšeme do samostatného souboru, který připojíme pomocí značky <link> v hlavičce dokumentu. Krok 2 více stránek s odkazy HTML Tvorba pokračuje vylepšením úvodní stránky, kam přibyl obrázek a především odkazy na další stránky (obr. 2). Ze seznamu lze vytvořit samostatnou stránku a vhodně ji doplnit dalšími prvky (obr. 3). Do některé stránky lze zařadit také tabulku (v příkladu je to stránka s kontakty na obr. 4). Při tvorbě těchto stránek by se měly nově objevit tyto značky: A s parametrem href, značky pro tabulky TABLE, TR, TD, TH, lze vyzkoušet i parametry colspan a rowspan, IMG s parametry src a alt, pokud je to vhodné, lze vložit i výčtový seznam se značkami DL, DT a DD. 2
Obrázek 1: Úvodní stránka 1. krok 3
Obrázek 2: Úvodní stránka 2. krok 4
Obrázek 3: Stránka se seznamem 2. krok 5
Obrázek 4: Stránka s tabulkami (kontakty) 2. krok 6
CSS V rámci kaskádových stylů doplníme již existující vlastnosti. Bude se jednat především o formátování obrázků (ohraničení, okraje, zarovnání), formátování tabulek a jejich polí (ohraničení, okraje, zarovnání a další), případně formátování odkazů. Krok 3 více stránek s grafickou úpravou HTML V dalším kroku lze vylepšit úvodní stránku a existující stránky. V našem příkladu se jedná o doplnění loga k nadpisu každé stránky (obr. 5, 6, 7). Dále je vytvořena nová stránka, která v našem příkladu informuje o knižních novinkách (obr. 8). Obsahuje obrázky a odstavce formátované s použitím značky BR. Web lze dále rozvíjet a vytvářet další stránky, popř. dále upravovat již hotové stránky. Do některé stránky může být začleněn formulář. Při tvorbě stránek použijete již známé značky, případně značky pro formuláře FORM, INPUT s parametry text, button, submit, reset, radio nebo checkbox, nebo značky SELECT a OPTION či TEXTAREA. Pro formátování kaskádovými styly využijte značky DIV nebo SPAN, popřípadě parametry class nebo id u jakékoli značky. CSS V rámci kaskádových stylů opět doplníme existující vlastnosti. Na pozadí stránky umístěte vhodný obrázek a doplňte formátování existujících prvků (například zarovnání, zvýraznění). 7
Obrázek 5: Úvodní stránka 3. krok 8
Obrázek 6: Stránka se seznamem 3. krok 9
Obrázek 7: Stránka s tabulkami (kontakty) 3. krok 10
Obrázek 8: Stránka s obrázky (novinky) 3. krok 11