Advertisement
  1. Web Design
  2. Kids
Webdesign

Webdesign pro děti: HTML struktura

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website
Web Design for Kids: HTML Content

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

Vítejte v třetí lekci našeho seriálu Webdesign pro děti, HTML struktury!

Napíšeme si strukturu naší stránky pomocí HTML. Tuto strukturu naplníme textem v příští lekci.

Pokud máme přirovnat webdesignový proces ke stavbě domu (jako výstavba městečka Tuts+!), HTML jsou jako základy domu a ohraničení; je to základ, ze kterého vše vyroste.

Důležité! Soubory, které v této lekci vytvoříme, jsou ke stažení zde.

Co přesně je HTML?

Mnohokrát jsme HTML v tomto seriálu zmínili, ale neřekli jsme si, co to přesně je, krom toho, že je to "super cool tajný jazyk". Web je o jazycích a komunikaci, HTML je toho důležitou součástí.

HyperText Markup Language (hypertextový značkovací jazyk) - HTML je jazyk, který značkuje obsah stránky, aby mu prohlížeč porozuměl a správně ho zobrazil. Vytváří strukturu z běžného textového souboru, který by jinak prohlížeč neuměl přečíst.

Například, nemůžeme v textovém editoru napsat odstavec a očekávat, že prohlížeč to pochopí. Text odstavce musí být uvnitř správné HTML značky, paragrafu (odstavce) neboli <p> elementu (každý kousek srandovně vypadajícího textu jako třeba <p> jen oznamuje, že se jedná o kód).

Elementy

HTML je tvořeno elementy, které mají zvláštní význam, jako třeba odstavec zmíněný výše. Každý element má počáteční (začátek) a koncoví (konec) tag, s obsahem stránky vepsaným uvnitř těchto tagů.

Tyto počáteční a koncové tagy pro každý element jsou vepsány v lomených závorkách (jako tyto < >), koncovému tagu ještě předchází lomítko (takto </ >).

Plánujeme struktur

V předcházející lekci jsme si nakreslili design webu a nyní je čas na přípravu struktury, neboli rámců tohoto designu.

Začneme přidáním několika základních popisků k našemu náhledu stránky pro lepší představu.

Uvnitř elementu body našeho html souboru máme několik primárních elementů: header (hlavička), main (hlavní obsah) a footer (patička).

Příprava našich dokumentů

O nastavení našich souborů jsme mluvili v minulé lekci a nyní naše znalosti uplatníme.

  • Nejprve si vytvořte ve svém PC adresář s názvem "tutsfolder".
  • Poté si spusťte textový editor, který už je připravený a čeká, až se něco užasného začne dít.
  • Vytvořte nový dokument v editoru (obvykle přes volbu File [Soubor] > New File [Nový soubor]) a uložte ho jako "index.html" v "tutsfolder".

Pamatujte: "index" je název souboru a ".html" je přípona, která označuje typ souboru.

Webové stránky se můžou skládat z mnoha a mnoha stránek, takže hlavní stránka má vždy název "index.html" a oznamuje "Hej, u mě to všechno začíná!"

Teď se můžem vrhnout na psaní HTML.

Tvorba struktury

Nyní můžeme přidat strukturu. Přemýšlejte o tom, jako o stavbě domu, musíme tomu dát formu.

První kousek HTML, který zapíšeme, je <!DOCTYPE html> a ten řekne prohlížeči "Hej, toto je HTML dokument!"

Pod ním potřebujeme <html> element:

Všechno ostatní bude uhnízděné (pozn. používá se slovo vnořené) uvnitř tohoto elementu.

Počkat. Uhnízděné?

"Jako v ptačím hnízdě?" Spíš, jako matrioška, nebo ať zůstanem u tématu našeho městečka, vnořené budovy. Vnoření nastane tehdy, když vložíme element dovnitř jiného elementu.

Ten kousek kódu uvedený níže zobrazuje element "odstavce" vnořený dovnitř elementu "body", protože se nachází mezi jeho počátečním a koncovým tagem.

Aby byl HTML kód lépe čitelný, tak vnořené elementy odsazujeme kousek doprava. Například takto:

Fajn, zpátky do práce...

Head

Nyní vnoříme do elementu html element head.

head bude obsahovat title [titulek] naší stránky, který se zobrazí v záložce prohlížeče. Spousta vnoření!

Spousta toho, co je uvnitř head, není na samotné stránce vidět, ale místo toho pomáhá vyhledávacím nástrojům, jako je Google tím, že jim o naší stránce něco řekne.

Později, až vytvoříme nový soubor ke stylování této stránky, tak je spojíme odkazem, který bude vnořený právě v head. Takže je to takový druh kontrolního centra mimo dohled našich návštevníků a oni ho vidět nemusí.

Body [tělo stránky]

Všechno na naší stránce, co uvidíme v prohlížeči, bude vnořené uvnitř body a tady zábava konečně začíná!

Header [hlavička]

header element není to stejné jako head element, o kterém už byla řeč. header je umístěný v body a nejčastěji obsahuje hlavičku stránky, tedy tu část, co je nahoře.

První, co na stránce uvidíme, je hlavička s nějakým textem a obrázkem městečka Tuts+.

header prozatím pouze vložíme, obsah přidáme později.

Část main [hlavní část]

Hlavní částí stránky městečka Tuts+ jsou ty nejdůležitější informace. A tím nejdůležitější je seznam podniků, takže ten bude vložený uvnitř elementu nazvaného main.

O menších oddílech tzv. kontejnerech (tři různé skupiny: Sleep [Spánek], Food [Jídlo] a Shop [Obchod]) uvnitř kontejneru main si promluvíme v následující lekci, až si přidáme obsah.

Footer [patička]

Ta část stránky, která je nejníže, se nazývá footer. Obvykle se do ní umísťují odkazy, jako třeba na Facebook a Twitter, nebo krátký text o autorovi stránek.

My si do footer přidáme větu hrdě oznamující, že jsme tuto stránku vytvořili.

Pamatujte: stále přidáváme elementy, které se vnořují do body.

Finální náhled

Nyní si prohlédněme strukturu našeho HTML.

Snadno člověk někde zapomene koncový tag, který může způsobit chyby na stránce. Ujistěte se, že všechny počáteční tagy, mají i své koncové.

Vypadá to, že je všechno v pořádku! Čas přidat nějaký obsah do této super přehledné struktury.

Krátká poznámka ke komentářům.

HTML nám umožňuje přidávat pomocné komentáře. Tyto komentáře se na webu nezobrazí, ale jsou skvělým pomocníkem pro designéry, kteří si budou prohlížet váš kód.

HTML soubor pro tuto lekci (odsud ke stažení) obsahuje několik komentářů pro lepší pochopení.

Hotovo!

V této lekci jsme zjistili, co je to HTML, jaké máme elementy, jak se vnořují a jak vytvořit základní strukturu HTML s několika běžnými kontejnerovými elementy.

Příště přidáme text stránky a obrázky do naší právě vytvořené struktury.

Naviděnou příště! Poznámka překladatele: do hranatých závorek [ ] vkládám český překlad, nebo v češtině používané termíny.

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.