HTML használata

Ezt írjuk a html lapra. Ezt látjuk a böngészővel.
 <HTML>
 <HEAD>
 <TITLE>HTML alapok</TITLE>
 </HEAD>
 <BODY>

 Ez itt a lényeg, ez kerül a lapra.
 A html lapon a helyköz (egy vagy több)
 és a sorvége jel(ek) egyenértékűek,
 mindegyik egy helyközt ér.
 Ha nem intézkedünk arról, hol legyen
 újsor kezdés, akkor a böngésző (idegen
 szóval "browser") annyi szöveget tesz
 egy sorba, amennyit bír, és szóhatáron
 kezd új sort.
 Azt ami két kacsacsőr ("kisebbjel" és
 "nagyobbjel") között van, "vezérlésre"
 használja a böngésző, a többi szöveget
 megjeleníti.
 A vezérlés valami parancsot jelent a
 browsernek, ami pl. mondhatja azt,
 hogyan jelenítse meg a szöveget,
 vagy hogy mit jelenítsen még meg.
 (pl. képet).
 Tekintse meg az itt következő, csak a
 bal oldalon látható kommentár sorokat.
 <!-- Ilyen "zárójelek" közé tegyük  -->
 <!-- a HTML kommentár sorokat.      -->

 </BODY> </HTML>
Ez itt a lényeg, ez kerül a lapra. A html lapon a
helyköz (egy vagy több) és a sorvége jel(ek) egyenértékűek, mindegyik egy
helyközt ér. Ha nem intézkedünk arról, hol legyen újsor kezdés, akkor a
böngésző (idegen szóval “browser”) annyi szöveget tesz egy sorba, amennyit
bír, és szóhatáron kezd új sort. Azt ami két kacsacsőr (“kisebbjel” és
“nagyobbjel”) között van, “vezérlésre” használja a böngésző, a többi
szöveget megjeleníti. A vezérlés valami parancsot jelent a browsernek, ami
pl. mondhatja azt, hogyan jelenítse meg a szöveget, vagy hogy mit
jelenítsen még meg. (pl. képet). Tekintse meg az itt következő, csak a bal
oldalon látható kommentár sorokat.


Megjegyzések:

A csak a bal oldalon látható, nagyobbrészt vezérlőjeleket
tartalmazó keretsorok (első 5 és utolsó sor) minden html lapon kellenek.
A “TITLE” utáni szöveg a böngésző fejlécsorába kerül. Lehetőleg ne
legyen benne ékezetes betű!

Ezek a megjegyzések viszont csak itt a jobb oldalon látszanak. A
továbbiakban már mindig “egyezni” fog a bal- és jobboldal.

 Így lehet megmondani, <BR>hogy hol
 akarunk feltétlen<BR>új sort kezdeni.
 <P>Így pedig új bekezdést.

 További tagolási lehetőségekről később
 lesz majd szó.<P>Az persze nem árt, ha
 az   itteninél   jobban        hasonlít
 a    html  forrásszöveg    tagolása   a 
 megjelenítendő               tagolásra.
Így lehet megmondani,
hogy hol akarunk
feltétlen
új sort kezdeni.Így pedig új bekezdést. További tagolási lehetőségekről később lesz
majd szó.

Az persze nem árt, ha az itteninél jobban hasonlít a html forrásszöveg
tagolása a megjelenítendő tagolásra.

 Így lehet <B>kétféle</B>, nem mindig
 azonos <STRONG>kövér</STRONG>,
 <I>kétféle</I> <EM>dőlt</EM>,
 <U>aláhúzott</U>, <BLINK>villogó</BLINK>
 ill.  <KBD>FIX jelszélességű</KBD>
 szövegrészt írni.
 <P><B><U>Kombinálhatjuk is.</B></U>
 <P>Így pedig <SUP>felső</SUP>, ill.
 <SUB>alsó</SUB> indexet írhatunk.
 <P>Lehetőség van a <TT>TT=teletype</TT>,
 <BIG>BIG</BIG>, <SMALL>SMALL</SMALL>
 és <STRIKE>STRIKE</STRIKE> jeltipusok
 használatára. (Nem minden böngésző érti
 mindegyiket. Ha nem érti, figyelmen
 kívül hagyja.)
 <P>Láthatjuk, hogy egy parancs
 hatása olyan másikkal zárható le,
 ami a "parancs"-szó ismétléséből és egy
 az elé tett "/" jelből áll.
Így lehet kétféle, nem mindig azonos
kövér, kétféle dőlt, aláhúzott,
villogó ill. FIX jelszélességű szövegrészt írni.Kombinálhatjuk is.

Így pedig felső, ill. alsó indexet írhatunk.

Lehetőség van a TT=teletype, BIG,
SMALL és STRIKE jeltipusok használatára.
(Nem minden böngésző érti mindegyiket. Ha nem érti, figyelmen kívül
hagyja.)

Láthatjuk, hogy egy parancs hatása olyan másikkal zárható le, ami a
parancs”-szó ismétléséből és egy az elé tett “/” jelből áll.

 A "FONT" paranccsal betűméretet vagy
 betűszínt állíthatunk be. A méret 1-től
 kezdve növekszik, a szín vagy angol
 elnevezés (140 lehetőségből),
 vagy RGB kód #RRGGBB formában. Az RGB
 (Red=piros, Green=zöld, Blue=kék) kód
 hexadecimálisan (16-os számrendszerben)
 írandó, és így a piros-zöld-kék arányt
 több, mint 16 millió módon adhatjuk meg
 (#000000 és #FFFFFF között). Más kérdés,
 hogy a szemünk (és a képernyőnk) hány
 színt tud megkülönböztetni.
 (Bölcsészeknek: A színkód egy # jelet
 követő olyan 6 jel, amiben számjegyek és
 az ABCDEF betűk állhatnak.)
 <CENTER>
 <P><B>Néhány példa:</B>
 <P> <FONT SIZE=1>1-es méret</FONT>
 <BR><FONT SIZE=2>2-es méret</FONT>
 <BR><FONT SIZE=3>3-as méret</FONT>
 <BR><FONT SIZE=4>4-es méret</FONT>
 <BR><FONT SIZE=5>5-ös méret</FONT>
 <BR><FONT SIZE=6>6-os méret</FONT>
 <BR><B><FONT COLOR=red>red</FONT>
     <FONT COLOR=#FF0000>= #FF0000</FONT>
 <BR><FONT COLOR=green>green</FONT>
     <FONT COLOR=#008000>= #008000</FONT>
 <BR><FONT COLOR=lime>lime</FONT>
     <FONT COLOR=#00FF00>= #00FF00</FONT>
 <BR><FONT COLOR=blue>blue</FONT>
     <FONT COLOR=#0000FF>= #0000FF</FONT>
 <BR><FONT COLOR=#ABCDEF SIZE=5>#ABCDEF
     (nincs neve)</FONT></B>
 <BR><FONT COLOR=#123456 SIZE=5>#123456
     (meg ennek sincs)</FONT></B>
 <P>A példa a "CENTER" hatását is
 mutatja.
 </CENTER>
A “FONT” paranccsal betűméretet vagy betűszínt
állíthatunk be. A méret 1-től kezdve növekszik, a szín vagy angol
elnevezés (140 lehetőségből), vagy RGB kód #RRGGBB formában. Az RGB
(Red=piros, Green=zöld, Blue=kék) kód hexadecimálisan (16-os
számrendszerben) írandó, és így a piros-zöld-kék arányt több, mint 16
millió módon adhatjuk meg (#000000 és #FFFFFF között). Más kérdés, hogy a
szemünk (és a képernyőnk) hány színt tud megkülönböztetni. (Bölcsészeknek:
A színkód egy # jelet követő olyan 6 jel, amiben számjegyek és az ABCDEF
betűk állhatnak.)
Néhány példa:

1-es méret
2-es méret

3-as méret
4-es méret

5-ös méret
6-os méret

red = #FF0000

green = #008000

lime = #00FF00

blue = #0000FF

#ABCDEF (nincs neve)
#123456 (meg ennek sincs)

A példa a “CENTER” hatását is mutatja.

 

 A FONT parancs SIZE lehetőségével
 beállítható betűméret géptől és
 böngészőbeállítástól függ.
 
 Ez igaz az alábbi <B>címsorokra</B> is:

 <H1>Ez H1-es címsor</H1>
 <H2>Ez H2-es címsor</H2>
 <H3>Ez H3-as címsor</H3>
 <H4>Ez H4-es címsor</H4>
 <H5>Ez H5-ös címsor</H5>
 <H6>Ez H6-os címsor</H6>
A FONT parancs SIZE lehetőségével beállítható
betűméret géptől és böngészőbeállítástól függ. Ez igaz az alábbi
címsorokra is:

Ez H1-es címsor

Ez H2-es címsor

Ez H3-as címsor

Ez H4-es címsor

Ez H5-ös címsor
Ez H6-os címsor
 Itt az eredeti sorkezdet.
 <DL><DD>Így lehet beljebb kezdeni a
         sort, amihez az alatta levő
         sorok is igazodnak.
 </DL>
 <DL><DD>Ezt a beljebb kezdést akár
  <DL><DD>több szinten is lehet
   <DL><DD>folytatni.
   </DL>majd akár újra
  </DL>egyre inkább balra kezdeni.
 </DL>
 <P>Egy másik lehetőség a beljebb
 kezdésre:
 <BLOCKQUOTE>
 <P>Akinek jobban tetszik az, ha egyetlen
 paranccsal tudja beljebb kezdeni a
 szöveget, az választhatja az itt is
 használt "BLOCKQUOTE" lehetőséget.
 </BLOCKQUOTE>
Itt az eredeti sorkezdet.

Így lehet beljebb kezdeni a sort, amihez az alatta levő sorok is
igazodnak.
Ezt a beljebb kezdést akár

több szinten is lehet

folytatni.

majd akár újra

egyre inkább balra
kezdeni.

Egy másik lehetőség a beljebb kezdésre:

Akinek jobban tetszik az, ha egyetlen paranccsal tudja beljebb
kezdeni a szöveget, az választhatja az itt is használt “BLOCKQUOTE”
lehetőséget.

 <PRE>
 A   <B>PRE</B>   kulcsszó   után  álló
 szöveg úgy lesz tagolva,  ahogy
                 az editáláskor.
 Fix szélességűek a jelek ehhez.
        xxxxxxxxxxxxxxxxxxx
        x     x     x     x
        x     x     x     x
        xxxxxxxxxxxxxxxxxxx
 A PRE belseje is lehet pl. <B>bold</B>,
 vagy <FONT COLOR=red>piros</FONT>,
 vagy <FONT SIZE=6>nagy</FONT>,
 vagy akár<FONT COLOR=red SIZE=6><B>
 nagy piros bold</FONT></B> is,
 de itt számítanak a beírt helyközök és
 sorkezdések is.
 </PRE>
 A   PRE   kulcsszó   után  álló
 szöveg úgy lesz tagolva,  ahogy
                 az editáláskor.
 Fix szélességűek a jelek ehhez.
        xxxxxxxxxxxxxxxxxxx
        x     x     x     x
        x     x     x     x
        xxxxxxxxxxxxxxxxxxx
 A PRE belseje is lehet pl. bold,
 vagy piros,
 vagy nagy,
 vagy akár
 nagy piros bold is,
 de itt számítanak a beírt helyközök és
 sorkezdések is.
 Ha egy "&lt;" jelet akarunk a szövegben
 megjeleníteni, akkor gond lehet, hogy
 ezt a böngésző vezérlőjelnek, nem pedig
 megmutatatandó jelnek tekinti. Ilyen
 esetekre találták ki azt a szabályt,
 hogy egy "&amp;" jel és azt követő
 pontosvessző közé írt bizonyos
 jelsorozatok egyetlen megjelenítendő
 jelet képviselnek.
 <PRE>
 <B>Jel  Hogy írjuk? Jel neve</B>
 &lt;    &amp;lt;        kisebb
 &gt;    &amp;gt;        nagyobb
 &amp;    &amp;amp;       "at"-jel
      &amp;nbsp;      helyköz
 &aacute;    &amp;aacute;    a'
 &Aacute;    &amp;Aacute;    A'
 &iacute;    &amp;iacute;    i'
 &uacute;    &amp;uacute;    u'
 &otilde;    &amp;otilde;    o"
 &ocirc;    &amp;ocirc;     o^
 &ucirc;    &amp;ucirc;     u^
 &Ouml;    &amp;Ouml;      O<SUP>..</SUP>
 &#223;    &amp;#223;      scharfes s
 &#251;    &amp;#251;      u"
 &#134;    &amp;#134;      kereszt
 &#137;    &amp;#137;      ezrelék
 &#167;    &amp;#167;      paragrafus
 &#169;    &amp;#169;      copyright
 &#176;    &amp;#176;      fok
 &#187;    &amp;#187;      kettős nagyobb
 &#171;    &amp;#171;      kettős kisebb
 &#177;    &amp;#177;      +-</PRE>
 (Nem biztos, hogy minden böngésző
 minden platformon jól mutatja őket!)
 <P>Látható, hogy maga a &amp; jel is
 megjeleníthető így.
 <P>A &amp;nbsp; helyközök mindegyike
 meg lesz jelenítve,<BR>
 &nbsp; &nbsp; &nbsp; ahogy az itt
 a sor elején látszik. <BR><KBD>
 &nbsp; &nbsp; &nbsp;</KBD>
 Fix szélességű (KBD) betűtipussal
 nagyobb ez a helyköz is.
 Ez ráadásul olyan helyköz, amit nem
 tekint (szó)elválasztónak a böngésző.
 <P>A &amp;#223; írásmódban a "#" jel
 mögött egy tetszőleges UNICODE jel kódja
 állhat. Decimálisan, mint itt, vagy egy
 "x" jellel megelőzve hexadecimálisan.
 <P>Az ékezetes betűk közül nem mindet
 soroltuk fel, de azok a fentiek
 alapján már leírhatók.
 (Vigyázat: nincs &amp;utilde; !)
 <P>Az ilyen ékezetekkel írt magyar
 szöveget minden böngésző jól mutatja,
 de a html szöveg önmagában eléggé
 olvashatatlanná válik.
 <P>Ha MS-Windows ékezeteket használunk,
 az a legtöbb magyarországi gépen jól
 jelenik meg. Azt is tehetjük, hogy az
 így szerkesztett szövegből programmal
 előállítjuk a fenti szabályok szerinti
 html ékezetes szöveget. A legvakmerőbbek
 pedig html ékezetes betűket írnak, pláne
 ha az editoruk ezt egy-egy billentyű
 leütésével lehetővé teszi.
Ha egy “<” jelet akarunk a szövegben
megjeleníteni, akkor gond lehet, hogy ezt a böngésző vezérlőjelnek, nem
pedig megmutatatandó jelnek tekinti. Ilyen esetekre találták ki azt a
szabályt, hogy egy “&” jel és azt követő pontosvessző közé írt
bizonyos jelsorozatok egyetlen megjelenítendő jelet képviselnek.

 Jel  Hogy írjuk? Jel neve
 <    &lt;        kisebb
 >    &gt;        nagyobb
 &    &amp;       "at"-jel
      &nbsp;      helyköz
 á    &aacute;    a'
 Á    &Aacute;    A'
 í    &iacute;    i'
 ú    &uacute;    u'
 õ    &otilde;    o"
 ô    &ocirc;     o^
 û    &ucirc;     u^
 Ö    &Ouml;      O..
 ß    &#223;      scharfes s
 û    &#251;      u"
 †    &#134;      kereszt
 ‰    &#137;      ezrelék
 §    &#167;      paragrafus
 ©    &#169;      copyright
 °    &#176;      fok
 »    &#187;      kettős nagyobb
 «    &#171;      kettős kisebb
 ±    &#177;      +-

(Nem biztos, hogy minden böngésző minden
platformon jól mutatja őket!)

Látható, hogy maga a & jel is megjeleníthető így.

A &nbsp; helyközök mindegyike meg lesz jelenítve,

ahogy az itt a sor elején látszik.

Fix szélességű (KBD) betűtipussal nagyobb ez a helyköz is. Ez
ráadásul olyan helyköz, amit nem tekint (szó)elválasztónak a böngésző.

A &#223; írásmódban a “#” jel mögött egy tetszőleges UNICODE jel
kódja állhat. Decimálisan, mint itt, vagy egy “x” jellel megelőzve
hexadecimálisan.

Az ékezetes betűk közül nem mindet soroltuk fel, de azok a fentiek
alapján már leírhatók. (Vigyázat: nincs &utilde; !)

Az ilyen ékezetekkel írt magyar szöveget minden böngésző jól mutatja,
de a html szöveg önmagában eléggé olvashatatlanná válik.

Ha MS-Windows ékezeteket használunk, az a legtöbb magyarországi gépen
jól jelenik meg. Azt is tehetjük, hogy az így szerkesztett szövegből
programmal előállítjuk a fenti szabályok szerinti html ékezetes szöveget.
A legvakmerőbbek pedig html ékezetes betűket írnak, pláne ha az editoruk
ezt egy-egy billentyű leütésével lehetővé teszi.

 Az "A" parancs egy másik html lapra
 irányítja a vezérlést. ("Link"-nek
 is hívják.) <P>Például arra a lapra,
 ahol megtaláljuk az összes elnevezett
 szín nevét, a következő hivatkozással
 juthatunk:<BR>
 <A HREF=szinek.htm>Ide kattintson</A>,
 ha a színeket akarja látni.
 <P>Ezen a módon az éppen mutatott
 html lappal azonos directoryban levő
 másik ("szinek.htm" nevű) fájlra
 hivatkozunk.
 <P>Ha az éppen mutatott html lappal
 azonos directoryban levő, "lapok"
 nevű aldirectoryban lenne a
 "szinek.htm" nevű fájl, akkor
 <B>HREF=lapok/szinek.htm</B> lenne
 a hivatkozás.
 <P>Ha az éppen mutatott html lapot
 tartalmazó directoryt tartalmazó
 directoryban lenne a "szinek.htm",
 akkor <B>HREF=../szinek.htm</B>
 lenne a hivatkozás.
 <P>Ha viszont egy másik gépen van a
 hivatkozott lap, akkor a hivatkozás
 kezdete <B>HREF=http://</B>,
 ezt a gép neve követi, aztán a lap
 neve (az elválasztójel mindig -
 PC esetén is - "/" jel).
 Pl. Így jutunk az ELTE <A HREF=
 http://caesar.elte.hu/progmat>
 progmat</A> lapjára.
Az “A” parancs egy másik html lapra irányítja a
vezérlést. (“Link”-nek is hívják.)Például arra a lapra, ahol megtaláljuk az összes elnevezett szín nevét,
a következő hivatkozással juthatunk:
Ide kattintson,
ha a színeket akarja látni.

Ezen a módon az éppen mutatott html lappal azonos directoryban levő
másik (“szinek.htm” nevű) fájlra hivatkozunk.

Ha az éppen mutatott html lappal azonos directoryban levő, “lapok” nevű
aldirectoryban lenne a “szinek.htm” nevű fájl, akkor
HREF=lapok/szinek.htm lenne a hivatkozás.

Ha az éppen mutatott html lapot tartalmazó directoryt tartalmazó
directoryban lenne a “szinek.htm”, akkor HREF=../szinek.htm lenne a
hivatkozás.

Ha viszont egy másik gépen van a hivatkozott lap, akkor a hivatkozás
kezdete HREF=http://, ezt a gép neve követi, aztán a lap neve (az
elválasztójel mindig – PC esetén is – “/” jel). Pl. Így jutunk az ELTE progmat lapjára.

 Az "A HREF=" mögött nem csak "htm"
 vagy "html" végződésű html lapra
 hivatkozhatunk, hanem képfájlra is.
 <P>(Leginkább a .jpg és .gif
 végződésű képfájl formátumokat
 ismerik a böngészőprogramok.) <P>Pl.
 <A HREF=deli.jpg>Ide kattintson</A>,
 ha az ELTE-TTK Déli épületét
 látni akarja.
Az “A HREF=” mögött nem csak “htm” vagy “html” végződésű
html lapra hivatkozhatunk, hanem képfájlra is.(Leginkább a .jpg és .gif végződésű képfájl formátumokat ismerik a
böngészőprogramok.)

Pl. Ide
kattintson
, ha az ELTE-TTK Déli épületét látni akarja.

 <FONT COLOR=yellow>
 <IMG SRC="kdelihid.jpg" ALIGN=left
  HSPACE=10 VSPACE=10 BORDER=1>
 </FONT>
 Gyakoribb az, hogy nem külön lapként,
 hanem az aktuális lapra akarunk
 képeket behozni. Az "IMG" kulcsszóval
 tehetjük ezt. Bekeretezhetjük a képet,
 és a szöveg mögé (ALIGN=right)
 vagy elé (ALIGN=left) tehetjük,
 úgy, hogy a szöveg a képet
 "körülfollya". (ALIGN=top és
 ALIGN=middle is lehetséges, de nem
 minden böngésző tudja.)
 <FONT COLOR=blue>
 <IMG SRC="kdelihid.jpg" ALIGN=right
  HSPACE=10 VSPACE=10 BORDER=2
  WIDTH=120 HEIGHT=80>
 </FONT>
 A "BORDER" mögött a keret méretét,
 a HSPACE ill. VSPACE mögött a kép
 mellett ill. az alatta-fölötte levő
 üres rész méretét (képernyő
 pontokban) adhatjuk meg. A keret
 színe az aktuális betűszín, amit
 minden képre külön beállíthatunk.
 Ha nem az eredeti méretében akarjuk
 a képet mutatni, akkor a "HEIGHT="
 ill. "WIDTH=" paraméter is szóba
 jöhet. (Ezt is képpontokban mérve.)
 Ilyenkor torzulhat a kép, ha rossz
 arányban méretezzük át.

Gyakoribb az, hogy nem külön lapként, hanem az aktuális lapra
akarunk képeket behozni. Az “IMG” kulcsszóval tehetjük ezt.
Bekeretezhetjük a képet, és a szöveg mögé (ALIGN=right) vagy elé
(ALIGN=left) tehetjük, úgy, hogy a szöveg a képet “körülfollya”.
(ALIGN=top és ALIGN=middle is lehetséges, de nem minden böngésző tudja.)
A “BORDER” mögött a keret méretét, a HSPACE ill. VSPACE
mögött a kép mellett ill. az alatta-fölötte levő üres rész méretét
(képernyő pontokban) adhatjuk meg. A keret színe az aktuális betűszín,
amit minden képre külön beállíthatunk. Ha nem az eredeti méretében akarjuk
a képet mutatni, akkor a “HEIGHT=” ill. “WIDTH=” paraméter is szóba jöhet.
(Ezt is képpontokban mérve.) Ilyenkor torzulhat a kép, ha rossz arányban
méretezzük át.
 <A HREF=deli.jpg> <IMG SRC="kdeli.jpg"
    ALIGN=left
    ALT="ELTE, Déli épület"> </A>
 Gyakran a HREF-ben nem szövegre, hanem
 képre kell kattintani ahhoz, hogy a
 HREF által mutatott másik lapra jussunk.
 <P>Ilyenkor célszerű az "ALT=szöveg"
 paraméter használata.
 Ez lehetővé teszi, hogy aki pl. nem
 grafikus böngészővel (pl. lynx-el)
 nézi a lapot, az is tovább tudjon
 menni a másik lapra.
 Neki ilyenkor az <B>ALT=</B> mögötti
 szöveg jelenik meg.
 (Tegyük idézőjelbe a szöveget, ha
 tartalmaz helyközt is.) 
ELTE, Déli épület
Gyakran a HREF-ben nem szövegre, hanem képre kell kattintani ahhoz,
hogy a HREF által mutatott másik lapra jussunk.Ilyenkor célszerű az “ALT=szöveg” paraméter használata. Ez lehetővé
teszi, hogy aki pl. nem grafikus böngészővel (pl. lynx-el) nézi a lapot,
az is tovább tudjon menni a másik lapra. Neki ilyenkor az ALT=
mögötti szöveg jelenik meg. (Tegyük idézőjelbe a szöveget, ha tartalmaz
helyközt is.)
 <IMG SRC=elte12.jpg USEMAP=#eltemap
      BORDER=2 ALIGN=right HSPACE=10>
 <MAP NAME=eltemap>
  <AREA SHAPE="rect"
        COORDS="27,141,40,179"
        HREF=eltei.jpg
        ALT="Informatikai épület">
  <AREA SHAPE="circle"
        COORDS="87,58,5" HREF=eltef.jpg
        ALT="Központi épület">
  <AREA SHAPE="default" HREF=xy.htm
        ALT="Javascriptes koordináták">
 </MAP>
 Azt is megtehetjük, hogy egy képfájl
 egyes részeit más-más linkre tesszük
 érzékennyé egy "USEMAP" segítségével.
 <P>Az USEMAP-nak nem muszáj közvetlenül
 a képdefiníció után állnia.
 <P>Az AREA-ban megadott képrészlet lehet
 "rect=téglalap" (a bal felső és a jobb
 alsó sarok koordinátáit kell megadni),
 "circle=kör" (a középpont koordinátáit
 és a sugár hosszát kell megadni) vagy
 "poly=sokszög" (a csúcspontok
 koordinátáit kell megadni).
 <P>Itt a régi Inf. épület két oszlopa
 közötti téglalapra kattintva ezt az
 épületet láthatjuk "nagyban", a központi
 épületet pedig a tetején levő világos,
 kör alakú részén keresztül érhetjük el.
 <P>A "SHAPE=default"-ban adjuk meg a
 kép további részeire vonatkozó linket.
 Ez most egy olyan, Javascriptet
 tartalmazó lap, ami mutatja, hogyan
 olvashatunk le egy képről koordinátákat.
 <P>Ha az "AREA SHAPE=default"-ban az
 itteni további paraméterek helyett csak
 <B>NOHREF</B> állna, akkor a kép nagy
 része nem reagálna az egér lenyomására.
 <P>Ha az egeret mozgatjuk ezen a képen,
 akkor alul a státusz sorban láthatjuk
 is az ALT-ba írt szövegeket. Csak ezek a
 szövegek lesznek nem grafikus böngésző
 esetén megjelenítve (a kép helyett).
 <P>A "BORDER=2" helyett "BORDER=0"-t
 kellene írni ahhoz, hogy ne legyen
 kerete a képnek.

Informatikai épület Központi épület Javascriptes koordináták

Azt is megtehetjük,
hogy egy képfájl egyes részeit más-más linkre tesszük érzékennyé egy
“USEMAP” segítségével.

Az USEMAP-nak nem muszáj közvetlenül a képdefiníció után állnia.

Az AREA-ban megadott képrészlet lehet “rect=téglalap” (a bal felső és a
jobb alsó sarok koordinátáit kell megadni), “circle=kör” (a középpont
koordinátáit és a sugár hosszát kell megadni) vagy “poly=sokszög” (a
csúcspontok koordinátáit kell megadni).

Itt a régi Inf. épület két oszlopa közötti téglalapra kattintva ezt az
épületet láthatjuk “nagyban”, a központi épületet pedig a tetején levő
világos, kör alakú részén keresztül érhetjük el.

A “SHAPE=default”-ban adjuk meg a kép további részeire vonatkozó
linket. Ez most egy olyan, Javascriptet tartalmazó lap, ami mutatja,
hogyan olvashatunk le egy képről koordinátákat.

Ha az “AREA SHAPE=default”-ban az itteni további paraméterek helyett
csak NOHREF állna, akkor a kép nagy része nem reagálna az egér
lenyomására.

Ha az egeret mozgatjuk ezen a képen, akkor alul a státusz sorban
láthatjuk is az ALT-ba írt szövegeket. Csak ezek a szövegek lesznek nem
grafikus böngésző esetén megjelenítve (a kép helyett).

A “BORDER=2” helyett “BORDER=0”-t kellene írni ahhoz, hogy ne legyen
kerete a képnek.

 <A NAME=eleje>
 <A HREF=#vege>Ha ide kattint</A>, akkor
 ennek a cellának a <FONT COLOR=blue>
 kékkel írt</FONT> sorára pozícinálhat.
 <P>Ha egy html lapról egy másik lapnak a
 belsejébe akarunk pozícionálni, akkor a
 "HREF"-be a fájlnév után közvetlenül
 egy "#pozíciónév" toldalékot írjunk.
 Ahová pozícionálni akarunk, oda tegyünk
 egy "&lt;A NAME=pozíciónév&gt;" alakú
 pozíciómegjelölést.
 <P>Amint az itteni példa is mutatja, a
 dolog működik egy html lapon belül is.
 <P>Ezzel a módszerrel pl. egy nagyobb
 lap elejére odatehetjük a lap olyan
 tartalomjegyzékét, amiből a lap egyes
 részei közvetlenül elérhetők.
 <P><A NAME=vege> <FONT COLOR=blue>
 <H3>Ez itt a kékkel írt sor.</H3></FONT>
 <P>Innen a <B>Back</B> nyomógommbal,
 vagy <A HREF=#eleje>ide kattintva</A>
 vissza is juthat a cella elejére.
 (A "Back" gombbal csak akkor, ha onnan
 jött.)
Ha ide
kattint
, akkor ennek a cellának a kékkel írt
sorára pozícinálhat.Ha egy html lapról egy másik lapnak a belsejébe akarunk pozícionálni,
akkor a “HREF”-be a fájlnév után közvetlenül egy “#pozíciónév” toldalékot
írjunk. Ahová pozícionálni akarunk, oda tegyünk egy “<A
NAME=pozíciónév>” alakú pozíciómegjelölést.

Amint az itteni példa is mutatja, a dolog működik egy html lapon belül
is.

Ezzel a módszerrel pl. egy nagyobb lap elejére odatehetjük a lap olyan
tartalomjegyzékét, amiből a lap egyes részei közvetlenül elérhetők.

Ez itt a kékkel írt sor.

 

Innen a Back nyomógommbal, vagy ide
kattintva
vissza is juthat a cella elejére. (A “Back” gombbal csak
akkor, ha onnan jött.)

 Ha az email címünket fel akarjuk tenni
 a html lapra, akkor is az "A HREF="-t
 kell használni:
 <A HREF=mailto:csa@inf.elte.hu>
 <P>Ide kattints</A>, ha levelet akarsz
 nekem írni.
Ha az email címünket fel akarjuk tenni a html lapra,
akkor is az “A HREF=”-t kell használni:
Ide kattints, ha levelet akarsz nekem írni.
 Így lehet megjeleníteni felsorolást
 <UL><LI>első
     <LI>második
     <LI>harmadik bekezdéssel, amik közül
         ez a harmadik jóval hosszabb az
         előző kettőnél, ezért csak több
         sorban fér el.
 </UL>
Így lehet megjeleníteni felsorolást

  • első
  • második
  • harmadik bekezdéssel, amik közül ez a harmadik jóval hosszabb az
    előző kettőnél, ezért csak több sorban fér el.
 Itt azt lehet látni, hogy a felsorolás
 többszintes is lehet, többféle
 kezdőjellel.
 <UL TYPE=round>
     <LI>Európa
     <P><LI>Ázsia
     <P><LI>Amerika
         <ul type=square>
             <li>Észak-Amerika
                 <UL TYPE=disc>
                     <LI>Kanada
                     <LI>USA
                 </UL>
             <li>Közép-Amerika
             <li>Dél-Amerika
         </ul>
     <P><LI>Afrika
 </UL>
 <P>Természetesen nem attól függ a
 listaelemek beljebb kezdése, hogy a
 html szövegben hol kezdjük őket.
 <P>Azt is láthatjuk, hogy a html vezérlő
 jelek kis- és nagybetűkkel is írhatók.
Itt azt lehet látni, hogy a felsorolás többszintes is
lehet, többféle kezdőjellel.

  • Európa
  • Ázsia
  • Amerika
    • Észak-Amerika
      • Kanada
      • USA
    • Közép-Amerika
    • Dél-Amerika
  • Afrika

Természetesen nem attól függ a listaelemek beljebb kezdése, hogy a html
szövegben hol kezdjük őket.

Azt is láthatjuk, hogy a html vezérlő jelek kis- és nagybetűkkel is
írhatók.

 Ha "UL" helyett "OL"-t írunk,
 akkor a felsorolás tagjai
 a tipustól (type) függően
 <OL TYPE=i>
     <LI>számozva (TYPE=1, elhagyható)
     <LI>római számozva (TYPE=I)
     <LI>kis római számozva (TYPE=i)
     <LI>kisbetűzve (TYPE=a)
     <LI>vagy nagybetűzve (TYPE=A)
 </OL>
 lesznek.
 <P><UL>
     <LH>(Beljebb kezdett) listafejlécet
     <LI>is
     <LI>megadhatunk
     <LI>"OL" és "UL" lista
     <LI>esetén is.
 </UL>
Ha “UL” helyett “OL”-t írunk, akkor a felsorolás tagjai
a tipustól (type) függően

  1. számozva (TYPE=1, elhagyható)
  2. római számozva (TYPE=I)
  3. kis római számozva (TYPE=i)
  4. kisbetűzve (TYPE=a)
  5. vagy nagybetűzve (TYPE=A)

lesznek.

    • (Beljebb kezdett) listafejlécet

    • is
    • megadhatunk
    • “OL” és “UL” lista
    • esetén is.

 

 <DL COMPACT>
  <DT><P><B>egy </B><DD>Itt arra
    láthatunk példát, hogyan lehet egyéb
    html elemekből "fogalom magyarázat"
    jellegű, ún. "definíciós" listát
    felépíteni,
  <DT><P><B>kettő </B><DD>és, hogy
    milyen ennek a megjelenési formája.
  <DT><P><B>három a magyar igazság</B>
    <DD>Természetesen nem kötelező a
    "fogalom" kövérítése és a listaelemek
    közötti (a "P" hatására keletkezett)
    üres sorok használata.
  <DT><P><B>négy </B><DD>A "DL"-be írt
    "COMPACT" hatására kerül egy sorba a
    rövid "fogalom" a "magyarázattal",
  <DT><P><B>öt </B><DD>ahogy itt is.
 </DL>
egy
Itt arra láthatunk példát, hogyan lehet egyéb html elemekből
“fogalom magyarázat” jellegű, ún. “definíciós” listát felépíteni,
kettő
és, hogy milyen ennek a megjelenési formája.
három a magyar igazság
Természetesen nem kötelező a “fogalom” kövérítése és a listaelemek
közötti (a “P” hatására keletkezett) üres sorok használata.
négy
A “DL”-be írt “COMPACT” hatására kerül egy sorba a rövid “fogalom” a
“magyarázattal”,
öt
ahogy itt is.
 Néhány egyéb effektus:
 <P><HR><HR noshade>
 Itt húztunk egy árnyékolt, és egy nem
 árnyékolt vonalat.
 <SPACER TYPE=VERTICAL SIZE=15>
 Aztán függőlegesen kihagytunk 15
 képpontnyi helyet.
 <HR ALIGN=center SIZE=10 WIDTH=200>
 Aztán húztunk még egy vonalat, ami
 10 képpont vastagságú, 200 képpont
 hosszúságú, és középre van téve.
 <BR>(Megadható pl. "WIDTH=50%" is, ami
 azt jelenti, hogy amikor keskenyedik a
 böngésző ablaka, akkor vele együtt a
 vonal hossza is csökken.)
Néhány egyéb effektus:



Itt húztunk egy árnyékolt, és egy nem árnyékolt vonalat. Aztán függőlegesen kihagytunk 15 képpontnyi helyet.


Aztán húztunk még egy vonalat, ami 10 képpont vastagságú, 200 képpont
hosszúságú, és középre van téve.
(Megadható pl. “WIDTH=50%” is, ami
azt jelenti, hogy amikor keskenyedik a böngésző ablaka, akkor vele együtt
a vonal hossza is csökken.)

 Most <B>táblázat</B>-ot készítünk.
 <P>A "TABLE" kulcsszó mellett adjuk meg
 a táblázat fő jellemzőit.
 <P>A táblázat minden sorát a "TR"
 kulcsszó, azon belül minden oszlopát a
 "TD" kulcsszó kezdi.
 <P>Ha a fejlécsor oszlopait "TD" helyett
 "TH"-val kezdjük, akkor kiemelt (kövér)
 betűkkel jelenik meg ezekben a szöveg.
 <P> <CENTER>
 <TABLE BORDER=3 BGCOLOR=silver
        CELLPADDING=4>
 <TR><TH>Cella háttérszíne</TH>
   <TH>Szín neve</TH>
   <TH>RGB kódja</TH></TR>
 <TR><TD BGCOLOR=black>&nbsp;</TD>
   <TD>black</TD> <TD>#000000</TD></TR>
 <TR><TD BGCOLOR=blue>&nbsp;</TD>
   <TD>blue</TD> <TD>#0000FF</TD></TR>
 <TR><TD BGCOLOR=cyan>&nbsp;</TD>
   <TD>cyan</TD> <TD>#00FFFF</TD></TR>
 <TR><TD BGCOLOR=green>&nbsp;</TD>
   <TD>green</TD> <TD>#008000</TD></TR>
 <TR><TD BGCOLOR=magenta>&nbsp;</TD>
   <TD>magenta</TD> <TD>#FF00FF</TD></TR>
 <TR><TD BGCOLOR=red>&nbsp;</TD>
   <TD>red</TD> <TD>#FF0000</TD></TR>
 <TR><TD BGCOLOR=white>&nbsp;</TD>
   <TD>white</TD> <TD>#FFFFFF</TD></TR>
 </TABLE> </CENTER>
 <P>Látható, hogy a táblázat egészének
 is lehet háttérszíne (itt "silver")
 de akár külön az egyes celláinak is.
 <P>Megadhatjuk a tábla keretének
 szélességét (BORDER=3), ha ez elmarad,
 nem lesz kerete a táblázatnak.
 <P>A "CELLPADDING=4" azt jelenti, hogy
 a cellákba írt szövegek és a cellafalak
 között 4 képpont üresen marad.
 <P>Egy cella csak akkor jelenik meg
 rendesen, ha van benne valami,
 legalább egy "látható" helyköz.
 Ezért van itt a színes cellákban
 &amp;nbsp;.
 <P><HR><FONT COLOR=blue><B>
 <P>Ez az egész lap is egy nagy táblázat,
 amiben azt a szabályt nehéz betartanom,
 hogy csak félsorokat írhatok a baloldali
 oszlopok megjeleníthetősége érdekében.
 </FONT></B>
Most táblázat-ot készítünk.

A “TABLE” kulcsszó mellett adjuk meg a táblázat fő jellemzőit.

A táblázat minden sorát a “TR” kulcsszó, azon belül minden oszlopát a
“TD” kulcsszó kezdi.

Ha a fejlécsor oszlopait “TD” helyett “TH”-val kezdjük, akkor kiemelt
(kövér) betűkkel jelenik meg ezekben a szöveg.

 

Cella háttérszíne Szín neve RGB kódja
black #000000
blue #0000FF
cyan #00FFFF
green #008000
magenta #FF00FF
red #FF0000
white #FFFFFF

 

Látható, hogy a táblázat egészének is lehet háttérszíne (itt “silver”)
de akár külön az egyes celláinak is.

Megadhatjuk a tábla keretének szélességét (BORDER=3), ha ez elmarad,
nem lesz kerete a táblázatnak.

A “CELLPADDING=4” azt jelenti, hogy a cellákba írt szövegek és a
cellafalak között 4 képpont üresen marad.

Egy cella csak akkor jelenik meg rendesen, ha van benne valami,
legalább egy “látható” helyköz. Ezért van itt a színes cellákban
&nbsp;.


 

Ez az egész lap is egy nagy táblázat, amiben azt a szabályt nehéz
betartanom, hogy csak félsorokat írhatok a baloldali oszlopok
megjeleníthetősége érdekében.

 Mintákat láthatunk táblázat méretezésre,
 és szöveg illesztésére a cellákban.

 <P><TABLE BGCOLOR=orangered WIDTH=100%
         BORDER=1>
 <TR><TD WIDTH=30% ALIGN=center>
         középre</TD>
     <TD ALIGN=right WIDTH=20%>Ez<BR>
         jobbra<BR>lesz<BR>illesztve</TD>
     <TD>balra</TD></TR>
 </TABLE>

 <P>"WIDTH=" mögött megadható a táblázat
 vagy egy cella szélessége képpontokban.
 "WIDTH=100%" viszont azt jelenti, hogy
 a tábla töltse ki a html-lap teljes
 rendelkezésére álló szélességét.
 Az egyes oszlopokra adott %-os hossz a
 teljes táblázatszélességre, mint 100%-ra
 vonatkozik.
 Ezzel a módszerrel igen rugalmasan
 adhatók meg "gumi"-táblázatok.
 <P>Abszolút magasság is megadható a
 cellákra(TD), "HEIGHT=" mögötti számmal.

 <TABLE BGCOLOR=orangered WIDTH=100%
        BORDER=1 CELLPADDING=5>
 <TR><TD HEIGHT=60 VALIGN=top
     ALIGN=center>fent középre</TD></TR>
 <TR><TD HEIGHT=100 ALIGN=right>
     <FONT COLOR=cyan><B>
     Ez középen<BR>jobbra<BR>lesz
     illesztve</FONT></B></TD></TR>
 <TR><TD HEIGHT=50 VALIGN=bottom>
     lent balra</TD></TR>
 </TABLE>

 <TABLE WIDTH=100% CELLPADDING=5>
 <TR><TD ALIGN=right>Ha<BR>elhagyjuk<BR>
     a<BR>táblázat<BR>keretét<BR>és<BR>
     színét<BR>is</TD>
     <TD>akkor<BR>észre<BR>se<BR>nagyon
     <BR>vesszük,<BR>hogy<BR>táblázatot
     <BR>látunk</TD> </TR>
 </TABLE>

 <CENTER><TABLE WIDTH=98% BORDER=0
          CELLPADDING=0 CELLSPACING=0
 <TR><TD BGCOLOR=yellow>
  <TABLE CELLPADDING=16 CELLSPACING=1
         WIDTH=100% BORDER=0>
   <TR><TD BGCOLOR=deepskyblue>
    Sokan kedvelik azt a keretet,
    amit nem a BORDER-rel lehet megadni,
    hanem azzal, amit egy színes (itt
    sárga) táblázatcellának a nála 1-el
    kisebb méretű (CELLSPACING=1)
    táblázat által le nem takart része
    eredményez.
   </TD></TR><TR><TD BGCOLOR=deepskyblue>
    Ennek a keretnek a színe független a
    betűszíntől, a formája is más, mint
    a BORDER-el kapott kereté.
  </TD></TR></TABLE>
 </TD></TR></TABLE>
Mintákat láthatunk táblázat méretezésre, és szöveg
illesztésére a cellákban.

középre Ez
jobbra
lesz
illesztve
balra

“WIDTH=” mögött megadható a táblázat vagy egy cella szélessége
képpontokban. “WIDTH=100%” viszont azt jelenti, hogy a tábla töltse ki a
html-lap teljes rendelkezésére álló szélességét. Az egyes oszlopokra adott
%-os hossz a teljes táblázatszélességre, mint 100%-ra vonatkozik. Ezzel a
módszerrel igen rugalmasan adhatók meg “gumi”-táblázatok.

Abszolút magasság is megadható a cellákra(TD), “HEIGHT=” mögötti
számmal.

fent középre
Ez
középen
jobbra
lesz illesztve
lent balra
Ha
elhagyjuk
a
táblázat
keretét
és
színét
is
akkor
észre
se
nagyon

vesszük,
hogy
táblázatot
látunk

 

Sokan kedvelik azt a keretet, amit nem
a BORDER-rel lehet megadni, hanem azzal, amit egy színes (itt
sárga) táblázatcellának a nála 1-el kisebb méretű
(CELLSPACING=1) táblázat által le nem takart része eredményez.
Ennek a keretnek a színe független a
betűszíntől, a formája is más, mint a BORDER-el kapott kereté.

 

 Amint látható, az egymás melletti vagy
 alatti táblázatcellák összevonhatók.
 <P><TABLE WIDTH=100% BORDER=1
     BGCOLOR=limegreen CELLPADDING=15>
 <TR><TD WIDTH=25%>
     Első sor</TD><TD COLSPAN=3>
     három összevont oszloppal</TD></TR>
 <TR><TD ROWSPAN=2>2. és 3. sor 1.
     oszlopa összevonva</TD>
     <TD WIDTH=25%>Ez a</TD>
     <TD WIDTH=25%>2.</TD>
     <TD WIDTH=25%>sor</TD></TR>
 <TR><TD>Ez a</TD><TD>3.</TD><TD>sor</TD>
     </TR>
 </TABLE>
 <P>Az is látszik, hogy az oszlopok (itt
 azonos) hosszát oszloponként egyszer,
 ott adjuk meg, ahol akarjuk (és tudjuk).
Amint látható, az egymás melletti vagy alatti
táblázatcellák összevonhatók.

Első sor három összevont oszloppal
2. és 3. sor 1. oszlopa összevonva Ez a 2. sor
Ez a 3. sor

Az is látszik, hogy az oszlopok (itt azonos) hosszát oszloponként
egyszer, ott adjuk meg, ahol akarjuk (és tudjuk).

 <FONT COLOR=white><B>
 A cellákba nemcsak szöveg kerülhet,
 hanem pl. kép vagy másik táblázat is.
 Utóbbira ez az anyag maga a példa,
 előbbire pedig a következő táblázat,
 amiben a képek ráadásul link-ek is.
 </FONT></B>
 <CENTER><TABLE BORDER=1 CELLPADDING=5>
 <TR><TD><A HREF=kemia.jpg>
     <IMG SRC=kkemia.jpg
      ALT="Kémia épület"></A></TD>
     <TD><A HREF=fizika.jpg>
     <IMG SRC=kfizika.jpg
      ALT="Fizikus épület"></A></TD></TR>
 <TR><TD><A HREF=infoep.jpg>
     <IMG SRC=kinfoep.jpg
      ALT="Az új és a régi Inf. épület">
      </A></TD>
     <TD><A HREF=ujitcs.jpg>
     <IMG SRC=kujitcs.jpg
      ALT="Déli épület, 1999. szept.">
      </A></TD>
      </TR>
 </TABLE>
A cellákba nemcsak szöveg
kerülhet, hanem pl. kép vagy másik táblázat is. Utóbbira ez az anyag maga
a példa, előbbire pedig a következő táblázat, amiben a képek ráadásul
link-ek is.

Kémia épület Fizikus épület
Az új és a régi Inf. épület A Déli épület, 1999. szept.

 

 Néhány szó: színekről, háttérről,
 szöveg illesztésről.
 <P ALIGN=right>A html lap "BODY" sorában
 "BACKGROUND=képfájlnév" formában
 háttérképet adhatunk meg. Ha emellett
 még a "BGPROPERTIES=fixed" paramétert
 is beírjuk a sorba, akkor egyes
 böngészők a html lap scrollozása
 közben nem mozgatják a hátteret.
 <P ALIGN=justify>
 Ha háttérkép helyett háttérszínt
 akarunk megadni, akkor ezt a "BODY"
 sorába írt "BGCOLOR=szín" paraméterrel
 tehetjük. A "szín" vagy a szín angol
 neve, vagy #RGB-kód lehet, ahogy erről
 korábban már volt szó.
 Szintén a "BODY" sorába írt "TEXT=szín"
 paraméterrel az egész html lap
 betűszínét adhatjuk meg, amitől aztán
 &lt;FONT COLOR=szín&gt; és &lt;/FONT&gt;
 közötti szövegrészekben eltérhetünk.
 <DIV ALIGN=justify>
 <P>Ahogy az előző két paragrafust kezdő
 <B>P</B> parancsban látható, megadhatunk
 egy paragrafusra nem balra történő
 szöveg illesztést is.
 <P>Ha egy html lapon sok egymás utáni
 paragrafust (pl. a teljes lapot) akarjuk
 (pl. balra és jobbra is) illeszteni,
 akkor célszerű az illesztendő részt egy
 nagyobb egységgé (ún. "DIV" blokká)
 kiemelni, és a <B>DIV</B>-be írni az
 illesztést, ahogy azt itt tettük.
 A DIV-nek illik megjelölni a végét.
 </DIV>
Néhány szó: színekről, háttérről, szöveg
illesztésről.

A html lap “BODY” sorában “BACKGROUND=képfájlnév” formában
háttérképet adhatunk meg. Ha emellett még a “BGPROPERTIES=fixed”
paramétert is beírjuk a sorba, akkor egyes böngészők a html lap
scrollozása közben nem mozgatják a hátteret.

Ha háttérkép helyett háttérszínt akarunk megadni, akkor
ezt a “BODY” sorába írt “BGCOLOR=szín” paraméterrel tehetjük. A “szín”
vagy a szín angol neve, vagy #RGB-kód lehet, ahogy erről korábban már volt
szó. Szintén a “BODY” sorába írt “TEXT=szín” paraméterrel az egész html
lap betűszínét adhatjuk meg, amitől aztán <FONT COLOR=szín> és
</FONT> közötti szövegrészekben eltérhetünk.

Ahogy az előző két paragrafust kezdő P parancsban látható,
megadhatunk egy paragrafusra nem balra történő szöveg illesztést is.

Ha egy html lapon sok egymás utáni paragrafust (pl. a teljes lapot)
akarjuk (pl. balra és jobbra is) illeszteni, akkor célszerű az illesztendő
részt egy nagyobb egységgé (ún. “DIV” blokká) kiemelni, és a DIV-be
írni az illesztést, ahogy azt itt tettük. A DIV-nek illik megjelölni a
végét.

 


Csizmazia Albert csa@inf.elte.hu