Základy (X)HTML
Už je to nějaký ten pátek, co jsem dělal maturitní otázku na téma "Tvorba HTML stránek". Původně jsem ji nechtěl zveřejňovat, ale teď si říkám, že by to byla možná i škoda. Stejně to ale berte trochu s nadhledem.
Základy teorie HTML
Značky a atributy
Jazyk HTML pracuje na principu značek (neboli tagů). Celý text je pomocí těchto značek rozdělován, jinak řečeno, text se do dvojic těchto značek vkládá. Značky lze také vnořovat nebo je použít jako zástupný symbol pro jiný objekt (třeba obrázek nebo flash nebo nový řádek).
Značky se dělí na párové a nepárové. Nepárové značky nemají obsah:
<párová_značka>obsah párové značky</párová_značka>
<nepárová_značka>
V jazyku XHTML je zápis nepárové značky odlišný:
<nepárová_značka/>
Značky mohou obsahovat i atributy. Atribut je něco jako vlastnost, která se vztahuje pro celou značku, a pokud má obsah, tak i pro její obsah:
<značka název_atributu="hodnota atributu"
název_druhého_atributu="hodnota druhého atributu">
Značka může obsahovat libovolný počet atributů. V některých případech nemají atributy hodnotu, pouze název:
<značka název_atributu>
Toto v XHTML nelze. V XHTML se pro takovéto případy používá následující zápis:
<značka název_atributu="název_atributu"/>
Pouze v HTML (ne v XHTML) je možné vynechat uvozovky u hodnot atributů. Může se to ale pouze, když hodnota atributu neobsahuje žádné mezery, nové řádky nebo tabulátory.
Vnoření a křížení
Příklad vnoření značek:
<p>Obsah značky p, <strong>obsah značky strong, která
je vnořená do značky p, tudíž je toto zároveň obsah značky p,</strong>
zase obsah pouze značky p.</p>
Není možné značky křížit:
<p>Obsah značky p, <em>obsah značky em a p,
</p>obsah značky em.</em>
Tento zápis není správný a mohl by způsobit spoustu potíží.
Velikosti znaků
V HTML kódu nezáleží na velikosti písmen u názvu
značek a atributů a u takových hodnot
atributů, které jsou předem dány. Například u
align="left" je hodnota left předem dána (můžeme si
vybrat z několika předvolených hodnot). Zde na velikosti písmen nezáleží.
Pokud například ale zapisujeme cestu u
href="http://www.web.cz/soubor.htm?promenna=Hodnota+promenne.",
tak zde, u cesty, na velikosti písmen záleží. Pokud zapisujeme třeba značku
<strong>, tak její zápis je stejný jako tento:
<STRONG>, nebo jako tento: <stROnG>.
Pokud píšeme XHTML kód, tak všude, kde v HTML kódu nezáleželo na velikosti písmen, musí být u XHTML vše malými písmeny.
Mezery
Jakákoli kombinace po sobě jdoucích mezer, tabulátorů a konců řádků v HTML kódu je ve výsledném textu jako jedna mezera. To znamená, že když máme jednu mezeru, je to jako jedna mezera. Když máme dvě mezery, je to jako jedna mezera. Když máme tři mezery, je to jako jedna mezera. Když máme jeden tabulátor, je to jako jedna mezera. Když máme jeden konec řádku, je to jako jedna mezera. Když máme jednu mezeru a za ní konec řádku, je to jako jedna mezera. Pokud tyto tři znaky jakkoli za sebou nakombinujeme, třeba: "mezera, mezera, konec řádku, mezera, tabulátor, mezera, tabulátor, tabulátor", je to jako jedna mezera.
HTML entity
Pokud chceme v HTML zapsat jako obyčejný text nějaký znak, který může dělat
problémy, protože se používá například v zápisu značek (třeba znak
<), můžeme místo něj použít entitu.
<- <>- >"- "&- &- pevná mezera -
Znaky < a > se používají u zápisu značky,
znak " se používá u zápisu hodnoty atributu a znak
& se používá u zápisu entit. Protože nelze zapsat více za
sebou jdoucích mezer, používají se entity pro pevné mezery.
Pro nový řádek se nepoužívá entita, ale značka <br>.
Nesmíme zapomenou používat entity i v hodnotách atributů.
Hodně často se na to zapomíná zejména u adresy u značky
<a href="">.
Komentáře
Komentáře se v HTML zapisují mezi <!-- a
-->.
Základní struktura HTML stránky
Co by měla stránka obsahovat - základní konstrukce
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Název stránky</title>
</head>
<body>
obsah stránky
</body>
</html>Každá HTML stránka by toto měla obsahovat. Není to však povinné. Narozdíl od XHTML, kde to povinné je.
Na začátku máme DTD specifikaci. Podle toho, jakou verzí HTML naše stránky píšeme, musíme tak nastavit i tuto specifikaci. U XHTML samozřejmě nepoužíváme HTML, ale XHTML specifikace.
Dále následuje značka <html>, která je kořenová.
U jazyku XML, ze kterého XHTML vychází, musí být vždy právě jedna kořenová
značka.
Dokument se dále dělí na značky <head> a
<body>. V <body> je samotný obsah webu,
který se nám v prohlížeči zobrazí. To bude popsáno později.
V <head> se definují ostatní speciální věci.
Hlavička
Do <head> se mohou umístit tzv.
meta tagy, které mimo jiné mohou definovat
kódování stránky, jako je tomu v příkladu výše.
Značka <meta> má dva atributy.
http-equiv="Content-Type" určuje, že budeme definovat
typ dokumentu. V atributu content je hodnota
"text/html; charset=utf-8". MIME typ
souboru je text/html (při použití XHTML by se mělo použít
application/xhtml+xml, jsou s tím však potíže u prohlížeče
Internet Explorer) a znaková sada je utf-8. Existuje spoustu
jiných sad. Nejčastější to jsou sady ISO. Pro středoevropské
jazyky je to iso-8859-2. Často se používají i sady Windows
(windows-1250).
Další značkou v <head> je <title>. Její obsah je název aktuální stránky. Je většinou zobrazen v záhlaví prohlížeče.
Vložení nebo připojení CSS stylů
Pokud chceme připojit samostatný soubor CSS k HTML dokumentu, dělá se to tak, že do hlavičky HTML (značky <head>) vložíme <link rel="stylesheet" type="text/css" href="style.css">. Přitom v atributu href nastavíme požadovanou absolutní nebo relativní cestu k souboru s CSS styly.
Pokud nechceme mít styly v samostatném souboru, ale jako součást HTML stránky, lze je vložit do párové značky <style type="text/css"></style>.
Přehled HTML značek
Každá HTML značka představuje určitý typ informací, který do ní bude vložen. Značky se dělí na blokové a řádkové. Blokové definují nějakou skupinu textů, které tvoří obdélníkový blok (např. odstavec). Řádkové většinou skupinu znaků - mohou začínat i končit třeba uprostřed řádku (např. odkaz nebo zvýraznění textu).
Odstavec <p>
Při používání odstavců nesmíme zapomenout na to, že mohou obsahovat jenom řádkové prvky.
Nadpisy <h1> - <h6>
Pro nadpisy používáme značky <h1> až <h6>. <h1> je nejhlavnější nadpis (měl by být na každé stránce jenom jednou).
Obrázky <img>
Značka <img> je nepárová a v prohlížeči je nahrazena obrázkem. Má několik atributů:
src - cesta k obrázku.
alt - alternativní text. Měl by obrázek popisovat. Zobrazí se, pokud nebude obrázek dostupný.
width - šířka obrázku v pixelech.
height - výška obrázku v pixelech.
Odkaz <a>
Odkaz má atribut href, kde je cesta k souboru, na který se po kliknutí přejde.
Zalomení řádku <br>
Nepárová značka <br> zalomí řádek. Pozor na špatné používání jako oddělovač textu do odstavců. K tomuto účelu slouží značka <p>.
Zvýraznění <strong> a <em>
Značkou <strong> se zvýrazňuje text. <em> má stejný účel, jen není zvýraznění tak silné jako u <strong>.
Vodorovná čára <hr>
Nepárová značka <hr> je v prohlížeči nahrazena vodorovnou čárou.
Seznamy
Seznamy se uvozují značkou <ul> pro nečíslovaný seznam nebo <ol> pro číslovaný. Jednotlivé položky se potom označují značkami <li>, které se vkládají do <ul> nebo <ol>. <li> může obsahovat i <ul> nebo <ol>, čímž dosáhneme vnoření seznamů, tedy stromově strukturovaného seznamu.
Tabulky
Tabulka začíná značkou <table>. Poté by měla následovat značka <caption>, která slouží k něco jako nadpisu tabulky. Celou tabulku můžeme nepovinně dělit na tří části: <thead>, <tfoot> a <tbody>. <thead> slouží k hlavičkovým datům, nejčastěji k popiskům sloupců. <tfoot> je zase zápatí, obvykle nějaké součty nebo souhrny. V <tbody> je potom samotný obsah tabulky. Tato značka se může použít několikrát, pokud máme tabulku rozdělenou do víc částí (třeba podle měsíců). Na definování jednotlivých řádků slouží <tr>. Do něj pak vkládáme <th> nebo <td>, což určuje jednotlivé sloupce. <th> je pro hlavičkové informace a <td> pro datové informace.
Formuláře
Veškeré další značky, které souvisí s formuláři, se vkládají do <form>. Tato značka má několik atributů:
action - odkaz na script, kam se vyplněná data odešlou. Zároveň je to i adresa stránky, na kterou se při tom přejde.
method - způsob předání dat - post nebo get. Get předá data pomocí url adresy. Vhodnější je ale použít post. Ten má mnohem větší limit pro objem přenášených dat.
enctype - způsob kódování dat. Používá se hlavně u uploadu souborů na server.
Nepárová značka <input> má velmi široké uplatnění díky atributu type. Ten jí jakoby dělí na další značky. U této značky se často používá atribut value, který určuje předdefinovanou hodnotu nebo u tlačítka jeho text. Dále je zde atribut name, který určuje jméno komponenty, podle něhož se poté rozlišuje ve scriptu, který formulář zpracovává. Atribut type může být:
text - jednořádkový vstup pro text. Dá se užít spolu s atributem size, který určuje šířku pole ve znacích. Další atribut maxlength určuje maximální počet znaků, který lze do pole zadat.
password - je stejný jako text, jenže se psaný obsah skryje za hvězdičky nebo kolečka. Nedoporučuje se používat atribut value kvůli cachování.
hidden - skrytý <input> s předem nastavenou hodnotou. Na stránce není zobrazen. Slouží k předávání různých hodnot scriptu.
radio - přepínací tlačítko. Několik radio inputů se stejným jménem, ale rozdílnými hodnotami utváří skupinu. Atribut checked slouží k označení tlačítka.
checkbox - zatrhávací pole. Atribut checked slouží k označení.
submit - tlačítko, které způsobí odeslání formuláře.
reset - tlačítko, které nastaví všechna pole na původní hodnotu.
file - pole pro upload souborů. Vedle pole pro adresu souboru je tlačítko pro procházení adresáři v klientském počítači.
button - tlačítko, které nic nedělá. Tedy pokud ho nepoužijeme k ovládání klientských scriptů pomocí událostí.
Párová značka <select> slouží k zobrazení vysouvacího menu. Z tohoto menu je možné si vybrat jednu nebo více položek. Značce lze nastavit název pomocí atributu name. Atribut size určuje, kolik řádku menu bude mít. Pokud je nastaven jenom jeden řádek, může se vybrat pouze jedna položka menu. Pomocí tlačítka s šipkou dolů se menu vysune a poté se může jedna položka vybrat. Pokud je nastaveno víc jak 1 řádek, v menu se pohybujeme pomocí posuvníku. V tomto případě lez použí i atribut multiple pro možnost výběru více hodnot. Do této značky se umisťují párové značky <option>. Jsou to jednotlivé položky menu. Lze použít atribut selected, který určí, že je položka vybrána.
Párová značka <textarea> slouží pro víceřádkový textový vstup. Má atribut name pro název. Další atribut cols určuje šířku pole ve znacích a rows výšku pole v řádcích. Přednastavená hodnota se neumisťuje do atributu, ale rovnou jako obsah značky.
Párová značka <label> je něco jako štítek pro nějakou formulářovou komponentu. Má atribut for, kde je napsáno id komponenty, se kterou je svázán. Výhoda tohoto svázání spočívá v tom, že pokud se na štítek klepne, je aktivována ta komponenta, se kterou je svázán. Checkbox se zatrhne/odtrhne, radio input se označí atd.
Nesémantické značky <div> a <span>
Značky <div> a <span> jsou nesémantické. Pokud se na ně neaplikujeme nějaký CSS styl, nejsou v prohlížeči nijak patrné. Rozdíl mezi nimi je ten, že <div> je bloková značka a <span> řádková.
Indexy <sup> a <sub>
<sup> určuje horní index a <sub> dolní.
Zkratky <abbr> a <acronym>
<abbr> slouží k vyznačování zkratek (hláskuje se po písmenech, např. ODS) a <acronym> k vyznačení zkratkového slova (vysloví se jako jedno slovo, např. NATO). U zkratek se často používá atribut title, do kterého se píše význam zkratky.
Citace <q> a <blockquote>
Značky <q> (řádková) a <blockquote> (bloková) slouží s označení citátu.
Zdrojové kódy <code> a <pre>
Značka <code>, která se používá pro označení nějakého programového kódu, se často uvádí v kombinaci se značkou <pre>, která zajistí, že budou ponechány a prohlížečem interpretovány bílé mezery.
Adresa <address>
Slouží k označení adresy nebo celého kontaktu na někoho.
Obecné atributy
Následující atributy lez použít prakticky ve všech značkách umístěných v <body>.
Třída class
Pokud máme skupinu nějakých značek, kterým chceme definovat stejný styl, vložíme je do jedné třídy. Jedna značka může být součástí několika tříd:
class="trida_1 trida_2 trida_3"
Identifikátor id
Každý prvek na stránce musí mít jedinečný identifikátor. id má uplatnění u stylů CSS i v JavaScriptu.
CSS styly style
Pokud chceme definovat nějaké vlastnosti přímo v HTML kódu (což se ale nedoporučuje), můžeme to udělat pomocí atributu style.
Titulek title
Do atributu title se vkládá text, který se zobrazí ve žluté bublině po najetí kurzoru nad prvek.
Události
Máme několik událostí vztahující se k určitým značkám. Třeba při najetí myši nad značku onmouseover, při kliknutí na značku onclick a mnoho dalších. Jako hodnota tohoto atributu je JavaScriptový kód, který se při této události vykoná. Většinou se ale používá pouze funkce, která se definuje předem.
Lehký úvod do CSS
CSS je samostatný jazyk, který se používá ve spojitosti s HTML. V CSS se pro určité značky nebo skupiny značek definují vlastnosti určující vzhled. Značky lze vybrat různým způsobem. Podle názvu, podle atributu nebo jiným způsobem.
Můžeme vybrat například všechny značky odstavec:
p{vlastnosti...}
Nebo lze vybrat pouze ty odstavce, které mají třídu (atribut class) nastavenou na "hlavni":
p.hlavni{vlastnosti...}
Další možnost je vybrat všechny značky s určitou třídou:
.hlavni{vlastnosti...}
Nebo můžeme vybírat podle jedinečného identifikátoru (atribut id):
#logo{vlastnosti...}
Lze vybírat i podle toho, ve které značce se určitá značka nachází nebo se kterou sousedí a tak podobně.
Vlastnosti určují vzhled vybraných značek. Máme vlastnosti pro velikost, styl, barvu, tloušťku nebo typ písma. Můžeme definovat okraje, rámečky, barvu pozadí, obrázek na pozadí, způsob opakování obrázku na pozadí, obtékání prvků, pozici prvků a mnohé další.
Nejsou jen vizuální vlastnosti. Lze definovat i zvukové styly.
Popis HTML editoru PSPad
PSPad je český editor nejen HTML kódu, zvládá XML, CSS, PHP, C, C++, Java, JavaScript a další. Má funkce jako zvýraznění kódu, doplňování kódu při psaní (ctrl+mezerník), možnost přímé práce se soubory prostřednictvím FTP spojení. Obsahuje spoustu malých užitečných nástrojů jako ASCII tabulku, výběr barev, monitor schránky, generátor otisků (MD5, SHA1), Lorem Ipsum generátor a další. Zvládá základní české znakové sady, je možno si přepnout i styl nových řádků. Všechny funkce jsou přehledně uspořádány do menu a snadno se najdou. Můžeme používat i nástrojový panel (vertikální vlevo), kde si můžeme vybrat např. procházení souborů na disku nebo FTP připojení.