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

• 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
• Jak na hezčí odkazy (bez přípony .html)
• 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

\-- 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
     ...

• Instalace pluginů ve VSCode:

• 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
• SFTP - VSCode Plugin, automatická sychronizace souborů mezi lokální složkou a vzdálenou složkou - už nemusíte používat WinSCP
  • Ve VSCode si nainstalujte tento plugin
  • Nastavení:
    • Ctrl + Shift + P, napsat SFTP: Config a vybrat
    • vložit konfigurace uvedené dole: (nezapomeňte doplnit své přihlašovací údaje - xname, heslo do insisu) - tím se vám vytvoří složka .vscode - tuto složku nemazat ani nikam nenahrávat, protože obsahuje citlivé informace jako je vaše heslo!!!
    • pro jednorázovou synchronizaci stávajících složek: Ctrl + Shift + P, napsat SFTP: Synch Local -> Remote a vybrat
    • veškeré nové soubory se od teď budou automaticky nahrávat na server eso do vaší složky - zkontrolujte
    • a veškeré budoucí změny v souborech se automaticky propagují na server eso ve vaší složce - zkontrolujte

{
    "name": "eso.vse.cz server",
    "host": "eso.vse.cz",
    "protocol": "sftp",
    "port": 22,
    "username": "xname",
    "password": "heslo_do_insisu",
    "remotePath": "/home/httpd/html/users/xname/",
    "uploadOnSave": true,
    "ignore": [".vscode", ".git", ".DS_Store", "node_modules"]
}

• 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

• Vytvoříme složku (s požadovaným názvem stránky) a do ní dáme soubor index.html - všude!

• 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
• 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 2019
  • odkaz ze stránky news na stránku 2019/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'
  • '../2019/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
│   └───2019
│       │   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

• seznamy, tabulky, obrázky, formuláře, iframe, ...
• https://github.com/4iz268/cviceni/tree/master/02-html-pokracovani/

• HTML validator - https://validator.w3.org/

• https://compressjpeg.com
• https://compresspng.com

• pro psaní speciálních znaků v dokumentu

     no-break-space  mezera
>      greater than    >
&lt;      less than       <
&quot;    quote           "
&apos;    apostrof        '
&amp;     ampersand       &
&cent;    cent            ¢
&pound;   libra           £
&yen;     japonský Yen    ¥‎
&copy;    copyright       ©
&reg;     registered      ®
...

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

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

...

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

<!-- 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>