Tak a je to tady, když jsme se rozhodli věnovat se těm začátečníkům, chytneme se toho rovnou od podlahy a to u kódování v HTML, na který postupně naváže návod na kódování v CSS. Řekneme si něco o historii, budoucnosti a přítomnosti HTML, nevynecháme různé provázanosti s jinými jazyky a zkrátka a dobře se do této problematiky obujeme tak, jak je třeba.
Základní párové tagy
Základem HTML je několik párových tagů, tím je myšleno, že tento tag má někde svůj počátek a jinde zase svůj konec. Je tedy specifikováno, že by se tak měl vždy ukončit. Všimli jste si toho "měl"? Ano, opravdu to tak je, tag se v některých případech ukončovat nemusí a webovou stránku to přesto neovlivní. Jiné, například <table> se zase striktně ukončit musí, což poznáte později, až si vyzkoušíte, jak s ním pracovat.
<HTML></HTML>
Základním stavebním kamenem HTML je párový tag <html></html> (dál už jenom <html>). Tento tag se pak následně upravuje pomocí tzv. doctype, jehož používání si hned vysvětlíme
Doctype v tagu HTML
Doctype je určitá deklarace typu zobrazovaného dokumentu, která slouží k určení režimu vykreslení (CSS módy) a to již od roku 1999. V překladu to je Document Type Definition, tedy DTD a vypadá většinou nějak takto:
<!DOCTYPE html>.
Ovšem pro běžného programátora to není příliš využitelné, protože jediný prohlížeč, který měl dva módy vykreslení byl Internet Explorer 6 a 7, Mozilla, Chrome ani Opera nejeví přílišnou činnost ohledně změn v DTD, takže bych to nechal být.
<HEAD></HEAD>
Dalším tagem, který následuje (chronologicky), je HEAD. Do tohoto tagu se můžou umisťovat a většinou se také umisťují některé další tagy. HEAD a jeho obsah není viditelný (kromě jeho podtagu <title></title>), ale i přes to obsahuje některé velmi důležité informace. Nyní si tedy, než budeme pokračovat, uvedeme krátký příklad toho, co jsme se zatím dozvěděli:
<html>
<head>
<title>Název vaší stránky </title>
</head>
</html>.
Na tomto příkladu můžete krásně vidět jak přibližné rozložení, tak i práci s párovými tagy.
Další tagy využívané v kontextu k párovému tagu <head>
1. META TAGY
- Meta tagy jsou určitou specifikací vašeho dokumentu, které je nutné vždy do vaší stránky aplikovat. Dva základní typy jsou: meta tag kódování a meta tag pro popis. Meta tagů je samozřejmě více, ale ty si rozebereme do detailů v některém dalším článku.
2. LINK
- Tento tag se většinou využívá ve spojitosti s propojením s nějakým jiným souborem. Na stránkách je neviditelný, ale pro vás v pokročilejší fázi kódování docela důležitý. V HTML se nejčastěji objevuje ve spojitosti s CSS, ale o tom také až později.
<BODY></BODY>
A nyní zde máme poslední z hlavních párových tagů, které se na vaší stránce stoprocentně objeví a to je <body>. Mezí <body> a </body> se bude nacházet veškerý viditelný obsah vaší webové stránky, tedy texty, vzhledy a vše, co budete chtít zkrátka prezentovat. Nyní si tedy znovu ukážeme rychlý příklad:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Další často využívané párové tagy
Dalšími často využívanými tagy jsou tagy, které souvisejí přímo s obsahem vaší stránky, tedy definice všech nadpisů, odstavců, nebo odsazení textu na další řádek (zde se nejedná o párový tag, tudíž nemusí být ukončován).
Rozlišujeme různé typy nadpisů
<h1> Nadpis první úrovně </h1>
<h2> Nadpis druhé úrovně </h2>
<h3> Napis třetí úrovně </h3>
Nadpisy můžeme vykreslit až do šesté úrovně, každá úroveň se liší velikostí a důležitostí.
<p> Text vašeho odstavce </p>
Tento tag odlišuje odstavce, po jeho ukončení dochází k automatickému zalomení řádku.
<b></b>; <i></i>; <u></u>
Tyto tři párové tagy upravují váš text. Tučný (<b> bold), kurzíva (<i> italic), podtržený (<u> underline).
Samozřejmě takovýchto tagu je možné nalézt více, ale my si pro stručnost uvedeme jenom tyto základní. Nyní tedy ještě přidáme jeden obšírnější příklad, jak by vaše stránka mohla vypadat.
<html>
<head>
<title>::Hlavní stránka:: Tvoříme si web</title>
</head>
<body>
<h1>Nadpis1</h1>
<p>Ahoj, tak toto je první odstavec, který jsem nakódoval a musím uznat, vypadá fenomenálně.</p>
</body>
</html>
Tak a tady dnešní tutoriál ukončíme a pokud máte zájem, můžete mi na email libor.mosna@gmail.com zaslat domácí úkol, který bude následovat, zkuste si nastudovat něco dalšího a klidně to i použít, pokud vám něco nebude fungovat, neváhejte a napište mi.
Doporučení (nebo také domácí úkol)
Zkuste si vytvořit stránku, na kterou napíšete článek s dvou úrovňovými nadpisy a za pomocí tagu <p></p>.
