Kategorie
Kurs HTML

Formatowanie tekstu HTML

Bez wątpienia formatowanie tekstu w HTML jest jednym z podstawowych zadań przy tworzeniu stron internetowych. HTML oferuje wiele znaczników, które pozwalają na stylizowanie i organizowanie tekstu w różnorodny sposób, aby uczynić go bardziej czytelnym i atrakcyjnym. Dlatego w tym artykule przedstawię różne znaczniki HTML służące do formatowania tekstu, wraz z przykładami użycia.

Podstawowe znaczniki do formatowania tekstu w HTML

Formatowanie tekstu w HTML obejmuje różne aspekty, takie jak pogrubienie, kursywa, podkreślenie, zmiana koloru i rozmiaru czcionki, a także organizowanie tekstu w listy, akapity i nagłówki. Oto niektóre z podstawowych znaczników HTML używanych do formatowania tekstu:

Pogrubienie (<b> i <strong>):

  • <b> – używany do pogrubienia tekstu bez semantycznego znaczenia
  • <strong> – używany do podkreślenia ważności tekstu, również pogrubia tekst
<p>To jest <b>pogrubiony</b> tekst.</p>
<p>To jest <strong>ważny i pogrubiony</strong> tekst.</p>

To jest pogrubiony tekst.

To jest ważny i pogrubiony tekst.

Kursywa (<i> i <em>):

  • <i> – wyświetla tekst kursywą, bez dodatkowego semantycznego znaczenia
  • <em> – również wyświetla tekst kursywą, ale nadaje mu znaczenie semantyczne
<p>To jest <i>tekst kursywą</i>.</p>
<p>To jest <em>ważny tekst kursywą</em>.</p>

To jest tekst kursywą.

To jest ważny tekst kursywą.

Podkreślenie (<u>) – używany do podkreślenia tekstu.

<p>To jest <u>podkreślony</u> tekst.</p>

To jest podkreślony tekst.

Przekreślenie (<s>) – używany do przekreślenia tekstu.

<p>To jest <s>przekreślony</s> tekst.</p>

To jest przekreślony tekst.

Dolny Indeks (<sub>) i Górny Indeks (<sup>):

  • <sup>: używany do indeksu górnego
  • <sub>: używany do indeksu dolnego
<p>x<sup>2</sup> oznacza x do kwadratu.</p>
<p>H<sub>2</sub>O to wzór chemiczny wody.</p>

x2 oznacza x do kwadratu.

H2O to wzór chemiczny wody.

Organizowanie tekstu w listy

Listy są kluczowym elementem organizowania informacji w czytelny sposób. HTML oferuje dwa główne rodzaje list: listy uporządkowane i listy nieuporządkowane.

Listy nieuporządkowane (<ul> i <li>) – listy nieuporządkowane używają punktów (bullet points) do oznaczania elementów listy.

<ul>
    <li>Pierwszy element listy</li>
    <li>Drugi element listy</li>
    <li>Trzeci element listy</li>
</ul>
  • Pierwszy element listy
  • Drugi element listy
  • Trzeci element listy

Listy uporządkowane (<ol> i <li>) – listy uporządkowane używają numeracji do oznaczania elementów listy.

<ol>
    <li>Pierwszy element listy</li>
    <li>Drugi element listy</li>
    <li>Trzeci element listy</li>
</ol>
  1. Pierwszy element listy
  2. Drugi element listy
  3. Trzeci element listy

Zmiana koloru i rozmiaru czcionki za pomocą CSS

Chociaż HTML sam w sobie nie oferuje znaczników do zmiany koloru i rozmiaru czcionki, to możemy użyć CSS (Cascading Style Sheets) do stylizowania tekstu.

Zmiana koloru czcionki

<style>
    .czerwony-tekst {
        color: red;
    }
</style>
<p class="czerwony-tekst">To jest czerwony tekst.</p>

To jest czerwony tekst.

Zmiana rozmiaru czcionki

<style>
    .duzy-tekst {
        font-size: 24px;
    }
</style>
<p class="duzy-tekst">To jest duży tekst.</p>

To jest duży tekst.

Łączne właściwości

<style>
    .stylizowany-tekst {
        color: blue;
        font-size: 20px;
        font-weight: bold;
    }
</style>
<p class="stylizowany-tekst">Duży i pogrubiony tekst w kolorze niebieskim.</p>

Duży i pogrubiony tekst w kolorze niebieskim.

Wyrównanie tekstu

Za pomocą CSS możemy również wyrównywać tekst do lewej, prawej, do środka lub zastosować justowanie.

Wyśrodkowanie:

<style>
    .wycentrowany-tekst {
        text-align: center;
    }
</style>
<p class="wycentrowany-tekst">Tekst wyśrodkowany.</p>

Tekst wyśrodkowany.

Wyrównanie do lewej:

<style>
    .do-lewej {
        text-align: left;
    }
</style>
<p class="do-lewej">Tekst wyrównany do lewej.</p>

Tekst wyrównany do lewej.

Wyrównanie do prawej:

<style>
    .do-prawej {
        text-align: right;
    }
</style>
<p class="do-lewej">Tekst wyrównany do prawej.</p>

Tekst wyrównany do prawej.

Tekst wyjustowany:

<style>
    .wyjustowany-tekst {
        text-align: justify;
    }
</style>
<p class="wyjustowany-tekst">To jest wyjustowany tekst. Justowanie tekstu oznacza, że tekst jest rozciągnięty tak, aby każda linia miała równą szerokość.</p>

To jest wyjustowany tekst. Justowanie tekstu oznacza, że tekst jest rozciągnięty tak, aby każda linia miała równą szerokość.

Formatowanie cytatów i kodów

HTML oferuje również specjalne znaczniki do formatowania cytatów i fragmentów kodu.

Cytaty blokowe (<blockquote>) – znacznik <blockquote> używany do oznaczania długich cytatów blokowych.

<blockquote>
To jest przykład cytatu blokowego. Cytaty blokowe są zazwyczaj wyświetlane z wcięciem.
</blockquote>
To jest przykład cytatu blokowego. Cytaty blokowe są zazwyczaj wyświetlane z wcięciem.

Cytaty inline (<q>) – znacznik <q> używany do oznaczania krótkich cytatów inline.

<p>Jak powiedział Albert Einstein, <q>Wyobraźnia jest ważniejsza niż wiedza.</q></p>

Jak powiedział Albert Einstein, Wyobraźnia jest ważniejsza niż wiedza.

Fragmenty Kodu (<code> i <pre>) – znaczniki <code> i <pre> używane do wyświetlania kodu. Z kolei znacznik <pre> zachowuje formatowanie białych znaków, takich jak spacje i nowe linie.

<p>Oto fragment kodu HTML: <code>&lt;p&gt;To jest paragraf.&lt;/p&gt;</code></p>

Oto fragment kodu HTML: <p>To jest paragraf.</p>

Formatowanie tekstu HTML – podsumowanie

Z pewnością formatowanie tekstu w HTML jest niezbędne do tworzenia czytelnych i estetycznych stron internetowych. Co więcej HTML oferuje szeroką gamę znaczników do formatowania tekstu, od podstawowych znaczników pogrubienia i kursywy po semantyczne znaczniki cytatów i kodu. Dlatego zrozumienie i umiejętne używanie tych znaczników jest kluczowe dla każdego, kto chce tworzyć poprawne semantycznie oraz łatwe do odczytania i dobrze zorganizowane strony www.

    Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *