LAB02 - nvbach91/4IZ268-2022-2023-ZS Wiki

Základy tvorby webových stránek v HTML5 - část 1

Jak psát webové stránky pomocí HTML5

Obsah

  • https://github.com/4iz268/cviceni/tree/master/01-html-uvod/
  • Úvod do HTML
  • Editor + Prohlížeč + Konzole
  • DOCTYPE
  • Tagy vs elementy vs text
  • Párový vs nepárový tag
  • Atribut
  • Vnoření elementů
  • HTML5 tagy
  • Blokový vs inline tag
  • Sémantické tagy
  • Sémantická struktura stránky
  • Základní struktura HTML5
  • Odkazy & přesměrování
  • Struktura webu
  • Typy stránek podle obsahu

Úvod do HTML

  • HyperText Markup Language
  • značkovací jazyk pro tvorbu webových stránek, tj. HTML dokumentů
  • není to programovací jazyk
  • pomocí HTMl "značkujeme" obsah stránky, dáváme mu význam a vytváříme jeho strukturu.

Editor + Prohlížeč + Konzole

  • otevřete si editor a prohlížeč vedle sebe, abyste viděli náhled vaší stránky
  • v konzoli prohlížeče lze sledovat stav renderování vaší stránky

První HTML soubor

  • vytvořte si prázdný adresář
  • tento adresář otevřete ve VS Code
  • v něm si vytvořte soubor index.html (HTML soubor má příponu .html, zobrazení přípony souboru ve Windows si nastavte v nastavení složek)
  • index.html soubor bude naším homepage
  • tento soubor otevřeme v prohlížeči

Jak na hezčí odkazy (clean URL - bez přípony .html)

  • Vytvoříme složku (s požadovaným názvem stránky - bez diakritiky) a do ní dáme soubor index.html - všude!
  • odkaz na tuto stránku bude ceska k této složce

DOCTYPE

Tagy vs elementy vs text

  • element je každý jednotlivý blok na stránce, webová stránka se skládá z elementů
  • elementy se vytvářejí pomocí tagů podle DTD
  • elementy mohou obsahovat text
  • elementy mohou mít vnořené elementy - pokud jde o párový tag

Párový vs nepárový tag

  • párový tag má vždy dvě části (vyskytují se v párech): začínající (opening) tag a ukončovací (closing) tag
<tag>        </tag>
  ^             ^
  |             |
opening tag     |
              closing tag
  • nepárový tag má pouze první část - do nich nelze vnořit další tagy nebo text
<tag>

Komentáře

  • prohlížeče je ignorují a nijak neinterpretují
<!-- toto je komentář -->

Atribut

<tag atribut="hodnota"></tag>

Vnoření elementů

  • pro každou hlubší úroveň přidáme indentaci v počtu 2 mezer nebo 4 mezer
  • dodržet stejnou velikost indentace všude v dokumentu a pokud možno i v rámci celého vašeho webu!
<tag1>
  <tag2></tag2>
  <tag3>
    <tag4>
      <tag5>
    </tag4>
  </tag3>
</tag1>

HTML5 tagy

<html>      -- kořenový tag 
<head>      -- hlavička 
<body>      -- tělo 
<p>         -- paragraf 
<a>         -- odkaz
<div>       -- generický kontejner 
<strong>    -- zvýraznění 
<em>        -- zvýraznění 
<h1>        -- nadpis úrovně 1 
<h2>        -- nadpis úrovně 2 
<img>       -- obrázek 
<span>      -- kus textu 
<header>    -- záhlaví 
<footer>    -- zápatí 
<article>   -- článek
<ul>        -- neuspořádaný seznam
<ol>        -- uspořádaný seznam
<li>        -- položka v seznamu
<table>     -- tabulka
<thead>     -- hlavička tabulky
<th>        -- řádek v hlavičce tabulky
<tbody>     -- tělo tabulky
<tr>        -- řádek v tabulce
<td>        -- buňka v tabulce
<br>        -- prázdný řádek
<hr>        -- horizontální čára
<blockquote>-- blok citace
<cite>      -- inline citace
<abbr>      -- vysvětlivka
<form>      -- formulář
<input>     -- textové pole
<label>     -- název
<button>    -- tlačítko
<select>    -- výběr
<option>    -- možnost ve výběru

...

Základní struktura HTML5

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
  	Page Content
  </body>
</html>

HTML struktura je stromovou strukturou

image

<html>
  <head>
    <title>Ahoj svete</title>
    <link>
  </head>
  <body>
    <p></p>
    <div>
      <p>lorem ipsum</p>
    </div>
  </body>
</html>

Blokový vs inline tag - defaultní chování

  • Blokový tag zabírá celou šířku stránky / řádku
  • začne na novém řádku
<h1>, <h2>, <div>, <p>
  • Inline tag zabírá jen potřebnou šířku, používá se pro značení v rámci řádku
  • pokračuje na stejném řádku
<strong>, <em>, <a>, <img>
  • Ověřte si v konzoli (Chrome) F12

image

Zobrazení zdrojového kódu stránky v prohlížeči

  • (Chrome) F12, záložka Source

Zobrazení objektového modelu stránky v prohlížeči

  • (Chrome) F12, záložka Elements

Sémantické tagy

<header>, <section>, <nav>, <article>, <footer>, atd...

Sémantická struktura stránky

  • použití sémantických tagů

img

img

Odkazy & přesměrování

  • použití tagu <a> a atributu href a target
<a href="https://www.google.com">Odkaz na google.com</a>
<a href="https://www.google.com" target="_blank">Odkaz na google.com - otevřít v novém okně</a>
<a href="//www.google.com" target="_blank">Odkaz na google.com bez specifikace protokolu</a>

<a href="/~xname/">Odkaz domovskou stránku</a>
<a href="/~xname/">Odkaz domovskou stránku</a>
<a href="/~xname/contact/">Odkaz stránku contact v domovském adresáři</a>
<a href="/~xname/products/">Odkaz stránku products v domovském adresáři</a>
<a href="/~xname/posts/2020-09-27/">Odkaz stránku 2020-09-27 v adresáři post, který je pod domovským adresářem</a>
<a href="2020-09-26">Odkaz stránku 2020-09-26 ve stejném adresáři, ve kterém se nachází současná stránka</a>
<a href="./2020-09-26">Odkaz stránku 2020-09-26 ve stejném adresáři, ve kterém se nachází současná stránka</a>
<a href="../2020-09-26">Odkaz stránku 2020-09-26 v nadřazeném adresáři</a>
<a href="../../2020-09-26">Odkaz stránku 2020-09-26 v adresáři, který se nachází o dva stupně vejš</a>

Struktura webu

  • stromová struktura

img

Typy stránek podle obsahu

  • každý web by měl mít domovskou stránku
  • v případě firemního webu např.:
    • o nás
    • produkty/služby
    • kontakty
    • kariéra
    • ochrana osobních údajů
    • obchodní podmínky
    • sponzoři

Metadata

  • data o datech, data popisující o čem je stránka
  • nebudou nijak zobrazeny na stránce
  • typy metadat: autor, klíčová slova, popis, verze
  • do tagu <head> napíšeme tag <meta>
  • atributy:
    • name - "description", "keywords"
    • content - hodnota
<meta name="keywords" content="school, web development, programming">
<meta name="author" content="Nguyen Viet Bach">
<meta name="description" content="This page is about something great!">

Q&A

  1. Co by mělo být na úplném začátku HTML souboru a k čemu je?
  2. Jaká je základní struktura dokumentu?
  3. Jaké jsou dva typy tagů podle jejich syntaxe?
  4. Jaké jsou dva typy tagů podle způsobu zobrazování?
  5. Jak píšeme komentáře v HTML?
  6. Co jsou to atributy v tagu a jak je deklarujeme?
  7. Jaké jsou sémantické tagy a k čemu jsou?
  8. K čemu je tag <meta>?
  9. Jaký je rozdíl mezi absolutní cestou a relativní cestou k souborům?

Domácí úkol

Napište HTML5 "tahák" v souboru /cheatsheet/index.html

Napište stránku obsahující články blogu v souboru /blog/index.html

  • používejte sémantické tagy pro k tomu určené obsahy
  • jako plnící text lze použít lorem ipsum

Napište životopis nějaké známé osobnosti v souboru /resume/index.html

Vytvořte domovskou stránku v souboru index.html včetně navigačních odkazů

  • zde bude navigace s odkazy na všechny 4 vytvořené stránky
  • tuto stejnou navigaci vložte i do ostatních stránek
  • vyzkoušejte navigaci proklikem
⚠️ **GitHub.com Fallback** ⚠️