HTML body – Mi megy a HTML törzsébe?

Biztosan ismered már a HTML body elemét, de még nem biztos, hogy pontosan tudod, hogy miket helyezhetünk el benne. Nézd meg ezt a cikket és tudd meg, hogy pontosan milyen elemeket helyezhetünk a HTML body, azaz törzsében, vagy testében.

HTML body, test, törzs használatát szemléltető kép

HTML body – Mi megy a HTML törzsébe?

Valószínűleg mindenki tisztában van azzal, hogy mi az a HTML body, de érdemes lehet egy pillantást vetni rá, hogy mégis miket lehet elhelyezni a weboldal törzsében (vagy test részében).

Egyszerűen megfogalmazva a HTML törzsébe olyan elemeket helyezünk el, amelyek meg is jelennek a weboldalon, például egy kép vagy szöveg.

Értelemszerűen egy HTML dokumentumban csak egy body lehet.

HTML elemek, amelyeket elhelyezhetünk a body-ban

Nem fogjuk felsorolni az összes HTML elemet, amelyet elhelyezhetünk a body-ban, mert számtalan van belőle. De ebben a felsorolásban megtalálhatjátok a leggyakoribbakat.

Címsorok (h1, h2 stb)

A HTML címsorokat arra használjuk, hogy egyes sorokat kiemeljünk a többitől, amolyan cím jelleggel. A HTML címsorok (angolul Headings) 1-től 6-ig terjednek. A h1 a legnagyobb méretű szöveg, míg a h6 a legkisebb méretű.

Szintaktika

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Példa

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

Szöveg megadási lehetőségek

A HTML body-ban többféleképpen is megadhatunk szöveget, vegyük a legnépszerűbbeket sorba.

p

A p elem egy bekezdést alkot, amelyet automatikusan margóval lát el, hogy elkülönüljön a többi szövegtől és meglegyen a bekezdés hatása.

Szintaktika

<p>Ide jön a szöveg.</p>

Példa

HTML kód

<p>Ez egy bekezdés.</p>
<p>Ez egy másik, hosszabb bekezdés.</p>
<p>Ez                   egy                          sok                szóközt               tartalmazó                    bekezdés.</p>
<p>Itt
pedig
külön
sorba
írom
az
összes
szót!
</p>

Eredmény

Ez egy bekezdés.

Ez egy másik, hosszabb bekezdés.

Ez egy sok szóközt tartalmazó bekezdés.

Itt pedig külön sorba írom az összes szót!

A fenti példán keresztül látszik, hogy hiába próbáltam tagolni a szöveget, az mégsem úgy jelenik meg, ahogy én szerettem volna. Erre kínál megoldást a pre.

pre

A pre a p elemmel szemben megtartja a szerkesztőben megadott tagolásokat.

Szinaktika

<pre>TARTALOM...</pre>

Példa

HTML kód

<pre>
Tördelem         a           
szöveget,

de


nagyon.
</pre>

Eredmény

Tördelem         a           
szöveget,

de


nagyon.

A fenti példában tökéletesen látszik, hogy jelen esetben a HTML pre elemét használtam, amely tökéletesen megtartotta a szerkesztőben megadott formát.

div

A div elem egy területet határoz meg. Tulajdonképpen ez egy tároló, amely HTML elemeket tárol. Azért jó ezt használni, mert az oldal egymáshoz kapcsolódó részeit (pl.: felső menüsor) egybe pakolhatjuk és egységesen formázhatjuk a tulajdonságaikat.

Szintaktika

<div></div>

Példa

HTML kód

<div style="background-color:red;height:50px;"></div>
<div style="background-color:yellow;height:50px;"></div>

Eredmény

img

Az img elemmel egy képet helyezhetünk el a weboldalunkon.

Szintaktika

<img src="KEP.ELERESI.UTVONALA">

Példa

HTML kód

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

Eredmény

kep

a

Az a elemmel kattintható hivatkozásokat helyezhetünk el a weboldalunkon. A hivatkozások, vagy linkek azért nagyszerűek, mert megkönnyítik a felhasználó kiigazodását a honlapon.

Szintaktika

<a href="URL">SZÖVEG, KÉP STB</a>

Példa

HTML kód

<p>
Ha csak simán bemásolok egy URL címet, az attól még nem lesz hivatkozás: https://www.webiskola.hu
</p>

<p>
Ha így csinálom, akkor viszont hivatkozás lesz: <a href="https://www.webiskola.hu">https://www.webiskola.hu</a>
</p>

Eredmény

Ha csak simán bemásolok egy URL címet, az attól még nem lesz hivatkozás: https://www.webiskola.hu

Ha így csinálom, akkor viszont hivatkozás lesz: https://www.webiskola.hu

Stílus adása elemeknek a BODY-n belül

A BODY-n belül lehetőségünk van arra is, hogy stílust határozzuk meg egyes elemek számára.

Szintaktika

<p style="STÍLUSMEGHATÁROZÁSOK">TARTALOM</p>

A fenti példában egy p elem esetében mutattam be, hogy hogyan lehet stílust adni egy elemnek, de bármilyen elem esetében meghatározhatjuk a stílust.

Példa

HTML kód

<p style="color:red;">
Piros szöveg.
</p>

<h4 style="background-color:yellow;">Sárga háttér.</h4>

Eredmény

Piros szöveg.

Sárga háttér.