Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- krouzek:html [2023/10/17 20:44] – admin
+++ krouzek:html [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
@@ Řádek 1: / Řádek 1: @@
 > 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 ====
-===== 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:
@@ Řádek 15: / Řádek 12: @@
 ==== Základní Sémantické Značky ====
+(Všechny patří do těla stránky = mezi tagy ''%%<body>%%'' a ''%%</body>%%''
 === Nadpisy ===
-Nadpisy (header) slouží k definování nadpisů a titulků stránky. HTML nabízí značky ''%%<h1>%%'', ''%%<h2>%%'', ''%%<h3>%%'', ''%%<h4>%%'', ''%%<h5>%%'', a ''%%<h6>%%''.
+Nadpisy (header) slouží k definování nadpisů a titulků stránky. HTML nabízí značky ''%%<h1>%%'', ''%%<h2>%%'', ''%%<h3>%%'', ''%%<h4>%%'', ''%%<h5>%%'', a ''%%<h6>%%''. Jsou párové - ke každému otevíracímu tagu patří i zavírací s lomítkem.
+<code html>
+<h1>Největší nadpis</h1>
+<h2>Podnadpis</h2>
+</code>
 === Odstavce ===
-Odstavce se definují pomocí značky ''%%<p>%%''. Používáme je k formátování textu a oddělení různých bloků textu.
+Odstavce se definují pomocí značky ''%%<p>%%''. Používáme je k formátování textu a oddělení různých bloků textu. Jsou párové.
+<code html>
+<p>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?</p>
+</code>
+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 ===
@@ Řádek 46: / Řádek 53: @@
 </code>
-====== Obrázky ======
+=== Obrázky ===
-Obrázky se vkládají pomocí značky ''%%<img>%%''. Důležité je nastavit atributy ''%%src%%'' (URL obrázku) a ''%%alt%%'' (alternativní text pro obrázek, pro dostupnost).
+Obrázky se vkládají pomocí značky ''%%<img>%%''. Důležité je nastavit atributy ''%%src%%'' (URL obrázku) a ''%%alt%%'' (alternativní text pro obrázek, pro přístupnost).
 <code html>
@@ Řádek 54: / Řádek 61: @@
 </code>
+== 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 ===