1. fejezet: A HTML logikája
A HTML egy angol mozaikszó. Eredetiben: HyperText Markup Language (=Hipertext jelölő nyelv).
Eredeti verzióját a World Wide Web Consortium Címük: w3.org adta ki és a hivatalos szabványt ma is ez a szervezet írja tovább - a gyakorlati technikák alapján. Ezen könyv a HTML 4.01-es szabványát tárgyalja, mely a jelenlegi egyik legelterjedtebb a mai interneten. Pontos URL-je:http://www.w3.org/TR/html401/.
A HTML nyelv alapja, mint oly' sok minden informatikai apróságnak, a hétköznapi angol nyelv kifejezései. Maga a nyelv "TAG"-ekbõl áll. (kiejtése: "teg"!)
Minta:
| <EzEgyTag> Ez a közbülsõ szöveg, amire vonatkozik. </EzEgyTag> |
Ezek a bizonyos TAG-ek rendkívül sokfélék lehetnek. Szerencsére a nyelv alapjai igen egyszerûek. Egy HTML-lap megírás után egybõl megtekinthetõ bármelyik Internetes böngészõben - akár kapcsolat nélkül is. Weblap szerkesztésére a legegyszerûbb program egy Jegyzettömb. Fontos, hogy a kész file-nak HTM vagy HTML kiterjesztést adjunk és a névben legyünk meglehetõsen kényesek. Ha grafikus környezethez szoktunk, akkor általában hosszabb és többtagú file-nevekben szoktunk menteni. Az internet erre meglehetõsen kényes. Saját érdekünkben és azért is, hogy a file minden féle-fajta környezetben jól megtekinthetõ legyen az oldal, egyszerûbb, tagolatlan és ékezet nélküli neveket használjunk. A könyvben végig ilyen file-okat használunk!
Most nézzük meg a legegyszerûbb weblapot!
Egyszerû weblap: (minta1.html)
| <HTML> Szia, itt vagyok! </HTML> |
A dolog lényege, hogy nem kell tagolni a szöveget, nem kell semmi különös formátumos trükköt ismerni, csak a kész anyagot megnézni és már mûködik is a weblap. Ráadásul egyszerûbb lapok esetén ez minden egyes gépen ugyanígy néz ki. Nem szabad elfelejteni, hogy egy weblapot mindig <HTML> és </HTML> tagek közé kell tenni. Ami viszont fontos, hogy a HTML-nyelvben lényegtelen a kisbetû-nagybetû különbsége. Tehát a <HTML>, <html>, <Html> és <HtmL> ugyanazt jelentik!
Problémát okozhat, hogy a szöveget nem túl egyszerû formázni. Például próbáljuk ki a következõ file-t: (minta2.html)
| <HTML> Egyes sor. Kettes sor. Harmas sor. </HTML> |
Ekkor a következõ fog megjelenni egy böngészõ ablakában:  |
Ahhoz, hogy egy szöveg az eredeti formázás szerint nézzen ki a <PRE> tagot kell használni. (PRE=Preformatted - elõre formázott)
Az elõzõ file helyesen így néz ki: (minta3.html)
Ha nem vagyunk hajlandóak szöveg formázásával szórakozni, akkor egyszerûbb megoldás a formázást a böngészõre bízni. Minden sor végén egyszerûen egy <BR> taget kell tenni, melynek hatására a böngészõ automatikusan új sort kezd. Vigyázat! Ennek a tagnek kivételesen nincsen zárótagje! Tehát a helyes - és egyszerû - forma a következõ: (minta4.html )
| <HTML><PRE>Egyes sor.<BR>Kettes sor.<BR>Harmas sor.</PRE></HTML> |
Természetesen az egyes sorokat külön bekezdésben is írhatjuk, de így egyetlen sorban is elérjük a megfelelõ hatást.
2. fejezet: Betûk formázása
A dolog igen egyszerû, hiszen lehet egy betû félkövér (Bold = B), aláhúzott (Underlined = U), illetve döntött (Italic = I)
A megfelelõ tagek ezek szerint: <B>Bold</B>,<U>Underlined</U>, illetve <I>Italic</I>.
Az elõbbi parancsok persze kombinálhatók is: <B><I>Félkövér Dõlt </I></B>
Egyetlen dologra kell vigyázni csupán: A sorrendet mindig be kell tartani. Gyakorlatban ez azt jelenti, hogy mindig a legutoljára kinyitott tag zárótagját kell leírni. Nézzük a következõ - természetesen betûformázási - példát: (minta5.html)
| <HTML> <B>Vastag. <I>Ráadásul aláhúzott</I> Megint simán vastag</B> </HTML> |
 Íme a file, ahogy az összetartozó tagek láthatóak. |
Kicsit pontosabban fogalmazva: ez olyan, mint egy csomó, egymásba csomagolt doboz. Mivel minden dobozt be akarunk zárni, ezért nyilvánvalóan a legkisebbel kell kezdenünk, majd csak utána haladhatunk fokozatosan a nagyobbak felé. Persze, egy nagyobb dobozban lehet több, kisebb doboz is, de itt is érvényes, hogy előbb a kicsiket kell lezárni és csak utána a nagyot.
1. feladat: Írjon olyan fájlt, amelyben aláhúzott és döntött szöveg is van! (fel1.html)
Ennél eggyel bonyolultabb a betûk méretének változtatása. Természetesen itt is lehetséges a szövegszerkesztõknél megszokott az abszolút méretezés, de szerencsésebb használni a relatív méretezést, ami egy közepes beállításhoz képesti eltérést tesz lehetõvé. A közepes méret a 0-ás: (minta6.html)
| <HTML> <FONT SIZE=0> Alapméret </FONT> </HTML> |
A skála -7-tõl +7-ig terjedhet.
2. feladat: Írjon olyan fájlt, amelyben a betûméretek fokozatosan növekednek! (fel2.html) 
Bár nem szerencsés, de a betûk típusa is változtatható. Ehhez szintén a <FONT> tagre van szükség, de ezúttal a paramétere a SIZE helyett a FACE-re lesz szükség, de szeretném kihangsúlyozni, hogy ez nem minden esetben szerencsés, mivel lehet, hogy a honlap készítõjének gépen éppen megvan az a betûtípus, de a leendõ felhasználóén nincsen! Mintapélda legyen a következõ: (minta7.html)
| <HTML> <font face="Arial">Arial</font> <font face="Times Nem Roman CE">Times New Roman CE</font> </HTML> |
Persze, ha valamelyik betûtípus hiányzik, akkor az alapértelmezett betûtípust kapjuk helyette.
Ha már a betûk formázásánál tartunk, akkor nem árt tisztázni, hogyan lehet az eddig meglehetõsen egyhangú dokumentumainkat kiszínezni. Elsõ körben a betûknek adjunk új színt. Alapértelmezésben minden weblapnak vannak beépített színei, de ezeket nagyon egyszerá felülbírálni! A színezéshez a COLOR paramétert kell használni! A színek nevei a legegyszerûbb angol nevek lehetnek, például: black=fekete, green=zöld, blue=kék, gray=szürke, yellow=sárga, purple=bordó,...
Persze a fenti paramétereket lehet keverve is használni, ráadásul a sorrend is lényegtelen! Nézzük a következõ példát:
Ez igen! A fenti példa egy igen rövid kóddal hozható létre: (minta8.html)
| <HTML> <font face="Arial" size="+3" color="yellow">Ez igen!</font> </HTML> |
Tehát a szöveg stílusa "Arial" mérete a normál- (szabványos-)hoz képest 3-mal nagyobb és zöld színû!
Ha a hagyományos színek kevésnek bizonyulnak, akkor lehetõségünk van mesterségesen kevert színek elõállítására is. A módszer lényege a három alapszín (R=red; G=green; B=blue) keverése. Bármelyik szín erõssége 0-tól 255-ig állítható, sajnos hexadecimális kóddal. (00-tól FF-ig) A kódsor elejére egy "#" jelet kell rakni. Néhány hagyományos és érdekes szín kódja a következõ:
| black = "#000000" = fekete | green = "#00FF00" = zöld | blue = "#0000FF" = kék |
| gray = "#C0C0C0"= szürke | red = "#FF0000" = vörös | yellow = "#FFFF00" = sárga |
Javaslom, hogy bátran kísérletezzen mindenki! Mindezek ellenére a könyv referenciájában található egy sokkal részletesebb színkiosztás!
3. fejezet: Fejezetek és formázásaik
A böngészõkben vannak eleve beépített stílusok, amit érdemes ki is használni. Ezek a címformátumok, pontosabban - jobb magyar kifejezés híján - a "Heading"parancsok. 6 eleve beépített formátum van, sorszám szerint 1-tõl 6-ig. Az 1-es a legerõsebb bekezdés-formátum, míg a 6-os a legkisebb. Apró megjegyzés: a gyakorlatban 2-3 szintű fejezetcímnél csak ritkán alkalmazunk többet!
Nézzük az alábbi (bal oldali) példa megjelenését (a jobb oldalon). (minta9.html)
| <HTML> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </HTML> |
 |
- Ha egy cím túl hosszúra sikeredik, de semmiképpen nem szeretnénk, ha megtörné a böngészõ, akkor érdemes használni a NOWRAP paramétert is,
pl.: <H1 NOWRAP> Ezt nem szabad megtörni! </H1> - Különleges lehetõség a <BANNER> is, mivel ez egy soha nem scrollozható címszalagot takar! </BANNER> Ezzel a tulajdonsággal nem szabad visszaélni, mert kisebb felbontású monitorokon lehet, hogy nem marad scrollozható rész! Csak Netscape-ben!
- Másik lehetõség a <DIV> használata, amely különbözõ részekre (fejezetekre, bekezdésekre) tagolja a szöveget. </DIV> Legfontosabb paraméterei: ALIGN="center/left/right" - igazítás; DATAFORMATAS="text/html" - adatformátum sima szöveg vagy html-kód; TITLE="mit írjon ki" az egér fölé érkezésekor.
- Az automatikus sortördelés letiltható a <NOBR> és a </NOBR> parancsokkal. Ez feloldható menet közben a <WBR> taggel, de ennek nincsen zárótagje.
- Fontos megjegyzés, hogy soha ne egyetlen képernyőméretre optimalizáljuk a megjelenést (pl.: 1024*768), mivel mindig sokféle monitor van egyszerre a piacon!
Ezeket az eleve beépített mintákat persze módosíthatjuk is, de ez csak pár fejezettel késõbb kerül sorra!
Ha már egy résznek címet adtunk, akkor érdemes megtölteni tartalommal is! Egy-egy külön gondolatot érdemes egy-egy külön bekezdésbe írni. Új sort már tudunk kezdeni a <BR> tag segítségével, de ez valamivel több, mint egy egyszerû új sor, mivel itt egész bekezdéseket lehet írni, ráadásul rendezni is lehet! Minden hagyományos szövegszerkesztõ és táblázatkezelõ programban megszokhattuk, hogy lehet balra (left), jobbra (right) és középre (center) rendezni. Az internet eleve a legkülönfélébb típusú gépekbe van bekötve, ezért igen gyakran elõfordulhat, hogy a legkülönfélébb képernyõfelbontású monitorokon jelenik meg az a - számunkra kiválóan elrendezett - szöveg, amit mi meg szeretnénk jeleníteni. Ekkor lesz értelme, hogy bekezdésekben gondolkozzunk, mivel minden egyes paragrafust másként tudunk elrendezni. A paragrafust keretbe záró tag a <P> és a </P>. Itt az új sorral ellentétben van lezárójel is! Automatikusan minden paragrafus balra zárt, de az ALIGN="hogyan" paraméter segítségével lehet másféleképpen is.
| Ez például balra van zárva. Alapértelmezés. Kódolása: <P ALIGN="left"> duma </P> |
Ez például középre van rendezve (zárva). Kódolása: <P ALIGN="center"> centrum </P> |
Ez például jobbra van zárva.
Kódolása: <P ALIGN="right"> jobb </P> |
Bár az internettõl sokáig idegen volt, de megjelent a hasábszerû elrendezés. (ALIGN="justify") Ezt is lehet alkalmazni, de ettõl sajnos relavív lassabb lehet a weblap megjelenése egy kisebb számítási képességû lapon. Az egész file (és képe) egybefüggõen a következõ lesz: (minta10.html)
| <HTML> <p align="left"> bal </p> <p align="center"> centrum </p> <p align="right"> jobb </p> <p align="justify"> hasábosan </P> </HTML> |
 |
Szintén javasolt néha napján alkalmazni a <nobr> és a </nobr> tag-eket, melyek segítségével megakadályozhatjuk, hogy egy fontos szöveg (például név) belsejét megtörje a böngészõ.
Szintén lehet alkalmazni a vízszintes vonalakat. A legegyszerûbb <HR> tagnek nincsen záróeleme, mivel csak egy szimpla vízszintes vonalat húz. Paraméterei lehetnek többek között:
- COLOR="színkód". (vonal színe) - Csak az Explorerben! Egyes alternatív böngészők már használják.
- ALIGN="left/center/right" (merre rendezze a vonalat)
- NOSHADE (ne legyen 3-dimenziós árnyéka a vonalnak)
- SIZE=n (milyen vastag legyen a vonal - pixelben; alapértelmezés: 1)
- TITLE="kiírás" (mit írjon ki a böngészõ, amikor a vonal fölé kerül az egér)
- WIDTH="n" (milyen hosszú legyen a vonal százalékban vagy pixelben. Alapértelmezés: 100%)
Természetesen vannak még betûformázások, de az legyen kicsit késõbb!
4. fejezet: Kapcsolatok
Az egész internet lényege a kapcsolatok, avagy a hiperlinkek megléte. Ez a gyakorlatban azt jelenti, hogy egy sima egy objektumhoz (sima szöveg, kép vagy részlete, nyomógomb, stb) hozzárendelhetünk az egész internetrõl egy másik objektumot. Ha például a saját honlapomra akarunk írni egy hivatkozást, akkor a következõt kell beírni a weblap megfelelõ helyére: (minta11.html)
| <A HREF="http://www.tferi.hu/"> Hivatkozás </A> |
Megjelenéskor ez a "Hivatkozás" nevû szöveg általában aláhúzva jelenik meg és a már jól ismert Windows-cursor 
átalakul mutató kézzé: 
Tehát, mint a példán is látható, az<A> tag hivatkozást jelent. Ha simán egy egész webkikötõre szeretnénk hivatkozni, mint a fenti példában is, egyszerûen be kell írni a TELJES nevét. (Általában mûködik http és www nélkül is, de lehet, hogy némileg lassabban! Célszerű minden esetben a teljes verziót beírni, mivel így szinte biztosan jó lesz.)
Némileg módosul a helyzet, ha a webkikötő belsõ felépítését is ismerve nem az egész iskolára szeretnénk hivatkozni, hanem például a "Számítástechnika kezdõknek" könyv kezdetére. Ekkor a helyes hivatkozás a következõ lesz: (minta12.html)
| <A HREF="http://www.tferi.hu/konyv5/tftanul.html"> Könyv legeleje </A> |
Ha azon az adott könyvtáron belül szeretnénk hivatkozni, ahol a kiindulási file található, akkor elegendõ a file nevét megadni. Például, ha az alábbi minta13.html-bõl szeretnénk hivatkozni az elõzõ fejezet végén lévõ minta10.html-re, akkor a következõ kódot kell használni: (minta13.html)
| <A HREF="minta10.html"> Azonos könyvtárban </A> |
Egy adott (nagyméretû) file-on belül is tudunk ugrani, de itt picivel bonyolultabb a dolog, ugyanis a file-on belül kell létrehozni egy "címkét". Ez tulajdonképpen egy láthatatlan könyvjelzõ, amit bármikor fel tudunk lapozni. Kódja: <A NAME="könyvjelzõnév"></A> Nézzünk egy példát: (minta14.html)
| <HTML> <a name="teteje">Ez a file teteje.</a> <BR>Itt szöveg van. <BR>Itt is. <BR>Meg itt is. <a href="ftp://ftp.microsoft.com/">Microsoft FTP-szerver.</a> <a href="mailto:Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.">E-mail a szerzönek.</a> <A href="#teteje">Itt lehet a tetejére ugrani.</A> <A href="http://www.tferi.hu/konyv5/html/minta14.html#teteje">Ez picit bonyolultabb!</A> </HTML> |
Természetesen nem csak http- szabvány szerinti file-ra utalhatunk, hanem ftp-re, illetve E-mail-re is. Ezen kívül ha ismerjük az adott szerver DOS-struktúra szerinti felépítését, akkor hivatkozhatunk rá a jó öreg DOS szerint is, mint a CD-parancsnál. Persze még van számos kisebb szabvány is (gopher, news, ...), de ezek mostanra már szinte teljesen kikoptak a hétköznapi használatból.
3. feladat: Írjon egy olyan fájlt, amelyben link van a szerző honlapjára (tferi.hu), a Microsoft-ra (microsoft.com) és a Netscape-re (netscape.com)! (fel3.html)
4. feladat: Írjon egy olyan fájlt, melyben hivatkozik a Netscape FTP-re, valamint a szerzõnek küld E-mailt (Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.)! (fel4.html)
5. fejezet: Listák
Az Internet kezdetekor szöveges volt szinte minden hozzáférés, éppen ezért az áttekinthetõség kedvéért rendkívüli fontossággal bír mindenféle lista és felsorolás.
A legegyszerûbb a rendezés nélküli lista. (Unordered List = UL) Ennek minden egyes eleme a listatag. (List Item = LI) Ennek a tag-nek nincsen zárórésze.
Lássuk a következõ példát: (minta15.html)
| <HTML> <ul> <li> Elsö elem <li> Második elem <li> Harmadik elem </ul> </HTML> |
 |
Természetesen lehet rendezett is a lista (Ordered List = OL). Ha az elõbbi file-ban kicseréljük az <ul> taget <ol>-re, akkor a következõ lesz a lista! (minta16.html)
| <HTML> <ol> <li> Elsö elem <li> Második elem <li> Harmadik elem </ol> </HTML> |
 |
Rendezett lista esetén az <LI> egyik paramétere megszabja a lista típusát.
Type = 1 - a listaelemek számok.
Type = a - a listaelemek kisbetûk.
Type = A - a listaelemek nagybetûk
Type = i - a listaelemek kicsi római számok.
Type = I - a listaelemek nagy római számok.
Ugyanezen paraméterek megjelenhetnek az <OL> elemnél is, ráadásul lehet egy START=n elem is, ami a kezdõértéket adja meg!
Definíciós listát is készíthetünk, ahol egyszerûbb fogalmakat lehet megmagyarázni. (Definition List = DL). Az egyes elemeket és fogalmakat<DT>-vel jelöljük, (Definition Term) míg magyarázatukat <DD>-vel. (Definition Description) (minta17.html)
| <HTML> <dl> <dt>1. fogalom <dd>az 1. fogalom magyarázata <dt>2. fogalom <dd>a 2. fogalom magyarázata </dl> </HTML> |
 |
Természetesen ezeket a mintákat némi kiegészítõ tudással kicsit át is variálhatjuk, (lásd CSS-file-ok), de ez nem egy ilyen alapfokú tanfolyam dolga!
