TvoÅ™Ãme webovÃ© strÃ¡nky - II. - ZÃ¡klady formÃ¡tovÃ¡nÃ

18. 6. 2013 Autor článku

Milan Suk

HTML

Žádný komentář Počet zobrazení

1377

V minulém díle jsme si Å™ekli nÄ›co málo o syntaxi jazyka HTML. Dnešním dílem jiÅ¾ zaÄneme psát webovou prezentaci. V první Äásti si ukáÅ¾eme, jak vypadá základní struktura HTML dokumentu. Dalším a hlavním tématem bude jednoduché formátování textu - tj. tuÄné písmo, kurzíva, podtrÅ¾ené písmo, atd. a nakonec dáme tyto dvÄ› vÄ›ci dohromady a vytvoÅ™íme si první webovou stránku.

Struktura HTML dokumentu

HTML webová stránka musí v základu obsahovat dva elementy - hlavu (head) a tÄ›lo stránky(body). V hlaviÄce se definují reÅ¾ijní vÄ›ci na stránce jako je napÅ™íklad jazyk webové stránky (Äeština, angliÄtina), titulek, který se zobrazí uÅ¾ivateli v prohlíÅ¾eÄi, ale také pokroÄilejší vÄ›ci jako import javascriptových nebo CSS souborÅ¯. V tÄ›le stránky jsou jiÅ¾ prvky, které se zobrazí uÅ¾ivateli v prohlíÅ¾eÄi - tj. samotný obsah webové stránky. V jazyce HTML definujeme hlavu pomocí párového tagu <head> a tÄ›lo pomocí párového <body>. Oba tyto prvky musí být ještÄ› umístÄ›ny v tagu <html> (taktéÅ¾ párový), který vymezuje HTML kód.

NejdÅ™íve se trochu podrobnÄ›ji podíváme na hlavu stránku. Jak jiÅ¾ zaznÄ›lo výše, v hlavÄ› stránky mÅ¯Å¾eme pouÅ¾ít následující elementy:

Titulek (párový) - title - titulek stránky
Metatagy (nepárový) - meta - speciální informace pro prohlíÅ¾eÄ Äi aplikace (jazyk, autor, tagy,...)
Linky - link - pÅ™ipojení souborÅ¯ k dokumentu
Základ odkazÅ¯ - base - v dokumentu se Äasto budeme odkazovat na jiné soubory (obrázky, styly, hypertextové odkazy) a Äasto pÅ™i tom budeme pouÅ¾ívat tzv. relativní odkazování. Pokud tento tag nenastavíme, jak základ pro relativní adrese se bere aktuální sloÅ¾ka, jinak se v dokumentu pouÅ¾ije základ definovaný pomocí tagy base

PodrobnÄ›ji se na hlaviÄku stránky podíváme v nÄ›kterém z dalších dílÅ¯.

Titulek

OtevÅ™ete si nyní váš oblíbený editor (viz - minulý díl) a vytvoÅ™te nový soubor. HTML soubory pouÅ¾ívají nejÄastÄ›ji pÅ™íponu *.html nebo *.htm. Setkáte se pravdÄ›podobnÄ› také s verzemi *.xhtml, které jsou urÄeny pro xHTML dokumenty, ale já zÅ¯stanu u konceptu *.html.

Na základÄ› toho, co jsme Å™ekli výše bychom uÅ¾ mÄ›li být schopni sestavit strukturu HTML dokumentu. NejdÅ™íve definujeme HTML kód pomocí tagu <html>. Do nÄ›ho umístíme hlavu a tÄ›lo stránky pomocí tagÅ¯ <head> a <body>. Výsledek by mohl vypadat asi následovnÄ›:

<html>
    <head>
        Hlava stránky
    </head>
    <body>
        TÄ›lo stránky
    </body>
</html>

Zkuste si hned od zaÄátku zvyknout na nÄ›jaký zpÅ¯sob, kterým budete oddÄ›lovat jednotlivé úrovnÄ› v HTML dokumentu, já to dÄ›lám tabulátorem (doporuÄuji), ale mÅ¯Å¾ete tÅ™eba psát mezery atp. Po uloÅ¾ení souboru se zdrojovým kódem výše a otevÅ™ením ve webovém prohlíÅ¾eÄi (dvakrát poklepejte na soubor s kódem) uvidíte stránku obsahující text "TÄ›lo stránky" a titulek odpovídající adrese souboru (Äi pouze názvu souboru) na disku. První vÄ›cí, kterou se pokusíme upravit, bude titulek stránky. Titulek je urÄen textem, který zadáme mezi tagy <title> a </title>. Nastavme nyní tento titulek na text: "MÅ¯j nový web !".

<html>
    <head>
        <title>MÅ¯j nový web !</title>
    </head>
    <body>
        TÄ›lo stránky
    </body>
</html>

Jednoduché formátování textu

Základní vlastností jazyka HTML je, Å¾e dokáÅ¾e text ve stránce formátovat. Nyní se podíváme na nejjednodušší formátování textu.

Formátování textu opÄ›t není nic jiného neÅ¾ jen aplikace specifických tagÅ¯ na vybraný text. Následující tagy budou všechny párové, pokud by mÄ›la nastat nÄ›jaká výjímka, upozorním na to. Pro ty, co mají tendenci pÅ™eskakovat Äásti Älánku upozorÅˆuji na to, Å¾e následující zdrojový kód patÅ™í mezi tagy <body> a </body>. ZaÄnÄ›me tuÄným písmem, pro ten se vyuÅ¾ívá tag . TakÅ¾e napÅ™íklad ve vÄ›tÄ›:

V této vÄ›tÄ› je moÅ¾ná nÄ›co <b>dÅ¯leÅ¾itého</b>.

bude slovo dÅ¯leÅ¾itého zapsáno tuÄným písmem. Dalším Äasto pouÅ¾ívaným stylem je kurzíva. Kurzívu v HTML oznaÄíme tagem . TakÅ¾e napÅ™íklad v upravené pÅ™edchozí vÄ›tÄ› :

V této <i>vÄ›tÄ›</i> je moÅ¾ná nÄ›co <b>dÅ¯leÅ¾itého</b>.

bude slovo vÄ›tÄ› ve webovém prohlíÅ¾eÄi zobrazeno kurzívou. Pro úplné pochopení si nyní ukaÅ¾me jeden kompletní pÅ™íklad, v nÄ›mÅ¾ pouÅ¾ijeme ještÄ› tag <big>, který dokáÅ¾e text vykreslit vÄ›tší a nepárový! tag , který dokáÅ¾e oddÄ›lit nový Å™ádek.

<html>
    <head>
        <title>MÅ¯j nový web !</title>
    </head>
    <body>
        <big>Informace</big> <br />
        Jmenuji se <b>Milan Suk</b> a studuji <i>první roÄník</i> Gymnázia v Boskovicích. Mezi moje záliby patÅ™í napÅ™íklad <b>tvorba webu</b> a <b>psaní ÄlánkÅ¯</b>.
    </body>
</html>

Tag jsme museli vyuÅ¾ít proto, Å¾e za normálních podmínek se odÅ™ádkování v HTML souboru nÄ›jak neprojeví ve webovém prohlíÅ¾eÄi. Webový prohlíÅ¾eÄ normálnÄ› vykreslí všechen text dokud není omezen vlastním rozmÄ›rem okna. V pÅ™ípadÄ›, kdy potÅ™ebujeme odÅ™ádkování dÅ™íve, musíme pouÅ¾ít tag .

UveÄme si ještÄ› pár dalších tagÅ¯:

podtrÅ¾ený text - podtrÅ¾ení textu, nedoporuÄuji pouÅ¾ívat, je pozÅ¯statkem z psacích strojÅ¯
dolní index - dolní index, je tÅ™eba dávat pozor na to, Å¾e tento tag mÅ¯Å¾e zvÄ›tšit výšku Å™ádku, coÅ¾ vÄ›tšinou nepÅ¯sobí pÄ›knÄ›
horní index - horní index, stejná poznámka jako u dolního indexu
<s>pÅ™eškrtnutý text</s> - pÅ™eškrtnutí textu, ÄastÄ›ji se pouÅ¾ívá alternativa <strike>pÅ™eškrtnutý text</strike>

OpÄ›t lze samozÅ™ejmÄ› tagy rÅ¯znÄ› kombinovat, ale je potÅ™eba zachovávat pravidlo, které jsem uvedl v minulém díle.

TvoÅ™íme vlastní stránky

Tvorba webových stránek se nejlépe pochopí na konkrétních pÅ™íkladech a zejména na vlastních projektech. Proto budeme v prÅ¯bÄ›hu tohoto seriálu psát fiktivní prezentaÄní stránku, na jejímÅ¾ základÄ› potom mÅ¯Å¾ete postavit vlastní web.

Naše stránky budeme pozdÄ›ji dávat nÄ›kam na free hosting a proto bychom si uÅ¾ teÄ mÄ›li Å™íct pár maliÄkostí a zaÄít tvoÅ™it jednoduchou strukturu webových stránek. Ze všeho nejdÅ™íve si vytvoÅ™íme sloÅ¾ku s oznaÄením (napÅ™íklad - je to na vás) web. Do ní vytvoÅ™íme nový soubor s názvem index.html. Název index.html není zvolen náhodnÄ›, ale tímto názvem urÄujeme výchozí stránku na webu. Tato vlastnost souvisí s konfigurací serveru, na který budeme web umisÅ¥ovat a protoÅ¾e na free hostinzích se nejÄastÄ›ji setkáme se serverem Apache, zaÄneme se hned drÅ¾et koncepce, Å¾e hlavní stránka je v souboru index.html (index.php, index.htm,..).

V pozdÄ›jších dílech tohoto seriálu si ukáÅ¾eme, jak lze nastavit jiná výchozí stránka, nebo tÅ™eba chybová stránka, rÅ¯zné parsování URL adresy a mnohem více, nyní se ale spokojme s faktem, Å¾e hlavní stránka je v souboru index.html.

Jako základ naší webové stránky mÅ¯Å¾eme pouÅ¾ít pÅ™edchozí pÅ™íklad s poupraveným titulkem.

<html>
    <head>
        <title>Milan Suk - Osobní web</title>
    </head>
    <body>
        <big>Informace</big> <br />
        Jmenuji se <b>Milan Suk</b> a je studuji <i>první roÄník</i> Gymnázia v Boskovicích. Mezi moje záliby patÅ™í napÅ™íklad <b>tvorba webu</b> a <b>psaní ÄlánkÅ¯</b>.
    </body>
</html>

Vy si samozÅ™ejmÄ› informace dodejte a formátujte podle vlastní libosti, toto je pouze ukázka !

Na závÄ›r