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>
Code language: HTML, XML (xml)

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>
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. <<

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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!

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

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>
Code language: HTML, XML (xml)

Példa

HTML kód

<pre> Tördelem a szöveget, de nagyon. </pre>
Code language: HTML, XML (xml)

Eredmény

Tördelem         a           
szöveget,

de


nagyon.

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

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>
Code language: HTML, XML (xml)

Példa

HTML kód

<div style="background-color:red;height:50px;"></div> <div style="background-color:yellow;height:50px;"></div>
Code language: HTML, XML (xml)

Eredmény

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

img

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

Szintaktika

<img src="KEP.ELERESI.UTVONALA">
Code language: HTML, XML (xml)

Példa

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. <<

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

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

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

Eredmény

Piros szöveg.

Sárga háttér.

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

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