Mgr. Stěpan Stěpanov, 2013
Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet webové stránky.
Obsah Co to je HTML? Značky Atributy Struktura dokumentu První stránka za dvě minuty HTML editory a standardy
Co to je HTML? HTML HyperText Markup Language, hypertextový značkovací jazyk. Hypertext nelineárně strukturovaný text, obsahuje hyperlinky nebo-li odkazy. HTML je základní a nejrozšířenější jazyk pro tvorbu webových stránek. První funkční verze byla vydána v roce 1991. Česká Wiki Anglická Wiki HTML 4 HTML 5
Značky Do běžného textu se vkládají HTML <tagy>, tedy značky, určující význam, vzhled, způsob chování jednotlivých částí běžného textů. Tak vzniká hypertextový dokument nebo-li webová stránka. Značky se dělí na párové a nepárové. Název značky se vkládá mezi symboly < а >. Párová značka určuje počátek a konec svého působení, například počátek a konec zvýraznění tučným písmem nebo počátek a konec odkazu. Nepárová značka má jednorázový účinek, například vložení jednoho nového řádku.
Značky Začátek párové značky obsahuje její jméno a případné atributy v lomených závorkách < >. Konec párové značky obsahuje lomítko / a jméno značky v lomených závorkách < >. Případné atributy není třeba uvádět. Nepárová značka se píše stejně jako začátek párové značky, ale nemá žádný konec. Nepárová značka <br> Začátek <p> a konec </p> párové značky P
Atributy značek Každá značka má specifikovanou množinu svých atributů. Atributy rozšiřují možnosti značek, řada značek má bez atributů minimální význam. Atributy se uvádí po jménu značky spolu s jejich hodnotou, neuvádí se při uzavření párové značky. Značka P obsahuje atribut align s hodnotou right Začátek <p> a konec </p> párové značky P
Tolerance Párová značka by měla mít svůj jasně stanovený počátek a konec. Nicméně HTML toleruje absenci konce u celé řády párových značek. Pozor! Neuzavřená párová značka, které chybí konec, může způsobit značné problémy! HTML také toleruje překlepy a nesprávně napsané značky. Pokud nerozpozná název značky nebo atributu značky, ignoruje takovou chybu. Ale i v tomto případě mohou utrpět finální vzhled a funkčnost stránky. Spustit příklad
Tolerance Rozeberme příklad z minulého snímku: Párové značky <html>, <body> a <div> by měly mít svůj začatek a konec. Zde chybí </div>! Třetí značka <div> však postrádá uzavření, tudíž její platnost pokračuje dal. Ve výsledku i poslední odstavec je obarven červenou barvou.
Struktura dokumentu Základní struktura webové stránky: 1. Informace o dodržovaném DTD standardu. Pokud není uveden, prohlížeč sám rozhodně o zpětné kompatibility některých značek. 2. Kořenový element <html> na začátku a konci. 3. Hlavička <head>, obsahující název stránky <title>, informace o stylech, metadata o kódování dokumentu, klíčových slovech, autorovi atd. Do hlavičky se také umisťuje kód skriptovacích jazyků jako JavaScript, VB Script atd. 4. Tělo <body>, obsahující vlastní obsah dokumentu. Ve vzácných případech se nevyužívá.
Struktura dokumentu Příklad kódu, obsahující, mimo jiné: 1. Informace o DTD standardu 4.01 Transitional. 2. Název stránky ve značce <title> 3. Metadata o českém kódování a autorovi. Spustit příklad
První stránka za dvě minuty 1. Otevřete program, zvaný Poznámkový Blok. Dá se spustit pomoci příkazu notepad.exe. 2. Napište do něj HTML kód, například tento: <html><body>ahoj světe!</body></html> 3. Uložte soubor pod libovolným názvem s příponou.html. 4. Dvakrát na něj kliknete, aby prohlížeč zobrazil vámi napsanou webovou stránku. Máme stejnou? Spustit příklad
HTML editory Většina tvůrců webových stránek dnes používá HTML editory, zrychlující a usnadňují práci. Není zapotřebí vlastnit drahý složitý editor, stačí aby váš editor zobrazoval HTML kód stránky, zvýrazňoval značky a atributy, umožňovat náhled zpracovávané stránky a uměl kontrolovat případné chyby jako neuzavřené párové značky. Pozor! Většina konvertorů do formátu HTML dělají stránku nepřehlednou a těžkou na údržbu. Podívejte se po Free HTML editorech na Google!
Standardy HTML Postupem času mnoho značek HTML začalo být považováno za zastaralé a jejich využívaní se nedoporučuje. Objevily se kaskádové styly a skriptovací jazyky, rozšiřující možnosti původního HTML. Moderní prohlížeče stále nedodržují všechny standardy HTML. To způsobuje tvůrcům stránek mnoho problémů musí kontrolovat funkčnost stránek pro každý prohlížeč! Splňuje váš prohlížeč standard HTML 5?
Shrnutí Dozvěděli jsme se dnes o: HTML jako jazyce pro tvorbu webových stránek Značkách HTML párových i nepárových Atributech HTML Toleranci jazyka HTML a následcích chyb Struktuře dokumentu Editorech a standardech HTML a nyní umíme sami vytvářit jednoduchou stránku! Gratulujeme!