Néhány html tag leírása

HTML
A html a Hypertext Markup Language (Hiperszöveges Jelölőnyelv) angol kifejezés rövidítése. Minden html oldal forrásának elején megtalálható a <html> tag és a végén a </html>. A forrásfile-t bármely böngésző képes megmutatni, a megfelelő menüpont kiválasztásával. A keretben lévő oldal forrásának megtekintéséhez a kereten belül, az egér jobb fülével kell kattintani és a helyi menüben a forrás megtekintését választani. Ha kezdők vagyunk és html oldalt szeretnénk készíteni, akkor ennek egyik legegyszerübb és tanulás szempontjából leghasznosabb módja, ha választunk egy karakteres szövegszerkesztőt, létrehozunk az operációs rendszerben egy .html kiterjesztésű állományt, a szövegszerkesztővel megnyítjuk, a html felépítését és szintaktikáját tanulva és szem előtt tartva, beírjuk a megjelenítendő szöveget és a megjelenést leíró tag-eket és már készen is lehet az első, egyszerű web-lapunk. Ha nem vagyunk kiváncsiak a lapok belső logikájára, akkor a következőt tehetjük: a legtöbb office csomagbeli programnak van mentés web-lapként kimenete, és az elkészített dokumentumok web-lapként menthetők. Arra vigyázni kell, hogy például a Word Mentés másként/Webarchívum funkciója olyan html oldalt készít, melyet csak az Internet Explorer tud megjeleníteni. Általában igaz, hogy az így elkészült html oldalak (melyek kiterjesztése nem is html, hanem például mht), rengeteg fölösleges karaktert tartalmaznak, nehezen áttekinthetők, belőlük a html oldalak felépítését kiolvasni nem könnyű feladat. A Weblap-készítő programok sokat segítenek mindaddig, amíg egy olyan speciális megjelenítéshez nem jutunk, melyre a szerkesztő nincs felkészítve. Ekkor magunknak kell utána járni, hogy az adott feladat hogyan oldható meg. Ezért célszerű először részletesen megismerkedni a nyelv lehetőségeivel, aztán használni valamilyen Weblap-szerkesztőt.

Egy szabvályos html-fájl felépítése:

<html> A html dokumentum kezdete.
  <head> A fej kezdete.
    <title> A cimke kezdete. (Ez jelenik meg a böngésző címsorában.) </title> A cimke vége.
    <meta Különböző, az egész dokumentumot jellemző adatok, beállítások. /> A meta tag vége.
  </head> A fej vége.
  <body> A törzs kezdete.
      Ide kerül a html-dokumentum szöveges és képi tartalma a formátumot megadó tag-ekkel együtt.
  </body> A törzs vége.
</html> A html dokumentum vége.

A szöveg böngészőben való megjelenésének sajátosságai:

- A szövegben legfeljebb csak egy Space-t vesz figyelembe.
- Egyetlen Enter-t sem vesz figyelembe.
- A szöveg szélessége a megjelenítő ablak méretéhez igazodik.
- A szöveg soronkénti igazítása a megjelenítő ablakhoz igazodik.
- A bekezdést a <p> </p> tag-pár határolja, a bekezdések között egy sor üresen marad.
- Ha a szöveget egy bekezdésen belül új sorba szeretnénk megjeleníteni, akkor a <br> (break) tag-et kell alkalmazni, amely tag-nek nincs befejező párja.

A html oldalak egyéb megjelenési sajátosságai:

- Ha betöltéskor egy képet nem talál, akkor helyette kis keretben egy X jelenik meg.
- Ha egy kép lassan töltődik le, akkor a kép mérete kerettel látható, és megfigyelhetjük a letöltés folyamatát.
- Ha egy lapon sok kép van, akkor a böngésző az éppen láthatókat próbálja előbb letölteni.
- A képletöltésről az állapotsorban tájékozódhatunk.
- Ha a lap teljesen letöltődik, akkor kész felirat jelenik meg a státuszsorban.
- Ha a lap letöltődött, de hibásan, akkor azt a státuszsorban jelzi a böngésző.
- Ha a lap valamely részét a böngésző nem tudja értelmezni, akkor azt figyelmen kívül hagyja.
- Ha a lapot egyáltalán nem tudja megnyitni, akkor erről teljes képernyős (ha keretben lenne, akkor csak a keretben) üzenetet küld, melyből esetleg lehet következtetni a sikertelenség okára.
- Mivel a hibás sorokat, utasításokat, hivatkozásokat a böngésző figyelmen kívül hagyja, néha nem könnyű rájönni a hiba okára, és ez esetben nehéz a hibás szakasz kijavítása.

Megjegyzések, kommentek elhelyezése a forrásban:

- Ha a Html oldal forrásában magyarázó szövegeket szeretnénk elhelyezni, akkor erre a következő lehetőségek állnak rendelkezésünkre:


- A comment tag és zárópárja egyenrangú a !-- és -- párral, mindkettővel több sort is rem-elhetünk.

Vissza a lap elejére

HEAD
A lap meg nem jelenő része a fej, mely a törzs előtt, <head> és </head> tag-ek között helyezkedik el. A dokumentum egészére vonatkozó beállításokat tartalmaz, illetve itt található a lapnak a környezettel való kapcsolatát leíró része. Utalást tartalmazhat a dokumentum származására, készítőjére. Itt helyezhetünk el utalásokat a lap tartalmára, mely az Internet keresőmotorjai számára segítenek besorolni a lapot különböző csoportokba. Ebben a szakaszban a következő tag-eket használhatjuk:

Vissza a lap elejére

BODY
A lap megjelenítendő részei - a törzs: szövegek, képek, linkek, táblázatok, animációk - a <body> és záró tag-ja közé kerülnek. Ennek tag-nek a bővítésével lehet a teljes lapra vonatkozó paramétereket beállítani. A most következő tulajdonságok mind opcionálisak, ha nem használjuk őket, akkor alapértelmezésük szerint történik a megjelenítés. Ezek: A fentieket a következőképpen használhatjuk: <body bgcolor=green background=hatter.jpg bgproperties=fixed topmargin=50 lang=en> ... </body>. A háttérszín és háttérkép egyidejű megadásának akkor van létjogosultsága, ha valami miatt a háttérkép nem jelenik meg, ekkor érvényesül a beállított háttérsztín. Ha megjelenik a háttérkép, akkor az a lap crollozása közben fix marad, az oldal pedig 50 pontos felső margóval jelenik meg, nyelve pedig angol - ebben a példában.

Vissza a lap elejére

CENTER
Alapértelmezés szerint a lapon a megjelenő elemek balra igazítva láthatók. Ha ezen módosítani szeretnénk akkor a következő lehetőségekből választhatunk:

Vissza a lap elejére

BASEFONT
Ezt a tag-et használhatjuk a body szakaszban az alapértelmezett fontkészlet definiálására. Ehhez a heállításhoz képest állíthatók a különböző relatív hivatkozások is, mint például a size=+1 a font szakaszon belül. A tag-et záró tag párjával együtt kell használni. Lehetséges paraméterek: Például a következőképpen használhatjuk: <basefont size=4 color=#334455 face="Courier New"> Szöveg, kép, stb ... </basefont>.


Vissza a lap elejére

FONT
A <font> és </font> tag-pár segítségével a köztük megjelenő szöveg karaktereinek tulajdonságait állíthatjuk be. Gyakorlatilag a <font> tag-et csak bővített formában használjuk. Ez azt jelenti, hogy a tag-en belül a különböző tulajdonságokat értékadással beállítjuk. A tulajdonságok egyenként és halmozottan is használhatók. Ezek: A fentieket együtt a következőképpen használhatjuk: <font size=4 color=blue face="Courier New, Century Gothic"> ... </font>. Figyelni kell arra, hogy ha a <font> tag-et lezárás nélkül újra használjuk, akkor annyiszor kell végül lezárni, ahányszor megnyitottuk, mert minden lezárás csak a legutolsó definiálást szünteti meg (úgy működik, mintha egymásba ágyazott zárójeleket alkalmaznánk egy matematikai képletben).

Vissza a lap elejére

Hx
Szövegszerkesztőkből megszoktuk, hogy a karaktereknek nemcsak típusát, nagyságát és színét adhatjuk meg, hanem további stílusok szerinti megjelenítést is kérhetünk. A html nyelvben a h1..h6 egy eleve definiált betűstílus, melyet címeknél használhatunk. A h1 a legnagyobb méretű és kövéren írott cím, míg a h6 a legkisebb. Címsor előtt és utána is sort hagy ki a böngésző. Minden hx tag-et a neki számszerint megegyező /hx tag-el kell lezárni. Lássuk a hatását: A címsor mellett további karakterformázási lehetőségekkel is élhetünk. Például aláhúzást, áthúzást, kövér írást, dőlt írást, alsó és felső indexet alkalmazhatunk. Lássuk ezeket a példákat is: Természetesen mindezt kombinálni is lehet: Ez a szöveg 5-ös betűméretű, kövér, dőlt és aláhúzott.

Vissza a lap elejére

P
Web-lapunk egyik legegyszerűbb tagolása a bekezdések (paragrafusok) alkalmazása. Erre a <p> és zárópárja a </p> tag-eket használhatjuk. A bekezdések egymástól egy (az érvényes betűméretből adódó méretű) sorral el vannak választva. A bekezdésekre különböző formázásokat alkalmazhatunk. Ezek a következők:

Vissza a lap elejére

UL-OL-DL
A megjelenítendő tartalom egyik legegyszerűbb rendezett megjelenítése a különböző listák. A listaelemek lehetnek szövegek, képek, linkek, illetve újabb listák. Használhatjuk például linkgyüjtemény, tartalomjegyzék, szótár, lexikon vagy menü kialakítására. A listának nevet is adhatunk, melyre két lehetőség van, vagy a lista kezdete előtt, vagy a listában a listaelemek felsorolása előtt (ekkor a név - a jelölés nélküli és a sorszámozott lista esetén - a listaelemeknek megfelelő bekezdéssel jelenik meg). Háromféle listából választhatunk:
Véletlen számot előállító függvény
Supervisor:
A hálózat rendszergazdája

Vissza a lap elejére

IMG
Web-lapjaink színvonalát nagyban megnöveli a rajta megjelenő megfelelő képek. A képeket külön fájlokban kell tárolni, és a html dokumentumban egy, a képre mutató hivatkozást kell elhelyezni. Nagyon fontos, hogy a kép olyan helyen legyen, mely helyet a lapot letöltő elérjen, ne tartalmazzon abszolút helyeket (pl.: meghajtó neveket), csak olyat, amelyek a web-lap helyéről relatív hivatkozással elérhetők (pl.: a hely valamely alkönyvtára, vagy egyszerűen ugyanazon mappában legyen, ahol a Web-lap). A másik fontos dolog, hogy a képfájl nevét, kiterjesztésével együtt, pontosan úgy kell feltüntetni, ahogy azt az operációs rendszer tárolja. A Linux alapú rendszerek érzékenyek a kisbetű-nagybetűre, tehát még erre is vigyázni kell, ha Linuxos környezetbe töltjük fel Web-lapunkat. A képre mutató hivatkozás a következő: <img src="a képfájl neve">. Ezt a tag-et a következő paraméterekkel egészíthetjük ki:

Vissza a lap elejére

MARQUEE
Web-lapjainkon mozgó szövegeket,képeket helyezhetünk el. A mozgatandó elemeket a <MARQUEE> tag és záró tag-je közé helyezzük el. A mozgás beállításához a következő paraméterek állnak rendelkezésünkre:

Ez itt egy felfelé mozgó szöveg, olyan mint amit a filmek végén szoktunk látni.


Vissza a lap elejére

TABLE
Adataink elhelyezésének igen gyakori módja a táblázatok. A táblázat <table> tag-el kezdődik, és </table>-vel fejeződik be. A táblázatot a forráslistába sorfolytonosan kell elhelyezni, azaz balról jobb és fentről lefelé. A sorok kezdetét a <tr> tag, cella kezdetét a <td> tag jelzi. A forrás átláthatósága miatt célszerű a sorokat bekezdésekben feltüntetni. Fejlécben a cellákat <th> tag-gel is megadhatjuk. Ekkor a fejlécben lévő szövegek kövéren szedettek és vízszintesen középre igazítottak lesznek. Az oszlop és sor tag-eknek is van záró tag-jük, melyet mindig ki is kell írni. Lássunk egy egyszerű táblázatot:
Óra/Gép Első gép Második gép
8 óra 12 darab 21 darab
9 óra 11 darab 14 darab
10 óra 23 darab 20 darab
Erről a táblázatról még nem is nagyon látszik, hogy táblázat. Hiányzanak a méretmeghatározások, keretvonalak és egyéb megjelenést meghatározó részletek. A teljes táblázatra vonatkozó paraméterek a következők:
A táblázat celláira külön-külön is formátumot és címkét állíthatunk be. Cellákon belüli formázási lehetőségek:
Nézzük hogyan néz ki az előző táblázat ezek használatával (az összevont cellának van címkéje):

Termelési értékek.
Óra/Gép Első gép Második gép
8 óra 12 darab 21 darab
9 óra 11 darab 14 darab
10 óra 23+20 darab

Vissza a lap elejére

A
A html oldalak egyik legjellegzetesebb tulajdonsága, hogy rajta olyan kapcsolódási helyek (hivatkozások) jeleníthetők meg, melyekkel a világ bármely publikus web-oldalára átléphetünk. Ezeket a kapcsolóelemeket linkeknek nevezzük. Linkké alakítható bármely látható elem. A linkek alapértelmezésben kék színnel (a kép kerettel) és aláhúzva jelennek meg, melyet természetesen a lap elején átdefiniálhatunk. Ha egerünket a link fölé visszük, akkor a státuszsorban megjelenik az ugrási cím, így akár azt is eldönthetjük, hogy valóban akarunk-e a felajánlott helyre ugrani. A cím az aktuális web-lap egy szakasza is lehet, olyan mint a jelen dokumentum eleje (minden szakasz végén erre mutató linket találunk). A lap elején pedig, mintegy tartalomjegyzékként, a dokumentum fejezeteire lehet ugrani. A hivatkozások típusai: lapon belüli ugrás, egy másik web-lap betöltése, egy másik web-lap belsejébe való ugrás, e-mail küldés vagy letöltés. Nézzük meg ezeket egy-egy pédával: Amennyiben a href leírása space-t tartalmaz, akkor azt "-ek közé kell tenni. Mint láthatjuk, igazi lap-váltás csak a második és harmadik esetben valósul meg. Ezekben az esetben megadhatjuk, hogy a web-lap hol jelenjen meg. Erre alkalmas a target tulajdonság, melyet a href után, még az <a> tag-en belül kell leírni. Lehetőségek:

Vissza a lap elejére

TEXTAREA
Ha egy szöveget külön keretben szeretnénk elhelyezni, akkor erre a legegyszerűbb megoldás a textarea és záró tag-e. E tag-ek közé kell írni a szöveget, melyhez meg kell adni a sorok számát, valamint a betűszámmal a szélességet. Ha a szöveg nem fér a megjelenítő ablakban, akkor a görgető sáv aktív lesz, és a nem látható szöveg az ablakba scrollozható. A lehetséges paraméterek tehát: A textarea keretben megjelenő szöveg editálható.

Vissza a lap elejére

FRAMESET
A html oldalunkon lehetőség van arra, hogy kereteket (keretcsoportot) hozzunk létre, melyekben külön-külön veblapokat jeleníthetünk meg. Kétféle hetőségből választhatunk ha összetett, mindkét irányban osztott felületet akarunk kialakítani. Egyik a keretek egymásba ágyazása egy olyan állományban, amelyben csak keretleírások vannak, másik lehetőség, olyan html oldal betöltése a keretbe, amely ismét keretet tartalmaznak. A <frameset> tag paraméterei: A <frameset> és záró tag-e között van lehetőség a megjelenő egyes keretek definiálására a <frame> tag segítségével. Ennek nincs záró tag-e. Lehetséges paraméterek: Előfordulhat, hogy egy böngésző nem tudja a kereteket kezelni, habár ez manapság egyre kevésbé valószínű. Erre az esetre az utolsó </frameset> tag után a követkető szakaszt kell leírni:
<noframe>
<body>
Ez a web-lap kereteket használ, de az Ön böngészője nem támogatja ezt a szolgáltatást!
</body>
</noframe>

Lássunk néhány konkrét példát a fentiekre:

Amennyiben a fenti listákban szereplő lapok a fő-lap mappájában léteznek, akkor azok a megfelelő helyre be is töltődnek. Ha valamely keretben például egy link-listát hozunk létre menü gyanánt, akkor minden link leírásába célként megadhatjuk például a középső nagyobb területet, és így a menün kattingatva, mindig a kívánt lapot láthatjuk középen.

Vissza a lap elejére

IFRAME
Ha nem akarjuk a teljes lapunkat keretekben megjelentetni, akkor lehetőség van egyedi keretek definiálására az <iframe> és záró tag-e segítségével. Ha a böngésző nem tudja megjeleníteni a belső keretet, akkor az erre az esetre vonatkozó üzenetet a nyitó és záró tag között kell elhelyezni. Lehetséges paraméterek:

Vissza a lap elejére

MAP
Lehetőségünk van képek alapján hivatkozásokat írni a lapunkra. A kép különböző részei fölé mozgatva az egeret - mintha térkép fölött járnánk, és onnan olvasnánk le információkat - különböző dolgok aktiválhatók ennek segítségével, miközben a képi tartalom utalhat a bekövetkező változásokra. Megtehetjük például, hogy a kép egy lakás alaprajza, és miközben az egérkurzort mozgatjuk a rajz fölött, akkor valahol egy keretben a helyiségekre jellemző adatok, vagy képek jelennek meg. De mint lejjebb látható, egyszerűen menüként is használhatjuk ezt a lehetőséget. Először a képet kell megjeleníteni, és a img tag-ben meg kell adni, hogy a képet milyen néven szeretnénk térképként használni. Ezt például így tehetjük meg: <img src=menu.jpg usemap=#menu border=0>, ahol a usemap utal a térképszerű használatra, hivatkozási név pedig: menu. Ezután következik a térkép leírása, melyet a <map name=menu> és a </map> tag-ek között kell megadni. Lényegében a területeket kell leírni, hogy milyen esemény következzen be, ha a terület fölé visszük az egeret, vagy felette kattintunk. Erre az <area> tag alkalmas, melynek nincs záró tag-e. Ebben a tag-ben először leírjuk az aktuális akciót, például href segítségével egy hivatkozást, majd pedig azt a területet, amely az eseményt képes aktiválni. A további paraméterek: Lássunk erre egy példát:


A kódrészlet pedig:
<center>
<img src=menu.jpg usemap=#menu border=0>
<map name=menu>
<area href=elso.html shape=rect coords=1,0,38,30>
<area href=masodik.html shape=rect coords=72,0,145,30>
<area href=harmadik.html shape=rect coords=180,0,270,30>
<area href=negyedik.html shape=rect coords=305,0,390,30>
<area href=otodik.html shape=rect coords=425,0,485,30>
</map>
</center>


Mivel a hivatkozási címek nem léteznek (elso.html, masodik.html, ...), a böngésző nem tudja végrehajtani a lapok betöltését!

Vissza a lap elejére

STYLE
Nem véletlen, hogy ez a jegyzet utolsó fejezete. A fentebb leírtak segítségével már sokmindent meg lehet oldani, de még nem minden lehetőség állna rendelkezésünkre, ha csak a fentieket használnánk. Ebben a szakaszban gyakorlatilag a stíluslapok segítségével beállítható tulajdonságokról lesz szó, de nem mindegyikről. Csak az általam ismert és fontosnak tartott formázási lehetőségeket ismertetem. Így a style-t most nem egy különálló tag-ként, hanem mindig valamely tag-en belül használjuk, azaz valamely tulajdonság beállítását végezzük vele. Éppen ezért úgy próbálom csoportosítani őket, hogy mely tag-ban, hogyan és mire használhatjuk. A stílus hatása annak a tag-nek a zárásáig érvényes, amelyben definiáltuk. Lássuk a csoportokat:

Vissza a lap elejére