Tamás Ferenc: HTML-tanfolyam

22.1.) A HTML logikája

TFeri.hu logo 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/REC-html40/.
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 minimum Windows 95-ös 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)
<HTML>
<PRE>
Egyes sor.
Kettes sor.
Harmas sor.
</PRE>
</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.

22.2.) 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.
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 jelen könyv 22.16. fejezetében található egy sokkal részletesebb színkiosztás!

22.3.) 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.
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>
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:
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 székesfehérvári Jáky József Műszaki Szakközépiskola honlapjára akarunk hivatkozni, 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.jaky.hu/">Jaky FTP-szerver.</a>
<a href="mailto:hivatalos@tferi.hu">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 (hivatalos@tferi.hu)! (fel4.html)

22.5.) 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!

Folytatás itt!