Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 80% výuky zdarma!
BF - May

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.

<link>

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

<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{/UR­L} 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
Článek pro vás napsal Samuel Hél
Avatar
Jak se ti líbí článek?
4 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 a svou gf
Aktivity (4)

 

 

Komentáře

Avatar
David Koníček:17.8.2020 12:26

V ukázceje špatně <h1>Modrý nadpis</h1>, by měl být v <body></body> elementu.

Odpovědět
17.8.2020 12:26
Věř, běž a dokážeš!
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Samuel Hél
Tým ITnetwork
Avatar
Odpovídá na David Koníček
Samuel Hél:17.8.2020 12:42

Díky, opraveno :)

 
Odpovědět
17.8.2020 12:42
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.