HTML, CSS Cvičení 1 Webová kartografie – úvod Podzim 2022 Filip Leitner 1 83.4% globálně (https://www.bankmycell.com/blog/how-many-. ph.on. es. -.ar. e-. i.n-. t.he. -w. o.rl. d.) – v roku 2016 to bolo len 49.4% . 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 Vyvíjíte na platformě, která má dosah miliard lidí. Můžete si dělat co chcete! Nelíbí se vám mapa? Udělejte lepší! Buďte zvídaví. Jak to funguje? 2 3 4 Filip Leitner HTML, CSS Webová kartografie 3 / 46 Obrázok, na ktorom je mapa Automaticky generovaný popis Obrázok, na ktorom je mapa Automaticky generovaný popis https://mapa.idsjmk.cz https://what3words.com/sady.hubka.vetvy http://www.rleonardi.com/interactive-resume/ Co je to web? World Wide Web web vs. internet https://www.internetlivestats.com/ Filip Leitner HTML, CSS 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) Filip Leitner HTML, CSS 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. Filip Leitner HTML, CSS Co je to HTML? Hypertext Markup Language Standard W3C aktuální verze HTML 5 HTML se skládá z elementů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 12 / 46 Filip Leitner HTML, CSS 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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 13 / 46 Filip Leitner HTML, CSS Anatomie HTML Filip Leitner HTML, CSS Hlavní stránka webu se zpravidla jmenuje index.html

...

ovlivňuje chování webové stránky není běžně viditelná v prohlížeči název, kódování znaků, popis,kľúčové slová, autor … Page title Filip Leitner HTML, CSS primární obsah webu texty, videa, obrázky, odkazy, … Filip Leitner HTML, CSS

I’m a heading.

Followed by a paragraph.

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! 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 Filip Leitner HTML, CSS Texty Filip Leitner HTML, CSS

I’m a second level heading

Lorem ipsum dolor sit amet.

I’m a link.

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

Filip Leitner HTML, CSS Číslované seznamy: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 21 / 46 Filip Leitner HTML, CSS

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

Tabulky Filip Leitner HTML, CSS Tabulky nejsou ve výchozím stavu stylované. Více na W3Schools

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

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 Filip Leitner HTML, CSS Obrázky Filip Leitner HTML, CSS Alternative text

Struktura obsahu Filip Leitner HTML, CSS

I’ll stand aside.

I’ll take the main part.

Semantic Elements in HTML

WWF

thematic grouping of content, typically with a heading...

A iné...

, ,

, … Filip Leitner HTML, CSS Procvičování 3 přidejte do stránky seznam

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

) Filip Leitner HTML, CSS Co je to CSS? Cascading Style Sheets Standard W3C aktuální verze CSS 3 Instrukce pro prohlížeč jak vykreslovat HTML elementy Filip Leitner HTML, CSS Struktura CSS Filip Leitner HTML, CSS Propojení HTML a CSS Filip Leitner HTML, CSS 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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 31 / 46 Filip Leitner HTML, CSS 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/FilipLeitner/361d19d4df340ecce67b759b7a46efb7 → https://gist.github.com/FilipLeitner/361d19d4df340ecce67b759b7a46efb7 Selektory CSS název elementu h1 { } p { } div { } id elementu #header { } #menu { } #footer { } třída (class) elementu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 32 / 46 Filip Leitner HTML, CSS .button { } .menu-item { } .important { } kombinace selektorů a.menu-item {} div#main .article {} a mnoho dalších (*, >, , :not(), …) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 33 / 46 Filip Leitner HTML, CSS .button:hover {} * {} div > .button {} a:not(.external) {} Atributy CSS vlastnosti písma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 34 / 46 Filip Leitner HTML, CSS 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; } barvy Filip Leitner HTML, CSS body { color: blue; background-color: #333; } .note { background-color: rgb(200,100,50); } pozice a rozměry (jednotky px, pt, em, rem, , …) #main { width: 70 %; padding: 20px; } .warning { position: absolute; top: 10px; left: 10px; } #menu { display: block; } . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 36 / 46 Filip Leitner HTML, CSS další … Filip Leitner HTML, CSS * { margin: 0; padding: 0; } .note { border: 1px solid gray; } .hide { display: none; } 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