HTML je zkratka HyperTextMarkupLanguage a slouží k programování internetových www stránek. Pomocí HTML značek určujeme formátování textu, který se má zobrazit na stránce, vkládáme obrázky, seznamy a případně další objekty.
Html značka vždy začíná znakem „<“ a končí znakem „>“. Vše, co je uzavřeno mezi těmito znaky je chápáno jako HTML značka a prohlížeč to přímo nezobrazuje!
K editaci HTML kódu můžeme využít speciální editory nebo například také MS Word, kde editujeme stránku podobně jako wordovský dokument a HTML kód je následně vygenerován. Pokud chceme výsledný kód psát vlastní rukou, což v rámci výuky budeme, musíme použít libovolný textový editor, který nevkládá po uložení k textu vlastní údaje o formátování. Vhodný je obyčejný „Poznámkový blok“ z operačního systému Windows. Daleko komfortnější je například editor PS Pad, který budeme používat.
Pokud si chceme prohlédnout libovolnou stránku na internetu, otevřeme si internetový prohlížeč (Internet Explorer, Mozilla Firefox ...) a zadáme adresu stránky. Prohlížeč z příslušné stránky stáhne textový HTML dokument, který obsahuje informace o textu, barvách, rozmístnění textu a odkazy (adresy) na použité soubory ve stránce (obrázky, videa ...). Prohlížeč stažený HTML přeloží a podle něj sestaví výslednou stránku, kterou pak zobrazí, tak jak ji známe.
Internetové stránky (např. www.seznam.cz) jsou tvořeny desítkami jednotlivých souborů. Tyto soubory jsou HTML zdrové kódy (běžný textový soubor obsahující HTML značky) a dále pak obrázky, videa a další multimediální soubory.
Klíčové jsou HTML soubory, které odkazují na další stránky (soubory) nebo vkládají obrázky atd. Tyto jsou pojmenovány názvem a vždy mají příponu „.html“ případně „.htm“. To říká operačnímu systému, že se jedná o internetové stránky a má je otevřít (zobrazit v prohlížeči).
|
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>titulek stránky</title> </head> <body> obsah stránky </body> </html>
|
Každý HTML soubor musí začínat značkou „<html>“, která je párová, a proto na konci musí následovat značka „</html>“.
Dále se dokument skládá s části „<head>“ a „<body>“. Obojí jsou párové značky a proto k nim musí existovat i zakončení „</head>“ a „</body>“.
V části „head“ (česky hlavička) uvádíme informace o stránce jako je kódová stránka češtiny (viz. řádek <meta http-equiv="content-type" content="text/html; charset=utf-8">) a dále pak titulek stránky, který se v kódu píše mezi značky „<title>“ a „</title>“. Veškerý text uvedený v titulku nebude zobrazen přímo ve stránce, ale v nadpisu okna prohlížeče (horní rámeček).
Příklad použití značky <title>
|
<title>tohle bude zobrazeno jako nadpis stránky</title>
|
Veškerý obsah stránky (texty, odkazy, obrázky ....) uvádíme mezi značkami „<body>“ a „</body>“. Nikdy ne jinde!
Příklad stránky
|
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>první stránka</title> </head> <body> Ahoj, už umím HTML! </body> </html>
|
Tato stránka v okně prohlížeče zobrazí text: „Ahoj, už umím HTML!“
HTML značek (tagů) existuje několik desítek. My se seznámíme s těmi nejdůležitějšími, které nám postačí k běžnému formátování textu, vkládání obrázků a tvorbě odkazů na jiné stránky.
Html značka vždy začíná znakem „<“ a končí znakem „>“. Vše, co je uzavřeno mezi těmito znaky je chápáno jako HTML značka a prohlížeč to přímo nezobrazuje!
Značky máme párové (ke značce existuje značka, která ruší její platnost) a nepárové.
Příklad párové značky:
<strong>nějaký text, který bude zobrazen tučně</strong>
<strong> je začátek párové značky a říká, že vše co bude za značkou následovat bude tučným písmem
</strong> je konec párové značky, který ruší platnost značky <strong> tj. vše za tímto ukončení již NEBUDE tučně.
Příklad nepárové značky
<br>
Tato značka ukončí řádek.
Některé značky mohou mít další atributy, které vpisujeme přímo do značky za její název. Název značky od atributy a jednotlivé atributy mezi sebou oddělujeme mezerou. Za název atributu následuje znaménko rovná se a pak v uvozovkách hodnota atributu. Příkladem je například značka pro vložení obrázku, která má atribut src, kde uvádíme název souboru s obrázkem, který se má vložit do stránky.
Příklad HTML značky s atributy
|
<img src=“domecek.jpg“ width=“150“>
|
- tato značka se jmenuje img
- má dva atributy a to src a width
<br>
Tato nepárová značka ukončí řádek a text bude pokračovat na dalším řádku
HTML kód
|
Nějaký text<br>a tady pokračujeme na druhém řádku
|
Bude zobrazen prohlížečem jako
|
Nějaký text a tady pokračujeme na druhém řádku
|
<strong>,</strong>
Tato párová značka určuje, že vše od jejího začátku do konce bude tučným písmem
HTML kód
|
Nějaký text<br>a tady <strong>pokračujeme</strong> na druhém řádku
|
Bude zobrazen prohlížečem jako
|
Nějaký text a tady pokračujeme na druhém řádku |
<u>,</u>
Tato párová značka určuje, že vše od jejího začátku do konce bude podrženým písmem
HTML kód
|
Nějaký text<br>a tady <u>pokračujeme</u> na druhém řádku
|
Bude zobrazen prohlížečem jako
|
Nějaký text a tady pokračujeme na druhém řádku
|
<i>,</i>
Tato párová značka určuje, že vše od jejího začátku do konce bude kurzívou.
HTML kód
|
Nějaký text<br>a tady <i>pokračujeme</i> na druhém řádku
|
Bude zobrazen prohlížečem jako
|
Nějaký text a tady pokračujeme na druhém řádku
|
Tyto značky lze i kombinovat, viz. následující příklad
HTML kód
|
Nějaký text<br>a tady <i><strong>pokračujeme</strong></i> na druhém řádku
|
Bude zobrazen prohlížečem jako
|
Nějaký text a tady pokračujeme na druhém řádku
|
<p>,</p>
Tato párová značka určuje, že vše co je uvnitř je jedním odstavcem textu. Každý odstavec je pak automaticky odskočen od ostatního textu. Viz. příklad
HTML kód
|
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nisl, condimentum eget venenatis ut, fringilla ut ante. Curabitur feugiat dignissim sodales. Pellentesque tristique tellus vitae mi congue quis feugiat neque ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam dapibus sapien et ligula placerat ac fringilla eros sodales. Mauris imperdiet rhoncus arcu, sit amet elementum lectus pulvinar non. Nunc convallis bibendum justo, laoreet ultricies risus semper sed. Proin accumsan aliquam lobortis. Donec vitae mi mollis odio aliquet vehicula. Praesent hendrerit risus vitae est vestibulum sed elementum libero pulvinar. Integer nec neque turpis, a suscipit augue. Duis ante eros, elementum at interdum sollicitudin, imperdiet in ante. </p> <p> Pellentesque a placerat velit. Phasellus eu magna mi. Fusce cursus neque non quam vehicula ultrices. Proin id interdum arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ac justo eget sapien sollicitudin tristique. Sed mattis malesuada tellus, quis ullamcorper eros sodales ac. </p>
|
Bude zobrazen prohlížečem jako
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nisl, condimentum eget venenatis ut, fringilla ut ante. Curabitur feugiat dignissim sodales. Pellentesque tristique tellus vitae mi congue quis feugiat neque ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam dapibus sapien et ligula placerat ac fringilla eros sodales. Mauris imperdiet rhoncus arcu, sit amet elementum lectus pulvinar non. Nunc convallis bibendum justo, laoreet ultricies risus semper sed. Proin accumsan aliquam lobortis. Donec vitae mi mollis odio aliquet vehicula. Praesent hendrerit risus vitae est vestibulum sed elementum libero pulvinar. Integer nec neque turpis, a suscipit augue. Duis ante eros, elementum at interdum sollicitudin, imperdiet in ante.
Pellentesque a placerat velit. Phasellus eu magna mi. Fusce cursus neque non quam vehicula ultrices. Proin id interdum arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ac justo eget sapien sollicitudin tristique. Sed mattis malesuada tellus, quis ullamcorper eros sodales ac.
|
<h1></h1>,
<h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>,
<h6></h6>, <h7></h7>
Tyto párové značky se používají pro vytváření nadpisů kapitol. Čím menší číslo, tím je nadpis považován za nadřazenější. Hlavní kapitola (název stránky) je tedy tvořen značkou <h1> a další podkapitoly jsou pak tvořeny značkami <h2> až <h7>.
Text uvnitř těchto značek bude vždy tučným písmem a čím důležitější značka, tím bude velikost písma větší.
Pozn.: Velikosti a tučnost se dá upravit pomocí dalších značek vnořených dovnitř nadpisu nebo pomocí CSS.
<font></font>
Tato značka se používá pro formátování barvy textu a jeho velikosti. Dva základní atributy jsou „size“ pro velikost a „color“ pro barvu. Velikost nastavujeme hodnotami 1 – 7, kde 1 je nejmenší písmo a 7 největší. Barvu zadáváme pomocí anglického názvu nebo hex kódem barvy. Základní barvy jsou „white“ = bíla, „red“ = červená, „black“ = černá, „green“ = zelená, „yellow“ = žlutá, „blue“ = modrá, „grey“ = šedá. Dalším atributem je „face“, kde uvádíme název písma, který má být aplikován na text uvnitř značky. Základní písma jsou například „Arial“, „Tahoma“, „Verdana“, „Times“ a další. Seznam písem nalezneme v ovládacích panelech v částí „Písma“.
HTML kód
<font size=”
Bude zobrazen prohlížečem jako
Atributy značky <body> můžeme měnit například barvu pozadí nebo vložit obrázek na pozadí. Atribut pro barvu pozadí se nazývá „bgcolor“ a pro obrázek na pozadí „background“. Hodnoty bgcolor jsou shodné jako u značky font atribut color viz. výše. Hodnotou atributu background je název obrázku, který musí být nahraný ve stejné složce jako zdrojový html soubor, případně musíme zadat cestu k obrázku. Název obrázku zadaváme celý včetně koncovky (.jpg, .gif, .png ....).
<body bgcolor=“blue“> .... uvedeme pro stránku s modrým pozadím
<body background=“logo.jpg“> ... na pozadí stránky se bude opakovat obrázek logo.jpg dokud nepokryje celou plochu.
<img>
Jedná se o nepárovou značku, která má povinný atribut „src“, kam udáváme jméno obrázku, který se má do stránky vložit.
Ukázkový kód
|
<img src=“domecek.jpg“ width=“150“>
|
Tento kód vloží obrázek s názvem domecek.jpg do stránky a určí mu šířku 150 pixelů. Tento příklad předpokládá, že obrázek je nahrán ve stejné složce jako je html soubor.
Další atributy jsou align, který má hodnoty left a right, jenž určují zarovnání obrázku vůči okolnímu textu.
Ukázkový kód pro zarovnání obrázku k pravému okraji stránky
|
<img src=“domecek.jpg“ width=“150“ align=“right“>
|
<a>
Jedná se o párovou značku a vše, co je uzavřeno mezi jejím začátkem a koncem se stává aktivním odkazem nejčastěji na jinou stránku. Odkazem může být text, ale také obrázek viz. příklady.
Značka „<a>“ má jeden velmi důležitý parametr, a to „href“ kde definujeme název stránky, která má být načtena a zobrazena po kliknutí na odkaz.
Ukázkový kód – text jako odkaz
|
<a href=”stranka2.html”>text odkazu</a>
|
Tento kód vytvoří odkaz nad textem „text odkazu“ a po kliknutí bude prohlížeč přesměrován na stránku tvořenou zdrojovým kódem v souboru „stranka2.html“. Tento soubor se nachází ve stejné složce jako soubor, kde je vložen odkaz.
Ukázkový kód – obrázek jako odkaz
|
<a href=”stranka2.html”> <img src=“domecek.jpg“ width=“150“ align=“right“> </a>
|
Místo textu bude odkazem obrázek „domeček.jpg“
Pokud se chceme odkázat ne libovolnou adresu z internetu, musíme uvést celou cestu včetně domény a http:// na začátku. Viz. následující příklad
|
<a href=”http://www.seznam.cz/”>skoč na seznam</a>
|
Velmi často jsou používány tzv. seznamy s odrážkami nebo též číslované seznamy. Tyto seznamy lze vytvářet i pomocí HTML kódu a to pomocí kombinace značek <ul> a <li>. Obě jsou párové značky a musí být tedy zakončeny </ul> a </li>.
Značka <ul> definuje typ seznamu a má atribut type, který nabývá hodnot square, circle a disc. Vyzkoušení parametrů ponechávám na žákově iniciativě, zde přiložen příklad použití. Každý řádek seznamu je pak uzavřen mezi do značky <li>.
Kód
|
<ul type=”square”> <li>text první odrážky</li> <li>text druhé odrážky</li> <li>text třetí odrážky</li> </ul>
|
Bude zobrazen prohlížečem jako
|
§ text první odrážky § text druhé odrážky § text třetí odrážky
|
Druhým typem seznamů jsou číslované. Tyto seznamy jsou velmi podobné výše uvedeným seznamům s jediným rozdílem, že místo značky <ul> používáme značku <ol>, která má taktéž atribut type , ale s hodnotami a, A, i, I a 1. Vyzkoušení všech parametrů ponechávám opět na žákově iniciativě a přikládám pouze jeden příklad.
Kód
|
<ol type=”a”> <li>text první odrážky</li> <li>text druhé odrážky</li> <li>text třetí odrážky</li> </ol>
|
Bude zobrazen prohlížečem jako
|
a) text první odrážky b) text druhé odrážky c) text třetí odrážky
|
HTML soubor můžeme editovat v libovolném textovém editoru, který nepřidává při uložení vlastní kód. Bohatě postačí Poznámkový blok z Windows, ale doporučuji se poohlédnout po nějakém komfortnějším editoru. Stačí do vyhledávače zadat spojení HTML editory.
Ve škole se k editaci HTML kódu bude používat výhradně PS Pad, který lze zdarma stáhnout z internetu.
Při ukládání souboru pamatujte vždy na to, že soubor musí mít koncovku .html jinak ho nebude prohlížeč považovat za zdrojový kód stránky!
K tomu, abychom mohli své výtvory v HTML vystavit všem z celého světa, musí nám někdo poskytnout místo pro naše stránky na tzv. web serveru. K tomto umístnění pak obdržíme přístupy, přes které lze nahrát zdrojové html soubory, obrázky a další. Poskytoval prostou nám také prozradí, pod jakou doménou (veřejnou adresou) budou stránky dostupné.