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>
- Pierwszy element listy
- Drugi element listy
- 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><p>To jest paragraf.</p></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.