Ismerkedés a HTML alapjaival

Szerző:

Dániel Erdudac

Mire lesz szükséged?

A professzionális webfejlesztők ugyan számos programot és alkalmazást használnak, de az első lépésekhez csak egy-két dologra lesz szükséged: számítógépre, egy szövegszerkesztőre és néhány modern böngészőre a kód teszteléséhez.

Szövegszerkesztőd valószínűleg már van is — a Windows operációs rendszer tartalmazza a Notepad, a macOS pedig a TextEdit nevű szoftvert. Mindkettő alkalmazható a webfejlesztés során, de ha egy kicsit komolyabban szeretnél foglalkozni a dologgal, a Brackets ingyenes szerkesztőt javasoljuk, mely az előnézetre is lehetőséget nyújt.

Ami a böngészőket illeti, a számítógépeden valószínűleg már legalább egy található — Firefox, Chrome, Opera, Safari, Internet Explorer vagy Microsoft Edge. Javasoljuk, hogy legalább két böngésződ legyen a kódok kipróbálására.

Mi a HTML?

A HTML nem egy programnyelv; egy olyan jelölőnyelvről van szó, amely „megmondja” a böngészőnek, hogyan építse fel a weboldalt. A HTML elemekből és címkékből áll, melyek körülhatárolják a tartalmat, és meghatározzák, hogy milyen formában fog megjelenni — új bekezdésben, linkként, dőlt betűkkel stb.

A HTML-elem anatómiája

Vegyünk egy példát a HTML-elemre:

<p>A macskám fekete.</p>

Ez egy bekezdés, melyet a <p></p> címkék jelölnek, az alapelemei pedig a következők:

Nyitó címke: Az elem nevéből áll (példánkban ez a „p”), melyet nyitó és záró, kúpos zárójelek vesznek körül. A nyitó címke jelzi, hol kezdődik az elem érvényessége — a mi példánkban: hol indul a bekezdés.
Záró címke: A nyitó címkéhez hasonló, de az elem neve előtt egy / jel is van. A záró címke határozza meg az elem végét — kihagyása gyakori hiba a kezdőknél.
Tartalom: az elem tartalma, mely esetünkben csak szöveg.
Elem: a nyitó címke, a záró címke és a tartalom összessége.
Attribútumok: Az elemeknek attribútumaik is lehetnek, melyek ekképp festenek:

<p class=”editor-note”>A macskám fekete.</p>

A class=”editor-note” az attribútum, mely információkat hordoz az elemekről, melyek a weboldalon nem fognak megjelenni. Példánkban a class attribútum teszi lehetővé, hogy az elemnek azonosító nevet adjunk, melynek alapján később stílusinformációkat és más dolgokat rendelhetünk hozzá.

A HTML-dokumentum anatómiája

Vessünk egy pillantást azokra az individuális elemekre, amelyeket kombinálva össze tudunk állítani egy egész HTML-oldalt!

<!DOCTYPE html>: A doctype a HTML megjelenése utáni években igen fontos szerepet töltött be, ma azonban nem sokat foglalkozunk vele — ott kell lennie a dokumentumban, hogy minden jól működjön; és bőven elég, ha ennyit tudsz róla.
<html></html>: ez az elem keretezi az oldal összes tartalmát, gyakran gyökérelemnek is nevezik.
<head></head>: Tartalmazza mindazokat a dolgokat, amelyeket szeretnénk belefoglalni a HTML-oldalba, de nem szeretnénk, ha a látogatók is látnák őket. Ide kerülnek a kulcsszavak és leírások, melyeket a keresési eredményekben láthatunk, a CSS — ezekről szó lesz további cikkeinkben.
<meta charset="utf-8">: Ez az elem állítja be a dokumentum karakterkészletét UTF-8-ra, ami valójában a világ összes írott nyelvének karaktereit tartalmazza. Ez azt teszi lehetővé, hogy a dokumentum bármilyen szöveges tartalommal boldogul majd.
<title></title>: Meghatározza az oldalunk címét — ezt a címet látjuk a böngészőfülön, amikor megnyitjuk az oldalt, és ez jelenik meg akkor is, ha az oldalt a könyvjelzők/kedvencek közé helyezzük.
<body></body>: Tartalmazza az összes tartalmat, amelyet meg szeretnénk jeleníteni a weboldalunk látogatóinak, legyen szó szövegről, képekről, videókról, játékokról, zenéről vagy bármi másról.

Speciális karakterek a HTML-dokumentumban

Észrevehetted, hogy a HTML-ben a <, >, ", ' és a & karakterek különlegesek — ezek magának a HTML-szintaxisnak az elemei.

De mi van akkor, ha valamelyik jelet a szövegben szeretnénk használni, és nem szeretnénk, ha a böngésző HTML-címkeként ismerné fel?

Ilyenkor karakterreferenciákat alkalmazunk, melyeket a fent említett szituációkban használhatunk. Minden ilyen referencia a & jellel kezdődik és a ; jellel fejeződik.

Nézzük a karaktereket és a megfelelő referenciákat hozzájuk:

<     &lt;
>     &gt;
"     &quot;
'     &apos;
&     &amp;

HTML-megjegyzések

A kódokba megjegyzéseket is illeszthetünk — ezeket nem látják a látogatók, a böngészők pedig ignorálják őket. Arra valóak, hogy emlékeztetőket írjunk magunknak vagy másoknak, akik esetleg utánunk dolgozni fognak a kódon. A megjegyzéseket a  címkék közé kell tenni.

Összegzés

A cikk végére értél — reméljük, élvezted a HTML alapjainak bemutatóját. Mostanra már érted, milyen a nyelv, és hogyan működik a legalapvetőbb szinten, sőt, néhány elemet és attribútumot már magad is meg tudsz írni. Hamarosan a nyelv újabb részleteit is bemutatjuk, tarts velünk!

Címkék:

HTML

Megosztás:

Ismerkedés a HTML alapjaival

Professzionális partnert keres?

Dolgozzunk együtt.