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.

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.

Mi az a HTML?

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>

Eredmény

Ez az első címsorom

Ez az első bekezdésem.

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.


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>

Eredmény

Címsor 1

Címsor 2

Címsor 3

Címsor 4

Címsor 5
Címsor 6

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.

Jelölése: <p>

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


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>

Eredmény

Ez itt egy paragrafus.

Ez is egy paragrafus.

Sőt még ez is egy paragrafus.

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.

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>

Eredmény

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

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>

Eredmény

Fontos Dőlt


Sortöréssel

HTML kód

<strong>Fontos
</strong>
<br>
<i>Dőlt
</i>

Eredmény

Fontos
Dőlt


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.

Nézzünk egy példát:

HTML kód

<img src="https://webiskola.hu/kep.jpg">

Eredmény

kep

HTML hivatkozások

A HTML dokumentumokba akár linkeket is elhelyezhetünk, amelyek egy kívánt helyre, vagy oldalra ugranak.
A szintaktikája: <a href=”HIVATKOZÁS“>MEGJELENŐ SZÖVEG</a>

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.

Nézzünk egy példát:

HTML kód

<a href="https://webiskola.hu">Ide kattintva eljutsz a webiskola.hu-ra.</a>

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.