HTML bekezdés (HTML p)

A HTML bekezdéseket (vagy paragrafusokat) arra használjuk, hogy szépen elkülöníthető bekezdéseket alkothassunk a szövegben. Azért hogy ez elérhető legyen, a HTML bekezdések rendelkeznek pár alaptulajdonsággal, mint például, hogy minden <p> tag új sorban kezdődik és, hogy minden <p> tartalmaz egy kis margót. Ezáltal a bekezdések jobban elkülöníthetővé válnak.

HTML p elem

A p elem egy bekezdést határoz meg, melynek nyitó- és zárótagjei közé szöveget írhatunk. Ahogy fentebb említettünk, a p elem automatikusan tartalmaz alsó, és felső margókat, amely által minden bekezdés vizuálisan könnyen elkülöníthető. Ebből adódik, hogy minden létrehozott p tag egy újabb sorba töri a szöveget.

Szintaktika

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

A HTML bekezdés szintaktikája rendkívül egyszerű, egy nyitó és egy záró tag-ből áll. A kettő közé pedig a szöveg megy.

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 példán keresztül látszik, hogy hiába alkalmazok extra szóközöket, vagy hiába írom külön sorba az egyes szavakat front-end-en keresztül a szöveg formázatlanul fog megjelenni, mivel a böngésző automatikusan eltávolítja azt extra szóközöket és sorokat. (Front-end: Amit a felhasználó lát.)

Hogyan tagoljuk a bekezdést?

Alapvetően csak akkor kezdődik új sor, ha az adott sorba már nem fér több szó. De van egy-két egyszerű trükk, amellyel szépen tagolhatjuk a bekezdést.

Sortörés (br)

Megtörhetjük a sort egy <br> utasítással. A <br>-nek nincs zárópárja, így elég egy szimpla <br> beszúrása a megtörendő helyre.

<p>Ez egy <br> bekezdés.</p>
Code language: HTML, XML (xml)

Horizontális elválasztás (hr)

Használhatunk vízszintes vonalakat elválasztás céljából, ezzel is megtörhetjük a szöveg monotonitását.

<p>Ez egy bekezdés.
<hr>
Ez egy másik bekezdés.</p>

Code language: HTML, XML (xml)

Hogyan formázzuk a bekezdések szövegét?

Számtalan HTML bekezdés formázási lehetőség van, megemlítünk párat a legnépszerűbbek közül.

Egy bekezdésen belül szimplán használhatjuk az alábbi lehetőségeket:

• <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éldák formázásokra

<p><b>Ez </b>
<strong>itt </strong>
<i>egy </i>
<em>bekezdés </em>
<mark>, </mark>
<small>amelyben </small>
<del>bemutatom </del>
<ins>a </ins>
<sub>formázási</sub>
<sup>lehetőségeket.</sup></p>
Code language: HTML, XML (xml)

Szöveg rendezése

A HTML bekezdések szövegének tartalmát akár rendezhetjük is, azaz megmondhatjuk, hogy a szöveg balra rendezett, vagy sorkizárt legyen stb.

Szintaxis

text-align: IGAZÍTÁS.MÓDSZERE;
Code language: CSS (css)

Lehetőségek:

• center (középre igazít)
• left (balra igazít)
• right (jobbra igazít)
• justify (sorkizárt)

<p style="text-align:center;">Ez a szöveg középre igazított.</p>
<p style="text-align:left;">Ez a szöveg balra igazított.</p>
<p style="text-align:right;">Ez a szöveg jobbra igazított.</p>
<p style="text-align:justify;">Ez a szöveg sorkizárt, de csak akkor látszik, ha jó hosszú a mondat.</p>
Code language: HTML, XML (xml)

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