Advertisement
  1. Web Design
  2. Kids
Webdesign

Webdesign pro děti: HTML obsah

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Structure
Web Design for Kids: CSS

Czech (Čeština) translation by Vítězslav Jaroš (you can also view the original English article)

Vítejte ve čtvrté lekci našeho seriálu Webdesign pro děti, tentokrát se zaměříme na HTML obsah.

V předcházející lekci jsme si připravili strukturu našeho HTML souboru s několika HTML elementy. Nyní do ní budeme postupně přidávat obsah stránky.

Pamatujte: Kompletní soubory pro tuto lekci můžete stáhnout zde. A když se u něčeho zaseknete, klidně se zeptejte pomocí komentářů na konci této stránky!

Kontejnery, kontejnery, kontejnery

Budeme mluvit o kontejnerech a to hodně při tvorbě stránky, takže je důležité vědět, co dělají.

Každý kousek obsahu musí být umístěn ve správném druhu HTML kontejnerů. Kontejnery jsou organizovány pomocí HTML elementů. Každý element má pro prohlížeč svůj speciální význam, pomáhá mu porozumět celému obsahu na stránce.

Pro lepší pochopení, na ilustraci výše je budova, která má všechno: okna, dveře a hodiny. Jedno z oken představuje kontejner, s designérem městečka Tuts+ uvnitř.

Přidávání obsahu

Když už máme připravenou strukturu, je na čase vyplnit kontejnery obsahem. Všechny elementy, které jsme přidali do našeho souboru v minulé lekci, nám pomohou s rozmístěním textu a obrázků.

Začněme od vrchu!

Hlavička [header]

Řekli jsme si, že hlavička je nejvýše umístěná část na stránce a má vlastní element <header>, který je jako první vložený do těla [body] stránky. 

Hlavička obvykle obsahuje úvod a nějakou navigaci (způsob, jak se dostat do jiných částí webu). Naše stránka má uvítací hlavičku s pěkným obrázkem, pojďme ji tedy přidat!

Nadpisy [heading]

Potřebujeme na stránku vložit hlavní nadpis "Vítejte v městečku Tuts+"

Existuje 6 různých úrovní nadpisů na stránce; h1 je nejdůležitější, h6 nejméně. V HTML se text nadpisů vkládá do nadpisových elementů: <h1>, <h2>, <h3>, <h4>, <h5>, nebo <h6>

"Vítejte v městečku Tuts+" je náš hlavní nadpis (je velmi důležitý), takže ho uzavřeme do elementu <h1>.

Prohlížeč teď pozná, že tento kousek textu je náš úvodní nadpis.

Obrázek městečka

V hlavičce máme také krásný obrázek našeho městečka.

Uvnitř našeho "tutstown" adresáře musíte vytvořit další adresář s názvem "images" a uložit do něj všechny obrázky.

Obrázky se na stránku přidávají pomocí elementu <img>. Uvnitř tohoto tagu musíme specifikovat umístění daného obrázku, neboli zdroj, jako například:

Všimli jste si / po src="images? Tím jsme řekli: "vyhledej v adresáři / images soubor townheader.svg"

Než uzavřeme <img> tag, ještě přidáme popis do atributu alt.

Atributy jsou dodatečné informace, které přidáváme do elementů a ony je poté pomáhají více specifikovat, nebo jim říkají, jak mají fungovat. Jen některé atributy pracují v rámci určitých elementů.  <img> element bude vždy obsahovat atribut src a alt.

Důležité! Element <img> je nepárový. Tzn. že počáteční tag je zároveň koncovým tagem:

Pojďme se podívat!

V tomto bodu si můžeme prohlídnout naši stránku v prohlížeči a zjistit, co jsem doteď udělali! Najděte adresář "tutstown" a dvojklikem otevřete "index.html". Měla by se vám objevit stránka v prohlížeči.

To je naše stránka! Nyní toho ještě moc neobsahuje, ale brzy to změníme. Odteď, když budete chtít vidět změny v prohlížeči, tak uložte HTML soubor a obnovte (pomocí ikony s malým kruhem a šipkou na konci) toto okno v prohlížeči.

Asi jste zaznamenali, že nejsou vidět naše mraky, to protože jsme ještě nepřidali žluté pozadí. Na věci, jako barva pozadí, pozicování a rozměry, se zaměříme v další lekci, kde se ponoříme do CSS.

Hlavní sekce [main]

Hlavní sekce našich webových stránek obsahuje převážnou část informací. Do elementu main umístíme všechen super užitečný obsah o našem městečku.

Sekce [section]

Máme tři související skupiny na našich webových stránkách, které rozdělíme do tří sekcí. Sekce je samostatná část webové stránky, která obsahuje informace a má svůj vlastní element: <section>.

Další strukturování!

Uvnitř sekcí musíme vytvořit několik malých rámců podobných kontejnerům pro krátké texty vedle obrázků.

Ukažme si to na této jedné sekci. Každá sekce má vnořený obrázek a element, který obsahuje nějaký text.

Podívejme se na tuto strukturu, dříve než přidáme obsah:

O způsobu vložení obrázku jsme už hovořili. Tento obrázek se vloží stejným způsobem jako náš hlavičkový obrázek, ale bude se jinak jmenovat a bude mít jiný popisek.

Div

Element <div> je obecný kontejnerový element. Umožňuje nám sloučit ty části stránky, pro které není vhodný žádný jiný element.

Nadpis a seznam obchodů bude uvnitř <div>.

Nadpis

Všimli jste si, že každá sekce má malý nadpis: Sleep, Food a Shop. Jsou to nadpisy pro malý seznam, který je pod každým z nich. Už jsme použili <h1> v úvodu na vrcholu stránky, takže pro tyto nadpisy použijeme <h2>.

Seznamy [list]

Existují dva typy HTML seznamů, uspořádaný [ordered] (s číslama) a neuspořádaný [unordered] (s tečkama místo čísel). Oba jsou to opravdu užitečné způsoby, jak zobrazit seznam souvisejících informací a každá sekce našich stránek obsahuje krátký neuspořádaný seznam (<ul>) se dvěma položkami.

Uvnitř každého seznamu jsou položky seznamu. Ty se zobrazují v seznamu a jsou zapsány uvnitř tagu <li>.

Odkazy [link]

Seznamy, které jsme právě sestavili, mají být odkazy na jiné stránky obchodů a přes ně se naši návštěvníci mohou dostat k více informacím. K přeměně slova (nebo více slov) na odkaz musíme dané slovo uzavřít do kotvících [anchor] tagů . Element odkazu vypadá takto: <a>.

Stejně jako náš <img> element měl speciální atributy, i počáteční <a> tag musí obsahovat atribut s webovou adresou stránky, na kterou má být návštěvník přesměrován a tím je href atribut.

Následující kousek kódu vytvoří odkaz ze slova "here" a přesměruje uživatele na http://tutsplus.com/.

Přesně takto přidáme odkazy do našich seznamů, uzavřením každého jména obchodu do kotvy. Počáteční i konečný kotvící tag bude uvnitř položky seznamu <li>. Jediný rozdíl bude ten, že toto nejsou skutečné obchody s opravdovými stránkami a tak budeme používat # jako hodnotu href a tím po kliknutí na odkaz nedojde k přesměrování.

Tady se podívejte na umístění prvního obchodu do seznamu:

Vytvořili jsme neuspořádaný seznam, umístili do něj seznam položek a uzavřeli název obchodu do kotvícího tagu. Pamatujte, že zatím jsme neprovedli žádné nastavení stylů, takže při náhledu stránky mají odkazy standartní modrou barvu místo oranžové.

Zabalení sekce

Když máme jednu sekci hotovou, zopakujeme stejný postup u ostatních sekcí. Vždy se ujistětě, že se změnil obsah; HTML struktura je stejná pro všechny tři sekce, ale text a obrázky jsou různé.

Nyní si zkontrolujeme kód všech tří sekcí - je toho celkem dost!

Patička [footer]

<footer> je element, který následuje hned po uzavíracím tagu elementu <main>; nebude v něm vnořený.

Můžeme tedy přidat náš footer element na stránku. Bude umístěn na stejné úrovni jako main, protože oba jsou vnořeni do body.

Jediným obsahem footer je věta o stvořiteli naší stránky (o nás!). Tento obsah bude umístěn do <p> (odstavec) elementu, který je vnořený do footer.

Celkový náhled

Ukládali jste s nadšením dokument HTML a aktualizovali prohlížeč během práce? Já ano! Ještě se na stránku naposled podívejme:

Shrneme si použité elementy

Mluvili jsme o spoustě různých elementů, pojďme udělat rychlý náhled na ty, které jsme použili v našem HTML souboru:

<html> Obsahuje všechny prvky našeho HTML
<head> Informace o stránce
<title> Titulek stránky
<body> Tělo stránky
<header> Uvítací zpráva
<h1> a <h2> Naše nadpisy
<img> Umístí obrázek na stránku
<main> Pro hlavní obsah
<section> Rozdělí stránku na sekce
<div> Běžný kontejner
<ul> Neuspořádaný seznam věcí
<li> Položka seznamu
<a> Odkaz na nějaké místo
<footer> Obsah patičky

Shrnutí

V tomto kurzu jsme se naučili, jak vložit obsah do HTML struktury, kterou jsme vytvořili našima prostýma rukama (no dobře a s pomocí počítače).

Přístě se naučíme stylovat naši stránku, aby vypadala hezky a zároveň byla dobře čitelná.

Brzy nashledanou!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.