Bevezetés
A HTML a Hypertext Markup Language rövidítése. A weboldalak készítésére hozták létre. Mai verziója a HTML 4.01-es, de az XHTML már kiszorítja (de lehet, hogy a HTML 5).
Egy HTML dokumentumot bármilyen szövegszerkesztőben elkészíthetünk, ami képes text-ként (szövegként) menteni, a lényeg az, hogy az állományunk kiterjesztése .html vagy .htm legyen. Természetesen sok WYSIWYG HTML szerkesztővel (Dreamweaver, Sharepoint Designer, stb.) találkozhatunk, ami kényelmesebbé teheti munkánkat, azonban ha profi weblapokat akarunk készíteni, akkor nem kerülhetjük meg a HTML nyelv használatát. Tehát a lényeg az, hogy a HTML dokumentumban írjuk le a weblapunk szerkezetét, valamint ide helyezzük el a megjelenítendő szövegeinket, képeinket, táblázatokat stb. Nagyon fontos, hogy ne a HTML kódban formázzunk, mert egyrészt a szabvány ezt követeli meg, másrészt rengeteg kényelmetlenségtől megóvjuk magunkat (pl.: későbbi módosítások nehézkesek lehetnek).
TAG-ek (címkék)
Az oldal szerkezetét a tag-ek segítségével alakítjuk ki. Minden tag (kivéve az üres tag-eket) egy nyitó és egy záró részből áll. Például a bekezdés tag-je a <p>szöveg</p> páros, ahol a nyitó és a záró elem közötti rész fog egy bekezdést jelenteni. A tag-ek egymásba ágyazhatók, azonban ügyelni kell a megfelelő sorrendre. Tehát helyes a következő:
<div><p>Szöveg</p></div>. Az üres tag-eket a következő formában kell írni az XHTML szerint <tag_neve />, HTML szerint egyszerűen <tag_neve>. Két tag típust különböztetünk meg:
- strukturális elemek, amelyek leírják a tag célját, mint például a <p>
- eszköz elemek, amelyekkel például gombokat, lenyíló listákat hozhatunk létre
HTML állomány részei
- Dokumentum Típus Definíció: itt adjuk meg, hogy milyen dokumentumot írunk (jelen esetben HTML), valamint azt, hogy mely szabványt használjuk. Ez az információ nagyon fontos a böngészőknek, mert ez alapján értelmezik a kódunkat. Részletesen lásd lejjebb
- Fejléc: a <head> </head> közötti rész, ahol technikai és dokumentációs adatokat adhatunk meg. Itt kell megadnuk (és ez kötelező) a dokumentum keretén megjelenő címet, valamint a dokumentum karakterkódolását is.
- Törzs: <body> </body> közötti rész ami a ténylegesen megjelenítendő információkat tartalmazza.
Egy HTML dokumetum tahát a következőképpen néz ki:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A böngésző keretén megjelenő cím</title>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-2">
</head>
<body>
<h1>Főcím</h1>
<p>Bekezdés</p>
</body>
</html>
Forrás: Wikipédia.
Néhány fontos XHTML szabály:
- Minden XHTML tag-et kisbetűvel kell írni
- Minden tag-et le kell zárni. Üres tag esetében, mint például az img, <img /> formában.
- Ne a HTML kódban formázzunk! A HTML arra való, hogy az oldal szerkezetét kialakítsuk, a formázásra a CSS-t kell használni.
Két olyan attribútumot kell megemlíteni, amikkel azonosíthatjuk a tag-eket. Az egyik a class, amivel osztályokba sorolhatjuk az elemeket. Így eltérően formázhatunk például különböző bekezdéseket. Egy dokumentumban természetesen több elemet is besorolhatunk ugyanabba az osztályba.
A másik az id, amivel egyedi azonosítóval láthatjuk el az elemeket. Fontos szabály, hogy az azonosítónek egyedinek kell lennie a dokumentumon belül.
Most pedig következzen a fontosabb tag-ek listája, és rövid magyarázata:
| Tag | Leírás |
|---|---|
| <!--...--> | Megjegyzések beszúrása |
| <!DOCTYPE> | Dokumentumtípus meghatározása |
| <html> | HTML dokumentum |
| <head> | HTML dokumentum fejrésze |
| <meta /> | Metaadatok meghatározása |
| <title> | Böngésző keretén megjelenő cím |
| <link /> | Hivatkozás létrehozása |
| <body> | A dokumentum törzse |
| <p> | Bekezdés |
| <br /> | Sortörés |
| <h1>..<h6> | Címsorok |
| <img /> | Kép beszúrása |
| <map> | Kép területekre bontása |
| <area /> | Klikkelhető terület a map-en belül |
| <a> | Hivatkozás |
| <ul> | Felsorolás |
| <ol> | Számozott felsorolás |
| <li> | A felsorolások elemei |
| <table> | Táblázat |
| <tr> | Táblázat sora |
| <td> | Táblázat cellája |
| <th> | Táblázat kiemelt cellája (fejléc) |
| <col> | Táblázat oszlopa |
| <form> | Űrlap |
| <input /> | Űrlap beviteli eleme |
| <select> | Lenyíló lista |
| <option /> | Lenyíló lista elemei |
| <div> | A dokumentum adott "területe" |
| <span> | Karakterek csoportja |
<!--...-->
A HTML dokumentumba megjegyzéseket szúrhatunk be magunknak, melyek segítik a későbbi kódértelmezést.
Vissza...
<!DOCTYPE>
Itt kell megadnunk, hogy a dokumentumunk mely szabvány szerint van írva. A böngészők ezután ennek megfelelően fogják értelmezni a kódunkat, valamint a validálás is ez alapján történik.
Lehetséges értékek:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Ezen kívül használhatnánk még a frameset-es verziókat is, de ezek használata már nem ajánlott, ezért itt ezzel nem foglalkozok.
A lényegi különbség a Strict és a Transitional változatok között az, hogy a Strict szigorúbb szabályokat követ, mint például nem engedi bizonyos tag-ek használatát.
Vissza...
<html>
A html dokumentum "gyökere". Ez a tag fogja közre a teljes dokumentumot. XHTML esetében a következő formát kell használnunk:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
A html dokumentum "feje". Egyetlen kötelező eleme a <title>. Ezen kívül tartalmazhat meta elemeket, szkripteket, valamint ide írhatjuk, hogy a böngésző hol találja a külső stíluslapokat.
Vissza...
<meta />
Metaadat: információ az adatokról. Ennek megfelelően a meta tag-et arra használjuk, hogy információt adjon oldalunkról. Itt adhatjuk meg a kulcsszavakat, szerzői információkat, rövid tartalmi leírást.
<head> <meta name="description" content="XHTML elemek" /> <meta name="keywords" content="HTML,XHTML" /> <meta name="author" content="Kiss Márk" /> </head>
Mint látható a name attribútum adja meg az információ típusát, a content pedig az értékét. Egy másik fontos attribútum a http-equiv. Néhány lehetséges érték:
- Content-Type: tartalom típusa, pl.:text/html, illetve a karakter kódolás.
- Date: oldal készítésének dátuma
- Last-Modified:Utolsó módosítás időpontja
- Refresh: megad egy időpontot, amikor a lap automatikusan frissül (használata nem ajánlott)
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/> <meta name="Date" content="2008.05.05." /> <meta name="Last-Modified" content="2009.06.05" /> </head>
<title>
A böngésző keretén megjelő címet adhatjuk meg. Ennek az elemnek kötelező szerepelni a dokumentum fejrészében.
Vissza...
<link />
A html dokumentum és egy külső állomány közötti kapcsolatot definiál. Ezt az elemet kell használnunk például külső stíluslapok használatakor.
<link rel="stylesheet" type="text/css" href="styles.css" />
<body>
A html dokumentum tartalmi részét jelzi. Gyakorlatilag a body közötti rész jelenik meg az oldalunkon.
Vissza...
<h1>..<h6>
Bekezdés szintű elemek, azonben ezek segítségével logikailag is részekre tagolhatjuk dokumentumunkat. Fontos, hogy ne formázási célra használjuk a címsorokat, hanem logikai kiemelésre. Például a h1-t használhatjuk a főcím meghatározására, a többi elemet pedig, mint alcímeket.
Vissza...
<img />
Kép beszúrása. Két kötelező attribútuma van: src, meghatározza a beszúrni kívánt képet, alt, a kép leírását kell megadni.
<img src="kep.jpg" alt="Leírás" />
<map>
Egy képen meghatároz egy térképet, amit az area elemek osztanak területekre.
Vissza...
<area />
A térképen a területeket határozza meg. Attribútumai:
- shape: a terület alakja. Lehetséges értékei: rect (négyszög), circle (kör), poly (sokszög)
- coord: a terület koordinátái. rect esetén a bal felső és a jobb alsó sarkok, kör esetén a középpont és a sugár, sokszög esetén a csúcsok
- href: hivatkozás kattintáskor
- alt: leírás
<img src="kep.jpg" alt="Kép" usemap="#terkep" /> <map name="terkep"> <area shape="circle" coords="55,76,25" href="kor.html" alt="kör" /> <area shape="rect" coords="135,90,237,129" href="teglalap.html" alt="téglalap" /> <area shape="poly" coords="101,153,64,194,134,205,157,186,125,170,105,178" href="sokszog.html" alt="sokszög" /> </map>
<a>
Hivatkozást készíthetünk más dokumentumra, vagy az oldalon belül. Mindkét esetben a href attribútumot kell használni, az egyetlen különbség, hogy oldalon belüli hivatkozáskor a "#" jelet kell használnunk, valamint az oldalon léteznie kell egy name vagy id paraméterrel azonosított elemnek. Külső hivatkozás:
<a href="http://www.valami.hu">Ide kattintva nyílik meg az oldal.</a>
Oldalon belüli hivatkozás (feltételezve, hogy van "vege" nevű elemünk):
<a href="#vege">Ide kattintva a "vege"-re ugrik a lap.</a>
<ul>
Felsorolást határoz meg, mégpedig nem sorszámozott felsorolást. A felsorolás egyes elemeit a <li> tag-ek határozzák meg.
Vissza...
<ol>
Számozott felsorolás. A felsorolás egyes elemeit a <li> tag-ek határozzák meg. Természetesen kombinálhatjuk a felsorolások típusait, így többszintű felsorolásokat is létrehozhatunk.
<ol> <li>Levesek <ul> <li>Meggyleves</li> <li>Húsleves</li> <li>Gombaleves</li> </ul> </li> <li>Főételek <ul> <li>Rántott szelet</li> <li>Kefirben párolt ponty</li> <li>Hawai csirkemell</li> </ul> </li> </ol>
<table>, <tr>, <th>, <td>, <col>
A <table> táblázatot határoz meg. A táblázat elemei a sor (<tr>) és a cella (<td>). Létezik egy speciális cella is a <th>, ami csak formázásban különbözik a normál cellától, általában táblázat első sorában, vagy oszlopában használatos. A <col> elemet akkor használjuk, ha az oszlopokat eltérően akarjuk egymástól formázni. A <td> elemnek van két nagyon fontos attribútuma a colspan és a rowspan. Ezek segítségével cellaegyesítést valósíthatunk meg. Könnyen megértjük a dolgot, ha megnézzük a következő példát:
<table border="1"> <tr> <th rowspan="2">Név</th> <th colspan="2">Lakcím</th> <th rowspan="2">Telefon</th> </tr> <tr> <th>Város</th> <th>utca, hsz.</th> </tr> <tr> <td>Nemka Kálmán</td> <td>Csajágaröcsöge</td> <td>Rövid u. 1</td> <td>06/90/111-1111</td> </tr> <tr> <td>Vég Béla</td> <td>Kukutyin</td> <td>Zab u. 123</td> <td>06/91/222-1111</td> </tr> </table>
Megjegyzés: a <table> elemben szereplő border attribútum jelen esetben azért kell, mert egyébként nem jelenít meg szegélyt, így nem látható a táblázatos elrendezés. Elkészült weblap esetében természetesen ezt is a stíluslapon kell megadni.
Vissza...
<form>
Űrlapot definiál. Az űrlapokat például Javascripttel vagy PHP-vel tudjuk feldolgozni. Az űrlapokon elhelyezhetünk különböző beviteli elemeket, mint szövegmező, gombok, jelölőnégyzet, stb.
Vissza...
<input />
Űrlapon beviteli elemet definiál. A type attribútuma adja meg, a bevitel típusát:
- text: szövegmező
- button: gomb, amit llegtöbbször Javascript aktiválására használunk
- submit: megjelenését tekintve ez is gomb, de működésében eltér a button-tól. A submit elküldi a szervernek az űrlap adatait.
- reset: gombként jelenik meg, alaphelyzetbe állítja az űrlap tartalmát
- checkbox: jelölőnégyzet
- radio: rádiógomb
- password: jelszó bevitelére alkalmas beviteli mező
Íme egy példa, amiben a gombok viselkedését még nem mutatom be. Ezeket megtalálod a PHP és Javascript fejezetekben.
<form> <p>Szöveg:<input type="text" name="szoveg" value="alapértelmezett szöveg"/></p> <p>Jelszó:<input type="password" name="jelszo" /></p> <p>Jelölőnégyzet:<br /> pogácsa <input type="checkbox" name="etel[]" value="pogácsa" /><br /> palacsinta <input type="checkbox" name="etel[]" value="palacsinta" /><br /> sajt <input type="checkbox" name="etel[]" value="sajt" /><br /> </p> <p>Rádiógomb - első csoport:<br /> kék <input type="radio" name="szin" value="kek" /><br /> zöld <input type="radio" name="szin" value="zold" /><br /> piros <input type="radio" name="szin" value="piros" /><br /> </p> <p>Rádiógomb - második csoport:<br /> sötét <input type="radio" name="arny" value="sotet" /><br /> világos <input type="radio" name="arny" value="vilagos" /><br /> </p> <p><input type="button" value="Button" onclick="esemeny()" /></p> <p><input type="submit" value="Submit" /></p> <p><input type="reset" value="Törlés" /></p> </form>
Két fontos attribútumot kell még megemlíteni. Az egyik a name tulajdonság, amivel azonosítjuk a beviteli elemet a feldolgozó kódban, a másik a value, ami az elem értékét tárolja (gombok esetében a gombon megjelenő szöveg).
Rádiógombok esetén nagyon fontos, hogy az egy csoportba tartozó elemeknek azonos nevet adjunk, így érhetjük el, hogy egy csoportból csak egy elemet lehessen kiválasztani.
Jelölőnégyzetek használatakor pedig a [] zárójelek a tömböt jelentik, de erről majd később...
Vissza...
<select>
Lenyíló listát definiál. Elemeit a <option> tag-el adjuk meg. Két fontos attribútuma a multiple (többszörös kiválasztást tesz lehetővé) és a size (a megjelenített elemek száma).
<form> <select size="3" multiple="multiple"> <option value="VW">Volkswagen</option> <option value="Skoda">Skoda</option> <option value="Audi">Audi</option> <option value="Seat">Seat</option> </select> </form>
<div>
A dokumentumban lévő elemeket csoportosíthatjuk ezzel az elemmel. Leginkább formázáskor kap szerepet.
Vissza...
<span>
A dokumentumban lévő karakterszintű elemeket csoportosíthatjuk. Leginkább formázáskor kap szerepet.
Vissza...