Stránka o stránce
Menu
Zde je popsána technologie použitá na tomto webu a metody, jak byl tento web vytvořen. Tento web byl vytvořen v roce 2023 jazykem HTML5 a používá CSS styly. Přestože tento web má ve skutečnosti speciální soubor se styly, CSS kód je zde pro zjednodušení zapsán inline módem (uvnitř HTML tagů) a bez použití classes.
Layout stránky
Stránky jsou koncipovány jako plně responzivní a jsou určené ke zobrazení na všech typech zařízení. Pro správnou kompatibilitu prohlížečů s nejnovějším HTML5
jsem definoval doctype:
<!DOCTYPE html>
Aby byla stránka responzivní a zbytečně se nezobrazovala scrollovací lišta např. na mobilech, nastavil jsem v meta tagu v hlavičce stránky škálování jsem nastavil na 1.0:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pro vytvoření rozvržení stránky jsem napřed nastavil margin i padding tagu body na žádný (není potřeba), je zde vidět i použitá barva pozadí a fonty:
<body style="margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif; background-color: #eaf2f4">
Aby stránka na velkých monitorech (stolních PC) nebyla zbytečně široká, celý obsah tagu body je obalen divem (kontejnerem).
Tento kontejner pak má nastavený CSS styl max-width, který zajišťuje, že se na obrazovkách širších než 960px stránka nebude roztahovat po celé šířce, ale pouze
do přijatelného rozměru. Dále je nastaven margin a padding 40 px, který zajistí vizuálně příjemné odsazení od kraje kontejneru v případě, že má kontejner (obsah stránky) jiné pozadí,
než tag body.
</body>
<body style=". . .">
<div class="container" style="max-width: 960px; margin: 0 auto; padding: 40px">
. . .
</div>
</body>
Prvky stránky
Pro nadpisy i text jsem použil šedé písmo (ne úplně černé) a moderně vypadající bezpatkové písmo. Při odlaďování jsem zjistil, že nejvýhodnější je velikost písma určovat v pixelech.
Pro odsazení nadpisu od vrchního okraje okna jsem použil padding. Ukázka formátování h1 (celkem mají tyto stránky 3 úrovně nadpisů):
<h1 style="text-align: center; font-size: 36px; color: #333333; margin: 0; padding: 20px 0">Nadpis</h1>
Úvodní bublina s popiskem stránky - blogu je vytvořena pomocí divu. Nadpis i odstavec lze pak stylovat pomocí inline zápisu nebo použití tříd.
<div style="background-color: #b3d7ff; border-radius: 10px; padding: 20px; margin-bottom: 20px">
Obrázky se mi osvědčilo nastavit na max-width: 50%, díky použití max-width místo width je maximální šířka obrázku 50% šířky kontejneru, na menších zařízeních se tak zmenšuje a
nedochází k přetékání.
<h2>Vítejte na našem webu o leteckých společnostech!</h2>
<p>Úvodní odstavec.</p>
</div>
<img src="" style="max-width: 50%; height: auto">
Tabulka: je stylována tak, aby působila graficky příjemně a také byla dobře použitelná na mobilních zařízeních. Při používání na mobilech se pod tabulkou díky overflow-x: auto zobrazí
scrollovací lišta. Je uveden klasický CSS zápis.
table {
width: 100%;
border-collapse: collapse;
border-radius: 10px;
background-color: #eaf2f4;
}
table th, table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #b3d7ff;
}
table th {
background-color: #b3d7ff;
color: #333;
}
Celá tabulka pak má následující strukturu: (th - nadpisek v prvním řádku, td - buňka v ostatních řádcích)
<table>
<thead>
<tr><th>Nadpisek 1</th><th>Nadpisek 2</th></tr>
</thead>
<tbody>
<tr><td>Buňka 1</td><td>Buňka 2</td></tr>
</tbody>
</table>
Menu pomocí nečíslovaného seznamu
Při tvorbě menu jsem použil jednoduchý, ale funkční mechanismus nečíslovaného seznamu ul. Položky li mají nastaven display: inline, aby byly vedle sebe a dostatečný margin-right, aby
mezi nimi byly mezery. Pokud chceme položky pod sebou, použijeme display: block nebo display nenastavíme. U seznamu ul je nastaven list-style-type na none, aby nedocházelo k číslování, nebo
odrážkování. Výhodou tohoto seznamu je, že se dá snadno doplňovat o další prvky a není zde problém se zalamováním na menších obrazovkách.
<ul style="list-style-type: none; padding: 0; margin: 0">
<li style="display: inline; margin-right: 10px">Položka 1</li>
<li style="display: inline; margin-right: 10px">Položka 2</li>
</ul>
@media, přizpůsobení mobilním zařízením
Pomocí speciální funkce v CSS @media je možné nastavit speciální styly, které se použijí pouze za určité podmínky, např. pokud je obrazovka malá jako u mobilních zařízení. Tento zápis
už je praktické psát pouze do samostatného style tagu nebo CSS souboru. Do této funkce se pak vloží všechna nastavení, která se za dané podmínky mají použít, já použil mírné zmenšení všech
velikostí písma, max-width obrázku nastavil na 100% (na telefonu tedy využijí celou šířku) a položky li v menu nastavil na display: block a margin-top: 5px, aby byly přehledně pod sebou.
@media (max-width: 600px) {
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
img {
max-width: 100%;
}
li {
display: block;
margin-top: 5px;
}
}