HTML, CSS Cvičení 1 Webová kartografie Podzim 2019 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Proč? Co je to web? Nástroje Co se naučíme? Proč? 1 Pro navštívení webu stačí napsat pár znaků (někdy ani to ne!) do zařízení, které má většina z nás v kapse1 2 Vyvíjíte na platformě, která má dosah miliard lidí. 3 Můžete si dělat co chcete! Nelíbí se vám mapa? Udělejte lepší! 4 Buďte zvídaví. Jak to funguje? 1 70 % v Evropě, 35 % globálně (https://www.bankmycell.com/blog/how-many-phones-are-in-the-world) Podzim 2019 HTML, CSS http://www.rleonardi.com/interactive-resume/ . . . . . . . . . . . . . . . . . . . . http://tvrdek.cz/ . . . . . . . . . . . . . . . . . . . . https://mapa.idsjmk.cz . . . . . . . . . . . . . . . . . . . . https://zelda.sci.muni.cz/ . . . . . . . . . . . . . . . . . . . . https://www.progressivewebflap.com/ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Proč? Co je to web? Nástroje Co se naučíme? Co je to web? World Wide Web web vs. internet co je vlastně web? co potřebujete na práci s webem? Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Proč? Co je to web? Nástroje Co se naučíme? Nástroje Co budete potřebovat? Textový editor – budeme psát kód Visual Studio Code, Sublime Text, Atom.io, Brackets, PSPad, … Internetový prohlížeč – výsledek si potřebujete prohlédnout, neustále budete používat vývojářské nástroje Google Chrome, Firefox, Safari, Chromium, Vivaldi, Opera, Internet Explorer, Konqueror, … Git – pro správu kódu, spolupráci, nahrávání výsledku, etc. (není podmínkou) Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Proč? Co je to web? Nástroje Co se naučíme? Co se naučíme? základy HTML, CSS, JavaScriptu práce s OGC standardy řešit problémy (psaní kódu je jenom výrazový prostředek) HTML, CSS, JavaScript, … jsou cizí jazyky, za 2 hodiny týdně vás nikdo cizí jazyk nenaučí. Bylo by dobré samostudium. Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to HTML? HTML elementy Anatomie HTML Co je to HTML? Hypertext Markup Language Standard W3C aktuální verze HTML 5 HTML se skládá z elementů Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to HTML? HTML elementy Anatomie HTML HTML elementy HTML dokument tvoříme pomocí tagů tagy jsou párové (html, head, p, …) a nepárové (img, meta, br, …)

I’m a paragraph.

And I have an attribute.

We can be nested.

Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to HTML? HTML elementy Anatomie HTML Anatomie HTML Hlavní stránka webu se zpravidla jmenuje index.html Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Struktura dokumentu Procvičování 1 Obsah dokumentu Procvičování 2 Struktura obsahu Procvičování 3 ovlivňuje chování webové stránky není běžně viditelná v prohlížeči název, kódování znaků, popis, … → Page title Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Struktura dokumentu Procvičování 1 Obsah dokumentu Procvičování 2 Struktura obsahu Procvičování 3 primární obsah webu texty, videa, obrázky, odkazy, …

I’m a heading.

Followed by a paragraph.

Podzim 2019 HTML, CSS Tipy v názvech souborů a cestách k nim nepoužívejte diakritiku, mezery a velká písmena používejte angličtinu v kódu a názvech souborů odsazujte kód používejte zvýraznění syntaxe v textovém editoru naučte se pracovat s cestami k souborům: relativní cesty – používejte pro odkazování na obsah v rámci vlastního webu (a při odevzdávání cvičení), např. index.html nebo ../img/image.png (tzn. o jednu úroveň složky výše, složka img, soubor image.png) absolutní cesty – používejte pro odkazování na obsah na jiných webech, např. http://example.com/image.png i toto je absolutní cesta: file:///C:/Users/waldo/my-web.html ← téměř vždy bude špatně použít tuto formu na webu! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Struktura dokumentu Procvičování 1 Obsah dokumentu Procvičování 2 Struktura obsahu Procvičování 3 Procvičování 1 vytvořte si soubor index.html vyplňte název stránky, základní metainformace do těla stránky vložte libovolný text stránku si otevřete v prohlížeči Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Struktura dokumentu Procvičování 1 Obsah dokumentu Procvičování 2 Struktura obsahu Procvičování 3 Texty

I’m a second level heading

Lorem ipsum dolor sit amet.

I’m a link.

→ Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Struktura dokumentu Procvičování 1 Obsah dokumentu Procvičování 2 Struktura obsahu Procvičování 3 Seznamy tagy ul (odrážky), ol (číslovaný seznam), li (položky seznamu) pokud chceme více úrovní seznamu, nový seznam vložíme do tagu li, který chceme více rozvést (Tea → Black tea, Green tea)

Coffee
Tea
- Black tea
- Green tea
Milk

Petr Kellner
Andrej Babiš
- Agrofert
- Mafra
Karel Komárek

I’m a table caption
I’m a cell on the first row.	Me too.
I’m a cell on the next row.

Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Struktura dokumentu Procvičování 1 Obsah dokumentu Procvičování 2 Struktura obsahu Procvičování 3 Procvičování 2 obsah této stránky vložte do svého index.html a pokuste se jej naformátovat odpovídajícím způsobem: https://bl.ocks.org/3a98f100801d293b8f115b81595a41d6 Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Struktura dokumentu Procvičování 1 Obsah dokumentu Procvičování 2 Struktura obsahu Procvičování 3 Obrázky Alternative text

I’ll stand aside.

I’ll take the main part.

podle filmů a obsahu, přidejte jim odpovídající atribut id (např.

) Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset Co je to CSS? Cascading Style Sheets Standard W3C aktuální verze CSS 3 Instrukce pro prohlížeč jak vykreslovat HTML elementy Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset Struktura CSS Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset Propojení HTML a CSS https://bl.ocks.org/4d91cc215efba2645790432115b74273 http://bl.ocks.org/6615b1c13daf86362476b7440c08405e Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset Pro příklady kódu budeme používat https://bl.ocks.org/. Na stránce uvidíte vykreslený web ve zmenšeném okně, pod ním komentář k příkladu ode mě a na konci kód v jednotlivých souborech. Stránka bl.ocks.org vykresluje kód nahraný na stránku https://gist.github.com/, zdrojový kód si můžete snadno zobrazit a stáhnout když nahradíte řetězec bl.ocks.org za gist.github.com. Např.: https://bl.ocks.org/4d91cc215efba2645790432115b74273 → https://gist.github.com/4d91cc215efba2645790432115b74273 Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset Selektory CSS název elementu h1 { } p { } div { } id elementu #header { } #menu { } #footer { } třída (class) elementu .button { } .menu-item { } .important { } Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset kombinace selektorů a.menu-item {} div#main .article {} a mnoho dalších (*, >, , :not(), …) .button:hover {} * {} div > .button {} a:not(.external) {} Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset Atributy CSS vlastnosti písma p { font-family: Cambria, Georgia, serif; } .warning { font-weight: bold; } h1, h2, h3, h4, h5 { font-family: Impact, 'Arial Narrow Bold', sans-serif; } /* nebo */ .heading { font-family: Impact, 'Arial Narrow Bold', sans-serif; } Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset barvy body { color: blue; background-color: #333; } .note { background-color: rgb(200,100,50); } Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset pozice a rozměry (jednotky px, pt, em, rem, %, …) #main { width: 70%; padding: 20px; } .warning { position: absolute; top: 10px; left: 10px; } #menu { display: block; } Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset další … * { margin: 0; padding: 0; } .note { border: 1px solid gray; } .hide { display: none; } Podzim 2019 HTML, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak na web HTML Teorie HTML elementy CSS Závěr Co je to CSS? Struktura CSS Selektory CSS Atributy CSS Procvičování 4 CSS Reset Procvičování 4 nastylujte si HTML stránku pomocí CSS připojte si samostatný soubor style.css nebo vložte kód přímo do