Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 2 - Základní struktura HTML II. část

V minulé lekci, Základní struktura HTML, jsme se seznámili se strukturou HTML dokumentu. Ukázali jsme si tagy <html>, <title>, <head>, jeho atributy a další.

Vítejte u další lekce kurzu HTML 5, kde se společně podíváme na zbývající tagy z minulé lekce. Těmito tagy jsou <base>, <link>, <style>, <script>, <noscript> a už i zmíněný tag <body>.

<base>

Tag <base> umožňuje nastavit kořenovou složku pro relativní odkazy v dokumentu. Její nastavení tak ovlivní např. odkazy, obrázky a další prvky, u kterých je specifikováno relativní umístění.

Tag může být umístěn pouze v sekci <head> a to jen jednou. Je nepárový.

Atributy

Tag <base> má dva atributy:

  • href - Specifikuje kořenovou složku pro všechna relativní URL v dokumentu.
  • target - Specifikuje cílové umístění pro všechny odkazy.

Ukázka použití

Nejdříve si ukážeme dokument bez tagu <base>:

<body>
    <img src="http://www.mujweb.cz/obrazky/obrazek.jpg" alt="Obrázek" />
    <a href="http://www.mujweb.cz/obrazky/psi.html">Obrázky psů</a>
</body>

Kód výše můžeme zjednodušit pomocí tagu <base>:

<head>
        <title>Ukázka base</title>
        <base href="http://www.mujweb.cz/obrazky/" />
</head>
<body>
        <img src="obrazek.jpg" alt="Obrázek" />
        <a href="psi.html">Obrázky psů</a>
</body>

Pozor: jeho použití ovlivní relativní umístění všech elementů na stránce!

Tag se často využívá pro realizaci tzv. pretty URL. V tomto případě má atribut href na každé stránce hodnotu /. Tak se zajistí, že pro stránku www.mujweb.cz/clanek/muj-pes bude kořenová složka stejná, jako by se HTML stránka nacházela přímo na www.mujweb.cz.

Tag <link> se používá k provázání dokumentu s externím souborem. Nejčastěji se tak k dokumentu připojují CSS styly. Smí být také obsažen pouze v hlavičce a to klidně i několikrát. Nemá obsah, má pouze atributy a je nepárový.

Atributy

Mezi jeho atributy patří:

  • href - Specifikuje umístění připojovaného souboru (dokumentu).
  • hreflang - Specifikuje jazyk připojovaného dokumentu.
  • media - Specifikuje typ zařízení, pro které je připojovaný dokument určen (jedná se o pravidlo @media).
  • rel - Specifikuje vztah mezi dokumenty. Nejčastější hodnoty jsou stylesheet a icon, existuje jich ale mnohem víc.
  • sizes - Umožňuje specifikovat velikost ikony (pouze pro rel="icon"), žádný prohlížeč tento atribut ale nepodporuje.
  • type - MIME typ připojovaného souboru (dokumentu). Nejčastěji text/css.

Ukázka použití

Ukázka připojení CSS souboru k dokumentu:

<head>
        <title>Titulek stránky</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
</head>

CSS jsou kaskádové styly, díky kterým naše stránka získá barvičky, různé písma, animace a další. Více se můžeme dočíst o CSS v tomto kurzu.

Ikonku na stránky připojíme takto:

<head>
        <title>Titulek stránky</title>
        <link rel="icon" href="favicon.ico" />
</head>

V HTML 5 lze toto připojení ikony přes tag <link> nepoužít a místo toho umístit do kořenové složky s webovými stránkami ikonu pod názvem favicon.ico. Prohlížeč si ji pak najde sám.

Ikonku by měla mít každá webová stránka, pokud si například nějakou stránku uložíme jako odkaz na plochu v telefonu, měli bychom mít onu ikonku. Ikonka se nám zobrazuje také v prohlížečích. Existují lidé, co mají otevřeno tisíc listů zároveň a jediné, co vidí, jsou právě ikonky:

HTML5 od A do Z

<style>

Element <style> slouží k vložení stylování přímo do HTML dokumentu. Příliš se nevyužívá, jelikož se styly preferují v externím souboru.

Atributy

U elementu můžeme uvést následující atributy:

  • type - Specifikuje typ stylu, jako hodnotu uvedeme text/css.
  • media - Specifikuje typ zařízení, pro který je styl optimalizován. Atributem se nyní nebudeme zabývat.
  • scoped - Pokud je atribut uveden, může tag stát mimo hlavičku. Styluje <div>, jehož ID je hodnotou tohoto atributu. Element style je poté součástí tohoto divu.

Ukázka použití

Ukažme si, jak by se přímo v hlavičce nastylovaly všechny nadpisy <h1> na modrou barvu písma:

<head>
        <title>Titulek stránky</title>
        <style type="text/css">
           h1 {
              color: blue;
           }
        </style>
</head>
<body>
        <h1>Modrý nadpis</h1>
</body>

Na webové stránce uvidíme následující modrý nadpis:

Titulek stránky
index.html

<script> a <noscript>

Tyto tagy se využívají pro skriptovací jazyk JavaScript, přesněji řečeno, je k tomu využíván pouze jeden, ten druhý se využije v případě, když není JavaScript v prohlížeči povolen.

Uveďme si jednoduchý příklad:

<script>
   document.write("Ahoj světe!");
</script>
<noscript>
   Váš prohlížeč nepodporuje JavaScript!
</noscript>

Tento kód způsobí vypsání hlášky Ahoj světe! do prohlížeče:

Zapnutý JavaScript
index.html

Když si nyní tuto stránku spustíme v prohlížeči s vypnutým JavaScriptem (nebo s prohlížečem, který JavaScript nepodporuje), vyskočí na nás tato hláška:

Vypnutý JavaScript
index.html

<body>

Do těla stránky již patří tagy, které se uživateli zobrazí - to jsme si už i vyzkoušeli, ale pro kompletnost si to ještě zmíníme. Jsou to např. odstavce s textem, obrázky, tabulky, seznamy a podobně. Tyto tagy jsou ještě uloženy v tzv. layoutu, o kterém si však povíme až v dalších lekcích.

Uveďme si tedy příklad jednoduché validní HTML stránky:

<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>itnetwork.cz - programátorská sociální síť</title>
    </head>
    <body>
        <h1>itnetwork.cz</h1>
        <p>Vítejte na programátorské sociální síti!</p>
    </body>
</html>

A jako výsledek v prohlížeči bude toto:

{URL}index.html{/URL} itnetwork.cz - programátorská sociální síť
localhost

To by pro dnešní lekci už bylo vše :)

V další lekci, Rozložení stránky v HTML (layout), si ukážeme HTML 5 layout webové stránky, který bychom měli dodržovat.


 

Předchozí článek
Základní struktura HTML
Všechny články v sekci
HTML5 od A do Z
Přeskočit článek
(nedoporučujeme)
Rozložení stránky v HTML (layout)
Článek pro vás napsal Samuel Hél
Avatar
Uživatelské hodnocení:
141 hlasů
Autor se věnuje hlavně programování, nejvíce z oblasti webových technologií, dělá občasné video edity ze svých dovolených. Má rád memes, svou gf a elektroniku
Aktivity