HTML kód základy
HTML (HyperText MarkUp Language)
Web stránky sú informačné dokumenty, ktoré
môžu obsahovať text, grafiku, zvuk, video, animáciu a 3D grafiku, môžu obsahovať aj odkazy na iné dokumenty.
V roku 1989 vo
švajčiarskom výskumnom stredisku CERN (Európske laboratórium pre nukleárny výskum) v Ženeve definoval Tim Berners-Lee hypertextový systém
pre CERN. O rok neskôr napísal Tim Berners-Lee prvý program pre tvorbu hypertextových stránok, ktoré nazval „World-Wide Web“.
Základom WWW stránok prezentovaných na Internete sú dokumenty založené na báze jazyka HTML (textový značkový
jazyk)
Dokument vo formáte HTML je v podstate súbor textového typu (ASCII), text je doplnený špeciálnymi značkami (tagy),
ktoré špecifikujú príkazy jazyka (môžu byť párové a nepárové).
Súbory so stránkami HTML (XHTML ) mávajú príponu HTML alebo
HTM (štandardom je prípona HTML, príponu HTM používa iba Microsoft). Každý adresár na Internete by mal obsahovať súbor INDEX.HTML –
prehliadač ho bude považovať za východzí a načíta ho prednostne.
Stránky HTML môžeme vytvárať:
- priamo
písaním textu zdrojového kódu (napr. v textovom editore PSPad)
- pomocou špecializovaného softwéru – editorov
HTML napr.: MS Front Page, NVU, KompoZer, Adobe Dreamweaver, a iné
- môžeme ich konvertovať z dokumentov iných
typov
Poznámka 2: Jazyk XHTML má oproti HTML prísnejšie pravidlá, má aj viac možnosti upravenia www stránky.
Značky (Tagy)
Dokument jazyka (X)HTML sa skladá predovšetkým zo značiek (tagov). Značka označuje časť dokumentu, čím
mu dáva význam, t.j. hovorí prehliadaču napríklad: toto je odstavec.
Značky sa zapisujú párovo, t.j.:
- značka otváracia –
hovoríme prehliadaču, kde označená časť začína
- značka uzatváracia – hovoríme prehliadaču, že tu označená časť končí
Zápis: <značka>
Obsah značky – text
</značka>
Poznáme aj nepárové značky. Zápis: <značka /> (pred lomítkom je medzera)
Poznámka
1: značky obyčajne píšeme malými písmenami, ale pre prehľadnosť sú v texte.
Štruktúra dokumentu HTML
<!DOCTYPE
.... > – deklarácia dokumentu html (je stále rovnaká)
<HTML>
<HEAD>
<TITLE> Názov stránky
</TITLE>
</HEAD>
<BODY>
Vlastný obsah WWW stránky
</BODY>
</HTML>
dokument je uzavretý medzi značkami <HTML> a
</HTML>, hlavičku ohraničujú značky <HEAD> a </HEAD>,
telo dokumentu je medzi značkami <BODY> a </BODY>
Príkazom
TITLE sa zobrazuje text, ktorý bude umiestnený na titulnej lište okna umiestňuje sa do hlavičky
Formát:
<TITLE> text </TITLE>
Príkaz BODY
plní dve
funkcie:
- uzatvára do seba celú vlastnú stránku
- definuje vlastnosti stránky
syntax:
<BODY background=“...“ bgcolor=“...“ text=“...“ link=“...“ vlink=“...“ alink=“...“
LEFTMARGIN=“nn“ TOPMARGIN=“nn“ >
......vlastný obsah stránky.....
</BODY>
BACKGROUND – obsahuje meno súboru, ktorý vyplní pozadie stránky, najčastejšie sa používa
GIF, JPG (JPEG)
BGCOLOR – farba pozadia stránky
TEXT – základná farba textu (implicitne je čierna)
LINK – farba ešte nenavštíveného odkazu
VLINK – farba navštíveného odkazu, implicitne modrá, hex. 800080
ALINK – farba aktuálneho odkazu t.j. sfarbenie odkazu v okamihu, keď sa na odkaz klikne myšou, implicitne hex. FF0000
LEFTMARGIN – udáva koľko pixelov od ľavého a pravého okraja začína zobrazenie stránky
TOPMARGIN – udáva koľko
pixelov od horného a dolného okraja začína zobrazenie stránky
Práca s textom
Nadpisy
HTML definuje šesť úrovní preddefinovaných nadpisov označených ako H1 až
H6
H1 ja najväčší, H6 najmenší (veľmi sa nepoužíva)
Formát:
<H1>
vložený nadpis </H1>
...
<H6> vložený nadpis
</H6>
nadpis môžeme aj zarovnávať
ALIGN=”LEFT/CENTER/RIGHT/JUSTIFY”
Zarovnať môžeme vľavo/na stred/vpravo/na oba okraje stránky
napr. <H1 ALIGN=”CENTER”> nadpis je vycentrovaný </H1>
Formátovanie textu
Text bez formátovacích charakteristík sa nastavuje ako (base font), základným písmom je Times Roman (patkové
písmo)
<STRONG> text </STRONG> tučné písmo
<I> text </I> kurzíva
<U> text
</U> podčiarknuté písmo
<STRIKE> text </STRIKE>
preškrtnuté písmo
<SUB> text </SUB> dolný index
<SUP> text </SUP> horný index
<BR
/> slúži k zalomeniu riadka, je to nepárový tag
<P> text
</P> slúži na vytvorenie odstavca
<P ALIGN=”LEFT/CENTER/RIGHT”>
text </P> - zarovnanie odstavca
FONT
mení veľkosť, farbu a font písma
<FONT [SIZE="x"]
[COLOR="#RRGGBB"] [FACE="font"]> text </FONT>
SIZE=”0..7“ veľkosť
písma
COLOR=”red” farba písma červená
FACE=”Arial” názov fontu
Veľkosť písma
môže byť zadaná absolútne alebo relatívne. Absolútna veľkosť je číslo v rozmedzí od 1 až 7. Prednastavená veľkosť normálneho písma
je 3. Relatívna veľkosť je číslo začínajúce plus alebo mínus a vzťahuje sa k veľkosti písma
zadaného tagom (značkou) <BASEFONT>. Pokiaľ nie je uvedený vzťahuje sa k normálnej veľkosti písma.
Pr.:
<FONT SIZE=”+2”>písmo zväčšené o dve úrovne </FONT>
Farba písma:
AQUA (jasná tmavozelená) BLACK (čierna)
BLUE (modrá) FUCHSIA (anilínová červená)
GRAY (sivá) GREEN (zelená)
LIME (citrónová zelená) MAROON (gaštanová)
NAVY (tmavá modrá) OLIVE (olivová)
PURPLE (purpurová)
RED (červená)
SILVER (strieborná) TEAL (tmavá modrozelená)
WHITE (biela) YELLOW (žltá)
Odkazy a obrázky
Vloženia
hypertextového odkazu
Používa sa párová značka: <A> text </A>
s parametrom href=“....“
Definuje odkaz na iný dokument, alebo na inú časť toho istého dokumentu, na
obrázok, alebo E mail.
<A href=”URL_adresa dokumentu” NAME=”interný odkaz” TITLE=”popis
stránky” TARGET=”meno okna”> zobrazený text </A>
Pr:
<A
href=http://www.svcmi.sk/index.html> skok na stránku zoznam </A>
<A href=”mailto:meno@pocitac.sk”> napíš mi!
</A>
<A href=”#začiatok”> skok na začiatok </A>
v tomto prípade musí byť vložené niekde
v dokumente <A NAME=“začiatok”</A>
Vloženie obrázka
Na vloženie obrázka sa
používa nepárová značka <IMG> s parametrom SRC=“...“
Napr.:
<IMG src=”obr1.gif”> obrázok umiestnený priamo v adresári
v ktorom je
aktuálny dokument
<IMG src=“../gifs/obr2.gif“> obrázok
umiestnený v adresári gifs vrátane celej
cesty
<IMG
src=”http://www.cpress.sk/gifs/obr3.gif obrázok zadaný s celou URL
adresou
Ďalšie
parametre:
ALIGN="top/middle/bottom/left/right" zarovnanie obrázka hore/na stred
/dole/vľavo/vpravo
HEIGHT=”celé kladné číslo” výška obrázku v pixeloch
WIDTH=”celé kladné číslo šírka obrázku v pixeloch
BORDER=”celé kladné číslo”
šírka rámčeka okolo obrázka
HSPACE=” celé kladné číslo“
voľný priestor v pixeloch po ľavej a pravej strane obrázku
VSPACE=”celé kladné číslo“
voľný priestor v pixeloch nad a pod obrázkom
ALT=”text” text, ktorý bude
zobrazený po načítaní obrázka
Nečíslované zoznamy
Jednoduchý zoznam vytvoríme pomocou
<UL type=“nnn“> n môže byť: disk
<LI> prvá položka
</LI> square
... circle ...
<LI> n tá položka
</LI>
</UL>
podobné príkazy ako
UL sú MENU a DIR
Číslované zoznamy
<OL type=”nnn”> kde n znamená:
<LI> prvá položka
</LI>
A veľké písmená
a malé
písmená
<LI> n tá položka I rímske číslice
</OL>
I malé rímske číslice
1 latinské číslice
ak potrebujeme
k definovanému pojmu uviesť aj jeho vysvetlenie používame
<DL>
<DT> pojem 1 <DD> vysvetlenie pojmu 1
<DT>pojem 2 <DD> vysvetlenie pojmu
2
</DL>
TABUĽKY
<TABLE ALIGN=”LEFT/CENTER/RIGHT” BACKGROUND=”url” BGCOLOR=”farba”
BORDERCOLOR=”farba” BORDER=”n” CELLPADDING=”n” CELLSPACING=”n” FRAME=”frame-type” RULES=”rule-style”
WIDTH=”n”>
vlastný obsah tabuľky
</TABLE>
BORDER - určuje šírku rámčeka tabuľky v pixeloch, ak nie je definovaný nemá
tabuľka rámček
BORDERCOLOR – farba rámčeka
CELLPADDING –
vzdialenosť medzi okrajom bunky a jej obsahom
CELLSPACING – určuje vzdialenosť medzi bunkami
FRAME – určuje ako vyzerá vonkajší rámček
VOID – odstraňuje vonkajšie rámčeky
ABOVE
– zobrazí rámček iba nad horným okrajom celej tabuľky
BELLOW - zobrazí rámček pod dolným okrajom tabuľky
HSIDES – nad a pod tabuľkou
VSIDES – vľavo a vpravo od tabuľky
LHS – vľavo od tabuľky
RHS –
vpravo od tabuľky
RULES – určuje, ktoré vnútorné rámčeky sa zobrazia
NONE – odstráni
všetky vnútorné
BASIC – zobrazí vodorovné čiary medzi hlavičkou, telom a pätou
ROWS - zobrazí vodorovné
čiary medzi všetkými riadkami
COLS - zobrazí vodorovné čiary medzi všetkými stĺpcami
WIDTH – určuje šírku tabuľky v pixeloch, alebo v percentách veľkosti okna
Riadky tabuľky
<TR ALIGN=”LEFT/CENTER/RIGHT”
BGCOLOR=”farba” BORDERCOLOR=”farba” NOWRAP VALIGN=”MIDDLE/TOP/BOTTOM/BASELINE”>
vlastný obsah
riadku
</TR>
NOWRAP –
určuje, že texty tabuľky nebudú zalomené v riadkoch (nebudú viacriadkové texty), funguje iba vtedy, ak nie je zadaná fixná šírka tabuľky
parametrom WIDTH
VALIGN – určuje zvislé zarovnanie textu
Bunky
tabuľky <TD> text1</TD>
Vodorovná čiara
Na čiaru sa používa tag <HR />
parametre, napr.: size=50%
size=700 px
Napr.: <hr
size=90% />
Jednotlivé príkazy si pozrite na web stránke Kira-testovací
web.html
Zones.sk – Zóny pre každého študenta