Tibysoft - Segédletek

HTML leírás Nyelvi elemek 3. Általános blokkszintű elemek Ez a fejezet azokat az elemeket tartalmazza, amelyek használata a lap egy-egy szövegrészének

(blokkjának) formázására alkalmas. Ezek az elemek maguk tartalmaznak előre definiált formázási

elemeket, nem a lap szerzőjének kell az egyes szövegformázásokat elvégeznie. A HTML nyújtotta

lehetőségeket a következő elemekkel aknázhatjuk ki:

<ADDRESS> <BLOCKQUOTE> <CENTER> <DEL> <DIV> <H1-6> <HR> <INS> <ISINDEX> <NOSCRIPT> <P> <PRE> ADDRESS Használata: <ADDRESS>...</ADDRESS> Tartalmazhatja a soron belül alkalmazható elemeket,

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD és TH elemek.

Az ADDRESS elem kapcsolatfelvételi -tartási információkat nyújt a lapon keresztül. Ezek az információk

tartalmazhatják a lap készítőjének, fenntartójának nevét, linkeket a fenntartó más lapjaihoz, e-mail, illetve

postai címét, telefonszámát, és így tovább...(lásd a cím alatt)

Az alábbi példa az ADDRESS elem egy alkalmazási módját mutatja be: <ADDRESS> Készíti: <A href=mailto:akarki@freemail.hu>Kovács János</A> és <A href=mailto:worldwifeworm@freemail.hu>WorldWifeWorm</A> </ADDRESS> BLOCKQUOTE Használata:

Attribútumaként használható a CITE elem.

Tartalmazhat egy, vagy több blokk-szintű elemet, vagy SCRIPT tag -et.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH elemek.

A BLOCKQUOTE elem egy idézet-blokkot definiál. Nem úgy, mint a soron belüli idézetek, az

idézetblokkok tartalmazhatnak blokk-szintű elemeket; úgymint P, vagy TABLE, de a BLOCKQUOTE nem

helyezkedhet el bekezdésen (<P>), vagy valamely soron belül alkalmazható elemen belül.

Az opcionális CITE attribútum az idézet forrására mutathat.

<P>Itt szerepelhet egyéb szöveg is</P>

</BLOCKQUOTE>

CENTER Hsználata: <CENTER>...</CENTER> Soron belül használható elemeket és blokk-szintű elemeket tartalmazhat.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH elemek.

A CENTER elem egy olyan szövegrészt, vagy más elemet határoz meg, amelynek tartalma a

böngészőablakban vízszintesen középen jelenik meg. A CENTER tag a <DIV ALIGN="center"> formula

rövidített alkalmazási lehetősége, bár a böngészők a CENTER-t valamivel jobban támogatják.

A CENTER használatos még a táblázatok középre igazításához is, mert jónéhány böngészőből hiányzik a

<TABLE ALIGN="center"> kifejezés támogatása. Ezt szemlélteti az alábbi példa:

<CENTER> <TABLE> <TR ALIGN="center"> <TH SCOPE=col>Név</TH> <TH SCOPE=col>Kor</TH> <TH SCOPE=col>Város</TH> </TR> <TR ALIGN="center"> <TD>Béla</TD> <TD>25</TD> <TD>Szeged</TD> </TR> </TABLE> </CENTER> Megjegyzendő, hogy a CENTER magát a táblázatot igazítja középre, a cellák tartalmát nem. A fenti

példában a TR tag ALIGN attribútumát használtuk erre a célra.

DEL Használata: <DEL>...</DEL> Attribútumai: CITE=URL - a szöveg törlésének oka, illetve egyéb információk DATETIME=Dátum - A szöveg törlésének ideje Tartalmazhat más soron belül használható elemeket, és ugyanilyen elemek tartalmazhatják.

A DEL elem tartalma olyan szöveg, amely a dokumentum újabb verziójának készítése során törölve lett.

Ez az elem a szöveg változásainak jelzésére használatos.

A DEL használható akár blokkszintű, akár soron belül alkalmazható (inline) elemként is. Soron belüli

elemként alkalmazva nem tartalmazhat blokkszintű elemet.

Az opcionális CITE attribútum arról ad információt, miért lett az adott szöveg törölve.

Opcionális a DATETIME attribútum használata is, amely a törlés dátumát és idejét tartalmazza kis- és

nagybetűérzékenyen; ÉÉÉÉ-HH-NN óó-pp-mm formátumban.

Mivel a DEL tag a böngészők között viszonylag gyengén támogatott, mód nyílik helyette a STRIKE elem

használatára is, de ez utóbbit a W3C nem javasolja.

DIV Használata: <DIV>...</DIV> Attribútumai: ALIGN=[left;center;right;justify] (Vízszintes igazítás) Soron belüli, illetve blokkszintű elemeket tartalmazhat.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH elemek.

A DIV elemet általános blokszintű "tartalmazó"-ként (container) határozhatjuk meg, amely lehetővé teszi a

lap szerzőjének, hogy a <DIV></DIV> elemek közé zárt tartalom egészére írjon elő stílust, igazítási, vagy

egyéb formázási műveleteket. A DIV elem bármely más elemet tartalmazhat, ideértve másik, beágyazott

DIV elemet is.

A DIV elem sikerrel kombinálható a CLASS, ID, vagy LANG attribútumokkal. Példának okáért egy

tartalomjegyzéket helyezhetünk a DIV elembe, kiegészítve a CLASS=tartalom tulajdonság-érték párral,

amely így lehetővé teszi a szerzőnek, hogy a CSS -ben egyszer meghatározott stílust rendeljen hozzá a

site valamenyi tartalomjegyzékéhez.

A nem javasolt ALIGN attribútum segítségével állítható be a vízszintes igazítás; balra, jobbra, középre,

illetve sorkizártan.

A <DIV ALIGN="center"> formulánál azonban a böngészők sikeresebben kezelik a <CENTER> elemmel

történő középre igazítást.

H1-6 Használata: <Hn>...</Hn> ahol az n 1 - 6 közé eső egész szám. Attribútumai: ALIGN=[left;center;right;justify] (Vízszintes igazítás) Soron belüli, illetve blokkszintű elemeket tartalmazhat.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH elemek.

A H1, H2-6 elemek első - hatodik szintű címsorokat határoznak meg. Egy dokumentum általában egy H1

elemet tartalmaz, a legfontosabb rész kiemelésére.

A nem javasolt ALIGN attribútum segítségével állítható be a vízszintes igazítás; balra, jobbra, középre,

illetve sorkizártan.

A böngészők a Hn elemeket általánosan nagyméretű, félkövér betűkkel jelenítik meg.

HR Használata: <HR> Attribútumai: ALIGN=[left;center;right] (Vízszintes igazítás) NOSHADE - Vékony vonal SIZE=nn - Vonalvastagság pixelekben WIDTH - A vonal hossza Más elemet nem tartalmazhat.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH elemek.

A HR elem használhatával vízszintes vonal jeleníthető meg. Jól használható a lapon egyes témakörök

elhatárolására. A W3C által nem javasolt ALIGN attribútum segítségével a beszúrt vonal balra, középre,

jobbra igazítható.

A NOSHADE és SIZE attribútumok segítségével a vonal stílusa szabható testre. A NOSHADE

használatával a vonal árnyékmentes (vékonyabb) lesz, a SIZE használatával a vonalvastagság

pixelekben meghatározható.

INS Használata: <INS>...</INS> Attribútumai: CITE=URL - A szöveg forrása; DATETIME - A beszúrás dátuma és ideje Tartalmazhat soron belül használható és blokkszintű elemeket; ugyanilyen státuszú elemek

tartalmazhatják.

Az INS elem beszúrt szöveget tartalmaz. Jól használható egy dokumentum szövegváltozásainak

jelzésére. A böngészők az így megjelölt tartalmat aláhúzottan jelenítik meg.

A hivatalos W3C ajánláson kívül használható még a TITLE attribútum is, amely 'tooltip'-et,

szövegbuborékot jelenít meg az INS elem tartalma mellett-felett.

<INS TITLE="Inserted text">Beillesztett szöveg</INS>

Az opcionálisan használható DATETIME attrinútum közli a beszúrás dátumát és idejét, kis- és

nagybetűérzékeny formában.

ISINDEX Használata: <ISINDEX> Attribútum: PROMPT="szöveg" - Tájékoztató szöveg Más elemet nem tartalmazhat.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, HEAD,

IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH elemek.

Az ISINDEX elem egysoros szövegbeviteli mező használatának lehetőségét kínálja fel. Az elem

PROMPT attribútuma által meghtározott szöveg fog megjelenni a beviteli mező mellett, a felhasználónak

szóló tájékoztatásként.

Az ISINDEX a HTML 4 -ben nem javasolt elem. A W3C helyette az INPUT elem használatát helyezi

előtérbe.

Az ISINDEX egyenértékű a FORM elemen elhelyezett INPUT elem használatával; ahol a bevitt adat

típusa text, és a METHOD attribútum értéke get.

NOSCRIPT Használata: <NOSCRIPT>...</NOSCRIPT> Soron belüli, illetve blokkszintű elemeket tartalmazhat.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH elemek.

A NOSCRIPT elem használatával a kliens-oldali scriptek helyett alternatív tartalom jeleníthető meg. Ha a

böngésző nem támogatja az adott scriptnyelv használatát, vagy a felhasználó letiltja a kliensoldali

scriptek futtatását, a script futása helyett hibaüzenet jelenik meg. A NOSCRIPT elemet a SCRIPT elem

után kell elhelyezni.

A kliensoldali scriptek általában meglehetős dinamikát és interaktivitást biztosítanak a lapnak, amit

statikus tartalommal nemigen lehet helyettesíteni. Ezért a NOSCRIPT elem tartalma szükségszerűen

'szürkébb' lesz a script-tartalomnál.

P Használata: <P>...</P> Attribútumai: ALIGN=[left; center; right; justify] - Vízszintes igazítás Soron belüli elemeket tartalmazhat.

Tartalmazhatják az ADDRESS, APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV,

FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH elemek.

A P elem egy bekezdést határoz meg. A záró tag (/P) opcionális, de használata megelőzhet jónéhány

ismert böngészőhibát, főleg CSS használata esetén. Megjegyzendő, hogy nem tartalmazhat más

blokkszintű (pl: TABLE, FORM) elemet.

A W3C által nem javasolt ALIGN attribútum segítségével állítható be a bekezdés vízszintes igazítása

balra, középre, jobbra, vagy sorkizártan.

A HTML szabvány/ajánlás nem írja elő a P elem megjelenítésének mikéntjét. A böngészők általában az

egyes P elemek által meghatározott bekezdéseket egységes egészként kezelik; az első sor behúzása

nélkül balra igazítva jelenítik meg. Az egyes bekezdések között a böngészők általában egy sort üresen

hagynak.

PRE Használata: <PRE>...</PRE> Attribútumai: WIDTH=Szám Tartalmazhat soron belüli elemeket, kivéve: IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP, FONT,

BASEFONT.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH elemek.

A PRE elem előformázott szöveget tartalmaz. A böngészők az előre meghatározott fontkészlettel

ábrázolják, nem vonják össze a szóközöket, és nem törik az ablak széléhez a sorokat.

A PRE tag hasznos lehet kódok, költemények megjelenítéséhez, ahol a behúzások, esetleges többes

szóközök fontosak az áttekinthetőség szempontjából.

A nem javasolt WIDTH attribútum utasítja a böngészőt az előformázott szöveg kívánt sorhosszúságának

beállítására. A gyakorlatban azonban a böngészők ezt az attribútumot legtöbbször figyelmen kívül

hagyják.

4. Listaelemek Ebben a részben több nagyon hasznos elemet tárgyalunk, amelyekkel átláthatóbbá tehetőek

felsorolásaink. Ezeket az elemeket már a nagyon régi szövegszerkesztők is ismerték, természetesen a

HTML-ből sem maradhattak ki annak szabványosításakor.

<DIR> <DL> <DT> <DD> <LI> <MENU> <OL> <UL> DIR Használata: <DIR>...</DIR> Attribútumai: COMPACT ("Kompakt kijelzés") Tartalmaz egy, vagy több LI elemet, amely viszont nem tartalmazhat blokkszintű elemeket.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD és TH elemek.

A DIR elem egy könyvtár listát definiál, tartalmaz egy vagy több LI elemet, amelyek megadják a felsorolás

elemeit. A LI az egymásba ágyazás megakadályozása érdekében nem tartalmazhat blokkszintű

elemeket.

A COMPACT attribútum használatával javasolhatjuk a böngészőnek, hogy szükség esetén nyomja össze

a listát, pontosabban a listaelemek közötti üres helyeket. Ezt az attribútumot csak kismértékben

támogatják a böngészők.

Maga a DIR elem sem javasolt a HTML 4.0-ban, helyette az UL taget helyezi előtérbe, mely amúgy is

sokkal szélesebb körben elfogadott.

DL Használata: <DL>...</DL> Attribútumai: COMPACT ("Kompakt kijelzés") Tartalmaz egy, vagy több DT vagy DD elemet.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD és TH elemek.

A DL elem egy definíciólistát definiál. Egy listabejegyzés egy DT és egy DD elemmmel hozható létre.

Előbbi a feltétel definíció létrehozásához szükséges, míg utóbbi hordozza a feltétel tényleges definícóját.

Egy definíciólista hordozhat többszörös feltételt egy adott definícióra, amennyire csak megengedik ezt az

adott körülmények. Szintén lehetséges feltétel megadása megfelelő definíció nélkül, és fordítva, de ez

néha labilissá teheti a szerkezetet.

<DL> <DT class="example">Blokkszintű elemek</DT> <DD> <P> A HTML-ben a blokkszintű elemek rendszerint tartalmaznak soron belüli és más blokkszintű elemeket. Ezeket általában máshogy kell formázni, mint a "sima" soron belüli elemeket, tipikusan igaz ez az új sorra a vizuális böngészőknél. </P> </DD> <DT>Soron belüli elemek</DT> <DT>Szöveg szintű elemek</DT> <DD> <P> Az egy soron belüli (vagy szöveg szintű) elemek rendszerint csak szöveges adatokat vagy más hasonló jellegű adatot tartalmaznak. </P> </DD> </DL> A DT és DD tag záró része elvileg elhagyható, de nem javasoljuk, néhány böngészőnél problémát

okozhat, főleg, ha stíluslapokat is felhasznált a készítő.

Figyeljük meg a CLASS attribútum használatát, amely a fenti példánál is látható. Ez lehetővé teszi a

készítő számára, hogy Stíluslapokon keresztül könnyedén befolyásolja a böngésző működését. Például

több definíciólista azonos külalkját egyszerre lehet így meghatározni. A Stíluslapok (CSS) használatáról

nem sokára bővebben is szót ejtünk.

A COMPACT attribútum elvileg itt is használható, de nem ajánlott a W3C állásfoglalása szerint.

LI Használata: <LI>...</LI> Attribútumai: TYPE (disc,square,circle|1,a,A,i,I) VALUE (megadható egy kezdőszám, ha rendezett a felsorolás) Tartalmazhat szövegszintű, és blokkszintű elemeket.

Tartalmazhatják az OL,UL,MENU és DIR elemek.

A LI elem egy listabejegyzést definiál, méghozzá kizárólag az OL, UL, MENU, vagy DIR elemek

részeként. A LI tartalmazhat blokkszintű elemeket, úgy mint H2,TABLE,UL illetve OL, kivéve, ha a nem javasolt

MENU, vagy DIR részeként hasznosítottuk.

Ez lehetővé teszi további OL, vagy UL elemek beágyazását, ahogy azt a következő példa is mutatja:

<UL> <LI> <H2>Kiemelt szövegrész, pl. cím</H2> <UL> <LI><A HREF="html.dtd">HTML 2.0</A></LI> <LI><A HREF="HTML32.dtd">HTML 3.2</A></LI> <LI><A HREF="strict.dtd">HTML 4.0 Strict</A></LI> </UL> </LI> <LI> <H2>Kiemelt szövegrész 2.</H2> <UL> <LI><A HREF="HTMLlat1.ent">Latin-1 Entities</A></LI> <LI><A HREF="HTMLsymbol.ent">Symbols and Greek Letters</A></LI> <LI><A HREF="HTMLspecial.ent">Other Special Characters</A></LI> </UL> </LI> </UL> Az egyébként nem javasolt TYPE attribútum a listaelemek jelzéseinek külalakját befolyásolja. Ezek a

következők lehetnek:

A LI jelölései UL használatakor: disc (Teli kör) square (Teli négyzet) circle (Üres kör) A LI jelölései OL használatakor (felsorolás jellgű): 1 (Arab, tízes számrendszer beli számok) a (Latin kisbetűk) A (Latin nagybetűk) i (Római kisbetűk) I (Római nagybetűk) A stíluslapok sokkal szélesebb körű befolyásolási lehetőséget biztosítanak, például lehetséges a

listaelemek képekkel történő jelölése is.

A VALUE attribútum számozáskor látja el feladatát, ha értéket adunk neki, ezzel fog kezdődni a lista

számozása. MENU Használata: <MENU>...</MENU> Attribútumai: COMPACT ("Kompakt kijelzés") Tartalmazhat egy, vagy több LI elemet, amelyek viszont ebben az esetben nem tartalmazhatnak

semmilyen blokkszintű elemet.

Tartalmazhatják az APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET,

FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD és TH elemek.

A MENU tag egy menülistát definiál, LI menübekezdések alkalmazásával. Ezek a fentiek szerint nem

tartalmazhatnak tehát semmilyen blokkszintű taget, azért, hogy a MENU-t ne lehessen beágyazni.

A MENU elemet nem ajánlja a W3C, helyette az UL taget preferálja.

A COMPACT attribútum segítségével utasítható a böngésző a lista összehúzására, amelyet a betűk

közötti üres rész szűkítésével érhet el csak. Ezt az attribútumot nagyon kevés böngésző támogatja.

OL Használata: <OL>...</OL> Attribútumai: TYPE=[ 1 | a | A | i | I ] - számozási stílus START - A számlálás kezdőértéke COMPACT - kompakt megjelenítés Ez a tag tartalmazhat egy, vagy több LI elemet és helyet foglalhat a következő elemekbe ágyazva:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS,

LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD és TH.

Az OL tag egy ún. rendezett listát definiál, elentétben az UL elemmel, a lista elemeinek meghatározott

rendje van; a böngésző sorszámozza ezeket automatikusan.

A számozás stílusa a TYPE attribútum segítségével állítható be, a következőképpen:

1 (Arab számokkal, tízes számrendszerben: 1, 2, 3, 4, 5, ...)

a (Latin kisbetűkkel: a, b, c, d, e, ...)

A (Latin nagybetűkkel: A, B, C, D, E, ...)

i (Római, kisméretű "számokkal": i, ii, iii, iv, v, ...)

I (Római, nagyméretű "számokkal": I, II, III, IV, V, ...)

További beállítási lehetőségek vannak, de ezekhez elengedhetetlen a stíluslapok használata.

Elvileg a START attribútum segítségével állítható be a számlálás kezdőértéke, de ez a W3C

dokumentációja szerint nem javasolt.

A COMPACT attribútum sem javasolt, egyébként ezzel lehet rávenni a böngészőt, hogy a listaelemk

közötti üres helyeket összehúzza. UL Használata: <UL>...</UL> Attribútumai: TYPE=[ disc | square | circle ] - a listaelem előtt szereplő jelzés

COMPACT - kompakt megjelenítés

Ez a tag is tartalmazhat egy, vagy több LI elemet és helyet foglalhat a következő elemekbe ágyazva:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS,

LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD és TH.

Az UL tag egy rendezetlen listát definiál, de az OL elemmel ellentétben itt a listaelemek nincsenek

rangsorolva, a listán belüli hierarchia rendezetlen.

A TYPE attribútum segítségével kiválaszthatunk egy jelzést, amely a listaelemek elé kerül, minden sorba.

Ezek lehetnek: disc (teli kör), square (teli négyzet) és circle (üres kör). Stíluslapok használatával bővebb

eszköztár tárul fel előttünk.

A COMPACT attribútum nem javasolt, de ezzel lehet a listaelemek közötti üres helyeket összehúzatni a

böngészővel.

info@tibysoft.hu