<P>A toto je prvy odstavec mojho prveho dokumentu. Aby bol pekne oddeleny od druheho, pouzijem na konci ukoncovaci znak paragrafu.</P>

<P> Druhy odstavec bude pekne oddeleny od prveho. Tu sa zaroven konci moj prvy dokument.</P>

V mieste, kde chcem mat odkaz na iny dokument, vlozim prikaz

kde adresa je URL adresa dokumentu, na ktory smeruje odkaz a text_odkazu je usek textu, ktory sa vztahuje na tento dokument (pri zobrazeni je odliseny od okoliteho textu). Miesto tohoto textu moze byt aj obrazok: chcem napriklad prepojit anglicku verziu nejakeho dokumentu s prislusnou slovenskou verziou. Potom do anglickej verzie vlozim text:

Pri zobrazeni grafickym prehliadacom sa objavi slovenska zastava (je v subore zsk.gif); pri zobrazeni textovym prehliadacom sa objavi iba alternativny text Slovak. V uvedenom priklade som predpokladal, ze subor zsk.gif je v tom istom adresari ako dokument, do ktoreho som vlozil uvedeny odkaz. Pouzitie uvedeneho prikazu v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vyzera zlozitejsi HTML dokument? .

Kliknem na tlacidlo Link a v okne Link to another file zadam URL adresu dokumentu, ku ktoremu smeruje odkaz. V polozke URL Prefixes si mozem navolit preddefinovany typ protokolu. Ked neviem adresu (alebo je dlha a mne sa ju nechce celu vypisovat), kliknem na tlacidlo Browse a vyhladam subor na lokalnom disku. Ked adresu potvrdim kliknutim na OK , prikaz sa zaradi do textu. Ked v okne Link to another file kliknem na tlacidlo s modrou sipkou dole (vedla OK ), objavi sa rozsirene okno. Aktualny zoznam pouzitelnych URL adries mam k dispozicii v combo-boxe (cast okna s textom a tlacidlom so sipkou dole) pod nadpisom You can select a URL from the list . Novozadavane adresy sa zaradia automaticky do tohoto zoznamu. Aktualny zoznamu URL adries mozem ulozit do suboru (ma priponu .url ) kliknutim na tlacidlo Save . Kliknutim na tlacidlo Open file mozem vybrat iny subor a jeho obsahom premazat aktualny zoznam URL adries. Tieto subory mam moznost vytvarat/editovat, ked v menu zvolim URL a vyberiem polozku Edit/Build HTML Assistant URL files (to iste dosiahnem stlacenim klavesy F6). Otvori sa okno URL manager , v nom zvolim File a z ponuky vyberiem Open HTML Assistant URL File . Objavi sa okno Select HTML Assistant URL File , v ktorom zadam pozadovany subor *.url (pripadne adresar, kde sa nachadza). V okne URL manager potom editujem subor.

Ako zadam odkaz na zvolene miesto v aktualnom dokumente?

Obvykle rozclenim zverejnovane informacie do relativne malych, prehladnych, navzajom poprepajanych dokumentov. Niekedy je vsak predsa len ucelne ulozit rozsiahlejsi text (napr. sprava o nejakom projekte) do jedineho dokumentu.

V takomto pripade potrebujem zadavat aj odkazy smerujuce z jedneho miesta rozsiahleho dokumentu na ine. Na miesto, kam chcem smerovat odkaz (napr. zaciatok nejakej kapitoly spravy), vlozim napriklad text:

a na miesto, odkial chcem viest odkaz vlozim text:

Pouzitie uvedeneho prikazu v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vyzera zlozitejsi HTML dokument? .

Ked kliknem na tlacidlo Anchor , objavi sa okno, v ktorom zadam meno odkazu (v predoslom priklade proj), kliknem na OK a do textu sa vlozi <A NAME="proj"></A> . Ked kliknem na tlacidlo Link , objavi sa okno, v ktorom zadam meno odkazu (v predoslom priklade #proj ), kliknem na OK a do textu sa vlozi <A HREF="#proj"></A> .

Ked chcem smerovat odkaz z nejakeho dokumentu na konkretne miesto vnutri ineho dokumentu pouzijem postup analogicky s predoslou kapitolou, len pri zadavani odkazu uvediem aj URL adresu cieloveho dokumentu. V nadvaznosti na priklad z predoslej kapitoly mozem zadat odkaz do dokumentu v subore projekt.html z nejakeho ineho dokumentu (predpokladam, ze obidva subory su v tom istom adresari, a tak namiesto uplneho URL staci uviest meno suboru) napriklad v tvare:

Ked chcem umoznit navstevnikom mnou navrhovanej WWW stranky poslat elektronicku postu na moju adresu, uvediem v zavere dokumentu text typu:

Pouzitie uvedeneho prikazu v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vyzera zlozitejsi HTML dokument?

Mozem vytvorit tri typy zoznamov poloziek. V kazdom z nich su jednotlive polozky odsadene od laveho okraja, kazda dalsia polozka zacina na novom riadku a je oznacena podla typu:

• necislovany zoznam: specialnym znakom (pomlckou, kruzkom, a.p.)
  
• cislovany zoznam: poradovym cislom polozky (cislovanie sa pri zmenach zoznamu automaticky upravi)
  
• zoznam s hlavickou: hlavickou (kratucka charakteristika polozky, neodsadena a pisana zhodnym typom pisma ako text poloziek), text polozky zacina v riadku pod hlavickou.
  

Prave som docital necislovany zoznam s tromi polozkami.

Na zaciatku zoznamu napisem <UL> , teda otvaraciu cast formatovacieho prikazu pre tento typ zoznamu. Pred kazdou polozkou uvediem prikaz polozky <LI> a za nou text polozky. Na konci zoznamu napisem </UL> , teda zatvaraciu cast formatovacieho prikazu.

Aj ked su nove riadky v zdrojovom texte ignorovane, kvoli prehladnosti je vhodne zacat kazdu polozku na novom riadku. Pouzitie uvedeneho prikazu v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vyzera zlozitejsi HTML dokument?

Jednotlive polozky uvediem v texte vzdy na jednom novom riadku. Potom mysou navolim vsetky polozky a kliknem na tlacidlo s uvedenou ikonou. Vsetky potrebne prikazy sa automaticky vlozia do textu. Ked som nenavolil ziadny usek textu, vlozi sa do zdrojoveho textu postupnost <UL><LI></UL>.

Na zaciatku zoznamu napisem <OL> , teda otvaraciu cast formatovacieho prikazu pre tento typ zoznamu. Pred kazdou polozkou uvediem prikaz polozky <LI> a za nou text polozky. Na konci zoznamu napisem </OL> , teda zatvaraciu cast formatovacieho prikazu.

Aj ked su nove riadky v zdrojovom texte ignorovane, kvoli prehladnosti je vhodne zacat kazdu polozku na novom riadku. Pouzitie uvedeneho prikazu v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vytvorim zlozitejsi HTML dokument? .

Jednotlive polozky uvediem v texte vzdy na jednom novom riadku. Potom mysou navolim vsetky polozky a kliknem na tlacidlo s uvedenou ikonou. Vsetky potrebne prikazy sa automaticky vlozia do textu. Ked som nenavolil ziadny usek textu, vlozi sa do zdrojoveho textu postupnost <OL><LI></OL>.

Na zaciatku zoznamu napisem <DL> , teda otvaraciu cast formatovacieho prikazu pre tento typ zoznamu. Pred kazdou hlavickou polozky napisem prikaz <DT> a pred textom polozky uvediem prikaz polozky <DD> . Na konci zoznamu napisem </DL> , teda zatvaraciu cast formatovacieho prikazu.

Aj ked su nove riadky v zdrojovom texte ignorovane, kvoli prehladnosti je vhodne zacat kazdu polozku na novom riadku. Pouzitie uvedeneho prikazu v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vytvorim zlozitejsi HTML dokument? .

V tomto pripade musim vkladat prikazy po jednom tak, ze sa nastavim na pozadovane miesto v texte, kliknem na tlacidlo T a v ponuke, ktora sa objavi kliknem na pozadovany prikaz.

Zoznamy mozem do seba vnarat a to aj do niekolkych urovni. Robim to tak, ze v texte polozky vyssej urovne uvediem vnoreny zoznam tak akoby to bol samostatny zoznam. Aj ked su pri zobrazeni dokumentu nove riadky a odsadenia (pomocou tabelatorov, ci viacerych medzier) v zdrojovom texte ignorovane, kvoli prehladnosti je vhodne zacat kazdu polozku na novom riadku a vnorene zoznamy odsadit. Musim dbat najma na spravny pocet a umiestnenie zatvaracich casti formatovacich prikazov.

Ked vnaram necislovane zoznamy, prehliadac pouzije na roznych urovniach rozne znaky na oznacenie zaciatku polozky.

Pouzitie vnorenych zoznamov v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vytvorim zlozitejsi HTML dokument?

Casto chcem strukturovat WWW stranku na odseky, zacinajuce rozne vyraznymi nadpismi. Mam pre tento ucel sest urovni zvyraznenia ( <H1> je najvyraznejsie, <H6> najmenej vyrazne). Nadpis definujem pomocou paroveho formatovacieho prikazu <H$>Nadpis</H$> , kde $ je cislo od 1 do 6. Sposob zobrazenia jednotlivych prikazov zavisi od prehliadaca, napr. ten isty prikaz v LYNX-e a v Netscape zobrazi text inym sposobom. V Netscape sa nadpis uzavrety v <H1> zobrazi velkym fontom a dalsi text sa oddeli prazdnym riadkom vhodnej sirky. Pre <H2> (nadpis druhej urovne) sa pouzije mensi font, a pod. Pouzitie uvedeneho prikazu v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vytvorim zlozitejsi HTML dokument?

Ked kliknem na jedno z ocislovanych tlacidiel pod nadpisom Heading , zaradi sa prikaz nadpisu prislusnej urovne. Ked som predtym mysou navolil nejaky usek textu, stane sa tento usek nadpisom prislusnej urovne.

Mozem zvolit bud fyzicky typ pisma (vyrazne- bold , kurziva- italics, atd.) alebo logicky typ (citacia-CITE, premenna-VAR, klavesa-KBD, atd.). Odporuca sa pouzivat logicke typy, nakolko sa pocita s vylucenim fyzickych typov z buducich verzii jazyka HTML. Logicke typy su ale "prehliadacovo" zavisle.

V oboch pripadoch uzavriem pozadovany usek textu medzi otvaraci a zatvaraci kod. Najcastejsie asi pouzijem nasledujuce:

Navolim mysou usek textu, v ktorom chcem zmenit typ pisma. Kliknem na tlacidlo Styles a objavi sa ponuka fyzickych aj logickych typov. Po kliknuti na jeden z nich sa navoleny blok vlozi medzi otvaraciu a zatvaraciu cast prislusneho prikazu. Fyzicke typy zvyraznenie, kurziva alebo podciarknutie mozem nastavit po navoleni pozadovaneho textu a kliknuti na prislusne tlacidlo: B , I alebo U .

V jazyku HTML maju tri znaky specialnu ulohu a nemozem ich "len tak" pouzit niekde v texte: < > &. Prve dva z nich pouzivam pri zapise kodov a treti prave pri zadavani specialnych znakov. Napr.:

V menu vyberiem HTML a v dolnej casti ponuky zvolim prislusnu polozku.

Vzhladom k tomu, ze zobrazenie diakritiky je velmi zavisle na pouzitom prehliadaci, radsej sa pouzitiu diakritiky vyhybam. Ked trvam na diakritike, pouzijem ISO Latin24 (8859-2).

Ako zaclenim do textu obrazky?

Zakladnym prikazom pre zaclenenie obrazku do WWW stranky je prikaz <IMG> , ktoreho parameter SRC udava adresu dokumentu, v ktorom je obrazok ulozeny (vo formate GIF alebo XBM - X Bitmap), napr.:

... text pred <;IMG SRC ="obrazok.gif">; text za ...

Ked kliknem na tlacidlo Image , objavi sa okno Display an inline image, v ktorom potrebujem zadat adresu dokumentu, v ktorom je obrazok ulozeny. Ked neviem adresu (alebo je dlha a mne sa ju nechce celu vypisovat), kliknem na tlacidlo Browse a vyhladam subor na lokalnom disku. Vybrany obrazok sa mi objavi v okne Image Preview (ked je v nadradenom okne Display an inline image zaskrtnuta volba Preview ). Ked obrazok potvrdim kliknutim na OK , prikaz sa zaradi do textu. Kliknutim na Browse mozem vybrat inu adresu dokumentu s obrazkom.

Prikaz <IMG> moze mat aj dalsie parametre, ich vyznam je uvedeny v odpovediach na dalsie otazky.

Dalsie parametre zaradim do prikazu tak, ze v okne Display an inline image kliknem na tlacidlo s modrou sipkou dole (vedla OK ). Objavi sa rozsirene okno. Vyznam jednotlivych poloziek bude vysvetleny v dalsich odpovediach.

Ked pouzivam textovy prehliadac (napr. napriklad LYNX), ziskavam informacie na obrazovke iba v textovej podobe. Na mieste obrazkov sa objavi iba text [IMG] alebo [INLINE] . Ked dany obrazok ma iba ilustracny charakter, tento sposob je neelegantny, ale prijatelny. Ked vsak obrazok nesie podstatnu informaciu a najma ked je sucastou odkazu, je ziaduce doplnit v parametri text, charakterizujuci dany obrazok. Ked napriklad v slovenskej verzii dokumentu chcem mat odkaz do anglickej verzie, potom pouzijem prikaz:

ktory v pripade grafickeho prehliadaca zobrazi odkaz ako anglicku vlajku (ulozenu v subore zuk.gif ) a v pripade textoveho prehliadaca ako text English .

Ked pouzijem prikaz v tvare, uvedenom na zaciatku kapitoly Ako zaclenim do textu obrazky? , potom sa obrazok zaradi presne na to miesto v texte, kde je prikaz zapisany. Spodny okraj obrazku ja na tej istej urovni ako spodny okraj textu pred aj za nim. Ked pozadujem, aby stred obrazku bol na urovni spodneho okraja textu, doplnim prikaz o prislusny parameter:

riadkovanie textu sa rozsiri v oboch pripadoch tak, ze ani riadok nad ani riadok pod obrazkom donho nezasahuju.

Ked pouzijem parameter ALIGN=right alebo ALIGN=left, obrazok sa zobrazi uplne vpravo/vlavo a priestor vedla neho sa vyplni textom s nezmenenym riadkovanim. Obrazok bude tesne pod riadkom, v ktorom je usek textu, kde je prikaz zapisany.

Ked chcem, aby bol obrazok zaradeny presne na mieste prikazu a aby priestor vedla neho nebol vyplneny textom, zadam za prikazom pre zaradenie obrazku prikaz <BR CLEAR>.

Rozsiahla kniznica pomocnych obrazkov bola vytvorena na Katedre kybernetiky a umelej inteligencie na Technickej Univerzite v Kosiciach. Je dostupna na adrese http://bela.fei.tuke.sk/gifs/. Avsak POZOR! Ak sa mi niektory obrazok zapaci, skopirujem si ho do svojho adresara a vo svojom dokumente pouzivam odkaz na svoju kopiu. Nikdy nepouzivam odkazy priamo do kniznice !! Ak je totiz takychto pouzivatelov viac, natahovanie obrazkov znacne spomali zobrazenie mojho dokumentu, ba niekedy sa obrazok ani nemusi zobrazit.

Pomocou parametrov HEIGHT a WIDTH v prikaze <IMG> mozem predefinovat povodny rozmer obrazku. Rozmery sa udavaju v jednotkach pouziteho zobrazenia. Napr. ked je pouzite zobrazenie 800*600, potom HEIGHT=60 WIDTH=80 predstavuje rozmery obrazku, rovne v obidvoch smeroch 1/10 obrazovky. Rozmery mozem udavat aj v percentach (100% je rozmer celej obrazovky v danom smere).

Nastavenie obrazku na pozadie, pripadne zmena farby pozadia a pisma (pozri Ako mozem nastavit farbu pozadia a pisma WWW stranky? ) je sucastou pripravovaneho standardu HTML 3, a preto nie vsetky prehliadace akceptuju tieto parametre. Obrazok mozem umiestnit na pozadie pomocou parametra BACKGROUND prikazu . Napriklad <BODY BACKGROUND="mramor.gif"> sposobi, ze sa pozadie vyplni obrazkom mramor.gif. Zvycajne obrazok nepokryje cele pozadie, preto sa pouzije viackrat v horizontalnom aj vertikalnom smere. Z toho dovodu by mala horna hrana obrazku nadvazovat na spodnu a lava na pravu.

Preddefinovane obrazky a vzorky mozem najst napriklad v kniznici obrazkov na http://bela.fei.tuke.sk/gifs/. POZOR! Pre odkazy na vzorky plati to iste co pre pomocne obrazky z casti Existuju kniznice pomocnych obrazkov? .

Pouzijem parametre prikazu . Okrem parametra BACKGROUND (pozri Ako vyplnim pozadie WWW stranky obrazkom alebo vzorkou? ) moze mat prikaz nasledovne parametre, pomocou ktorych je mozne nastavit:

Kazdy z tychto parametrov zadavam v tvare #RRGGBB, kde RR je hexadecimalna hodnota cervenej zlozky, GG zelenej a BB modrej. Maximalna hodnota pre vsetky dvojice je FF, t.j. 255 desiatkovo. (napriklad syto zlta farba bude mat kod #FFFF00, t.j. FF hexadecimalne je 255 desiatkovo pre cervenu aj zelenu zlozku, petrolejovo modra ma kod #408080 kde 40 je 64 desiatkovo pre cervenu, a 80 je 128 desiatkovo pre zelenu a modru).

Pouzitie prikazu nastavenia farieb v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vytvorim zlozitejsi HTML dokument?

V menu vyberiem Special a navolim polozku Background Assistant (z klavesnice pomocou F5 ). Otvori sa okno BACKGROUND ASSISTANT a v nom mozem navolit pre jednotlive objekty pozadovane farby, pripadne si vybrat vhodny obrazec pre pozadie a overit si ich v testovacom okne. Ked kliknem na tlacidlo OK, prislusny HTML prikaz sa zaradi to textu.

Konce riadkov, uvedene v zdrojovom texte su prehliadacom ignorovane. Ked chcem zacat novy odstavec, zadam prikaz <P> a text pokracuje na novom riadku a je oddeleny od predchadzajuceho textu jednym prazdnym riadkom.

Ked kliknem mysou na tlacidlo s uvedenou ikonou alebo ked stlacim kombinaciu klaves CTRL-P, vlozi sa prikaz <P> (v zavislosti na volbe aj ako parovy, pripadne aj s parametrami - pozri zaver kapitoly Ako vyzera uplne jednoduchy HTML dokument? a kapitolu Mozem zarovnat okaje textu? ).

Ked chcem iba zacat novy riadok (bez volneho riadku), pouzijem prikaz <BR>.

Kliknem na tlacidlo T a v ponuke, ktora sa objavi kliknem na prikaz <BR>.

Ked chcem oddelit niektore casti dokumentu vodorovnou ciarou na sirku celej plochy, pouzijem prikaz <HR>. Pouzitie uvedeneho prikazu v ramci konkretneho dokumentu ilustruje priklad v kapitole Ako vytvorim zlozitejsi HTML dokument?

Kliknem na tlacidlo T a v ponuke, ktora sa objavi kliknem na pozadovany prikaz. Prikaz <HR> mozem vlozit aj z klavesnice stlacenim kombinacie CTRL-L.

Farebna alebo inak vzorovana ciara je vlastne uzky obrazok. Kniznice obrazkov zvycajne obsahuju velke mnozstvo ciar, ktore je mozne pouzit. Ked sa pre niektoru rozhodnem, do svojho dokumentu ju vlozim prikazom:

Vyznam parametrov WIDTH a HEIGHT uz poznam z kapitoly Mozem zmenit rozmer obrazku? . Prikaz <BR> (pozri Ako zacnem novy riadok textu? ) je dobre pouzit, aby sa mi pri roztiahnuti okna prehliadaca nedostal vedla ciary text. Ak chcem mat kratsiu ciaru v strede stranky, pouzijem prikaz <CENTER> (pozri Mozem centrovat text? ).

Niekedy potrebujem vlozit do HTML dokumentu usek textu so zachovanim jeho povodneho formatovania, t.j. s akceptovanim viacerych medzier po sebe, tabelatorov a novych riadkov (napr. zdrojovy text nejakeho programu). Pre tento ucel mozem pouzit parovy formatovaci prikaz <PRE>...</PRE>. Takto ohraniceny text respektuje pri zobrazeni povodne formatovanie, pricom sa pouziva neproporcionalne pismo (napr. znak i je rovnako siroky ako m ).

Ked chcem mat cast textu centrovanu, vlozim ju medzi otvaraciu a zatvaraciu cast prikazu <CENTER>, napr.:

Navolim mysou text, ktory chcem centrovat (aj viac riadkov). Kliknem na tlacidlo Styles a v ponuke, ktora sa objavi vyberiem polozku Center: tym sa navoleny blok vlozi medzi otvaraciu a zatvaraciu cast prislusneho prikazu.

Na centrovanie vsetkych riadkov jedneho odstavca mozem pouzit aj parovy prikaz pre odstavec, v otvaracej casti ktoreho uvediem prislusny parameter: <P ALIGN=center>.

Ked pouzijem pre formatovanie odstavcov parovy prikaz <P>, mozem v nom pomocou parametra ALIGN definovat nasledujuce sposoby zarovnania okrajov odstavca (parametre, oznacene hviezdickou su v Netscape 2.0 aj v LYNX-e ignorovane):

Na dalsej strane je uvedeny zdrojovy text dokumentu, ktory obsahuje vacsinu prikazov jazyka HTML, uvedenych v tejto prirucke. Jedna sa o skratenu verziu realneho dokumentu, prezentujuceho ciastkovu ulohu projektu Tempus, zaoberajucu sa pripravou kurzov pre pracu s Internetom. Dalej je uvedeny dokument zobrazeny pomocou textoveho prehliadaca LYNX a pomocou grafickeho prehliadaca Netscape.

1. Osoby zodpovedne za pripravu kurzu
2. Organizacia kurzu
3. Osnova kurzu

• Julius Csonto (Email: csonto@ccsun.tuke.sk )
• Jan Sandrej

Ciele kurzu:

Oboznamenie ucastnikov kurzu s vyuzitim jednotlivych sluzieb Internet-u v roznych oblastiach cinnosti. Zvlastna pozornost sa venuje informaciam z oblasti ochrany zivotneho prostredia.

Struktura kurzu:

Uvodna cast:

Vseobecny opis jednotlivych sluzieb Internet-u a obvyklej strategie ich pouzivania v rozsahu a hlbke podla typu kurzu.

Prakticka cast:

Ucastnici sa priamo za terminalom oboznamia s jednotlivymi sluzbami Internet-u: prvy pristup, bezna praca, specialne moznosti, nastavenie volitelnych parametrov.

Poziadavky na ucastnikov kurzu:

U zaciatocnikov sa predpoklada zakladna znalost prace s pocitacom s pouzitym OS (Unix, Windows). U pokrocilych sa predpokladaju okrem toho aj zakladne znalosti prace s Internet-om: posta, WWW.

• Historia Internet-u
• Vzdialeny terminal (Telnet)
• Elektronicka posta
  • Elektronicka korespondencia
    • Prijimanie a odosielanie sprav
    • Archivacia korespondencie
    • Aliasy
  • Diskusne kluby - Mailing lists (Listserver)
• Elektronicke casopisy - News (Usenet)
• Prenos suborov (ftp)
• Databazovo orientovane sluzby
  • Pouzitie celosvetovych databaz of dokumentov (WAIS)
  • Hladanie v Internet-e (X.500, NetFind atd.)
• Informacne sluzby
  • Znakovo orientovane informacne sluzby (Gopher)
  • Hypertext a hypermedialne informacne sluzby (WWW)