Základné "tagy" HTML, vytvorenie prvej stránky

Original výukového textu v českom znení: http://lufik.pescz.cz/html/

Úvodné poznámky

	Súbory HTML vytvárame jedným z týchto spôsobov: v obyčajnom textovom editore ako je Poznámkový blok (Windows) alebo Dokonalý editor (Linux) v HTML editore ako sú Lorenz Graf HTMLtool, NamoWeb Editor, 1stPage (Windows) vo WYSIWYG editore je Nemo Web Editor alebo FrontPage (Windows)
	HTML súbory ukladáme s koncovkou html nebo htm. Koncovka html je preferovaná.
	Úvodný súbor www prezentácie má názov index.html. Potom stačí uviesť v úvodnej internetovej adrese iba adresár, kde je súbor index.html uložený. Napr. lufik.net a súbor index.html se otvorí automaticky.
	Všetky HTML súbory prináležajúce k jednej téme sú uložené v jednom adresári. Potom v odkazoch používáme meno súboru a nepoužívane celú cestu. Napr. o_mne.html, ale nikdy nie C:/MOJA_STRANKA/o_mne.html. Celú cestu i s určením protokolu používáme iba v prípade, že stránka, na ktorú chceme odkázať, je uložená na inom servri alebo v adresári iného užívateľského účtu. Např. http://lufik.net/.
	Pre prechod mezi adresármi používáme nasledujúci zápis: lomítko (/) pre vstup do podadresára, napr. fotky/domcek.jpg alebo fotky/2001/popis.html dve bodky a lomítko (../) pre prechod do rodičovského adresára, teda o úroveň vyššie, napr. ../index/uvod.html respektive ../../fotky.html.

Základná štruktúra HTML dokumentu

Dôležitá poznámka:
pri písaní HTML dokumentu vynechajte mezeru za prvou zátvorkou tagov (značiek)!
např. <HTML> ,<HEAD> atd.

Štruktúra HTML dokumentu je nemenná a je daná takto:

< HTML >

začína vlastný HTML dokument,

< HEAD >

začína hlavičku dokumentu.

< TITLE >Názov dokumentu< /TITLE >

Vo vnútri tohto tagu je uvedený názov (titul) www stránky, ktorý je zobrazený v hornej lište www prehliadača. Bude uvedený v histórii navštívených stránok a niekedy je podla neho dokument nájdený vyhľadávačom www stránek. Tag META nie je povinný:

< META NAME="description" CONTENT="stručný popis obsahu stránky">

pre vyhľadávače www stránok,

< META NAME="keywords" CONTENT="zoznam, kľúčových, slov">

pre vyhľadávač www stránok,

< META HTTP-EQUIV="refresh" CONTENT="počet_sekúnd; URL=nasledujúci.html">

vytvorenie automatickej sekvencie resp. cyklu HTML stránok,
podrobnosti o hlavičke

< /HEAD >

ukončuje hlavičku dokumentu,

< BODY

začiatok tela HTML dokumentu, uvedené atribúty nie sú povinné:

BACKGROUND="obrázok.jpg"

adresa obrázku, který vytvára pozadie stránky,

BGCOLOR="#rrggbb"

nastavuje farbu pozadia stránky, formát #ff0055 - hexadecimálne cifry 0,1,...,9,a,b,c,d,e,f.

TEXT="#rrggbb"

nastavuje farbu textu stránky,

LINK="#rrggbb"

nastavuje farbu ešte nenavštíveného odkazu,

VLINK="#rrggbb"

nastavuje farbu už navštíveného odkazu,

ALINK="#rrggbb"

nastavuje farbu práve aktivovaného odkazu,

>

...

Samotný obsah www stránky

...

< /BODY >

konec tela HTML dokumentu,

< /HTML >

ukončuje HTML dokument.

Príklad:
< HTML >
< HEAD >
< TITLE >Výuková stránka HTML pre študentov stredných škôl.< /TITLE >
< META NAME="description" CONTENT="Výuková stránka HTML pre študentov stredných škôl.">
< META NAME="keywords" CONTENT="HTML, výuka, stredná škola, gymnázium, priemyslovka">
< META HTTP-EQUIV="refresh" CONTENT="20; URL=obsah.html">
< /HEAD >
< BODY BACKGROUND="obrazok.jpg" BGCOLOR="#000000" TEXT="#FF00FF" LINK="#AA0000" VLINK="#BB0000" ALINK="#D6D600">
Vítajte na výukovej stránke HTML pre študentov stredných škôl!
< /BODY >
< /HTML >

Koniec príkladu. Takto to vyzerá

Formátovánie nadpisu

Nadpisy môžu býť použité v šiestich úrovniach mezi tagy < H1 > ... < /H1 >, ... , < H6 > ... < /H6 > :

< H1 >VÝUKA HTML< /H1 >

< h2 >VÝUKA HTML (Hypertext Markup Language)< /h2 >

< h3 >VÝUKA HTML (Hypertext Markup Language)< /h3 >

< h4 >VÝUKA HTML (Hypertext Markup Language)< /h4 >

< h5 >VÝUKA HTML (Hypertext Markup Language)< /h5 >

< h6 >VÝUKA HTML (Hypertext Markup Language)< /h6 >

Formátovánie odstavca

Odstavec je uložený v párovom tagu  ... . Standardné zarovnanie odstavca je doľava. Iné zarovnanie môžeme nastaviť pomocou atribútu (vľavo)

Odstavec je uložený v párovom tagu  ... . Štandardné zarovnanie odstavca je doľava. Iné zarovnanie môžeme nastaviť pomocou atribútu (vpravo)

Odstavec je uložený v párovom tagu  ... . Štandardné zarovnanie odstavca je doľava. Iné zarovnanie môžeme nastaviť pomocou atribútu  (na stred)

Odstavec je uložený v párovom tagu  ... . Štandardné zarovnanie odstavca je doľava. Iné zarovnanie môžeme nastaviť pomocou atribútu  (mezi oba okraje)

Centrovanie časti odstavca, obrázku alebo nadpisu vykonáme tak, že vybranú čásť vložíme mezi tagy < CENTER > ... < /CENTER >.

Rozdelenie textu na riadky zaisťuje automaticky www prohliadač.
Pokiaľ chceme niektorý z riadkov odstavca ukončiť skôr,
urrobíme to pomocou tagov  .

Formátovanie adresy vykonáme jednoducho tagom
< ADDRESS> ... ... < /ADDRESS>.
Položky adresy odrádkujeme  .

Lucia Fialová
Podhradová 13
341 61 Pod Kopcom

Pre výrazné oddelení dvoch častí textu použijeme vodorovnú čiaru. Použijeme tag < HR > s atributmi alebo bez nich:
< HR COLOR="dddd00" > ... určuje farbu čiary

< HR SIZE=10 > ... určuje hrúbku čiary

< HR WIDTH=50 > ... určuje dĺžku čiary v bodoch

< HR WIDTH=90% > ... určuje dĺžku čiary v percntách šírky okna

< HR ALIGN="left" > ... určuje zarovnanie čiary vľavo

< HR ALIGN="center" > ... určuje zarovnanie čiary na stred

< HR ALIGN="right" > ... určuje zarovnanie čiary vpravo

< HR NOSHADE > ... vypne tieňovánie čiary

Druhy písma

Tagy pre určení významu daného textu:
Zvýraznenie kurzívou
< CITE >Citácia kurzívou< /CITE >
Tučne
< CODE >Písací stroj< /CODE >
< SAMP >Ukážka< /SAMP >
< KBD >Klávesnica< /KBD >
< VAR >Premenná< /VAR >

Tagy pro určenie typu písma:
Tučné
Kurzíva
< TT >S pevnou šírkou znaku< /TT >
Podtržené
< S >~~Preškrtnuté~~< /S >
< BIG >Veľké< /BIG >
Malé
X_{Dolný index}
X^{Horný index}

Fonty

Párový tag FONT umožňuje nastaviť FONT písma, jeho absolútnu alebo relatívnu veľkosť, farbu a výber alternatívnych fontov.
Atribút:
nejmenšia veľikosť písma
štandardná veľkosť písma

najväčšia veľkosť písma

 nastavuje relatívnu veľkosť písma vzhˇôladom ku štandardnej veľkosti písma
 nastavuje relatívnu veľkosť písma vzhľadom ku štandardnej veľkosti písma
 nastavuje farbu písma - hexadecimálne cifry

nastavuje farbu písma pomocou mena farby:
black aqua blue fuchsia gray green lime maroon navy olive purple red silver teal yellow white

Určuje zoznam fontov, ktoré sa majú pri zobrazení písma použiť. Pokiaľ prvý font nie je na počítači inštalovaný, použije se druhý font atd. 

Príklad:  TEXT 
 TEXT 
 TEXT 

Znaky

Pre zobrazenie zvláštnych znakov použijeme v texte tieto zápisy:
  pre nedeliteľnú medzeru (je vždy zobrazená v texte)
< pre <
> pre >
& pre &
" pre "
 pre
© pre ©
® pre ®
¶ pre ¶

alebo &#+číslo_znaku+; kde číslo_znaku je poradové číslo znaku v zozname znakov, např. pre — , pre ™ atd.

Predformátovaný text

Pokiaľ chceme zachovať formátovanieí textu rovnaké ako v zdrojovom HTML dokumente, použijeme predformátovaný text. Zachováva umiestnenie textu na danom riadku, počet medzier mezi slovami atď.

< PRE >
   program POKUSY;
   uses crt;
   type pole=array[1..20]of real;
   var i:byte;
     begin
     ...
     end.
< /PRE >

Tvorba odkazov

Jednou zo základných vlastností WWW stránok je možnosť vkládať do dokumentov odkazy na iné dokumenty. Odkazy na iné dokumenty sú WWW prehliadačom zvýraznené zvyčajne inou farbou textu a ten je naviac ešte aj podtrhnutý. Štandardná farba odkazu je modrá, štandardná farba už navštíveného odkazu je fialová.

Vytvorenie odkazu na iný dokument

< A HREF="meno_súboru.html"
ACCESSKEY="prístupová_klávesa"
   - klávesová skratka pre prístup do poľa obvykle v kombinácii s ALT CHARSET="znaková_sada"
   - určuje kódovanie znakovej sady cieľa, preddefinovaná hodnota je "ISO-8859-1"
COORDS="súradnica" - udává súradnice pre tvary v senzitívnej(t.j. citlivej)obrázkovej mape
HREFLANG="jazyk"
   - udává hlavný jazyk cieľa
SHAPE="DEFAULT|RECTANGLE|CIRCLE|POLYGON" 
   - tvar oblasti v senzitívnej obrázkovej mape
TABINDEX="celé_číslo"
   - poradie odkazu pri požití klávesy TAB, záporné číslo deaktivuje odkaz
TARGET="meno_rámu" 
   - určuje, v ktorom ráme se odkazovaný súbor otvorí
TITLE="popis" 
   - popisok odkazu aktivovaný pri nabehnutí myši
TYPE="kódování_MIME" 
   - udává typ kódovánia MIME cieľa
> text alebo obrázok < /A >

Odkaz na túto stránku.
Zabrániť zobrazeniu modrého rámu okolo obrázku môžeme použitím atributu BORDER=0 v tagu < IMG >. Zmena farby odkazu je popísaná na stránce Základná štruktúra HTML dokumentu.

Odkaz do toho istého dokumentu - kotva (návestie)
Ak chceme prejsť na nejaké iné miesto dlhého dokumentu, použijeme:

< A HREF="#menomiesta" ... > text alebo obrázok< /A >

Predtým musíme časť dokumentu s daným miestom pomenovať:

< A NAME="menomiesta" 
    - meno kotvy v dokumente
TITLE="popis" 
    - popisok aktivovaný pri nabehnutí myšky na dané miesto
> text alebo obrázok (vynechává sa!)< /A >

Odkaz na miesto do iného dokumentu
Ak chceme prejsť na určité miesto do iného dokumentu, použijeme:

< A HREF="meno_súboru.html#menomiesta" ... >
text alebo obrázok < /A>

Příklad:
< A NAME="zaciatok" >pmenovanieí začiatku súboru - tento text nepíšte< /A >
< A HREF="prac7.php">Odkaz na tuto stránku.< /A> 
< A HREF="prac1.php#FARBA LINK">Odkaz na návestie v iinom dokumente< /A> 
Dole je ešte jeden odkaz! < A HREF="#zacitaok" > Odkaz na návestie v tom istom dokumente< /A > 
Takto to vyzerá

Základné doporučenia pre návrh webu

	Uvážte, čo je kľúčovou úlohou vašej stránky. Čo je tá jediná vec, kvôli ktorej chcete stránku vytvoriť? Aký užitok alebo akú skúsenosť chcete, aby si návštevník vašej stránky získal?		Myslite na omezenie šírkou písma. Nie sú vaše stránky príliš objemné pre modem 28,8? Uistite sa, že všetky obrázky sú maximálne optimalizované a snažte sa vytvárať malé súbory.
	Kto je váš cieľový návštevník? Pre koho navrhujete svoje stránky? Akú dostanete informáciu na vašu webovú stránku tak, aby z nej mal cieľový užívateľ nejaký úžitok? Pri vytváraní webovej stránky myslite radšej na koncového užívateľa než na seba samého.		GIF nebo JPEG? Neplytvejte šírkou pásma a snažte se omedziť množstvo plnovarebných fotografických JPEG obrázkov. Ak je to možné, využívajte pre všetku grafiku optimalizovaný GIF (pravda ak nechcete vystavovať práve fotografie).
	Aký monitor bude používať vätčšina návštevníkov vašich webových stránok? Zaistite, aby vaša stránka bola dostupná i pre užívateľa s monitorom s rozlišením 640x480.		Optimalizovali ste svoju stránku pre rôzne platformy a rôzne prehliadače? Používajte iba farebné palety, ktoré prohliadačom nevadia a vyhovujú Mac i PC. Taktiež si nezbudnite vyskúšať svoju stránku aspoň s prohliadačomi Netscape a Internet Explorer.
	Dbajte na to, aby vaša navigácia bola logická a ľahko použiteľná pri prechádzaní všetkých stránok vašeho webu.		Naplánujte si postup, ktorý by uživateľa vašej stránky prinútil noriť se stále hlbšie.
	Skôr než presně stanovíte fonty < FONT > značkou alebo pomocou CSS, uistite sa, či sú použiteľné fonty bežné pre väčšinu platforiem (inými slovami: používajte nejbežnějšie, ktorými sú: Verdana, Arial, Helvetica, Courier New, Courier, Times New Roman a Times.)		Používajte iba svoje nápady a vyhýbajte se "požičiavaniu od iných". Porušovanie autorských práv je veľmi vážne obvinenie.
	Vždy udržujte dve kópie svojich webových stránok pre prípad zlyhania serveru alebo stretu s počítačovými hackermi.		Plánujte stratégiu tak, aby vaši návštevníci mali dôvod k návratu!

Preklad do slovenčiny Ing. JANOUŠEK Jaroslav , 21.9.2005