1. Hogyan épül fel egy HTML-oldal

Alapok

HTML - HyperText Markup Language, vagyis nyers fordításban: Hiperszöveg-leíró nyelv. Az interneten található honlapok, oldalak túlnyomó többségét ezzel a nyelvvel írják le, és ezek kódjait jelenítik meg az internetes böngészők, mint pl. az Explorer vagy a Netscape. A HTML, mint a nevében is benne van, egyszerű leíró nyelv, létrehozásához semmiféle speciális szerkesztőprogram nem szükséges, bármilyen egyszerű, szöveg létrehozására alkalmas program, mondjuk a Windows Notepad-je, vagy a Norton Commander saját szerkesztője is tökéletesen alkalmas. Más kérdés, hogy rendkívül kényelmetlen, de elvileg az MS-DOS "copy con ..." parancsát használva is írhatunk HTML-fájlokat. Az oldal szerkesztője azonban a bevitel során nem látja a később megjelenítendő eredményt, ellentétben egy HTML-editorral. A leírónyelv tulajdonságból következik az is, hogy a bevitel során teljesen mindegy, hogy a kód beírásakor például kis- vagy nagybetűket használunk (kivétel ezalól természetesen a látható szöveg), vagy hogy mondjuk egy kép tulajdonságait milyen sorrendben adjuk meg.

Az oldal részeinek elválasztása, tagolása, az objektumok tulajdonságainak meghatározása ún. "tag"-ekkel, valamint azok "attribútum"-aival történik. A tageket hegyes zárójelbe (< és >) tesszük. Az attribútumok (vagyis a tulajdonságok meghatározása) ezeken belül történik. Attribútumok szerepelhetnek önmagukban is, de rendszerint értékeket rendelünk hozzá. Például az <IMG SRC="nyil.gif"> azt jelenti, hogy egy kép (image) következik, melynek forrása (source) az adott könyvtárban található nyil.gif nevű fájl. Az előbb látott kódban az IMG jelöli a taget, az SRC az attribútum, a nyil.gif pedig a hozzárendelt érték. A tagek többségét le is kell zárni, melynek kódja maga az adott tag, azzal a különbséggel, hogy neve elé egy / jelet teszünk: Ez itt <B>vastag</B> betű. Ebben a feliratban a "vastag" szó félkövér betűkkel jelenik meg; a <B> jelzi, hogy az utána álló szövegrész vastagabban (bold) jelenjen meg, a </B> tag pedig lezárja azt, így a "betű" szó már ismét normál betűként jelenik meg. Természetesen minden tagot lezárhatunk a fentebb említett módon, de némelyeknél különösebb értelme nincsen. Elvileg tehát egy kép után beírhatjuk a </IMG> taget, a böngésző ezt azonban figyelmen kívül hagyja. Ugyancsak semmisnek tekinti valamennyi böngésző az olyan tageket, melyeket - bármilyen okból - nem ért. Az Explorer például, a Netscape-pel ellentétben nem ismeri a villogó szöveget eredményező <BLINK> taget, ezáltal az ezzel jelzett szövegrész az Explorerben folyamatosan olvasható: Ilyen a <BLINK>villogó</BLINK> szöveg. Ennek ellenére a <BLINK> és a </BLINK> tagek nem fognak sehol sem megjelenni. Ha valakinek van mind a kettő böngészője, próbálja ki nyugodtan.

Egy oldal szerkezete

Minden oldalt a <HTML> tag nyit meg, és értelemszerűen a </HTML> tag zár le. Ezen belül az oldal két jelentős egységből áll, az első a fejléc, melyet a <HEAD> tag jelöl, a második pedig maga az oldalt tartalmazó egység, melyet a <BODY> és a </BODY> tagek fognak közre.

A fejlécben találhatóak az oldalt leíró alapinformációk, mint például a használt karakterkészlet (kelet-európai, nyugati, cirill, stb.), az oldal keresőszavai, az oldal készítője, stb. Ezek az ún. metainformációk, melyeket a <META> taggel valamint attribútumaival adunk meg. Például a <META NAME="description" CONTENT="HTML-tankönyv"> kód az oldal rövid, néhány szavas leírását adja meg, például a keresőprogramok használóinak számára. Egyik használata sincs előírva, elvileg akár az egész fejlécet is kihagyhatjuk, de egyrészt illik alapinformációkat megadni, másrészt ez sok előnyt rejthet magában. Itt adhatjuk meg többek között magát az oldal címét, amit a böngésző megjelenít az ablak címsorában: <TITLE>Ez egy megcímzett oldal</TITLE>. Amint az a mintánál látható, az oldal forráskódjában nem használtuk a <HEAD>...</HEAD> tageket, joggal kérdezhetjük tehát, minek vannak, ha az oldal ezek nélkül is tökéletesen működik. Erre csak azt lehet válaszolni, hogy az oldal valóban megy így is, de durva pofátlanság lenne mellőzni használatukat, hiszen az oldal egy idő után teljesen áttekinthetetlenné válhat, és ha mi meg is értjük, adódhat úgy, hogy másnak is bele kell szerkesztenie az oldalba. Csak aztán találja meg, amit keres benne...

Az oldal másik nagy egysége a "törzs" (body). Az oldal valódi tartalma, a szövegek, képek, táblázatok, stb. leírása mind itt találhatóak meg. Az olyan információk, mint például az oldal háttérszíne, háttérképe, a szöveg színe, stb. magában a <BODY> tagban, azok attribútumaiban találhatóak meg. a <BODY BGCOLOR="red"> például azt adja meg, hogy az oldal háttere piros színű legyen. Néhány éve a HTML-szabványban definiáltak néhány színt, így például a fent említett vöröset (red), kéket (blue), feketét (black), fehéret (white), tarkát nem... stb., célszerűbb azonban ezek helyett ún. RGB-kódot alkalmazni. Az RGB (Red-Green-Blue, vagyis Vörös-Zöld-Kék) kódrendszer az említett három szín keverési arányát adja meg hexadecimális (tizenhatos számrendszer-beli) kódokkal 0 és FF (decimális számrendszerben 0 és 255) között. Így például az előbb említett vörös szín kódja FF-00-00 lesz.

Készítsünk most egy egészen egyszerű kis oldalt, mely a következő jellemzőkkel rendelkezik:

- Az oldal címe "Első oldalam" legyen
- Az oldal háttérszíne sötétkék, a szöveg színe sárga legyen
- A szövegben ez álljon: "Lehet, hogy végül megtanulok egy kis HTML-kód szerkesztést? Nocsak!"

És akkor lássuk az oldal forráskódját:

<HTML>
<HEAD>
<TITLE>Első oldalam</TITLE>
</HEAD>
<BODY BGCOLOR="#00007F" TEXT="#FFFF00">
Lehet, hogy végül megtanulok egy kis HTML-kód szerkesztést? Nocsak!
</BODY>
</HTML>

Összefoglalás

Tag	Attribútum	Hozzárendel- hető érték	Magyarázat
BODY	ALINK	#[RGB-kód]	aktív link színe
	BACKGROUND	[képfájl]	háttérkép
	BGCOLOR	#[RGB-kód]	háttér színe
	LINK	#[RGB-kód]	link színe
	TEXT	#[RGB-kód]	normál szöveg színe
	VLINK	#[RGB-kód]	látogatott link színe
META	HTTP-EQUIV; CONTENT	content-type; text/html, charset=[kód]	szöveg típusa (jelen esetben ez ugye csak HTML lehet) ill. karakterkészlet kódja
	NAME; CONTENT	author; [név]	oldal szerzője
	NAME; CONTENT	description; [szöveg]	oldal rövid szöveges leírása
	NAME; CONTENT	keywords; [kulcsszavak]	oldal kulcsszavai (vesszővel elválasztva)
TITLE			oldal címe

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">
<META NAME="author" CONTENT="Farkasházy Attila">
<META NAME="description" CONTENT="Ez egy kis mintaoldal, mely főleg metainformációkat tartalmaz">
<META NAME="keywords" CONTENT="html, meta, fejléc, tankönyv">
</HEAD>
<BODY BACKGROUND="hatter.jpg" BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#7F7FFF" VLINK="#0000FF" ALINK="#FF0000">
<TITLE>Mintaoldal</TITLE>

Bevezető
Következő fejezet