kategória

Biológia állatok Fizikai Földrajz Kémia Matematika Növénytan Számítógépes
Filozófia
Gazdaság
Gyógyszer
Irodalom
Menedzsment
Receptek
Vegyes

A HTML nyelv

számítógépes

egyéb tételek

A programozasi technikak és jellemzõik

PÉLDÁK PLC ALAPÚ IPARI AUTOMATIZÁLÁSRA

Az Excel diagramjai

Az Excel alapjai

Mûveletek, kifejezések kiértékelése, precedencia szabaly. Az értékadó utasítas. Standard beviteli és kiviteli eljarasok.

"Office" programok

Szöveges adatbazisok

Interaktív adatbaziskezelõ rendszerek

Az ORACLE adatbaziskezelö eszköztara

Feltételes utasítasok, ciklusszervezés

A HTML nyelv

Mint már említettük a HTML (Hypertext Markup Language) egy olyan speciális leíró nyelv, amely alkalmas hypertext dokumentumok leírására.

A HTML leíró nyelv szabályaival és egy egyszerû szövegszerkesztõvel olyan szöveges állományt írhatunk, amelyet a Browser meg tud jeleníteni. Az állománynak a .HTM vagy .HTML lehet a kiterjesztése.

1. A HTML nyelv alapjai és felépítése

Az állomány elemeit a szöveg mellett a < és a > jelek között TAG-nek nevezzük. A szöveget egy kezdõ tag <tag név> és egy végét jelzõ tag </tag név> zárja:

<tag név>szöveg</tag név>

A HTML dokumentum szerkezeti felépítése:

<HTML>	A hypertextet nyitó TAG.
<HEAD>	A fej kezdete TAG.
<TITLE>A honlap címe </TITLE>	Célszerû nem túl hosszú címet adni, ez jelenik meg a böngészõ fejlécében, valamint a Kedvencek (Bookmarks) listájában.
</HEAD>	A fej vége TAG.
<BODY>	A törzs eleje.
Ez a szöveg jelenik meg.	A szöveg törzse.
</BODY>	A törzs vége.
</HTML>	A hypertextet záró TAG.

A Jegyzettömbben, mint a legegyszerûbb szövegszerkesztõben írjuk meg az elsõ HTML programunkat, majd a Felhasználó1 könyvtárban minta.html néven tároljuk.

Internet Explorer segítségével jelenítsük meg minta.html dokumentumot! Elõször a Fájl/Megnyitás menüpontot válasszuk ki, majd megjelenõ Megnyitás párbeszédablakban nyomjuk meg a Tallózás gombot, és a legördülõ listából keressük meg a minta.html állományt a Felhasználó1 könyvtárban.

Ezután az OK gomb megnyomásával a szöveg törzse megjelenik a böngészõben:

A HTML TAG-ek nem betû érzékenyek, tetszés szerint írhatjuk kis- vagy nagybetûvel.

Minden mintapélda után megadjuk a példának a böngészõben megjelenített formáját.

Hosszú szöveg esetén, a szöveg közé hiába teszünk új sort, az nem jelenik meg a böngészõ ablakában. A szövegnek az új sorok figyelembe vétele nélkül - az ablak mérete szerint - változik a megjelenési formája.

<HTML>

<HEAD>

<TITLE>pelda1</TITLE>

</HEAD>

<BODY>

Honlap szerkesztése

Ebben a fejezetben bemutatjuk a honlap szerkesztésének

menetét a Jegyzettömb szövegszerkesztõ használatával.

Elõször is röviden tárgyaljuk a HTM 131d31b L leíró nyelv szerkezetét

és a szerkesztéshez szükséges TAG-eket példákon keresztül

mutatjuk be. A fejezet áttanulmányozása után már rövid idõ

alatt egy saját honlap is könnyen elkészíthetõ.

</BODY>

</HTML>

Ha valóban új sorban szeretnénk a szöveget látni, akkor ezt a (break line)
TAG- gel tehetjük meg.

<HTML>

<HEAD>

<TITLE>pelda2</TITLE>

</HEAD>

<BODY>

Honlap szerkesztése

Ebben a fejezetben bemutatjuk a honlap szerkesztésének

menetét a Jegyzettömb szövegszerkesztõ használatával.

Elõször is röviden tárgyaljuk a HTM 131d31b L leíró nyelv szerkezetét

és a szerkesztéshez szükséges TAG-eket példákon keresztül

mutatjuk be. A fejezet áttanulmányozása után már rövid idõ

alatt egy saját honlap is könnyen elkészíthetõ.

</BODY>

</HTML>

2. Színek használata

A <BODY> TAG részben az egész dokumentumra hatásos színdefiníciókat adhatunk meg:

Bgcolor a lap háttérszíne (background),

Text a szöveg színe (textcolor),

Link a link színe,

Alink az aktív link színe,

Vlink a már látogatott (visited) link színe.

A szín megadása történhet az angol nevével, vagy a RGB (Piros-Zöld-Kék) színkeverési algoritmusnak megfelelõen.

A RGB-vel megadott színdefiníció:

#RRGGBB

Az elsõ karakter a #, a következõ RR (Red) - piros, a GG (Green) - zöld, a BB (Blue) - kék, a színkeverés három alapszínének intenzitását egy bájtos hexadecimális számmal kell megadnunk. Egy bájtban minimálisan 00 és maximálisan FF, azaz 256 érték írható. A színek variálása megfelel a 24 bites true-color szabványnak.

A leggyakrabban használt színek:

Szín	RGB
Black - fekete
Red - piros	#FF0000
Green - zöld	#00FF00
Blue - kék	#0000FF
Magenta - lila	#FF00FF
Yellow - sárga	#FFFF00
Cyan - cián	#00FFFF
White - fehér

Legyen a háttér színe cián és az írás szine pedig kék:

vagy

mind a két megadási móddal ugyanazt az eredményt érjük el. A Link, Alink és a Vlink is módosítható, de ajánlatos az alapértelmezés mellett maradni.

3. Fejléc

Különbözõ nagyságú fejléceket készíthetünk a H (Heading) TAG-gel. Általános formája:

<Hn>Fejléc </H>

<HTML>

<HEAD>

<TITLE>pelda3</TITLE>

</HEAD>

<BODY>

<H1>H1 szöveg</H1>

<H2>H2 szöveg</H2>

<H3>H3 szöveg</H3>

<H4>H4 szöveg</H4>

<H5>H5 szöveg</H5>

<H6>H6 szöveg</H6>

</BODY>

</HTML>

Az n 1 és 6 között vehet fel értékeket, a H1 a legnagyobb és H6 a legkisebb méretet jelenti.

4. Betûtípus, méret és szín

A dokumentumban a FONT TAG segítségével megváltoztathatjuk a szöveg betûtípusát, méretét és a színét.

A FONT face paramétere szolgál a betûtípus kiválasztására. Természetesen csak olyan típust választhatunk, amely az operációs rendszerben telepítve van:

Szöveg Arial betûtípussal írva

Szöveg Courier betûtípussal írva

Szöveg alapértelmezett betûtípussal írva

A FONT size paraméterével a betû méretét kétféle módon adhatjuk meg:

Az abszolút megadási módnál a megadott szám a betû mérete, amely 1-6 között változhat.

Arial méret 1

Arial méret 2

Arial méret 3

Arial méret 4

Arial méret 5

Arial méret 6

A size paraméterben a relatív megadási mód az aktuális mérethez képest + (növeli), vagy - (csökkenti) a betû méretét.

Arial méret +1

Arial méret +2

Arial méret 4

Arial méret -2

A FONT Color paramétere szolgál a betûk színének a megváltoztatására.

Arial méret 2 piros

Arial méret 3 zöld

Arial méret 4 kék

5. Bekezdés

Ha a szöveget új bekezdéssel szeretnénk tagolni, akkor a szöveg után írt TAG lehetõvé teszi az új sorhúzáson kívül még egy sorkihagyást. Ebben a formában nincs lezáró tag.

Honlap szerkesztése

Ebben a fejezetben bemutatjuk a honlap szerkesztésének

menetét a Jegyzettömb szövegszerkesztõ használatával.

Elõször is röviden tárgyaljuk a HTM 131d31b L leíró nyelv szerkezetét

és a szerkesztéshez szükséges TAG-eket példákon keresztül

mutatjuk be.

A fejezet áttanulmányozása után már rövid idõ

alatt egy saját honlap is könnyen elkészíthetõ.

A másik formája szöveg igazítást (ALIGN) tartalmaz, ebben az esetben már használnunk kell a lezáró TAG-et.

Az ALIGN paraméterei:

CENTER - középre,

RIGHT - jobbra,

LEFT - balra igazít.

JUSTIFY - sorkizárt.

Ez a szöveg középre igazodik.

Ez a szöveg jobbra igazodik.

Ez a szöveg balra igazodik.

Ha a szöveg elég hosszú, akkor lehet látni azt, hogy a JUSTIFY, azaz a sorkizárt igazítás mindig kihúzza a sort az ablak széléig.

6. Vízszintes tagolás

A szövegrészeket vonallal látványosabban választhatjuk el a <HR> TAG használatával, melynek a paraméterei a vonal megjelenését határozzák meg:

Noshade - árnyékolás nélkül jelenik meg.

WIDTH - pixelekben, vagy %-ban adható meg a vonal szélessége.

SIZE - pixelekben állítható a vonal vastagsága.

COLOR - a vonal színét határozza meg.

ALIGN - a vonal igazítására szolgál, az alapértelmezés a CENTER.

Vízszintes vonal - normál térhatású<HR>

Vízszintes vonal - noshade<HR noshade>

Vonal szélessége pixelekben, balra igazítva

Vonal szélessége százalékban<HR WIDTH="75%" noshade>

Vonal szélessége, magassága pixelekben:

7. Megjegyzés

A HTML dokumentumban megjegyzéseket is írhatunk, melyet nemcsak akkor érdemes használni, ha a dokumentum túl hosszú, vagy bonyolult. A megjegyzések nem jelennek meg a böngészõben, csak a programozót tájékoztatja. Segítséget nyújthat a hibakeresésben, valamint információt szolgáltat a dokumentum késõbbi módosításához.

A megjegyzés formái:

<!- ** ** ** ** ***** ->

<!- a megjegyzés ide írható ->

<!- ** ** ** ** ***** ->

8. Szövegstílusok

A szövegben különféle kiemeléseket alkalmazhatunk, betûre, szavakra, vagy akár egy egész bekezdésre is.

Például:

a szöveg vastag betûs lesz

Az alábbiakban felsorolt szövegstílusokat használhatunk:

*TAG*	*Hatása*
B	A szöveg vastag betûs.
I	A szöveg dõlt.
U	A szöveg aláhúzott.
STRIKE	A szöveg áthúzott.
TT	A szöveg írógépszerû.
SUB	Alsó index.
SUP	Felsõ Index
BIG	Nagyméretû szöveg.
SMALL	Kisméretû szöveg.

B (Bold) - a szöveg vastag

I (Italic) - a szöveg dõlt

U (Underline) - a szöveg aláhúzott

B (Bold) és I (Italic) szöveg vastag és dõlt

<STRIKE>áthúzott szöveg: STRIKE</STRIKE>

<TT>TT (Teletype)írógépszerû szöveg</TT>

Yalsó index: SUB

Xfelsõ index:SUP

<BIG>Nagyméretû szöveg: BIG </BIG>

Kisméretû szöveg: SMALL

9. Elõformázott szöveg

Néha szükség van arra, hogy valamit idézzünk. Az idézet formátuma nem változhat, ilyen esetben érdemes a <PRE>.</PRE> TAG-eket használni. Az elõformázott szöveg eltérõ betûtípussal és olymódon jelenik meg, ahogyan begépeltük, a tabulátor és a CR/LF (kocsi vissza/soremelés) figyelembevételével.

Ez egy olyan szöveg, amely bemutatja,

hogy néz ki a megjelenítés az elõformázás

használata nélkül.

<PRE>

Ez a szöveg viszont már elõformázva

fog megjelenni. Itt a szöveg elõtt és után

az elõformázott szöveget beállító TAG-eket

használjuk.

</PRE>

10. Felsorolás

Gyakran használunk dokumentumokban is felsorolásokat, ezek olyan listák, melyeknek elmeit külön sorokban írjuk és az elem elõtt valamilyen jelzést teszünk: bajusz, petty, négyzet, kör stb. Ehhez teljesen hasonlót szerkeszthetünk a HTML dokumentumokban is.

Rendezetlen listát képezhetünk az <UL>. . . </UL> TAG-ek között. A felsorolás tételeit pedig az <LI>. . . </LI> TAG-ek közé zárjuk.

A listák lehetnek egyszerûek, valamint többszörösen egymásba ágyazottak.

Nézzünk példát az egyszeres felsorolásra:

Gyümölcsök:

<UL>

<LI>Szilva </LI>

<LI>Körte </LI>

<LI>Barack </LI>

</UL>

A következõ példánál jól látható, hogy az aláosztás beljebb kezdõdik és más típusú jel jelenik meg a tétel elõtt.

Gyümölcsök osztályozása:

<UL>

<LI>Gyümölcsök </LI>

<UL>

<LI>Szilva </LI>

<LI>Körte </LI>

<LI>Barack </LI>

</UL>

<LI>Csonthéjas gyümölcsök </LI>

<UL>

<LI>Mandula </LI>

</UL>

A harmadik példa háromszoros egymásba ágyazást mutat:

<UL>

<LI>Gyümölcsök osztályozása </LI>

<UL>

<LI>Fán terem </LI>

<UL>

<LI>Szilva </LI>

</UL>

<UL>

<LI>Bokron terem </LI>

<UL>

<LI>Egres </LI>

<LI>Ribizli</LI>

</UL>

A hierarchikus leírás csak arra szolgál, hogy könnyen ellenõrizhetjük az <UL> és </UL>, valamint <LI> és </LI> párokat.

Rendezett (számozott) felsorolást kapunk az <OL>.</OL> TAG-ek használata esetén. Módosítsuk az egyszerû listát bemutató feladatot, de most a számozott felsorolást alkalmazzuk:

Gyümölcsök:

<OL>

<LI>Szilva </LI>

<LI>Körte </LI>

<LI>Barack </LI>

</OL>

A háromszoros egymásba ágyazást bemutató feladatban az <UL> .. </UL> pár helyett használjunk <OL> .. </OL> TAG-eket, mit tapasztalunk? Azt látjuk, hogy minden hierarchia szinten a sorszámozás elölrõl kezdõdik.

A számozott listáknál lehetõség van a hierarchia jobb megkülönböztetése céljából TYPE paramétert használni. A TYPE paraméter mellett egyenlõségjellel és aposztrófok között adjuk meg az értékeket.

A TYPE lehetséges értékei lehetnek:

TYPE = "1" , ez az alapértelmezés, az arab számjegy.

TYPE = "I" - római számjegy nagybetûvel.

TYPE = "i" - római számjegy kisbetûvel

TYPE = "A" - nagybetûvel az ábécé.

TYPE = "a" - kisbetûvel az ábécé.

A START paraméterrel beállíthatjuk a sorszám kezdõértékét, ezt az értéket mindig arab számjeggyel adjuk meg:

<OL>

<LI start = "1" type = "I">Gyümölcsök osztályozása </LI>

<LI> Fán terem </LI>

<LI>Szilva </LI>

</OL>

<LI>Bokron terem </LI>

<LI>Egres </LI>

<LI>Ribizli</LI>

</OL>

11. Táblázatok

Könnyen készíthetünk különféle táblázatokat, amelyek a felsoroláshoz hasonlóan, lehetnek egyszerûek és összetettek.

A táblázat oszlopokból és sorokból áll, az elemeit celláknak nevezzük. Tetszõleges cellastruktúrát hozhatunk létre, ha az egymás mellett, illetve egymás alatt lévõ cellákat összevonjuk. A táblázatnak fejlécet is adhatunk. Cellánként is tehetünk különbözõ beállításokat, amelyek a cella lezárásakor elvesztik érvényességüket.

A <TABLE>. </TABLE> között történik a táblázat létrehozása. A fejlécet a <TH>.</TH> fogja közre, sorát a <TR>.</TR>, egy celláját pedig a <TD>.</TD> definiálja. A <TABLE> TAG border paraméterének értéke befolyásolja a keret vastagságát. Ha hiányzik ez a paraméter, vagy az értéke 0, akkor a táblázatnak nincs kerete.

Készítsünk egy 3x3-as táblát egy egyszerû kerettel:

<TR>

<TD> Fán terem </TD>

<TD> Bokron terem </TD>

</TR>

<TR>

<TD> ribizli </TD>

</TR>

<TR>

<TD> körte </TD>

<TD> egres </TD>

</TR>

</TABLE>

Módosítsuk a keret vastagságát 5-re:

11.1. A cellák összevonása

A cellák összevonása mindig az egymás mellett, illetve az egymás alattiakra vonatkozik. A TD sorában az egymás melletti cellákat (oszlopokat) vonhatjuk össze a colspan paraméterrel, a numerikus érték az összevonandó cellák számát jelenti.

Hozzunk létre egy három soros és három oszlopos táblázatot:

<TR>

<TD> 1. cella </TD>

<TD> 2. cella </TD>

<TD> 3. cella </TD>

</TR>

<TR>

<TD> 4. cella </TD>

<TD> 5. cella </TD>

<TD> 6. cella </TD>

</TR>

<TR>

<TD> 7. cella </TD>

<TD> 8. cella </TD>

<TD> 9. cella </TD>

</TR>

</TABLE>

Vonjuk össze a 2,3-as, 4,5,6-os és a 8,9-es cellákat:

<TR>

<TD> 1. cella </TD>

<TD colspan = "2"> (2,3) cella </TD>

</TR>

<TR> <TD colspan = "3"> (4,5,6) cella </TD> </TR>

<TR>

<TD> 7. cella </TD>

<TD colspan = "2"> (8,9) cella </TD>

</TR>

</TABLE>

Hasonlóan történik a sorok összevonása. A TD sorában az egymás alatti cellákat (sorokat) vonhatjuk össze a rowspan paraméterrel, a numerikus érték itt is az összevonandó cellák számát jelenti. Természetesen az összevont oszlopra vagy sorra már nem hivatkozhatunk.

Vonjuk össze a 2,5,8 és a 3,6 számú cellákat, melyeket már az elsõ sor definiálásánál megtehetünk:

<TR>

<TD> 1. cella </TD>

<TD rowspan ="3"> (2,5,8) cella </TD>

<TD rowspan = "2"> (3,6) cella </TD>

</TR>

<TR>

<TD> 4. cella </TD>

</TR>

<TR>

<TD> 7. cella </TD>

<TD> 9. cella </TD>

</TR>

</TABLE>

11.2. A táblázat fejléce

A táblázatnak fejlécet is készíthetünk a <TH>Fejléc</TH> használatával. Ez azt jelenti, hogy a táblázat elsõ sorában az összes cellát össze kell vonnunk, hogy a fejlécet a táblázat közepére pozícionálhassuk.

<TH ALIGN="CENTER" colspan="2">Gyümölcsök</TH>

<TR>

<TD> Fán terem </TD>

<TD> Bokron terem </TD>

</TR>

<TR>

<TD> ribizli </TD>

</TR>

<TR>

<TD> körte </TD>

<TD> egres </TD>

</TR>

</TABLE>

11.3. A táblázat formázása

Tekintsük át azokat a paramétereket, amelyek az egész táblázat formázására vonatkoznak. Általánosan:

Paraméter	Hatása
BORDER = n	Az n a táblázat keretének a szélességét jelenti pixelekben. Ha az n értéke zérus, a táblázatnak nincs kerete.
WIDTH = n	Az n a táblázat szélességét határozza meg, az értékét megadhatjuk pixelekben vagy százalékban. A WIDTH = "100%" esetén a táblázat kitölti a böngészõ teljes ablakát.
HEIGHT = n	Az n a táblázat magasságát határozza meg, a WIDTH-hez hasonlóan az értékét megadhatjuk pixelekben vagy százalékban. Például: HEIGHT = "80%".
CELLSPACING = n	Az n értéke a cella tartalma és a keret közötti távolságot jelenti pixelekben megadva.
CELLPADDING = n	Az n határozza meg a cellák közötti távolságot pixelekben.
ALIGN	A táblázat helyét jelöli ki a böngészõ ablakában: LEFT - balra, RIGHT - jobbra, CENTER - középre rendezi.

A <TR> TAG-nél megadott paraméterek a </TR>-ig definiált cellákra vonatkoznak, viszont a <TD> paraméterekkel a táblázat minden celláját külön-külön formázhatjuk. Mivel a TD után beállított paraméterek csak az ott definiált cellára vonatkoznak, ez a hatás a </TD> után megszûnik.

Paraméter

Hatása

ALIGN

A cella tartalmát vízszintesen, a cella keretéhez képest:

LEFT - balra,

RIGHT - jobbra,

CENTER - középre,

JUSTIFY - sorkizártan rendezi.

VALIGN

A cella tartalmát függõlegesen, a cella keretéhez képest:

TOP - tetejéhez,

BOTTOM - aljához,

MIDDLE - középre,

BASELINE - alapvonalra rendezi.

A <TR> TAG-nél a megadott formázási paraméterek (ALIGN, VALIGN) az ott definiált cellákra vonatkoznak a </TR> bezárólag.

Példa a formázási paraméterek használatára:

<TH align="CENTER" colspan="2">Gyümölcsök</TH>

<TR>

<TD> Fán terem </TD>

<TD> Bokron terem </TD>

</TR>

<TR>

<TD> ribizli </TD>

</TR>

<TR>

<TD> körte </TD>

<TD> egres </TD>

</TR>

</TABLE>

Használjunk %-ot a szélesség megadására:

Látható, hogy a tábla a böngészõ ablakának méretét veszi fel, mivel a tábla szélessége a width =100%-ra van beállítva.

A cellákra állítsunk be különbözõ színeket, valamint használjunk vízszintes és függõleges igazításokat:

<TH bgcolor = Cyan align="CENTER" colspan="2">Gyümölcsök</TH>

<TR>

<TD bgcolor = Yellow align = CENTER valign = top> Fán terem </TD>

<TD bgcolor = Yellow align = CENTER valign = top> Bokron terem </TD>

</TR>

<TR>

<TD align = LEFT> ribizli </TD>

</TR>

<TR>

<TD align = CENTER> körte </TD>

<TD align = CENTER valign = BOTTOM> egres </TD>

</TR>

</TABLE>

</BODY>

12. A linkek használata

Sokszor szükség van arra, hogy a honlap dokumentuma különféle más dokumentumokra hivatkozzon.

A HTML dokumentumban lehetõségünk van:

az aktuális dokumentum valamelyik részére,

az aktuális gépen egy másik dokumentum állományra,

az Internet bármely dokumentumára hivatkozni.

A kapcsolat létrehozására az A (Anchor - horgony) szolgál. Általános formája:

<A HREF = "kapcsolat"> kapcsolatot jelentõ szöveg </A>

A HREF (Hyperlink REFerence) mellett adjuk meg link típusától függõ "kapcsolat helyét".

12.1. Aktuális dokumentumra való hivatkozás

Néha szükséges a hosszú dokumentum esetén valamelyik részére, például a végére, vagy akár a végérõl az elejére ugrani.

Természetesen azokat a helyeket meg kell jelölnünk, ahová késõbb ugrani szeretnénk. Megjegyezzük, hogy a megjelölések nem jelennek meg a böngészõben.

Ezekre a jelölésekre a következõképpen hivatkozhatunk:

<A HREF ="Vege">Ugrás a végére.</A>

<A HREF ="Eleje">Ugrás az elejére.</A>

12.2. Más dokumentumra való hivatkozás

A dokumentumunkból más, hasonló típusú dokumentumra is hivatkozhatunk, amely lehet a saját könyvtárunkban, vagy az aktuális gépen más könyvtárban. Ha a hivatkozott dokumentum ugyanabban a könyvtárban van, mint amelybõl hivatkozunk, a megadási mód:

<A HREF ="arjegyzek.htm">Ugrás az árjegyzékre.</A>

Ha szükséges a könyvtár nevének megadása, vigyázzunk a UNIX-ban ismeretes / jelet kell használnunk a \ helyett:

<A HREF ="ARAK/arjegyzek.htm">Ugrás az árjegyzékre.</A>

12.3. Internet bármely dokumentumára való hivatkozás

A dokumentumban lehetõség van teljesen általános, központi lapra hivatkozni. Ebben az esetben egy teljes URL címet kell megadnunk:

<A HREF ="https://www.bme.hu">Ugrás a BME honlapjára.</A>

13. Képek elhelyezése a dokumentumban

A HTML dokumentumban a szöveg mellett képeket is elhelyezhetünk. A képek GIF és JPEG formátumú állományok lehetnek. Mivel a HTML szöveges állomány, ezért magát a képet nem, hanem csak az arra való hivatkozást, vagy az URL-t tartalmazza. A képre való hivatkozás:

Az IMG TAG-ben a képhez magyarázatot fûzhetünk, ha az egérrel a képre mutatunk az alt = " szöveg" megadásával.

Dokumentumra való ugrás:

<A HREF="kep2.htm">Következõ</A>

A BME honlapjára való URL hivatkozás:

Részlet a kep1.htm dokumentumból, amelybõl átugorhatnunk kep2.htm dokumentumra a Következõ szövegen kattintva :

Képek megjelenítése (gif)

Képek megjelenítése (jpg)

<A HREF="kep2.htm">Következõ</A>

Részlet a kep2.htm dokumentumból, amelyben a Következõ szövegen kattintva a kép3.htm dokumentumba jutunk, illetve az Elõzõ szövegen kattintva visszatérhetünk a kep1.htm dokumentumhoz. Példaként módosítjuk a kép méretét, keretet, valamint üres helyet kérünk a kép köré.

A kép méretének megadása a width és a height paraméterekkel történik:

width= height=100

A kép keretét a border paraméter határozza meg:

border=4

A kép körül üres hely legyen, ezt a vspace és a hspace paraméterrel adjuk meg:

vspace=10 id=10

Képméret módosítása (jpg)

Képkeret

Kép körül üres hely

<A HREF="kep3.htm">Következõ</A>

<A HREF="kep1.htm">Elõzõ</A>

Az alábbi HTML dokumentum bemutatja a WEB lapra való ugrást. A képre mutatva magyarázó szöveg jelenik meg, a képen vagy az Ugrás a BME honlapra szövegen kattintva eljutunk a BME honlapjára.

WEB lapra való ugrás

Ugrás a BME honlapra</a>

<A HREF="kep2.htm">Elõzõ</A>

A képhez szöveget is igazíthatunk az ALIGN paraméterrel, mely nyolcféle értéket vehet fel:

Paraméter értéke	Hatása: a szöveg
TOP	a kép tetejéhez igazodik.
BOTTOM	a kép aljához igazodik.
MIDDLE	a kép közepéhez igazodik
ABSMIDDLE	és a kép középvonala egyezik meg.
RIGHT	a kép bal oldalán van.
LEFT	a kép jobb oldalán van.
TEXTTOP	a képpel felül egy vonalba esik.
BASELINE	és a kép alja van egy vonalban.

Bemutatunk néhány kép és szöveg illeszkedését:

Képhez szöveg igazítása

<IMG src="kep4.gif" align="bottom"> Szöveg a kép aljához.

<IMG src="kep2.gif" align="top"> Szöveg a kép tetejéhez.

<IMG src="kep2.jpg" align="middle"> Szöveg a kép közepéhez.

A kép alá és fölé egy fekete vonalat rajzolunk, hogy a szöveg pozícionálása könnyebben látható legyen.

14. Háttér beállítása

A honlap hátterét a BODY TAG-ban a background paraméter és az = jel után "" között megadott képállomány határozza meg. A böngészõ a képpel betölti az ablak hátterét.

Háttér beállítása

</BODY>

Háttér beállítása

</BODY>

Ebben a példában jól látható a kép sokszorozása az ablakban:

A honlap hátterének színt is adhatunk a BODY TAG-ban a bgcolor paraméterben. A háttér színe legyen sárga (yellow), a szöveg színe pedig kék (Text = blue).

Háttér beállítása

</BODY>

15. Mozgó képek

Mozgó képek a honlapot felüdítik, mozgalmassá teszik. Egy-két jól választott animációval felkeltjük a figyelmet. Például az e-mail címünket megadhatjuk egy levél írása és borítékozása animáció mellett.

E-mail

</BODY>

A levél írása és borítékozása animáció néhány fázisát mutatjuk be:

Játékosan mozgó ábrákat is használhatunk:

Mozgó kép

</BODY>

Példaként egy mozgó nyuszi néhány fázisát mutatjuk meg:

16. Saját honlap tervezése

Tervezzünk két oldalból álló honlapot. Az elsõ lapot Index.HTML néven mentsük.

<HTML>

<HEAD>

<TITLE>Kiss Emese honlapja</TITLE>

</HEAD>

<BODY>

Nevem: Kiss Emese

A BME Gépészmérnöki Kar elsõ éves diákja vagyok

<A HREF= "https://www.bme.hu">a BME honlapja</A >

Kedvenc tárgyaim

<UL>

<LI>Informatika </LI>

<LI>Matematika </LI>

</UL>

Szabadidõmben szívesen olvasok.

<UL>

<LI> Kedvenc magyar íróim</LI>

<UL>

<LI>Jókai Mór </LI>

<LI>Gárdonyi Géza </LI>

</UL>

<LI> Kedvenc magyar költõim</LI>

<UL>

<LI>Petõfi Sándor </LI>

<LI>József Attila </LI>

</UL>

<A HREF = "Lap2.html"> Következõ oldal</A>

</BODY>

</HTML>

A második lapot Lap2.HTML néven mentsük.

<HTML>

<HEAD>

<TITLE>Kiss Emese 2. lapja</TITLE>

</HEAD>

<BODY>

<TH ALIGN = "CENTER" colspan = "2"> HOBBIM</TH>

<TR>

<TD> Sport</TD>

<TD> Szórakozás</TD>

</TR>

<TD>Kerékpározás </TD>

</TR>

<TD>Evezés </TD>

<TD>Színház </TD>

</TR>

</TABLE>

Kedvenc kutyám neve: BODRI

Szeret szaladgálni.

<A HREF = "Index.html"> Vissza az elsõ oldalra</A>

</BODY>

</HTML>

A honlapot jelenítsük meg az Internet Explorer segítségével. Indítsuk el az Index.html állományt.

Az Index.html és a Lap2.html megjelenítve a böngészõben.

Találat: 1857

Felhasználási feltételek