LAB02 2019 09 27 - nvbach91/4IZ268-2019-2020-ZS GitHub 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/
  • 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

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

DOCTYPE

  • deklarace typu dokumentu a říká, jaký Document Type Definition (DTD) se má používat v dané stránce
  • DTD obsahuje popis syntaxe a výčet validních tagů
  • říká user agentovi (prohlížeč, roboti, ...), jak si stránku má interpretovat
  • HTML5, HTML 4.01 Strict, XHTML 1.0 Strict
  • https://www.w3schools.com/tags/tag_doctype.asp

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: začínající tag a končící tag
<tag></tag>
  • nepárový tag má pouze první část - do nich nelze psát další tagy nebo text
<!-- první způsob -->
<tag> 

<!-- druhý způsob --> 
<tag/>

<!-- používejte vždy jen jeden způsob v rámci dané stránky a pokud možno v rámci celého vašeho webu! -->

Komentář

  • 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>
  </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

...

Základní struktura HTML5

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

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

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

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

  • F12, záložka Source

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

  • 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/contact.html">Odkaz stránku contact.html v domovském adresáři</a>
<a href="/~xname/products.html">Odkaz stránku products.html v domovském adresáři</a>
<a href="/~xname/posts/2019-09-27.html">Odkaz stránku 2019-09-27.html v adresáři post</a>
<a href="2019-09-26.html">Odkaz stránku 2019-09-26.html ve stejném adresáři, ve kterém se nachází současné stránka</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

  • slouží k uvedení meta informací pro stroje
  • nebudou nijak zobrazeny na stránce
  • příklad metadat: autor, klíčová slova, popis, verze
  • v hlavičce napíšeme tag <meta> do tagu <head>
  • 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.html

  • stránka ke jsou použity následující tagy a atributy - nadpisy různých úrovní, paragrafy, odkazy, zvýraznění, apod...
  • jako plnící text lze použít lorem ipsum

Napište stránku obsahující články blogu v souboru blog.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.html

  • pro inspiraci např. Václav Zeman, Andrej Babiš, Donald Trump, ...

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** ⚠️