HTML, CSS Cvičení 1 Webová kartografie – úvod Podzim 2024 Filip Leitner 1 83.4% 2022, v roku 2016 to bolo len 49.4% (https://www.bankmycell.com/blog/how-many-. ph.on. es. -.ar. e-. i.n-. t.he. -w. o.rl. d.) . 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ší! Efektívny spôsob vizualizácie 2 3 4 Filip Leitner HTML, CSS Webová kartografie 3 / 46 5 Interaktivita a dostupnosť Obrázok, na ktorom je mapa Automaticky generovaný popis https://plzen.trafficmodeller.com/ https://mapa.idsjmk.cz http://www.rleonardi.com/interactive-resume/ Co je to web? World Wide Web web vs. internet https://datareportal.com/global-digital-overview https://www.internetworldstats.com/stats.htm 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 … 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 Predstavuje obsah aktuální (fifth and final) verze HTML 5 -> Living Standard HTML se skládá z elementů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 12 / 46 Filip Leitner HTML, CSS HTML elementy HTML dokument tvoříme pomocí elementů resp. tagů

I’m a paragraph.

And I have an attribute.

We can be nested.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 13 / 46 Filip Leitner HTML, CSS tagy jsou párové (html, head, p, …) a nepárové (img, meta, br, …) Anatomie HTML Filip Leitner HTML, CSS Hlavní stránka webu se zpravidla jmenuje index.html //Info pro prohlížeč
...
Obrázok, na ktorom je text, snímka obrazovky, písmo, diagram Automaticky generovaný popis 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)

HTML Lists Example

Unordered List (Bulleted List)

An unordered list is a list...p>

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

Nested Lists Example

You can also nest lists. Here’s an example of a nested list:

Ordered List (Numbered List)

An ordered list is a list ...

  1. First item
  2. Second item
  3. Third item
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é...
,