Webové stránky jsou v dnešní době už samozřejmostí. Má je každá firma, ale i jednotlivci, kteří chtějí zaujmout nové zákazníky. A důvodů, proč by sis měl udělat webofku i ty, je mnohem více. Pojďme na to!
Z čeho je webová stránka?
Základem jednoduché webovky je soubor. V dnešní době nejlépe s příponou .html
, ale na starších zařízeních se můžeš setkat i jenom s .htm
. A není to chyba! Dříve totiž počítače neuměly rozpoznávat přípony delší než 3 znaky, ale dneska s tím už nemáme problém.
Co budu potřebovat?
Počítač, textový editor a chuť učit se novým věcem. Hodí se taky základní znalosti angličtiny. Ale neboj, není to nic těžkého!
Pojďme rovnou na to!
Jako první budeš potřebovat již zmíněný HTML soubor. Vytvoř si ho sám/a nebo jej stáhni tady (pro stažení zmáčkni CTRL+S
). A aby to hned na začátku vypadalo pěkně, už jsem ti do něj přidal i kód (zkus ho otevřít v prohlížeči!):
<!DOCTYPE html>
<html lang="cs">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Moje první webofka</title>
</head>
<body>
Tohle je moje první webofka!</body>
</html>
A tady se dostáváme k základním značkám = tagům. Ty se zpravidla píšou malými písmeny a vždy musí být mezi dvěma špičatými závorkami. Rozdělujeme je na:
- Párové - Jak již název napovídá, vždy musí být ve dvojici. První značka je tzv. otevírací (např. značka nadpisu
<h1>
), druhá obsahuje lomítko a je značkou uzavírací (např.</h1>
). Mezi tyto dvě značky potom vkládáme jejich obsah; tedy to, co označují. (Vypadalo by to asi takhle:<h1>Můj nadpis</h1>
) - Nepárové - Tagy nepárové jsou naopak jenom jedny. Obvykle obsahují atributy, které popisují jejich vlastnosti (o těch více jindy). Patří mezi ně například
<meta>
nebo<img>
(obrázek).
Ve starších normách (XHTML) je potřeba uzavírat i nepárové značky. Znamená to, že místo <meta>
použiješ <meta />
apod. A co že je to vlastně ta norma? Soubor pravidel toho, jak psát weby. Je jich několik, jsou různě staré a různě relevantní. Nicméně, dokud po tobě nikdo vyloženě nepožaduje určitou normu, uč se tu nejnovější.
Dále si všimni, že se dokument rozděluje na 2 části, které jsou označeny párovými značkami:
<head>...</head>
- Hlavička dokumentu - na stránce není vidět. Obsahuje informace o tom, jak se stránka jmenuje, v jaké je řeči nebo jak by s ní měly nakládat vyhledávače.<body>...</body>
- Tělo dokumentu - pro vytváření samotné stránky je nejdůležitější. Nachází se v něm všechno to, co chceme vidět na webovce - texty, obrázky, odkazy, aj.
V příkladu jsem použil různé značky. Zde je jejich krátké vysvětlení:
<!DOCTYPE html>
říká, že se jedná o HTML soubor. Tudíž ten, kterým píšeme weby. Musí být na začátku každého HTML souboru.<html>...</html>
obsahuje úplně vše. Včetně hlavičky a těla dokumentu.<meta>
se nachází v hlavičce a ve svých atributech popisuje vlastnosti stránky. Zatím si jí nevšímej.<title>...</title>
má v sobě název stránky tak, jak se ti ukazuje nahoře v prohlížeči mezi otevřenými kartami.
Jak se na můj web dostanou ostatní?
Úžasná otázka! Do souboru, který jsi právě vytvořil/a se dostaneš jenom ty ze svého počítače. Nikdo jiný k němu přístup nemá. Chceš-li svoji stránku mít veřejně na webu, budeš si muset objednat hosting. Existuje mnoho různých typů hostingů, které se liší zvláště parametry a cenou. Pokud jsi ale právě začal/a, s webhostingem ještě počkej.
Za jak dlouho zvládnu vytvořit svůj Google?
Za dlouho, věř mi. Na projektech, jako je Google nebo Facebook pracují stovky zkušených lidí denně. Bude tak velmi těžké se dostat na jejich úroveň. Ale když budeš vytrvalý/á, tak to určitě zvládneš!
Chceš se přiblížit vytvoření svého vlastního vysněného Googlu? Dozvěděl/a ses něco nového? Tak pokračuj na další článek!
Informace o článku
Autor: advalen
Obtížnost: Nováček •
Sdílej článek přátelům!
Nacházíš se na XHTML verzi webu.
Pozor! Články obsahují části z HTML!
Najdeš tady jen část stránek. Protože je pro mě norma méně přehledná, změny provádím na HTML verzi webu a poté je postupně vkládám i sem. XHTML stránky tak nemusí být vždy aktuální.