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.

Rubriky
Scratch

Scratch – konfigurátor těla

Nahraj do Scratche různé hlavy a různá těla a po kliku na ně je postupně nech měnit. Vzniknou tak srandovní kombinace k sobě nepatřících hlav a těl.

Jako první krok přidej postavu a do ní nahraj jednotlivé hlavy. Hlavy jsem připravil ke stažení zde:

Po stažení soubor rozbal (klikni na něj a dej Extrahovat vše…)

První hlavu nahraj jako postavu, další nahrávej jako kostýmy. Měla by tak vzniknout jedna postava s vícero kostýmy. Další kostým nahraješ tak, že klikneš vlevo dole na „Nahrát kostým“.

Stejně tak je třeba postupovat s těly.

Pro tělo i hlavu přidej scénář – aby se po kliku změnil kostým.

Rubriky
Scratch

Scratch – barevné jméno

Přihlas se do Scratche: scratch.mit.edu

  • Vytvoř nápis svého jména z písmenek
  • Po kliknutí na jednotlivá písmenka změň jejich barvu.
  • Každé písmenko mění barvu zvlášť.
Rubriky
Scratch

Scratch – chodící a kdákající slepice

Prostředí: Scratch

  • Vytvoř 2 nové postavy slepic.
  • Poté jednu otoč.
    • Otočit se dá v kostýmech, musí se otočit pro všechny kostýmy
  • Slepice otočená doleva musí zmizet při stisku klávesy vpravo, slepice otočená doprava naopak.
  • Po stisku mezerníku slepice zakdáká. Po stisku šipky nahoru zobrazí bublinu „Kokodák“

Rubriky
Scratch

Scratch – oči

Popis

Vytvoř ve Scratchi oči, které mrkají a otáčejí se podle stisknutých šipek.

Základní nastavení

Přihlaš se do Scratche vytvoř nový projekt.

Nahraj do něj novou postavu. Oči jsem připravil, stáhneš si je zde:

Vybarvi oko tak, aby barva odpovídala tvojí barvě očí.

Nezapomeň vybarvit všechny Kostýmy.

Zkopíruj jeden kostým a posuň oko doleva.

Nazvi nový kostým „okovlevo“

Ve scénáři postavy (oka) vytvoř událost na stisknutí klávesy šipka vpravo. Po jejím stisku nastav kostým na „okovpravu“.