Základy HTML

web.edumach.cz

Obsahuje hodnocený úkol

1. 💾 Projekt: Web fiktivní kavárny (část 1/2)

Postupně krok po kroku vybudujeme jednoduchý třístránkový web (webovou prezentaci) fiktivní kavárny. První část je zaměřena na HTML, navazující druhá na CSS. Výsledkem bude něco takového. Každý "obdélník" v obrázku níže je jedna stránka webu. Všimni si, že mají některé části společné (název, slogan, navigaci a zápatí):

1.1. Příprava

  1. Z https://github.com/edumach/cafe stáhni projekt
    (tlačítko <>Code → Download ZIP).
  2. Stažený soubor rozbal a zkontroluj, zda nevznikla složka ve složce (cafe-main/cafe-main). Pokud ano, oprav.
  3. Složku přejmenuj na cafe. (bez toho -main).
  4. Složku cafe otevři ve VSCode

Složka cafe obsahuje složku img se třemi obrázky a tyto soubory (webové stránky):

Obsah všech tří souborů tvoří stejný kód (kostra) – společný kód.

1.2. Navigace

Web obvykle tvoří několik samostatných stránek. Aby mezi nimi šlo procházet, musí se propojit odkazy. Proto je ve všech třech souborech tato část:

<hr>  
  <a href="index.html">Úvod</a>  
  <a href="nabidka.html">Nabídka</a>  
  <a href="kontakt.html">Kontakty</a>  
<hr>

Značky <hr> (horizontal rule – vodorovná linka) zde slouží pouze k vizuálnímu oddělení. Až budeme web stylovat linky skryjeme.

⚠️ Všimni si, že i když jsou značky <a> pod sebou, prohlížeč je zobrazuje vedle sebe. Naopak značka <hr> (a jiné) je tzv. "bloková", prohlížeč za ní odřádkuje.

Nastal čas web vyzkoušet. Nejjednodušší je otevřít složku cafe a poklepáním otevřít jeden ze souborů .html. Zatím je na nich pouze společný obsah: hlavička, navigace a zápatí.

Všimni si také údaji na kartě v prohlížeči – to je ten text v <title>:

1.3. Doplněk "Live Preview"

Existují i komfortnější způsoby, zobrazení obsahu v prostředí VSCode. Jedním z nich je doplněk Live Preview:

Po jeho instalaci se vrať na správu souborů (první ikona shora) a klepni na jeden z html souborů. V pravém horním rohu se zobrazí ikona rozděleného okna s lupou. Klepni na ni. V pravé části okna se zobrazí živý náhled kódu:

Doplněk je "chytrý". Ikona se zobrazí pouze u podporovaných formátů souborů. V našem případě .html. U nepodporovaných, např. .txt, .css a jiných se nezobrazí.

Od běžného zobrazení html souboru se liší nejen živým náhledem, ale také URL adresou:

Tento způsob simuluje skutečný webový server. Jen pro úplnost:

Nyní postupně každou ze tří stránek doplníme obsahem a nakonec ostylujeme pomocí CSS.

1.4. Úprava zápatí

Text Jméno Příjmení třída (kolem řádku 23) uprav na své jméno a třídu. A to ve všech třech souborech. Vodorovná čára je jen vizuální oddělovač.

1.5. Soubor index.html

Obsah na stránce bude vypadat takto

Jak to ve světě HTML a VSCode funguje?

Úplně jinak, než nař. ve Wordu. Veškerý obsah musí být vložený v nějaké značce (elementu). Např. text "Vítejte v Aroma Café..." je odstavec <p></p>.

Ve VSCode se nejprve vytvoří značka: Stačí napsat písmeno p, a VSCode (resp. "našeptávač" Emmet) nabídne možné značky začínající na p:

Stačí stisknout Enter a značka se vytvoří s kurzorem uvnitř:

Teď už stačí napsat text, který má v odstavci být:

Takto to funguje u všech ostatních značek.

Nyní vytvoř stejným postupem druhý odstavec.

Obrázek se vkládá do nepárové značky <img>. Stačí začít psát im a našeptávač zobrazí možnosti (viz obrázek níže). Element img je nepárový (nemá </img>)! Do do atributu alt="" napiš text, který slovně popisuje, co na něm je, např. "šálek kávy". Velikost obrázku zatím neřeš. Později ho upravíme pomocí stylů (CSS).

Cesta img/coffee.jpg v atributu src je tzv. "relativní". Čte se nějak takto: "soubor coffee.jpg je ve složce img". Tím je zajištěno, že cesta bude fungovat, i když se web (projekt) cafe přesune kamkoliv jinam.

Velmi užitečný je doplněk Image Preview. Stačí jej nainstalovat, nic se v něm nenastavuje.

Po najetí myší na obrázek v kódu uvidíš jeho detaily (velikost a rozměry):

Zkontroluj, zda stránka funguje.

1.6. Soubor nabidka.html

Obsah na stránce vytvoř takto:

Vytváří se stejně jako odstavce: nejprve značka a až pak její obsah.

Odrážkový seznam vypadá takto. Zabudovaný "našeptávač" ve VSCode umí mnohem víc. Pro naše seznamy potřebujeme tuto strukturu značek:

Snadno ji vytvoříme pomocí zápisu:

Zkontroluj, zda stránka funguje.

Všimni si, že nikde nedefinujeme vzhled (velikost a barvu písma, značky odrážek a jejich odsazení od okraje). Toto vše nastavuje prohlížeč automaticky. Požadované změny vzhledu se provádí pomocí CSS stylů.

1.7. Soubor kontakt.html

Obsah na stránce vytvoř takto:

Značka <table> definuje tabulku jako celek. <tr> (table row) je řádek, <th> (table head) hlavičková buňka a <td> (table data) běžná buňka.

1.8. ⬆️ Uložení (publikování) na server TuX

Návod, jak na to je zde: tux.html

Cesty v URL prohlížeče a serveru:

https://tux.panska.cz/~10XPrijmeniJ/cafe  
                  /home/<jmeno>/www/cafe
                                   ^

2. Teorie

2.1. Webová stránka a web

2.2. HTML

Základním jazykem, kterým se přenáší informace mezi serverem a klientem je jazyk HTML (HyperText Markup Language – odkazovací značkovací jazyk).

2.3. Náležitosti HTML dokumentu

Každá webová stránka (dokument html) má něco jako kostru. Skládá se z několika značek: <html>, <head>, <body>. Obsahuje povinné a nepovinné části.

2.4. Základní HTML značky

Párové: ...

<p>
  Dnešní kurz <b>výpočetní techniky</b> je plně obsazen. 
  Nezapomeňte si vzít <i>notebook</i> s sebou.
</p>

<p>
  Upozornění: Účast na zítřejším školení je <strong>povinná</strong>! 
  Prosíme všechny, aby <em>důkladně</em> zkontrolovali své přihlášení.
</p>

Nepárové: <znacka> nebo i <znacka />

V současnosti existuje 124 HTML značek. V procesu testování jsou další dvě.

Lomítko na konci je pozůstatek jedné z verzí HTML (XHTML), kde platilo, že každá značka musí být uzavřena - tedy i ty nepárové. Dnes se na to už tolik nehledí.

2.5. Terminologie

Termín "element" označuje celou značku jako celek – tzn. otevírací i uzavírací. Je to oficiální označení i v češtině.

⚠️ Budeme si pamatovat:

2.6. Projekt

Projekt je složka obsahující všechny potřebné dokumenty a soubory (např. obrázky, dokumenty, multimédia…).

⚠️ Důležité pravidlo: Všechny názvy souborů a složek (včetně názvu projektu) musí být:

Příklady:

❌ Chybně ✅ Správně
Obrázky obrazky nebo lépe img
Krokodýl.JPG krokodyl.jpg
O nás.html o-nas.html nebo o_nas.html
Harry Potter a Tajemná komnata.html hp2.html nebo potter2.html

2.7. Dokumentace

  1. https://www.w3schools.com/html/default.asp
  2. https://developer.mozilla.org/en-US

2.8. Klíčové vlastnosti jazyka HTML

Jinými slovy:

  1. přikázání: “Enterem neodřádkuješ!”
  2. přikázání: “Mezerou neodsuneš!”
  3. přikázání: “Vše neznámé ignoruju!”

2.9. Vysvětlující video