home 2024. március 04., Kázmér napja
Online előfizetés
Ismerkedés a HTML alapjaival
Erdsoft
2018.10.16.
LXXIII. évf. 41. szám
Ismerkedés a HTML alapjaival

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:

  1. 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.
  2. 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.
  3. Tartalom: az elem tartalma, mely esetünkben csak szöveg.
  4. Elem: a nyitó címke, a záró címke és a tartalom összessége.
  5. 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!

  1. <!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.
  2. <html></html>: ez az elem keretezi az oldal összes tartalmát, gyakran gyökérelemnek is nevezik.
  3. <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.
  4. <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.
  5. <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.
  6. <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 <!-- é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!

Hozzászólások
Hozzászólások
0
Hozzászólás küldése
1000 karakter áll rendelkezésére
A megjegyzésekben kifejtett vélemények a hozzászólások szerzőinek magánvéleményei, és nem tükrözik az internetes portál véleményét. A megjegyzéseket moderáljuk és jóváhagyjuk az általános szerződési feltételeknek megfelelően.
Támogatóink
Az oldal sütiket használ, hogy személyre szabjuk a tartalmakat és reklámokat, hogy működjenek a közösségi média funkciók, valamint hogy elemezzük a weboldal forgalmát. Bővebben a "Részletek mutatása" gombra olvashat.
Az oldal sütiket használ, hogy személyre szabja az oldalon megjelenő tartalmat és reklámokat..