Honlaptuning

Az oldal 2013.03.16-án indult. Minden héten frissítve lesz az oldal. Várjuk e-mailben a javaslataitokat is!


Start - Stop
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>
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ületKözponti épületJavascriptes 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:honlaptuning.atw.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 "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 &nbsp;.

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

Hirdetés helye!