Artykuł
09/20/2011

Samouczek: Formatowanie tekstu w HTML - Kurs HTML i CSS

Autor: Mateusz Mikulski

Opublikowano: 2011-09-19

Większość stron internetowych zawiera tekst pisany. Aby oznaczyć ważne lub charakterystyczne elementy (takie jak kod, czy zmienne) należy go zdefiniować za pomocą odpowiednich znaczników HTML.

Przed wykonaniem zadań powinieneś wiedzieć:

Jak utworzyć stronę internetową

Po wykonaniu zadań nauczysz się:

jak poprawnie formatować tekst, przy użyciu podstawowych znaczników HTML,
jak zmieniać wygląd standardowych znaczników HTML.

Implementacja

Twoim zadaniem jest utworzenie nowej strony internetowej, wypełnienie jej tekstem, a następnie wypełnienie jej tekstem wyróżnionym semantycznie. Dodatkowo musisz zmienić standardowy wygląd znacznika strong.

Efekt końcowy został przedstawiony na Rys. 1.

Rys 1. Efekt końcowy zadania.

Przygotowanie strony internetowej

Przygotujemy podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.

Otwórz edytor HTML i utwórz szkielet strony.

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

W znaczniku title wpisz: Formatowanie tekstu w HTML.
W znaczniku body wpisz:

<p>
TEKST BEZ FORMATOWANIA:<br /><br />
To jest bardzo ważny element tekstu!<br />
To jest element podkreślający jakąś myśl<br />
To jest indeks dolny<br />
To jest indeks górny<br />
To jest usunięty fragment tekstu<br />
To jest skrót<br />
To jest akronim<br />
To jest cytat<br />
To jest część definicji<br />
To jest część kodu<br />
To jest przykładowy kod<br />
To jest element który powinien wprowadzić użytkownik<br />
To jest zmienna<br />
</p>

Zapisz stronę. Otwórz stronę w przeglądarce. Strona powinna wyglądać tak, jak na Rys 2.

Rys 2. Strona internetowa wypełniona podanym w zadaniu tekstem.

Wprowadzenie poprawnie sformatowanego tekstu w HTML

W celu poprawnego sformatowania tekstu należy użyć znaczników języka HTML, odpowiednich do typu wprowadzanego tekstu. Najczęściej używanymi znacznikami tego typu są:

 - znacznik używany do mocnego wyróżnienia tekstu;
 - znacznik używany do wyróżnienia tekstu;
 - znacznik używany do oznaczenia dolnego indeksu;
 - znacznik używany do oznaczenia górnego indeksu;
<del></del> - znacznik używany do oznaczenia usuniętego tekstu;
<abbr></abbr> - znacznik używany do oznaczenia skrótu;
<acronym></acronym> - znacznik używany do oznaczenia akronimu;
<cite></cite> - znacznik używany do oznaczenia cytatu;
<dfn></dfn> - znacznik używany do oznaczenia definicji;
<samp></samp> - znacznik używany do oznaczenia przykładowego kodu;
<code></code> - znacznik używany do oznaczania fragmentu kodu;
<var></var> - znacznik używany do oznaczenia zmiennej;
<kbd></kbd> - znacznik używany do oznaczenia części tekstu, wprowadzanego przez użytkownika.

Dodaj poprawnie sformatowany tekst na stronę.

Do przygotowanej strony, poniżej wcześniej dodanej treści, wpisz:

<p>
To jest poprawnie sformatowany <strong>bardzo ważny</strong> element! <br />
To jest poprawnie sformatowany element <em>podkreślający</em> jakąś myśl<br />
To jest poprawnie sformatowany <sub>indeks dolny</sub><br />
To jest poprawnie sformatowany <sup>indeks górny</sup><br />
To jest poprawnie sformatowany <del>usunięty fragment tekstu</del><br />
To jest poprawnie sformatowany <abbr>skrót</abbr><br />
To jest poprawnie sformatowany <acronym>akronim</acronym><br />
To jest poprawnie sformatowany <cite>cytat</cite><br />
To jest poprawnie sformatowana <dfn>część definicji</dfn><br /> 
To jest poprawnie sformatowany przykładowy <samp>Kod</samp><br />
To jest poprawnie sformatowana część <code>kodu</code><br />
To jest poprawnie sformatowana <var>zmienna</var><br />
To jest poprawnie sformatowany element <kbd>który powinien wprowadzić użytkownik</kbd> 
</p>

Informacja

Często do formatowania tekstu w HTML używane są znaczniki oraz ; jest to działanie wywołujące wiele kontrowersji. Użycie takich znaczników nie sygnalizuje właściwie, przeglądarce klienta, typu oznaczonego tekstu. Mimo na pozór krótszej i wygodniejszej pisowni powinno się z nich zrezygnować na rzecz znaczników bardziej poprawnych od semantycznej strony języka. Zmian wyglądu, takich jak pogrubienie czcionki etc., powinno dokonywać się poprzez Kaskadowe Arkusze Stylów (CSS).

Więcej o zmianie wyglądu zawartości znacznika przeczytasz w: Jak zmienić wygląd zawartości znacznika code w CSS.

Zapisz zmiany. Odśwież stronę w przeglądarce. Strona powinna teraz wyglądać tak, jak na Rys. 3.

Rys. 3. Strona po dodaniu poprawnie sformatowanego tekstu.

Zmiana formatowania elementu

Wykorzystanie znaczników semantycznych – to znaczy takich, które opisują nie wygląd, ale znaczenie tekstu, umożliwia zmianę wyglądu wszystkich elementów na stronie za pomocą CSS.

Do nagłówka strony dodaj (jeśli nie wiesz, jak to zrobić, zobacz Jak umieszczać style CSS):

<style type="text/css">
    strong { 
        color: Red; 
        text-decoration: underline; }
</style>

Zapisz stronę i otwórz ją w przeglądarce. Strona powinna wyglądać tak, jak na Rys. 1.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod strony HTML:

<html>
<head>
    <title>Formatowanie tekstu w HTML</title>
    <style type="text/css">
    strong { 
        color: Red; 
        text-decoration: underline; }
    </style>
</head>
<body>
    <p>
        TEKST BEZ FORMATOWANIA:<br />
        <br />
        To jest bardzo ważny element tekstu!<br />
        To jest element podkreślający jakąś myśl<br />
        To jest indeks dolny<br />
        To jest indeks górny<br />
        To jest usunięty fragment tekstu<br />
        To jest skrót<br />
        To jest akronim<br />
        To jest cytat<br />
        To jest część definicji<br />
        To jest część kodu<br />
        To jest przykładowy kod<br />
        To jest element który powinien wprowadzić użytkownik<br />
        To jest zmienna<br />
    </p>
    <p>
        To jest poprawnie sformatowany <strong>bardzo ważny</strong> element!
        <br />
        To jest poprawnie sformatowany element <em>podkreślający</em> jakąś myśl<br />
        To jest poprawnie sformatowany <sub>indeks dolny</sub><br />
        To jest poprawnie sformatowany <sup>indeks górny</sup><br />
        To jest poprawnie sformatowany <del>usunięty fragment tekstu</del><br />
        To jest poprawnie sformatowany
        <abbr>skrót</abbr><br />
        To jest poprawnie sformatowany <acronym>akronim</acronym><br />
        To jest poprawnie sformatowany <cite>cytat</cite><br />
        To jest poprawnie sformatowana <dfn>część definicji</dfn><br />
        To jest poprawnie sformatowany przykładowy
        <samp>Kod</samp><br />
        To jest poprawnie sformatowana część <code>kodu</code><br />
        To jest poprawnie sformatowana
        <var>zmienna</var><br />
        To jest poprawnie sformatowany element <kbd>który powinien wprowadzić użytkownik</kbd>
    </p>
</body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się, jak przy użyciu podstawowych znaczników poprawnie sformatować tekst w HTML. Nauczyliśmy się również zmieniać standardowy wygląd elementu.

W kolejnym artykule nauczymy się Tworzyć i formatować listy.

Dodatkowo zobacz: