A HTML nyelv alapjai

Átírás

1 A HTML dokumentum felépítése A HTML nyelv alapjai Minden HTML dokumentum ún. tagokból épül fel. Ezek formája <tag>. A legtöbb tagnak létezik kezdő és záró párja is. Zárótag alakja: < tag>. A kettőt együtt HTML elemnek is nevezzük. Néhány tagnak nincs záró párja. Ezekre később térünk ki. A böngésző a tagokat mint utasításokat értelmezi, és ennek alapján tudja, hogyan jelenítse meg a weblapot. Az angol nyelvet ismerők megfigyelhetik, hogy a HTML tagok valójában angol szavak, rövidítések. A HTML dokumentumoknak van néhány kulcstagja, amelyet minden ilyen weblapnak tartalmaznia kell. Ezek a következők: html, head, title, body. <html> elem < html> Weblapunk forráskódját a <html> és a < html> tagok közé kell írnunk. <head> elem < head> A head elem különböző információkat tartalmazhat a weblapról. A weblapon közvetlenül nem jelenik meg. Ide kell elhelyeznünk például a title elemet, a meta tagokat és stílusokat is itt definiálhatunk, esetleg scripteketis helyezhetünk ide (ezekkel később foglalkozunk). <title> elem < title> A title elemet a <head> és < head> tagok közé kell elhelyeznünk. A kezdő tag és a zárótag közé írjuk a weblapunk címét, ami a címsorban fog megjelenni. <body> elem < body> Ez a weblapunk törzse. Amit ezek közé a tagok közé írunk megjelenik a weblapon is. Vágjunk is bele és hozzuk létre első weblapunkat! Íme egy egyszerű weboldal forráskódja: <html> <head> <title>első weblapom</title> </head> <body> <p> Ez az én első weblapom! </p> </body> </html> A fenti kódot egy egyszerű szövegszerkesztőbe is beírhatjuk pl. Notepadbe, majd mentsük.html kiterjesztéssel. Ezzel létre is hoztuk első weblapunkat. Megnyitás előtt ellenőrizzük, le hogy a fájl kiterjesztése valóban html, esetleg.htm. Amikor megnyitjuk a fájlt, már az

2 alapértelmezett böngészőnkben fog kinyílni. Itt már csak szöveget fogunk látni, a "< >" jelek és a közéjük írt szöveg itt nem lesz látható. Megjegyzés: Ahhoz, hogy a böngészőnkben visszanézhessük a forráskódot, a böngészőkben általában általában az egér jobb gombjára kattintva, kinyíló menüben találjuk meg az erre vonatkozó menüpontot. Bekezdések és sortörés Ha a <body> utáni részbe szöveget írunk be, az meg fog jelenni a képernyőn. Ahhoz viszont, hogy bekezdésekbe oszthassunk egy szöveget újabb tagokat kell használnunk. Erre szolgál a <p> 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 <br > tag szolgál, melynek nincs záró párja. HTML nyelven a <br> 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 <h1> és a < h2> utasításpárral kell közrezárni. A második szintet a <h2> é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, <body> ugyanaz mint a <BODY> (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 <br> 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: <tag attribútomnév= "attribútumérték">. 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

3 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: <p id= "doltbetusbekezdés"> Dőlt betűs bekezdés < p> <p id= "alahuzottbekezdés"> 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. <input type="text" name="szovegdoboz" /> 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. <input type="text" title="ez egy feliratozott szövegdoboz" > 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. <p align="left">balra igazított bekezdés<p > <p align="center">középre igazított bekezdés<p > <p align="right">jobbra igazított bekezdés<p > 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)

4 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 <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. 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 <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. 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 <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. 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> 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 <a name="jelző"> és a </a> utasítások határolják. Letöltő hivatkozások Ha ilyen alakban adunk meg egy linket <a href="protokoll://elérési_út/fájlnév.kit">letölthető állomány</a>, é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. címre mutató link címre mutató linket is elhelyezhetünk a weboldalunkon, amelyre kattintva a felhasználó üzenetet küldhet nekünk. Alakja: <a href="mailto:xy@xy.com?subject=valami">xy@xy.com</a> Megjegyzés:

5 Az <a here = "...">, </a> 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 <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. <img src="half-dome-in-national-park_w400_300.jpg" alt="half dome in national park" width = "400" height = "300"/> 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 <table> tag jelzi. A table elemen belül definiáljuk a sorokat - <tr> és ezeken belül az oszlopokat - <td>. A <th> 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.

6 <table border="1"> <th>oszlop 1</th> <th>oszlop 2</th> <tr><td>1. sor 1. oszlop</td><td>1. sor 2. oszlop</td></tr> <tr><td>2. sor 1. oszlop</td><td>2. sor 2. oszlop</td></tr> </table> 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ó. <table border="1"> <tr> <th>1. oszlop</th> <th>2. oszlop</th> <th>3. oszlop</th> </tr> <tr><td rowspan="2">1. oszlop 1. cella</td> <td>1. oszlop 2. cella</td><td>1. sor 3. cella</td></tr> <tr><td>2. sor 2. cella</td><td>2. sor 3. cella</td></tr> <tr><td colspan="3">3. sor 1. cella</td></tr> </table> Eredmény: 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 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: <table border="1" cellspacing="10" <tr> <th>1. oszlop</th> <th>2. oszlop</th> </tr> <tr><td>1. sor 1. cella</td><td>1. sor 2. cella</td></tr> <tr><td>2. sor 1. cella</td><td>2. sor 2. cella</td></tr> </table>

7 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: <table border="1" cellpadding="10" <tr> <th>1. oszlop</th> <th>2. oszlop</th> </tr> <tr><td>1. sor 1. cella</td><td>1. sor 2. cella</td></tr> <tr><td>2. sor 1. cella</td><td>2. sor 2. cella</td></tr> </table> 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 <ol> tag egy számozott listát kezd, az <ul> számozatlan listát, a <dl>-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 <ol>, záró tagja az </ol>. A számozott listák sorai az <li> utasítással kezdődnek. Ennek a záró párja a </li>. <ol> <li>első sor</li> <li>második sor</li> <li>harmadik sor</li> </ol> Eredmény: Első sor Második sor Harmadik sor

8 Ha nem az 1.-vel szeretnék kezdeni a listánk számozását, használjuk a start attribútumot! <ol start = "3"> <li>harmadik elem</li> <li>negyedik elem</li> <li>ötödik elem</li> </ol> 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: <ol type="a"> <ol type="a"> <ol type="i"> <ol type="i"> Számozatlan lista A számozatlan lista kezdő tagja az <ol>, záró tagja az </ol>. A számozatlan listák sorai - a számozott listákhoz hasonlóan - <li> utasítással kezdődnek és </li> taggal végződnek. <ul> <li>tej</li> <li>vaj</li> <li>jogurt</li> </ul> A számozatlan listának szintén vannak különböző változatai: <ul type="square"> <ul type="disc"> <ul type="circle"> type="square" type="disc" type="circle" Leíró lista A leíró listát a <dl> és a </dl> utasítások közé kell zárni. A listák egyes alkotóelemet a <dt> és </dt> tagok jelzik, az ehhez tartozó leírást pedig a <dd> és </dd> tagpár határozza meg. <dl> <dt><b>html</b></dt> <dd>weblapok struktúráját leíró programozási nyelv.</dd>

9 <dt><b>http</b></dt> <dd>az internet egyik legfontosabb protokollja.</dd> </dt> </dl> 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 (<head> 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. <head> <meta name="revised" content="esse Zsolt, 17/2/2011" /> </head> 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,

10 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 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 "> <meta http-equiv="content-type" content="text/html; charset=utf-8"> HTML5 forma: <meta charset="iso "> <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 <html> 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " HTML5 doctype <!DOCTYPE html;> XHTML doctype-k Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

11 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: