E heti cikkünkben bemutatjuk a HTML alapjait — definiáljuk az elemeket, attribútumokat és mindazokat a fontos fogalmakat, amelyekről talán már korábban is hallottál, de nem tudtad, mit is takarnak pontosan.
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:
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 <!-- és --> 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!
 Néhány szó rólunk: Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban. |
NYEREMÉNYJÁTÉK!
Azok között az olvasók között, akik velünk tanulják a programozás alapjait, és beküldik a helyes választ kérdésünkre, a sorozat végén egy laptopot sorsolunk ki. Minden beküldött válasz növeli a nyerési esélyeket, hiszen a végén minden helyes válasz egy külön szelvény lesz.
Első heti kérdésünk:
Az alábbi kódrészlet melyik részét nevezzük attribútumnak?
<p class=”editor-note”>A macskám fekete.</p>
1. </p>
2. class="editor-note"
3. A macskám fekete.
A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
