Honlapkészítés Egyeteme/1.rész - HTML
Mivel nincs kötelezően óraszámban beépítve az egyetemeken a programozási ismeretek, nem tud a tanárok jelentős része programozni, ezért indul a Honlapkészítés Egyeteme sorozat. Az első részben a HTML-t tanuljuk.
A HTML (Hypertext Markup Language) azért nagyon kényelmes választás honlapok készítésére, mivel alapszinten csak „hagyományos” szöveges adatokat tartalmaz. Így nem kell külön értelmező és szerkesztő alkalmazás a HTML-fájl elkészítéséhez, elég egy nagyon primitív szövegszerkesztő is (pl. Jegyzettömb). A szöveg egy része megegyezik a szerkesztett honlapon lévő tartalommal, másik része viszont metaszöveg, azaz megjelenítési információkat tárol a böngésző számára: milyen színű legyen a háttér, a honlap szövege, hol és milyen képek vagy egyéb fájlok helyezkedjenek el, stb. A metaszöveg jellegű részeket jelölőelemeknek is nevezzük, és speciális, zárójelszerű szimbólumok: < és > különítik el a normál szövegrészektől.
A jelölőelemeket tageknek (ejtsd: teg) is hívjuk. A tagek tehát előre definiált, „foglalt” szavak, amik < és > jelek közé vannak zárva, és a megjelenítési információkat tárolják. [mj 1]
pl.: <a href="https://hu.wikinews.org">Kattints ide!</a>
DTD[szerkesztés]
A DTD, vagyis a Document Type Definition az oldal tetején van, a weblap ezzel kezdődik. Ebből kiderül, hogy milyen nyelvet használtak az oldalhoz, és milyen milyen szabályok vagy szabványok szerint (a HTML nyelvnek ugyanis az állandó fejlesztés miatt több változata, szabványa létezik, a régebbi sorszámozásúak akár elavultak is lehetnek és némely böngésző eltérő módon értelmezheti őket, mint a többi). A Wikihírek és a Facebook DTD sora:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Az XHTML 1.0 Strict az XHTML 1.0 legszigorúbb változata. A webböngészőket a DTD szabványkövetésre kényszeríti.
<html> ... </html>[szerkesztés]
A DTD után következk a html szakasz. A <html> taget a </html> zárótag zárja le. XHTML-ben két attribútumot tartalmaz a <html> nyitótag, az xmlns-t, mely a névteret jelenti, a másik a xml:lang, mely a tartalmi szakasz nyelvét jelöli.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu" dir="ltr">
<head> ... </head>[szerkesztés]
A HTML és a továbbfejlesztett XHTML alapvetően két szakaszra osztható. A fejléc a <head> ... </head>, a törzs a <body> ... </body> tagek között található. A fejléc nem jelenik meg látható módon a honlapon. A forráskódban zöld színnel jelölik sokszor. Metaadatokat találunk itt. A keywords az internetes keresők munkáját segíti, a Baidu, a Google, a Sogou, a Guruji.com gyorsabban megtalálják, leindexelik az oldalakat jó kulcsszavakkal. A description a weboldal leírását tartalmazza.
<meta name="keywords" content="" />
<meta name="description" content="" />
<body> ... </body>[szerkesztés]
Általában a törzs kékkel jelölt, a scriptek pirossal. A <div> és a párja, a </div> tag a leggyakrabban használt eleme a törzsnek. Az angol division szóból ered a <div> tag, ami magyarul szakaszt, részt jelent. Mivel az oldal főbb strukturális elemeit tartalmazza, jóval hosszabb, mint a fejlécrész. A <div> nyitótagoknál fontos, hogy szinte kivétel nélkül azonosítóval látják el őket. Ezek az azonosítók az id attribútumok. A <div id="container"> rész sokszor az oldalt teljesen magába foglalja. Az intro bevezető-, a supporintText szöveges-, a linkList hivatkozás szakaszokat tartalmazza. A jól áttekinthető oldalakban a <div id="intro">, <div id="supporintText">, <div id="linkList"> részek beljebb kezdődnek, tagoltak, könnyen átláthatóak. Az intro ismét három <div> szakaszból áll, ezek a következők: pageHeader, quickSummary, preamble.
A tartalmi szakaszban a <h1>, <h2>, <h3> tagekkel formázhatunk szöveget. A bekezdéseknél levő hosszabb szöveget <p> taggal jelöljük.
Megjegyzések[szerkesztés]
- ↑ Az angol tag = vég / lezárás ill. címke szóból, az elnevezésnek nincs köze a magyar tag ’valamiben benne van, valaminek a része’ szóhoz.
Források[szerkesztés]
- Spányik Balázs: Weboldalkészítő suli #2 - (X)HTML-alapok és -struktúra. PC World, 2008. március 27. (Hozzáférés: 2017. augusztus 4.)