Vytvořte interaktivní prezentaci, kam byste chtěli jet, nebo kam pojedete na dovolenou.
Pracovat můžete buď v Constructu, nebo v HTML. Můžte použít mapu, globus, fotky místa apod.
Příklady pro inspiraci:
Vytvořte HTML stránku s vánočním stromečkem s pomocí následujícího kódu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vánoční stromeček</title>
<style>
.kontejner {
position: relative;
}
img {
position: absolute;
width: 400px;
}
button {
position: absolute;
border-radius: 50%;
width: 40px;
height: 40px;
border: 0;
}
#koulicka1 {
background-color: blue;
top: 30px;
left: 150px;
}
</style>
</head>
<body>
<h1>Stromeček</h1>
<div class="kontejner">
<img src="strom.jpg" alt="Stromeček">
<button id="koulicka1" class="koulicka"></button>
</div>
</body>
</html>Použít můžete tento stromeček, nebo si nakreslete svůj dle libosti.
https://krouzek.epavel.eu/wp-content/uploads/2021/12/strom.jpg
Umístěne na stromek více barevných kouliček a nezapomeňte změnit id:
<button id="koulicka2" class="koulicka"></button>Každá koulička by měla mít odpovídající styl svázaný pomocí jedinečného id:
#koulicka2 {
top: 200px;
left: 200px;
background-color: sandybrown;
}Poté vytvořte další tlačítka na zhasnutí a rozsvícení stromečku. Zhasnutí budeme provádět pomocí stylu visibility:
https://www.w3schools.com/cssref/pr_class_visibility.asp
Tlačítko na zhasnutí:
<button id="off" onclick="zhasni()">Zhasni</button>Nezapomeňte tlačítku vytvořit styl s vhodnou pozicí (třeba pod stromečkem).
Vložte také tlačítko na Rozvícení.
Javascriptový kód s funkcemi na zhasnutí a rozsvícení:
<script>
function zhasni() {
var koulicky = document.getElementsByClassName("koulicka");
for (var i = 0; i < koulicky.length; i++) {
koulicky[i].style.visibility = "hidden";
}
}
function rozsvit() {
var koulicky = document.getElementsByClassName("koulicka");
for (var i = 0; i < koulicky.length; i++) {
koulicky[i].style.visibility = "visible";
}
}
</script>Zkuste místo dvou funkcí: zhasni(), rozsvit() napsat jen jednu s parametrem: zmenViditelnost(parametr)
Jako bonus si můžete ke stromečku přidat sněžení:
<script src="https://piskvorky.epavel.eu/script/snow.js"></script>https://www.w3schools.com/html/tryit.asp?filename=tryhtml_script_attribute
Podívejte se, jak fungují HTML tabulky na Khan Academy
Vytvořte jízdní řád v HTML. Použije Visual Studio Code. Jízdní řád by měl obsahovat tyto HTML prvky:
index.html vytvoř pravidla.html.<link rel="stylesheet" href="styly.css" />), které budou společné pro úvodní i tuto stránku.
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>
Styl s větším textem může vypadat např. takto:
p {
text-align: justify;
}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);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML basics</title>
</head>
<body>
</body>
</html>
https://upload.wikimedia.org/wikipedia/commons/9/91/Tic-tac-toe_5.png
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!
Ukázka odkazu:
<a href="pravidla.html">Pravidla</a>
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.