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:
|
||||||||||||||||||||||||
Í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 |
||||||||||||||||||||||||
Í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, Láthatjuk, hogy egy parancs hatása olyan másikkal zárható le, ami a |
||||||||||||||||||||||||
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.) 1-es méret 3-as méret 5-ös méret red = #FF0000 green = #008000 lime = #00FF00 blue = #0000FF #ABCDEF (nincs neve) 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ímsorEz H2-es címsorEz H3-as címsorEz H4-es címsorEz H5-ös címsorEz 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.
Egy másik lehetőség a beljebb kezdésre:
|
||||||||||||||||||||||||
<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 "<" 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. <PRE> <B>Jel Hogy írjuk? Jel neve</B> < &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<SUP>..</SUP> ß &#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; +-</PRE> (Nem biztos, hogy minden böngésző minden platformon jól mutatja őket!) <P>Látható, hogy maga a & jel is megjeleníthető így. <P>A &nbsp; helyközök mindegyike meg lesz jelenítve,<BR> ahogy az itt a sor elején látszik. <BR><KBD> </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 &#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 &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 < < kisebb > > nagyobb & & "at"-jel helyköz á á a' Á Á A' í í i' ú ú u' õ õ o" ô ô o^ û û u^ Ö Ö O.. ß ß scharfes s û û u" † † kereszt ‰ ‰ ezrelék § § paragrafus © © copyright ° ° fok » » kettős nagyobb « « kettős kisebb ± ± +- (Nem biztos, hogy minden böngésző minden 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. A ß írásmódban a „#” jel mögött egy tetszőleges UNICODE jel Az ékezetes betűk közül nem mindet soroltuk fel, de azok a fentiek Az ilyen ékezetekkel írt magyar szöveget minden böngésző jól mutatja, Ha MS-Windows ékezeteket használunk, az a legtöbb magyarországi gépen |
||||||||||||||||||||||||
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ő Ha az éppen mutatott html lappal azonos directoryban levő, „lapok” nevű Ha az éppen mutatott html lapot tartalmazó directoryt tartalmazó Ha viszont egy másik gépen van a hivatkozott lap, akkor a hivatkozás |
||||||||||||||||||||||||
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 |
||||||||||||||||||||||||
<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, 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 Itt a régi Inf. épület két oszlopa közötti téglalapra kattintva ezt az A „SHAPE=default”-ban adjuk meg a kép további részeire vonatkozó Ha az „AREA SHAPE=default”-ban az itteni további paraméterek helyett Ha az egeret mozgatjuk ezen a képen, akkor alul a státusz sorban A „BORDER=2” helyett „BORDER=0”-t kellene írni ahhoz, hogy ne legyen |
||||||||||||||||||||||||
<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 "<A NAME=pozíciónév>" 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 Ezzel a módszerrel pl. egy nagyobb lap elejére odatehetjük a lap olyan Ez itt a kékkel írt sor.
Innen a Back nyomógommbal, vagy ide |
||||||||||||||||||||||||
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
|
||||||||||||||||||||||||
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.
Természetesen nem attól függ a listaelemek beljebb kezdése, hogy a html Azt is láthatjuk, hogy a html vezérlő jelek kis- és nagybetűkkel is |
||||||||||||||||||||||||
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
lesznek.
|
||||||||||||||||||||||||
<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> |
|
||||||||||||||||||||||||
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 |
||||||||||||||||||||||||
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> </TD> <TD>black</TD> <TD>#000000</TD></TR> <TR><TD BGCOLOR=blue> </TD> <TD>blue</TD> <TD>#0000FF</TD></TR> <TR><TD BGCOLOR=cyan> </TD> <TD>cyan</TD> <TD>#00FFFF</TD></TR> <TR><TD BGCOLOR=green> </TD> <TD>green</TD> <TD>#008000</TD></TR> <TR><TD BGCOLOR=magenta> </TD> <TD>magenta</TD> <TD>#FF00FF</TD></TR> <TR><TD BGCOLOR=red> </TD> <TD>red</TD> <TD>#FF0000</TD></TR> <TR><TD BGCOLOR=white> </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 &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 Ha a fejlécsor oszlopait „TD” helyett „TH”-val kezdjük, akkor kiemelt
Látható, hogy a táblázat egészének is lehet háttérszíne (itt „silver”) Megadhatjuk a tábla keretének szélességét (BORDER=3), ha ez elmarad, A „CELLPADDING=4” azt jelenti, hogy a cellákba írt szövegek és a Egy cella csak akkor jelenik meg rendesen, ha van benne valami,
Ez az egész lap is egy nagy táblázat, amiben azt a szabályt nehéz |
||||||||||||||||||||||||
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.
„WIDTH=” mögött megadható a táblázat vagy egy cella szélessége Abszolút magasság is megadható a cellákra(TD), „HEIGHT=” mögötti
|
||||||||||||||||||||||||
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.
Az is látszik, hogy az oszlopok (itt azonos) hosszát oszloponként |
||||||||||||||||||||||||
<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 <FONT COLOR=szín> és </FONT> 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 Ha háttérkép helyett háttérszínt akarunk megadni, akkor Ahogy az előző két paragrafust kezdő P parancsban látható, Ha egy html lapon sok egymás utáni paragrafust (pl. a teljes lapot) |
Csizmazia Albert | csa@inf.elte.hu |