LAB02 - nvbach91/4IZ268-2022-2023-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/
Ú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

deklarace typu dokumentu a říká, jaký Document Type Declaration/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 (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

do tagu lze psát další informace, které se nezobrazí v prohlížeči
skládá se z názvu atributu a jeho hodnoty (klíč - hodnota)
každý tag má nějaké povolené atributy, které se nějakým způsobem interpretují v prohlížeči
exituje jich asi 169
https://www.w3schools.com/html/html_attributes.asp
https://www.w3schools.com/tags/ref_attributes.asp

<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

existuje jich asi 120 - viz https://www.w3schools.com/tags/
příklady

<head> <body> <p> <a> <div> <strong> <em> <h1> <h2> <img> <span> <header> <footer> <article> <ul> <ol> <li> <table> <thead> <th> <tbody> <tr> <td> <br> <hr> <blockquote>-- <cite> <abbr> <form> <input> <label> <button> <select> <option>

...

Základní struktura HTML5

Page Title Page Content ">

<!DOCTYPE html> <html> <head><title>Page </head><body></body></html>HTML struktura je stromovou strukturou<html>      -- kořenový tag -- hlavička -- tělo -- paragraf -- odkaz -- generický kontejner -- zvýraznění -- zvýraznění -- nadpis úrovně 1 -- nadpis úrovně 2 -- obrázek -- kus textu -- záhlaví -- zápatí -- článek -- neuspořádaný seznam -- uspořádaný seznam -- položka v seznamu -- tabulka -- hlavička tabulky -- řádek v hlavičce tabulky -- tělo tabulky -- řádek v tabulce -- buňka v tabulce -- prázdný řádek -- horizontální čára blok citace -- inline citace -- vysvětlivka -- formulář -- textové pole -- název -- tlačítko -- výběr -- možnost ve výběru id="user-content-základní-struktura-html5" class="anchor" aria-label="Permalink: Základní struktura HTML5" href="#základní-struktura-html5">

data-snippet-clipboard-copy-content=" n> Title</title> an> n> an> >

href="#html-struktura-je-stromovou-strukturou" id="user-content-html-struktura-je-stromovou-strukturou" class="anchor" aria-label="Permalink: HTML struktura je stromovou strukturou">

-56d87ffb2d2d.png" alt="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

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

názvy těchto tagů nesou význam a tím dává obsahu význam
https://www.w3schools.com/html/html5_semantic_elements.asp - preferovat!

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

Sémantická struktura stránky

použití sémantických tagů

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

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

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

Domácí úkol

Termín odevzdání Příští Čt 23:59:59
nahrát stránky na server eso.vse.cz tak, aby byly dostupné pod odkazy
vypsat odkazy na tyto stránky do https://github.com/nvbach91/4IZ268-2022-2023-ZS/issues/2
používejte pouze HTML5, bez CSS, bez JS!

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

stránka, kde jsou použity různé tagy a atributy: nadpisy různých úrovní, paragrafy, odkazy, zvýraznění, apod..., viz https://github.com/nvbach91/4IZ268-2022-2023-ZS/wiki/LAB02#html5-tagy
jako plnící text lze použít lorem ipsum

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