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   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 ß í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.)

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.

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

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

lesznek.

(Beljebb kezdett) listafejlécet

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 "CAPTION" kulcsszó vezeti be a
 - nem kötelező - táblázat feliratot.
 <P>A táblázat minden sorát a "TR"
 kulcsszó, azon belül minden oszlopát a
 "TD" kulcsszó kezdi.
 <P>Ha a "TD" helyett "TH"-t használunk,
 akkor kövér betűkkel, középre illesztve
 jelenik meg a cellában a szöveg.
 <P> <CENTER>
 <TABLE BORDER=3 BGCOLOR=silver
        CELLPADDING=4>
 <CAPTION>Színes táblázat</CAPTION>
 <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 a
 táblánk színes celláiban &amp;nbsp;.
 <P>Az oszlopokat ill. sorokat lezáró
 &lt;/TD&gt; és &lt;/TR&gt; megadása
 nem kötelező, de meg szokták adni.
 <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 "CAPTION" kulcsszó vezeti be a - nem kötelező - táblázat feliratot.

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

Ha a "TD" helyett "TH"-t használunk, akkor kövér betűkkel, középre illesztve jelenik meg a cellában a szöveg.

Színes táblázat
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 a táblánk színes celláiban  .

Az oszlopokat ill. sorokat lezáró </TD> és </TR> megadása nem kötelező, de meg szokták adni.

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.

 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