Základy HTML v kocke

Dominik Šelmeci 18.01.2016

V predchádzajúcom článku ste si vyskúšali vytvoriť webovú stránku. Teraz si HTML vysvetlíme podrobnejšie a ukážem vám aj nejaké nové značky. Poďme na to.

Odkrytie skratky HTML

HTML je skratka Hyper Text Markup Language, čo sa dá preložiť ako hypertextový značkovací jazyk. HTML sa skladá zo značiek, nazývaných aj tagy. Už sme si ich zopár ukázali napríklad: <body></body>, <p></p>, <h1></h1>, <nav></nav> a podobne. V HTML značkách na veľkosti písma nezáleží. Doporučuje sa však všetky značky písať s malými písmenami.

Zápis HTML značiek

Väčšina značiek má začiatočný tvar <nazov_znacky> a ukončovací tvar s lomítkom </nazov_znacky>. Existujú aj výnimky, ktoré nepotrebujú ukončovaciu značku. Napríklad:

  • <link href="subor.css" rel="stylesheet"> - vloženie CSS súboru
  • <br> - nový riadok
  • <hr> - oddeľovač textu

Každá značka môže obsahovať atribúty. Atribút je dvojica názvu a hodnoty. Základ vyzerá takto:
<znacka nazov_atributu="hodnota_atributu"></znacka>. Príkladom z predchádzajúceho článku je použitie triedy:
<div class="obsah-clanku"></div>.

Všetkých základných značiek je cez 100. V skutočnosti sa z nich používa menej ako polovica. Všetky značky a ich atribúty môžete nájsť na stránke W3School. Nie je potrebné sa ich učiť naspamäť :). Učte sa radšej tak, že ak nájdete na webe prvok, ktorý sa vám páči, tak ho preskúmajte (pravé tlačidlo myši => preskúmať).

Popis základnej kostry HTML

Poďme si teraz rozobrať základnú kostru HTML.

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
	</head>
	<body>
		
	</body>
</html>
  • <!DOCTYPE html> - nám určuje typ dokumentu. V tomto prípade ide o označenie HTML5 dokumentu. Existujú aj iné typy. Predchodca HTML5 bol HTML4.01. Jeho doctype vyzeral takto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">. Existuje aj striktnejšia verzia HTML tzv. XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. V tomto type dokumente každá značka musí mať ukončovaciu značku. Vo všetkých príkladoch na mojom blogu budem používať iba HTML5.
  • <html></html> - koreňová značka dokumentu, zoskupuje všetky ostatné značky
  • <head></head> - hlavička dokumentu, ktorá sa na stránke nezobrazuje. Obsahuje informácie o dokumente, CSS štýly, Javascript, definíciu písmien. Obsahuje aj tzv. meta tagy.
  • <title></title> - označuje názov dokumentu. Vypíše sa napr. v prehliadači do názvu práve otvorenej karty.
  • <meta charset="utf-8"> - označenie znakovej sady. Znamená asi toľko, že slobodne môžete používať všetky znaky, ktoré máte na klávesnici :). Kľudne aj zjednodušenú čínštinu.
  • <body></body> - telo dokumentu. Všetko, čo sa nachádza v tejto značke, sa zobrazí v dokumente (všetko čo neskryjeme s pomocou CSS).

Niektoré základné značky

Komentáre

Komentáre píšeme vtedy, ak si chceme niečo poznačiť do kódu, ale nechceme, aby to bolo zobrazené na stránke. 

<!-- Toto je príklad komentára -->

Nadpisy

h - heading
Nadpisy, alebo tzv. h-áčka, sú značky začínajúce písmenom h a číslom od 1 do 6. Hlavný nadpis začína od 1 a ostatné sú podnadpisy. Nadpisy sú veľmi dôležité z hľadiska optimalizácie pre vyhľadávače ako je Google, Yahoo a iné. Nadpisy na stránke by vždy mali začínať od <h1></h1> (h1 by mal byť len jeden) a pokračovať posupne nižším číslom.

<h1>Nadpis prvej úrovne</h1>
<h2>Nadpis druhej úrovne</h2>
<h3>Nadpis tretej úrovne</h3>
<h4>Nadpis štvrtej úrovne</h4>
<h5>Nadpis piatej úrovne</h5>
<h6>Nadpis šiestej úrovne</h6>

Nadpis prvej úrovne

Nadpis druhej úrovne

Nadpis tretej úrovne

Nadpis štvrtej úrovne

Nadpis piatej úrovne
Nadpis šiestej úrovne

 

Paragrafy

p = paragraph
Paragraf je jednoduchý odstavec.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Nový riadok

br - line break
Označuje presun na nový riadok. Používame ho, ak v paragrafe chceme presunúť niektorý text na nový riadok.

<p>Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Linky

a - anchor
Link je označenie textu, alebo bloku, na ktorý keď klikneme, tak nás presmeruje na novú stránku. Môže otvoriť aj nové okno, prípadne presunúť sa v stránke na inú sekciu.

Atribút má parameter href, ktorým označujeme odkaz, kam nás má presmerovať. Poznáme:

  • relatívny odkaz - je vyjadrený bez domény napr.: "/podme-spolu-tvorit-web"
  • absolútny odkaz - je vyjadrený vrátane domény napr.: "http://www.akotvoritweb.sk/podme-spolu-tvorit-web"
<a href="/podme-spolu-tvorit-web">predchádzajúci článok (relatívny odkaz)</a><br> 
<a href="http://www.akotvoritweb.sk/podme-spolu-tvorit-web">predchádzajúci článok (absolútny odkaz)</a><br> 
<a href="/podme-spolu-tvorit-web" target="_blank">predchádzajúci článok (otvorí v novom okne)</a><br> 
<a href="#odkrytie-skratky-html">sekcia odkrytie skratky HTML</a>

predchádzajúci článok (relatívny odkaz)
predchádzajúci článok (absolútny odkaz)
predchádzajúci článok (otvorí v novom okne)
sekcia odkrytie skratky HTML

Formátovacie značky bold, italic, underline

- bold, i - italic, u - underline

Sú základné formátovacie značky. K tučnému písmu a kurzíve existujú ešte dve značky <strong></strong>, <em></em> ktoré sú rovnaké, ale majú väčší sémantický význam (tzn. že chcem niečo viac zdôrazniť).

<p>Jednoduchý text v paragrafe. <b>Tento je tučný</b>, <i>tento je šikmý</i> a <u>tento podčiarknutý</u>.<br><strong>Toto je dôležitý text.</strong> <em>Toto je sémanticky viac zdôraznený text.</em></p>

Jednoduchý text v paragrafe. Tento je tučný, tento je šikmý a tento podčiarknutý.
Toto je dôležitý text. Toto je sémanticky viac zdôraznený text.

Zoznamy

ul - unordered list (neusporiadaný zoznam)
ol - ordered list (usporiadaný zoznam)

<p>Moje obľúbené farby:</p>
<ul>
	<li>zelená</li>
	<li>modrá</li>
	<li>červená</li>
</ul>
<p>Návod na praženicu:</p> <ol> <li>na panvici roztopíme maslo</li> <li>pridáme vajíčka</li> <li>za stáleho miešaňia opražíme "na mäkko"</li> </ol>

Moje obľúbené farby:

  • zelená
  • modrá
  • červená

Návod na praženicu:

  1. na panvici roztopíme maslo
  2. pridáme vajíčka
  3. za stáleho miešaňia opražíme "na mäkko"

Obrázky

Obrázkov je všade plný internet. Obrázky sa píšu do značky <img src="odkaz"> a je to jedna zo značiek, ktorá nemá ukončovaciu značku. Obsahuje atribút src ktorý môže odkazovať na ľubovoľný obrázkový súbor typu jpg, png, bmp, ico, gif... Môže odkazovať napríklad aj na vektorový súbor typu svg. 

Obrázok obsahuje ešte aj povinný atribút alt, ktorým popisujeme, čo sa na obrázku nachádza. Je dôležitý pre vyhľadávače a nevidiacich.

<img src="/data/test-all-the-things.jpg" alt="Otestuj všetky veci">

Otestuj všetky veci

Bloky

Hlavné sekcie webu môžeme rozdeliť do blokov. Aktuálne sa najčastejšie ešte stále používa iba značka <div></div>, ktorá jednoducho označuje blok.

HTML5 má viacero značiek, ktorým môžeme dať sémantickejší význam. Sú to značky:

  • <header></header> - hlavička pre dokument, alebo sekciu
  • <nav></nav> - hlavná navigácia na webe
  • <section></section> - tematické zoskupenie obsahu
  • <aside></aside> - element mimo hlavného obsahu (napr. bočný panel)
  • <article></article> - nezávislý obsah, typicky používané pri výpise viacerých blogových článkov
  • <footer></footer> - päta pre dokument alebo sekciu

Tabuľky

Tabuľky používame ak máme viacero údajov, ktoré chceme rozdeliť do riadkov a stĺpcov.

<p>Štatistika používania prehliadačov na Slovensku</p>
<table class="table table-bordered">
	<thead>
		<tr>
			<th>Prehliadače</th>
			<th>Chrome</th>
			<th>Firefox</th>
			<th>Internet Explorer</th>
			<th>Opera</th>
			<th>Safari</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>December 2015</td>
			<td>42%</td>
			<td>22%</td>
			<td>19%</td>
			<td>5%</td>
			<td>4%</td>
		</tr>
		<tr>
			<td>November 2015</td>
			<td>50%</td>
			<td>25%</td>
			<td>9%</td>
			<td>6%</td>
			<td>4%</td>
		</tr>
		<tr>
			<td>Október 2015</td>
			<td>47%</td>
			<td>30%</td>
			<td>8%</td>
			<td>6%</td>
			<td>4%</td>
		</tr>
	</tbody>
</table>

Štatistika používania prehliadačov na Slovensku

Prehliadače Chrome Firefox Internet Explorer Opera Safari
December 2015 42% 22% 19% 5% 4%
November 2015 50% 25% 9% 6% 4%
Október 2015 47% 30% 8% 6% 4%

 

Bonus - pridanie youtube videa do svojho webu

Youtube má jednoduchú možnosť zdieľať ich videá na svojom webe. Otvorte si ľubovoľné video, ktoré chcete zdieľať. Postupujte podľa krokov na obrázku:

<iframe width="560" height="315" src="https://www.youtube.com/embed/8eCWSWUvTtQ" frameborder="0" allowfullscreen></iframe>

Nabudúce si ukážeme CSS kaskádové štýly do hĺbky.