HTML alapok (A HTML webprogramozás alapjai)

Ebben a cikkben ismertetjük a HTML webprogramozás alapjait. Itt megtalálhatsz mindent, ami elengedhetetlen a HTML nyelv használatához.

0
Mi az a HTML? A HTML bemutatása című cikk és a HTML szerkesztő programok nyitóképe

HTML alapok (A HTML webprogramozás alapjai)

Ebben a cikkben összeszedtük azokat az információkat, amelyekről egyértelműen kijelenthetjük, hogy elengedhetetlenek a webprogramozáshoz. Ez a cikk részletezi a HTML alapjait.

Tartalomjegyzék

Mi az a HTML?

A HTML egy angol mozaikszó, melynek jelentése HyperText Markup Language, amelyet magyarul Hiperszöveges Jelölőnyelvnek nevezhetünk. A HTML (HyperText Markup Language) egy leíró nyelv, amelyet weboldalak készítéséhez használunk. Egy HTML kód egyértelműen meghatározza a weboldal felépítését, kinézetét. Azaz a HTML nyelven megírt kódot a webböngésző értelmezi, majd a kód alapján megjeleníti a már általunk megszokott oldalakat.

Itt olvashatsz részletesebben arról, hogy mi is az a HTML.

HTML dokumentum létrehozása

Egy HTML dokumentumot tulajdonképpen bármilyen szövegszerkesztőben létrehozhatunk.

Nézzük a lépéseket:

1. lépés: Nyissuk meg a szövegszerkesztő alkalmazásunkat.
2. lépés: Nyissunk egy új dokumentumot.
3. lépés: Írjunk HTML kódot.
4. lépés: Mentsük el HTML dokumentumként.

Itt olvashatsz részletesebben a HTML dokumentumok létrehozásáról. Itt pedig a HTML szerkesztőkről.


HTML struktúrája, felépítése

A HTML oldalak struktúráját, felépítését szemléltető kép

Az ábrát tanulmányozva könnyen megérthetjük, hogy hogyan épül fel a HTML dokumentum. A HTML struktúrája, amolyan keretes, azaz muszáj először azt lezárnunk, amit legutóbb megnyitottunk. Nem zárhatjuk le úgy a <HEAD>-et, hogy a <BODY > még nyitva van.

Egy HTML dokumentum kötelező elemei a fenti képen láthatóak. Ezek feltétlenül szükségesek, ahhoz hogy a HTML kódot felismerje a böngésző.

Itt olvashatsz részletesebben a HTML oldalak struktúrájáról, felépítéséről.

Hogy néz ki egy HTML kód? A HTML dokumentumok felépítése

HTML kód

<!DOCTYPE html>
<html>

<head>
<title>A weboldal címe</title>
</head>
<body>

<h1>Ez az első címsorom</h1>
<p>Ez az első bekezdésem.</p>

</body>
</html>
Code language: HTML, XML (xml)

Eredmény

Ez az első címsorom

Ez az első bekezdésem.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A bal oldalon láthatjuk azt, hogy hogyan néz ki konkrétan egy HTML-kód, a jobb oldalon viszont azt láthatjuk, hogy a bal oldalra beírt kód hogyan fog megjelenni a böngészőnkben.



A fentebb látható kód elemzése:

<!DOCTYPE html>: Ez a sor határozza meg, hogy ez egy HTML dokumentum lesz, ezzel üzenve a böngészők számára.
<html>: Ez a HTML fájlunk gyökéreleme, kötelező ennek következnie a !DOCTYPE html rész után.
<head>: Ezt magyarul fejnek, fejszekciónak vagy fejrésznek hívjuk. Alapvető információkat tartalmaz a HTML oldalunkról. Például a következő szekciót.
<title>: Ez határozza meg a HTML oldal nevét. A böngésző innen olvassa ki a böngésző címsorában látható szöveget.
</title>: Ez az előző elem zárópárja. A nyitó és a záró tag közé kerül a HTML oldal címe.
<body>: Ez a dokumentum “test” része, ezután kell írni a weboldal tartalmát. Az e mögé írt tartalmak fognak megjelenni a böngészőben a weboldal részeként. Ezt követni fog majd még egy </body> tag. De ezt nem rakhatjuk ki még most. A záró tag-et csak akkor rakhatjuk ki, ha a weboldalunkat már feltöltöttük tartalommal.
<h1>: Ez egy címsor. A HTML nyelvben több címsor is létezik. (Például h1, h2, h3 stb.) A h1 a legnagyobb címsor, azaz a weboldalon ez lesz a legnagyobb szöveg.
</h1>: Ez a címsor záró tag-e. A <h1> és </h1> közé került szöveget fogja nagy betűkkel kiírni a weboldalra.
<p>: Ez a bekezdést jelöli. Az ezután írt szöveget normál méretben fogja megjeleníteni a böngésző.
</p>: Ez az bekezdés zárópárja.
</body>: Az elején írtuk a <body> nyitó tag-et. Ez a zárópárja. Ez jelzi a böngésző számára, hogy eddig tartott a megjelenítendő rész.
</html>: Ez pedig azt jelzi a böngészőnek, hogy itt ér véget teljesen a HTML dokumentum.


Itt olvashatsz részletesen a HTML oldalak felépítéséről, struktúrájáról.

HTML címsorok

A HTML címsor (ahogy a neve is sugallja) arra való, hogy címet adjon az utána következő szövegnek. A címsorok szintje egytől hatig terjed. (h1-h6) Nézzünk egy példát a könnyebb érthetőség kedvéért.

Szintaxis

<h1>Tartalom</h1>
<h2>Tartalom</h2>
<h3>Tartalom</h3>
<h4>Tartalom</h4>
<h5>Tartalom</h5>
<h6>Tartalom</h6>
Code language: HTML, XML (xml)

Kötelező záró tag-et is használni.

HTML kód

<h1>Címsor 1</h1>
<h2>Címsor 2</h2>
<h3>Címsor 3</h3>
<h4>Címsor 4</h4>
<h5>Címsor 5</h5>
<h6>Címsor 6</h6>
Code language: HTML, XML (xml)

Eredmény

Címsor 1

Címsor 2

Címsor 3

Címsor 4

Címsor 5
Címsor 6

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A HTML címsorokról itt olvashatsz részletesebben.

HTML paragrafusok, bekezdések

A HTML paragrafusokról, bekezdésekről sem nehéz kitalálni, hogy mire valók. Bekezdéseket alkotnak, amelyekbe szövegeket írhatunk.

Szintaxis

<p>TARTALOM</p>
Code language: HTML, XML (xml)

Kötelező záró tag-et is használni.

Példa

HTML kód

<p>
Ez itt egy paragrafus.
</p>

<p>
Ez
is
egy
paragrafus.
</p>

<p>
Sőt                még          ez         is          egy          paragrafus.

</p>
Code language: HTML, XML (xml)

Eredmény

Ez itt egy paragrafus.

Ez is egy paragrafus.

Sőt még ez is egy paragrafus.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ebből látszik, hogy a <p> nem érzékeli a sortöréseket, azaz hiába írunk sortörést, vagy plusz szóközöket a szövegbe, a <p> nem fogja érzékelni azokat.

HTML szövegformázás

A HTML alapértelmezetten, beépítve biztosít különböző formázási lehetőséget. Nézzük át ezeket sorban:

  • <b> – Félkövér szöveget alkot.
  • <strong> – Fontos szövegrészleteknél használjuk.
  • <i> – Dőlt szöveget eredményez.
  • <em> – Kiemeléshez használjuk.
  • <mark> – Szövegmegjelöléshez használjuk.
  • <small> – Kisebb szöveget eredményez.
  • <del> – Törölt szöveg hatást okoz.
  • <ins> – Beillesztett szöveghez használjuk.
  • <sub> – Alsó indexbe helyezi a szöveget.
  • <sup> – Felső indexbe helyezi a szöveget.

Példa

Most pedig jöhetnek a példák:

HTML kód

<b>Félkövér</b>
<strong>Fontos</strong>
<i>Dőlt</i>
<em>Kiemelt</em>
<mark>Megjelölés</mark>
<small>Kisebb</small>
<del>Törölt</del>
<ins>Beillesztett</ins>
<sub>Alsó index</sub>
<sup>Felső index</sup>
Code language: HTML, XML (xml)

Eredmény

Félkövér Fontos
Dőlt
Kiemelt
Megjelölés
Kisebb
Törölt
Beillesztett
Alsó index
Felső index

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Sortörés

Az előző példánál már észrevétlenül alkalmaztam a sortörést, most pedig bemutatom nektek is egy példán keresztül.


Sortörés nélkül

HTML kód

<strong>Fontos</strong>
<i>Dőlt</i>
Code language: HTML, XML (xml)

Eredmény

Fontos Dőlt

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Sortöréssel

HTML kód

<strong>Fontos</strong>
<br>
<i>Dőlt</i>
Code language: HTML, XML (xml)

Eredmény

Fontos
Dőlt

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A hangsúly azon az icipici <br> tag-en van. Ahová bebiggyesszük ott keletkezik egy sortörés, magyarul a <br> előtt és után lévő szöveg külön sorba fog kerülni.

A <br> tag-nek nem kell zárótag!

Kép beszúrása

Mit ér egy weboldal képek nélkül? Általában nem sokat. Emiatt is van lehetőségünk képek beszúrására a HTML dokumentumunkba. Kép beszúrására az <img> elemmel van lehetőségünk, de ennyi még nem elég számára. Fontos megadnunk a képünk elérési útvonalát, amelyet több módon is megtehetünk.

1. mód: Ha a a kép és a HTML dokumentumunk ugyanabban a mappában van, akkor elég csak a kép nevére hivatkozni. Például: kep.jpg
2. mód: Ha a kép és a HTML dokumentum különböző mappába van, akkor érdemes a teljes elérési útvonalat megadni. Például: C:\Weboldal\kep.jpg
3. mód: Ha a kép az interneten érhető el, akkor megadhatjuk az URL címet is. Például: webiskola.hu/kep.jpg

A képet elérhetőségét az „src” attribútumnak kell megadni. A kép méretét akár pontosan megadhatjuk a „width”, illetve a „height” attribútumokkal. Továbbá az <img> tag-nak nincs zárópárja.

Példa

Most pedig nézzünk egy példát.

HTML kód

<img src="https://webiskola.hu/kep.jpg">
Code language: HTML, XML (xml)

Eredmény

kep

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

HTML hivatkozások

A HTML dokumentumokba akár linkeket is elhelyezhetünk, amelyek egy kívánt helyre, vagy oldalra ugranak.

Szintaktika

<a href="HIVATKOZÁS">MEGJELENŐ SZÖVEG</a>
Code language: HTML, XML (xml)


Fontos, hogy az <a> tag-nak van zárópárja, azt kötelező kiraknunk, hogy működjön. Azonban a legfontosabb rész a „href”, hiszen itt kell megadnunk, hogy hova mutasson a hivatkozásunk. Ugyanúgy, mint a képeknél, itt is megadhatunk abszolút és relatív útvonalakat.

Példa

Erre vonatkozólag példa.

HTML kód

<a href="https://webiskola.hu">Ide kattintva eljutsz a webiskola.hu-ra.</a>
Code language: HTML, XML (xml)

Eredmény

Ide kattintva eljutsz a webiskola.hu-ra.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

HTML oldalak forráskódja

A legtöbb böngészőben lehetőségünk van arra, hogy megnézzük az adott oldal HTML kódját. Ehhez nem kell mást tennünk, mint megnyomni az egér jobb gombját, majd az „Oldal forrásának megtekintése” opciót választani. Ilyenkor új ablakban megnyílik számunkra az adott oldal egész forráskódja. Így láthatjuk, hogy hogy milyen HTML elemekből épül fel az adott oldal

A másik lehetőség, hogy jobb klikk után a „Vizsgálat” gombra kattintunk, ilyenkor az egeret az egyik elemre húzva megjelenik a képernyőn, hogy az a konkrét HTML részlet az oldal mely részéért felel. Így sok hasznos dolgot tanulhatunk.

Itt olvashatsz pár trükkről, amelyeket a forráskód nézegetésével deríthetsz ki.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!

További leckék