Minden HTML formátumú szövegfájl a <BODY> és a </BODY> utasításokkal közrezárt részében tartalmazza a megjelenítendő részét. (A dokumentum-kereteket kivéve!)
Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb.
A <BODY BACKGROUND="fájlnév.kit" BGCOLOR="színkód" TEXT="színkód" LINK="színkód" VLINK="színkód" ALINK="színkód"> utasításban a dokumentumtörzsre vonatkozó fenti előírások is szerepelhetnek opcióként.
A BACKGROUND="elérési_út/fájlnév.kit" opcióval a dokumentum hátteréül szolgáló fájlt jelölhetjük ki.
Háttérszínt a BGCOLOR="színkód" opcióval kiegészített utasítással definiálhatunk. (Amennyiben háttérmintául szolgáló fájlt - lásd fent - is megadunk, akkor a háttérszín csak nagyon ritkán fog előtűnni a dokumentumban, pl. a keretek szegélyében.)
A dokumentumban a szöveg színét a TEXT="színkód" opcióval jelölhetjük ki.
A LINK="színkód" opció a hivatkozások megjelenési színét határozza meg. A VLINK="színkód" pedig, a már bejárt hivatkozásokat jelölő színt határozza meg.
Természetesen egyszerre több opció is szerepelhet - tehát nem kötelező egyik sem - a <BODY> utasításban, mint azt az alábbi példa mutatja:
<BODY BACKGROUND="pelda3.gif"
BGCOLOR="#FF3333" TEXT="#000099"
LINK="#993399"
VLINK="#009999">
<P> A szemléltetés kedvéért az alábbi szöveg széles szegéllyel határolt!
<P> <TABLE BORDER=12> <TH><TD><H1><A HREF="#pelda">Ez itt egy hivatkozás,</A> kattins rá!</H1>
</TABLE>
<P> <IMG SRC="k11.gif" ALT="Görgetősáv"> <P>
<A NAME="pelda"> Ide mutat a hivatkozás!</A>
</BODY>
BGCOLOR="#FF3333" TEXT="#000099"
LINK="#993399"
VLINK="#009999">
<P> A szemléltetés kedvéért az alábbi szöveg széles szegéllyel határolt!
<P> <TABLE BORDER=12> <TH><TD><H1><A HREF="#pelda">Ez itt egy hivatkozás,</A> kattins rá!</H1>
</TABLE>
<P> <IMG SRC="k11.gif" ALT="Görgetősáv"> <P>
<A NAME="pelda"> Ide mutat a hivatkozás!</A>
</BODY>
A HTML dokumentum címszintjeinek felépítése
A HTML formátumú szövegfájlban definiálhatunk címeket, ill. alcímeket hat szint mélységig. A legfelső szintű címet a <H1 ALIGN="hely"> és a </H1> utasításpárral kell közrezárni. A második szintet a <H2 ALIGN="hely"> és a </H2> utasítások határolják, és így tovább a hatodik szintig ...
Minden szint más-más betűformátumban jelenik meg a dokumentumban, a böngészőprogram beállításától függően. A címek igazítását szabályozza az ALIGN opció, melynek lehetséges értékei: left, center, right. Amennyiben túl hosszú a cím, de egy sorosnak kell maradnia, akkor a NOWRAP opció megakadályozza a cím betördelését több sorba.
Különleges címnek tekinthető a címszalag, melyet a <BANNER>, </BANNER> utasításpárral kell kijelölni. Tulajdonsága, hogy nem szkrollozódik a dokumentum többi részével ellentétben.
A címek csak a szemlélő számára keltik a tagoltság érzetét, a valóságban nem tagolják fizikailag szakaszokra a dokumentumot. Ezt a tagolást a <DIV CLASS="osztály" ALIGN="hely">, </DIV> utasításokkal lehet meghatározni, ahol a CLASS opció sorolja a megfelelő SGML osztályba a szakaszt, az ALIGN pedig a szakasz igazítási formátumát írja elő. Az automatikus tördelést itt is megakadályozza a NOWRAP opció, ez esetben a szakasz tördelését a <P> vagy a <BR> utasításokkal lehet szabályozni.
<BANNER>Címszalag</BANNER>
<H1 ALIGN="left">Legfelső szintű címsor</H1>
<H2 ALIGN="center">Második szintű alcímsor</H2>
<H3 ALIGN="right">Harmaik szintű alcímsor</H3>
<H4 NOWRAP>Negyedik szintű alcímsor</H4>
<H5>Ötödik szintű alcímsor</H5>
<H6>Hatodik szintű alcímsor</H6>
<DIV ALIGN="center">
Ez egy szakasz, melyben a szöveg elvileg azonos módon
- középre igazítva - kezelendő.
</DIV>
<H1 ALIGN="left">Legfelső szintű címsor</H1>
<H2 ALIGN="center">Második szintű alcímsor</H2>
<H3 ALIGN="right">Harmaik szintű alcímsor</H3>
<H4 NOWRAP>Negyedik szintű alcímsor</H4>
<H5>Ötödik szintű alcímsor</H5>
<H6>Hatodik szintű alcímsor</H6>
<DIV ALIGN="center">
Ez egy szakasz, melyben a szöveg elvileg azonos módon
- középre igazítva - kezelendő.
</DIV>
Bekezdések a HTML dokumentumban
Minden dokumentum, így a HTML formátumú dokumentum is, alapvetően bekezdésekre tagolódik.
A HTML fájlban a bekezdések kezdetét a <P> utasítás jelzi a böngészőprogram számára. (Tehát ezen elem nem az előző bekezdés végét, hanem a következő kezdetét jelzi, vagyis mindig megelőzi azt a bekezdést, amelyre vonatkozik!)
A bekezdés a következő bekezdés kezdetét jelző utasításig tart, tehát nincs záróutasításpárja a bekezdés elemnek. A legtöbb böngészőprogram két bekezdés között egy üres sort szúr be megjelenítéskor!
A bekezdés elem hordozhat magában a bekezdés stílusát meghatározó opciókat. A bekezdés igazítását a<P ALIGN="hely"> formájú utasítással szabályozhatjuk. Az automatikus tördelést a NOWRAP opció tiltja meg a böngészőprogram számára. Amennyiben tördelhetetlen szóközt igényel a szöveg, akkor az egyszerű szóköz helyett alkalmazzuk a különleges karaktert.
Amennyiben egy bekezdésen belül mindenképpen új sort szeretnénk kezdeni, akkor a <BR> utasítást kell használni. (Nincs zárópárja!)
Az alábbi példa tartalmazza az említett formázási lehetőségeket:
<P>Ez alapértelmezett (balra igazított) bekezdés.
<P ALIGN=left>Ez balra igazított bekezdés.
<P ALIGN=center>Ez középre igazított bekezdés.
<P ALIGN=right>Ez jobbra igazított bekezdés.
<P ALIGN=justify>Ez sorkizárt bekezdés lenne.
<P>
<NOBR>Ez itt egy tördeletlen - jó hosszú - bekezdés,
amelynek eltűnik a vége a semmiben
...................................................</NOBR>
<P>
Itt egy sortörés elem található,
<BR>
melynek hatására új sorban folyatódik a szöveg,
és nem maradt ki üres sor.
<P ALIGN=left>Ez balra igazított bekezdés.
<P ALIGN=center>Ez középre igazított bekezdés.
<P ALIGN=right>Ez jobbra igazított bekezdés.
<P ALIGN=justify>Ez sorkizárt bekezdés lenne.
<P>
<NOBR>Ez itt egy tördeletlen - jó hosszú - bekezdés,
amelynek eltűnik a vége a semmiben
...................................................</NOBR>
<P>
Itt egy sortörés elem található,
<BR>
melynek hatására új sorban folyatódik a szöveg,
és nem maradt ki üres sor.
Tabulátorok a HTML dokumentumban
A HTML formátumú fájlban a tabulátor pozíciókat a <TABSTOP ID="azonosító"> utasítás jelzi.
A szöveget a tabulátorpozícióhoz igazítani a <TAB TO="azonosító"> utasítással lehet. Ha még az igazítás formáját is meg kívánjuk adni, akkor a <TAB TO="azonosító" ALIGN="hely"> alakú utasítást kell használni, ahol left, center, right, decimal típusú tabulátorokat jelölhet a "hely" paraméter. (Tizedes tabulátor alkalmazásánál megadható a DP opcióval az a karakter, amelyhez az igazítás történjen.)
Az alapértelmezett tabulátortávolságot <TAB INDENT="szám"> elem határozza meg.
A tabulátorokat - a tapasztalatok szerint - még kevés böngészőprogram tudja értelmezni, ezért a táblázat vagy előre formázott szöveg alkalmazása javallott a tabulátorok helyett ...
Az alábbi példa tartalmazza az említett tabulálási lehetőségek egy részét:
<P>Szöveg, <TABSTOP ID="elso">szöveg folytatás<TABSTOP ID="masodik"> ...
<BR>
<TAB TO="elso" ALIGN="center">Igazítás.
<TAB TO="masodik" ALIGN="decimal" DP=",">48,125
<P><TAB INDENT=32> Az alapértelmezett távolság: 32.
<BR><TAB>Ez a 32. karakternél kezdődik.
<BR><TAB>Ez pedig a 64. karakternél.
<BR>
<TAB TO="elso" ALIGN="center">Igazítás.
<TAB TO="masodik" ALIGN="decimal" DP=",">48,125
<P><TAB INDENT=32> Az alapértelmezett távolság: 32.
<BR><TAB>Ez a 32. karakternél kezdődik.
<BR><TAB>Ez pedig a 64. karakternél.
Kereszthivatkozások HTML dokumentumok között
A HTML formátum lényegét az egymásra és egymás tartalmára való hivatkozások jelentik (vagyis a hypertext lehetőség). A dokumentum bármely részéhez hivatkozást (linket) helyezhetünk el, amelyet aktivizálva, a hivatkozottal összefüggésben lévő szöveghez jutunk el. A hivatkozó utasítások megjelenési formája sokféle lehet, a célobjektumtól függően:
A legegyszerűbb esetben a hivatkozás az adott fájl egy távolabbi részére mozdítja a böngészőablakot. A hivatkozás kezdetét a <A HREF="#jelző"> utasításnak a dokumentumban való elhelyezése jelzi. A hivatkozást a </A> utasítás zárja le. Ez az elempár közrezárhat szövegrészt, képet, stb. A közrezárt részt a böngészőprogram a dokumentum többi részétől eltérően jeleníti meg (pl. aláhúzással, kerettel, ...), az egérkurzorral fölé érve a mutató alakja megváltozik. Azt a részt (praktikusan: könyvjelzőt), ahová a hivatkozás mutat a <A NAME="jelző"> és a </A> utasítások kell, hogy határolják.
A legtöbb esetben a egy hivatkozás egy másik fájlra/dokumentumra mutat. A hivatkozás kezdetét ekkor a<A HREF="protokoll://elérési_út/fájlnév.kit"> utasítás jelzi, a hivatkozást ekkor is a </A> utasításelem zárja le. Mind a protokoll, mind az elérési út elhagyható, amennyiben azonos URL-en van a kiindulási dokumentum és a hivatkozott. A hivatkozott fájlnak e példában nincs külön névvel (könyvjelzővel) jelölt része. Működés szempontjából a fentebb leírtak vonatkoznak erre a hivatkozási formára is.
A legbonyolultabb esetben a hivatkozás egy másik fájl valamely pontosan meghatározott részére mutat. A hivatkozás kezdetét a <A HREF="protokoll://elérési_út/fájlnév.kit#jelző"> utasítás jelzi, és a hivatkozást szintén a </A> elem zárja le. Ebben az esetben a hivatkozott fájl kell, hogy tartalmazzon egy olyan részt (könyvjelzőt), ahová a hivatkozás mutat. Ezt a részt a <A NAME="jelző"> és a </A> utasítások határolják.
Megjegyzés: Ha az <A HREF=...>, </A> utasításpár képet fog közre, akkor a kép szegéllyel jelenik meg, amely szegély letiltható az <IMG SRC=...> utasításban elhelyezett BORDER=0 opció alkalmazásával. A képekkel kapcsolatos egyéb hivatkozási lehetőségeket lásd a képeknél.
Az alábbi példadokumentum többféle hivatkozást tartalmaz:
Ennek a fájlnak a <A HREF="#vege">végére</A> visz ez a hivatkozás.
<P>
A makói Almási Utcai Általános Iskola honlapjára vonatkozik e
<A HREF="http://www.jate.u-szeged.hu/csongrad/niifp/almasi/almasi.htm">hivatkozás</A>.
<P> A fenti iskola újságjának egy adott
<A HREF="http://www.jate.u-szeged.hu/csongrad/niifp/almasi/sm5.htm#turi">helyére</A>
repít e hivatkozás. Ezen leírással kapcsolatos véleményed
<A HREF="mailto:paja@iif.u-szeged.hu">írd</A> meg!
<P>
<IMG SRC="k08.gif" ALT="Almási embléma balra">
<P ALIGN=center>
<IMG SRC="k08.gif" ALT="Almási embléma középre">
<P ALIGN=right>
<IMG SRC="k08.gif" ALT="Almási embléma jobbra">
<P>
<A NAME="vege">Itt az oldal vége!</A>
<P>
<P>
A makói Almási Utcai Általános Iskola honlapjára vonatkozik e
<A HREF="http://www.jate.u-szeged.hu/csongrad/niifp/almasi/almasi.htm">hivatkozás</A>.
<P> A fenti iskola újságjának egy adott
<A HREF="http://www.jate.u-szeged.hu/csongrad/niifp/almasi/sm5.htm#turi">helyére</A>
repít e hivatkozás. Ezen leírással kapcsolatos véleményed
<A HREF="mailto:paja@iif.u-szeged.hu">írd</A> meg!
<P>
<IMG SRC="k08.gif" ALT="Almási embléma balra">
<P ALIGN=center>
<IMG SRC="k08.gif" ALT="Almási embléma középre">
<P ALIGN=right>
<IMG SRC="k08.gif" ALT="Almási embléma jobbra">
<P>
<A NAME="vege">Itt az oldal vége!</A>
<P>
Karakterformátumok a HTML dokumentumban
A HTML formátumú szövegfájlban is használhatjuk a szövegszerkesztőkben megszokott karakterformátumokat. Az alábbi táblázat a formázás kezdő és záróutasítása között a mintát is tartalmazza.
Kezdő elem
|
Ilyen betűformátumot eredményez
|
Záró elem
|
<B>
|
Félkövér betűformátumot eredményez
|
</B>
|
<I>
|
Dőltbetűs formátumot eredményez
|
</I>
|
<U>
|
Aláhúzott formátumot eredményez
|
</U>
|
<S>
|
Áthúzott formátumot eredményez
|
</S>
|
<TT>
|
Fixpontos betűket eredményez
|
</TT>
|
<EM>
|
Kiemeli a szöveget
|
</EM>
|
<CITE>
|
Idézetekre használható
|
</CITE>
|
<VAR>
|
Változónevet jelöl
|
</VAR>
|
<STRONG>
|
Ez is egy kiemelési lehetőség
|
</STRONG>
|
<CODE>
|
Kódoknál használjuk
|
</CODE>
|
<SAMPLE>
|
Minták jelzésére használjuk
|
</SAMPLE>
|
<KBD>
|
Billentyűfelirat jelzése
|
</KBD>
|
<BQ>
|
Idézet megjelenítése
|
</BQ>
|
<BIG>
|
Nagyméretű betűformátumot eredményez
|
</BIG>
|
<SMALL>
|
Kisméretű betűformátumot eredményez
|
</SMALL>
|
<SUB>
|
Alsóindexet eredményez
|
</SUB>
|
<SUP>
|
Felsőindexet eredményez
|
</SUP>
|
<BLINK>
|
Villogó szöveget eredményez
|
</BLINK>
|
<FONT ...>
|
A részleteket lásd lentebb
|
</FONT>
|
A <FONT FACE="név" COLOR="színkód" SIZE="szám">, </FONT> utasításpárral direkt módon előírhatók a megjelenő szöveg betűinek a jellemzői. A FACE opciót nem szokás használni, mert nem valószínű, hogy minden rendszerben rendelkezésre áll pl. az ARIAL CE FÉLKÖVÉR betűtípus. A COLORopció pontosan meghatározza a megjelenítendő szöveg színét. A SIZE opcióban egy számot megadva a betűméretet határozza meg direkt módon. (A SIZE opcióban előjeles szám is szerepelhet, ami az alapbetűtípushoz viszonyított méretet jelöl.)
Az alábbi példadokumentumban elvileg meg kellene jelennie a fenti karakterformátumoknak (azért elvileg, mert a megjelenő betűk formája a böngészőprogram beállításaitól függően nagymértékben különbözhet):
<B>Vastag</B>
<I>Dőlt</I>
<U>Aláhúzott</U>
<S>Áthúzott</S>
<TT>Fixpontos</TT>
<EM>Kiemelt</EM>
<CITE>Idézet</CITE>
<VAR>Változónév</VAR>
<STRONG>Kiemelt</STRONG>
<CODE>Kód</CODE>
<SAMPLE>Minta</SAMPLE>
<KBD>Billentyűfelirat</KBD>
<BQ>Idézet</BQ>
<BIG>Nagyméretű</BIG>
<SMALL>Kisméretű</SMALL>
<SUB>Alsóindex</SUB>
<SUP>Felsőindex</SUP>
<BLINK>Villogó</BLINK>
<FONT COLOR="#FF3333" SIZE=1>Kicsi piros</FONT>
<FONT SIZE=2>N</FONT>
<FONT SIZE=3>ö</FONT>
<FONT SIZE=4>v</FONT>
<FONT SIZE=5>e</FONT>
<FONT SIZE=6>k</FONT>
<FONT SIZE=7>v</FONT>
<FONT SIZE=8>ő</FONT>
<FONT FACE="Arial CE" SIZE=9>ARIAL CE</FONT>
<FONT FACE="Symbol" SIZE=10>SYMBOL</FONT>
<I>Dőlt</I>
<U>Aláhúzott</U>
<S>Áthúzott</S>
<TT>Fixpontos</TT>
<EM>Kiemelt</EM>
<CITE>Idézet</CITE>
<VAR>Változónév</VAR>
<STRONG>Kiemelt</STRONG>
<CODE>Kód</CODE>
<SAMPLE>Minta</SAMPLE>
<KBD>Billentyűfelirat</KBD>
<BQ>Idézet</BQ>
<BIG>Nagyméretű</BIG>
<SMALL>Kisméretű</SMALL>
<SUB>Alsóindex</SUB>
<SUP>Felsőindex</SUP>
<BLINK>Villogó</BLINK>
<FONT COLOR="#FF3333" SIZE=1>Kicsi piros</FONT>
<FONT SIZE=2>N</FONT>
<FONT SIZE=3>ö</FONT>
<FONT SIZE=4>v</FONT>
<FONT SIZE=5>e</FONT>
<FONT SIZE=6>k</FONT>
<FONT SIZE=7>v</FONT>
<FONT SIZE=8>ő</FONT>
<FONT FACE="Arial CE" SIZE=9>ARIAL CE</FONT>
<FONT FACE="Symbol" SIZE=10>SYMBOL</FONT>
Képek elhelyezése a HTML dokumentumban
A HTML formátumú dokumentumban képeket - grafikákat - is elhelyezhetünk. Az <IMG SRC="elérési_út/fájlnév.kit"> utasítás a szöveg aktuális pozíciójába helyezi a megadott képet.
Ennél azért a legegyszerűbb szövegszerkesztő program is többet nyújt. A HTML dokumentum csinosítására is vannak a képek elhelyezésének finomabb lehetőségei is. Ha ezeket mind kihasználjuk, akkor az utasítás a következőképpen fog kinézni: <IMG ALIGN="hely" SRC="elérési_út/fájlnév.kit" HSPACE="vszám" VSPACE="fszám" WIDTH="szméret" HEIGHT="mmeret" UNITS="egység" USEMAP="#jelző" ISMAP ALT="szöveg">.
Az ALIGN opció meghatározza a kép igazításának módját, lehetséges értékei: top, middle, bottom, left, right.
A HSPACE a kép melletti vízszintes térközt, a VSPACE pedig a függőleges térközt (ha úgy tetszik: margókat) határozza meg.
A WIDTH a szélességét, a HEIGHT pedig a magasságát adja a képnek, az UNITS által meghatározott egységben (pixel vagy en).
Az ALT azt a szöveget adja meg, amelyet nem grafikus böngészők használata esetén meg fog jelenni a kép helyett.
Különböző listafomátumok a HTML dokumentumban
A HTML formátumú szövegfájlban használhatunk listákat is, amelyek szövegszerkesztőkbeli megfelelői a felsorolások és bajuszos bekezdések.
A számozott bekezdések (felsorolások) megfelelője a számozott lista, az ún. "bajuszos" bekezdések megfelelője pedig a számozatlan lista.
A harmadik lista típus pedig a leíró lista, ahol az egyes lista elemekhez tartozhat egy hosszabb leírás is.
A számozott listát az <OL> és az </OL> utasítások közé kell zárni. A számozatlan listát pedig az <UL>,</UL> utasításpár közé. Mindkét típusú listában használhatjuk a listafejlécet, melyet az <LH> utasítás vezet be - az </LH> pedig zár! Mindkét listatípusban a listák sorai az <LI> utasítással kezdődnek - és nem használatos a lezáró párjuk!
A fentiekből következik, hogy a listasorok egy <LI> utasítástól a következő <LI> utasításig, ill. a lista záróeleméig tartanak.
Számozott lista esetében a kezdő sorszám közvetlenül megadható az <OL SEQNUM="szám"> formájú kezdőutasítással. Másik lehetőség, hogy egy előzőleg definiált lista számozása folytatható az <OL CONTINUE> kezdőutasítás használatával. Egyébként az <OL> utasítás 1-től kezdi a lista tagok számozását.
A számozatlan listák kezdőeleme is hordozhat formázóinformációkat. Az <UL SRC="fájlnév.kit"> formájú utasítás például a listasort megelőző bajuszként a megadott képfájlt használja. Az <UL DINGBAT="karakter"> a megadott bajuszkaraktert alkalmazza. Az <UL WRAP="irány"> pedig többoszlopos listák esetén az igazítás formáját határozza meg. (A WRAP opció a horiz és a vert értékeket veheti fel.
A számozatlan listák speciális - külön HTML utasításokkal létrehozható - fajtái a könyvtárlista és a menülista. A könyvtárlista típus a <DIR> utasítással kezdődik és a </DIR> utasításra végződik. A menülista pedig<MENU> és a </MENU> utasításokkal határolt. Ezek a listaformák a normál számozatlan listáktól mindössze annyiban különböznek, hogy a könyvtárlista tagjai 20 karakteresnél, a menülista tagjai pedig egy sorosnál nem lehetnek hosszabbak és nincs "bajuszuk".
A leíró listát a <DL> és a </DL> utasítások közé kell zárni. A lista fejléc megadása azonos az többi listatípusnál látottal. A listák egyes alkotóelemeinek kezdetét a <DT> utasítás jelzi, az ehhez tartozó leírás kezdetét pedig a <DD> utasítás határozza meg. Nincs egyik utasításnak sem záró párja, ezért a lista tag a<DT> elemtől a <DD>-ig, a hozzá tartozó leírás pedig a <DD> elemtől a következő <DT>-ig tart.
Az alábbi példában látható, hogy a különböző listákat egymásba is ágyazhatjuk, akár több szint mélységben is. A böngészőprogramtól függ, hogy hány szintet tud egymástól megkülönböztetve megjeleníteni:
<P>
Normál szöveg
<P>
<OL>
<LH>A számozott lista fejléce</LH>
<LI>Első sor
<OL>
<LH>A beágyazott lista fejléce</LH>
<LI>Első elem
<LI>Második elem
<LI>Harmadik elem
</OL>
<LI>Második sor
<LI>Harmadik sor
<LI>Negyedik sor
</OL>
<P>
Normál szöveg
<P>
<UL>
<LH>A számozatlan lista fejléce</LH>
<LI>Első sor
<LI>Második sor
<UL WRAP=horiz>
<LH>A beágyazott lista fejléce</LH>
<LI>Első sor
<LI>Második sor
</OL>
<LI>Harmadik sor
</OL>
<P>
Könyvtárlista:
<BR>
<DIR>
<LI>Első tag
<LI>Második tag
<LI>Harmadik tag
<LI>Negyedik tag
</DIR>
<P>
Menülista:
<BR>
<MENU>
<LI>Első menü
<LI>Második menü
</MENU>
<P>
Normál szöveg
<P>
<HR>
<P>
<DL>
<LH>A leíró lista fejléce</LH>
<DT>Első sor
<DD>Az első sorhoz tartozó leírás, lehet hosszabb szöveg is.
A leírás tördelése automatikus. Szépen igazodnak a betördelt sorok
az első sor kezdőpontjához. <DT>Második sor
<DD>A második sorhoz tartozó leírás
</DL>
<P>
Normál szöveg
<P>
Normál szöveg
<P>
<OL>
<LH>A számozott lista fejléce</LH>
<LI>Első sor
<OL>
<LH>A beágyazott lista fejléce</LH>
<LI>Első elem
<LI>Második elem
<LI>Harmadik elem
</OL>
<LI>Második sor
<LI>Harmadik sor
<LI>Negyedik sor
</OL>
<P>
Normál szöveg
<P>
<UL>
<LH>A számozatlan lista fejléce</LH>
<LI>Első sor
<LI>Második sor
<UL WRAP=horiz>
<LH>A beágyazott lista fejléce</LH>
<LI>Első sor
<LI>Második sor
</OL>
<LI>Harmadik sor
</OL>
<P>
Könyvtárlista:
<BR>
<DIR>
<LI>Első tag
<LI>Második tag
<LI>Harmadik tag
<LI>Negyedik tag
</DIR>
<P>
Menülista:
<BR>
<MENU>
<LI>Első menü
<LI>Második menü
</MENU>
<P>
Normál szöveg
<P>
<HR>
<P>
<DL>
<LH>A leíró lista fejléce</LH>
<DT>Első sor
<DD>Az első sorhoz tartozó leírás, lehet hosszabb szöveg is.
A leírás tördelése automatikus. Szépen igazodnak a betördelt sorok
az első sor kezdőpontjához. <DT>Második sor
<DD>A második sorhoz tartozó leírás
</DL>
<P>
Normál szöveg
<P>
A HTML formátum táblázatai
A HTML formátumnak ez az utasításcsoportja képes a legváltozatosabb szöveg-, és képmegjelenítési formák előállítására. A <TABLE> és a </TABLE> utasítások közé zárt részt tekintjük egy táblázatnak.
A táblázatnak a címét a <CAPTION> és a </CAPTION> utasítások között kell megadni. (Figyelem! Az így megadott cím nem a táblázatban, hanem előtte fog megjelenni!) A cím <CAPTION ALIGN="hely">formájú megadással igazítható.
A táblázat minden sora a <TR> utasítással kezdődik és a következő <TR>-ig, ill. a táblázat végéig tart. Egy sor tartalmazhat oszlopfejléceket és adatokat. Az oszlopfejléceket a <TH> utasítás vezeti be és választja el egymástól. A táblázat adatcellái pedig a <TR>-rel megkezdett sorban egy <TD> utasítással kezdődnek és minden cella a következő <TD>-ig - ill. a következő sor elejét jelző elemig - tart, ahol értelemszerűen új cella kezdődik. Az oszlopfejléceknek és az adatcelláknak csak a kezdőutasítása használatos - habár van lezáró utasításuk is (</TH>, </TD>) -, mert a záróutasításuk elhagyható!
A táblázat nyitóutasítása tartalmazhat a teljes táblázatra vonatkozó beállításokat: <TABLE BORDER="szám" ALIGN="hely" COLSPEC="oszlopjellemzők" UNITS="egység" NOWRAP CELLPADDING="pszám" CELLSPACING="kszám" BGCOLOR="színkód">
Ahol a BORDER opció a rácsozat szélességét határozza meg. (0 esetén nincs rácsozat.) Az ALIGN a teljes tábla elhelyezkedését határozza meg ( left, right, center lehet). A COLSPEC egy oszlop igazítását és szélességét adja meg. Egy oszlopra vonatkozóan egy betű és szám egybeírva (pl.: L12 C24 R10), melytől a következő oszlop értékeit egy köz választja el. Az UNITS a számokhoz tartozó mértékegységet jelöli ki (en, relative - oszlopszélességhez -, pixel). A NOWRAP opció a cellák szövegének tördelését tiltja le. Végül aBGCOLOR a táblázat háttérszínét határozza meg.
A táblázat oszlopfejlécei nem csak a legfelső oszlopban szerepelhetnek, hanem a táblázatban bárhol (pl. sorok címeként is).
Mind az oszlopfejlécekben, mind az adatcellákban használhatók a következő formázásra való opciók:
COLSPAN="szám":
Egyesít több egymással szomszédos cellát - vízszintesen.
ROWSPAN="szám":
Egyesít több egymással alatti cellát - függőlegesen.
ALIGN="hely":
Igazítja a cellák tartalmát - vízszintesen. Lehetséges értékei: left, center, right, justify, decimal
VALIGN="hely":
Igazítja a cellák tartalmát - függőlegesen. Lehetséges értékei: top, middle, bottom, baseline
Az alábbi példatáblázat tartalmaz példákat igazításra, cellaegyesítésre, üres cellára, kép elhelyezésére, stb.:
<TABLE BORDER=5 ALIGN="center">
<CAPTION>A táblázat címe </CAPTION>
<TR>
<TH COLSPAN=2>Az 1.-2. oszlop közös fejléce
<TH COLSPAN=3>A 3.-4.-5. oszlop közös fejléce
<TH ROWSPAN=2>A 6. (2 soros) oszlop fejléce
<TR>
<TH>Az 1. oszlop másodrendű fejléce
<TH COLSPAN=2>A 2.-3. oszlop másodrendű fejléce
<TH COLSPAN=2>A 4.-5. oszlop másodrendű fejléce
<TR>
<TH>Az első adatsor címe
<TD>Az első adatcella
<TD>Adat (indexe: C3)
<TD>Adat (indexe: D3)
<TD>Adat (indexe: E3)
<TD>Adat (indexe: F3)
<TR>
<TH>A 2. adatsor címe
<TD>Adat (indexe: B4)
<TD>Adat (indexe: C4)
<TD>Adat (indexe: D4)
<TD>Adat (indexe: E4)
<TD>Adat (indexe: F4)
<TR>
<TH>Függőleges igazítások
<TD ALIGN="center" VALIGN="bottom">Le
<TD ALIGN="center" VALIGN="top">Fel
<TD ALIGN="center" VALIGN="middle">Középre
<TD> <TD>Adat (indexe: F5)
<BR>Ettől a cellától balra egy üres cella,
alatta pedig két üres cella összevonva
<TR>
<TH>Vízszintes igazítások:
<TD>Alapértelmezés
<TD ALIGN="left">Balra
<TD ALIGN="center">Középre
<TD ALIGN="right">Jobbra
<TD ROWSPAN=2>
<TR>
<TD ALIGN="center" COLSPAN=5>
<IMG SRC="k12.gif" ALT="Kép a cellában">
</TABLE>
<CAPTION>A táblázat címe </CAPTION>
<TR>
<TH COLSPAN=2>Az 1.-2. oszlop közös fejléce
<TH COLSPAN=3>A 3.-4.-5. oszlop közös fejléce
<TH ROWSPAN=2>A 6. (2 soros) oszlop fejléce
<TR>
<TH>Az 1. oszlop másodrendű fejléce
<TH COLSPAN=2>A 2.-3. oszlop másodrendű fejléce
<TH COLSPAN=2>A 4.-5. oszlop másodrendű fejléce
<TR>
<TH>Az első adatsor címe
<TD>Az első adatcella
<TD>Adat (indexe: C3)
<TD>Adat (indexe: D3)
<TD>Adat (indexe: E3)
<TD>Adat (indexe: F3)
<TR>
<TH>A 2. adatsor címe
<TD>Adat (indexe: B4)
<TD>Adat (indexe: C4)
<TD>Adat (indexe: D4)
<TD>Adat (indexe: E4)
<TD>Adat (indexe: F4)
<TR>
<TH>Függőleges igazítások
<TD ALIGN="center" VALIGN="bottom">Le
<TD ALIGN="center" VALIGN="top">Fel
<TD ALIGN="center" VALIGN="middle">Középre
<TD> <TD>Adat (indexe: F5)
<BR>Ettől a cellától balra egy üres cella,
alatta pedig két üres cella összevonva
<TR>
<TH>Vízszintes igazítások:
<TD>Alapértelmezés
<TD ALIGN="left">Balra
<TD ALIGN="center">Középre
<TD ALIGN="right">Jobbra
<TD ROWSPAN=2>
<TR>
<TD ALIGN="center" COLSPAN=5>
<IMG SRC="k12.gif" ALT="Kép a cellában">
</TABLE>
Egyetlen böngészőablakban több HTML dokumentum is megjeleníthető a <FRAMESET> és a</FRAMESET> utasításpár, valamint a szorosan kapcsolódó <FRAME> utasítás együttes használatával.
A <FRAMESET ROWS="oszlophatárok"> kezdőutasítással osztható fel a képernyő függőlegesen, a<FRAMESET COLS="sorhatárok"> utasítással pedig vízszintesen. Ahol az oszlop- és sorhatárok megadhatók képernyőpontban ill. százalékosan - vesszővel elválasztva -, a maradék képernyőterületre pedig a* dzsókerkarakter használatával lehet hivatkozni. Mivel vagy csak vízszintesen, vagy csak függőlegesen osztható fel a képernyő, ezért ha mindkét irányban osztott böngészőablak létrehozásához a <FRAMESET>elemeket egymásba kell ágyazni! Tehát például egy függőleges felosztáson belül kell vízszintesen elválasztott részekre tagolni egy oszlopot.
A fenti módon definiált területekre a <FRAME SRC="objektum"> utasítás tölti be a megadott objektumot, mely objektum lehet egy teljes HTML fájl, annak egy maghatározott része, ill. egy kép. Az így kitöltendő keretek viselkedését szabályozza az utasítás <FRAME NAME="név" SRC="objektum" SCROLLING="érték" MARGINWIDTH="szám" MARGINHEIGHT="szám"> alakú megadása.
Az adott keretnek nevet ad a NAME opció, a szkrollozást letilthatja SCROLLING="no" kiegészítés (ezenkívül a yes és az auto értékeket veheti fel a SCROLLING opció), a MARGINWIDTH és aMARGINHEIGHT pedig a kereten belüli margók szélességét szabályozza.
Például a fejlécben megadott <BASE TARGET="név"> utasítás a NAME="név" opcióval elnevezett keretbe irányítja a hivatkozásokat. Egyébként az <A HREF=...> utasítás is ismeri a TARGET="név" opciót. (A TARGET="_top" opcióval az egész böngészőablakot elfoglalja a hivatkozott dokumentum, tehát feloldja az ablak keretekre osztását!) Ha ezek egyike sem szerepel, akkor a hivatkozás a hivatkozó objektum keretében jelenik meg, felülírva azt!
A <FRAMESET>, <FRAMESET> utasításpárral határolt területnek meg kell előznie a <BODY> utasítással kijelölt dokumentumtörzset! Sőt a egy <NOFRAMES> utasítással kell jelezni a dokumentum azon részének kezdetét, amelyet akkor kell a böngészőnek megjelenítenie csak, ha nem ismeri a keretutasításokat. És csak ez a <NOFRAMES>-mel kezdődő rész tartalmazhatja a <BODY> és a </BODY> utasításpárt.
<FRAMESET ROWS=185,*>
<FRAMESET COLS=185,*>
<FRAME SRC=k08.gif SCROLLING=NO NAME="cimer">
<FRAME SRC=02.htm NAME="felepites">
</FRAMESET>
<FRAMESET COLS=25%,*>
<FRAME SRC=index.htm NAME="tart">
<FRAME SRC=13.htm NAME="keret" MARGINHEIGHT=10 MARGINWIDTH=10>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<CENTER>
<BODY BGCOLOR="#FFFF00">
<FONT COLOR="#FF3333">
<H1>Sajnos ez a böngésző nem támogatja a keretek használatát!</H1>
</FONT>
</BODY>
<FRAMESET COLS=185,*>
<FRAME SRC=k08.gif SCROLLING=NO NAME="cimer">
<FRAME SRC=02.htm NAME="felepites">
</FRAMESET>
<FRAMESET COLS=25%,*>
<FRAME SRC=index.htm NAME="tart">
<FRAME SRC=13.htm NAME="keret" MARGINHEIGHT=10 MARGINWIDTH=10>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<CENTER>
<BODY BGCOLOR="#FFFF00">
<FONT COLOR="#FF3333">
<H1>Sajnos ez a böngésző nem támogatja a keretek használatát!</H1>
</FONT>
</BODY>
A HTML formátumú dokumentumban kérdőíveket is közzétehetünk, melyek feldolgozásához külön programot kell írni. (Nem HTML-alapút! Általában a kiszolgáló /cgi-bin/ könyvtárában található programról van szó.)
A <FORM METHOD="mód" ACTION="elérési_út/fájlnév.kit"> és a </FORM> utasítások zárják közre a kitöltendő kérdőívet/űrlapot.
Az opciókat ajánlott mindig megadni, már csak azért is, mert az ACTION határozza meg a feldolgozást végző programot, a METHOD pedig a kitöltött űrlap továbbítási módját a feldolgozó programnak. Lehetséges értékei: GET - az URL-ben, POST - adatcsomagban. Az alapértelmezés a GET, ami bizonyos veszélyeket rejt magában, mivel túl hosszúra nyúlhat az URL. A POST a biztonságosabb mód.
Az <INPUT NAME="név" TYPE="típus" ALIGN="hely"> utasítással határozható meg egy kitöltendő űrlapmező.
A NAME természetesen a mezőnév, amely alapján a feldolgozóprogram azonosítja a bevitt adatot. A TYPEpedig az adattípus, melyet vár a beviteli mező. Lehetséges típusok: TEXT - szöveg, PASSWORD - jelszó (nem jelenik meg bevitelkor!), HIDDEN - rejtett (ez sem jelenik meg), CHECKBOX - kapcsoló (több is kiválasztható egyszerre), RADIO - kapcsoló (egyszerre csak egyet lehet kiválasztani), RANGE - numerikus adat, FILE - csatolandó fájl, SUBMIT - adattovábbító gomb, RESET - inicializáló gomb, BUTTON - egyéb nyomógomb. Az <INPUT > utasításban további opciók is szerepelhetnek, a fő opciók értékeitől függően:
- A VALUE kiegészítő opcióval megadott értéket veszi fel alapértelmezésként a szöveges vagy numerikus beviteli mező.
- TEXT típusú mező esetén egy további opció, a SIZE="méret" opció határozza meg a beviteli ablak szélességét, a MAXLENGTH="érték" pedig a bevihető maximális szöveghosszt.
- A CHECKBOX és a RADIO típusú mezők további paramétere lehet a CHECKED opció, mely bekapcsolja a kapcsolót - alapértelmezésként.
- RANGE típusú mező esetén megadható az a tartomány, melybe a bevitt értéknek bele kell esnie, aMAX="maximum" és a MIN="minimum" további opciókkal.
- A FILE típusú mezőben megadott fájl az ACCEPT kiegészítő opcióval megadott MIME módon csatolódik az elküldendő kérdőívhez. (Megjegyzés: Egy Browse nyomógombbal támogatott fájlkereső-ablakból lehet a fájlt kiválasztani.)
- A SUBMIT és a RESET gombokhoz tartozó kiegészítő opció a VALUE="felirat", amely a gombok feliratát jelöli ki. Egyébként a SUBMIT gomb lenyomásának hatására küldi el az űrlapadatokat a kérdőív a feldolgozó programnak, a RESET gomb lenyomása pedig az alapértékekkel tölti fel a beviteli mezőket.
Hosszabb szöveg bevitelére alkalmas a <TEXTAREA NAME="név" ROWS="magaság" COLS="szélesség" VALUE="szöveg">, </TEXTAREA> utasításpár, amely egy beviteli ablakot nyit aCOLS-ban megadott szélességben és a ROWS-ban megadott sorban. A VALUE az alapértelmezésként megjelenítendő szöveget adja meg.
Egy kérdésre adandó válasz egyszerű - menüből történő - kiválasztását teszi lehetővé a kérdőíven a<SELECT NAME="név" SIZE="sor">, </SELECT> utasításokkal létrehozott kiválasztásos menü, melynek menüpontjait az <OPTION> utasítással adhatjuk meg.
A SIZE opció azt határozza meg, hogy hány sorban jelenjenek meg a választható menüpontok. Megadásával szkrollozható menüt kapunk. Elhagyása esetén, ún. legördülő menüből lehet választani. A MULTIPLE opció esetén több menüpont is kijelölhető egyszerre. Az <OPTION SELECTED> formájú utasítás adja meg az alapértelmezett választást!:
<CENTER>
<H1>Adatfelvételi lap:</H1>
<FORM METHOD="post" ACTION="program.bin">
<INPUT TYPE="reset" VALUE="Alapértelmezés">
<P>
Vezetékneve:
<INPUT NAME="vezeteknev" TYPE="text" VALUE="Kovács" SIZE="25" MAXLENGTH="30">
Keresztneve:
<INPUT NAME="keresztnev" TYPE="text" MAXLENGTH="50">
Férfi: <INPUT NAME="neme" TYPE="radio" CHECKED>
Nő: <INPUT NAME="neme" TYPE="radio">
Kora: <INPUT NAME="kor" TYPE="range" SIZE="2" MIN="10" MAX="60">
<P>
Érdeklődési köre:
Windows: <INPUT NAME="erdek" TYPE="checkbox" CHECKED>
Win95: <INPUT NAME="erdek" TYPE="checkbox">
LINUX: <INPUT NAME="erdek" TYPE="checkbox">
OS/2: <INPUT NAME="erdek" TYPE="checkbox">
<P>
<TEXTAREA NAME="egyeb" COLS="40" ROWS="4">Közlendők:</TEXTAREA>
<P>
Foglalkozása:
<SELECT NAME="foglalkozas">
<OPTION>diák
<OPTION>tanár
<OPTION SELECTED>nyugdíjas
<OPTION>egyik sem
</SELECT>
<P>
Csatolandó fájl(ok):
<BR>
<INPUT NAME="fajl" TYPE="file">
<P>
<INPUT TYPE="submit" VALUE="Elküldés">
</CENTER>
</FORM>
<H1>Adatfelvételi lap:</H1>
<FORM METHOD="post" ACTION="program.bin">
<INPUT TYPE="reset" VALUE="Alapértelmezés">
<P>
Vezetékneve:
<INPUT NAME="vezeteknev" TYPE="text" VALUE="Kovács" SIZE="25" MAXLENGTH="30">
Keresztneve:
<INPUT NAME="keresztnev" TYPE="text" MAXLENGTH="50">
Férfi: <INPUT NAME="neme" TYPE="radio" CHECKED>
Nő: <INPUT NAME="neme" TYPE="radio">
Kora: <INPUT NAME="kor" TYPE="range" SIZE="2" MIN="10" MAX="60">
<P>
Érdeklődési köre:
Windows: <INPUT NAME="erdek" TYPE="checkbox" CHECKED>
Win95: <INPUT NAME="erdek" TYPE="checkbox">
LINUX: <INPUT NAME="erdek" TYPE="checkbox">
OS/2: <INPUT NAME="erdek" TYPE="checkbox">
<P>
<TEXTAREA NAME="egyeb" COLS="40" ROWS="4">Közlendők:</TEXTAREA>
<P>
Foglalkozása:
<SELECT NAME="foglalkozas">
<OPTION>diák
<OPTION>tanár
<OPTION SELECTED>nyugdíjas
<OPTION>egyik sem
</SELECT>
<P>
Csatolandó fájl(ok):
<BR>
<INPUT NAME="fajl" TYPE="file">
<P>
<INPUT TYPE="submit" VALUE="Elküldés">
</CENTER>
</FORM>
A máshová nem sorolható elemek egy csokrát lehet ezen az oldalon megtalálni:
Egy HTML formátumú szövegfájl a tartalmazhat megjegyzéseket.
A megjegyzés egyik típusa a megjelenítendő megjegyzés, a <NOTE> és a </NOTE> utasításokkal közrezárva.
A HTML dokumentumban elhelyezhetők olyan megjegyzések is, melyek sehol sem jelennek meg a dokumentum WEB-böngészővel történő megjelenítésekor. Viszont a fájl átszerkesztéskor segítségéül lehetnek a módosítást végzőnek. A megjegyzéseket a <!-- és a --> utasítások között kell elhelyezni.
Egy HTML formátumú szövegfájl a tartalmazhat lábjegyzeteket. Az <FN ID="azonosító"> és a </FN>utasítások között szerepel a lábjegyzet szövege. Az így definiált lábjegyzetszövegre hivatkozik a szövegnek az<A HREF="#azonosító"> és az </A> utasításokkal jelölt része.
Amennyiben a megjelenítendő szöveg formátuma pontosan olyan kell, hogy legyen, mint ahogy a HTML fájlban szerepel, akkor azt az előreformázott szöveget jelző utasítások közé kell zárni. Ezen utasítások a<PRE> és a </PRE>. A közéjük zárt szöveg pontosan annyi szóközzel, pontosan annyi sorban és olyan állapotban fog a dokumentumban megjelenni, mint ahogy azt a HTML fájl tartalmazza. E dokumentumsorozat példái is ily módon kerültek rögzítésre ...
A <PRE WIDTH="szám">, </PRE> utasításpár használatával egy tördeletlen szöveg az adott szélességben betördelhető.
A szövegrészeket tagolás vagy esztétikai ok miatt vízszintes vonallal el lehet választani egymástól. Legegyszerűbb esetben a <HR> utasítás egy vízszintes elválasztó vonalat helyez el az adott ponton, a rendelkezésre álló szélességben. Ezt a durva megjelenítést lehet azért finomítani a <HR ALIGN="hely" WIDTH="hszám" SIZE="vszám" NOSHADE> alakú utasítással.
Az ALIGN az igazítás helyét adja meg (left, right, middle). A WIDTH a vonalhosszt definiálja, a SIZEpedig a vonal szélességét. Mindkettőt meg lehet adni képpontban, ill. a hosszt az ablak-szélesség százalékában. A NOSHADE pedig térhatást (árnyékoltságot) tiltja le.
A <NOTE> utasításhoz hasonlóan nincs különösebb hatása az <ADDRESS>, </ADDRESS> és a<CREDIT>, a </CREDIT> utasításpároknak sem.
Az előbbi postai címet jelöl, az utóbbi pedig egy idézet forrását.
<!-- Ez itt egy értelmezést segítő megjegyzés. -->
<NOTE>Ez itt egy jegyzet</NOTE>
Ehhez a sorhoz <A HREF="#az">lábjegyzet</A> tartozik.
<HR WIDTH=50 SIZE=50>
<PRE>
Ez a sor sok közt tartalmaz.
Ez pedig egy új sor, pedig nem előzte meg sem <P>, sem <BR>
</PRE> <HR ALIGN="left" WIDTH=50%>
<P>
<HR NOSHADE>
<P>
<FN ID="az">Íme a fenti jelzéshez tartozó lábjegyzet</FN>
<NOTE>Ez itt egy jegyzet</NOTE>
Ehhez a sorhoz <A HREF="#az">lábjegyzet</A> tartozik.
<HR WIDTH=50 SIZE=50>
<PRE>
Ez a sor sok közt tartalmaz.
Ez pedig egy új sor, pedig nem előzte meg sem <P>, sem <BR>
</PRE> <HR ALIGN="left" WIDTH=50%>
<P>
<HR NOSHADE>
<P>
<FN ID="az">Íme a fenti jelzéshez tartozó lábjegyzet</FN>
A HTML formátumú szövegfájlban szerepelhetnek multimédia jellegű fájlokra történő utalások is, azonban az eredmény enyhén szólva kétséges! Íme néhány:
A <BGSOUND SRC="hangfájl.wav" LOOP="szám"> utasítás a letöltés közben lejátszandó hangeffektust határozza meg, mely a LOOP-ban megadott alkalommal ismétlődik.
A <SOUND SRC="hangfájl.wav"> utasítás hatására a böngésző megjelenít egy hivatkozást a lejátszandó hangeffektusra, amelyet aktiválva az adott hangfájlt lejátssza.
Mozgóképet tartalmazó fájl is elhelyezhető a HTML dokumentumban az<IMG DYNSRC="fájlnév.avi" LOOP="szám"> utasítással, amely az <IMG SRC=...> utasítással is kombinálható. (Ebben az esetben a mozgó képsorok lejátszása után a megadott kép jelenik meg a dokumentumban, ill. akkor is, ha a böngésző nem tudja a mozgóképet lejátszani.) Az opciók megegyeznek a hang- és képfájloknál alkalmazhatókkal.
A HTML-ben külön nem támogatott típusú fájlok beágyazhatók a dokumentumba az<EMBED SRC="fájlnév.kit" WIDTH="vszám" HEIGHT="fszám"> utasítással. Az így beágyazott objektumok saját megjelenítőprogramot igényelnek, amelyet a böngésző feladata meghívni.
<BGSOUND SRC="h01.wav" LOOP="3">
<P>
<SOUND SRC="h01.wav">
<P>
<IMG SRC="k08.gif" DYNSRC="f01.avi" LOOP="2">
<P>
<EMBED SRC="k13.pcx" WIDTH="100" HEIGHT="100">
<P>
<SOUND SRC="h01.wav">
<P>
<IMG SRC="k08.gif" DYNSRC="f01.avi" LOOP="2">
<P>
<EMBED SRC="k13.pcx" WIDTH="100" HEIGHT="100">
A HTML Stuktúra
Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a <HTML> utasítással kezdődik és a </HTML> záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek kezdetét a <HEAD> utasítás jelzi. A fejlécelemek között szokás a dokumentumcímet megadni, mely címet a <TITLE> és a </TITLE> utasítások közé kell zárni. A fejlécet a </HEAD> utasítás zárja.
A dokumentumtörzs a fájl <BODY> és </BODY> utasítások közötti része. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. (A keretek és a JavaScript kódok kivételével!)
Tehát a következőkben a következő szerkezetet fogjuk használni:
<HTML>
<HEAD>
<TITLE> Ide jön az oldal címe, ezt a szöveget fogod latni a böngésző címsorában</TITLE>
</HEAD>
<BODY>
Ide jön a dokumentumtörzs.
</BODY>
</HTML>
A következőkben egyszerű formázó tag-ekre mutatok példát, amelyet a <body> és </body> tagek közé kell elhelyezni.
A táblázatban láthatjátok a kódot, és mellette a kód eredményét. Amint látni fogjátok, minden tag-et (formázó utasítást) a < jel vezet be, és a > jel zár le. Az adott tag hatását a megfelelő lezáró tag szünteti meg, amely </tag> formátumú.
(
) Ha nem ezt szeretnéd használni, akkor természetesen bármilyen szöveges szerkesztőben (pl. notepad, joe, pico) megírhatod a kódot, amit el kell mentened, majd a böngésződbe be kell olvasnod.
A dokumentumtörzs a fájl <BODY> és </BODY> utasítások közötti része. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. (A keretek és a JavaScript kódok kivételével!)
Tehát a következőkben a következő szerkezetet fogjuk használni:
<HTML>
<HEAD>
<TITLE> Ide jön az oldal címe, ezt a szöveget fogod latni a böngésző címsorában</TITLE>
</HEAD>
<BODY>
Ide jön a dokumentumtörzs.
</BODY>
</HTML>
A következőkben egyszerű formázó tag-ekre mutatok példát, amelyet a <body> és </body> tagek közé kell elhelyezni.
A táblázatban láthatjátok a kódot, és mellette a kód eredményét. Amint látni fogjátok, minden tag-et (formázó utasítást) a < jel vezet be, és a > jel zár le. Az adott tag hatását a megfelelő lezáró tag szünteti meg, amely </tag> formátumú.
(
) Ha nem ezt szeretnéd használni, akkor természetesen bármilyen szöveges szerkesztőben (pl. notepad, joe, pico) megírhatod a kódot, amit el kell mentened, majd a böngésződbe be kell olvasnod.Betűtípusok, stílusok <b> <i> <u> <tt> | ||
| Ha ezt a kódot beírod a dokumentumtörzsbe | ez lesz az eredménye | |
| <b>Kövér betűk (bold) </b> |  | Kövér betűk (bold) |
| <i>Dőlt betűk (italic)</i> | | Dőlt betűk (italic) |
| <u>Aláhúzott betűk (underlined) </u> | | Aláhúzott betűk (underlined) |
| <tt>Írógép betűk (teletype) </tt> | | Írógép betűk (teletype) |
Fejléc <h1> ... <h6>
| ||
| <h1>1-es fejléc </h1> | | 1-es fejléc |
| <h2>2-es fejléc </h2> | | 2-es fejléc |
| <h3>3-as fejléc </h3> | | 3-as fejléc |
| <h4>4-es fejléc </h4> | | 4-es fejléc |
| <h5>5-ös fejléc </h5> | | 5-ös fejléc |
| <h6>6-os fejléc </h6> | | 6-os fejléc |
Ha nem az alapértelmezett (balra) igazítást szeretnénk használni, megadhatjuk az igazítás típusát az align paraméter segítségével. (left=balra, center=középre, right=jobbra) pl. <h1 align="center"> Ez egy középre igazított 1-es fejléc </h1>  Ez egy középre igazított 1-es fejléc<h3 align="right"> Ez egy jobbra igazított 3-as fejléc </h3>Ez egy jobbra igazított 3-as fejléc | ||
Betűméret <font size=" "> | ||
A betűméretet kétféleképpen állíthatjuk be: abszolút és relatív módon. Az abszolút méretmegadásban 1 és 7 között állíthatjuk be a méretet, ahol a 7-es a legnagyobb az 1-es a legkisebb... | ||
| <font size ="4"> 4-es betűméret </font> | | 4-es betűméret |
| <font size ="7"> 7-es betűméret </font> | | 7-es betűméret |
| A relatív méretbeállításnál azt adhatjuk meg, hogy az alapként beállított betűmérethez képest mennyivel nagyobb, illetve kisebb betűméretet akarunk látni. Ha pl. 2-el nagyobbat, akkor a +2, ha 1-el kisebbet, akkor a -1 méretmegadást kell alkalmaznunk. Azt, hogy mihez képest legyen nagyobb vagy kisebb az adott betűméret a <basefont size="méret"> tag segítségével állíthatjuk be. | ||
| <font size ="+2"> Kettővel nagyobb betűméret </font> | | Kettővel nagyobb betűméret |
| <font size ="-1"> Eggyel kisebb betűméret </font> | | Eggyel kisebb betűméret |
Betűtípus <font face=" ">A Face paraméter segítségével állítható be a kívánt betűtípus.
| ||||
| <font face ="Arial">Arial betűtípus. </font> | | Arial betűtipus. | ||
| <font face ="Courier">Courier betűtípus. </font> | | Courier betűtipus. | ||
Betűszín <font color=" ">A betűk színét is többféleképpen lehet beállítani. Az első esetben a szín nevét használjuk, természetesen angolul. pl. red, yellow, black, white, stb... A második esetben egy kóddal adjuk meg a színt. A 6 jegyű kódot a # jel vezeti be. | ||
| <font color=red> Piros </font> | | Piros |
| <font color=#898134> Kevert </font> | | Kevert |
| #898134 a szín úgynevezett RGB kódja. Az első két karakter a vörös (R=red) szín erősségét mutatja 16-os számrendszerben (hexadecimálisan). A leggyengébb a 00, a legerősebb az FF. A 3.és 4. karakter a zöld szín erőssége (G=green), az 5. és 6. a kéké (B=blue) | ||
| A színek kódját a grafikai programok többsége megmutatja az adott színt kiválasztva. De az RGB picker segítségével online módon is megtudhatod a színek kódját. |
Vízszintes vonal <hr> |
| Ha a dokumentumon belül valamilyen szakaszt el szeretnénk különíteni a többitől, használhatunk vízszintes elválasztó vonalat a <hr> tag használatával. |
pl. <hr size="3" align="center" width="150">
pl. <hr size="3" align="center" width="80%">
Bekezdések <p> |
| A <p> elem segítségével a szöveget bekezdésekre tördelhetjük. Az adott bekezdést a <p> és </p> elemek közé kell tenni. A bekezdést az align paraméterrel balra, középre, jobbra igazíthatjuk. A böngészők az egyes bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak. |
Igazítás (align): left(balra), center(közép), right(jobbra)
| <P align="left"> Ez egy balra igazított bekezdés </P> |
|
| Ez egy balra igazított bekezdés |
| <P align="center"> Ez egy középre igazított bekezdés </P> |
|
Ez egy középre igazított bekezdés
|
<P align="right"> Ez egy jobbra igazított bekezdés </P>
|
|
Ez egy jobbra igazított bekezdés
|
Sortörés <br> |
| Ha a szövegben egy sort feltétlenül új sorban akarunk kezdeni a <br> taget kell használnunk. |
| Ez az első sor<br>Ez pedig a második | | Ez az első sor Ez pedig a második |
Hiperlinkek <a href="URL"> szöveg </a> |
| A hiperlinkekkel hozhatunk létre kapcsolatot szövegrészek, illetve dokumentumok között. A böngészők a linkeket aláhúzással illetve eltérő színnel jelölik, persze ezek a beállítások megváltoztathatóak. |
Ha a saját gépünkön lévő dokumentumra szeretnénk hivatkozni, akkor az URL megadásánál a file:// "előtagot" kell használnunk. Ha pl. a c:\web\iskola\palyazat.html oldalra szeretnénk linket, akkor a file://C|WEB/ISKOLA/PALYAZAT.HTML URL-t kell használni. A c:\ megadás helyett használjuk a c| formát.file://
dokumentum a kliens számítógépen
file://C|WEB/ISKOLA/PALYAZAT.HTML
| Jól gondoljuk meg, hogy valóban erre a megadási módra van-e szükségünk. (ha ugyanezt az oldalt másik gépről néznénk, akkor a link az azon a gépen lévő web alkönyvtárban keresné az iskola alkönyvtárat és abban a palyazat.htm oldalt...) |
ftp://
file átviteli protocol
ftp://ftp.c3.hu/Utilities/winzip70.exe
Ha egy másik weboldalra akarunk linket, használjuk a következőt:
http://
hypertext transfer protocol
http://www.elte.hu/
Ha a link segítségével be szeretnék jelentkezni (telnet segítségével) egy gépre, használjuk a következőt:
telnet://
bejelentkezés egy távoli gépre
telnet://ludens.elte.hu/
Ha a mailto:email cím formát használjuk, az adott linkre kattintva betöltődik az alapértelmezett levelezőprogram, amellyel emailt küldhetünk a megadott email címre.
mailto:
email cím megadása
mailto:latiza@freemail.hu
(A levél tárgya is megadható a ?subject=szöveg elemmel, sőt az is hogy ki kapjon másolatot (?cc=cimzett) Ha több opciót akarunk megadni, akkor az &jelet kell alkalmazni. pl. mailto:latiza@freemail.hu?CC=gipszjakab@freemail.hu&Subject=Proba)
A következőkben (pl. a frameknél) hiperlinkek megadási módjai:
Felsorolások |
| A HTML nyelv lehetőséget ad arra, hogy különböző listákat (felsorolás, sorszámozott, meghatározás) hozzunk létre. |
| Egyszerű felsorolás Egyszerű felsorolás esetén az <ul> és </ul> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl. | ||
| <ul> <li>első elem <li>második elem <li>harmadik elem </ul> | |
|
| Sorszámozott lista Sorszámozott lista esetén az <ol> és </ol> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl | ||
| <ol> <li>első elem <li>második elem <li>harmadik elem </ol> | |
1. első elem
2. második elem
3. harmadik elem
|
| Meghatározás lista Meghatározás lista esetén az <dl> és </dl> tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (<dt> tag vezeti be) és a magyarázatából (<dd> tag vezeti be) állnak. | ||
| <dl> <dt>1. fogalom <dd>az első fogalom magyarázata <dt>2. fogalom <dd>a második fogalom magyarázata</dd> </dl> | | 1. fogalom az első fogalom magyarázata 2. fogalom a második fogalom magyarázata |
Speciális karakterek, ékezetes betűk
Előfordulhat, hogy az oldalon speciális jeleket szeretnénk megjeleníteni. (Speciális jelnek számít már a < és a > jel is, hiszen gondoljunk bele, ha a forráskódban használjuk ezeket a jeleket, akkor a böngésző úgy értelmezi, hogy valamilyen taget akarunk megadni, és nem fogja megjeleníteni. Ebben az esetben speciális karaktereket kell használnunk.Ugyanez a helyzet az ékezetes betűkkel is. Ha ékezetes betűket szeretnénk használni akkor a következő kódokat kell "megjegyeznünk":
| á= á | Á= Á | ö= ö | Ö= Ö |
| é= é | É= É | ü= ü | Ü= Ü |
| í= í | Í= Í | õ= ő | Õ= Ő |
| ó= ó | Ó= Ó | û= ű | Û= Ű |
| ú= ú | Ú= Ú | ||
Tehát ha pl. az árvíztűrő tükörfúrógép szöveget akarjuk megjeleníteni, akkor a következőket kell a kódba elhelyeznünk:
árvíztûrõ tükörfúrógép
Mielőtt teljesen elkoptatnátok a billentyűzeteteket és elmenne a kedvetek a magyar ékezetes betűk használatától, megnyugtatok mindenkit, hogy van egyszerűbb módja az ékezetes betűk megadásának. Az alternatívát a META tagek lehetőségei jelentik, amelyről egy külön fejezetben is foglalkozunk. Most elég csak annyit tudnunk, hogy a következő sorok valamelyikét be kell illesztenünk az oldal forráskódjába (mégpedig a <head> </head> tagek közé) és innentől kezdve bátran használhatjuk hagyományos módon az ékezetes betűket.
árvíztûrõ tükörfúrógép
Mielőtt teljesen elkoptatnátok a billentyűzeteteket és elmenne a kedvetek a magyar ékezetes betűk használatától, megnyugtatok mindenkit, hogy van egyszerűbb módja az ékezetes betűk megadásának. Az alternatívát a META tagek lehetőségei jelentik, amelyről egy külön fejezetben is foglalkozunk. Most elég csak annyit tudnunk, hogy a következő sorok valamelyikét be kell illesztenünk az oldal forráskódjába (mégpedig a <head> </head> tagek közé) és innentől kezdve bátran használhatjuk hagyományos módon az ékezetes betűket.
Nincsenek megjegyzések:
Megjegyzés küldése