HTML (HyperText Markup Language) je základní jazyk pro tvorbu webových stránek. Je to jazyk značkovací, což znamená, že se používá k označování a formátování obsahu na webových stránkách, jako jsou texty, obrázky a videa. HTML se skládá z kódu, který se píše do textového souboru a který je interpretován webovým prohlížečem, jako je například Google Chrome nebo Mozilla Firefox, když se na stránku navštívíte.
HTML má řadu značek, které se používají k označování různých částí obsahu. Například značka <h1> se používá k označení nadpisu a značka <p> se používá k označení odstavce textu. Tyto značky jsou obaleny do hranatých závorek a často obsahují další informace, jako jsou atributy nebo CSS styly.
HTML je důležitým nástrojem pro tvorbu webových stránek a je používán společně s jinými technologiemi, jako je například CSS (Cascading Style Sheets) pro formátování obsahu a JavaScript pro vytváření interaktivity a funkcí na stránkách.
Zde je ukázkový kód pro vytvoření základní HTML stránky v češtině:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>Moje webová stránka</title>
</head>
<body>
<h1>Vítejte na mé webové stránce!</h1>
<p>Toto je ukázkový text na stránce.</p>
</body>
</html>
V tomto kódu je použita základní struktura HTML stránky, která zahrnuje deklaraci typu dokumentu (<!DOCTYPE html>), kořenový element (<html>) s atributem lang pro specifikaci jazyka stránky, záhlaví stránky (<head>) a tělo stránky (<body>).
V záhlaví stránky je použit element <meta> pro specifikaci kódování znaků a element <title> pro zobrazení názvu stránky v záhlaví webového prohlížeče.
V těle stránky jsou použity elementy <h1> a <p> pro nadpis a odstavec textu, který se zobrazí na stránce.
HTML kód může být dále rozšířen o další značky a atributy pro vytváření složitějších webových stránek.
Samotné značky v HTML slouží k definici obsahu na webové stránce. Každá značka má svůj název a může mít atributy, které mohou být použity k přidání dalších informací k této značce.
Zde jsou některé z nejčastěji používaných značek v HTML:
<div>: slouží k vytvoření bloku na stránce, který může obsahovat další značky<p>: slouží k vytvoření odstavce textu<h1>až<h6>: slouží k vytvoření nadpisu, přičemž<h1>je největší a<h6>nejmenší<a>: slouží k vytvoření odkazu na jinou stránku nebo soubor<img>: slouží k vložení obrázku na stránku<ul>a<ol>: slouží k vytvoření seznamu s odrážkami nebo čísly<li>: slouží k vytvoření položky v seznamu
Každá značka v HTML musí být uzavřena. Uzavírací značka obsahuje lomítko a název značky v závorce, například </p>. Některé značky, jako například <img> nebo <input>, mají pouze jednu značku a nemají uzavírací značku.
Aby byla HTML stránka správně interpretována webovým prohlížečem, musí být kód napsán ve správné struktuře a syntaxi. Chyby v kódu mohou vést k nezobrazování stránky správně nebo k neočekávanému chování stránky. Proto je důležité mít dobré porozumění základům HTML a řídit se osvědčenými postupy při tvorbě webových stránek.
V HTML je také možné vkládat kaskádové styly (CSS), které umožňují definovat vzhled a styl stránky. Styly se obvykle definují v samostatném souboru nebo v záhlaví HTML dokumentu pomocí elementu <style>. Zde je ukázkový kód pro použití CSS k definování stylu pro nadpis <h1>:
<!DOCTYPE html>
<html>
<head>
<title>Moje webová stránka</title>
<style>
h1 {
color: red;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<h1>Vítejte na mé webové stránce!</h1>
<p>Toto je ukázkový text na stránce.</p>
</body>
</html>
V tomto příkladu je vytvořen styl pro nadpis <h1>, který nastavuje jeho barvu na červenou, velikost písma na 24 pixelů a zarovnání na střed stránky. Tento styl je definován v elementu <style> v záhlaví dokumentu a aplikuje se na všechny nadpisy <h1> na stránce.
Další důležitou součástí HTML jsou formuláře, které umožňují uživatelům zadávat a odesílat data na server. Formuláře se v HTML vytvářejí pomocí elementů jako <form>, <input> a <button>. Zde je ukázkový kód pro vytvoření jednoduchého formuláře pro odeslání jména a emailové adresy:
<!DOCTYPE html>
<html>
<head>
<title>Moje webová stránka</title>
</head>
<body>
<h1>Kontaktujte nás</h1>
<form action="send-email.php" method="POST">
<label for="name">Jméno:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Emailová adresa:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">Odeslat</button>
</form>
</body>
</html>
V tomto příkladu je vytvořen formulář, který má dva vstupní pole pro jméno a emailovou adresu a tlačítko pro odeslání formuláře. Elementy <label> jsou použity k popisu každého vstupního pole a atributy id a name jsou použity pro identifikaci a následné zpracování dat na serveru. Atribut required je nastaven pro každé vstupní pole, aby uživatelé museli vyplnit obě pole, než mohou formulář odeslat.
Formulář v předchozím příkladu má atribut action, který určuje, kam mají být odeslána data po odeslání formuláře, a atribut method, který určuje způsob, jakým mají být data odeslána. Zde je využit HTTP POST metoda pro odeslání dat na server. Data z formuláře se přenesou na server v zprávě HTTP POST.
Na serveru může být napsán skript pro zpracování dat odeslaných z formuláře. Tento skript může být napsán v různých jazycích, jako je PHP, Python, Ruby atd. Zde je ukázka jednoduchého PHP skriptu, který přijímá data odeslaná z formuláře v předchozím příkladu a odesílá email:
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$to = "[email protected]";
$subject = "Nová zpráva z webového formuláře";
$message = "Jméno: " . $name . "\n" . "Emailová adresa: " . $email;
mail($to, $subject, $message);
echo "Zpráva byla úspěšně odeslána!";
}
?>
Tento skript přijímá data odeslaná z formuláře a nastavuje proměnné $name a $email na hodnoty odeslané z formuláře. Poté skript nastavuje adresu příjemce $to, předmět emailu $subject a zprávu $message. Nakonec skript volá funkci mail() pro odeslání emailu a vypisuje zprávu o úspěšném odeslání zpět uživateli.
V HTML existuje mnoho dalších prvků, které umožňují tvorbu komplexních a interaktivních webových stránek. Například existují prvky pro vytváření tabulek, formulářových prvků, multimediálního obsahu a interaktivních prvků jako jsou tlačítka, posuvníky nebo animace. Vzhledem k rozmanitosti možností, které HTML nabízí, je důležité mít dobré porozumění základům a postupům při tvorbě webových stránek.