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

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

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