LAB03 - nvbach91/4IZ268-2022-2023-ZS GitHub Wiki

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

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

Obsah

  • Domácí úkoly - oprava
  • Doporučená struktura složek na cvičeních
  • Nastavení lokálního serveru pro usnadnění vývoje
  • Nastavení automatické sychronizace lokální složky se složkou na serveru eso.vse.cz
  • Navigace v souborovém systému vs. navigace ve stromové struktuře webu
  • Relativní cesty vs. absolutní cesty
  • Další HTML5 tagy - seznamy, tabulky, obrázky, formuláře, iframe, ...
  • Validace stránek a oprava chyb
  • Obrázky a jejich optimalizace
  • HTML entity
  • Atributy id, class
  • Navigační odkaz v rámci stránky
  • E-mailový odkaz pomocí tagu a

Domácí úkoly - oprava

  • Zastaralé tagy (center, font)
  • Zastaralá atributy (border, align)
  • Struktura tagů v tabulce, chybí thead, tbody...
  • Indentace kódu, pouze a jen při vnoření, viz stromová struktura v LAB02, dodržet konzistenci indentace
  • Vnoření tagů: omezení (ul, li)
  • Každá stránka smí mít jeden h1 nadpis, a pouze jeden
  • Párový tag, chybí začínající / ukončovací část
  • Nepoužívat inline CSS
  • Názvy tagů vždy malými písmeny!
  • Chybějící hodnota v tagu title
  • Tag b, i, u nepoužívat, používat strong, em, CSS
  • Chybějící atribut alt
  • <article><p></article></p> ...
  • nadpis uvnitř paragrafu??
  • v section je nutné mít nadpis
  • na některé speciální znaky je potřeba použít tzv. HTML entita
  • mezery mezi deklarace atributů
  • target="_blank"
  • názvy souborů malýmmi písmeny, slova oddělit pomlčkou
  • chybí tag html
  • <!DOCTYPE html>, někdy úplně chybí, někdy špatná syntaxe
  • hr není párový tag
  • data:image... není odkaz na obrázek
  • zapomeňte na tag <style>
  • tr mimo table ??
  • číst zadání - 4 stránky, ne 1
  • do head nepatří věci, které se mají na stránce zobrazovat
  • zapomeňte na atribut style
  • povolené/nepovolené atributy v tagu
  • br v seznamu?
  • psaní atributů, bez mezer
  • horizontální čára = tag hr
  • hodnota atributu width je pouze číslo, bez jednotky
  • hodnota atributů id a class vždy v angličtině
  • nekopírujte něco, čemu nerozumíte, a když už něco kopírujete, přečtěte si to
  • to že to nějak funguje neznamená že je to dobře

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

\-- xname       # <-- kořenová složka - tuto složku otevřít ve VSCode
     \-- cv01   # první týden
     |-- cv02   # druhý týden
     |-- cv03   # třetí týden
     |-- cv04   # čtvrtý týden
     ...

image

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

  • Instalace pluginů ve VSCode:

image

  • Live Server - VSCode Plugin, automatické znovunačtení stránky po jakékoliv změně ve zdrojovém souboru - už nemusíte mačkat Refresh
    • Ve VSCode 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 VSCode
      • pro zastavení serveru vyberte Stop Live Server

Automatické formátování zdrojáku HTML ve VSCode

  • Alt + Shift + F nebo pravý klik + vybrat Format Document
  • Pro formátování CSS je potřeba si nainstalovat plugin CSS formatter v1.0.1

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

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

  • Relativní cesty vs. absolutní cesty
  • v obou případech jde o stromovou strukturu
  • 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 na jakémkoliv serveru
  • 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, napište následující 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
  • jaká je výhoda a nevýhoda relativních cest?
  • jaká je výhoda a nevýhoda absolutních cest?
  • 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/'
cv03
│   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

Struktura webu

image

Další HTML5 tagy

Validace stránek a oprava chyb

Obrázky a jejich optimalizace

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

HTML entity

  • pro psaní speciálních znaků v 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      ®
...

Atribut id a class

  • konvence
    • používat smysluplné anglické pojmy, tj. ne id="x-1", id="x-2"
    • oddělit slova pomocí pomlčky, např. id="remote-control", class="sale-item", pro atribut name použít camelCase, např. name="justAnotherAttribute"
  • hodnota atributu id je unikátní v rámci dokumentu - nesmí se opakovat na více místech
  • hodnota atributu class lze opakovat - určuje název pro referenci v CSS
<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>

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

<h2 id="chapter-01">Kapitola 1</h2>

...

<a href="#chapter-01">Go to Chapter 1</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>

Domácí úkol

image

  • Vytvořte 3 stránky, které prezentují obsah knihy, která má 3 kapitoly.

    • Textový obsah stránky musí dávat smysl (nepoužívejte lorem ipsum)
    • Na každé stránce (kapitole) umístěte navigační odkazy do kapitol 1, 2 a 3
    • Používejte vhodný nadpis pro názvy kapitol a podkapitol
    • Obsah - table of content (ToC) této kapitoly s klikatelnými odkazy na jednotlivé podkapitoly v rámci stránky
    • Odkaz zpět na obsah (ToC) u každého nadpisu podkapitol a na konci každé podkapitoly
    • Každá stránka musí obsahovat minimálně 3 úrovně nadpisů, tj. např. 1, 1.1, 1.1.1
    • Každá stránka musí obsahovat minimálně 1 tabulku s min. 5 sl. a 10 ř., tabulky musí mít popisek
    • Každá stránka musí obsahovat minimálně 1 obrázek s popiskem
    • Každá stránka musí obsahovat minimálně 1 seznam (kromě ToC)
    • Každá stránka musí obsahovat nějaké HTML entity pro zobrazení speciálních znaků
    • Kapitoly ukončete horizontální čárou
    • V kódu používejte vhodné sémantické značky
    • Stránky nesmí obsahovat žádný CSS
    • Nesnažte se měnit vzhled stránky ani vzhled textu (kromě pomocí k tomu určených tagů jako strong, em)
    • Průběžně si kontrolujte validitu kódu a formátujte
    • Stránky zveřejnit na serveru eso pod odkazy

  • Odkazy napište do vlákna https://github.com/nvbach91/4IZ268-2022-2023-ZS/issues/

  • Termín odevzdání Příští Čt 23:59:59

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