Rozdíly

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

--- duncan [2022/07/18 06:12] – vytvořeno admin
+++ duncan [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
@@ Řádek 4: / Řádek 4: @@
 ==== Kde běží javascript ====
-  * v prohlížeči ve webové stránce, resp souboru pojmenovaném s příponou ''%%.html&&'' či ''%%.htm&&''
+  * v prohlížeči ve webové stránce, resp souboru pojmenovaném s příponou ''%%.html%%'' či ''%%.htm%%''
   * v prohlížeči v nástrojích pro vývojáře
 Konzole je skvělá na rychlé pokusy, v [[krouzek:html_sablona|html souboru]] je zase kód uložený a s kontrolovatelným kontextem.
+=== Úkol ===
+  * Vytvořte si někde html soubor [[krouzek:html_sablona|obsahem ze šablony]], například pomocí Notepad++. Uložte ho se jménem končícím na ''%%.htm%%'', například ''%%pokusy.htm%%'' Pozor, operační systém vám nejspíš přípony zakrývá - pozor abyste nevytvořili soubor ''%%pokusy.htm.txt%%'' - měl by jinou ikonku a prohlížeč by ho neotevřel.
+  * Otevřete ten html soubor ve druhém okně ve webovém prohlížeči.
+  * Napište něco do toho souboru mezi ''%%<body>%%'' a ''%%</body>%%'' v editoru a uložte
+  * V prohlížeči dejte refresh - obnovte stránku (klávesa f5, ikonka ↻)
+  * Měli byste vidět svůj napsaný text v prohlížeči.
+==== HTML, CSS, Javascript ====
+Jedná se o tři různé technologie:
+  * HTML tvoří strukturu a významový strom zobrazené stránky
+  * CSS určuje vzhled (design) zobrazené stránky
+  * Javascript umožňuje stránku dynamicky měnit, podle vstupu uživatele nebo třeba výsledku komunikace se serverem
+Naštěstí je syntaxe těchto technologií na první pohled odlišná.
+=== HTML ===
+<code html>
+ <div class="informace">
+  <p>
+   Tohle je <a href="http://example.org">příklad</a> (výsek) <strong>html</strong> kódu, který najdete uvnitř těla stránky.
+  </p>
+ </div>
+</code>
+=== CSS ===
+<code css>
+  body {
+   color: white;
+   background-color: black;
+  }
+ .informace {
+   color: yellow;
+  }
+</code>
+=== Javascript ===
+<code javascript>
+ document.body.style.backgroundColor = 'green'
+ const promenna = 5
+ if (promenna < 10) {
+  console.log('Pekne')
+ }
+</code>