HTML je ešte stále sa vyvíjajúci jazyk na tvorbu dokumentov, ktoré môžu byť zobrazované prehliadačmi pre WWW. Prvú verziu HTML vytvoril v roku 1989 T.Berners-Lee, v tom čase programátor v stredisku CERN v Ženeve. O štandardizáciu sa snaží WWW konzorcium, ktorého členmi sú významné počítačové firmy a univerzity. V súčasnosti je definovaná verzia HTML 2, avšak aktívne sa pracuje na špecifikácii HTML 3, ktorá obsahuje prostriedky významne rozširujúce možnosti jazyka (tabuľky, spôsoby zarovnávania textu, práca s farbou a pod.). Okrem toho niektoré firmy (ako napr. Netscape) zapracovávajú do jazyka niektoré rozšírenia, ktoré chcú presadiť do jazyka. Treba však upozorniť, že nie všetky prehliadače vedia takéto rozšírenia spracovať (neznáme príkazy prehliadače zvyčajne ignorujú).
V ďalšom sa oboznámim s verziou jazyka HTML, ktorú zobrazuje najpoužívanejší prehliadač - Netscape.
Existujú dva typy príkazov: výkonné a formátovacie. Výkonné príkazy majú v najjednoduchšom prípade tvar <prikaz> . Niektoré príkazy majú jeden alebo viac parametrov. Mená príkazov ako aj mená parametrov sú definované slová, pričom sa nerozlišujú malé a veľké písmená (napr. mená TITLE title Title tItLe sú akceptovateľné mená jediného príkazu). Pre dva parametre má príkaz všeobecný tvar:
<prikaz par1=hodnota1 par2= hodnota2> Formátovacie príkazy sú spravidla párové. Na začiatku úseku formátovaného textu je jeho otváracia časť <prikaz> a na jeho konci zatváracia časť </prikaz> , kde prikaz je meno príkazu. Otváracia časť príkazu môže mať parametre, podobne ako v prípade výkonných príkazov.
Existuje celý rad podporných prostriedkov pre tvorbu HTML dokumentov. Jedným z nich je aj HTML ASSISTANT PRO. V základnej verzii - s ktorou pre v ďalšom uvedené prostriedky jazyka HTML vystačím - je freeware produkt firmy Brooklyn North Software Works . Okno HTML ASSISTANT PRO vyzerá nasledovne:
Tento produkt mi ušetrí mnoho práce pri vkladaní príkazov HTML do pripravovaného textu dokumentu a zníži podstatne aj riziko preklepov. Najviac ho ocením pri vytváraní odkazov na iné dokumenty, pri voľbe pozadia a pri vkladaní obrázkov do textu.
Keď v ďalšom texte narazím na toto logo HTML ASSISTANT PRO, text vedľa neho mi vysvetlí ako použiť tento program k vloženiu práve opisovaného prvku jazyka HTML do textu dokumentu. Keď k tomu potrebujem použiť niektoré tlačidlo bez textového označenia, namiesto loga bude použitá ikona tohoto tlačidla.
Editačné okno pre nový prázdny dokument otvorím kliknutím na toto tlačidlo alebo tak, že v menu File navolím položku New . Kým nový dokument neuložím pod nejakým menom, má v hlavičke uvedené meno Untitled:# , kde # je poradové číslo otvoreného editačného okna. Novovytvorený súbor uložím na disk kliknutím na tlačidlo Save v aktuálnom editačnom okne alebo stlačením kombinácie kláves ALT-S . Otvorí sa štandardné okno Save As , v ktorom zadám meno súboru a adresár, kde sa má uložiť.
Editačné okno pre už existujúci dokument otvorím kliknutím na toto tlačidlo alebo tak, že v menu File navolím položku Open . V hlavičke okna je uvedené meno súboru (aj s cestou k nemu). Upravený súbor uložím na disk kliknutím na tlačidlo Save v aktuálnom editačnom okne alebo stlačením kombinácie kláves ALT-S .
V editačnom okne pripravujem zdrojový text dokumentu v jazyku HTML ako každý iný text. Pomocou menu a tlačidiel v záhlaví hlavného okna programu HTML ASSISTANT PRO mám možnosť vkladať jednotlivé príkazy jazyka HTML oveľa jednoduchšie ako ich zadávaním znak po znaku. Pre komplikovanejšie príkazy mám aj podporu zadávania jeho parametrov.
Kliknutím na tlačidlo Test v aktuálnom editačnom okne alebo stlačením kombinácie kláves Alt-T aktivujem testovací prehliadač. V ňom si môžem overiť vzhľad pripravovaného HTML dokumentu. Do editačného okna sa vrátim kliknutím na tlačidlo To Editor .
Zmenu nastavenia testovacieho prehliadača urobím tak, že v menu File navolím položku Select text browser . Otvorí sa okno Text program is ### , kde ### je meno aktuálneho prehliadača (aj s cestou k nemu). V tomto okne zadám požadovaný prehliadač a adresár, v ktorom sa nachádza.
Štandardná štruktúra HTML dokumentu vyzerá nasledovne (niektoré prehliadače dokážu zobraziť aj dokumenty, ktoré nezodpovedajú štandardnej štruktúre):
<HTML>
<HEAD>
<TITLE> Titulok mojho prveho dokumentu </TITLE>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>
Celý dokument začnem príkazom <HTML> . Je to párový príkaz, a preto ukončím dokument uzatváracou časťou </HTML> .
Z menu vyberiem Command a navolím položku Mark selected text as HTML (na klávesnici stlačím kombináciu CTRL-M).
Dokument uzavretý v príkaze </HTML> má dve časti: hlavičku uzavretú v párovom príkaze <HEAD> a telo ohraničené párovým príkazom <BODY> .
Základnú štruktúru nového HTML dokumentu vytvorím stlačením tlačidla označeného uvedenou ikonou alebo tak, že v menu File navolím položku New . Potom vyberiem z rozšíreného menu Command a navolím položku Display standard document template (prípadne na klávesnici stlačím kombináciu CTRL-W).
Command a navolím položku Mark selected text as HEAD (na klávesnici stlačím kombináciu CTRL-D), Command a navolím položku Mark selected text as BODY (na klávesnici stlačím kombináciu CTRL-Y). Hlavička zvyčajne obsahuje príkaz <TITLE> , v ktorom uvediem názov dokumentu. Tento sa zobrazí v prehliadači v záhlaví okna a taktiež identifikuje dokument v záložke (bookmark).
Názov dokumentu zadám tak, že z menu vyberiem Command a navolím položku Mark selected text as TITLE (prípadne na klávesnici stlačím kombináciu CTRL-T ).
Pri zobrazovaní HTML dokumentu sa medzery a nové riadky nasledujúce za sebou zobrazia ako jediná medzera. Keď chcem rozčleniť text na odstavce, ohraničím ich príkazmi <P> . Tento príkaz môžem použiť aj bez ukončovacej časti </P> . Keď použijem príkaz odstavca ako párový, potom môžem zadať aj parametre, predpisujúc zarovnanie okrajov odstavca (pozri Môžem zarovnať okraje textu? ).
Príkaz odstavca vložím do textu kliknutím na tlačidlo s uvedenou ikonou. Voľbu parametrov vkladaného príkazu <P> a prípadné vloženie prázdnych riadkov do zdrojového textu v HTML urobím nasledovne: V menu vyberiem Options a navolím položku Configure paragraph button , Objaví sa ponuka rôznych formátov odstavca. Zaškrtnutím požadovaných položiek definujem presný tvar príkazu odstavca, ktorý sa bude odteraz vkladať do textu, keď kliknem na tlačidlo s uvedenou ikonou.
Keď chcem zaradiť do textu komentár, ktorý sa pri jeho prezeraní nemá objaviť, použijem nasledovný zápis:
<!-- komentar -->
Navolím myšou text, ktorý chcem umiestniť do komentára (aj viac riadkov). Kliknem na tlačidlo Styles a v ponuke, ktorá sa objaví kliknem na položku Comment : tým sa navolený blok vloží medzi otváraciu a zatváraciu časť príslušného príkazu.
V mieste, kde chcem mať odkaz na iný dokument, vložím príkaz
<A HREF="adresa"text_odkazu></A> kde adresa je URL adresa dokumentu, na ktorý smeruje odkaz a text_odkazu je úsek textu, ktorý sa vzťahuje na tento dokument (pri zobrazení je odlíšený od okolitého textu). Miesto tohoto textu môže byť aj obrázok: chcem napríklad prepojiť anglickú verziu nejakého dokumentu s príslušnou slovenskou verziou. Potom do anglickej verzie vložím text:
Language switch:
<A HREF="slov_verzia.html">
<IMG SRC="zsk.gif" alt="Slovak"></A>
Pri zobrazení grafickým prehliadačom sa objaví slovenská zástava (je v súbore zsk.gif); pri zobrazení textovým prehliadačom sa objaví iba alternatívny text Slovak. V uvedenom príklade som predpokladal, že súbor zsk.gif je v tom istom adresári ako dokument, do ktorého som vložil uvedený odkaz. Použitie uvedeného príkazu v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vyzerá zložitejší HTML dokument? .
Kliknem na tlačidlo Link a v okne Link to another file zadám URL adresu dokumentu, ku ktorému smeruje odkaz. V položke URL Prefixes si môžem navoliť preddefinovaný typ protokolu. Keď neviem adresu (alebo je dlhá a mne sa ju nechce celú vypisovať), kliknem na tlačidlo Browse a vyhľadám súbor na lokálnom disku. Keď adresu potvrdím kliknutím na OK , príkaz sa zaradí do textu. Keď v okne Link to another file kliknem na tlačidlo s modrou šípkou dole (vedľa OK ), objaví sa rozšírené okno. Aktuálny zoznam použiteľných URL adries mám k dispozícii v combo-boxe (časť okna s textom a tlačidlom so šípkou dole) pod nadpisom You can select a URL from the list . Novozadávané adresy sa zaradia automaticky do tohoto zoznamu. Aktuálny zoznamu URL adries môžem uložiť do súboru (má príponu .url ) kliknutím na tlačidlo Save . Kliknutím na tlačidlo Open file môžem vybrať iný súbor a jeho obsahom premazať aktuálny zoznam URL adries. Tieto súbory mám možnosť vytvárať/editovať, keď v menu zvolím URL a vyberiem položku Edit/Build HTML Assistant URL files (to isté dosiahnem stlačením klávesy F6). Otvorí sa okno URL manager , v ňom zvolím File a z ponuky vyberiem Open HTML Assistant URL File . Objaví sa okno Select HTML Assistant URL File , v ktorom zadám požadovaný súbor *.url (prípadne adresár, kde sa nachádza). V okne URL manager potom editujem súbor.
Obvykle rozčlením zverejňované informácie do relatívne malých, prehľadných, navzájom poprepájaných dokumentov. Niekedy je však predsa len účelné uložiť rozsiahlejší text (napr. správa o nejakom projekte) do jediného dokumentu.
V takomto prípade potrebujem zadávať aj odkazy smerujúce z jedného miesta rozsiahleho dokumentu na iné. Na miesto, kam chcem smerovať odkaz (napr. začiatok nejakej kapitoly správy), vložím napríklad text:
<A NAME="proj">Vysledky projektu < /A > a na miesto, odkiaľ chcem viesť odkaz vložím text:
Dosiahnute <A HREF="#proj"> vysledky </A> svedcia o ....
Použitie uvedeného príkazu v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vyzerá zložitejší HTML dokument? .
Keď kliknem na tlačidlo Anchor , objaví sa okno, v ktorom zadám meno odkazu (v predošlom príklade proj), kliknem na OK a do textu sa vloží <A NAME="proj"></A> . Keď kliknem na tlačidlo Link , objaví sa okno, v ktorom zadám meno odkazu (v predošlom príklade #proj ), kliknem na OK a do textu sa vloží <A HREF="#proj"></A> .
Keď chcem smerovať odkaz z nejakého dokumentu na konkrétne miesto vnútri iného dokumentu použijem postup analogický s predošlou kapitolou, len pri zadávaní odkazu uvediem aj URL adresu cieľového dokumentu. V nadväznosti na príklad z predošlej kapitoly môžem zadať odkaz do dokumentu v súbore projekt.html z nejakého iného dokumentu (predpokladám, že obidva súbory sú v tom istom adresári, a tak namiesto úplného URL stačí uviesť meno súboru) napríklad v tvare:
Mal významný podiel na
<A HREF="projekt.html#proj"> vysledkoch </A> projektu.
Keď chcem umožniť návštevníkom mnou navrhovanej WWW stránky poslať elektronickú poštu na moju adresu, uvediem v závere dokumentu text typu:
Pripomienky smerujte prosim na
<A HREF="mailto:csonto@ccsun.tuke.sk"> autora </A> tejto stranky.
Použitie uvedeného príkazu v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vyzerá zložitejší HTML dokument?
Môžem vytvoriť tri typy zoznamov položiek. V každom z nich sú jednotlivé položky odsadené od ľavého okraja, každá ďalšia položka začína na novom riadku a je označená podľa typu:
Práve som dočítal nečíslovaný zoznam s tromi položkami.
Na začiatku zoznamu napíšem <UL> , teda otváraciu časť formátovacieho príkazu pre tento typ zoznamu. Pred každou položkou uvediem príkaz položky <LI> a za ňou text položky. Na konci zoznamu napíšem </UL> , teda zatváraciu časť formátovacieho príkazu.
Aj keď sú nové riadky v zdrojovom texte ignorované, kvôli prehľadnosti je vhodné začať každú položku na novom riadku. Použitie uvedeného príkazu v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vyzerá zložitejší HTML dokument?
Jednotlivé položky uvediem v texte vždy na jednom novom riadku. Potom myšou navolím všetky položky a kliknem na tlačidlo s uvedenou ikonou. Všetky potrebné príkazy sa automaticky vložia do textu. Keď som nenavolil žiadny úsek textu, vloží sa do zdrojového textu postupnosť <UL><LI></UL>.
Na začiatku zoznamu napíšem <OL> , teda otváraciu časť formátovacieho príkazu pre tento typ zoznamu. Pred každou položkou uvediem príkaz položky <LI> a za ňou text položky. Na konci zoznamu napíšem </OL> , teda zatváraciu časť formátovacieho príkazu.
Aj keď sú nové riadky v zdrojovom texte ignorované, kvôli prehľadnosti je vhodné začať každú položku na novom riadku. Použitie uvedeného príkazu v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vytvorím zložitejší HTML dokument? .
Jednotlivé položky uvediem v texte vždy na jednom novom riadku. Potom myšou navolím všetky položky a kliknem na tlačidlo s uvedenou ikonou. Všetky potrebné príkazy sa automaticky vložia do textu. Keď som nenavolil žiadny úsek textu, vloží sa do zdrojového textu postupnosť <OL><LI></OL>.
Na začiatku zoznamu napíšem <DL> , teda otváraciu časť formátovacieho príkazu pre tento typ zoznamu. Pred každou hlavičkou položky napíšem príkaz <DT> a pred textom položky uvediem príkaz položky <DD> . Na konci zoznamu napíšem </DL> , teda zatváraciu časť formátovacieho príkazu.
Aj keď sú nové riadky v zdrojovom texte ignorované, kvôli prehľadnosti je vhodné začať každú položku na novom riadku. Použitie uvedeného príkazu v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vytvorím zložitejší HTML dokument? .
 |
V tomto prípade musím vkladať príkazy po jednom tak, že sa nastavím na požadované miesto v texte, kliknem na tlačidlo T a v ponuke, ktorá sa objaví kliknem na požadovaný príkaz. |
Zoznamy môžem do seba vnárať a to aj do niekoľkých úrovní. Robím to tak, že v texte položky vyššej úrovne uvediem vnorený zoznam tak akoby to bol samostatný zoznam. Aj keď sú pri zobrazení dokumentu nové riadky a odsadenia (pomocou tabelátorov, či viacerých medzier) v zdrojovom texte ignorované, kvôli prehľadnosti je vhodné začať každú položku na novom riadku a vnorené zoznamy odsadiť. Musím dbať najmä na správny počet a umiestnenie zatváracích častí formátovacích príkazov.
Keď vnáram nečíslované zoznamy, prehliadač použije na rôznych úrovniach rôzne znaky na označenie začiatku položky.
Použitie vnorených zoznamov v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vytvorím zložitejší HTML dokument?
Často chcem štrukturovať WWW stránku na odseky, začínajúce rôzne výraznými nadpismi. Mám pre tento účel šesť úrovní zvýraznenia ( <H1> je najvýraznejšie, <H6> najmenej výrazné). Nadpis definujem pomocou párového formátovacieho príkazu <H$>Nadpis</H$> , kde $ je číslo od 1 do 6. Spôsob zobrazenia jednotlivých príkazov závisí od prehliadača, napr. ten istý príkaz v LYNX-e a v Netscape zobrazí text iným spôsobom. V Netscape sa nadpis uzavretý v <H1> zobrazí veľkým fontom a ďalší text sa oddelí prázdnym riadkom vhodnej šírky. Pre <H2> (nadpis druhej úrovne) sa použije menší font, a pod. Použitie uvedeného príkazu v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vytvorím zložitejší HTML dokument?
 |
Keď kliknem na jedno z očíslovaných tlačidiel pod nadpisom Heading , zaradí sa príkaz nadpisu príslušnej úrovne. Keď som predtým myšou navolil nejaký úsek textu, stane sa tento úsek nadpisom príslušnej úrovne. |
Môžem zvoliť buď fyzický typ písma (výrazné- bold , kurzíva- italics, atď.) alebo logický typ (citácia-CITE, premenná-VAR, klávesa-KBD, atď.). Odporúča sa používať logické typy, nakoľko sa počíta s vylúčením fyzických typov z budúcich verzií jazyka HTML. Logické typy sú ale "prehliadačovo" závislé.
V oboch prípadoch uzavriem požadovaný úsek textu medzi otvárací a zatvárací kód. Najčastejšie asi použijem nasledujúce:
kurzíva:| <I>text</I> | fyzický typ |
| <CITE>text</CITE> | citácia knihy, autora | premenná, meno súboru |
| <B>text</B> | fyzický typ |
| <STRONG>text</STRONG> | zvýraznenie textu |
neproporcionálne písmo
| <TT>text</TT> | fyzický typ |
| <CODE>text</CODE> | kód programu |
| <KBD>text</KBD> | text na klávese (napr. HOME) |
Navolím myšou úsek textu, v ktorom chcem zmeniť typ písma. Kliknem na tlačidlo Styles a objaví sa ponuka fyzických aj logických typov. Po kliknutí na jeden z nich sa navolený blok vloží medzi otváraciu a zatváraciu časť príslušného príkazu. Fyzické typy zvýraznenie, kurzíva alebo podčiarknutie môžem nastaviť po navolení požadovaného textu a kliknutí na príslušné tlačidlo: B , I alebo U .
V jazyku HTML majú tri znaky špeciálnu úlohu a nemôžem ich "len tak" použiť niekde v texte: < > &. Prvé dva z nich používam pri zápise kódov a tretí práve pri zadávaní špeciálnych znakov. Napr.:
| < | menší než | < |
| > | väčší než | > |
| & | ampersand | & |
| " | úvodzovky | " |
| | pevná medzera | |
| © | copyright | © |
V menu vyberiem HTML a v dolnej časti ponuky zvolím príslušnú položku.
Vzhľadom k tomu, že zobrazenie diakritiky je veľmi závislé na použitom prehliadači, radšej sa použitiu diakritiky vyhýbam. Keď trvám na diakritike, použijem ISO Latin24 (8859-2).
Základným príkazom pre začlenenie obrázku do WWW stránky je príkaz <IMG> , ktorého parameter SRC udáva adresu dokumentu, v ktorom je obrázok uložený (vo formáte GIF alebo XBM - X Bitmap), napr.:
... text pred <;IMG SRC ="obrazok.gif">; text za ... Keď kliknem na tlačidlo Image , objaví sa okno Display an inline image, v ktorom potrebujem zadať adresu dokumentu, v ktorom je obrázok uložený. Keď neviem adresu (alebo je dlhá a mne sa ju nechce celú vypisovať), kliknem na tlačidlo Browse a vyhľadám súbor na lokálnom disku. Vybraný obrázok sa mi objaví v okne Image Preview (keď je v nadradenom okne Display an inline image zaškrtnutá voľba Preview ). Keď obrázok potvrdím kliknutím na OK , príkaz sa zaradí do textu. Kliknutím na Browse môžem vybrať inú adresu dokumentu s obrázkom.
Príkaz <IMG> môže mať aj ďalšie parametre, ich význam je uvedený v odpovediach na ďalšie otázky.
Ďalšie parametre zaradím do príkazu tak, že v okne Display an inline image kliknem na tlačidlo s modrou šípkou dole (vedľa OK ). Objaví sa rozšírené okno. Význam jednotlivých položiek bude vysvetlený v ďalších odpovediach.
Keď používam textový prehliadač (napr. napríklad LYNX), získavam informácie na obrazovke iba v textovej podobe. Na mieste obrázkov sa objaví iba text [IMG] alebo [INLINE] . Keď daný obrázok má iba ilustračný charakter, tento spôsob je neelegantný, ale prijateľný. Keď však obrázok nesie podstatnú informáciu a najmä keď je súčasťou odkazu, je žiadúce doplniť v parametri text, charakterizujúci daný obrázok. Keď napríklad v slovenskej verzii dokumentu chcem mať odkaz do anglickej verzie, potom použijem príkaz:
<A HREF="english.html"><IMG SRC="zuk.gif" ALT="English"></A>
ktorý v prípade grafického prehliadača zobrazí odkaz ako anglickú vlajku (uloženú v súbore zuk.gif ) a v prípade textového prehliadača ako text English .
Keď použijem príkaz v tvare, uvedenom na začiatku kapitoly Ako začlením do textu obrázky? , potom sa obrázok zaradí presne na to miesto v texte, kde je príkaz zapísaný. Spodný okraj obrázku ja na tej istej úrovni ako spodný okraj textu pred aj za ním. Keď požadujem, aby stred obrázku bol na úrovni spodného okraja textu, doplním príkaz o príslušný parameter:
... text pred <IMG SRC ="obrazok.gif" ALIGN=middle> text za ... riadkovanie textu sa rozšíri v oboch prípadoch tak, že ani riadok nad ani riadok pod obrázkom doňho nezasahujú.
Keď použijem parameter ALIGN=right alebo ALIGN=left, obrázok sa zobrazí úplne vpravo/vľavo a priestor vedľa neho sa vyplní textom s nezmeneným riadkovaním. Obrázok bude tesne pod riadkom, v ktorom je úsek textu, kde je príkaz zapísaný.
Keď chcem, aby bol obrázok zaradený presne na mieste príkazu a aby priestor vedľa neho nebol vyplnený textom, zadám za príkazom pre zaradenie obrázku príkaz <BR CLEAR>.
Rozsiahla knižnica pomocných obrázkov bola vytvorená na Katedre kybernetiky a umelej inteligencie na Technickej Univerzite v Košiciach. Je dostupná na adrese http://bela.fei.tuke.sk/gifs/. Avšak POZOR! Ak sa mi niektorý obrázok zapáči, skopírujem si ho do svojho adresára a vo svojom dokumente používam odkaz na svoju kópiu. Nikdy nepoužívam odkazy priamo do knižnice !! Ak je totiž takýchto používateľov viac, naťahovanie obrázkov značne spomalí zobrazenie môjho dokumentu, ba niekedy sa obrázok ani nemusí zobraziť.
Pomocou parametrov HEIGHT a WIDTH v príkaze <IMG> môžem predefinovať pôvodný rozmer obrázku. Rozmery sa udávajú v jednotkách použitého zobrazenia. Napr. keď je použité zobrazenie 800*600, potom HEIGHT=60 WIDTH=80 predstavuje rozmery obrázku, rovné v obidvoch smeroch 1/10 obrazovky. Rozmery môžem udávať aj v percentách (100% je rozmer celej obrazovky v danom smere).
Nastavenie obrázku na pozadie, prípadne zmena farby pozadia a písma (pozri Ako môžem nastaviť farbu pozadia a písma WWW stránky? ) je súčasťou pripravovaného štandardu HTML 3, a preto nie všetky prehliadače akceptujú tieto parametre. Obrázok môžem umiestniť na pozadie pomocou parametra BACKGROUND príkazu . Napríklad <BODY BACKGROUND="mramor.gif"> spôsobí, že sa pozadie vyplní obrázkom mramor.gif. Zvyčajne obrázok nepokryje celé pozadie, preto sa použije viackrát v horizontálnom aj vertikálnom smere. Z toho dôvodu by mala horná hrana obrázku nadväzovať na spodnú a ľavá na pravú.
Preddefinované obrázky a vzorky môžem nájsť napríklad v knižnici obrázkov na http://bela.fei.tuke.sk/gifs/. POZOR! Pre odkazy na vzorky platí to isté čo pre pomocné obrázky z časti Existujú knižnice pomocných obrázkov? .
Použijem parametre príkazu . Okrem parametra BACKGROUND (pozri Ako vyplním pozadie WWW stránky obrázkom alebo vzorkou? ) môže mať príkaz nasledovné parametre, pomocou ktorých je možné nastaviť:
| BGCOLOR | farbu pozadia |
| TEXT | farbu normálneho textu |
| LINK | farbu nenavštíveného odkazu |
| VLINK | farbu už navštíveného odkazu |
| ALINK | farbu aktívneho odkazu (toho, na ktorý sme práve klikli) |
Každý z týchto parametrov zadávam v tvare #RRGGBB, kde RR je hexadecimálna hodnota červenej zložky, GG zelenej a BB modrej. Maximálna hodnota pre všetky dvojice je FF, t.j. 255 desiatkovo. (napríklad sýto žltá farba bude mať kód #FFFF00, t.j. FF hexadecimálne je 255 desiatkovo pre červenú aj zelenú zložku, petrolejovo modrá má kód #408080 kde 40 je 64 desiatkovo pre červenú, a 80 je 128 desiatkovo pre zelenú a modrú).
Použitie príkazu nastavenia farieb v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vytvorím zložitejší HTML dokument?
V menu vyberiem Special a navolím položku Background Assistant (z klávesnice pomocou F5 ). Otvorí sa okno BACKGROUND ASSISTANT a v ňom môžem navoliť pre jednotlivé objekty požadované farby, prípadne si vybrať vhodný obrazec pre pozadie a overiť si ich v testovacom okne. Keď kliknem na tlačidlo OK, príslušný HTML príkaz sa zaradí to textu.
Konce riadkov, uvedené v zdrojovom texte sú prehliadačom ignorované. Keď chcem začať nový odstavec, zadám príkaz <P> a text pokračuje na novom riadku a je oddelený od predchádzajúceho textu jedným prázdnym riadkom.
Keď kliknem myšou na tlačidlo s uvedenou ikonou alebo keď stlačím kombináciu kláves CTRL-P, vloží sa príkaz <P> (v závislosti na voľbe aj ako párový, prípadne aj s parametrami - pozri záver kapitoly Ako vyzerá úplne jednoduchý HTML dokument? a kapitolu Môžem zarovnať okaje textu? ).
Keď chcem iba začať nový riadok (bez voľného riadku), použijem príkaz <BR>.
| |
Kliknem na tlačidlo T a v ponuke, ktorá sa objaví kliknem na príkaz <BR>. |
Keď chcem oddeliť niektoré časti dokumentu vodorovnou čiarou na šírku celej plochy, použijem príkaz <HR>. Použitie uvedeného príkazu v rámci konkrétneho dokumentu ilustruje príklad v kapitole Ako vytvorím zložitejší HTML dokument?
| |
Kliknem na tlačidlo T a v ponuke, ktorá sa objaví kliknem na požadovaný príkaz. Príkaz <HR> môžem vložiť aj z klávesnice stlačením kombinácie CTRL-L. |
Farebná alebo inak vzorovaná čiara je vlastne úzky obrázok. Knižnice obrázkov zvyčajne obsahujú veľké množstvo čiar, ktoré je možné použiť. Keď sa pre niektorú rozhodnem, do svojho dokumentu ju vložím príkazom:
<IMG SRC="pekna-c.gif" WIDTH=600 HEIGHT=10><BR> Význam parametrov WIDTH a HEIGHT už poznám z kapitoly Môžem zmeniť rozmer obrázku? . Príkaz <BR> (pozri Ako začnem nový riadok textu? ) je dobré použiť, aby sa mi pri roztiahnutí okna prehliadača nedostal vedľa čiary text. Ak chcem mať kratšiu čiaru v strede stránky, použijem príkaz <CENTER> (pozri Môžem centrovať text? ).
Niekedy potrebujem vložiť do HTML dokumentu úsek textu so zachovaním jeho pôvodného formátovania, t.j. s akceptovaním viacerých medzier po sebe, tabelátorov a nových riadkov (napr. zdrojový text nejakého programu). Pre tento účel môžem použiť párový formátovací príkaz <PRE>...</PRE>. Takto ohraničený text rešpektuje pri zobrazení pôvodné formátovanie, pričom sa používa neproporcionálne písmo (napr. znak i je rovnako široký ako m ).
Keď chcem mať časť textu centrovanú, vložím ju medzi otváraciu a zatváraciu časť príkazu <CENTER>, napr.:
<CENTER>
<H1>Zoznam clenov<BR>
horolezeckeho oddielu</H1>
<IMG SRC="pekna-c.gif" WIDTH=400 HEIGHT=10>
</CENTER>
Navolím myšou text, ktorý chcem centrovať (aj viac riadkov). Kliknem na tlačidlo Styles a v ponuke, ktorá sa objaví vyberiem položku Center: tým sa navolený blok vloží medzi otváraciu a zatváraciu časť príslušného príkazu.
Na centrovanie všetkých riadkov jedného odstavca môžem použiť aj párový príkaz pre odstavec, v otváracej časti ktorého uvediem príslušný parameter: <P ALIGN=center>.
Keď použijem pre formátovanie odstavcov párový príkaz <P>, môžem v ňom pomocou parametra ALIGN definovať nasledujúce spôsoby zarovnania okrajov odstavca (parametre, označené hviezdičkou sú v Netscape 2.0 aj v LYNX-e ignorované):
| - ALIGN=right | zarovná celý odstavec na pravý okraj |
| - ALIGN=center | všetky riadky odstavca sú centrované |
| * ALIGN=justify | zarovná obidva okraje odstavca |
| * ALIGN=indent | odsadí celý odstavec |
Na ďalšej strane je uvedený zdrojový text dokumentu, ktorý obsahuje väčšinu príkazov jazyka HTML, uvedených v tejto príručke. Jedná sa o skrátenú verziu reálneho dokumentu, prezentujúceho čiastkovú úlohu projektu Tempus, zaoberajúcu sa prípravou kurzov pre prácu s Internetom. Ďalej je uvedený dokument zobrazený pomocou textového prehliadača LYNX a pomocou grafického prehliadača Netscape.
