> Vygeneruj lekci věnující se HTML sémantice. Popiš základní vlastnosti, strukturu a atributy nadpisů, odstavců, seznamů, obrázků, tabulek. ===== Co říká ChatGPT ===== (upraveno, rozšířeno) ==== Co je HTML Sémantika? ==== HTML sémantika je způsob, jakým v HTML označujeme různé části našeho dokumentu tak, aby bylo jasné, co daný obsah znamená. Správné používání sémantických značek má několik výhod: - **Lepší dostupnost**: Pomáhá lidem s handicapem nebo asistenčním technologiím, aby lépe chápali obsah. - **Lepší SEO**: Vyhledávače mohou snáze interpretovat strukturu a význam obsahu. - **Lepší čitelnost kódu**: Kód bude pro lidi snáze čitelný a udržovatelný. ==== Základní Sémantické Značky ==== (Všechny patří do těla stránky = mezi tagy ''%%%%'' a ''%%%%'' === Nadpisy === Nadpisy (header) slouží k definování nadpisů a titulků stránky. HTML nabízí značky ''%%

%%'', ''%%

%%'', a ''%%

%%''. Jsou párové - ke každému otevíracímu tagu patří i zavírací s lomítkem. `Největší nadpis Podnadpis` === Odstavce === Odstavce se definují pomocí značky ''%%
%%''. Používáme je k formátování textu a oddělení různých bloků textu. Jsou párové.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Maecenas libero. Nullam rhoncus aliquam metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur bibendum justo non orci. Vestibulum fermentum tortor id mi. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Takovémuhle výplňkovému (dummy) textu se říká [[https://www.lipsum.com/|Lorem Ipsum a lze jej snadno vygenerovat na stránce lipsum.com]]. ==== Seznamy === Seznamy mohou být buď nečíslované (označené bullety) nebo číslované. Pro nečíslované seznamy použijeme `
` (unordered list), pro číslované seznamy `
` (ordered list). Každá položka seznamu se definuje značkou ''%%
%%'' (list item). === Nečíslovaný seznam === `První položka Druhá položka` === Číslovaný seznam === `První položka Druhá položka` === Obrázky === Obrázky se vkládají pomocí značky ''%%%%''. Důležité je nastavit atributy ''%%src%%'' (URL obrázku) a ''%%alt%%'' (alternativní text pro obrázek, pro přístupnost). == Co je URL? == * Podobné "cestě k souboru" (file path) v počítači * Absolutní s uvedením serveru - začíná specifikací protokolu, například ''%%http://%%'' - následuje doménové jméno ''%%adasek.cz%%'' označující server kde se daný zdroj (resource) nachází - cesta v rámci serveru ''%%/js/doku.php%%'' - a případně parametry ''%%?id=krouzek:html&do=edit%%'' - za otazníkem, oddělené ampersanty, vždy dvojice klíč=hodnota * Absolutní na daném serveru * začíná znakem ''%%/%%'' * Kontext: URL na které se nacházíme - předpokládá se stejný server * Například URL: ''%%/linux/%%'' v kontextu stránky na adasek.cz vás vezme na adasek.cz/linux/ * Relativní * Kontext: URL na které se nacházíme - předpokládá se stejný server a stejný začátek cesty v rámci serveru * Například URL: ''%%obrazek.jpg%%'' na stránce ''%%https://adasek.cz/js/doku.php?id=krouzek:html%%'' vás vezme na ''%%https://adasek.cz/js/obrazek.jpg%%'' * Lze použít i při zobrazení html stránky bez serveru (protokolem ''%%file://%%'') - bere soubor ve stejném adresáři * Specialita: ''%%..%%'' vás vezme o adresář výš, například ''%%https://adasek.cz/a/b/c/d/../../x%%'' se normalizuje na ''%%https://adasek.cz/a/b/x%%'' === Tabulky === Tabulky jsou strukturovaným způsobem zobrazení dat. Používáme značku ''%%%%'' pro vytvoření tabulky. Tabulka obsahuje řádky (''%%%%'') a buňky (''%%
%%'' pro běžné buňky nebo ''%% %%'' pro hlavičky tabulky). `Jméno Věk Jan 25` === Závěr === HTML sémantika hraje klíčovou roli ve vytváření kvalitního a správně strukturovaného webu. Správné používání sémantických značek umožňuje lepší dostupnost, čitelnost a SEO vašich stránek. Je důležité seznámit se s těmito základními značkami a používat je v souladu s významem, který mají.