Felépítés, szerkezet

Szeretnél az ünnepek alatt is gyakorolni? Vár az Easter Bug Hunt játékunk! Csatlakozz, és keresd meg az összes hibát - akár még jutalom is ütheti a markod!

Irány a játék

A weboldalak HTML tartalmai általában .html, vagy .html kiterjesztésű fájlokban találhatók meg. A weboldalakk kezdőlapját általában az index.html vagy index.htm fájl tartalmazza. Ezek egyszerű szövegfájlok, ha tehát csak vetni szeretnénk rájuk egy-egy pillantást, ezt könnyen megtehetjük a Windows beépített Jegyzettömb alkalmazásával, vagy Linuxon például a nano szövegszerkesztő eszközzel, esetleg ChromeOS-en a Text alkalmazással.

Ha azonban komolyabban foglalkozni szeretnénk webfejlesztéssel, érdemesebb egy jobban felszerelt kódszerkesztő program után néznünk. Számtalan remek kódszerkesztő van, amelyek segíteni tudnak a HTML kódok szerkesztésében, például a helyes szintaxis kiemelésével, vagy automatikus szövegkiegészítéssel. Az egyik legnépszerűbb eszköz mostanában az ingyenesen elérhető, érettségin is használható VS Code - noha érdemes megjegyezni, hogy gyengébb teljesítményű gépeken nem feltétlen ajánljuk a használatát a nagyobb erőforrásigénye miatt.

Jó alternatívája lehet azonban a VS Code-nak például a Notepad++, ami ugyan valamivel kevesebb funkcióval rendelkezik, de cserébe villámgyors, és viszonylag kevés erőforrást használ. További megfontolandó opció lehet a SublimeText, valamint a kifejezetten webfejlesztőknek szánt Brackets.

A HTML elemek

A HTML alapvetően nem különbözteti meg a kis- és a nagybetűket. Ezen az oldalon a tageket és tulajdonságokat kis betűkkel írjuk, de nagybetűkkel is ugyanúgy működnek.

A HTML fájlok legalapvetőbb szerkezeti egységei az elemek. Egy egyszerű HTML elem egy nyitó tagből, egy záró tagből, valamint a közötte lévő, esetleges tartalomból áll, és az alábbi módon épül fel: <h1> Főcím </h1>

Minden elem tartalmaz egy nyitó taget, jelen példában ez a <h1> rész. A kacsacsőrök közötti szöveg határozza meg, hogy milyen típusú elemről beszélünk, ez tehát jelenleg egy h1 elem. Ezt követi az elem tartalma, ami jelenleg a Főcím felirat, majd ezt követi az elem végén a záró tag, ami jelenleg a </h1> rész. Ebben megtaláljuk ismét a tag típusát, előtte egy per jellel.

Ezt a mintát követve csomó féle taget létrehozhatunk, nézzünk pár példát:

<strong> fontos vagyok </strong>
<h3> második fejezet </h3>
<footer> Frissítve: 2023 </footer>

Előfordulhat, hogy egy-egy elemnek a típusán kívül további tulajdonságokat is meg szeretnénk adni. Ez esetben ezeket a nyitó tagben, a tag típusa után tehetjük meg, itt egyszerűen megadjuk a tulajdonság nevét, egy egyenlőségjelet, majd a tulajdonság értékét idézőjelek közt. Egy tag több tulajdonságot is kaphat, például így: <div id="lablec-bal" class="oszlop">Tartalom...</div>.

Hogy melyik tag milyen tulajdonságokkal rendelkezhet, arról részletesebben a későbbiekben írunk.

Néha olyan tagek is előfordulnak, amelyek egyáltalán nem rendelkeznek tartalommal, csak tulajdonságokkal, vagy esetleg azokkal sem. Ezek kezelésére több lehetőségünk is van. Az egyik lehetőség, hogy a taget még a nyitó tag végén, egy per jellel lezárjuk, például így: <img src="alma.jpg" />, ezzel tulajdonképpen egybeépítve a nyitó és a záró taget. A másik lehetőség, hogy egyszerűen a záró perjelet, és a záró taget is elhagyjuk teljesen, és csak a nyitótaget írjuk ki, például így: <img rc="korte.jpg">. Bár más-más helyeken más-más megoldások mellett voksolnak, a valóságban mindkét lehetőség elterjedt és használatos.

A HTML fájlok tehát végsősorban HTML elemek egymásba ágyazásából, egymáson belül történő elhelyezéséből épülnek fel. A különféle elemek szerepével és feladatával foglalkozik elsősorban ez a HTML tananyag.

A HTML fájlok felépítése

A HTML fájlok működését nem befolyásolja az, hogy a fájl egyes sorai elején mekkora a behúzás, a felesleges szóközök nem fognak megjelenni a dokumentumban. Érdemes lehet tehát az egymáson belüli elemeket megfelelő behúzás alkalmazásával tagolni, így a kódunk átláthatóbb lesz.

Most, hogy nagyjából felismerjük a HTML-ben megtalálható elemeket, nézzük meg, miként épül fel egy általános HTML fájl. Minden szabványos HTML dokumentum tartalmaz egy DOCTYPE megjelölést, valamint egy html, valamint abban egy head, és egy body elemet, ez tehát a dokumentumunk alap szerkezete:

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>

    </body>
</html>

A két fő szakasz, a head, valamint a body szerepével a következő fejezetekben ismerkedünk meg.