Základy HTML
HTML - Hypertext Markup Language Je jazyk pre tvorbu dokumentov, ktorý definuje vzhľad textu (veľkosť nadpisov, použité fonty, veľkosť písma,...) Bol vyvinutý za účelom publikovania dokumentov na World Wide Web Pôvodne bol určený pre písanie textu, neskôr sa doplnil o multimediálne prvky ako grafika, hudba, animácie.
Jazyk HTML Zdrojový kód dokumentu písaného v jazyku HTML je prostý text, ktorý je možné upravovať v ľubovoľnom textovom editore. Jazyk HTML je typografickým, čo znamená, že cieľový dokument len popisuje. Interpretácia dokumentu je ponechaná na prehliadač (browser = prehliadač HTML dokumentov). Medzi najznámejšie patria Internet Explorer, Netscape Navigator, Mozila, Opera...)
Príkazy HTML Príkazy jazyka HTML sa nazývajú Tagy. Tagy sú odlíšené od textu pomocou ostrých zátvoriek ”<“ a “>” Príklad tagu <HR> HR = horizontal line – vloží do dokumentu horizontálnu čiaru
Tagy V HTML poznáme dva druhy Tagov: Párové tagy Majú počiatočný a koncový tag. Rozlíšenie koncového tagu od začiatočného je zabezpečené znakom „/“ Príklad: <TITLE>Moja www stránka</TITLE> Oznámi prehliadaču, že názov dokumentu je: „Moja www stránka“
Oznámi prehliadaču koniec riadku. Nepárové tagy Nepárové tagy Neobsahujú koncový tag. Do dokumentu je vložený jediný element, ktorý už nie je deliteľný. Príklad: <BR> Oznámi prehliadaču koniec riadku.
Atribúty HTML tagov HTML tag je možné doplniť pomocou atribútov. Nasledujú za menom príkazu a sú od seba oddelené medzerou. Na ich poradí nezáleží. Hodnota sa atribútom priradí pomocou znamienka „=„ Príklad: <FONT COLOR=RED> Tag oznámi prehliadaču, že farba použitého fontu písma má byť červená.
Prvá HTML stránka Otvorte program Poznámkový blok(Notepad) pomocou Štart®Programy®Príslušenstvo® Poznámkový blok
Prvá HTML stránka <HTML> <HEAD> <TITLE>Moja prvá HTML stránka</TITLE> </HEAD> <BODY> Toto je moja prvá html stránka <BR> </BODY> </HTML>
Prvá HTML stránka Súbor uložte pomocou Súbor®Uložiť Názov súboru zadajte prvahtml.html Kliknite OK Zapamätajte si cestu, kde ste súbor uložili.
Spustiť súbor Súbor si na príslušnom mieste nájdeme a dvojklikom otvoríme. Stránka sa zobrazí cez príslušný preddefinovaný internetový prehliadač. Ak chceme súbor upravovať, klikneme na súbor pravým tlačítkom – otvoriť v programe – poznámkový blok.
Formátovnie textu Otvorte si súbor prvahtml.html v poznámkovom bloku.
ENTER Klávesa ENTER nemá vplyv na formát textu.<BR> Príklad: <BODY> Klávesa ENTER nemá vplyv na formát textu.<BR> </BODY> Výsledok: „Klávesa ENTER nemá vplyv na formát textu.“
MEDZERY V texte sú rôzne medzery. </BODY> Rovnako neovplyvňujú formát textu Príklad: <BODY> V texte sú rôzne medzery. </BODY> Výsledok: V texte sú rôzne medzery.
ODSTAVCE Pomocou <BR> neefektívne <DIV> Text tvoriaci odstavec </DIV> Prejde automaticky na nový riadok ALEBO <P> Text tvoriaci odstavec </P> Prejde automaticky na nový riadok a zároveň jeden riadok vynechá
JUSTIFY – zarovnaný na oba okraje ZAROVNANIE TEXTU ALIGN LEFT - naľavo RIGHT - napravo CENTER – centrovať JUSTIFY – zarovnaný na oba okraje Zarovnanie možno použiť pri <DIV> aj pri <P>.
<DIV ALIGN = LEFT> <DIV ALIGN = RIGHT> <DIV ALIGN = CENTER> <P ALIGN = LEFT> </P> <P ALIGN = RIGHT> <P ALIGN = CENTER>
ÚLOHA: Upravte text do nasledujúceho formátu. Tento odstavec je zarovnaný doľava. Tento odstavec je zarovnaný doprava. Tento odstavec je zarovnaný na stred.
RIEŠENIE: Tento odstavec je zarovnaný doľava. <P ALIGN = LEFT> Tento odstavec je zarovnaný doľava. </P> <P ALIGN = RIGHT> Tento odstavec je zarovnaný doprava. <P ALIGN = CENTER> Tento odstavec je zarovnaný na stred.
<CENTER> Nadpis </CENTER>
<CENTER> Text vycentrovaný na stred pomocou CENTER <CENTER> Text vycentrovaný na stred pomocou CENTER.<BR> <DIV ALIGN=LEFT> Text zarovnaný naľavo. </DIV> A opäť vycentrovaný. </CENTER>
Ďalšie tagy pre formátovanie textu a odstavca <PRE> ...TEXT... </PRE> - Použitie tagu zabezpečí, že text v bude zobrazený rovnako, ako je napísaný v zdrojovom kóde t.j. rešpektujú sa medzery a konce riadkov.
Príklad: Ak je text napísaný v zdrojovom kóde: <PRE> a b c d e f g h i j k l</PRE> Text v prehliadači sa zobrazí tak isto: f g h i j k l
Ďalšie tagy pre formátovanie textu a odstavca <CITE>...TEXT...</CITE> - uvedený text je citát. Bude znázornený kurzívou. <BLOCKQUOTE>…TEXT…</BLOCKQUOTE> Text bude odsadený od oboch okrajov cca 2 cm
Formátovanie písma
Typy písma Každý typ písma má svoj vlastný tag: <B> ... TEXT ... </B> - tučné písmo <I> ... TEXT ... </I> - kurzíva <U> ... TEXT ... </U> - podčiarknuté písmo <STRIKE> ... TEXT... </STRIKE> prečiarknuté písmo <SMALL> ... TEXT... </SMALL> - malé písmo <BIG> ...TEXT...</BIG> - veľké písmo <SUB> ...TEXT...</SUB> - dolný index <SUP> ...TEXT... </SUP> - horný index <TT>...TEXT...</TT> - písmo s pevnou šírkou znaku
Kombinovanie tagov <B> <I> <U> ... TEXT ... </U> </I> </B> Tagy môžeme navzájom rôzne kombinovať. Poradie začiatočných tagov je ľubovoľné. Koncové musia byť zrkadlovým odrazom začiatočných tagov.
Úloha :Vytvorte nasledovný HTML dokument Toto je tučné písmo Toto je kurzíva Toto je podčiarknuté písmo Toto je malé písmo Toto je veľké písmo Toto je horný index Toto je dolný index
<HTML> <HEAD> <TITLE>Druhy písma</TITLE> </HEAD> <BODY> <B>Toto je tučné písmo</B><BR> <I>Toto je kurzíva</I><BR> <U>Toto je podčiarknuté písmo</U><BR> <SMALL>Toto je malé písmo</SMALL><BR> <BIG>Toto je veľké písmo</BIG><BR> <SUP>Toto je horný index</SUP><BR> <SUB>Toto je dolný index</SUB><BR> </BODY> </HTML>
Tag FONT Pomocou tagu FONT je možné zadefinovať veľkosť, farbu a druh písma. Syntax je: <FONT SIZE="veľkost" FACE="druh písma" COLOR=“farba"> ... TEXT ... </FONT>
SIZE="veľkost„ FACE="druh písma„ COLOR=“farba"
SIZE = veľkosť SIZE=veľkost - Definuje buď absolútnu veľkost textu 1 až 7 (1 je najmenšie 7 je najväčšie) alebo relatívne zmenšenie či zväčšenie oproti základnej veľkosti. Príklad: <FONT SIZE=+2>...TEXT...</FONT> - Písmo zväčšené o dve úrovne <FONT SIZE=-1>...TEXT...</FONT> - Písmo zmenšené o jednu úroveň<FONT <FONT SIZE=4>...TEXT...</FONT> - Písmo veľkosti číslo 4
COLOR=“farba" COLOR=“farba" – určuje farbu písma. Je možné použiť meno farby, alebo jeho hexadecimálnu hodnotu. PRÍKLAD: <FONT COLOR=RED>červené písmo </FONT>
FARBY: OZNAČENIE: BIELA WHITE #FFFFFF ŽLTÁ YELLOW #FFFF00 ČERVENÁ RED HEXADECIMÁLNE VYJADRENIE BIELA WHITE #FFFFFF ŽLTÁ YELLOW #FFFF00 ČERVENÁ RED #FF0000 MODRÁ BLUE #0000FF ZELENÁ LIME #00FF00 ŠEDÁ GRAY #808080 ČIERNA BLACK #000000
FARBY: OZNAČENIE TMAVOŽLTÁ OLIVE #808000 FIALOVÁ FUCHSIA #FF00FF HEXADECIMÁLNE VYJADRENIE TMAVOŽLTÁ OLIVE #808000 FIALOVÁ FUCHSIA #FF00FF TMAVOFIALOVÁ PURPLE #800080 TMAVOČERVENÁ MAROON #800000 TMAVOMODRÁ NAVY #000080 TYRKYSOVÁ AQUA #00FFFF TMAVOZELENÁ GREEN #008000
FACE=“písmo" Definuje druh písma. Používajú sa štandartné názvy napr. “Times New Roman CE" Ak používateľ nemá druh písma nainštalovaný, zobrazí sa “default” písmo. Z toho dôvodu je možné, aby sa ako parameter zadalo viac druhov písma. Vyhľadávané budú podľa poradia.
Príklad: <FONT SIZE=4 COLOR=blue FACE=Verada, Times New Roman CE, Arial CE>Text veľkosti č. 4</FONT> V prehliadači sa zobrazí písmo s veľkosťou 4, modrej farby, napísané vo fonte: Verada Ak nie je nainštalovaný druh písma Verada, tak Times New Roman CE Ak nie je k dispozícii Times New Roman CE, tak sa použije Arial CE.
Tag BASEFONT Štandartne je veľkosť písma nastavená na hodnotu 3. To zodpovedá veľkosti číslo 12 v textovom editore Microsoft Word. Umožňuje zadefinovať veľkosť, farbu a druh základného písma. Syntax <BASEFONT size=n color="barva” face=“druh písma">...text...</BASEFONT>
Tag BASEFONT Pre parametre tagu BASEFONT platia rovnaké pravidlá ako pre parametre tagu FONT.
Štandardné nastavenia Atribúty tagu BODY BGCOLOR – pozadie (štandard biela) TEXT – text (čierna) LINK – neprečítaný odkaz (modrá) VLINK – prečítaný odkaz (fialová) ALINK – práve označený odkaz (červená)
<BODY BGCOLOR =BLACK TEXT=WHITE LINK=YELLOW VLINK=GREEN ALINK=RED>
Poznámky: <!- - text poznámky - -> Internet Explorer podporuje: <COMMENT>Toto je text poznámky </COMMENT>
<H1>… text nadpisu 1 …</H1> Nadpisy Nadpisy sú v HTML zadefinované príkazom <Hx></Hx>. Príkaz <H> “header” má šesť úrovní <H1> - <H6> Syntax <H1>… text nadpisu 1 …</H1>
Parametre Tagu <Hn> ALIGN=zarovnanie - zarovnanie môže byť: left - zarovnanie vľavo right - zarovnanie vpravo center - zarovnanie na stred justify - nadpis je zarovnaný na oba okraje.