13. fejezet: BODY és META


A teljes értékű weblapok korrekt megjelenítéséhez, valamint a keresőrobotok jobb kiszolgálása végett igen fontos az ún. nem látható tagek rendszeres használata. A HTML5 különösen felértékeli ezt a lehetőséget, mivel szinte minden formázást ezzel érdemes (és lehet) megcsinálni.
Lássunk először is egy több soros mintát: (htmlpelda27.html)

<HTML>
<HEAD>
<TITLE>Ez a cím</TITLE>
<META name="description" content="Lap leírása">
<META name="keywords" content="Kulcsszavak">
<META name="generator" content="Mivel lett csinálva">
<META name="author" content="Szerző neve">
<META name="robot" content="index,follow">
<META http-equiv="Expires" content="Fri, 07 Jul 2017 14:25:27 GMT">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
Na, csak ez a látható!
</BODY>
</HTML>

Látható, hogy maga a HTML-tartomány két részre oszlik. Van egyrészt egy fejléc <HEAD> és </HEAD> között, valamint egy szövegtörzs a <BODY> és a </BODY> között. Eddig csak ez utóbbi került sorra. A fejléc megléte nem kötelező, de sokat tud segíteni a következő elemekkel:
<TITLE> A Dokumentum címe </TITLE>. Az elem szerepeltetése azért is lényeges, mert ez kerül a böngésző címsorába!
A <META> kezdetű elemeknek nincsen zárórésze és nem is jelennek meg, de annál hasznosabbak! Használata kizárólag a fejlécben engedélyezett. Fontosabb elemei:
-    Description: pár szavas leírás - őszintén!
-    Keywords: A lapra jellemző kulcsszavak a keresőrobotoknak.
-    Generator: Milyen programmal lett a lap elkészítve. (Pl. Jegyzettömb)
-    Author: A szerző neve, esetleg E-mail címe!
-    Robots: Parancsok a keresőrobotok számára. Lehetséges értékek: "index/noindex" indexelhető vagy nem; "follow/nofollow" követhetők a hivatkozások vagy nem. Mivel úgyis mindkettőt használni kell, ezért célszerű helyettük írni a "deny" szót (tilos mindkettőt), illetve az "all" szót, amely mindkét tevékenységet engedi.
-    Expires: Lejárat ideje. Ha pl. csak minden hónap elsején frissíti a lapját, akkor érdemes a mindig következő frissítési dátumot beírni. Így közvetlenül a Proxy-kből is le tud töltődni a lap. Ha mindig a legfrissebb tartalmat akarja láttatni, akkor időpont helyett egyszerűen a "NOW" (=most) szót kell beírnia.
Valamennyi <META name=...> kezdetű tagben használható a lang=”en”, vagy a lang=”hu” paraméter, ami a nyelvet jelöli. Indexelni például nem bűn angolul akkor is, ha a lap kizárólag magyar!
-    A HTTP-EQUIV egy már lehetőséget rejt. Ugyanis itt megadhatjuk a böngészőnek, hogy az adott dokumentum mikor veszti érvényét. Így ha a böngésző újabb parancsot kap a dokumentum letöltésére, akkor ha a cache-ben eltárolt határidő előtt van még a weblap, akkor nem bajmolódik a letöltéssel, hanem beolvassa magából a gépből és már készen is van. Célszerű egy weblapnál nem túl távoli időpontot megadni!
-    A másik sor (<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=utf-8”>) pedig a magyar karakterkészlet használatára készíti elő a gépet.
-    Lehetőség nyílik arra is, hogy egy dokumentumot állandóan frissítsünk. A <META HTTP-EQUIV=”refresh” CONTENT=2> használata például 2 másodpercenként frissít egy weblapot! (Tőzsdei árfolyamoknál még jól jöhet.)
-    Több értelme lehet egy másik webhely automatikus betöltésének. A <META HTTP-EQUIV=”refresh” CONTENT=”5; URL=http://www.tferi.hu/”> tag például az URL-ben megadott webhelyet hozza be 5 másodperc elteltével!
-    Szintén érdemes használni a <META HTTP-EQUIV=”Reply-to” content=”Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.” taget is, ami a lehetséges válaszcímet adja meg.
Egy másik fontos elem a <BODY> és a </BODY> közé ékelt szövegtörzs nyitóeleme. Rengeteg lehetőséget tartalmaz és igen sokféleképpen lehet alkalmazni. Lehetséges paraméterei közül csak a lényegesebbek kerülnek itt felsorolásra:
-    BGCOLOR="színkód" - background color; A háttérszín neve vagy kódja.
-    ALINK="színkód" - active link; Az éppen aktív link(ek) színkódja vagy neve.
-    VLINK="színkód" - visited link; A már meglátogatott linkek színkódja vagy neve.
-    LINK= "színkód" - link's color. A még meg nem látogatott linkek színkódja vagy neve.
-    TEXT="színkód" - text color; A sima (linkek nélküli) szöveg színkódja vagy neve.
-    BACKGROUND="url" - Háttérkép neve (esetleges útvonallal).
-    BGPROPERTIES=FIXED - Vízjel megadása. Ez így nem gördíthető!
-    TITLE="szöveg" - Ez a szöveg lesz kiírva az egérmutató fölé (mintegy segítségként), ha az ablak fölé ér.
-    NOWRAP="TRUE" - Szöveg nem törhető meg automatikusan. Alapértelmezés: NOWRAP="FALSE".
-    SCROLL="NO" - Eltünteti az oldalsó görgető csíkot. Alapértelmezés: SCROLL="YES". Lehetséges érték még: "AUTO" (automatikus).
-    BOTTOMMARGIN=n - Alsó margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0.
-    TOPMARGIN=n - Felső margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0.
-    LEFTMARGIN=n - Bal oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0.
-    RIGHTMARGIN=n - Jobb oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0.

További elemek is lehetnek a weblap fejlécében:
-    <ISINDEX> : Nem tartalmaz semmi szöveget és nincsen záróeleme sem. A böngésző számára jelzi, hogy kereshető (indexelhető) dokumentumról van szó. Javasolt helyette a "robots" META-tag használata.
-    <LINK> : Jelzi a dokumentum kapcsolatát más dokumentumokkal, stíluslappal címszalaggal, stb. Kell záróelem. Paraméterei: DISABLED - megtiltja az elem használatát; HREF="url" - élőkapocs létrehozása; MEDIA="SCREEN" vagy MEDIA="PRINT" vagy MEDIA="ALL" - meghatározza a dokumentum kimenetét, lehetőségek: képernyő, nyomtató, minden (alapértelmezés).
23. feladat: Készítsen egy saját önéletrajzát tartalmazó weblapot, melyen jobb felső sarokban szerepel az Ön arcképe (max. 2x3 cm-es méretben). A weblapot tegye kereshetővé!


Folytatása következik!