1. Úvod do HTML

HTML je skratka pre Hypertext Markup Language. Jednoducho povedané, webová stránka je obyčajný textový súbor zakódovaný cez HTML tak, že sa u webových prehliadačov zobrazi všetko ako pekne zformatované.

Význam jednotlivých slov, z ktorých sa skladá skratka HTML:

Hypertext (hypertextový) Text,na ktorý keď kliknete, dostanete sa z jedneho dokumentu na iný. Je to schopnosť webových stránok vzájomne na seba odkazovať.
Markup (Značkovací) Značky,ktore dajú obyčajnému textu štruktúru a formát. Obyčajný text je proste označený pomocou značiek.
Language (jazyk) Poukazuje na skutočnosť, že HTML je považovaný za jazyk… Značkovací jazyk

Ako to celé funguje?

Kód vnútri súboru HTML je uzavretý medzi značkami. (tagy) Tieto značky signalizujú, kde sa má použiť formátovanie, ako má vyzerať rozdelenie slov, aké obrázky sa na určitých miestach použijú atd. Značky alebo tagy môžu byť párové alebo nepárové.

Príklad základnej štruktúry súboru .html:

<!DOCTYPE html>

<html lang="sk-SK">

<head> <meta charset="utf-8" />

<title>Moja prvá webová stránka</title>

</head>

<body>

</body>

</html>

pozn. viditeľný obsah, ktorý uvidíme v prehliadači ako napr. obrázky, text atd... umiestňujeme do oblasti medzi <body> a </body>

Párový tag:

Párový tag niekde začína (začiatok tagu) a niekde končí (koniec tagu) a všetko, čo je medzi, je ovplyvnené (nastavené) tým tagom.

V tomto prípade bude všetko medzi písmenami b zvýraznené hrubým písmom.

<b> hrubé písmo </b>

Príklady párových tagov pre formátovanie písma:

tag	Význam
b	tučné písmo
i	kurzíva
u	podčiarknutie textu
sub	dolný index
sup	horný index
small	zmenšenie textu
big	zväčšenie písma
s	preškrtnutý text
strike	preškrtnutý text
font	písmo

úloha: vyskúšajte si formátovanie písma pomocou rôznych tagov. napr. <b> hrubé písmo </b> atd... môžete si pomôcť videonávodom nižšie

Nepárový tag:

Okrem párových tagov existujú aj nepárové tagy. To sú také, ktoré neoznačujú nejakú časť stránky, ale sú samé o sebe časťou stránky. Dobrým príkladom je obrázok, ktorý má nepárový tag img.

<img>

Príklad celého nepárového tagu pre zobrazenie obrázka a jeho atribútov:

<img src"lietadlo.jpg" " alt="boeing" style="width:400px;height:250px;">

kde img src predstavuje príkaz pre zobrazenie obrázka, lietadlo.jpg je náš obrázok, alt predstavuje popis, ktorý sa nám ukáže pri prechode kurzorom na obrázok a style s parametrami width (šírka) a height (výška) ovplyvňujú veľkosť zobrazeného obrázka.

lietadlo

Príklady nepárových tagov:

br	zlom riadkov
hr	vodorovná čiara

Inštalácia editora PSpad

Videonávod: základná uprava textu v editore PSpad

Základy Html a CSS

1. Úvod do HTML