HTML kód základy

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

Poznáme aj nepárové značky. Zápis: (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
> – deklarácia dokumentu html (je stále rovnaká)

Vlastný obsah WWW stránky

dokument je uzavretý medzi značkami <HTML> a >,hlavičku ohraničujú značky <HEAD> a HEAD>, telo dokumentu je medzi značkami <BODY> a >

Príkazom TITLE sa zobrazuje text, ktorý bude umiestnený na titulnej lište okna umiestňuje sa do hlavičky
Formát:

Príkaz BODY
plní dve funkcie:

– uzatvára do seba celú vlastnú stránku

– definuje vlastnosti stránky

syntax:

......vlastný obsah stránky.....

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:

vložený nadpis

...

vložený nadpis

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.

nadpis je vycentrovaný

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
text kurzíva
text podčiarknuté písmo
text preškrtnuté písmo
text dolný index
text horný index

slúži k zalomeniu riadka, je to nepárový tag

text

slúži na vytvorenie odstavca

text

– zarovnanie odstavca

FONT mení veľkosť, farbu a font písma

text
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) . Pokiaľ nie je uvedený vzťahuje sa k normálnej veľkosti písma.
Pr.: písmo zväčšené o dve úrovne

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: text > s parametrom href=“....“
Definuje odkaz na iný dokument, alebo na inú časť toho istého dokumentu, na obrázok, alebo E mail.

zobrazený text

Pr:
skok na stránku zoznam
napíš mi!
skok na začiatok
v tomto prípade musí byť vložené niekde v dokumente

Vloženie obrázka

Na vloženie obrázka sa používa nepárová značka <IMG> s parametrom SRC=“...“

Napr.:

obrázok umiestnený priamo v adresári v ktorom je
aktuálny dokument
obrázok umiestnený v adresári gifs vrátane celej
cesty
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

n môže byť: disk
prvá položkasquare
... circle ...
n tá položka

podobné príkazy ako UL sú MENU a DIR

Číslované zoznamy

kde n znamená:
prvá položka
A veľké písmená
a malé písmená

1. n tá položka I rímske číslice
   

I malé rímske číslice
1 latinské číslice

ak potrebujeme k definovanému pojmu uviesť aj jeho vysvetlenie používame

pojem 1

vysvetlenie pojmu 1

pojem 2

vysvetlenie pojmu 2

TABUĽKY

vlastný obsah tabuľky

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

vlastný obsah riadku

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 text1

Vodorovná čiara

Na čiaru sa používa tag
parametre, napr.: size=50%
size=700 px

Napr.:

Jednotlivé príkazy si pozrite na web stránke Kira-testovací web.html