LAB01 - nvbach91/4IZ268-2024-2025-ZS GitHub Wiki

Tvorba webových stránek

Protokol HTTP

  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
  • Způsob komunikace mezi klientem a webovým serverem pro přenos informací, souborů, dat, dokumentů na základě principu dotaz-odpověď.
  • Klient je např. webový prohlížeč, počítačový program, mobilní aplikace, ...
  • Server na internetu je např. nějaký veřejně přístupný počítač. V případě statického webu se na serveru ukládá nějaká struktura statických souborů.
  • Klient posílá dotaz (požadavek, request) na soubor (zdroj, prostředky, resource) a server ho vrátí jako odpověď (response).
  • V každém dotazu je více informací, např. URL, který určuje mimojiné umístění požadovaného souboru anebo způsob nalezení požadovaných dat - to aby server věděl, jak dotaz vyřídit.
  • Webový prohlížeč po získání potřebných souborů (především HTML dokument, CSS, obrázky, JavaScript) začne interpretovat, webová stránka se zobrazuje a uživatel může s ní interagovat.

image

HTML

  • HyperText Markup Language
  • značkovací jazyk pro tvorbu webových stránek, tj. HTML dokumentů
  • obsah stránky anotujeme pomocí HTML značek (HTML tagů), tím mu dáváme význam a vytváříme jeho strukturu.

Editor + Prohlížeč

  • vytvořte složku a pojmenujte ji vaším xname
  • tuto složku otevřete v editoru zdrojového kódu
  • vedle editoru si spusťte prohlížeč, abyste viděli náhled vaší stránky

První HTML soubor

  • v editoru si vytvořte složku cv01
  • ve složce cv01 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 je naše domovská stránka
  • tento soubor otevřete v prohlížeči

Doporučená struktura složek na cvičeních i na serveru eso

\-- xname
    \-- cv01/   # LAB01
    |-- cv02/   # LAB02
    |-- cv03/   # LAB03
    |-- cv04/   # LAB04
    ...

Typická struktura statického webu

\-- (kořen webu)
    \-- about-us/
    |   \-- index.html
    |
    |-- contact/
    |   \-- index.html
    |
    |-- services/
    |   \-- index.html
    |
    |-- assets/
    |   \-- images/
    |   |   \-- image.png
    |   |
    |   |-- css/
    |   |   \-- styles.css
    |   |
    |   |-- js/
    |   |   \-- app.js
    |
    |-- index.html

Jak na hezčí odkazy (clean URL, tj. 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 - toto platí pro všechny stránky
  • odkaz na tuto stránku bude ceska k této složce

DOCTYPE

Tagy vs elementy vs text

  • element je každý jednotlivý prvek na stránce, webová stránka se skládá z elementů
  • elementy se vytvářejí pomocí tagů
  • elementy mohou obsahovat text
  • elementy mohou obsahovat 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 ve dvojicích): 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 ani 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>

Struktura HTML dokumentu je stromová

image

<html>
  <head>
    <title>Hello world</title>
    <link>
  </head>
  <body>
    <p></p>
    <div>
      <p>lorem ipsum</p>
    </div>
  </body>
</html>

Blokový vs inline tag (defaultní zobrazení)

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

image

Sémantické tagy

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

image

Sémantická struktura stránky

  • použití sémantických tagů pro vytváření struktury webu podle

image

Validace stránek a oprava chyb

Statický web s více stránkami

  • Statický web je web, jehož stránky jsou statické HTML soubory
  • Web se skládá z více stránek, každá stránka by měla zobrazovat svůj vlastní obsah
  • Každý web má svou vlastní strukturu stránek
  • Web musí být provázán navigací (viz dále)

Typy stránek podle obsahu

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

Struktura webu je také stromová

image

Odkazy a přesměrování

  • použití tagu <a> (anchor - kotva) a atributu href a target
  • pomocí tohoto tagu vytváříme navigaci pro náš web nebo odkazy na jiný web
<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ě výše</a>

Absolutní odkazy vs relativní odkazy

  • absolutní odkazy obsahuje celou adresu protokol + doména + cesta
  • relativní odkazy obsahuje cestu k jiné stránce v rámci webu
  • je potřeba dbát na kontext, tj. to že vám funguje lokálně neznamená, že bude fungovat i na serveru
  • proto je nejbezpečnější používat relativní odkazy - tím zajistíme funkčnost webu v případě migrace na jiný server

Souborový systém statického webu

cvXX/
│   index.html
├───about/
│   │   index.html
│   └───team/
│       │   index.html
│       └───leadership/
│           │   index.html
│           └───board/
│                   index.html
├───assets/
│   ├───css/
│   │       styles.css
│   ├───img/
│   │       pikachu.jpg
│   │       squirtle.jpg
│   │       charmander.jpg
│   │       bulbasaur.jpg
│   └───js/
│           scripts.js
├───contact/
│       index.html
├───events/
│   │   index.html
│   ├───past/
│   │       index.html
│   └───upcoming/
│           index.html
├───news/
│   │   index.html
│   └───2020/
│       │   index.html
│       ├───01/
│       │       index.html
│       ├───02/
│       │       index.html
│       ├───03/
│       │       index.html
│       ├───04/
│       │       index.html
│       ├───05/
│       │       index.html
│       ├───06/
│       │       index.html
│       ├───07/
│       │       index.html
│       ├───08/
│       │       index.html
│       └───09/
│               index.html
└───team/
        index.html

image

Navigace v souborovém systému vs. navigace ve stromové struktuře webu

  • tvorba cest k souborům a složkám
    • . znamená aktuální adresář
    • .. znamená adresář nad aktuálním adresářem
    • např. ./events/upcoming/, ../../about/, ./img/pikachu.jpg
  • nechť máme následující strukturu složek, vytvořte následující relativní odkazy bez použití kořenové složky
    • odkaz ze stránky contact na stránku events
    • odkaz ze stránky team na stránku past events
    • odkaz ze stránky news na stránku 2020
    • odkaz ze stránky news na stránku 2020/09
    • odkaz ze stránky upcoming na stránku about
    • odkaz ze stránky leadership na stránku team
    • odkaz ze stránky board na stránku upcoming
    • odkaz ze stránky about na soubor styles.css
    • odkaz ze stránky about na soubor pikachu.jpg
    • odkaz ze stránky past-events na soubor styles.css
    • odkaz ze stránky past-events na soubor bulbasaur.jpg
    • odkaz ze stránky leadership na soubor styles.css
    • odkaz ze stránky leadership na soubor squirtle.jpg
    • odkaz ze stránky board na soubor styles.css
    • odkaz ze stránky board na soubor charmander.jpg
  • kde se aktuálně nacházím, pokud je následující cesta validní?
    • ./events/upcoming/
    • ../../about/
    • ./img/pikachu.jpg
    • ../2020/01.jpg
    • /about/team/leadership/

Navigace webu

  • Jedná se o seznam navigačních odkazů, který je umístěn v záhlaví nebo menu každé stránky
  • Použijeme sémantický tag <nav> 
<!-- Navigation on page / -->
<nav>
  <a href="./">Homepage</a>
  <a href="./about/">About</a>
  <a href="./contact/">Contact</a>
  <a href="./articles/">Articles</a>
  <a href="./articles/web-development/">Web Development</a>
  <a href="./articles/web-technologies/">Web Technologies</a>
</nav>
<!-- Navigation on page /articles/ -->
<nav>
  <a href="../">Homepage</a>
  <a href="../about/">About</a>
  <a href="../contact/">Contact</a>
  <a href="./">Articles</a>
  <a href="./web-development/">Web Development</a>
  <a href="./web-technologies/">Web Technologies</a>
</nav>
<!-- Navigation on page /articles/web-development -->
<nav>
  <a href="../../">Homepage</a>
  <a href="../../about/">About</a>
  <a href="../../contact/">Contact</a>
  <a href="../">Articles</a>
  <a href="./">Web Development</a>
  <a href="../web-technologies/">Web Technologies</a>
</nav>
  • Je patrné, že relativní odkazy v navigaci se mohou lišit v závislosti na tom, na které stránce se navigace nachází

Nastavení lokálního serveru pro usnadnění vývoje

  • Instalace pluginů ve VS Code:

image

  • Live Server - VS Code Plugin, automatické znovunačtení stránky po jakékoliv změně ve zdrojovém souboru - už nemusíte mačkat Refresh
    • Ve VS Code si nainstalujte tento plugin
    • Použití:
      • pravý klik na editor a vybrat Open with Live Server
      • tím se spustí lokální server a otevře se vám prohlížeč na adrese http://localhost:5500/...
      • první část URL cesty představuje kořenový adresář ve VS Code
      • pro zastavení serveru vyberte Stop Live Server

Automatické formátování zdrojového kódu HTML ve VS Code

  • Alt + Shift + F nebo pravý klik + vybrat Format Document

Automatická kontrola chyb při psaní HTML on-the-fly

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 awesome!">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="school, web development, programming">
    <meta name="author" content="Nguyen Viet Bach">
    <meta name="description" content="This page is about something awesome!">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Optimalizace obrázků

  • zmenšování rozměru - např. je nesmyslné používat obrázek 4000x5000 na obrazovce 1366x786
  • pokud má obrázek velké rozměry, v image editoru (Malování) ho zmenšete na max. 1920x1080 a poté ho optimalizujte v kompresoru (bezeztrátová komprese):

HTML entity

  • pro psaní speciálních znaků (a rezervovaných znaků) v HTML dokumentu
&nbsp;    no-break-space  mezera
&gt;      greater than    >
&lt;      less than       <
&quot;    quote           "
&apos;    apostrof        '
&amp;     ampersand       &
&cent;    cent            ¢
&pound;   libra           £
&yen;     japonský Yen    ¥
&copy;    copyright       ©
&reg;     registered      ®
...

Navigační odkaz v rámci stránky

<h2 id="chapter-01">Chapter 01</h2>

...

<a href="#chapter-01">Jump to Chapter 01</a>

E-mailový odkaz

<!-- otevře defaultní mailbox ve Vašem OS a založí nový e-mail určený uvedenému přijemcovi -->
<a href="mailto:[email protected]">Email me!</a>

<!-- přihodíme ještě předmět e-mailu -->
<a href="mailto:[email protected]?subject=Hello%20Jim">Email me!</a>

<!-- přihodíme i tělo zprávy -->
<a href="mailto:[email protected]?subject=Hello%20Jim&body=Greetings">Email me!</a>

Atributy id a class

  • id - unikátní identifikátor elementu
  • class - název třídy elementu - pro výběr elementů v CSS
  • používejte smysluplné anglické pojmy, tj. ne id="x-1", id="x-2", ale třeba id="navigator", id="main-menu"
  • oddělit slova pomocí pomlčky, např. id="remote-control", class="sale-item"
  • hodnota atributu id je unikátní v rámci dokumentu - nesmí se opakovat na více místech
  • hodnota atributu class není unikátní a může se opakovat
<article class="article" id="article-01">
  <h2 class="article-heading">Lorem ipsum...</p>
  <p class="article-paragraph">Lorem ipsum...</p>
  <p class="article-paragraph">emmet lori...</p>
  <p class="article-paragraph">dolor sit amet...</p>
</article>

Domácí úkol

  • Vytvořte HTML5 testovací stránku /test (nezapomeňte, že /test/ je složka, v niž má být soubor index.html
    • stránka, kde jsou použity různé tagy: nadpisy různých úrovní, paragrafy, zvýraznění textu, odkazy, obrázky, tabulky, seznamy, semantické tagy, HTML entity, atd.
    • jako plnící text lze použít lorem ipsum
  • Vytvořte stránku obsahující několik článků blogu /blog/, včetně nadpisů
    • používejte sémantické tagy pro k tomu určené obsahy
    • jako plnící text lze použít lorem ipsum
  • Vytvořte stránku s životopisem nějaké známé osobnosti /resume/
    • můžete hledat informace o této osobě na internetu
  • Vytvořte domovskou stránku /
    • zde bude nadpis a navigace s odkazy na všechny 4 vytvořené stránky, včetně této
    • tuto stejnou navigaci vložte i do ostatních stránek, tak aby odkazy fungovaly na všech stránkách
    • vyzkoušejte navigaci proklikem na všech stránkách
  • Všechny stránky zvalidujte v HTML validátoru a poté přidejte odkaz pro validaci stránky do každé stránky (viz obr. níže)

image

Termín odevzdání

  • 23:59:59 před dalším cvičením

Způsob odevzdání

⚠️ **GitHub.com Fallback** ⚠️