Ennek egy lehetséges technológiája a következő lehet:
(1) hívjuk be a Microsoft FrontPage HTML szerkesztőt és írjunk be -- vagy másoljunk be vágólapról -- egy rövid szöveget.
(2) formázzuk meg a szöveget; például ott, ahol szükségét érezzük, állítsunk be megfelelő(2.1) betűtípust::
karakterméretet (pl. 18pt),
karakterstílust (félkövér, dőlt, aláhúzott, áthúzott,
föléhúzott,
kiskapitális, stb.),
fonttípust (pl. Arial, Courier New, de választhatunk "egzotikusabb" fonttípusokat is) és
karakterszínt (pl. piros) és kiemelőszínt (pl. sárga).
(2.2) felsorolást:bekezdés-igazítást középre,
bekezdés-igazítást jobbra,
bekezdés-igazítást sorkizárt módon (többsoros bekezdésre, pl. a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba, a, ab, abc, ba).
(3) válasszuk el azokat a szövegrészeket vízszintes vonallal, amelyeket érdemes lenne logikailag "külön lapon" szerepeltetni
(4) állítsuk be a lap (háttér)tulajdonságait:
a weblap címének írjuk be, hogy Első weblapom, és
állítsunk be világosszürke háttérszínt.
(5) végül mentsük el az elkészített szöveget weblap.html néven (lehetőleg a Temp könyvtárba).
(6) Hozzunk létre egy újabb weblapot masodik.html néven.
A HTML nyelv weblapok leírására szolgáló jelölő nyelv, aminek az alapgondolata az, hogy egy weblap különböző elemeit (például bekezdések, felsorolások vagy listák, táblázatok, képek, hipertext kapcsolatok vagy linkek, stb.) <> jelek ("kacsacsőrök") között megadott HTML 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 igaz, hogy egy elem kezdetét egy kezdőtaggal, végét pedig egy zárótaggal adjuk meg. A zárótagot úgy képezzük, hogy a kezdőtag kódjához egy / jelet adunk - így járunk el például karaktersorozatok, bekezdések, felsorolások és táblázatok esetén. Azonban ha egy 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 (kezdő)tagot adunk meg, és ebben használhatjuk a / jelet a tag végén (bár a HTML ezt nem teszi kötelezővé). Például a sortörést megadhatjuk
<BR> vagy <BR />
módon. 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 elválasztó karaktereket (white space), például sortöréseket és szóközöket, a böngészőprogramok egy szóközzel helyettesítik. Ez alól a szabály alól egy kivétel van: a <PRE> és </PRE> HTML tagok között egy előre formázott bekezdést adhatunk meg, amelyben minden szóköz és sorvége jel ugyanúgy jelenik meg, mint egy "hagyományos" szövegszerkesztőben.
|
|
forráskód |
megjelenített kód |
Megjegyzés: ha a PRE tagok használata nélkül akarunk egymás után több szóközt megjeleníteni, akkor az kódot kell használnunk a szóköz karakter helyett, amely a HTML-ben egy ún. nem törhető szóközt (non-breakable space) ad meg. Ez szóközként jelenik meg a böngészőben, de "normál", azaz nem elválasztó karakterként viselkedik. Érdekesség, hogy egyes böngészők csak akkor jelenítik meg helyesen a HTML dokumentumokban egymás után több BR taggal (vagy esetleg P taggal, mivel egy új bekezdés kezdete automatikusan soremeléssel jár) megadott sortöréseket, ha azok között legalább egy nem törhető szóköz karakter is szerepel. Tehát pl.
<BR><BR><BR>
helyett érdemes a
<BR> <BR> <BR>
kódot használni.
A nem törhető szóközhöz hasonlóan más karaktereket is megadhatunk hasonló alakban, ún. entitáskódok formájában. Az entitáskódokat egy -- angol nyelven -- könnyen megjegyezhető, ún. mnemonikus kód segítségével írjuk le az & kezdő és ; záró karakterek között; pl. a " entitáskód az idézőjelet (quotation mark) adja meg. De megadhatjuk az entitáskódokat a megfelelő karakter (szám)kódjával is a &# kezdő és ; záró karakterek között is; pl. a " entitáskód ugyanúgy az idézőjel karaktert adja meg. A fontosabb mnemonikus kódok, ill. az összes, számkóddal megadható entitáskód megtekinthető itt.
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 (tükrözési
elv; hasonlóan
járunk el ahhoz, mint amikor egy matematikai képlet esetén több zárójelet kell
egymásba ágyazni). 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.
A weblap különböző elemeinek tulajdonságait a HTML kódokban meghatározott attribútumok (vagy paraméterek) é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>
Jegyezzük meg, 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ú vízszintes vonalat megadhatunk
<HR SIZE="10" COLOR="red">
módon. (Megjegyzés: a piros színt egy vízszintes vonal esetén nem mindegyik böngészőprogram tudja megjeleníteni!) 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 MT betűtípust akarunk használni, de tudjuk, hogy 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 Matura MT Script Capitals, amelyet a következőképpen adunk meg:
<FONT FACE="Brush Script MT, Matura MT Script Capitals">xyztuv...</FONT>
Vegyük észre, hogy a fonttípusokat vessző választja el, így a FACE attribútum értékeként megadott fontlistát idézőjelek közé kell tenni.
Próbáljuk ki az utoljára megadott kódokat:
|
|
forráskód |
megjelenített kód |
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 úgy, hogy a weblap forráskódját a Jegyzettömb alkalmazásban nyitjuk meg:
1. adjunk meg (például ezüstszínű) háttérszínt az egész dokumentumra:
<BODY BGCOLOR="silver">
2. adjunk meg (például cián, azaz zöldeskék) háttérszínű főcímet a
dokumentumban:
<H1><FONT STYLE="background: cyan">(valamilyen főcím)</FONT>
</H1>
3. tegyünk be egy jobbra igazított, piros színű vonalat a dokumentum
végére és alá helyezzük el jobbra igazítva és dőlt betűstílussal a mai
dátumot:
<HR COLOR="red" ALIGN="right">
<P ALIGN="right"><I>2008.08.20.</I></P>
4. cseréljük ki a dátum jobbra igazítását megvalósító <P ALIGN="right"> és az
ezt záró </P> tagot a
<DIV ALIGN="right"> és </DIV>
tagokkal, amelyek jobbra igazítják a dátumot, de nem helyeznek el
térközt
előtte.
5. 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>
6. töltsünk le egy képet az Internetről (amely "hasonlít" a weblap
szerzőjéhez, Szép Ilonkához) ugyanabba a mappába, amelyben a weblap is van. Legyen ez a kép pl. rajz.jpg
(a böngészők alapértelmezésben csak a JPG, GIF és PNG típusú képeket ismerik
fel). Illesszük be a képet közvetlenül a cím után (az utána következő adatok elé) és
igazítsuk jobbra a következőképpen:
(itt van a főcím)
<IMG SRC="rajz.jpg" ALIGN="right" WIDTH="40%">
(itt jönnek a további adatok)
(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 kép megjelenítésekor a kép magasságát
a böngészőprogram automatikusan az eredeti kép arányainak megfelelően fogja
beállítani.)
7. a forráskód végén (a dátum előtt) elhelyezett <HR ...> forráskód
elé tegyünk be egy sortörést, amely megszünteti a jobbra igazított kép bal
oldalán levő üres terület további kitöltését (azaz a kép balról történő
"körbefolyatását"):
<BR CLEAR="right">
<HR ...>
CSS: AZ ALAPOK
A CSS (Cascaded Style Sheets) nyelv weblapok formázására szolgáló stílusleíró nyelv, amely jelentősen kibővíti a HTML formázási lehetőségeit úgy, hogy az egyes HTML tagokhoz speciális formátumokat rendelhetünk.
A formátum megadása (declaration) CSS nyelven úgy történik, hogy először megadjuk a formátum jellemzőjét (property), és kettőspont után a megadott jellemző értékét (value). Egyszerre több formátumot is megadhatunk pontosvesszőkkel elválasztva.
A legegyszerűbb
esetben a CSS nyelven leírt formátumot közvetlenül a HTML kódba ágyazzuk bele a
(gyakorlatilag minden HTML taghoz hozzákapcsolható) STYLE attribútum értékeként
megadva. Például keretezzük be a HELLO! feliratot vastag, tömör és kék színű
vonallal úgy, hogy a formátumot a FONT taghoz rendeljük hozzá:
|
|
forráskód |
megjelenített kód |
A másik lehetőség az, hogy az általunk kiválasztott HTML tagokhoz a dokumentum fejrészében adjuk meg a CSS formátumokat. Például ha a főcímet piros betűszínnel akarjuk megjeleníteni és középre akarjuk igazítani, ezt a következőképpen tehetjük meg:
...
<HEAD>
...
<STYLE TYPE="text/css">
H1 {
text-align: center;
color: red;
}
</STYLE>
</HEAD>
...
Ennek a megadásnak a problémája az, hogy a megadott tag(ok) a dokumentumban mindig a megadott formátummal fognak megjelenni (hacsak egy STYLE attribútummal a tagban ezt nem definiáljuk át). A megoldás a tagok különböző formátumosztályokba (class) sorolása. Például definiáljunk egy "piros" és egy "kek" főcím-osztályt a következőképpen:
...
<HEAD>
...
<STYLE TYPE="text/css">
H1.piros {
text-align: center;
color: red;
}
H1.kek {
text-align: center;
color: blue;
}
</STYLE>
</HEAD>
...
Ekkor a <H1 CLASS="piros">Piros főcím</H1> kód piros főcímet, a <H1 CLASS="kek">Kék főcím</H1> kód kék főcímet fog megjeleníteni.
Ha az általunk használt formátummegadásokat összegyűjtjük egy formatumok.css nevű fájlba, erre is hivatkozhatunk:
...
<HEAD>
...
<STYLE TYPE="text/css">
@import url(formatumok.css);
(további formátumdefiníciók)
</STYLE>
</HEAD>
...
A fájlban megadott formátumokat a böngésző beolvassa, és a
továbbiakban úgy használja őket, mintha közvetlenül a dokumentumba írtuk volna
be a fájlban lévő sorokat.
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!
3. Készítsen olyan weblapokat, amelyben kipróbálja a FrontPage minél több lehetőségét, és amelyek hipertext linkekkel egymásra hivatkoznak!
4. Válasszon ki az Interneten egy -- nem túl bonyolult -- weblapot, töltse
le, és nézze meg a forráskódját! Keressen a weblap forrásában legalább öt olyan
elemet, amelyet nem ismer, és "fordítsa le" őket a weben található HTML leírások segítségével!
Írja le ezeknek az elemeknek a jelentését, és próbálja ki őket egy saját
készítésű weblapban!