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). 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). 1
Obrázek 1: Úvodní stránka 1. krok 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. 2
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 se to hodí, lze vložit i výčtový seznam se značkami DL, DT a DD. CSS V rámci kaskádových stylů rozšíří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. Do této stránky je také začleněn formulář. Web lze dále rozvíjet a vytvářet další stránky, popř. dále upravovat již hotové stránky. Při tvorbě stránek použijete již známé značky a nově 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 souboru s kaskádovými styly opět rozšiřte parametry již existujích prvků. Najděte nebo nakreslete obrázek, který je vhodný k umístění na pozadí stránky (může jít například o větší obrázek, který bude umístěn na stránce bez opakování, nebo 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
Obrázek 5: Úvodní stránka 3. krok 7
Obrázek 6: Stránka se seznamem 3. krok 8
Obrázek 7: Stránka s tabulkami (kontakty) 3. krok 9
Obrázek 8: Stránka s obrázky (novinky) 3. krok 10
Obrázek 9: Stránka s formulářem (novinky) 3. krok o malý obrázek, který se bude opakovat ve svislém i vodorovném směru). Doplňte formátování existujících prvků (například zarovnání, zvýraznění). 11