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

Eredmény

Sok szóköz van

Itt is .

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

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

Eredmény

Sok        szóköz           van
Itt
is
.

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

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

Eredmény

Alapértelmezett szöveg.

Arial szöveg.

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

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

Eredmény

Alapértelmezett szöveg.

Nagyobb szöveg.

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

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

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

Eredmény

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

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