Az első HTML weboldalam
Minden weboldal, amit az interneten látsz, egy egyszerű szöveges fájlként kezdi az életét. Ebben a leckében megírjuk életed első HTML kódját, és megnézzük, hogyan alakítja át ezt a böngésződ egy látható weboldallá.
Mik azok a HTML tagek (címkék)?
A HTML nyelv úgynevezett tagekből (magyarul címkékből) épül fel. Ezek a tagek mondják meg a böngészőnek, hogy egy adott szöveg micsoda: címsor, bekezdés, vagy éppen egy gomb.
A tageket mindig kacsacsőrök közé írjuk: <tag>. A legtöbb tag párban jár, mint egy szendvics. Van egy nyitó tag, középre jön a tartalom, majd egy záró tag, amiben van egy perjel (/).
<p>Ez itt egy bekezdés szövege.</p>A fenti példában a <p> jelzi a bekezdés (paragraph) kezdetét, a </p> pedig a végét.
A HTML dokumentum kötelező alapváza
Egy weboldal nem csak úgy lóg a levegőben. Minden HTML fájlnak van egy szigorú, kötelező kerete. Nyiss meg egy egyszerű szövegszerkesztőt a gépeden (Windows alatt a Jegyzettömböt, Mac-en a TextEdit-et, vagy egy profibb programot, mint a VS Code), és másold be az alábbi kódot:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Az én első weboldalam</title>
</head>
<body>
<h1>Üdvözöllek a weboldalamon!</h1>
<p>Ezt a weboldalt teljesen egyedül kódoltam.</p>
</body>
</html>Mit jelentenek ezek a sorok?
Bontsuk darabokra a fenti kódot, hogy pontosan értsd, mi történik:
<!DOCTYPE html>: Ez a legelső sor. Ez csak egy jelzés a böngészőnek (pl. Chrome, Firefox), hogy "Hé, ez egy modern HTML5 nyelven írt dokumentum, eszerint olvasd el!".<html lang="hu">: Ez a weboldal "gyökere". Minden más kód ezen a nyitó és a legalsó záró</html>tagen belülre kerül. Alang="hu"megmondja, hogy az oldal magyar nyelvű.<head>: A "fejléc". Képzeld el úgy, mint a weboldal agyát. Az ide írt dolgok nem jelennek meg a képernyőn. Itt adjuk meg a beállításokat, például a karakterkódolást (<meta charset="UTF-8">), hogy az ékezetes betűk (á, é, ő) helyesen jelenjenek meg.<title>: Ez a szöveg fog megjelenni a böngésződ legfelső fülén, és ezt a címet fogja mutatni a Google is a találati listában.<body>: A "test". Minden, amit ide írsz, látható lesz a látogatók számára. Ide kerülnek a szövegek, képek, videók és gombok.
Hogyan nézd meg az eredményt?
A kód megírása csak az első lépés. Hogy lásd is, mit alkottál, el kell mentened a fájlt.
- A szövegszerkesztődben kattints a Fájl -> Mentés másként opcióra.
- A fájl neve legyen pontosan ez:
index.html(nagyon fontos a .html kiterjesztés!). - Keresd meg a lementett fájlt a számítógépeden, és kattints rá duplán.
A fájl meg fog nyílni a böngésződben, és látni fogod a nagy címsort és az alatta lévő bekezdést. Gratulálunk, hivatalosan is elkészítetted az első weboldaladat!