benjo123

Szavazás vége! Eredményt hamarosan közlök!

A kérdés adott, lehet szavazni.

 

A szavazás időtartama: 2009. 09. 05. - 2009. 10. 05.

 

Az Ubuntu egy nyílt forráskódú, ingyenes, Linux alapú operációs rendszer laptopokra, asztali számítógépekre és kiszolgálókra. Minden fontos alkalmazást megtalál benne, amire szüksége lehet – internetböngészõt, szövegszerkesztõt, táblázatkezelõt, adatbáziskezelõt, prezentáció készítõt, levelezõ- és csevegõklienst, grafikai programot, multimédiás alkalmazásokat és még sok mást. A telepítéshez mindössze egyetlen CD-re van szüksége. Ha esetleg olyan alkalmazást szeretne használni, amit nem talál meg az alaprendszerben, néhány kattintással telepítheti. Nem kell az interneten vadásszon telepítõkészletek után, nem kell drága szoftvereket vennie a boltból, és megfeledkezhet az elkallódott telepítõ CD-krõl is: Ubuntunál egy központi alkalmazásból, a csomagkezelõbõl végezheti el a programok telepítését. Szinte minden feladatra megtalálhatja az ingyenes megoldást.

 

 

Az Ubuntu ingyenes és mindig az is marad. Szabadon letöltheti, használhatja és megoszthatja barátaival, ismerõseivel. Az Ubuntu teljesen hû a szabadszoftver-fejlesztés alapelveihez; bátorítjuk a nyílt forrású szoftverek használatát, tökéletesítését és továbbadását.

A "szabad szoftver" nem csak arról szól, hogy nem kell érte fizetni (noha az Ubuntu az ingyenesség mellett is elkötelezett), de azt is jelenti, hogy bármilyen módon fel lehet azt használni: a szabad szoftvert felépítõ kód mindenki számára elérhetõ, azt bárki letöltheti, módosíthatja, javíthatja és tetszõleges módon felhasználhatja. Így a szabad szoftver ideológiai elõnyei mellett ez a szabadság technikai elõnyökkel is jár: programok fejlesztésekor mások fáradságos munkája felhasználható, lehet rá építkezni. A nem szabad szoftverek esetén ez nem történhet meg, programok fejlesztésekor a semmibõl kell kiindulni. Ezért a szabad szoftverek fejlesztése gyors, hatékony és érdekes!

 

Az Ubuntu Linux félévente új kiadással jelentkezik, ezeket pedig legalább 18 hónapig ellátja biztonsági frissítésekkel. Egyes kiadásokhoz még hosszabb ideig biztosít támogatást. Ezeket LTS kiadásnak nevezik, melyekhez asztali felhasználóknak 3 évig, míg kiszolgálókon 5 évig biztosít támogatást. Az új kiadásokra is ingyenesen frissíthet. A frissítésnél megmaradnak a beállításai, adatai, csak a rendszer és az alkalmazások lesznek újabbak. A frissítéshez mindössze néhány kattintásra van szükség, az Ubuntu automatikusan elvégzi a szükséges csomagok letöltését és telepítését.

 

Az Ubuntu elérhetõ 32 bites és 64 bites változatban. A Desktop CD elindításához legalább 256 Megabyte memória szükséges. A telepítéshez legalább 2 Gbyte szabad tárhelyre van szükség.

 

Az Ubuntut egy gyorsan növekvõ közösség tartja karban. A projektet a Canonical Ltd. (http://www.canonical.com/) támogatja, egy Mark Shuttleworth által alapított társaság. Az Ubuntu fõ fejlesztõi a Canonical alkalmazottai, amely terméktámogatást és konzultációs szolgáltatásokat kínál az Ubuntuhoz.

 

 

 

Látványos grafikus kezelõfelület (Compiz Fusion biztosítja a látványt):

http://www.youtube.com/watch?v=E4Fbk52Mk1w

 

 

Rendszerigény:

 

• 700 MHz-es vagy jobb processzor
• 3GB szabad hely a merevlemezen
• 256MB RAM memória
• CD-ROM meghajtó
• Hálózati kártya vagy modem
• VGA grafikus kártya

 

 

Hasznos oldalak:

 

• Ubuntu telepítése XP alól (http://ubuntu.hu/dokumentacio/elso-lepesek/wubi)
• Az Ubuntu finomhangolása (http://ubuntu.hu/dokumentacio/elso-lepesek...-finomhangolasa)
• Segédletek (http://sugo.ubuntu.hu/8.04/html/hu.html)

 

 

Kapcsolódó letöltések:

 

• http://www.pirateclub.hu/index.php?showtopic=6145307
• http://www.pirateclub.hu/index.php?showtopic=5959934
• http://www.pirateclub.hu/index.php?showtopic=5963346
• http://www.pirateclub.hu/index.php?showtopic=5932266

 

Megjegyzés:

 

Telepítésben, kezelésben szívesen segítek! :wink:

 

Letöltés:

 

32 bites változat:

 

törölték

 

 

64 bites változat:

 

törölték

A CSS segítségével lehetőséged van megadni az elemeknek, hogy mekkora margót hagyjanak egymás között ezáltal akár egymással fedésbe is kerülhetnek. A felső, a jobb oldali, az alsó és a bal oldali margókat egymástól függetlenül módosíthatod kedved szerint. Arra is lehetőséged van, hogy egy tulajdonságok belül módosítsd a margóra vonatkozó összes értéket.

 

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.

W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

 

 

Fordításért külön köszönet illeti Szabeszt! Köszi a segítséget!

A CSS segítségével lehetőséged van egy elem köré kontúrt húzni a keret szegélyén túl, hogy egy elem "kiemelkedő" legyen. Ez egy új dolog, érdemes kipróbálni! Figyelem! Az Internet Explorer és a Netscape böngészők nem jelenítik meg a kontúrt!!!

 

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.

W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

 

A CSS segítségével a keret stílusát és színét adhatod meg. A HTML-ben táblázatot használtunk, hogy egy szöveg köré keretet tegyünk, de a CSS-ben szép, mutatós keretet készíthetsz egy elem köré.

 

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.

W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

 

 

A CSS segítségével a betűnek a családját, kiemeltségét, méretét és a stílusát állíthatod be.

Megjegyzés: CSS1-ben a betűket betűnévvel azonosították. Hogyha a böngésző nem támogatja az adott betűtípust, akkor az alapértelezett betűtípusra fog átváltani.

 

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.

W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

 

 

Fordításért külön köszönet illeti Szabeszt! Köszi a segítséget!

A CSS segítségével egy szövegnek a tulajdonságait szabhatod testre. Megadhatod a szöveg színét, növelheted vagy csökkentheted a karakterek közti távolságot, igazíthatod, kidekorálhatod a szöveget, behúzhatod a szöveg első sorát és még sok más tulajdonságot.

 

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.

W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

 

A CSS háttér tulajdonságok megadják egy elem hátterének az effektjeit. Megadhatsz háttérszínt, sima háttérképet, háttérképet vízszintes vagy függőleges ismétlődésben, háttérkép pozícióját.

 

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.

W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

 

 

(A képre kattintva teljes méretben megtekinthető a táblázat.)

Hogyan illessz be egy stíluslapot?

Amikor egy böngésző elolvas egy stíluslapot át fogja alakítani az oldalt a stíluslapnak megfelelően. Háromféle módon illeszthetsz be stíluslapot az oldaladba:

 

1.) Külső stíluslap

 

A külső stíluslap akkor hasznos, hogyha több oldal megjelenését szeretnéd egyetlen fájllal irányítani. Mindegyik oldal forráskódjának fej (head) szerepelnie kell a stíluslap elérési útvonalának a <link> parancs segítségével.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

 

A böngésző ki fogja olvasni a stílus definíciókat a mystyle.css fájlból és annak megfelelően fogja formázni az oldal stílusát.

Külső stíluslapot bármilyen szövegszerkesztő programmal tudsz készíteni. Arra figyelj, hogy ne használj HTML parancsokat a stíluslapon belül és .css formátumba mentsd el a munkád végeztével. Például:

 

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

Figyelj arra, hogy ne hagyj üres helyet az értékek és a mértékenységek között, mert néhány böngésző hibásan fogja értelmezni! Például véletlenül "margin-left: 20px" -t írtál a "margin_left: 20px" helyett.

 

2.) Beépített stíluslap

Beépített stíluslapot akkor használj, hogyha egy oldalnak egyéni megjelenést szeretnél adni. A stíluslapot az oldal head részében adhatod meg a <style> parancs használatával.

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

 

A böngésző most olvasni fogja a stílus definíciókat és ezeknek megfelelően fogja beállítani az oldalt.Megjegyzés: Régebbi böngészők nem ismerik a <style> parancsot ezért ki fogják hagyni, viszont a tartalmát meg fogják jeleníteni. Ezt ki tudod védeni egyszerűen úgy, hogy a <style></style> közti részt HTML-es megjegyzésbe teszed (<!-- -->).

<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>

3.) Belső stílus

A belső stílussal a CSS előnyeit veszíted el, ugyanis a HTML elemekhez hozzárendelsz egy style attritbútumot amin belül adod meg az elem stílusát.

<p style="color: sienna; margin-left: 20px">
Ez egy barnás bekezdés, 20 pixeles bal oldali margóval.
</p>

 

4.) Többszörös stíluslapok

Hogyha azonos kiválasztóra több tulajdonság lett beállítva különböző stíluslapokban, akkor az értékek öröklődni fognak a jobban meghatározó stíluslapból.Például egy külső stíluslap a következő tulajdonságokat tartalmazza a h3 kiválasztóra:

h3
{
color: red;
text-align: left;
font-size: 8pt
}

és egy belső stíluslap ezeket a tulajdonságokat adja meg ugyanarra az elemre:

h3
{
text-align: right;
font-size: 20pt
}

Hogyha ezt a két beállítást (a külső és belső stíluslapban szereplő tulajdonságokat) egy oldalon alkalamazod, akkor a h3 tulajdonságai ezek lesznek:

color: red;
text-align: right;
font-size: 20pt

A szín (color) a külső stíluslapból lett örökölve, míg a szöveg helye (text-align) és a betűméret (font-size) a belső stíluslapból.

Szintaxis

A CSS szintaxisa három részből van felépítve: a kiválasztóból [selector] (amivel megadod, hogy melyik HTML elemnek szeretnéd megváltoztatni a megjelenését, pl: <h1>), a tulajdonságbólértékből [value] (milyen értéket vegyen fel az előbb megadott tulajdonság, pl: red).selector {property: value}

pl:

a {color: #CCDDEE;}Vedd észre, hogy a tulajdonság és az érték között van egy ":" és az egész egy "{ }" közé van foglalva. Hogyha két szóból áll az érték, akkor tegyél köréjük idézőjelet (""). Pl.:

p {font-family: "sans serif"}

 

Hogyha több tulajdonságot szeretnél adni egy kiválasztóhoz, akkor azokat egymástól pontosvesszővel ( ; ) válaszd el. Pl.:

 

p {text-align:center;color:red}

vagy

 

p {
text-align: center;
color: black;
font-family: arial
}

 

Csoportosítás

Csoportokba foglalhatsz kiválasztókat, egymástól vesszővel (,) elválasztva. A csoport minden egyes tagjára érvényes lesz az a tulajdonság és a vele járó érték, amit beállítunk a csoporthoz. Az alábbi példában a header (fejléc) elemeket foglaltuk egy csoportba, mindegyik fejléc zöld színű lesz:

[property] (amivel megadod, hogy melyik tulajdonságát szeretnéd módosítani, pl: színét) és az

h1,h2,h3,h4,h5,h6
{
color: green
}

 

Az osztály kiválasztó

Az osztály (class) kiválasztóval egy HTML elemhez különböző értékű tulajdonságokat rendelhetsz hozzá. Az alábbi példában a "p" (bekezdés) elemből készítünk két csoportot. Az egyiket jobbra, a másikat pedig balra igazítjuk.

 

p.right {text-align: right}
p.center {text-align: center}

 

Az osztály attritbútumot bele kell építened a HTML dokumentumba ahhoz, hogy érvénybe lépjenek a benne meghatározott tulajdonságok. Az előbbi példa beépítve egy kódrészletbe:

 

<p class="right">
Ez a bekezdés jobbra igazított lesz
</p>
<p class="center">
Ez pedig középre lesz igazítva
</p>

 

Ahhoz, hogy egy elem több osztályhoz (csoport) tartozzon egymástól szóközve elválaszva kell megadni a csoportok neveit. Pl:

<p class="center bold">
Ennek a bekezdésnek a megjelenését a "center" és a "bold" csoportok tulajdonságai és azoknak az értékei határozzák meg.
</p>

Eddig csak egy HTML elemet osztottunk csoportokra. Mostantól viszont már lehetőségünk van egy csoportot több HTML elemnél alkalmaznunk. Pl:

 

.kozep {text-align: center} <h1 class="kozep>
Ez a fejléc középre lesz igazítva.
</h1>

<p class="kozep">
Ez a bekezdés is középre lesz igazítva.
</p>

 

 

Ne kezdj csoportneveket számmal, mert egyes böngészők nem tudják értelmezni!

 

Stílusok hozzáadása elemekhez, amelyeknek egyéni attritbútumaik vannak

Meghatározott HTML elem, meghatározott tulajdonsága (attritbútuma) esetén is meg tudod határozni, hogyan jelenjen meg. Pl:

 

input[type="text"] {background-color: blue}

 

Azoknak az input elemeknek lesz kék a háttere, amelyek szövegbeviteli (text) mezők.

 

Az id kiválasztó

Meghatározhatsz HTML elemeket egyéni id-k alapján is. Ameddig a csoporotba foglalt elemek neveit ponttal (.) kell kezdeni, addig az egyéni névvel (id-val) ellátottakét pedig kettőskereszttel (#). Az alábbi példában a "zold" nevű elem háttere zöld színű lesz.

 

#green {color: green}

 

Az alábbi kódban szereplő "p" elem csak akkor lesz középre igazítva (center) és piros (red) színnel írva, hogyha "para1"-nek hívják.

 

p#para1
{
text-align: center;
color: red
} <p>
Ez a bekezdés alapértelmezett (általában fekete) színű lesz.
</p><p id="para1">
Ez a bekezdés pedig piros színű lesz és középre lesz igazítva.
</p>

 

Szintén NE kezdj id-val ellátott kiválasztókat számmal, mert néhány böngésző nem fogja tudni értelmezni!

 

CSS megjegyzések

A megjegyzések könnyebben értelmezhetővé teszik a hosszabb kódokat, így érdemes használni őket, nehogy eltévedj közöttük. A megjegyzéseket a böngészők kihagyják, így azok nem kerülnek megjelenítésre az oldaladat látogatók előtt, csak a forráskódban lesznek láthatóak. A megjegyzéseket "/*" jellel kell kezdeni és "*/" jellel lezárni. Több sorból is állhat a megjegyzés, amiket akár két tulajdonság közé is beépíthetsz. Pl.:

 

/* Ez
egy
több sorból
álló, külső
megjegyzés. */

p
{
text-align: center;
/* Ez egy belső megjegyzés. */
color: black;
font-family: arial
}

Amit már tudnod kell

Mielőtt elkezdenéd a tananyagot, már ismerned kell a HTML / XHTML nyelvet ahhoz, hogy használni tudd az itt leírtakat.

 

Mi az a CSS?

A CSS (Cascading Style Sheet) jelentése nem más, mint Egymásba Ágyazott Stíluslapok, amelyek meghatározzák, hogyan jelenjenek meg a weboldalaid. A stílusok alapvetően stíluslapokban (több stílus egy fájlban eltárolva) vannak tárolva. Sok időt takaríthatsz meg a segítségével. (Nem kell külön-külön egyesével beállítanod a megjelenéseket, helyette egy megjelenést több helyen alkalmazhatsz.)

 

A stílusok gyakori problémákat oldanak meg

A HTML parancsokat a dokumentumok tartalmának leírására tervezték. Az elkészült weboldalak megjelenése a böngészőkre volt bízva. Amint bővítették a parancsok sorát, egyre nehezebbé vált olyan weboldalakelkészítése, ahol a tartalom teljesen különállt a kinézettől. A probléma megoldására a W3C (World Wide Web Consortium) bevezette a STYLES parancsot, amelyet a HTML 4.0 alapból tartalmaz. Az összes főbb böngésző (Firefox, Opera, Internet Explorer, Netscape, Safari, stb.) megjeleníti a CSS-el díszített oldalakat.

 

A stíluslapokkal sok munkát spórolhatsz meg

A stílusok (styles) meghatározzák, hogyan nézzenek ki a HTML-ben írt oldalak a böngészőben. A stílusok normálisan .css fájlokban vannak tárolva. Az újabb stílusokat egyszerűen bele lehet írni a .css fájlokba. A CSS egy áttörés a webdesign történetében, mert megengedi a fejlesztőknek, hogy irányítsák a stílusokat (különböző elemek megjelenését) és a különböző tartalmú oldalak azonos kinézetét egyetlen fájlban. Egyszer meghatározod egy elem stílusát (pl.: .alma { height: 12px; } - 12 pixel magas lesz az "alma" nevű csoport) és annyiszor alkalmazod más oldalakon, ahányszor akarod. Akár teljesen megváltoztathatod egy honlap kinézetét pár adat megváltoztatásával.

 

A megtöbbszörözött stílusok egyetlen egy stíluslapba fognak beépülni

A stíluslapok megengedik, hogy a stílus információja többféle módon legyen meghatározva. Egyszerű HTML elemeken belül (pl: - 12 pixel széles lesz a kep.jpg), az oldal részében (pl.: .barack { height: 12px; } - 12 pixel magas lesz a "barack" nevű csoport) vagy egy külső CSS fájlban (pl.: .dio { height: 12px; } - 12 pixel magas lesz a "dio" nevű csoport). A külső CSS fájlt bele lehet építeni a különböző oldalakba (<link rel="stylesheet" type="text/css"href="style.css" />).

 

Beágyazási sorrend

Melyik stílus fog életbe lépni annál a HTML elemnél, amelyhez több megjelenési tulajdonságot adtunk meg?

Általánosan azt mondhatjuk, hogy az összes stílus egybe fog épülni virtuálisan, de a konkrét sorrend a következő:

 

1. Böngésző alapbeállítása

2. Külső stíluslapban szereplő stílus

3. Belső stíluslap (a részen belül)

4. A HTML elem style attritbútumában szereplő beállítások

 

Tehát a belső HTML elem style attritbútumának van a legmagasabb prioritása, ami azt jelenti, hogy felül fogja írni a sorrendben előtte lévők beállításait.

XHTML teszt

 

Amennyiben úgy gondolod, hogy eléggé rendesen elsajátítottad az XHTML tudásanyagát, akkor kitölthetsz egy tesztet, hogy mennyire is nagy az önbizalmad és ez mennyire tükrözi a valódi XHTML tudásodat.

 

http://w3schools.com/quiztest/quiztest.asp?qtest=XHTML

 

 

Forrás

 

Szerintem már többen észrevettétek, hogy a tutorial szövegét a W3 Schools honlapjáról szereztem, vagyis pontosabban onnan fordítottam le + példákkal egészítettem ki itt-ott.

 

http://www.w3schools.com

 

Ami a tutorialt illeti, szabadon lehet terjeszteni, csak annyit kérek, hogy aki kiteszi valamely oldalra/fórumra, az legyen szíves minden lecke végére odabiggyeszteni, hogy Forrás: pirateclub.hu. Amennyiben ezt nem teszi meg az illető, és megtalálom az oldalt, akkor intézkedni fogok az ügyben, hogy minél hamarabb lekerüljön onnan az XHTML tananyag.

 

 

Mégvalami: a tanfolyam folyamán egy-két helyen felhasználtam az Oktatóvideók által készített jegyzetet is, amelyet itt lennt tölthettek le. (A jegyzetből kimaradt egy-két dolog, amely viszont szerepel a tananyagban.)

 

http://rapidshare.com/files/76580687/XHTML_jegyzet.doc

 

 

Videó

 

A tananyagot vizuális formában, oktatóvideók segítségével is elsajátíthatod, melynek ára 7 700 Ft, amely tartalmazza a 20% ÁFA-t és az XHTML, CSS tanfolyamokat. Az összes videóanyag mintegy 7 és fél órát tölt be és 1 CD-re ráfér!

 

http://www.oktatovideok.hu/?ref=BT79967

 

Megjegyzés: Hogyha azon a linken keresztül adod le a rendelést, mint amit megadtam, akkor azzal támogatsz engem, hogy készítsek el minél több tutorialt.

 

 

Végül szeretném megköszönni a kitüntető figyelmedet, amely végigkísért mind a 10 leckén keresztül és remélem, hogy legközelebb, más tananyag keretein belül ismét találkozni fogunk!

 

 

Szavazás:

 

Legyél szives értékelni a tananyagot a szavazás segítségével!

XHTML összefoglalása

 

Ebből a tutorialsorozatból megtanulhattad, hogyan kell szigorúbb és tisztább HTML oldalakat készíteni.

 

Megtanultad, hogy az összes XHTML-elemet megfelelően kell egymásba ágyazni, az XHTML dokumentumoknak megfelelően formázottnak kell lenniük, minden parancsot kisbetűvel kell írni és minden XHTML tagot le kell zárni!

 

Szintén megtanultad, hogy az összes XHTML dokumentumnak tartalmaznia kell egy DOCTYPE meghatározást és, hogy a html, head, title, és body elemeket is tartalmazniuk kell a dokumentumoknak.

 

 

Mostmár ismered az XHTML-t, de hogyan tovább?

 

A következő lépés az lesz, hogy megtanulod a CSS-t, vagy a Java Scriptet.

 

CSS (Cascaiding Style Sheets - Egymásbaágyazott stíluslapok)

 

A CSS-t arra használják, hogy irányítsák a kinézetét több weboldalnak.

 

A CSS-el, az összes stílus-meghatározó tulajdonságot száműzheted a HTML dokumentumodból, egyetlen különálló fájlba.

 

A CSS teljes irányítást ad neked az oldalad megjelenését illetőleg, nehogy elveszítsd a dokumentumod tartalmát a sok formázóparancs rengetegében.

 

(Majd készítek egy CSS tutorialt is.)

 

 

Java Script

 

A Java Script sokkal lendületesebbé tudja tenni a weboldalad. Egy statikus weboldal szép, amikor lapos tartalmat szeretnél mutatni, de egy dinamikus weboldal reagálni tud a látogató mozdulataira.

 

A Java Script a legnépszerűbb szkriptnyelv az interneten és az összes főbb bögnészővel együttműködik!

 

(A Java Script egy sokkal nagyobb falat, úgyhogy azzal majd jó sokára fogunk foglalkozni.)

A HTML 4.0-ban jelent meg újdonságként az a lehetőség, hogy a böngészőben különböző eseményekre, úgymint Java Script indítása, amikor a felhasználó egy HTML elemre kattint. Lentebb található egy lista az attritbútumokra, amelyeket HTML tagokba lehet beilleszteni, hogy meghatározzunk eseményakciókat.

 

Amennyiben többet szeretnél tanulni ezen események programozásáról, ajánlanám figyelmedbe a JavaScriptet és a DHTML-t.

 

Ablak események:

 

Csak a body és frameset elemekben érvényes.

 

Attritbútum - Érték - Magyarázat

 

onload - script - Szkript futtatása, amikor a dokumentum betöltődik.

onunload - script - Szkript futtatása, amikor a dokumentum bezáródik.

 

Példák:

 

<frameset onload="alert ('A keret betöltődött!')"></frameset>
<body unload="alert ('Köszönjük a látogatást!')"></body>

 

 

Billentyűzet események:

 

Kizárólag űrlap elemeknél használhatóak.

 

Attritbútum - Érték - Magyarázat

 

onchange - script - Szkript futtatása, amikor a dokumentum megváltozik.

onsubmit - script - Szkript futtatása, amikor az űrlapot elküldték.

onreset - script - Szkript futtatása, amikor az űrlap alaphelyzetbe áll.

onselect - script - Szkript futtatása, amikor az elemet kiválasztják.

onblur - script - Szkript futtatása, amikor az elem elveszti a fókuszt.

onfocus - script - Szkript futtatása, amikor az elem fókuszba kerül.

 

Példák:

 

<form onsubmit="alert('Elküldve!')" onreset="alert('Alaphelyzetbe állítva...')"></form>
<input onchange="alert('Megváltozott!')" onfocus="alert ('Kiválasztottuk a beviteli mezőt!')" />
<input onblur="alert ('Elhagytuk a beviteli mezőt!')" />

 

 

Egér események:

 

Nem érvényes a base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, és title elemekben.

 

Attritbútum - Érték - Magyarázat

 

onclick - script - Mi történjen az egérkattintásnál.

ondbclick - script - Mi történjen dupla egérkattintásnál.

onmousedown - script - Mit történjen, amikor az egér gombját lenyomva tartjuk.

onmousemove - script - Mi történjen, amikor az elem fölött mozgatjuk az egérkurzort.

onmouseover - script - Mi történjen, amikor az egér mutatója elhalad egy elem fölött.

onmouseout - script - Mi történjen, amikor az egérkurzor egy elemen kívülre kerül.

onmouseup - script - Mi történjen, amikor egy egérgombot felengedünk.

 

Példa:

 

<div onmousemove="alert ('Megmozdult! :D')" onmouseover="alert('Az egeret a négyzet fölé húztad!')" onmouseout="alert('Az egérrel elhagytad a négyzetet!')" onclick="alert ('Kattintottál.')" ondblclick="alert ('Dupla kattintás történt.')" onmousedown="alert ('Lenyomtad az egérgombot.')" onmouseup="alert ('Felengedted az egérgombot.')" style="width:100px;height:100px;border:5px"></div>

Az XHTML tagoknak (parancsok) lehetnek attritbútumaik. A speciális attritbútumokokat parancsokra bontva lentebb találod. Az attrtitbútumok le vannak írva itt, de a fő és a nyelvi attrtitbútumok mindegyik parancsra vonatkoznak (néhány kivétellel).

 

Fő attritbútumok!

 

Nem érvényes a base, head, html, meta, param, script, style, és title elemeknél.

 

Attritbútum - Érték - Magyarázat

 

class - class_szabály (class_rule) vagy style_szabály (style_rule) - Az elem osztálya, amelyet az CSS-programozás során használunk.

id - id_név (id_name) - Az elem egyéni azonosítója, amelyet máshol is használunk, nemcsak a CSS-ben.

style - style_meghatározás (style_definition) - Egy belső stílusmeghatározás, amellyel az adott elem megjelenését határozhatjuk meg.

title - eszköztipp_szöveg (tooltip_text) - Az elem fölé húzva az egeret a tipp ablak tartalma.

 

Példák:

 

<a href="#" class="elso_link">Első link</a>
<img src="kerthaz.jpg" id="Kertes ház" alt="Szép kertes ház." />
<div style="font-size:26px">26 pixeles szöveg</div>
<ptitle="Hát ez az...">Én megmondtam.</p>

 

 

Nyelvi attritbútumok!

 

Nem érvényes a base, head, html, meta, param, script, style, és title elemeknél.

 

Attritbútum - Érték - Magyarázat

 

dir - ltr (left to right = balról jobbra) | rtl (right to left = jobbról balra) - Megadja a szöveg irányát.

lang - nyelvi_kód (language_code) - Megadja a nyelvi kódot.

 

Példák:

 

<p dir="rtl">Jobbról balra, de valahogy furcsa a pont helyzete...</p>
<div lang="hu" xml:lang="hu">Ezt a szöveget bizony, csak magyar nyelven tudod elolvasni.</div>

 

 

Billentyűzet attritbútumok!

 

Attritbútum - Érték - Magyarázat

 

accesskey - karakter (character) - Egy billentyűt jelöl ki az elem eléréséhez. ALT + egy billentyű lenyomásával a meghatározott elemre ugrik.

tabindex - szám (number) - A TAB billentyűt nyomkodva az elemre hányadikként ugorjunk.

 

Példák:

 

<input accesskey="l" value="ALT+l betűt lenyomja ugrunk erre az elemre." />
<input tabindex="3" value="Tabot harmadszorra lenyomva ugrunk erre a beviteli mezőre." />

1. Miért XHTML-módosítás?

 

Az XHTML egy egyszerű, ámde nagy nyelv. Az XHTML tartalmazza a legfőbb funkciókat, amelyekre egy webszerkesztőnek szüksége lehet.

 

Néhány XHTML terv túl komplikált, míg néhány túl egyszerű.

 

Az XHTML-t modulokra választva, a W3C (World Wide web Consortium) megteremtette és bedefiniálta az XHTML parancsokat, amelyeket különállóan lehet használni kis eszközökön vagy kombinálva más XML alapokkal, nagyobb és komplexebb alkalmazásokba.

 

Az elemes XHTML-el lehet:

• Kiválasztani az elemeket, hogy támogassanak egy eszközt, ami alap XHTML-t használ blokkok építésére.
• XHTML-hez kiegészítőket adni XML használatával, az alap XHTML szabályai megszegése nélkül.
• Egyszerűsíteni az XHTML-t olyan eszközökre, mint PDA, mobiltelefon, TV és otthoni készülékek.
• Kiterjeszteni az XHTML-t egy komplex alkalmazásba, hozzáadva új XML funkciókat (mint MathML, SVG, hang és multimédia).
• XHTML profilokat meghatározni, mint az XHTML Alap [basic] (az XHTML egy részhalmazát, mobileszközökre).

XHTML modulok

 

A W3C 28 modulba vűlasztotta szét az XHTML meghatározását.

 

Modulnév - Magyarázat

 

Beépülő modul - Meghatározza a helytelenített "<applet>" elemet.

Alap modul - Meghatározza a "<base>" elemet.

Alap űrlap modul - Meghatározza az alap "<form>" elemeket.

Alap táblázat modul - Meghatározza az alap "<form>" elemeket.

Kétirányú szövegmodul - Meghatározza a kétirányú szövegmodul elemet.

Ügyféloldali térképmodul - Meghatározza a böngészőoldali "<map>" elemeket.

Módosító modul - Meghatározza a módosítandó elemeket. (Törlés és beillesztés.)

Űrlap modul - Meghatározza az összes elemet, amit az űrlapokban használhatunk.

Keretek modul - Meghatározza a "<frameset>" elemeit.

Hyperszöveg modul - Meghatározza az "<a>" elemet.

Kulcskeret modul - Meghatározza az "<iframe>" elemet.

Képmodul - Meghatározza az "<img>" elemet.

Belső esemény modul - Meghatározza az események attritbútumait, mint például az "onblur" és az "onchange".

Örökség modul - Meghatározza a helytelenített elemeket és attritbútumokat.

Link modul - Meghatározz a "<link>" elemet.

Lista modul - Meghatároza a lista elemeket, mint például "<ol>, <li>, <ul>, <dd>, <dt> és <dl>".

Metainformáció modul - Meghatározza a "<meta>" elemet.

Névmeghatározó modul - Meghatározza a helytelenített "name" attritbútumot.

Objektum modul - Meghatározza az "<object>" és a "<param>" elemeket.

Megjelenítési modul - Meghatározza a megjelenítési elemeket, mint például "<b>" és "<i>".

Script modul - Meghatározz a "<script>" és a "<noscript> elemeket.

Szerveroldali térképmodul - Meghatározza a szerveroldali "<map>" elemeket.

Szerkezet modul - Meghatározza a következő elemeket: "<html>, <head>, <title> és <body>".

Stílus attritbútum modul - Meghatározza a "<style>" attritbútumot.

Stíluslap modul - Meghatározza a "<style>" elemet.

Táblázat modul - Meghatározza, mely elemek használhatóak a táblázatban.

Cél modul - Meghatározza a "target" attritbútumot.

Szöveg modul - Meghatározza tároló elemeket, mint például "<p> és <h1>".

 

A helytelenített elemeket nem lehet használni az XHTML-ben.

XHTML oldal érvényesítése a DTD segítségével!

 

Még mielőtt egy XHTML fájlt megfelelően érvényesítenél, be kell tenned a pontos DTD definíciót az oldala(i)d első sorába.

 

A Strict DTD azokat az elemeket és attritbútumokat tartalmazza, amelyeket érvénytelenített a W3C, vagy nem keretrendszerben jelennek meg.

 

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

A Transitional DTD minden elemet tartalmaz, amelyet a Strict DTD is, a helytelenített elemeket és attritbútumokat is.

 

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

A Frameset DTD mindent tartalmaz, amit a Transitional DTD is, és a kereteket is.

 

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

Egyszerű XHTML dokumentum:

 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Egyszerű dokumentum</title>
</head>
<body>
<p>Egyszerű bekezdés.</p>
</body>
</html>

 

Ellenőrizd az XHTML-edet a W3C Validatorral!

 

http://www.w3schools.com/xhtml/default.asp

Hogyan alakítsunk át egy HTML odalt XHTML-é?

 

Ahhoz, hogy átalakíts egy weboldatl HTML-ből XHTML-be, tisztában kell lenned az XHTML szintaxisával (lásd. XHTML szintaxis lecke című lecke). A következő lépéseket kell végrehajtanod:

 

1. Dokumentumtípus-definíciót megadni!

 

A következő DOCTYPE definíciót minden oldal első sorában, még a <html> rész előtt meg kell adni!

 

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Most a Transitional típusú DOCTYPE-ot mutattuk be, de választhattuk volna a Strict DTD-t, de ehhez kissé nehezebb alkalmazkodni, mert kevesebb parancs használatát engedélyezi (a Strict).

 

 

Megjegyzés a DOCTYPE-ról:

 

Az oldalaidnak tartalmazniuk kell a DOCTYPE definíciót, hogyha pontos XHTML oldalként szeretnéd érvényesíteni.

 

De legyél körültekintő, mert az újabb böngészők (mint Internet Explorer 6) lehet, hogy kezelik a dokumentumodat, függetlenül a <!DOCTYPE> meghatározástól. Hogyha egy böngésző az oldalt DOCTYPE-al olvassa, úgy fogja kezelni, mint egy pontos dokumentumot. Lehet, hogy az XHTML dokumentum máshogy fog kinézni, hogyha nem tartalmazza a DOCTYPE meghatározást.

 

 

2. Kisbetűs parancsok és attritbútum nevek!

 

Amióta az XHTML nagybetű-kisbetű érzékeny, azóta az XHTML csak a kisbetűs HTML parancsokat, attritbútum neveket és általános kereséseket és felülíró parancsokat kezeli.

 

 

3. Összes attritbútumot idézőjelek ("") közé kell írni!

 

Amióta a W3C XHTML 1.0 ajánlás napvilágot látott, azóta kell az összes attritbútumértéket idézőjelek közé tenni. Az interneten minden weboldalt ellenőriztek, hogy idézőjelek között legyenek az attritbútumértékeik. Ez időpazarló munka volt, ezért sosem fogják elfelejteni ezt az időszakot.

 

 

4. Üres parancsok: <hr>, <br> és <img>

 

Az üres parancsok nem engedélyezettek az XHTML-ben. A <hr> és <br> tagokat (teg, parancs) felülírjuk a <hr /> és <br /> parancsokkal.

 

Egy próblémát okozott, hogy a Netscape félreértelmezte a <br/> parancsot. Nem tudjuk miért, de a <br /> tag viszont jól működött. Azután a felfedezés után, egy általános kereső és felülíró funkció került bele a programba, hogy lecserélje az előbb említett (hibás) tagokat.

 

Néhány egyéb tag (mint az <img>) hasonló problémával szenvedett, mint az előbb említett <br> tag. Elhatározták, hogy nem a </img> taggal zárják le, hanem a /> -el, amit a parancs végér helyeznek.

<img src="kep.jpg" alt="Felirat" />

 

 

4. A weboldal érvényesítése!

 

Miután elkészítetted az összes oldalad, DTD-meghatározásostúl, lezárt parancsostúl, nekiláthatsz, hogy érvényestsd a következő oldal segítségével: XHTML érvényesítő. Hogyha valamilyen hibát nem értesz, böngészd a következő oldalt és ott biztos megtalálod a kérdésedre a választ. Amennyiben mégsem, akkor készségesen állok rendelkezésedre! (HTML Tidy)

Az alap XHTML, három Dokumentumtípus Definíciót tartalmaz. A leggyakoribb az XHTML Transitional.

 

<!DOCTYPE> - t kötelező megadni!

 

Az XHTML dokumentum három fő részből áll:

• a dokumentumtípusból,
• a head-ből
• és a body-ból.

Az alap dokumentum-felépítés:

 

<!DOCTYPE ...>

<html>

<head>
<title>... </title>
</head>

<body> 
... 
</body>

</html>

 

A DOCTYPE meghatározásnak mindig az XHTML dokumentum első sorában kell szerepelnie!

 

 

Egy XHTML példa:

 

Egyszerű XHTML dokumentum szerkezete:

 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Egyszerű dokumentum</title>
</head>

<body>
<p>Egyszerű bekezdés.</p>
</body>

</html>

 

A DOCTYPE meghatározza a dokumentum típusát:

 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

A dokumentum hátralevő része a következő módon néz ki:

 

<html>

<head>
<title>Egyszerű dokumentum</title>
</head>

<body>
<p>Egyszerű bekezdés.</p>
</body>

</html>

 

 

A három dokumentumtípus meghatározása:

• a DTD meghatározza a weboldal szintaxisát (szintaktikáját) az SGML-ben,
• a DTD-t az SGML alkalmazások használják, mint HTML, hogy meghatározzanak szabályokat a jelölődokumentumok bizonyos típusainak elfogadására, tartalmazva az elem és a lényeg meghatározásának egy csoportját,
• az XHTML egy SGML dokumentumtípus-meghatározásban van meghatározva, vagy 'DTD',
• egy XHTML DTD pontosan leírja számítógép számára olvasható nyelven a megengedett szintaxist és az XHTHML jelölés nyelvtanát.

Jelenleg három XHTML dokumentumfajta van:

• szigorú (Strict)
• átmeneti (Transitional)
• keretes (Frameset)

Az XHTML 1.0 három XML dokumentumtípust határoz meg, három DTD-ben: szigorú, átmeneti és keretes.

 

XHTML 1.0 Strict:

 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Akkor használd, amikor valóban tiszta, összevisszaságoktól mentes jelölést szeretnél. Cascaiding Style Sheets-el együtt használd.

 

 

XHTML 1.0 Transitional:

 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Akkor használd, amikor szükséged van a HTML prezentációs funkcióira és olyan böngészőket szeretnél támogatni, amelyek nem értik a Cascaiding Style Sheets-et.

 

 

XHTML 1.0 Frameset:

 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

Akkor használd, amikor a HTML kereteket szeretnél használni, hogy feloszd a böngészőnek az ablakát kettő, vagy több keretbe.

 

 

Magyarázatok:

 

DTD = Document Type Definition (dokumentumtípus-meghatározás).

Strict - szigorú.

Transitional - átmeneti.

Frameset - keretes.

frame - keret.

Cascaiding Style Sheets = CSS (Egymásbaágyazott stíluslapok)

XHTML írása megköveteli a tiszta HTML-szintaxist.

 

Néhány XHTML szintaxisszabály:

 

- Az attritbútumok neveit kisbetűvel kell írni.

- Az attritbútumok értékeit idézőjelek ("") közé kell tenni.

- Az attritbútumok rövidítése tilos!

- Az id attritbútum felülírja a name attritbútumot.

- Az XHTML típusa (DTD) meghatározza az adott dokumentumban használható és kötelező elemeket.

 

 

Az attritbútumok neveit kisbetűvel kell írni!

 

Ez helytelen:

 

<table WIDTH="100%">

 

Ez helyes:

 

<table width="100%">

<img src="kep.gif" name="kep1" />

 

Az attritbútumok értékeit idézőjelek ("") közé kell tenni!

 

Ez helytelen:

 

<table width=100%>

 

Ez helyes:

 

<table width="100%">

 

 

Az attritbútumok rövidítése tilos!

 

Ez helytelen:

 

<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

 

Ez így helyes:

 

<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />

 

Itt egy lista a HTML-ben rövidíthető attritbútumokról és az XHTML megfelelőjükről szól.

 

 

 

Az id attritbútum felülírja a name attritbútumot!

 

A HTML 4.01. hozzárendel egy név attritbútumot a következő elemekhez: a; applet; frame; iframe; img és map. XHTML-ben a név attritbútum helytelen. Használd az id-t helyette.

 

Helytelen kód:

 

<img src="kep.gif" name="kep1" />

 

Helyes kód:

 

<img src="kep.gif" id="kep1" />

 

Megjegyzés: A régebbi böngészőkkel való kompatibilitás érdekében, használd az id és a name attritbútumot ugyanazon értékekkel.

 

Például:

<img src="kep.gif" id="kep1" name="kep1" />

 

 

Fontos kompatibilitási megjegyzés!

 

Hogy az XHTML-t kompatibilissé tedd a mai böngészőkkel, egy extra "szóközt" kell tenned a "/" szimbólum elé.

 

 

A nyelv attritbútum:

 

A nyelv (lang) attritbútum hozzárendelhető majdnem az összes XHTML elemhez. Ez meghatározza a tartalom nyelvét egy elemen belül.

 

Hogyha nyelv (lang) attritbútumot használsz egy elemen belül, hozzá kell adnod az xml:lang attritbútumot, mint az alábbi esetben:

 

<div lang="eng" xml:lang="eng">Hello England!</div>

 

 

Nélkülözhetetlen XHTML elemek!

 

Minden XHTML dokumentumnak tartalmaznia kell egy DOCTYPE meghatározást. A html, head és body elemeknek mindenképpen szerepelniük kell az oldal szerkezetében és a title elemnek a head elemen belül kell kötelezően szerepelnie.

 

A minimum XHTML szerkezet:

 

<!DOCTYPE A dokumentum típusának meghatározás kerül majd ide>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A cím ide kerül</title>
</head>

<body>
</body>

</html>

 

Megjegyzés: A DOCTYPE meghatározás nem az XHTML dokumentum része, ez nem egy XHTML elem, így ezt nem kell (nem szabd!) lezárni.

 

Az XHTML dokumentum meghatározásáról részletesebben a következő leckében tanulhatsz.

 

Megjegyzés: A leckében található attritbútum kifejezések helyett lehet használni a tulajdonság kifejezést is.

Előkészítheted magad az XHTML-re azáltal, hogy szigorú HTML kódokat írsz.

 

Hogyan készülj fel az XHTML-re?

 

Az XHTML nem nagyon különbözik a HTML 4.01-től, tehát a kódjaidat (HTML) 4.01-es állapotba hozni jó kezdés lehet.

 

Ráadásul gyakorolhatod HTML kódokat csupa kisbetűvel írni és SOHA ki nem hagyni a záró tagokat (mint </p>).

 

Jó kódolást!

 

 

Legfontosabb különbségek:

 

- XHTML elemeket megfelően kell egymásba ágyazni.

- XHTML elemeket mindig le kell zárni.

- XHTML elemeket mindig kisbetűvel írni.

- XHTML dokumentumoknak rendelkezniük kell fő elemekkel.

 

 

XHTML elemeket megfelően kell egymásba ágyazni

 

A HTML-ben néhány elemet szabálytalanul egymásba lehet ágyazni, mint például:

 

<b><i>Ez a szöveg félkövér és dőlt.</b></i>

 

Az XHTML-ben minden elemet megfelelően kell egymásba ágyazni!

 

<b><i>Ez a szöveg félkövér és dőlt.</i></b>

 

Megjegyzés: Gyakori hiba az egymásba ágyazott listáknál, hogy elfelejtjük a belső listákat <li> és </li> elemeken belül elhelyezni.

 

Hibás kód:

 

<ul>
  <li>Kávé</li>
  <li>Tea
    <ul>
      <li>Fekete tea</li>
      <li>Zöld tea</li>
    </ul>
  <li>Tej</li>
</ul>

 

Helyes kód:

 

<ul>
  <li>Kávé</li>
  <li>Tea
    <ul>
      <li>Fekete tea</li>
      <li>Zöld tea</li>
    </ul>
  </li>
  <li>Tej</li>
</ul>

 

Figyeld meg, hogy </li> elemet használtunk az </ul> elem után a "helyes" példakódban.

 

 

XHTML-elemeket mindig le kell zárni!

 

Nem üres elemeket le kell zárnunk!

 

Ez hibás:

 

<p>Ez egy bekezdés
<p>Ez pedig egy másik bekezdés.

 

Ez helyes:

 

<p>Ez egy bekezdés</p>
<p>Ez pedig egy másik bekezdés.</p>

 

 

Üres elemeket le kell zárnunk!

 

Üres elemeknek rendelkezniük kell vagy egy lezáró résszel, vagy a kezdő résznek rendelkeznie kell egy /> végződéssel.

 

Hibás:

 

Sortörés: <br>
Vízszintes vonal: <hr>
Kép: <img src="boldog.gif" alt="Boldog arc">

 

Helyes:

 

Sortörés: <br />
Vízszintes vonal: <hr />
Kép: <img src="boldog.gif" alt="Boldog arc" />

 

 

XHTML elemeket mindig kisbetűvel kell írni!

 

XHTML részletes leírása meghatározza, hogy az elemek nevei és tulajdonságait kisbetűvel kell írni.

 

Helytelen:

 

<BODY>
<P>Ez egy bekezdés</P>
</BODY>

 

Helyes:

 

<body>
<p>Ez egy bekezdés</p>
</body>

 

 

XHTML dokumentumoknak rendelkezniük kell fő elemekkel!

 

Minden XHTML elemet a <html> fő elemen belül kell elhelyezni. A többi elemeknek lehet al- (gyerek) elemük. Az alelemek párban kell, hogy legyenek és megfelelően be kell őket ágyazni a szülő elembe. Az alap dokumentumszerkezet a következő:

 

<html>
<head> ... </head>
<body> ... </body>
</html>

Az XHTML, a HTML és az XML (EXtensible Markup Language = kiterjeszthető jelölőnyelv) egybeolvadása. Az XHTML tartalmazza a HTML 4.01-es változatának az összes elemét, az XML szintaxisával (szintatkikájával) kombinálva.

 

Miért XHTML?

 

Sok olyan honlapot lehet találni a weben, amely "rossz" HTML-t tartalmaz. A következő HTML kód remekül fog működni, hogyha egy böngészőben megtekinted (működés közben), még akkor is, hogyha ez nem követi a HTML szabályait.

 

<html>
<head>
<title>Ez egy rossz HTML oldal</title>
<body>
<h1>Rossz HTML
</body>

 

Az XML egy jelölő nyelv, amelyben minden elemet jelölni kell megfelelően, ami egy "jól formázott" dokumentumban mutatkozik meg.

 

Amíg a HTML-t úgy tervezték, hogy a beírt adatokat jelenítse meg a képernyőn, addig az XML-t úgy, hogy adatokat írjon le.

 

A mai piac különböző böngészőtechnológiákból áll. A legtöbb böngészőt internet-hozzáféréssel rendelkező számítógépeken, míg néhányat iternetezésre használt mobiltelefonokon futtatnak. Utóbbiak nem képesek értelmezni a hibás jelölőnyelvet.

 

Ezért - a HTML és az XML erősségeit kombinálva, olyan jelölőnyelvet kapunk, amely nemcsak most hasznos, hanem a jövőben is az lesz - XHTML.

 

XHTML oldalakat képes értelmezni minden olyan böngésző, amely támogatja az XML-t, és amíg arra várunk, hogy a világ hátralévő része frissítsen az XML-támogatott böngészőkre, addig az XHTML lehetőséget biztosít arra, hogy "jól formázott" dokumentumokat írjunk most, amik az összes böngészőben működnek és visszafelé kompatibilisek a böngészőkkel.

 

Mindenek előtt szükséged lesz a következő dolgok ismeretére:

- HTML nyelv elsajátítása,

- weblapkészítés alapjai.

 

 

Mi is az az XHTML?

 

- Az XHTML mozaikszó, az EXtensible HyperText Markup Language szóösszetételből származik, amely magyarul nagyjából annyit jelent, mint kiterjeszthető hiperszöveg jelölőnyelv.

- Az XHTML a sima HTML-t hivatott "lecserélni".

- Az XHTML majdnem azonos a HTML-el.

- Az XHTML egy szigorúbb, ámde tisztább változata a HTML-nek.

- Az XHTML, a HTML megújulása XML alapokon, amelyet ki lehet fejezni úgy is, hogy az XHTML egy XML dokumentum.

- Az XHTML rendelkezik W3C (World Wide Web Consortium - webes programozási nyelveket meghatározó szervezet) ajánlással.

 

 

Az XHTML, a W3C által ajánlott webes programozási nyelv!

 

2000. január 26-án került be az XHTML, a W3C ajánlásai közé. A W3C úgy definiálja az XHTML-t, mint a HTML legújabb változatát. Az XHTML fokozatosan felváltja a HTML-t.

 

 

Minden új böngésző támogatja az XHTML-t!

 

Az XHTML kompatibilis a HTML 4.01-es változatával, így minden újabb böngésző támogatja azt.

 

 

Érvényesítés:

 

Hogyha a következő képet látod egy weboldalon, akkor biztos lehetsz abban, hogy azt az oldalt érvényes XHTML kód építi fel.