HTML alapok kezdőknek – a weboldalkészítés első lépései

  • Reading time:26 perc alatt olvasható

Mi a HTML? – HTML alapok

  • A HTML egy angol mozaikszó, a HyperText Markup Language rövidítése. 
  • A HTML nyelvet weboldalak készítéséhez használjuk, a HTML kód határozza meg a weboldal felépítését (pl. “itt egy kép”, “itt egy címsor”, “itt egy link” stb.)
  • A HTML nyelven megírt weboldal kódot a böngészők (pl. Chrome, Firefox stb.) értelmezik, majd a kód alapján jelenítik meg a weboldalakat.
  • A HTML egy leírónyelv, más néven jelölőnyelv –  A leírónyelvek struktúrát adnak az adatok halmazának, a számítógép számára is értelmezhetővé teszik, milyen elemekből áll össze a tartalom, és hogyan kell formázni azt.

 

HTML alapok

 

Mi a HTML szerepe?

A HTML strukturálja a weboldal tartalmát, felcímkézi az oldal elmeit. Ezek a címkék szükségesek ahhoz, hogy a böngésző címként, bekezdésként, linkként, képként stb. értelmezzen egy-egy szakaszt. 

Ahhoz, hogy a ma megszokott látványos, kattintható weboldalakat létrehozzuk, a HTML-en kívül két másik nyelvre, CSS-re és JavaScriptre is szükség van. Minden formázás és funkció, amit ezen nyelvek segítségével hozzáadunk az oldalhoz, mind a HTML vázra épül rá. 

Ha bővebben érdekel a HTML szerepe és helye a programozási nyelvek között, olvasd el Programozási nyelv-e a HTML? című cikkünket.

HTML alapok – Hogyan épül fel egy HTML elem?

A HTML elemek gyakorlatilag az oldalon megjelenítendő tartalmat sorolják be és címkézik fel úgy, hogy a böngésző értelmezni tudja őket. Minden további funkció és formázás beálltásakor ezekre az elemekre hivatkozunk.

Megadja tehát, hogy melyik rész főcím, melyik alcím, bekezdés, kép, videó, link stb. Ezeket a címkéket tageknek (ejtsd: “teg”) nevezzük.

Mi az a HTML tag?

A HTML elemeket kijelölő címkék a tagek, általában van nyitó és záró részük.

 

 

A HTML-elemek az alábbi részekből állnak:

  1. nyitótag, vagy kezdőcímke: ez jelöli az elem kezdetét
  2. attribútum(ok) érték(ek): ezek határozzák meg az elem tulajdonságait
  3. tartalom: ez jelenítődik meg a böngészőben
  4. zárótag, másképp zárócímke: ez jelöli az elem végét

 

Vannak olyan HTML elemek, amelyek nem rendelkeznek záró taggel, illetve tartalmi résszel sem, ilyen például az <img>, amivel képet lehet beszúrni az oldalra. 

A HTML elemek nem kis- és nagybetű érzékenyek, vagyis az <IMG> és az <img> tagek ugyanazt jelentik és teljesen ugyanúgy működnek.

Hogy néz ki a HTML kód?

 

HTML alapok – Hogyan épül fel egy HTML dokumentum?

Egy HTML dokumentumnak jellemzőn két fő szakasza van, a <head>, és a <body>. A <head> szakaszban az egész dokumentumra vonatkozó információk vannak, a <body>-ban pedig maga az oldal tartalma, vagyis a címek, bekezdések, képek, linkek, szövegek, tehát minden, amit a weboldalon látunk.

A <head> szakasz elemei

A dokumentum fejrészében szerepel pl. az oldal címe, nyelve, a karakterkódolási rendszer, illetve a mobil nézethez (reszponzivitáshoz) szükséges információk. 

Ezenkívül a <head> szakaszba írjuk a külső stíluslapra mutató linket is, (külső CSS dokumentum), ami az oldal kinézetére vonatkozó utasításokat tárolja. 

  • <head>: metaadatokat tartalmaz, vagyis a magáról a dokumentumra vonatkozó adatokat, nem pedig annak tartalmára. A dokumentumot nyitó <html> tag és a tartalmi részt nyitó <body> tag között helyezkedik el.
  • <title>: a dokumentum címét adja meg, kötelező elem. Ne keverjük össze az oldalon megjelenő fő címmel, amit <h1> taggel hozunk majd létre a <body>-ban. Keresőoptimalizálás szempontjából is jelentős
  • <style>: az egész dokumentumra érvényes formázási beállításokat tartalmaz
  • <link>: leggyakrabban külső stíluslap, vagyis külső CSS dokumentum beillesztésére használják. A stíluslap tartalmazza az oldal megjelenésére vonatkozó információkat
  • <meta>: általában olyan adatokat tartalmaz, mint az oldal karakterkészlete, oldalleírás, kulcsszavak, az oldal szerzője. Ezek a böngésző és a keresők számára nagyon hasznosak. Ide kerülnek a képernyőnézetre vonatkozó információk is, ami a reszponzivitás szempontjából fontos
  • <script>: az oldal interaktivitásáért felelős JavaScript kódot ágyazza be
  • <base>: segítségével beállíthatjuk, hogy relatív útvonal esetén a böngésző mit tekintsen az URL alapjának, illetve megadhatjuk, hogy az adott oldalon hogyan nyíljanak meg a hivatkozások.

A <body> szakasz elemei

Amit a weboldalakon megjelenni látunk, az a tartalom mind a <body> szekcióban helyezkedik el. A következőkben gyakori példákat láthatsz a leggyakrabban használt HTML tagekre.

Gyakori HTML tagek

A <body> szakasz gyakori elemei Leírás
<a> Linket jelöl (az anchor szóból), kötelező attribútuma a href, ami tartalmazza a weboldalra mutató URL-t.
<address> Kapcsolattartási információkat, címet, elérhetőséget jelöl.
<article> Önálló, önmagában is értelmes és az oldaltól függetlenül is értelmezhető egységet jelöl a weboldalon, pl: fórum poszt, újságcikk, blogbejegyzés, felhasználó által megosztott komment, stb.
<footer> A weboldal láblécét hozza létre, tipikusan a szerzőre, szerzői jogra vonatkozó információk, linkek, elérhetőségek stb. vannak benne
<header> A dokumentum fejléce, jellemzően navigációs elmeket, keresőfunkciót, logót, stb-t tartalmaz.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Különböző szintű címsorok (főcím és alcímek) létrehozására alkalmas. A h1 a fő címsor, a h6 a legalacsonyabb szintű címsor az oldalon. 
<nav> Navigációs sávot hoz létre, ami linkeket tartalmaz, akár az oldalon belülre, akár már oldalakra, aloldalakra. Gyakori példák a menük és a tartalomjegyzékek. 
<section> Önálló tartalmi egységet jelent az oldalon. Fontos, hogy legyen megfelelő címe a szakasznak.
<audio> Hangfájlt ágyaz be a weboldalba. A file forrását src attribútummal, vagy a source elem használatával adhatjuk meg.
<img> Képet illeszt be a weboldalba. Elérési helyét src attribútummal adhatjuk meg.
<video> Videólejátszó felületet illeszt be az oldalba, ami lehetővé teszi videók megjelenítését az oldalon.

 

Mik azok az attribútumok?

A HTML attribútumok extra információt adnak hozzá az elemhez, sokféle funkciójuk lehet. Vannak olyanak, amelyek formázzák az adott elemet, van, ami egy-egy link vagy kép forrását adják meg, stb. Az attribútumok az adott elemet létrehozó nyitótagen belülre kerülnek, pl így: 

 

<a href="https://www.w3schools.com">Ez a W3 Schools oldalára mutató link</a>

 

 Egy HTML-tagnek több attribútuma is lehet, ezeket csak egymás után írjuk, vessző nélkül, a nyitó tagben. Az attribútumok által tárolt értékeket mindig idézőjelek (“…”) közé tesszük.

Gyakori HTML attribútumok 

  • href: a linkeket létrehozó <a> tag attribútuma, azt az URL-t tartalmazza, amire a link mutat
  • src: a képek beillesztéséhez szükséges <img> tag attribútuma, a kép elérési útvonalát tartalmazza (mappát, internetes oldalt, tárhelyet, stb., ahonnan a böngésző meg tudja nyitni a képet)
  • width és height: az <img> tag attribútumai, a kép méretére (szélességére és magasságára) vonatkozó információkat tartalmaznak
  • alt: alternatív szöveg (kb. képleírás) megadására alkalmas attribútum, az <img> tagbe írjuk. Ha nem tudja megjeleníteni a böngésző a képet, ez a szöveg jelenik meg helyette, a képernyőolvasó szoftverek is ezt olvassák fel, amikor a képhez érnek az oldalon. 
  • style: formázásokat ad hozzá az adott HTML elemhez (bármelyik tagbe írható), méret, betűszín, betűtípus, stb. megadására alkalamas 
  • lang:<html> attribútuma, a weboldal nyelvét adja meg
  • title: többletinformációt tartalmaz az adott elemről

 

HTML alapok

 

HTML alapok – HTML képek

Ha a honlapon képeket szeretnénk megjeleníteni, akkor a HTML kód <body> részébe kell beillesztenünk az <img> taget. Különböző attribútumokkal pedig a képek méretét tudjuk módosítani, illetve alternatív szöveget tudunk hozzáadni.

Érdekesség, hogy a képeket technikailag nem beillesztjük a weboldalba, hanem belinkeljük. Az <img> tag létrehoz egy helyet a kép számára. 

Az <img> tag önzáró, nincsen zárótagje. Ehelyett attribútumokat tartalmaz, amiket a tagen belülre írunk. 

Két kötelező attribútuma a src és az alt. Az src a kép forrását adja meg, az alt attribútum pedig olyan szöveget tartalmaz, ami abban az esetben jelenik meg, ha a képet a böngésző nem tudja betölteni.

A HTML képekről részletesen írtunk HTML kép, HTML img tag – Hogyan használd? Című cikkünkben. Ebben a cikkben minden hasznos alapvető információt megtalálsz a HTML képekkel kapcsolatban.

 

 

HTML alapok – HTML táblázatok

HTML táblázatok segítségével szöveges tartalmat, számokat, képeket, linkeket rendezhetünk sorokba és oszlopokba és cellákba. 

Ha az épülő honlapon táblázatot szeretnénk elhelyezni, akkor a HTML kód <body> szekciójába kell beilleszteni a szükséges tageket. Különböző attribútumokkal pedig a táblázat megjelenését és elrendezését tudjuk módosítani. 

A <table> tag segítségével hozhatunk létre táblázatot. Ezután a táblázat sorait a <tr> taggel hozhatjuk létre, a cellákat a <td> taggel illeszthetjük be (az angol row és data szavak kezdőbetűi miatt alakul így a rövidítés). A cellák tartalmát, a tényleges adatokat a <td> tagek közé kell beírni. 

HTML táblázatokkal korábbi cikkünkben is foglalkoztunk, ha szeretnéd megismerni a táblázatok beillesztésének és formázásának trükkjeit, olvasd el HTML táblázatok létrehozása című bejegyzésünket.

 

 

HTML alapok – HTML űrlapok

A HTML nyelv segítségével készíthetünk űrlapokat is (angolul HTML Forms), amelyek funkciója, hogy adatokat gyűjtsenek a felhasználótól. 

A <form> elem

Ahhoz, hogy egy HTML űrlapot készítsünk a HTML <form> taget kell használnunk, szintaktikája így néz ki:

 

<form>
    Űrlap tartalma
</form>

 

Az “űrlap tartalma”  helyére jönnek a különböző bemeneti elemek, például a szövegmező, a jelölőnégyzet, vagy a beküldésre szolgáló “megosztás” gomb.

A leggyakoribb űrlap elemek

A leglényegesebb űrlap elem az <input>, de önmagában semmit sem ér. Szükséges hozzáadnunk egy type kiegészítést, ahol megmondjuk, hogy milyen bemeneti elemet szeretnénk létrehozni.

Tipikus bemeneti elemek: 

  • Szöveg – text
  • Jelölőnégyzet – checkbox
  • Gomb – button
  • Címke – label

 

Így néz ki például egy szöveges input mező HTML kódja:

 

<input type=”text”>

 

Ha szeretnél tovább olvasni a HTML űrlapok témájában, ezt a rövid, lényegretörő angol nyelvű összefoglalót ajánljuk: HTML Forms

 

 

HTML alapok – Hol lehet megtanulni a HTML-t? 

HTML webfejlesztés tanfolyamok

A weboldalkészítést és webfejlesztést oktató tanfolyamok anyagának egyik első alapköve a HTML nyelv megtanulása. A HTML váz létrehozása minden weboldal esetében szükséges ahhoz, hogy a tartalmat és az összes funkciót fel tudjuk építeni. Bármilyen tanfolyamra webfejlesztő tanfolyamra jelentkezel is, egészen biztos, hogy az első modulok egyike a HTML nyelv alapos megismerése és begyakorlása lesz.

 

 

HTML tanulás egyénileg

Ez olyan a terület, amit egyénileg is viszonylag egyszerűen el lehet sajátítani önálló tanulással is. Rengeteg segédanyag érhető el hozzá, az angol nyelvű cikkek, oktatófelületek és YouTube videók sora szinte végtelen, de magyarul is sok-sok háttéranyag érhető el a HTML tanulásához.

Magyar nyelvű HTML tananyagok: 

Angol nyelvű oldalak HTML alapok tanulásához:

 

HTML alapok

 

Mennyi idő megtanulni a HTML alapjait?

A HTML nyelvet kb. 1 hét alatt meg lehet tanulni és be is lehet gyakorolni, ha minden nap foglalkozol vele néhány órát. Fontos, hogy később is gyakorold, mert ez a tudás könnyen megkophat. 

Mire jó a HTML tudás? 

Önmagában a HTML nyelv ismerete nem elég weboldalak készítéséhez, de elengedhetetlen alapköve minden webes programozásnak. A HTML kódolás az első lépés, amit meg kell tanulnod, hogyha weboldalakat szeretnél készíteni.

Milyen előismeret szükséges a HTML tanulásához? 

Jó hír, hogy HTML-tanuláshoz semmilyen előismeret nem szükséges. Sőt, ideális első lépés bárki számára, aki szeretne elkezdeni programozást tanulni. A HTML-en keresztül meg lehet ismerkedni a kódszerkesztő programok használatát, a számítógépes kódolás mikéntjét. Jó ugródeszka a további programozási nyelvek elsajátításához. 

 

Ha kíváncsi vagy további oktatóvideóinkra is, látogass el Youtube csatornánkra, ahol számtalan videót találsz a programozás alapjairól.

A CodeBerry Programozóiskola “Programozási oktatóanyagok” sorozatában olyan kiegészítő tananyagokat találsz az egyes programnyelvekhez, melyek segítségével gyorsan és egyszerűen sajátíthatod el a programozás alapjait.

HTML és CSS:

JavaScript:

Java:

Segédanyagok:

Szeretnél online megtanulni programozni? Gyere, és próbáld ki az első 25 leckénket ingyen a CodeBerry Programozóiskolában!