Rubriky
HTML

Javascript – žárovka

  1. Podívejte se na vypínač žárovky zde:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_script_attribute

  1. Zkopírujte kód do Visual Studio Code
  2. Použijte jiný obrázek žárovky, např. si stáhněte tento:
Žárovka
  1. Vytvořte několik barevných variant obrázku (obrázek upravte např. v Malování)
  2. Kód vypínače upravte tak, aby žárovku přepínal do různých barev (i více jak 2)
Rubriky
HTML

HTML – jízdní řád

Podívejte se, jak fungují HTML tabulky na Khan Academy

https://cs.khanacademy.org/computing/computer-programming/html-css/html-tags-continued/pt/html-tables

Vytvořte jízdní řád v HTML. Použije Visual Studio Code. Jízdní řád by měl obsahovat tyto HTML prvky:

  • Záhlaví <title> (Jízdí řád)
  • Nadpis <h1> (o jaký jízdní řád se jedná)
  • Seznam <ul> <li> bude obsahovat kdy spoje jede, nebo nejede, nebo informace o spoji (služby v dopravě apod.)
  • Obrázek dopravního prostředu
  • Samotný jizdní řád, který obsahuje alespoň 4 zastávky a časy odjezdu
  • Nastyluje dokument, zejména tabulku, inspirace je zde:

https://www.w3schools.com/html/html_table_borders.asp

Rubriky
HTML

HTML – Piškvorky 3 – pravidla

  1. Vedle souboru index.html vytvoř pravidla.html.
  2. Přidej do pravidel základní html strukturu a nalinkuj styly (<link rel="stylesheet" href="styly.css" />), které budou společné pro úvodní i tuto stránku.
  3. Vše si průběžně kontroluj v prohlížeči.
  4. Pro ušetření práce si můžeš následující texty zkopírovat.
  • Hra piškvorky je určena pro dva hráče.
  • Hraje se na hrací ploše 10×10, tvořené poli ve tvaru čtverce.
  • Na začátku si hráči rozdělí role. Jeden bude hrát za kolečka, druhý bude hrát za křížky.
  • Losem se určí, kdo bude začínat. V naší aplikaci to vylosujeme za vás.
  • Hráči se střídají v tazích.
  • Hráč, který je na tahu, umístí jeden ze svých symbolů na prázdné pole na hrací ploše. Tj. hráč hrající za křížky umístí křížek, hráč hrající za kolečka umístí kolečko.
  • Křížky a kolečka se umisťují dovnitř políček na hrací ploše.
  • Hráč, který umístí pět svých symbolů do jedné řady, vyhrává.
  • Výherní kombinací se rozumí pět symbolů ve směru vodorovném, svislém nebo šikmém. Mezi pěti symboly tvořícími výherní kombinaci nesmí být žádné prázdné pole ani pole obsazené soupeřovým symbolem.
  • Pokud hráči zaplní celou desku, aniž by někdo umístil pět svých symbolů do jedné řady, hra končí remízou.
  • Situace po třech tazích – na tahu je hráč s kolečky
  • Situace po čtyřech tazích
  • Výherní pozice hráče s kolečky
  • V této situaci nikdo nevyhrává. Pokud je na tahu hráč s kolečky, může přidat další kolečko do šikmé řady, kde už má 4 kolečka, a vyhraje.
  • Výherní pozice hráče s křížky
  • Ještě jedna výherní pozice hráče s kolečky
Rubriky
HTML

HTML – Piškvorky 2 – formátování

  1. Nyní obsah stránky zkusíme naformátovat, vycentrovat a obarvit. V mé představě to vypadá takto:

Přidejte do sekce <head> kaskádový styl:

<style>
.obsah {
max-width: 350px;
margin: auto;
background: white;
}
</style>

Třída obsah zajistí, že obsah sekce je uprostřed, má maximální šířku a bílý podklad. Poté přidejte tag <div> hned za <body> a ukončete před </body>. Mělo by to vypadat asi takto.

<body>
    <div class="obsah">

		....existující kód....

    </div>
</body>
  1. Nyní vytvořte styl pro body a vložte do něj oblíbenou barvu pozadí pomocí: background. Pokud si nevíte rady, podívejte se zde: https://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body
  2. Naformátujte odstavec <p> pomocí stylu tak, aby:
    • text má větší velikost (font-size: large;)
    • text je zarovnán do bloku (text-align: justify;)
    • mezera kolem odstavce (padding: 10px;)

Styl s větším textem může vypadat např. takto:

p {
    text-align: justify;
}
  1. Naformátujte odkazy jako tlačítka.

Ukázka formátování odkazu:

        a:link, a:visited {
            color: white;
            padding: 20px 0px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            width: 350px;
        }

Zkuste u každé vlastnosi stylu zjistit, co dělá, případně si ji upravit podle svého vkusu.

Ukázka formátování odkazu po najetí myší:

        a:hover, a:active {
            background-color: rgb(255, 0, 0);
        }

Jednotlivým tlačítku zkuste přidat třídu (class):

<a href="pravidla.html" class="pravidla">Pravidla</a>

Pro třídu poté můžete změnit např. barvu pozadí.

        a.pravidla {
            background-color: rgb(55, 0, 255);
        }
Rubriky
HTML

HTML – Piškvorky 1 – index

  1. Otevřete Visual Studio Code
  2. Vytvořte soubor index.html
  3. Vložte základní kód HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML basics</title>
    </head>
    <body>


    </body>
</html>
  1. Upravte nadpis v <title> a stránku nazvěte Piškvorky
  2. Nyní začneme postupně přidávat prvky do úvodní stránky piškvorek. Do sekce <body> přidejte tento obrázek pomocí tagu <img>:
https://upload.wikimedia.org/wikipedia/commons/9/91/Tic-tac-toe_5.png
  1. Přidejte následující text do odstavce <p>
Piškvorky jsou velmi oblíbená společenská hra pro dva hráče. Obvykle se hraje s tužkou a čtverečkovaným papírem. Nyní můžete využít naši skvělou aplikaci, takže už nepotřebujete ani tužku a nemusíte hledat čtverečkovaný papír. Přejeme vám hodně zábavy!
  1. Vytvořte 2 tlačítka s odkazy na pravidla.html a hra.html

Ukázka odkazu:

<a href="pravidla.html">Pravidla</a>
  1. Nyní by už úvodní stránka měla fungovat, zatím tedy bez grafického formátování, měla by vypadat asi takto:
Rubriky
HTML

Hodina 7.10.2021

Tvorba první webové stránky. Odkaz do Khan Academy:
https://cs.khanacademy.org/join/H38EE3TD
Poté se přihlašte pomocí uživatelského jména a hesla.