Maturitní otázka č. 11
11. Tvorba webových stránek
1. Vznik webových stránek, jazyky a prohlížeče
Webové stránky vznikají napsáním zdrojového kódu ve značkovacích a skriptovacích jazycích. Tyto textové soubory (uložené na serveru) si uživatel přes internet stáhne do svého počítače, kde je jeho webový prohlížeč (Browser) přeloží (vyrenderuje) do vizuální podoby.
Jazyky tvořící web (tzv. Frontend trojice):
- HTML (HyperText Markup Language): Základní stavební kámen. Definuje strukturu a obsah stránky (zde je nadpis, zde je odstavec, zde obrázek).
- CSS (Cascading Style Sheets): Stará se o vizuální vzhled (barvy, písma, rozložení prvků, responzivita pro mobily).
- JavaScript (JS): Programovací jazyk, který dodává stránce interaktivitu (vyskakovací okna, animace, načítání dat bez obnovení stránky).
Webový prohlížeč: Je to klientský software určený k prohlížení WWW stránek. Přijímá HTML kód a převádí ho na grafiku. Nejznámější jsou: Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari a Opera.
2. Struktura a layout webové stránky
Moderní weby používají tzv. sémantické značky (HTML5), které nejen člení vizuální layout, ale také říkají vyhledávačům (Google) a čtečkám pro nevidomé, jaký význam daná část má. Standardní layout obsahuje:
- <header>: Hlavička stránky (obsahuje logo, název webu).
- <nav>: Hlavní navigační menu s odkazy.
- <main>: Hlavní unikátní obsah dané stránky.
- <aside>: Postranní panel (reklamy, odkazy na podobné články).
- <footer>: Patička (copyright, kontakt, obchodní podmínky).
3. Postup publikování stránek na internetu
Aby byla stránka viditelná pro kohokoliv na světě, je potřeba zajistit tři věci:
- Získat doménu: Zakoupit u registrátora unikátní webovou adresu (např. www.mojeskola.cz).
- Zajistit Webhosting: Pronajmout si prostor na neustále zapnutém serveru poskytovatele (např. Wedos, Forpsi), který bude stránky fyzicky ukládat a obsluhovat návštěvníky.
- Nahrát soubory (Deployment): Pomocí protokolu FTP (File Transfer Protocol) nebo zabezpečeného SFTP se přes program typu FileZilla přenesou HTML/CSS/JS soubory z našeho počítače na zakoupený hostingový server.
4. Délkové jednotky v HTML / CSS
Pro nastavování velikostí (např. šířka obrázku, velikost písma) používáme v CSS různé jednotky:
- Absolutní: px (pixel - nejčastější, přesný obrazový bod), cm (centimetry), pt (body - pro tisk).
- Relativní: % (procenta z rodičovského prvku), em (relativní k velikosti písma rodiče), rem (relativní k velikosti písma kořene/stránky), vw/vh (viewport width/height - procenta šířky/výšky aktuálního okna prohlížeče).
5. Praktický úkol: Jednoduchá fotogalerie
Pro vytvoření fotogalerie tří fotek s jednotným layoutem bychom použili CSS modul Flexbox nebo Grid. Ukázka HTML a CSS kódu:
<!-- HTML KÓD -->
<div class="galerie">
<div class="fotka"><img src="foto1.jpg" alt="Fotografie 1"></div>
<div class="fotka"><img src="foto2.jpg" alt="Fotografie 2"></div>
<div class="fotka"><img src="foto3.jpg" alt="Fotografie 3"></div>
</div>
/* CSS KÓD */
.galerie {
display: flex; /* Prvky se zařadí vedle sebe */
justify-content: space-around; /* Rovnoměrné mezery mezi fotkami */
padding: 20px;
background-color: #f0f0f0;
}
.fotka img {
width: 300px;
height: 200px;
object-fit: cover; /* Ořízne fotku bez deformace */
border: 5px solid white;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}