Cvičná webová stránka

Tady je rozepsané řešení vzorového zadání souborky na téma Web.

Během celé práce se soustřeďte: pište na místo, kam chcete psát, nemačkejte omylem jiné klávesy (např. vedle Enteru), mějte přehled, co zrovna děláte a proč. Kdyby vám během souborky došla síla a nemohli jste se už soustředit, je lepší si na chvíli odpočinout a třeba si uvařit čaj, než budete pokračovat.

Stáhnu si šablonu (pravý klik → uložit odkaz jako...) a otevřu ji v editoru.
- Můžete si nainstalovat např. VS Code,
- jestli nechcete nebo nemůžete nic instalovat, můžete používat VS Code na webu,
- existuje spousta jiných editorů, které tuhle práci skvěle zvládnou.
V šabloně najdu dva řádky <style> ... </style>. Napíšu mezi ně styl, který celé stránce nastaví:
- tmavě modré pozadí,
- bledě žluté písmo,
- bezpatkové písmo.
```
<style>
body {
    background-color: darkblue;
    color: lightyellow;
    font-family: sans-serif;
}
</style>
```

Mám text rozdělit do dvou bloků a nastavit jim šířku. Nejdřív potřebuju upravit HTML kód stránky a kolem textu vyrobit dvě značky <div>:

<div>
Dílnu kráčejících robotů v NTK navštíví dvě skupiny kvarty A (26.2. a 5.3.).
Dílna je zaměřena na studenty středních škol a jejím cílem je seznámit účastníky se základy užití matematických principů a trigonometrie ve vztahu k robotice.
</div>
<div>
Studenti se pod vedením odborného lektora pokusili úspěšně naprogramovat a rozchodit svého šestinohého robota.
Pro velký úspěch půjde do NTK i druhá kvarta.
</div>

Oběma blokům textu teď můžu společně nastavit styl, aby měly šířku třeba 400 pixelů a aby se nechaly umístit vedle sebe na jeden řádek. To připíšu hnedka pod styl, který jsem napsal v předchozím kroku.
```
<style>
body {
    background-color: darkblue;
    color: lightyellow;
    font-family: sans-serif;
}

div {
    display: inline-block;
    width: 400px;
}
</style>
```
Teď potřebuju vyřešit nadpis. Nejdřív zařídím, aby byl ve dvou řádcích:
```
<h1>NTK</h1>
<h1>kráčející roboti s kvartou</h1>
```
Zarovnat ho na střed, to je jednoduché: h1 { text-align: center; }. Zadání ale chce, aby byl na středu mezi těmi oběma bloky textu. Nastavím nadpisu proto šířku takovou, jako mají oba texty v součtu, a on se pak zarovná správně.
```
h1 {
    text-align: center;
    width: 800px;
}
```
Přidám obrázek. Nejdřív si zkopíruju odkaz na obrázek ze zadání (pravý klik → kopírovat adresu odkazu), abych ji pak mohl vložit do atributu src. Obrázek pak napíšu na začátek druhého bloku textu:
```
<div>
<img src="https://sexta.dominec.eu/souborka-2024/robot.jpg">
Studenti se pod vedením odborného lektora pokusili úspěšně naprogramovat a rozchodit svého šestinohého robota.
Pro velký úspěch půjde do NTK i druhá kvarta.
</div>
```
Dávám pozor na to, že obrázek je opravdu odkázaný z webu předmětu. Poznám to tak, že adresa začíná https://sexta.dominec.eu.
Obrázku musím ještě nastavit šířku 300 pixelů. Přidám tedy další styl:
```
img {
    width: 300px;
}
```
Udělám svislou čáru na levé straně obou bloků textu, takže bude i mezi nimi. Bude tím pádem i vlevo od levého bloku, ale k tomu se zadáni nijak nevyjadřuje. Potřebuju přidat pravidlo border-left: 1px solid white; a dávám přitom pozor, že rámečku nestačí nastavit šířku a barvu, ale musí tam být i to solid pro nepřerušovanou čáru, a musí to být ve správném pořadí.
```
div {
    display: inline-block;
    width: 400px;
    border-left: 1px solid white;
}
```

Je víc možných řešení a víc postupů, jak se k nim dobrat. Kód celé stránky může vypadat například takhle:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Roboti</title>
    <style>
        body {
            background-color: darkblue;
            color: lightyellow;
            font-family: sans-serif;
        }

        div {
            display: inline-block;
            width: 400px;
        }

        h1 {
            text-align: center;
            width: 800px;
        }

        img {
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>NTK</h1>
    <h1>kráčející roboti s kvartou</h1>
    <div>
        Dílnu kráčejících robotů v NTK navštíví dvě skupiny kvarty A (26.2. a 5.3.).
        Dílna je zaměřena na studenty středních škol a jejím cílem je seznámit účastníky se základy užití matematických principů a trigonometrie ve vztahu k robotice.
    </div>
    <div>
        <img src="https://sexta.dominec.eu/souborka-2024/robot.jpg">
        Studenti se pod vedením odborného lektora pokusili úspěšně naprogramovat a rozchodit svého šestinohého robota.
        Pro velký úspěch půjde do NTK i druhá kvarta.
    </div>
</body>
</html>