Webová stránka je dokument napsaný pomocí kódovacího jazyka HTML, který má přiřazenou URL adresu a je dohledatelný v internetu prostřednictvím hyperlinků.
Webovou stránku definuje přítomnost hyperlinků. Jejich pomocí je možné stránku propojit s jinými zdroji sítě internet. Příkladem je třeba textový odkaz na stránky střední školy MICHAEL nebo odkaz dostupný pomocí zde umístěného obrázku
Hypertext Markup Language je způsob zápisu webové stránky, vycházející ze standardu XML (Extendable Markup Language), který zajišťuje její správné zobrazení ve webovém prohlížeči.
Kód HTML tvoříme v textovém editoru, který umožňuje uložení soubour s příponou .html. Nejzákladnějším programem, který nám toto umožňuje je Poznámkový blok (Notepad), který je součástí OS Windows nebo program TexEdit, který je součástí Mac OS. Pokročilejší uživatelé však většinou sáhnou po některém z programů, které obsahují řadu prvků usnadňujících práci jako jsou: Visual Studio Code, Notepad++, Sublime Text, Atom a další.
Stavebním prvkem kódu HTML je značka (angl. "tag"). Existuje mnoho typů značek, které se používají pro definování různých typů obsahu. Obsah většiny značek zobrazí prohlížeč totožným způsobem, přesto je však vhodné je rozlišovat při psaní kódu, jelikož tak přispíváme k přehlednosti vytvořeného dokumentu a usnadňujeme práci vyhledávačům.
Značky HTML zapisujeme ve špičatých závorkách < >. Většina značek je párových, tzn. počáteční značka vymezuje začátek definovaného obsahu a koncová značka, kterou zapisujeme </ >, značí místo, kde definovaný obsah končí. Nepárové značky, např. značka <br> pro zalomení řádku se používají samostatně. K orientaci v množství značek pomáhají tvůrcům webů různé katalogy dostupných HTML značek, které popisují jejich podobu i funci. Nejznámějším z těchto zdrojů je stránka w3schools.com.
Pokud potřebujeme vložit do obsahu znak <, který prohlížeč interpretuje jako značku HTML, musíme ho nahradit tzv. "entitou", kterou zapisujeme pomocí názvu "<" nebo číselného kódu "<". Podobným způsobem můžeme zapsat obrovské množství zvlášních znaků, jejichž úplný katalog je k dispozici zde.
HTML zná cca 140 značek z nichž pro základní práci potřebujeme cca 30. Nejběžnější značkou je "obecný oddíl <div>, který používáme k vymezení části prostoru určené pro text nebo grafický prvek. Od zavedení standardu HTML5 v roce 2016 je výhodné používat tzv. "sémantické" značky, které poskytují prohlížeči informaci o definovaném obsahu, a částečně nahrazují značku <div>.
Takto vypadá příklad zápisu HTML:
<main>
<section>
<article>
<div class="text_div_1">
<p>nějaký text</p>
</div>
<div class="separator_div"></div>
</article>
</section>
</main>
Jak je vidět, jednotlivé páry značek jsou vnořeny do jiných značek a vytvářejí tak patrnou hierarchickou strukturu. Řádkování a odsazování jednotlivých úrovní vnoření pomocí klávesy je konvenční a slouží zlepšení přehlednosti zápisu, na fungování kódu však nemá vliv.
HTML postrádá designové nástroje, má však velmi slušný výběr značek sloužících k formátování textu.
Když potřebujeme začít nový řádek použijeme značku <br>
Tato značka zobrazí text na novém řádku bez ohledu na to, jak je zapsán ve zdrojovém souboru. Značka pro mezeru sice neexistuje, přesto však můžeme volné místo na řádku vložit pomoci tzv. entity nerozdělitélná mezera, kterou zapíšeme . Podobně můžeme zapsat dvě mezery " " pomocí   a čtyři mezery " " pomocí  .
Velikost textu zpravidla měníme volbou vhodné značky pro nadpis <h1> až <h6>, které však umístí definovaný text na nový řádek. V odstavci textu proto zdůrazňujeme pomocí značky <strong> tučným písmem, pomocí značky <em> kurzívou, značka <mark> text zvýrazní nebo vymezíme část textu značkami <span> a vzhled definujeme pomocí CSS. Existuje sice také starší značka <big>, které písmo zvětší, ale je považována za zastaralou, a neměla by se používat, jelikož její zobrazení v některých prohlížečích není podporováno. Stále platná je naopak značka <small> která písmo zmenší. Někdy potřebujeme napsat text s horním nebo dolním indexem což nám umožní značky <sup> respektive <sub>. Pokud je třeba upozornit na zmatečný odstraněný text, nebo text vložený také existují značky k tomu určené.
Někdy je užitečné vložit do zdrojového souboru informaci, která není součástí kódu ani obsahu určeného k zobrazení. Proto máme možnost vložit "komentář", kterým můžeme shrnout část obsahu, vložit poznámku pro vývojáře, nebo část napsaného kódu přechodně "vypnout".
Poznámku v HTML kódu zapisujeme takto:
<!--text poznámky-->
Atributy značku blíže určují, vymezují její funkci ve struktuře dokumentu a mohou definovat vzhled obsahu. Atributy se zapisují uvnitř počáteční značky ve formátu:
název atributu="hodnota atributu"
Značka muže obsahovat libovolný počet atributů a atributy mohou mít libovolný počet hodnot. Atributy, které mohou blíže určovat kteroukoli značku nazýváme globální, ostatní atributy fungují jen z konkrétně určenými značkami.
Příkladem zápisu atributu obecného oddílu je:
<div class="frame1" style="background-color:pink; width:100%; height:3rem;"></div>
Jak je vidět, značka <div> má dva atributy a její atribut style má tři různé hodnoty, které jsou v tomto případě totožné s deklaracemi kódu CSS o němž bude řeč dále.
| Několik běžných atributů a jejich využití: | |||||
|---|---|---|---|---|---|
| id | class | style | href | src | alt |
| unikátní prvek | opakující se prvek | vzhled prvku | hypertextový odkaz | odkaz na média | popis prvku |
| globální | globální | globální | značky: <a><area><base><link> | značky: <audio><embed><iframe><img><input><script><source><track><video> | značky: <img><input><area> |
Každý prvek HTML má určité výchozí robrazení, které lze téměř libovolně měnit s pomocí atributu style.
Většina značek zobrazuje obsah základním písmem a vizuálně se neliší, existuje však několik značek, které mají velmi specifický způsob zobrazení obsahu. Příkladem velmi specifického výchozího zobrazení je . Jedná se však spíše o výjimku.
Pomocí HTML můžeme vkládat do dokumentu obrázky. Používáme k tomu nepárovou značku <img> jejíž atribut src obsahuje označení cesty k obrázku. Ten se může nacházet na našem počítači, zpravidla ve stejném adresáři jako dokument HTML nebo kdekoli na webu. V tom případě je cestou URL adresa obrázku.
Obrázek obvykle vkládáme jako samostatný prvek na novém řádku mezi značky <figure> a </figure>, ale lze jej vložit přímo do odstavce textu, mezi značky <p> a </p>.
Obrázek se zobrazí na řádku textu 
přesně na místě, na kterém byl vložen
Kromě bitmapových obrázků ve formátech jako jsou například JPG, PNG, GIF nám HMTL umožňuje vložit obrázky vektorové ve formátu SVG. Takový obrázek má podobu HTML kódu vymezeného značkami <svg>, který popisuje jeho vzhled matematicky. SVG obrázek umožňuje změnu velikosti bez ztráty kvality a je snadné ho upravit pomocí stylopisu.
Základní kód HTML je na grafické prvky velmi skoupý. Kromě už uvedených možností formátování textu, tabulek a seznamů máme k dispozici vodorovnou oddělovací čáru, kterou vložíme pomocí značky <hr />. Zde je použita jako podtržení na uplném konci dokumentu uvnitř značky <footer>. K obohacení stránky o grafické prvky potřebujeme použít kaskádové styly neboli CSS.
Cascading Style Sheet (CSS), neboli stylopis umožňuje definovat podobu a rozmístění jednotlivých prvků webové stránky. Jedná se o kódovací jazyk určený pro popis způsobu zobrazení prvků stránek vytvořených v jazyce HTML.
Význam CSS jasně ukáže porovnání podoby čistého HTML dokumentu a dokumentu upraveného pomocí stylopisu. Mezi oběma verzemi lze přepínat pomocí tlačítka:
Stylopis může být k dokumentu HTML připojen třema způsoby:
Abychom mohli definovat vzhled prvku HTML musíme jej identifikovat. K tomu slouží v sturktuře CSS "selektor", který okazuje na určitý prvek HMTL dokumentu. Selektorem může být název značky např. "h1", "span" nebo atributy "class" a "id" učitých značek. Poté, co určímě jaký prvek chceme definovat, můžeme upravit jeho vzhled pomocí deklarací, které zapisujeme ve formátu vlastnost:hodnota (property:value). Deklarace popisují jednotlivé kategorie vzhledu jako jsou například: šířka, výška, barva pozadí, barva písma, velikost písma, okraje, rámeček, zarovnání atd. Více deklarací CSS je třeba oddělit středníkem.
Příkladem zápisu CSS je:
h2 {color:pink; font-size:2rem;}
Abychom docílili lepší čitelnosti zápisu CSS, píšeme selektory i jednotlivé deklarace na samostatné řádky a odsazujeme pomoci klávesy Tab takto:
div {
position: relative;
width: 80%;
background-color: #34495e;
border: 1px solid pink;
}
Pomocí stylopisu můžeme upravit barvu textu nebo pozadí zvoleného prvku. Používáme k tomu deklarace color respektive background-color. Za vlastností deklarace vždy následuje dvojtečka a následně hodnota deklarace.
Barvy můžeme v CSS popsat čtyřmi různými způsoby:
Historii vývoje CSS a designových trendů velmi dobře vykresluje článek Petera Janga
JavaScript je nejrozšířenějším programovacím jazykem na světě a je určený pro použití na webu. JavaScript umožňuje vytvářet dynamické prostředí webové stránky, získávat i odesílat data na vzdálený server.
Kód JavaScriptu zpravidla vkládáme do dokumentu HTML na samotný konec mezi značky <script> nebo jej vytvoříme v samostatném dokumentu, který připojíme pomocí atributu src v hlavě HTML kódu.
Struktura JavaScriptu je poněkud složitější než obou předchozích značkovacích jazyků a vypadá například takto:
document.getElementById("js").innerHTML = "Text vložený pomocí JavaScriptu";
Tento kód nahradí původní text prvku defonovaného atributem id="js" náhradním textem, uvedeným v kódu JavaScriptu a nastaví jeho barvu:
Původní text
To se může jevit jako velmi málo, avšak pomocí Javascriptu můžeme například vrátít původní obsah i barvu po stiskutí tlačítka:
V následujícím příkladu použije JavaScript číselnou hodnotu, kterou uživatel napíše do textového pole, příčte 6, výsledek vydělí 2 a odpovídajícím způsobem upraví šířku lišty. Pokud výsledná hodnota přesáhne 40, změní se navíc barva lišty. Celá operace se spustí po stisknutí klávesy Enter.
Kód JavaScriptu pro tuto funkci může vypadat takto:
function barGrow() {
var firstNumber = document.getElementById("jsNumber").value;
var growNumber = (Number(firstNumber) + 6) / 2;
document.getElementById("jsBar").innerHTML = growNumber;
document.getElementById("jsBar").style.width = growNumber + 'rem';
if (growNumber > 40) {
document.getElementById("jsBar").style.backgroundColor = "var(--pink)";
}
else {
document.getElementById("jsBar").style.backgroundColor = "var(--accent-blue)";
}
}
Jak je vidět, Javascript umožňuje provádět různé výpočty, dosazovat a upravovat textové i číselné proměnné, vytvářet nejrůznější podmínky a cykly. Jedná se tak o plnohodnotný programovací jazyk, pomocí kterého je vytvořena podstatná část běžně využívaných mobilních aplikací a doplňků prohlížečů.
Na této stránce byly pomocí JavaScriptu nastaveny funkce tlačítek, která se nacházejí v článku "Kde si zařídit hosting a doménu", tlačítka "přepni styl" v sekci CSS a tlačítka "nahoru" v zápatí dokumentu.