Html (HyperText Markup Language) je popisný (značkový) jazyk pomocou ktorého popisujete ako budú jednotlivé elementy (texty, obrázky ..) zobrazené v prehliadači.
Html dokument je obyčajný textový dokument.
Na vytváranie html dokumentov stačí ľubovoľný textový editor, ktorý vie ukladať čistý text napr.: NotePad, môžete použit aj iné editory a využiť možnosť exportu do formátu html. Ideálne je ak použijete špecializované editory, určené priamo
na tvorbu html kódu ako napríklad: pspad (volne šíritelný).
Na špecifikovanie zobrazenie elementov v prehliadači používa jazyk html značky (tag). Každá značka je uzatvorená v zátvorkách . Značky môžu byť
párové napr. telo stránky majú začiatok a koniec.
Nepárové napr.
je novy riadok.
Tagy môžu mať aj atribúty, ako napríkladtag body ma atribút bgcolor="#000000" ktorý určuje farbu pozadia.
Koment v HTML:
Ak chceme niečo odkomentovať, čiže nechceme, aby bol nejaký text zobrazený na stránke, tak použijeme:
Každá stránka by mala obsahovať tieto časti:
označenie typu dokumentu, verzia HTML (bežný dokument, striktné HTML 4,01)
alebo
označenie typu dokumentu, verzia HTML (dokument s rámcami)
príklad stránky:
{začiatok html dokumentu}
{začiatok hlavičky}
{meta informácie: autor, kódovanie, popis, ..}
{kódovanie, v ktorom bola stránka vytvorená, napr.: windows1250}
Prvá stránka
{názov stránky, titulok}
{koniec hlavičky}
{začiatok tela dokumentu, zobraziteľná časť}
......
{koniec tela dokumentu}
{koniec html dokumentu}
META značky (META tag)
Meta značky majú význam v tom, že dodávajú informácie špecifické pre danú službu alebo server. Použitie meta značiek patrí k "vyššej" škole HTML, ale napriek
tomu sú dôležité a uvedieme si zopár príkladov.
alebo
poskytuje informáciu o tom, akú znakovú sadu používa váš html dokument, v našom prípade to bude zrejme Windows 1250
pre profesionálnejšie nasadenie je výhodnejšie dodržiavať kódovanie ISO-8859-2. POZOR! Musíte mať editor schopný pracovať a a ukladať texty v tomto kódovaní.
zadáva počet sekúnd, po ktorých sa automaticky načíta dokument na adrese za URL
zadáva informácie pre robotov, ktoré prehľadávajú váš web, použiť môžeme nasledujúce parametre: noindex, index, nofollow, follow, resp. ich ľubovoľnú kombináciu,
navzájom ich oddeľujeme čiarkou
stručný popis stránky
kľúčové slová pre indexovacie služby
zadávame dátum, do kedy je naša stránka platná, po tomto termíne ju indexovacie stroje vyradia z databázy
Užitočný zdroj ohľadom META značiek, vrátane generátora META značiek môžete nájsť na adrese
http://www.submitcorner.com/Guide/Meta/.
Telo stránky (body section)
táto značka má nasledovné doplňujúce atribúty:
BACKGROUND - obrázok na pozadí
BGCOLOR - farba pozadia
TEXT - farba textu
LINK - farba nenavštívených odkazov
VLINK - farba navštívených odkazov
ALINK - farba aktívnych odkazov
Farby sa zadávajú ako trojica hexadecimálnych čísel: #RRGGBB (R - červená, G - zelená, B - modrá)
Zoznami
Nečíslovaný zoznam
Nečíslovaný zoznam sa vkladá párovým tagom UL. Ten obsahuje jednotlivé položky - LI.
- Prvá položka
- Druhá položka
- Tretia položka
Atribút TYPE tagu UL určuje typ odrážky. Môže nadobudnúť hodnotu disc (predvolené, plný krúžok), square (prázdny štvorček) alebo circle (prázdny krúžok).
Číslovaný zoznam
Podobá sa predchádzajúcemu príkladu, ale miesto kruhov a štvorcov používa ako odrážky čísla.
Teraz používame párový tag OL. Položky sa značia rovnako (LI).
- Prvá položka
- Druhá položka
- Tretia položka
Tagu OL môžeme pripísať atribút TYPE, určujúci typ číslovania. Hodnoty sú nasledovné:
Typy číslovania:
1 - arabské číslice
a - malé písmená
A - veľké písmená
i - malé rímske čísla
I - veľké rímske čísla
Pozrite si tento kód.
- Prvá položka
- Druhá položka
- Tretia položka
Nadpisy
Nadpisy maju šesť úrovní. Ich tag je pismenko h s cislom od 1 do 6.
nadpis úrovne jeden
nadpis úrovne dva
nadpis úrovne tri
...
nadpis úrovne šesť
Pozor! Nadpisom s vyšším číslom by mal predchádzať nadpis s nišším číslom, aby bola zachovaná správna štruktúra nadpisov a pomocou čítačov obrazovky sa vieme po nich rýchlo pohybovať.
Rýchly príklad tela stranky:
prvy nadpis
blabla bla text.
prvy nadpis urovne dva
...
druhy nadpis urovne dva
...
nadpis urovne tri
...
dalsi nadpis na urovni jeden
...
Tabulky
Základom je párový tag TABLE. Doňho vkladáme riadky TR a stĺpce TD.
Bunka 1 |
Bunka 2 |
Bunka 1 |
Bunka 2 |
Na ohraničenie Použijeme atribút BORDER tagu TABLE. Hodnotou je šírka rámčeka.
...
Ďalšími dôležitými atribútmi značky TABLE sú SUMMARY (popis tabuľky)a WIDTH (šírka tabuľky).
Použijeme tag CAPTION. Ten sa nachádza priamo v TABLE, aby boli dodržané podmienky úplnej prístupnosti pre jaws a pod...
Za tagom caption ide tag tbody ako telo tabulky.
Ukážka správnej tabuľky
...
V riadku tabuľky TR sa môže nachádzať aj tag TH - záhlavie. Mal by to byť prvý riadok tabulky.
Tag TR má zas atribúty ALIGN (zarovnanie - left, center, right, justify, char) a VALIGN (vertikálne zarovnanie - top, middle, bottom, baseline).
Ukážka správnej tabuľky
Miesto |
Príchod |
Odchod |
Číslo spoja |
Košice |
- |
15:00 |
5612 |
Bratislava |
18:00 |
18:30 |
5947 |
Žilina |
20:50 |
- |
- |
Niekedy sa zíde, aby bunka presahovala cez viac riadkov. Skúsime tagu TD priradiť atribút ROWSPAN s hodnotou 2.
Presahujúca |
Bunka 2 |
Bunka 3 |
Podobne sa správa aj COLSPAN, ale bunka bude presahovať cez stĺpce.
Presahujúca |
Bunka 2 |
Bunka 3 |
Obrázky na stránke:
Tag na vkladanie obrázka je nepárový tag. img
atributy:
1. SRC (source/zdroj) teda nazov alebo cesta k obrazku ak nie je v rovnakom priečinku ako obrázok.
2. ALT - alternatívny popis, aby jaws vedel precitat čo je na obrázku.
príklad:
Odkazy:
ODkaz ma párový tag nazov
Nato aby odkaz niekam ukazoval potrebuje atribút href, ktorý odkazuje na súbor alebo adresu na internete, kde sa človek dostane po stlačení odkazu.
príklad:
moj odkaz na google
podstranka
Pár užitočných tagov
odsek - ...
časť - ...
počíarknutie textu - ...
tučné písmo - ...
centrovanie ...