A HTML nyelv weblapok leírására szolgáló egy jelölõ nyelv, aminek az alapgondolata az, hogy egy weblap különbözõ elemeit <> jelek ("kacsacsõrök") között megadott HTML elemek vagy tagok segítségével azonosítjuk. A szabályok egyszerûek; például egy bekezdés kezdetét a <P> taggal, végét a </P> taggal adhatjuk meg (a tagokban a nagy- és kisbetûk között általában nem teszünk különbséget):
<P>Ez egy bekezdés</P>
Általában is igaz, hogy egy tag végét úgy képezzük, hogy a kezdõtaghoz egy / jelet adunk - így járunk el például bekezdések, karaktersorozatok, felsorolások és táblázatok esetén. Ha olyan HTML elemet adunk meg, amelynél nincs értelme zárótagot használni (például sortörés, egy vízszintes vonal vagy egy kép esetén), akkor csak egy tagot adunk meg, és ebben használhatjuk a / jelet a tag végén; például a sortörést megadhatjuk
<BR />
módon. (Ilyenkor a / jel akár el is hagyható.) Fontos tudni, hogy a HTML dokumentumokban a sortöréseket külön, "kézzel" kell megadnunk, mert a HTML dokumentum forrásszövegében szereplõ egymás utáni sortöréseket és / vagy szóközöket a böngészõprogramok egy szóközzel helyettesítik.
A HTML tagokat szükség esetén egymásba is ágyazhatjuk. Tipikus példa az, amikor egy bekezdésen belül a karaktereket meg akarjuk formázni. Például, ha az elõzõ bekezdésben dõlt (Italic) karaktereket akarunk használni, akkor azt megtehetjük
<P><I>Ez egy bekezdés</I></P>
módon. Egy (például formázást megadó) HTML tag hatóköre addig terjed, amíg a tagot le nem zárjuk. Tehát ha az elõzõ példa bekezdés szavát félkövér (bold) betûstílusban akarjuk megjeleníteni, akkor ezt megtehetjük
<P><I>Ez egy <B>bekezdés</B></I></P>
módon. Vegyük észre: ha több HTML tagot
ágyazunk egymásba, akkor elõször mindig
azokat a tagokat zárjuk le, amelyeket késõbb
kezdtünk el (hasonlóan ahhoz, amikor egy matematikai képlet
esetén több zárójelet használunk). Tehát
"szigorúan" tilos például az elõzõ példában
<P><I>Ez egy <B>bekezdés</P></I></B>
tagsorrendet kialakítani.
Megjegyzés: ha megfigyeljük a (Microsoft)
Word által generált weblapokat, ez a szabály nem mindig
teljesül...
A weblap különbözõ elemeinek tulajdonságait attribútumok és értékek segítségével adhatjuk meg; például, ha az elõzõ bekezdést középre szeretnénk igazítani, ezt úgy tehetjük meg, hogy az ALIGN attribútumnak CENTER értéket adunk:
<P ALIGN=CENTER>Ez egy bekezdés</P>
Vegyük észre, hogy a zárótagban nem kell megadni az attribútumokat.
Szükség esetén több attribútum = érték párt is használhatunk egy HTML tagon belül. Például egy piros, 10 képernyõpont (pixel) magasságú vizszintes vonalat megadhatunk
<HR SIZE=10 COLOR=RED />
módon. Ilyenkor az attribútumok sorrendjének nincs jelentõsége, csak arra kell vigyáznunk, hogy mindig egy szóközzel elválasszuk õket. Az attribútumok értékét megadhatjuk idézõjelek között is; ez kötelezõ akkor, ha az értékben szóköz, vagy más, elválasztó hatású karakter (vesszõ, stb.) szerepel. Például, ha Brush Script betûtípust akarunk használni, de tudjuk, hogy ilyen sok számítógépen nincs ilyen font nincs telepítve, akkor megadhatunk egy alternatív fonttípust, amelyet akkor használ a böngészõ, amikor az elsõdleges fonttípust nem találja. Legyen ez a Matisse ITC, amelyet a következõképpen adunk meg:
<FONT FACE="Brust Script, Matisse ITC">xyztuv...</FONT>
Vegyük észre, hogy a fonttípusokat vesszõ választja el, így a FACE paraméter értékeként megadott fontlistát idézõjelek közé kell tenni.
Ezzel lényegében összefoglaltuk a HTML dokumentumok szintaxisának legfontosabb elemeit. Ezek után végezzük el a következõ változtatásokat az 1-5 lépésekben létrehozott weblapon (a már meglevõ kódokat változatlanul hagyva):
1. adjunk meg (például ezüstszínû) háttérszínt
az egész dokumetumra:
<BODY BGCOLOR=SILVER>
2. adjunk meg (például cián, azaz zöldeskék)
háttérszínt a dokumentum fõcímére:
<FONT STYLE="background: cyan">AZ ÉN WEBLAPOM</FONT>
3. töröljük ki a felesleges soremeléseket:
<P> </P>
(minden <P> tag automatikusan egy soremelést jelent, az
un. entitáskód pedig egy "nem törhetõ szóközt"
ad meg, amely szóközként jelenik meg a böngészõben,
de "normál", azaz nem elválasztó hatású
karakterként viselkedik)
4. tegyünk be egy jobbra igazított, piros színû
vonalat a jobbra igazított dátum elé:
<HR COLOR=RED>
Megjegyzés: vigyázzunk, hogy a <HR COLOR=RED> tag
a dátum jobbra igazítását megvalósító
<P ALIGN=RIGHT> tag elé (tehát ne utána!)
kerüljön!
5. cseréljük ki a dátum jobbra igazítását
megvalósító <P ALIGN=RIGHT> és az ezt záró
</P> tagokat a
<DIV ALIGN=RIGHT> és </DIV>
tagokkal, amelyek jobbra igazítják a dátumot,
de nem emelnek sort elõtte.
6. a "küldj bátran egy e-mail-t" felirathoz rendeljük
hozzá a weblap szerzõjének e-mail címét
(legyen ez pl. szepilonka@delfin.klte.hu), hogy rákattintva
azonnal lehessen levelet küldeni neki:
<A HREF="mailto:szepilonka@delfin.klte.hu">küldj bátran
egy e-mail-t</A>
7. töltsön le egy képet az Internetrõl (amely
"hasonlít" a weblap szerzõjéhez) ugyanabba a mappába,
amelyben a weblap is van. Legyen ez a kép pl. rajz.jpg (a
böngészõk csak a jpg, gif és png típusú
képeket ismerik fel). Illessze be a képet a cím után
jobbra igazítva a következõképpen:
<IMG SRC="rajz.jpg" ALIGN=RIGHT WIDTH=40%>
(a WIDTH=40% attribútum - érték párral
a kép szélességét az ablak szélességéhez
képest 40%-ra állítjuk be)
A kapott weblap "végleges" változatát itt nézheti meg.
A kapott weblap HTML forráskódja:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>AZ ÉN WEBLAPOM</TITLE>
</HEAD>
<BODY BGCOLOR=SILVER><B><FONT FACE="Arial" SIZE=6 COLOR="#ff00ff" STYLE="background: cyan">
<P ALIGN="CENTER">AZ ÉN WEBLAPOM</P>
</B></FONT><FONT SIZE=2>
</FONT>
<IMG SRC="rajz.jpg" ALIGN=RIGHT WIDTH=40%>
<B><P>Nevem:</B> Szép Ilonka</P>
<B><P>Korom:</B> 20 év</P>
<B><P>Foglalkozásom:</B> egyetemista, <I><FONT SIZE=1>most épp Internet speciálkollégiumon veszek részt</P>
</I></FONT><B><P>Hobbim</B> sok van; például (ábécé rendben)</P><UL>
<LI>evés,</LI>
<LI>olvasás,</LI>
<LI>tanulás,</LI>
<LI>táncolás.</LI></UL><B><P>Egyéb adataim:</B> <A HREF="mailto:szepilonka@delfin.klte.hu">
küldj bátran egy e-mail-t!!!</A></P>
<HR COLOR=RED>
<FONT SIZE=2>
<I><DIV ALIGN="RIGHT">
Debrecen, 2002. április 9.</DIV></I></FONT></BODY>
</HTML>
2. Keressen a HTML leírásokban legalább öt olyan formázási lehetõséget, amelyrõl eddig nem volt szó, és próbálja ki õket az elkészített weblapon! Küldje el az elkészített weblapot és a hozzárendelt képet csatolt fájlként!
3. Készítsen a Word segítségével egy olyan weblapot, amely táblázatot is tartalmaz, és formázza meg ezt a weblapot is! Küldje el az elkészített weblapot csatolt fájlként!
4. Válasszon ki az Interneten egy - nem túl bonyolult - weblapot, és nézze meg a forráskódját! (Internet Explorer esetén a Nézet menü Forrás menüpontja segítségével teheti ezt meg.) Keressen a weblap forrásában legalább öt olyan elemet, amelyet nem ismer, és "fordítsa le" õket a HTML leírások segítségével! Írja le ezeknek az elemeknek a jelentését!
A válaszokat max. négy oldalas szövegfájlok (text fájlok) formájában, a talált hivatkozásokat is feltüntetve - közvetlenül a levélben vagy csatolt fájlként - küldjék el a bodai@math.klte.hu címre. A kérdésekre adott válaszokból összeállított anyagot a következõ gyakorlatokon elolvashatják.
