HTML bekezdés (HTML p)

Ebből a cikkből megtanulhatod a HTML bekezdések használatát és a HTML p szintaktikáját.

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.

Szintaktika

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

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

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

HTML kód

<p>Ez egy <BR> bekezdés.</p>

Eredmény

Ez egy
bekezdés.

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.

HTML kód

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

Eredmény

Ez egy bekezdés.


Ez egy másik bekezdés.

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.

HTML kód

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

Eredmény

Ez itt egy bekezdés , amelyben bemutatom a formázási lehetőségeket

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.

Megadási mód:

text-align: IGAZÍTÁS.MÓDSZERE;

Lehetőségek:

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

HTML kód

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

Eredmény

Ez a szöveg középre igazított.

Ez a szöveg balra igazított.

Ez a szöveg jobbra igazított.

Ez a szöveg sorkizárt, de csak akkor látszik, ha jó hosszú a mondat. Írok még egyet.