Kedves olvasó. Lenne egy kérésem amit természetesen nem kötelező teljesíteni. Mivel célom, hogy minél több ember ismerje meg a web-programozás alapjait, valamint hogy minél több embernek nyújthassak ebbe segítséget, kérlek ha megteheted helyezz el egy hivatkozást a blogodon/oldaladon ami a blogomra mutat.Blogom elérhetősége: http://web-venezei.blogspot.com.
Ha elhelyeztél hivatkozást kérlek küldj egy emailt hogy tudjam hány helyre van belinkelve az oldal.

Köszönettel: admin

A HTML dokumentum törzse

A HTML dokumentum szövegtestének felépítése:

Minden HTML dokumentumban a <BODY> és a </BODY> utasítások fogják közre a dokumentum megjeleníteni kívánt részét (Kivéve a kereteket -> de erről majd a Keretekkel foglalkozó fejezetben írok). Tehát a törzs nyitó és záró elemei között kell elhelyezni az objektumokat, képeket, hivatkozásokat, stb..! Ha egyes utasításokat mint például szöveg színe helye linkek színe stb.. a teljes dokumentumra szeretnénk alkalmazni ezt megtehetjük a nyitóelem bevezetésekor is:<body background="hatter.jpg" bgcolor="színkód" link="színkód" vlink="színkód" alink="színkód" text="színkód">. Ebben a példában a background egyértelműen a dokumentum hátterét definiálja (ahogy a kódban írtam a háttér neve kiterjesztéssel).A bgColor a dokumentum hátterének a színét adja meg. A LINK a HTML dokumentumban található linkek színét, míg a VLINK a már bejárt linkek színét adja meg. Természetesen nem kötelező ezeket a parancsokat megadni a body utasításban.

Példa:

<body background="hatter.jpg" bgcolor="#999999" link="#0000CC" vlink="#0033FF" alink="#0099FF" text="#00FF00">

_____________________________________________________________________

A HTML címszintjeinek felépítése:

A HTML dokumentumban definiálhatunk címszinteket hat mélységig. Ezek a címszintek a böngészőtől függően más és más betűnagyságban fognak megjelenni. A legfelső szintű címszintet a <H1>vezetjük be és a </H1> paranccsal zárjuk le, és ezek a parancsok közé kell írni a megjelenítendő szöveget.Természetesen a többi címszintet hasonló módon definiáljuk le csak a címszintnek megfelelően változtatjuk a bevezető és záró tagban szereplő számot. Tehát ha most a negyedik címszintet szeretném használni akkor ez így nézne ki:<H4>Megjelenítendő szöveg</H4>. Lehetőségünk van ezeket a címszinteket pozicionálni is. Erre négy lehetőség van: Left, Center, justify, Right (bal, közép, sorkizárt, jobb). Előfordulhat hogy túl hosszú a cím amit amit a böngésző széttördelne. Ha ezt szeretnénk megakadályozni akkor használjuk a NOWRAP opciót.A címkék csak a szemlélők számára keltik a tagoltság érzetét, valójában pedig nem tagolják szakaszokra a dokumentumot. Ezt a tagolást a <div class="osztály" align="center">megjelenítendő szöveg</div> utasításokkal lehet meghatározni. Itt a CLASS sorolja a megfelelő SGML osztályba a szakaszt, az align pedig szintén a div pozicionálását határozza meg.

Példa a pozicionálásra:

<H1 align="left">Példa H1-re</H1>
<H6 align="center">PéldaH6-ra</H6>
<H4 align="justify">Példa H4-re</H4>
<H5 align="right">Példa H5-re</H5>
<H2 NOWRAP>Példa NOWRAP-ra</H2>
<div align="center">Példa a divre</div>

_____________________________________________________________________


Bekezdések a HTML dokumentumban:

A HTML dokumentum is bekezdésekre tagolódik. Minden bekezdést a <p> tag vezeti be és a </p> tag zárja le. Általában a böngésző program két bekezdés között kihagy egy üres sort.
Természetesen a bekezdéseket is lehet pozicionálni a már említett négy módon: Left, Center, justify, Right (bal, közép, sorkizárt, jobb). Természetesen itt is az automatikus tördelést a NOWRAP parancs tiltja le. Amennyiben egy szövegben tördelhetetlen szóközt szeretnénk alkalmazni akkor használjuk a &nbsp utasítást. Ha egy szövegben sortörést szeretnénk alkalmazni akkor használjuk a <br> parancsot. Ennek a parancsnak nincs záró utasítása.

Példa:

<p align="left">balra igazított</p>
<p align="center">középre igazított</p>
<p align="justify">sorkizárt</p>
<p align="right">jobbra igazított</p>
<p>Ez egy alapértelmezett bekezdés</p>
<p>Így kell alkalmazni a sortörést<br>
ami&nbsphatására&nbspúj&nbspsorban&nbspfolytatja</p>

___________________________________________________________________

Kereszthivatkozások a HTML dokumentumban:

A HTML dokumentum egyik legfontosabb rendszerét képzik az egymásra illetve az egymás tartalmára mutató hivatkozások. Ezek lehetnek oldalon belülre mutató, képekre és más dokumentumokra mutató hivatkozás. A hivatkozást aktivizálva, a hivatkozással összefüggésben lévő szöveghez juttat el.
A legegyszerűbb esetben a hivatkozás az adott dokumentumban egy meghatározott részre mozdítja a böngésző ablakot. Tehát az oldalon belüli hivatkozásnak két fontos eleme van. Az egyik ilyen a könyvjelzők, amiket a dokumentumban azokra a részekre helyezünk el ahova navigálni szeretnénk a böngésző ablakot. A másik ilyen fontos elem pedig az a hivatkozás lesz, amivel az adott könyvjelzőhöz navigáljuk a böngészőt.
A könyvjelzőt a <a name="könyvjelző neve" id="célszerű ha a könyvjelző neve"> vezeti be és a </a> parancs zárja le.Célszerű ezeknek rövid neveket adni, és lehetőség szerint kerülni a szó közt, valamint a speciális karaktereket. Ha szóközre lenne szükségünk inkább használjuk az _ (alul vonás) karaktert.
A könyvjelzőre mutató hivatkozás nyitó utasítása az <a href="#könyvjelző neve"> és a záró utasítása pedig az </a>.
Másik dokumentumra mutató hivatkozásnál ugyan úgy, csak abban különbözik hogy protokolt és elérési utat kell megadni.
Képere kattintva is tudunk hivatkozni.Ebben az esetben <a href="hivatkozás"><img src="kép elérési útja"></a>. Ha ezt az alapesetet nézzük akkor a képet kerettel fogja megjeleníteni. Ezt ki tudjuk kapcsolni a Border="0" parancsot megadjuk neki. Tehát <img src="kép elérési útja" border="0">

Példák

Vegyük példának a nem létező valami.hu oldalt:
<a name="vege" id="vege"></a> <!-- a dokumentum végén helyezd el -->
<a href="#vege">A valami.hu dokumentum végére mutató hivatkozás</a>
<a href="http://iwiw.hu">Ez az iwiw-re mutató hivatkozás</a>
<a href="http://valami.hu/index.html#vege">Ez is a valami.hu oldal végére mutató hivatkozás</a>
<a href="mailto::emailcímed">Ide</a>kattintva tudsz emailt írni

_____________________________________________________________________


Szövegformázó karakterek:

Ahogy már említettem a A HTML dokumentumról című fejezetben, hogy a HTML nyelv tartalmaz szövegformázó utasításokat. Az alábbi táblázatban ezeket foglalom össze:



Ha nem probléma akkor itt most nem írnék minden egyes karakterformázó utasításhoz példát. Mindegyik agyan az a rendszer szerint működik:
<nyitó elem>Formázandó szöveg<Záró elem>

A <Font FACE="típus" color="színkód" size="szám"></FONT> parancssorral megadható minden egyes szöveg jellemzője.A FACE paranccsal megadhatjuk a betűtípust, de ezt nem szokás használni mert nem minden rendszer támogatja az általunk megadott betűtípust.
A COLOR utasítással itt is a betű színét adhatjuk meg, míg a SIZE paranccsal a betű méretét szabályozhatjuk.Az FONT parancs ugyan úgy működik mint a többi karakterformázó utasítás.
<FONT >Általunk megjelenítendő szöveg</FONT>

_____________________________________________________________________

Képek elhelyezése

Most hogy már tudjuk miként tudunk szövegeket elhelyezni és formázni, nézzük meg hogy hogyan tudunk képeket/grafikákat elhelyezni egy HTML dokumentumban.
Alap esetben az <IMG src="elérési út/fájlnév.kit"> parancssorral illeszthetünk be képet a dokumentumba. Természetesen itt is megadhatunk különböző formázó karaktereket.

Például:

<img src="elérési út/fájlnév.kit" align="hely" hspace="szám" vspace="szám" width="szélesség" height="magasság" usemap="#ha hivatkozási térképet készítünk a térkp neve jön ide" ismap="ismap"alt="képleírás" />

Tehát látjuk hogy itt már van néhány kiegészítő utasítás. Az ALIGN paranccsal definiáljuk a helyét a képnek (lehet left, center, right, middle, bottom, top). A HSPACE paranccsal a kép meletti vízszintes térközt állítjuk, míg a VSPACE paranccsal pedig a függőleges térközt. Ezek gyakorlatilag a kép margóit adják meg. A WIDTH a kép szélességét míg a HEIGHT a kép magasságát határozza meg. Az ALT utasítással megadhatunk egy rövid leírást ami akkor jelenik meg ha a kurzort a kép fölé visszük.
Az USEMAP és az ISMAP összetartozó opciók. Ezek segítségével a képen különböző hivatkozásokat hozhatunk létre.(Ezeket az opciókat csak akkor szükséges megadni ha hivatkozási térképet készítünk).

Ehez szorosan idekapcsolódik még a következő parancssor.
<MAP NAME="hivatkozás">
<AREA SHAPE="hivatkozás alakja" COORDS="hivatkozás koordinátái" HREF="hivatkozás">
<
/MAP>
Amellyel egy hivatkozási térképet lehet összeállítani. Természetesen az <AREA> utasításból több is elhelyezhető egy dokumentumban. A SHAPE opcióval adjuk meg a hivatkozás alakját.Ez lehet CIRCLE, RECT
, POLYGON (kör, téglalap, sokszög). Kör esetén három koordinátát kell megadni a COORDS parancsnál:(középx, középy, sugár). Téglalap esetén négy koordinátát kell megadni:(balfelsőx, balfelsőy, jobbalsóx, jobbalsóy). Sokszög esetében pedig minden csúcs koordinátáját meg kell adni.

Egy összefoglaló példa:

<img src="kép.jpg" alt="alak" width="322" height="354" hspace="15" vspace="15" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="73,35,124,86" href="hivatkozás" />
<area shape="circle" coords="208,141,27" href="hivatkozás" />
<area shape="polygon" coords="132,300,128,303,88,272,121,243,177,275,169,308,215,331,217,295,204,242,161,238,135,229,122,235" href="hivatkozás" />
</map>

_____________________________________________________________________

Különböző Listaformátumok:


Három listaformátumot különböztetünk meg. Számozott lista, számozatlan lista, és a leíró lista ahol az egyes lista elemekhez tartozhat leírás is.
A számozott listát az <OL>és a</OL > utasítás közé kell zárni. A számozatlan listát pedig az<UL > és a </UL> utasítás közé kell zárni. Mindkét listatípusban használhatjuk a lista fejlécet melyet az <LH> utasítás vezet be és</LH> a utasítás zár le. Mindkét listatípusban a lista sorait a
<LI> parancs vezet be, és nem kötelező lezárni. Számozott lista esetén a kezdő sorszám megadható a <OL SEQNUM="szám"> utasítással. Másik lehetőség hogy egy előzőleg definiált lista számozását folytatjuk. Ezt az <OL CONTINUE> utasítással tehetjük meg.
A számozatlan listáknál is lehetőségünk van formázó utasítások megadására. Ilyen például az <UL SRC="fájlnév.kit"> utasítás, amely a listasort megelőző karaktert (számozott listánál ez volt a szám) egy képpel helyettesíti. Természetesen nem csak képeket lehet megadni. Az <UL DINGBAT="karakter"> utasítással bármilyen karaktert elé helyezhetünk. Az <UL WRAP="irány"> paranccsal, az igazítás iráyát határozhatjuk meg (vert, horiz).
Létezik még könyvtárlista és menülista. A könyvtárlistát a <DIR>utasítás vezeti be, és a </DIR>utasítás zárja le. A menülista pedig a<MENU> és a </MENU> utasítással határolt. Példa:

<OL><LH>Ez itt 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>

<UL><LH>EZ itt a számozatlan lista fejléce</LH>
<LI>Első sor
</UL><LH>A beágyazott lista fejléce</LH>
<LI>Első elem
<LI>Második elem
<LI>Harmadik elem
</UL>
<LI>Második sor
<LI>Harmadik sor
<LI>Negyedik sor
</UL>

Könyvtár:<BR>
<DIR>
<LI>Első könyvtár tag
<LI>Második könyvtár tag
<LI>Harmadik könyvtár tag
<LI>Negyedik könyvtár tag
</DIR>

Menü:<BR>
<MENU>
<LI>Első menü elem
<LI>Második menü elem
</MENU>


Még egy videó ami a body beállításokat mutatja meg:


    1 megjegyzés:

    H. Hauser Mária írta...

    Nagyon jó ez a táblázat is. Érthető és nyomon követhető. :)