
Lekce 1


# Představení

* Czechitas
* Aleš
* Honza
* Jakub
* Lenka
* Mezi sebou - kontakty jsou důležité


# Certifikát

* Podmínky
* 80% účast
* plnění domácích úkolů


# Požadavky

* Základní počítačová gramotnost
* Ovládání počítače
* Souborový systém


# Plán 1/2

1. Úvod do HTML, Visual Studio Code
2. Úvod do CSS, Github
3. Box model, DevTools, pseudotřídy, pokročilé selektory
4. Pozicování, Responsivní design
5. Flexbox úvod


# Plán 2/2

6. Flexbox prakticky, Grid úvod
7. CSS Animace
8. JavaScript úvod
9. JavaScript prakticky
10. Publikace webu prakticky (Netlify)


# Naťukneme

* HTML tabulky, formuláře
* CSS Frameworky a jejich role a využití - Boostrap
* JavaScript Frameworky a jejich role a využití - jQuery, moderní frameworky
* Jak funguje HTTP protokol (síťový protokole Webu)
* Moderní HTML


# Komunikace

Záznamy

[Web](https://czechitaswebcb2019.alesruzicka.eu/)

[Facebook skupina](https://www.facebook.com/groups/520434798733390/)


# Průběh hodiny

* Přestávka 15 minut cca v polovině
* Ptáme se
* Prakticky zkoušíme - vše vypadá jednoduše na papíře


# Motivace

Kdyby to bylo jednoduché, dělal by to každý


# Začínáme, co je Web?

* Web
* Http
* Webový prohlížeč
* HTML, CSS, JavaScript


# Instalace VS Code

* https://code.visualstudio.com/
  * Rozšíření *Live Server*


# HTML

* Značkovací jazyk (tagy)
* Viditelná část webu


# HTML Tag

```
obsah
```


# Základní tagy

```
odstavec
nadpis první úrovně
```

* vzhled není důležitý
* důležitý je sémantický význam


# Úkol: Prázdný HTML soubor

1. Vytvoříme adresář
1. Otevřeme ve VS Code
1. Vytvoříme soubor `index.html`
1. Použijeme zkratku `html:5 + tab` k vytvoření obsahu souboru


# Jednoduchý tag - nadpis

1. Jsou osnova
1. 6 úrovní
1. `` zpravidla pouze jednou


# Attributy - odkaz

1. `text odkazu`
1. attributy - nezobrazované doplňkové informace k tagům
1. `Czechitas`
1. Co je Url?


# Nepárové tagy - obrázek

1. ``
1. nepárový tag, možno jako ``
1. `alt`


# Zanořování tagů - odstavec

1. `Obsah tagu`
1. `Zde je Tag v tagu`


# Nesémantické tagy

1. `Obsah tagu`
1. `Obsah tagu`


# Dneska Konec

# Uvidíme se příště