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

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>

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>

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>

Á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

↑ 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

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.)

↑ Honlapkészítés Egyeteme ↑

2.rész - HTML tagok →

[1] 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.

[mj 1]