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, h3, h4, h5, h6)

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

Címsor szintaktika

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

Címsor példa

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

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 elem

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.

p szintaktika

<p>Ide jön a szöveg.</p>
Code language: HTML, XML (xml)

p példa

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

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 elem

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

pre szinaktika

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

pre példa

<pre>
Tördelem         a           
szöveget,

de


nagyon.
</pre>
Code language: HTML, XML (xml)

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 elem

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.

div szintaktika

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

div példa

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

img elem

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

img szintaktika

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

img példa

HTML kód

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

Eredmény

a elem

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.

a elem szintaktikája

<a href="URL">SZÖVEG, KÉP STB</a>
Code language: HTML, XML (xml)

a elem példa

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

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

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

<h4 style="background-color:yellow;">Sárga háttér.</h4>
Code language: HTML, XML (xml)

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