Ez az én első weblapom!

tag és ennek zárópárja a <⁄p>. E kettő közé kell írnunk a bekezdésünket. Minden bekezdés új sorban kezdődik. Bekezdésen belüli sortörésre a
tag szolgál, melynek nincs záró párja. HTML nyelven a
forma is működőképes, XHTML-ben a lezárt forma kötelező. Címek A HTML dokumentumban definiálhatunk címeket, ill. alcímeket hat szint mélységig. A legfelső szintű címet a

és a <⁄h2> utasításpárral kell közrezárni. A második szintet a

é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. HTML általános Szintaktika HTML nyelvnek van egy pár alapelve, melyet jó megemlíteni: Betűk mérete nem lényeges, ugyanaz mint a (de kompatibilitási okokból ajánlott a kisbetű használata.) Címekben és fájlnevekben lényeges a betű mérete, nem lehet itt sem betűköz sem magyar ékezetek Tagokat, melyeket böngésző nem ismeri fel, mintha nem léteznének Tag elején nem lehet betűköz, például
rosszul van. két betűköz egymás után (vagy több) ugyanolyan mintha csak egy lenne sor vége a kódba úgy értelmezhető mint egy betűközt Az attribútum neveket mindig jó idéző jelekbe rakni, de nem teljesen szükséges, ha belűl nincs betűköz © típusú szimbólumokat forráskódba &valami; szólánccal írunk Megjegyzés a forráskódba jelek közt beillesztjük Attribútumok Minden kezdőtagnak lehetnek ún. attribútumai. Ezek további információkat határoznak meg az elemről. Formája: . Vannak általános attribútumok és csak bizonyos tagoknál definiált attribútumok. Ismerkedjünk meg először az általánosan használható attribútumokkal: class és id attribútumok

Ezek az attribútumok az elemek stíluslapokkal (CSS) való formázásánál és a scripteknél játszanak szerepet. Segítségükkel csoportosítani ill. egyedileg azonosítani tudjuk a tagokat, de ezt majd akkor fogjuk igazán megérteni, amikor megismerkedünk a stíluslapok fogalmával. Egy példa:

Dőlt betűs bekezdés <⁄p>

Aláhúzott bekezdés <⁄p> name attribútum Name attribútum definiálásával a script nyelvekben (mint pl. Javascript, ASP, PHP) egy változót hozunk létre. Leggyakrabban űrlapelemeknél találkozhatunk velük. title attribútum Gyakran elfeledkeznek erről a hasznos attribútumról. Egy felugró szöveget helyezünk el vele az elem fölé, ami akkor jelenik meg, amikor fölé visszük a kurzort. align attribútum Horizontális igazítást tesz lehetővé. Főként szövegre szokás alkalmazni. 5 féle értéke lehet: left, center, right, justify, inherit.

Balra igazított bekezdés

Középre igazított bekezdés

Jobbra igazított bekezdés Alapértelmezett attribútum Sok tagnak alapértelmezett attribútumai is vannak. Ez azt jelenti, hogy ha nem adunk meg az adott elemnek attribútumokat, akkor az elem bizonyos előre definiált attribútumokat kap. Például egy bekezdés szövege mindig balra lesz igazítva, ha mi nem adunk meg neki más értéket. Ahogy egyre többet tanulunk és kódolunk, egyre több ilyen alapértelmezett értéket fogunk megismerni. Gyakran használt attribútumok Attribútum Érték Funkció align right, left, center Vízszintes szövegigazítás valign top, middle, bottom Függőlegesen igazít egy HTML elemen belül. bgcolor számformátumú, hexadecimális, RGB értékek Háttérszín background URL Háttérkép. id Fejlesztő adja meg Egyedi azonosító - stíluslapoknál. class Fejlesztő adja meg Stílusosztályt definiál. width Számérték Táblázatok, képek, táblázat mezők szélessége. height Számérték Táblázatok, képek, táblázat mezők magassága. title Fejlesztő adja meg Címke - "Pop-up" szöveg. Kereszthivatkozások - linkek 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: Dokumentumon belüli hivatkozás 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 utasításnak a dokumentumban való elhelyezése jelzi. A hivatkozást 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 és a utasítások kell, hogy határolják. Egy másik dokumentumra mutató hivatkozás A legtöbb esetben a egy hivatkozás egy másik fájlra/dokumentumra mutat. A hivatkozás kezdetét ekkor a utasítás jelzi, a hivatkozást ekkor is 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. Egy másik dokumentumon belüli helyre mutató hivatkozás 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 utasítás jelzi, és a hivatkozást szintén 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 és a utasítások határolják. 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 utasítás jelzi, és a hivatkozást szintén a tag 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 és a utasítások határolják. Letöltő hivatkozások Ha ilyen alakban adunk meg egy linket Letölthető állomány, és a böngésző nem tudja megjeleníteni a fájltípust, a böngésző automatikusan felajánlja, hogy letöltsük a fájlt. E-mail címre mutató link E-mail címre mutató linket is elhelyezhetünk a weboldalunkon, amelyre kattintva a felhasználó üzenetet küldhet nekünk. Alakja: [email protected] Megjegyzés:

Az , utasításpár képet is közre foghat, ilyenkor a kép szegéllyel jelenik meg. Ezt letilthatjuk például a stíluslapok segítségével a border: none; utasítással. Erről bővebben a CSS részben foglalkozunk. Target attribútum Ez az attribútum határozza meg, hogy a link a jelenlegi ablakban nyíljon meg vagy egy új ablakban. target= "_blank" Egy új ablakban/lapon nyitja meg az oldalat. "_self" A jelenlegi ablakban nyitja meg az oldalat. "_parent" Abban a frameben nyitja meg az oldalat, ahol a link található. "_top" Abban az ablakban nyitja meg az oldalat, ahol elhelyezkedik a link, a frameket felülírva. Képek a HTML weboldalon A HTML dokumentumban képeket is elhelyezhetünk. Az > 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: . 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. Példa: Megjegyzés: A weben használatos képformátumok: .jpg, .png és .gif. Táblázatok Természetesen weboldalunkba táblázatokat is illeszthetünk. egy táblázat kezdetét a

tag jelzi. A table elemen belül definiáljuk a sorokat - és ezeken belül az oszlopokat

. A

taggal a táblázaton belül címeket definiálhatunk. Ezek a címek az oszlopok felett általában félkövér betűkkel jelennek meg. Példa: Oszlop 1 Oszlop 2 1. sor 1. oszlop 1. sor 2. oszlop 2. sor 1. oszlop 2. sor 2. oszlop Eredmény: Oszlop 1 Oszlop 2 1. sor 1. oszlop 1. sor 2. oszlop 2. sor 1. oszlop 2. sor 12. oszlop Sorok és oszlopok egyesítése A HTML nyelv lehetőséget kínál sorok és oszlopok egyesítésére is. Erre a rowspan és colspan használható. Példa: 1. oszlop 2. oszlop 3. oszlop 1. oszlop 1. cella 1. oszlop 2. cella 1. sor 3. cella 2. sor 2. cella 2. sor 3. cella 3. sor 1. cella Eredmény: 1. oszlop 2. oszlop 3. oszlop 1. oszlop 1. cella 1. oszlop 2. cella 2. sor 2. cella 2. sor 3. cella 3. sor 1. cella 1. sor 3. cella cellspacing és cellpadding attribútumok A cellspacing-gel a keret vastagságát, a cellpadding-gal pedig a cellák keretek közötti távolságot adjuk meg. Példa cellspacing-ra: 1. oszlop 2. oszlop 1. sor 1. cella 1. sor 2. cella 2. sor 1. cella 2. sor 2. cella Eredmény: 1. oszlop 2. oszlop 1. sor 1. cella 1. sor 2. cella 2. sor 1. cella 2. sor 2. cella Példa cellpadding-ra: 1. oszlop 2. oszlop 1. sor 1. cella 1. sor 2. cella 2. sor 1. cella 2. sor 2. cella Eredmény: 1. oszlop 2. oszlop 1. sor 1. cella 1. sor 2. cella 2. sor 1. cella 2. sor 2. cella Megjegyzés: A megadott számértéket a böngésző pixelekként értelmezi - ugyanez vonatkozik a legtöbb számértékkel megadott attribútumra is. Pixelek helyett százalékokban is megadhatjuk ezeket az értékeket. Ilyenkor "%" jelet írunk a szám után. Arra, hogy ezt a százalékot miből kell számítani nincs általános szabály. Egyes esetekben az alapértelmezett méretből, máskor a szülő elemből (az adott tagot tartalmazó elemből). Listák a weboldalon A HTML nyelvben 3 különböző listatípus létezik. Az tag egy számozott listát kezd, az számozatlan listát, a -t leíró listákra használjuk, ahol az egyes lista elemekhez tartozhat egy hosszabb leírás is. Számozott lista A számozott lista kezdő tagja az , záró tagja az . A számozott listák sorai az utasítással kezdődnek. Ennek a záró párja a . Példa: Első sor Második sor Harmadik sor Eredmény: Első sor Második sor Harmadik sor Ha nem az 1.-vel szeretnék kezdeni a listánk számozását, használjuk a start attribútumot! Példa: Harmadik elem Negyedik elem Ötödik elem Eredmény: Harmadik elem Negyedik elem Ötödik elem A számozott listának további fajtái is vannak. Arab számok helyett használhatunk római számokat is vagy az ABC betűit - mindkét esetben megkülönböztetünk kis betűs és nagy betűs változatot is: Számozatlan lista A számozatlan lista kezdő tagja az , záró tagja az . A számozatlan listák sorai - a számozott listákhoz hasonlóan - utasítással kezdődnek és taggal végződnek. Példa: Tej Vaj Jogurt A számozatlan listának szintén vannak különböző változatai: type="square" type="disc" type="circle" Leíró lista A leíró listát a és a utasítások közé kell zárni. A listák egyes alkotóelemet a és tagok jelzik, az ehhez tartozó leírást pedig a és tagpár határozza meg. Példa: HTML Weblapok struktúráját leíró programozási nyelv. HTTP Az internet egyik legfontosabb protokollja. HTML Weblapok struktúráját leíró programozási nyelv. HTTP Az internet egyik legfontosabb protokollja. Meta tagok A meta tagok információkat szolgáltatnak a kereső robotok (pl. Google, Yahoo...)számára, így könnyebben megtalálható lesz az oldalunk. Ezeket a meta tagokat a felhasználók nem látják. Régebben ez volt az egyetlen módszer, hogy a kereső robotok észrevegyék a weblapot. Ma már ez így nem igaz, de még mindig jó, ha használjuk őket. Ezeket a tagokat az oldalunk fejrészébe ( utáni rész) kell elhelyeznünk. Ez egy páratlan tag. keyword meta tag A meta tag content attribútumába kell elhelyeznünk azokat a kulcsszavakat és kifejezéseket, amelyekről úgy gondoljuk, hogy valaki ezek alapján fog rákeresni az oldalunkra. A name attribútum határozza meg, hogy milyen meta tagról van szó. Az egyes kulcsszavakat vesszővel kell elválasztani. Ennek az oldalnak például ilyen keywords metatagja lehetne: <meta name="keywords" content="html,html tanfolyam,html oktatás"> description meta tag Ide 1-2 mondatos leírást írhatunk a weblapról. autor meta tag Az autor meta tag megadásával a nevünk alapján is megtalálhatóak leszünk a keresőprogramok számára. <meta name="author" content="Esse Zsolt" /> revised meta tag Ide azt írjuk le, mikor módosítottuk, frissítettük utoljára az oldalat. <meta name="revised" content="Esse Zsolt, 17/2/2011" /> refresh meta tag Előfordulhat olyan eset is, hogy valamilyen okból kifolyólag le kell cserélni az aktuálisan megjelenített oldalat egy másikra vagy bizonyos időközönként frissíteni kell. Erre szolgál a refresh meta tag. Alakja a követkető: <meta http-equiv="refresh" content="3,http://oldal_neve.com"> Karakterkódolás Ez a tag azt jelzi a böngésző számára, hogy milyen karakterkészletet használjon. Ez garantálja, hogy ékezetes karaktereink helyesen jelenjenek meg. Közép-európai betűk használatához pl. az iso-8859-2 vagy az általánosabb utf-8-as jelzésű karakterkészletet kell alkalmazni. HTML4.01 forma: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> HTML5 forma: <meta charset="iso-8859-2"> <meta charset="UTF-8"> Doctype Azt, hogy a weblapunkat a HTML nyelv melyik változatában készítettük el, a doctype taggal adjuk meg. A elem elé kell beszúrnunk. Ne feledkezzünk meg róla, mert ha kihagyjuk, előfordulhat, hogy helytelenül jeleníti meg a felhasználó böngészője az oldalat! A legismertebb doctype-k a következők: HTML4.01 doctype-k Strict Transitional HTML5 doctype XHTML doctype-k Strict Transitional Frameset A weblap tartalmának elrendezése Weblapunk tartalmát, valamilyen módon el kell rendeznünk az oldalon belül, hiszen nem szép látvány ha mindent egymás alá rakunk. Régebben ezt úgy oldották meg, hogy az oldalat ún. ekre osztották, egy időben pedig a táblázatokkal való elrendezés volt a "divat". Ma már inkább a div tagokkal való felosztás javasolt. Ezek önmagukban csak logikailag tagolják az oldalat, a formázást stílusok használatával kell megoldanunk. Íme egy klasszikus weblap elrendezés: × Report "A HTML nyelv alapjai" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close