online kép - Fájl  tube fájl feltöltés file feltöltés - adja hozzá a fájlokat online fedezze fel a legújabb online dokumentumok Kapcsolat
   
 

Letöltheto dokumentumok, programok, törvények, tervezetek, javaslatok, egyéb hasznos információk, receptek - Fájl kiterjesztések - fajltube.com

 

Online dokumentumok - kep
   
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

Fájl küldése e-mail Esszé Projekt


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ö­ve­ges á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árbe­széd­ablakban 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ön­gé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 <BR> (break line)
TAG- gel tehetjük meg.

<HTML>

<HEAD>

<TITLE>pelda2</TITLE>

</HEAD>

<BODY>

Honlap szerkesztése<BR><BR>

Ebben a fejezetben bemutatjuk a honlap szerkesztésének<BR>

menetét a Jegyzettömb szövegszerkesztő használatával.<BR>

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

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

mutatjuk be. A fejezet áttanulmányozása után már rövid idő<BR>

alatt egy saját honlap is könnyen elkészíthető.<BR>

</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ínke­ve­ré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 hexadeci­mális szám­mal 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

#000000

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

#000000

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

  <BODY Bgcolor = Cyan Text = Blue> 

vagy

  <BODY Bgcolor = #00FFFF Text = #0000FF>

 

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:

<FONT face=Arial>Szöveg Arial betűtípussal írva</FONT> <BR>

<FONT face=“Courier>Szöveg Courier betűtípussal írva</FONT><BR>

<FONT face=Default>Szöveg alapértelmezett betűtípussal írva</FONT>

<BR>

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.

<FONT face = "Arial" size = "1">Arial méret 1</FONT><BR>

<FONT face = "Arial" size = "2">Arial méret 2</FONT><BR>

<FONT face = "Arial" size = "3">Arial méret 3</FONT><BR>

<FONT face = "Arial" size = "4">Arial méret 4</FONT><BR>

<FONT face = "Arial" size = "5">Arial méret 5</FONT><BR>

<FONT face = "Arial" size = "6">Arial méret 6</FONT><BR>

-       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.

<FONT face = "Arial" size = "+1">Arial méret +1</FONT><BR>

<FONT face = "Arial" size = "+2">Arial méret +2</FONT><BR>

<FONT face = "Arial" size = "4">Arial méret 4 </FONT><BR>

<FONT face = "Arial" size = "-2">Arial méret -2</FONT><BR>

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

<FONT face ="Arial" size="2" color=red> Arial méret 2 piros

 </FONT><BR>

<FONT face ="Arial" size="3" color=green>Arial méret 3 zöld

</FONT><BR>

<FONT face ="Arial" size="4" color=blue> Arial méret 4 kék

</FONT><BR>

5. Bekezdés

Ha a szöveget új bekezdéssel szeretnénk tagolni, akkor a szöveg után írt <P> TAG le­hető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<P>



Ebben a fejezetben bemutatjuk a honlap szerkesztésének<BR>

menetét a Jegyzettömb szövegszerkesztő használatával.<P>

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

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

mutatjuk be.<P>

A fejezet áttanulmányozása után már rövid idő<BR>

alatt egy saját honlap is könnyen elkészíthető.<BR>

A <P> másik formája szöveg igazítást (ALIGN) tartalmaz, ebben az esetben már hasz­nálnunk kell a </P> lezáró TAG-et.

Az ALIGN paraméterei:

·         CENTER – középre,

·         RIGHT – jobbra,

·         LEFT – balra igazít.

·         JUSTIFY – sorkizárt.

<P ALIGN = CENTER>Ez a szöveg középre igazodik.</P>

<P ALIGN = RIGHT>Ez a szöveg jobbra igazodik.</P>

<P ALIGN = LEFT>Ez a szöveg balra igazodik.</P>

<P ALIGN = "JUSTIFY">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.</P>

6. Vízszintes tagolás

A szövegrészeket vonallal látványosabban választhatjuk el a <HR> TAG használa­tá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

<HR WIDTH="200" ALIGN="left">

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

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

<HR SIZE="15" WIDTH="200" COLOR = red>

7. Megjegyzés

A HTML dokumentumban megjegyzéseket is írhatunk, melyet nemcsak akkor ér­demes használni, ha a dokumentum túl hosszú, vagy bonyolult. A megjegyzések nem jelen­nek meg a böngészőben, csak a programozót tájékoztatja. Segítséget nyújthat a hiba­keresé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:

            <B>a szöveg vastag betűs lesz</B>

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>B (Bold) - a szöveg vastag </B><BR>

<I>I (Italic) - a szöveg dőlt </I><BR>

<U>U (Underline) - a szöveg aláhúzott </U><BR>

<B><I> B (Bold) és I (Italic) szöveg vastag és dőlt </I></B><BR>

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

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

Y<SUB>alsó index: SUB  </SUB><BR>

X<SUP>felső index:SUP </SUP><BR>

<BIG>Nagyméretű szöveg: BIG </BIG><BR>

<SMALL>Kisméretű szöveg: SMALL <SMALL><BR>

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áltoz­hat, 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 tabu­lá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, me­lyek­nek 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 dokumentu­mokban 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:

<B>Gyümölcsök:</B>

<UL>

<LI>Alma   </LI>

<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.

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

<UL>

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

<UL>

<LI>Alma   </LI>

<LI>Szilva </LI>

<LI>Körte  </LI>

<LI>Barack </LI>

</UL>

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

<UL>

<LI>Dió     </LI>

<LI>Mandula </LI>

</UL>

</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>Alma   <LI>

            <LI>Szilva </LI>

       </UL>

   </UL>

<UL>

<LI>Bokron terem </LI>

    <UL>

       <LI>Egres  </LI>

       <LI>Ribizli</LI>

   </UL>

</UL>

</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 ese­tén. Módosítsuk az egyszerű listát bemutató feladatot, de most a számozott felso­rolást alkalmazzuk:

<B>Gyümölcsök:</B>

<OL>

<LI>Alma   </LI>

<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 he­lyett használjunk <OL> .. </OL> TAG-eket, mit tapasztalunk? Azt látjuk, hogy min­den hie­rarchia 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>

   <OL start = "1" type = "a">

      <LI> Fán terem  </LI>

        <OL start = "1" type = "1">

            <LI>Alma   </LI>

            <LI>Szilva </LI>

       </OL>

   </OL>

<OL start = "2" type = "a">

<LI>Bokron terem </LI>

    <OL start = "1" type = "1">

       <LI>Egres  </LI>

       <LI>Ribizli</LI>

   </OL>

</OL>

</OL>



11. Táblázatok

Könnyen készíthetünk különféle táblázatokat, amelyek a felsoroláshoz hasonlóan, le­hetnek 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ő cel­lá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 vastag­sá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:

<TABLE border = "1">

<TR>

<TD> Fán terem  </TD>

<TD> Bokron terem  </TD>

</TR>

<TR>

<TD> alma        </TD>

<TD> ribizli     </TD>

</TR>

<TR>

<TD> körte      </TD>

<TD> egres      </TD>

</TR>

</TABLE>

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

<TABLE border = "5">

11.1. A cellák összevonása

A cellák összevonása mindig az egymás mellett, illetve az egymás alattiakra vonat­ko­zik. 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:

<TABLE border = "1">

<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:

<TABLE border = "1">

<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 (soro­kat) vonhatjuk össze a rowspan paraméterrel, a numerikus érték itt is az ös­szevo­nandó 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:

<TABLE border = "1">

<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 je­lenti, 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. 

<TABLE border = "1">

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

<TR>

<TD> Fán terem </TD>

<TD> Bokron terem </TD>

</TR>

<TR>

<TD> alma </TD>

<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 vonat­koznak. Általánosan:

<TABLE paraméterek >

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 megad­hatjuk 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 ha­sonlóan az értékét megad­hatjuk 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, vi­szont a <TD> paraméterekkel a táblázat minden celláját külön-külön formázhat­juk. Mivel a TD után beállított paraméterek csak az ott definiált cellára vonatkoz­nak, 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:

<TABLE align = CENTER border = "2" cellspacing ="5" cellpadding ="5">

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

<TR>

<TD> Fán terem  </TD>

<TD> Bokron terem  </TD>

</TR>

<TR>

<TD> alma    </TD>

<TD> ribizli </TD>

</TR>

<TR>

<TD> körte </TD>

<TD> egres </TD>

</TR>

</TABLE>

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

<TABLE width = "100%" align = CENTER border = "2" cellspacing ="5" cellpadding ="5">

Látható, hogy a tábla a böngésző ablakának méretét veszi fel, mivel a tábla széles­sé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üg­gő­leges igazításokat:

<BODY bgcolor = Lightblue>

<TABLE bgcolor = Lightgreen width = "300" align = CENTER border = "2" cellspacing ="10" cellpadding ="5">

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

<TR>

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

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

</TR>

<TR>

<TD align = RIGHT> alma  </TD>

<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 dokumentu­mokra 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 szeret­nénk. Megjegyezzük, hogy a megjelölések nem jelennek meg a böngészőben.

<A NEV =”Eleje”>

<A NEV =”Vege”>

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 hivat­ko­zunk, 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. Eb­ben az esetben egy teljes URL címet kell megadnunk:

<A HREF =”http://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 tar­tal­mazza. A képre való hivatkozás:

<IMG src = “állománynév”>



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:

<A HREF="http://www.bme.hu">BME</A>

Részlet a kep1.htm dokumentumból, amelyből átugorhatnunk kep2.htm dokumen­tumra a Következő szövegen kattintva :

<B>Képek megjelenítése (gif)</B><BR>

<IMG src="kep2.gif"><BR>

<IMG src="kep4.gif" alt="Itt egy fiú"><BR>

<B>Képek megjelenítése (jpg)</B><BR>

<IMG src="kep2.jpg"><BR>

<IMG src="kep4.jpg" alt="Ez egy kutya"><BR>

<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érhe­tü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 hspace=10

<B>Képméret módosítása (jpg)</b><BR>

<IMG src="kep4.jpg" width= height=100 alt="Ez itt egy kutya"><BR>

<B>Képkeret </B><BR>

<IMG src="kep4.jpg" border=4 alt="Ez itt egy kutya"><BR>

<B>Kép körül üres hely </B><BR>

<IMG src="kep4.jpg" vspace=10 hspace=10 alt="Ez itt egy kutya"><BR>

<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 mu­tatva magyarázó szöveg jelenik meg, a képen vagy az Ugrás a BME honlapra szö­vegen kattintva eljutunk a BME honlapjára.

<B>WEB lapra való ugrás </B><BR>

<A HREF="http://www.bme.hu">

<IMG src="kep2.gif" border=4 alt="Ez itt egy diák">

Ugrás a BME honlapra</a><BR>

<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:

<B>Képhez szöveg igazítása</B>

<HR noshade size=1 color=black>

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

<HR noshade size=1 color=black>

<HR noshade size=1 color=black>

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

<HR noshade size=1 color=black>

<HR noshade size=1 color=black>

<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ön­nyeb­ben 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.

<BODY background = "BG1.jpg">

<P>

<FONT face = "Courier" size = "5">

<B>Háttér beállítása</B>

</FONT>

</BODY>

<BODY background = "Kep4.jpg">

<P>

<FONT face = "Courier" size = "5">

<B>Háttér beállítása</B>

</FONT>

</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).

<BODY bgcolor = yellow Text = blue>

<P>

<FONT face = "Courier" size = "5">

<B>Háttér beállítása</B>

</FONT>

</BODY>

15. Mozgó képek

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

<BODY Text = RED>

<P>

<FONT face = "Courier" size = "2">

<B>E-mail</B>

</FONT>

<P>

<IMG SRC="MAIL2.GIF">

</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:

<BODY Text = RED>

<P>

<FONT face = "Courier" size = "4">

<B>Mozgó kép</B>

</FONT>

<P>

<IMG SRC="NYUSZI.GIF">

</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>

<B> Nevem: Kiss Emese </B><BR><BR>

<I> A BME Gépészmérnöki Kar első éves diákja vagyok </I><BR>

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

<B><I> Kedvenc tárgyaim </I></B>

<UL>

       <LI>Informatika  </LI>

       <LI>Matematika </LI>

 </UL>

<B><I> Szabadidőmben szívesen olvasok. </I></B>

<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>

</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>

<P>

<TABLE border = "1">

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

<TR>

<TD><B><I> Sport</B></I></TD>

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

</TR>

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

<TD>Zene </TD>

</TR>

</TR>

<TD>Evezés </TD>

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

</TR>

</TABLE>

<P>

<B><I>Kedvenc kutyám neve: BODRI </I></B><BR>

<IMG SRC="kep4.jpg" width = 100 height=100  alt = "Ez a kutyám"><BR>

<I>Szeret szaladgálni. </I><P>

<IMG SRC="dog1.gif"><BR>

<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: 985