HTML szövegformázás (Formázás CSS nélkül)

Ebben a cikkben ismertetjük a HTML szövegformázás során használható lehetőségeket. Tanuld meg, hogy hogyan formázhatod a HTML szöveget CSS nélkül.

HTML szövegformázás (Formázás CSS nélkül) cikk nyitóképe

HTML szövegformázás (Formázás CSS nélkül)

Ha formázás nélkül írjuk a szöveget, akkor a böngésző nem fogja megtartani a szerkesztőben használt extra szóközöket, illetve sortöréseket. Ahogy az alábbi példán keresztül is látható:

HTML kód

<p>Sok        szóköz           van</p>
<p>Itt
is
.
</p>

Eredmény

Sok szóköz van

Itt is .

Pre

Ha szeretnénk a szerkesztőben beírt plusz szóközöket megtartani, akkor használjuk a <pre> elemet.

HTML kód

<pre>Sok        szóköz           van</pre>
<pre>Itt
is
.
</pre>

Eredmény

Sok        szóköz           van
Itt
is
.

Font

A <font> tag fő funkciója, hogy személyre szabhassuk a megjelenő szöveg betűkészletét, színét, illetve méretét.

HTML kód

<p>Alapértelmezett szöveg.<p>
<font face="Arial">Arial szöveg.</font>

Eredmény

Alapértelmezett szöveg.

Arial szöveg.

Fentebb látszik, hogy valóban megváltozott a szöveg betűtípusa. Most pedig módosítsuk a betű méretét:

HTML kód

<p>Alapértelmezett szöveg.<p>
<font size="10">Nagyobb szöveg.</font>

Eredmény

Alapértelmezett szöveg.

Nagyobb szöveg.

Most pedig módosítsuk a betű színét.

HTML kód

<p>Alapértelmezett szöveg.<p>
<font color="red">Piros szöveg.</font>

Eredmény

Alapértelmezett szöveg.

Piros szöveg.

Beépített, alapértelmezett elemek a szöveg formázására

A HTML alapértelmezetten, beépítve biztosít különböző formázási lehetőséget a szövegek számára. Ezeket úgy használjuk, hogy a szöveg elé és mögé írjuk a nyitó és záró tag-et. Nézzük át ezeket sorban:

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

Itt találhatók a példák a könnyebb érthetőség kedvéért:

HTML kód

<b>Félkövér</b>
<strong>Fontos
</strong>
<i>Dőlt
</i>
<em>Kiemelt</em>
<mark>Megjelölés</mark>
<small>Kisebb</small>
<del>Törölt</del>
<ins>Beillesztett</ins>
<sub>Alsó index</sub>
<sup>Felső index</sup>

Eredmény

Félkövér
Fontos
Dőlt
Kiemelt
Megjelölés
Kisebb
Törölt
Beillesztett
Alsó index
Felső index