Tvoříme webové stránky - II. - Základy formátování

18. 6. 2013 Milan Suk HTML Žádný komentář 1039

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 <b>. 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 <i>. 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 <br />, 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 <br /> 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 <br />.

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

  • <u>podtržený text</u> - podtržení textu, nedoporučuji používat, je pozůstatkem z psacích strojů
  • <sub>dolní index</sub> - 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Ä›
  • <sup>horní index</sup> - 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

Dnes jsme si ukázali, jak vypadá struktura HTML stránky, jak lze text ve stránce formátovat text a započali jsme tvorbu fiktivního osobního webu. V dalším díle si ukážeme nadpisy, seznamy a další,...



Aktuálně

  • 3. 6. 2013 - Nový vzhled webu

Code Snippety

Komentáře

Statistiky

  • TOPlist