![]() |
![]() |
V roku 2001 som absolvoval ukoncil studium odboru Informatika na FEI STU v Bratislave. Pri praci na Rocnikovom a Diplomovom projekte som sa zaoberal systemom s rozhranim webovskej stranky a tak som mohol zuzitkovat niektore znalosti z HTML z predchadzajucich rokov. Hlbsie sa HTML venujem asi od roku 1997. Odvtedy som sa snazil poskytnut svoje poznatky (vacsinou zalozene na experimentoch) zacinajucim autorom WWW stranok v prijatelnej forme.
VIXova prirucka webelopera (VPW) vznikla za tym istym ucelom, po doplneni, aktualizovani a vyskusani prikazov som vytvoril uplne novy "help", s novym dizajnom a snad prehladnejsi ako ten stary. Pri opise prikazom som sa mozno neubranil troche formalizmu, ten vsak zabezpecuje aj prehladnost. Tajomny nazov "webeloper" neskryva v sebe nic ine, ako kombinaciu slov "web" + "developer", cize vyvojar webu, cize Vy.
Na tvorbu stranok mozete pokojne pouzivat editory ako su Microsoft Frontpage ci Netscape Composer a dozijete sa pokojnej staroby. Na taketo editovanie nepotrebujete takmer nijake vedomosti z HTML, staci trochu vediet, co je to Internet a mat naladu a cit pre dizajn - ostatne ide samo. Na obrazovke priamo vidite, ako bude Vasa stranka vyzerat. Taketo editory sa oznacuju tiez ako WYSIWYG editory ("What you see is what you get"). Tieto editory vsak maju dve podstatne nevyhody:
Aj tak si myslim, ze po precitani tychto riadkov sa svet rozdeli na dva proti sebe stojace tabory - zaryti windozaci s vzdy pripravenym Frontpagom a drsni unixacki vi-ckari, ktori budu vzdy zastavat svoj nazor. Nebranim Vam, vyberte si sami. Myslim vsak, ze z tohto je jasne, preco je vhodne editovat stranky pomocou "beznych textovych editorov". Okrem toho, ze existuju v kazdom operacnom systeme (spomente si na "F4" v Norton Commanderi, Notepad vo Windows ci editory JOE a VI v Unixe), mate zdrojovy kod stranky neustale pod kontrolou. A tak sa stanete nezavisli! Pokial ide o mna, tuto stranku som pisal v internom editore Far a neskor som presiel na GVIM (GUI verzia VIM, dokonca aj pre Windows). Editor (G)VIM Vam mozem rozhodne odporucat. Kym sa v nom naucite pracovat, budete si pripadat, ako keby Vas s cerstvym vodicakom "B" posadili do bojoveho vrtulnika na lietadlovej lodi, po kratkom soku vsak budete vediet nielen lietat, ale aj riadit ponorku.
P.S.: existuje este tretia skupina editorov na tvorbu stranok - editory, ktore vam umoznia pracovat priamo v HTML, ale prikazy nemusite vzdy vypisovat, mozete ich vyberat z menu. Praca s takymto editorom je ovela pohodlnejsia ako praca s Notepadom. Ak sa rozhodnete vyskusat tento sposob tvorby stranok, skuste editor "1st Page". S tymto editorom som urobil niekolko testov a je naozaj vynikajuci. Chyba tu - prirodzene - len to riadenie ponorky, ktore mate ako bonus pri praci s VIM.
Tato prirucka si kladie za ulohu naucit autorov stranok zakladom jazyka HTML, pripadne poskytnut podrobne informacie o prikazoch HTML v slovencine. Ak sa mi to podari, mali by ste byt schopni vytvorit si stranku, aj ked ste to v zivote nerobili. V akomkolvek prostredi, v akomkolvek editore. (Ako povedala Vasquezova: "Anytime, anywhere").
Navyse sa nieco nove naucite. A ktovie, mozno sa perfektne zabavite... :)
Este jedno male vysvetlenie: to, co ja nazyvam "prikazmi HTML", sa v anglictine nazyva "tag(s)" = znacky. Slovo "prikaz" nie je celkom korektne, pretoze HTML je iba formatovaci jazyk. Rozhodne sa mi vsak paci viac slovo "prikaz" ako "znacka", pripadne trochu tazkopadny, i ked zmyslovo dokonaly vyraz "kontajner". Taketo vyrazy vsak urcite najdete v inych helpoch.
Cielom tohto dokumentu je poskytnut informacie o HTML nielen zacinajucim autorom www stranok, ale aj skusenejsim pouzivatelom a webmastrom, ktori si potrebuju ozivit vedomosti alebo overit, ci nerobia chybu pri pisani stranok. V lavom okne sa stale nachadza menu, ktore obsahuje nasledujuce kapitoly:
Nasledujuce kapitoly mozete chapat ako prilohy:
Kapitoly su zoradene viac-menej v poradi, v akom by ste ich mali citat. Samozrejme, zalezi na Vas, co Vas bude zaujimat.
WWW-stranka je hypertextovy dokument napisany vo velmi jednoduchom hypertextovom jazyku - najcastejsie HTML. Tento jazyk umoznuje formatovat text (farba, velkost, typ pisma), vkladat obrazky a ine multimedialne prvky (napr. zvuk) a najma prechadzat na ine dokumenty alebo www-stranky. Tento prvok robi z Vasho dokumentu dynamicku sucast WWW (World Wide Web) a odlisuje ho od inych textovych suborov. V skratke mozno povedat, ze na stranke mozete mat cokolvek a dostanete sa z nej kamkolvek.
Pri prezerani WWW stranok sa vyuziva architektura a sposob komunikacie, ktory sa oznacuje klient-server. Klient, to ste Vy. V pocitacovej terminologii je to vsak najma Vas prehliadac. Klient nema informacie, ale vie si ich vypytat. Server je naopak pocitac, ktoreho zivotnym poslanim je uchovavat a poskytovat udaje (stranky), ktore vas zaujimaju. Vy poziadate prehliadac (klient), aby Vam zobrazil nejaku stranku. Klient sa pripoji na server, ktory mu poskytne ziadane udaje a potom Vam ich zobrazi. Vsetci su spokojni. A na toto vsetko Vam staci len kliknut na linku na stranke alebo napisat adresu.
Kazda stranka je jednoznacne identifikovana adresou URL
http://server.adresa
, kde server.adresa predstavuje adresu
Vasho servera. Ak pouzivate Unix/Linux, Vasa osobna stranka bude mat
pravdepodobne adresu http://server.adresa/~login
,kde
login je Vase prihlasovacie meno. Niekedy sa namiesto URL pouziva pojem
URI, pricom URL je skratka pre Uniform Resource Locator a URI znamena
Uniform Resource Identifier. Podstatne je, ze adresa oznacuje
umiestnenie suboru alebo nejakej sluzby (resource = prostriedok) na nejakom
mieste. V pripade Vasej stranky je to prave umiestnenie suborov s jej obsahom.
Ak si chce niekto spristupnit Vasu stranku, musi sa obratit na Vasu URL
adresu. Vsetko ostatne je uz znama komunikacia klient-server.
HTML je skratka pre HyperText Markup Language, co znamena asi tolko ako "hypertextovy znackovy jazyk". Subory Vasej stranky obsahuju prikazy (tagy, znacky) tohto jazyka a maju vo vseobecnosti priponu (rozsirenie) ".html" (Windows vdaka "spatnej kompatibilite" pouziva zo zasady ".htm"). Casto sa mozete sa stretnut aj s priponami ".shtml" (HTML stranka pouzivajuca SSI - Server Side Includes, umoznujuce dynamicky generovat obsah stranky).
Na prvy pohlad podla pripony (.html, .htm, .shtml, .phtml). Kazdopadne vsak podla toho, ze obsahuje prikazy jazyka HTML. Pozrite si aj dalsiu otazku.
Prikazy HTML umoznuju upravovat obycajny text, menit typ pisma, farbu,
vlozit obrazok, linky a vselico ine. Prehliadac tieto prikazy
spracuje a ukaze Vam pozadovany vysledok.
Pre pisanie prikazov HTML platia tieto pravidla:
<PRIKAZ>Z toho nepriamo vyplyva, ze vo Vasom texte nemozete znaky < a > pouzivat. (V skutocnosti mozete, ale specialnym sposobom. Ukazeme si to neskor v casti Pisanie specialnych znakov v HTML.)
<PRIKAZ> ... telo prikazu - tu plati ... </PRIKAZ> ... tu uz nie ...
<PRIKAZ PARAMETER1="hodnota" [PARAMETER2="hodnota"] ... >resp. pre blokovy prikaz:
<PRIKAZ PARAMETER1="hodnota" [PARAMETER2="hodnota"] ... > .. telo .. </PRIKAZ>
Parametre sa oddeluju lubovolnym poctom medzier a dokonca aj znakom konca riadku. Hodnoty parametrov sa ohranicuju "uvodzovkami" (mozu byt aj bez nich, ak neobsahuju medzeru, ale odporucam uvodzovky pouzit vzdy) a jednotlivym parametrom sa priraduju pomocou operatora "=". Parametre v [hranatych zatvorkach] predstavuju nepovinnu cast (pri skutocnom zapise do HTML sa hranate zatvorky nepisu, je to len pre vyjadrenie ich volitelnosti).
Pri vytvarani stranky si urcite vsimnete, ze niektore parametre hodnotu vobec nemaju, pretoze predstavuju binarne (dvojstavove) prepinace - ak prepinac uvediete, zapnete jeho funkciu, inak sa povazuje za vypnuty.
Niektore parametre niektorych prikazov nemusite vzdy vypisovat, pretoze su nastavene ako "default" (standardne; ale slovo "default" nam uz natolko pokazilo technicku slovencinu, ze ho budem pouzivat). Zapamatajte si to, co som uz napisal pred chvilou - parametre maju prikaz dospecifikovat, doladit a nie Vas ustvat, znicit Vam prsty a v konecnom dosledku aj klavesnicu...
Pri pisani Vam iste pride vhod skutocnost, ze na poradi parametrov nezalezi.
Priklad 1:
<BODY BGCOLOR="#000000" TEXT="#f0f0f0"> ... </BODY>
Meno prikazu je BODY, parametre su BGCOLOR s hodnotou "#000000" a TEXT s hodnotou "#f0f0f0". Prikaz je blokovy a jeho telo je pre ucely tohto prikladu znazornene ako "...".
Priklad 2:
<IMG SRC="picture.gif" ALT="">
Meno prikazu je IMG, parametre su SRC s hodnotou "picture.gif" a ALT s hodnotou "" (prazdny retazec). Prikaz nie je blokovy a preto nema ukoncovaciu cast.
Priklad 3:
<HR SIZE="2">
Meno prikazu je HR, parameter je SIZE s hodnotou "2". Prikaz nie je blokovy a preto nema ukoncovaciu cast.
Priklad 4:
<HR>
Meno prikazu je HR a nespecifikovali sme ziadne parametre. Pouziju sa ich defaultne hodnoty.
Priklad 5:
<HR NOSHADE>
Meno prikazu je HR, parameter NOSHADE nema hodnotu - je
to prepinac.
O chvilu si priblizime aj hodnoty parametrov.
Zapamatajte si, ze prehliadace by mali ignorovat neexistujuce (alebo nespravne) prikazy a parametre. Napriklad neexistujuci parameter "kvak" v prikaze HTML:
<HTML kvak="aaa">Iny priklad - neexistujuci prikaz <POKUS>:
<POKUS>tento text je pokusny!</POKUS>
Ak si to skusite, zistite, ze prehliadac zobrazi text "tento text je pokusny", ako keby ste prikaz <POKUS> vobec nenapisali.
<html> <head> <title>Toto je moj prvy dokument</title> </head> <body bgcolor="blue"> Ak vidite tento text, vsetko funguje! </body> </html>je identicky s tymto:
<HTML> <HEAD> <TITLE>Toto je moj prvy dokument</TITLE> </HEAD> <BODY BGCOLOR="blue">Ak vidite tento text, vsetko funguje!</BODY> </HTML>aj s tymto:
<Html> <Head> <Title>Toto je moj prvy dokument</Title> </Head> <Body BgColor="blue"> Ak vidite tento text, vsetko funguje! </Body> </Html>dokonca aj s touto hrozou:
<HtMl> <HeAd> <TiTlE>Toto je moj prvy dokument</TiTlE> </HeAd> <BoDy Bgcolor="blue"> Ak vidite tento text, vsetko funguje! </BoDy> </HtMl>A takto by som to pisal ja (odsadenie obsahu jednotlivych blokov sa Vam raz moze velmi hodit, ked sa nebudete vyznat v kode stranky!):
<HTML> <HEAD> <TITLE>Toto je moj prvy dokument</TITLE> </HEAD> <BODY BGCOLOr="blue"> Ak vidite tento text, vsetko funguje! </BODY> </HTML>V tomto dokumente budem pisat prikazy HTML velkymi pismenami, co jednoznacne odporucam aj Vam.
<B>tucne pismo <I>tucne pismo kombinovane s kurzivou! opat len tucne pismo </I></B>Iny priklad:
<HTML> ... hlavicka... <BODY> <A HREF="linka.html"> <IMG SRC="ikona.gif" ALT="Linka ku mne"> </A> ... zvysok tela </BODY> </HTML>Tento kusok kodu umiestnil do linky <A> obrazok <IMG>. To znamena, ze na obrazok sa bude dat kliknut a bude fungovat ako linka.
Poznamka: v dosledku smutneho faktu, ze standardy existuju na to, aby sa nedodrziavali, interpretuju prehliadace (zacali s tym Internet Explorer a Netscape Navigator, uz len cakam, kedy sa k nim prida Opera) niektore prikazy odlisne, pripadne si definuju vlastne(!). S odlisnou interpretaciou sa da zmierit - stranka sa vacsinou da upravit do podoby, v ktorej je "relativne rovnaka" vo vsetkych prehliadacoch, ale je to robota navyse. Horsie je to s prikazmi, ktore si zadefinovali autori jednotlivych prehliadacov. Ak ich pouzijete, vopred upozornujem, ze sa mozete rozlucit s tym, ze budu fungovat u konkurencnych prehliadacov.
Z toho vyplyva este smutnejsi fakt: kontrolujte svoje stranky vo vsetkych prehliadacoch, ku ktorym mate pristup. V sucasnosti existuje prehliadacov dost, z nich niekolko velmi dobrych:
Mozno Vas bude zaujimat, ze existuju programy, ktore dokazu skontrolovat HTML dokument a upozornia Vas na najdene chyby. Taketo programy sa nazyvaju "validatory". Ak mate k dispozicii pripojenie na Internet, jeden validator najdete priamo na stranke W3C. Ak si chcete stiahnut nejaky validator domov na pouzitie bez Internetu, mozem odporucit CSE HTML Validator Lite (www.htmlvalidator.com), (pre Windows). Pre Linux je vhodny command-line software "tidy" (alebo HTML Tidy, nemam poruke adresu, ale skuste najst na SourceForge, resp. FreshMeat), Oba su free a preukazuju mi dobre sluzby. V tomto helpe mimochodom najdete len tie prikazy, ktore by podla specifikacie HTML 4.0 mali fungovat vo vsetkych prehliadacoch. Ak mi nejaky parameter pri testovani nefungoval, budete to vidiet v poznamkach.
Parametre mozu nadobudat rozlicne hodnoty, vzdy ich vsak mozno zaradit do nejakeho typu, ktory tieto hodnoty urcitym sposobom ohranicuje (napriklad nemozete vyjadrit velkost okna pomocou inych znakov ako cislic). Hodnoty parametrov by sa mali uvadzat v "uvodzovkach". Pri niektorych prikazoch som kvoli lepsej prehladnosti hodnoty parametrov pomenoval podla kontextu; vsetky vsak patria k nasledujucim typom:
protokol://login:password@adresa:port/cesta/subor#navestie
http://deja-vix.sk/~vix/index.html
http://deja-vix.sk, http://deja-vix.sk/index.html,
http://deja-vix.sk/~vix
Ak sa pouzije znak "~",
subor sa bude hladat v domacom adresari pouzivatela za znakom "~" (tu: vix)pictures/image.gif
druhy.html
druhy.html#omne
#omne
http://deja-vix.sk/index.html#dolu
ftp://deja-vix.sk/pub/
file://c:/windows/temp/index.html,
file://top/vix/web-data/index.html
telnet://example.com,
telnet://vix:zuzana@example.com (!nikdy nepouzivajte, heslo sa
uchova v historii a ktovie, kde vsade este!!), telnet://example.com:6666
gopher://decef.elf.stuba.sk
mailto:vix@example.com
Cesta specifikujuca umiestnenie suboru moze byt relativna alebo absolutna. Absolutna cesta v operacnych systemoch Linux/Unix zacina znakom "/" a predstavuje uplnu cestu k pozadovanemu suboru. Nasledujuce poznamky sa tykaju vyhradne operacneho systemu Linux/Unix!
V pripade, ze umiestnujete stranky do adresarov hlavneho servera (ak ste
webmaster), zaciatok tejto cesty je v adresari webservera. Ak predpokladame,
ze hlavny server ma dokument umiestnene v adresari
/home/httpd/html/index.html
, z www tieto dokumenty spristupnite
pomocou cesty /index.html
, resp. s plnou adresou
http://server.adresa/index.html
. Ak vytvorime podadresar a v
nom subor /home/httpd/html/bla/index.html
, z www tento dokument
spristupnime cez http://server.adresa/bla/index.html
. Vsimnite
si, ze vonkajsi pouzivatel neziska informaciu o fyzickom ulozeni Vasich
dokumentov!
Ak umiestnujete subory stranky do adresara vo svojom domacom adresari,
situacia je trochu ina. Ak predpokladame, ze subor Vasej stranky je
umiestneny v /home/vix/web-data/index.html
, co je to iste ako
~vix/web-data/index.html
, absolutna cesta k nemu z www bude
/~vix/index.html
, resp. s plnou adresou
http://server.adresa/~vix/index.html
. Opat si vsimnite, ze
vonkajsi pouzivatel nevie, kde je umiestneny adresar, v ktorom mate uchovane
stranky.
Ak pouzijete oznacenie protokolu, musite vzdy urcit absolutnu cestu (napr.
http://deja-vix.sk/~vix/index.html
).
Relativna cesta urcuje cestu k suboru z aktualneho adresara (napr.
pictures/image.gif
). Odporucam ju pouzivat, kedykolvek mozete -
vyhnete sa problemom pri prenasani stranky na iny server.
HTML dokument je sice obycajny subor, ale aby ste ho mohli pouzit pre svoju
www-stranku, musite ho umiestnit tam, kde ho bude hladat server. Aby to nebolo
take zlozite, potrebujete vediet meno podadresara vo Vasom domacom
adresari, v ktorom sa musia HTML-dokumenty nachadzat a meno indexoveho
suboru, ktorym bude zacinat Vasa stranka. Vo vacsine pripadov je
meno indexoveho suboru index.html
alebo
index.htm
, adresar by sa mohol volat napriklad
public_html
(default pre web server Apache),
www
, web-data
,
html
. Experimentujte! Ak sa Vam nepodari dosiahnut pokrok,
zahrajte sa na chvilu na "hackera" (v tom lepsom zmysle, samozrejme; nemylit
si s crackerom! Hacker je clovek, ktory pristupuje k rieseniu problemov s
eleganciou a novymi napadmi, alebo, ako hovorim casto ja - s "jistou
nevazanosti" ;-) ) a pozrite sa do domacich adresarov ludi, ktori uz stranku
na serveri maju a hladajte jej adresar.
Ak zlyha aj tato moznost, kontaktujte spravcu Vasho servera alebo webmastra.
(webmaster@server)
Teraz uz budem predpokladat, ze ste zistili meno podadresara stranky aj meno indexoveho suboru. Adresar treba na zaciatku vytvorit. V priklade, ktory mozete brat aj ako navod, budem predpokladat meno adresara web-data, meno indexoveho suboru index.html a operacny system Linux/Unix.
Predchadzajuca tema: | Pribuzne temy: | Nasledujuca tema: |
---|---|---|
Uvodna stranka | Sprievodca vytvaranim stranky krok za krokom Abecedny zoznam prikazov HTML |
Struktura HTML dokumentu |