Podczas tworzenia tekstu na stronę internetową zazwyczaj zachodzi potrzeba podzielenia go na mniejsze fragmenty tekstu , czyli paragrafy. Wynika to z chęci podziału tego tekstu na bardziej zwarte bloki, z których każdy odnosi się np. do innego zagadnienia. Taki podział ułatwia późniejsze jego czytanie.

Innym elementem ułatwiającym lekturę dowolnego tekstu są nagłówki – zarówno nagłówki artykułów (czyli ich tytuły), ale także mniejsze nagłówki umieszczanie wewnątrz tekstu w celu zaznaczenia ważniejszych części tekstu.

Język HTML również daje możliwości formatowania tekstu o których pisałem powyżej, m.in. podziału tekstu na paragrafy i wstawiania nagłówków. Wszystko to można uzyskać stosując odpowiednie znaczniki. Oto one:

  • Nagłówki – dostępnych jest sześć różnych nagłówków, różniących się wielkością czcionki. tworzy się je za pomocą znaczników od <h1> (największy) do <h6> (najmniejszy).
    <h1>Nagłówek stopnia 1</h1>
    <h2>Nagłówek stopnia 2</h2>
    <h3>Nagłówek stopnia 3</h3>
    <h4>Nagłówek stopnia 4</h4>
    <h5>Nagłówek stopnia 5</h5>
    <h6>Nagłówek stopnia 6</h6>

    Nagłówek stopnia 1

    Nagłówek stopnia 2

    Nagłówek stopnia 3

    Nagłówek stopnia 4

    Nagłówek stopnia 5
    Nagłówek stopnia 6

    Nagłówek można także wyrównywać za pomocą parametru align, przypisując mu wartości left (wyrównanie do lewej), center (wyrównanie do środka), right (wyrównanie do prawej strony) i justify (tekst wyjustowany). Atrybut ten nie jest zalecany – zamiast niego powinno się stosować polecenie kaskadowych arkuszy stylów CSS text-align.

    <h2 align="left">Nagłówek wyrównany do lewego marginesu strony</h2>
    <h2 align="center">Nagłówek który został wyrównany do środka strony</h2>
    <h2 align="right">Nagłówek wyrównany do prawego marginesu strony</h2>
    <h2 align="justify">Nagłówek który został wyjustowany względem obydwu marginesów</h2>
    <h2 style="text-align: left">Nagłówek wyrównany do lewego marginesu strony</h2>
    <h2 style="text-align: center">Nagłówek który został wyrównany do środka strony</h2>
    <h2 style="text-align: right">Nagłówek wyrównany do prawego marginesu strony</h2>
    <h2 style="text-align: justify">Nagłówek który został wyjustowany względem obydwu marginesów</h2>

    Nagłówek wyrównany do lewego marginesu strony

    Nagłówek który został wyrównany do środka strony

    Nagłówek wyrównany do prawego marginesu strony

    Nagłówek który został wyjustowany względem obydwu marginesów

    Dla nagłówka (oraz także dla bardzo wielu innych znaczników) można także przypisać dodatkowy tekst, który zostanie przez przeglądarkę wyświetlony gdy kursor myszki na dłużej się nad nim zatrzyma (tzw. tooltip – tekst pomocniczy). Służy do tego parametr title

    <h3 title="To jest właśnie opis który może się pokazać jako dodatkowe wyjaśnienie">Zatrzymaj tu kursor myszki</h3>

    Zatrzymaj tu kursor myszki

  • Paragrafy – definiuje się je za pomocą znacznika <p>. Znacznik ten posiada także parametry które zostały wymienione powyżej przy opisywaniu znaczników definiujących nagłówki, czyli align i title. Odnoszą się do nich także te same uwagi.
    <p>Paragraf pierwszy</p>
    <p title="Pomocniczy opis">Paragraf drugi, posiada opis pokazujący się gdy kursor myszki zatrzyma się nad nim</p>
    <p align="center">Paragraf trzeci, który jest wycentrowany</p>
    <p>Paragraf pierwszy</p>
    <p title="Pomocniczy opis">Paragraf drugi, posiada opis pokazujący się gdy kursor myszki zatrzyma się nad nim</p>
    <p style="text-align: center">Paragraf trzeci, który jest wycentrowany</p>

    Paragraf pierwszy

    Paragraf drugi, posiada opis pokazujący się gdy kursor myszki zatrzyma się nad nim

    Paragraf trzeci, który jest wycentrowany

  • Wymuszenie przełamania wiersza (przejście do nowej linii) – służy do tego znacznik <br>. Jak to widać z powyższego przykładu, pomiędzy paragrafami wstawiana jest dodatkowa pusta linia rozdzielająca. Aby jej uniknąć, należy zastosować ten znacznik. Pamiętaj jednak że stosowanie tego znacznika do podziału tekstu na wiersze nie jest jego prawidłowym zastosowaniem – w tym celu należy stosować pokazany wcześniej znacznik <p> (no chyba że chcesz opublikować na swojej stronie internetowej wiersz – wtedy jego zastosowanie jest jak najbardziej uzasadnione).
    Znacznik ten jest też jednym ze znaczników które w HTML nie mają znacznika zamykającego, dlatego pisząc swoją stronę w XHTML musisz pamiętać o jego zamknięciu (pierwszy przykład w HTML, drugi w XHTML):

    <p>Paragraf, który tutaj<br>został przełamany po raz pierwszy, 
        a tutaj<br>po raz kolejny</p>
    <p>Paragraf, który tutaj<br />został przełamany po raz pierwszy, 
        a tutaj<br />po raz kolejny</p>

    Paragraf, który tutaj
    został przełamany po raz pierwszy, a tutaj
    po raz kolejny

  • Centrowanie – można wykonać za pomocą znacznika <center>. Znacznik ten nie jest zalecany – zamiast niego powinno się stosować wymienione już wcześniej polecenie kaskadowych arkuszy stylów CSS text-align.
    <center>Ten tekst jest wycentrowany</center>
  • Tekst preformatowany – uzyskuje się go za pomocą znacznika <pre>. W obrębie takiego bloku tekst pisany jest czcionką o stałej szerokości znaku, uwzględniane są także przy wyświetlaniu wszelkie spacje, tabulatory i znaki nowej linii.
    <pre>Tu wstawię cztery    spacje, i Enter na końcu
        Tu jest tabulator
            A tu dwa tabulatory
    Poniżej jest prosta tabelka
      1   2   3
     11  22  33
      1  23   4</pre>

    Tu wstawię cztery    spacje, i Enter na końcu
            Tu jest tabulator
                    A tu dwa tabulatory
    Poniżej jest prosta tabelka
      1   2   3
     11  22  33
      1  23   4
  • Cytat – do stworzenia większego bloku zawierającego cytat, służy znacznik <blockquote>. Tak stworzony cytat jest odsunięty nieco od lewego brzegu dokumentu. Do rozdzielania kolejnych linii (np. w wierszu) należy stosować znacznik <br>.
    <blockquote><div>To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej linii i będzie musiał być kontynuowany w kolejnej, a tu<br>wstawiony zostanie znacznik przejścia do nowej linii</div></blockquote>

    To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej linii i będzie musiał być kontynuowany w kolejnej, a tu
    wstawiony zostanie znacznik przejścia do nowej linii

    Uwaga: Używanie tego znacznika wyłącznie do tworzenia wcięć nie jest zalecane. Zamiast niego wskazane jest ustawienie lewego marginesu za pomocą odpowiedniego polecenia kaskadowych arkuszy stylów CSS:

    <div style="margin-left: 30px">To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej linii i będzie musiał być kontynuowany w kolejnej, a tu<br>wstawiony zostanie znacznik przejścia do nowej linii</div>

    To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej linii i będzie musiał być kontynuowany w kolejnej, a tu
    wstawiony zostanie znacznik przejścia do nowej linii
  • Adres – do wstawienia bloku zawierającego adres można użyć znacznika <address>
    <address>Jan Trawka<br>ul. Błotna 12/34<br>56-789 Bagienko Mniejsze</address>

    Jan Trawka
    ul. Błotna 12/34
    56-789 Bagienko Mniejsze
  • Obramowanie – do stworzenia ramki otaczającej np. tekst służy znacznik <fieldset>
    <fieldset>Ten napis znajduje się w ramce</fieldset>

    Ten napis znajduje się w ramce

    To jednak nie wszystko co oferuje ten znacznik – jeżeli wewnątrz niego wstawiony zostanie znacznik <legend>, to ramka będzie posiadała tytuł. Taką ramkę można użyć np. do zgrupowania przycisków radiowych w formularzu (jest to opisane w lekcji poświęconej formularzom).

    <fieldset><legend>Tytuł</legend>Tekst w ramce z tytułem</fieldset>

    Tytuł

    Tekst w ramce z tytułem

  • Pozioma linia – wstawia się ją za pomocą znacznika <hr>
    tekst nad linią<hr>tekst pod linią

    tekst nad linią


    tekst pod linią

    Za pomocą parametrów tego znacznika można uzyskać następujące efekty:

    • usunąć “cień”, za pomocą parametru noshade. Ten atrybut nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
      <hr noshade>
      <hr style="border-bottom: solid 1px gray" />


    • zmienić grubość linii za pomocą parametru size. Ten atrybut też nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
      linia o grubości 10<hr size="10">
      linia o grubości 10<hr style="height: 10px">

      linia o grubości 10


    • zmienić długości linii – odpowiednią wartość należy podać w pikselach lub w procentach, jako wartość parametru width. Jest to kolejny atrybut który nie jest zalecany, zamiast którego się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
      linia o długości 100 pikseli<hr width="100">
      linia o długości 50%<hr width="50%">
      linia o długości 100 pikseli<hr style="width: 100px">
      linia o długości 50%<hr style="width: 50%">

      linia o długości 100 pikseli


      linia o długości 50%


    • wyrównać linię do jednego z brzegów lub do środka, za pomocą parametru align. Dozwolone są wartości: left (wyrównanie do lewej strony), center (wyrównanie do środka) i right (wyrównanie do prawej strony). Atrybut ten nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
      linia wyrównana do lewej
      <hr width="50%" align="left">
      linia wyrównana do środka
      <hr width="50%" align="center">
      linia wyrównana do prawej
      <hr width="50%" align="right">
      linia wyrównana do lewej
      <hr style="width: 50%; text-align: left; margin-left: 0">
      linia wyrównana do środka
      <hr style="width: 50%; text-align: center; margin-left: auto; margin-right: auto">
      linia wyrównana do prawej
      <hr style="width: 50%; text-align: right; margin-right: 0">

      linia wyrównana do lewej


      linia wyrównana do środka


      linia wyrównana do prawej


  • Element grupujący blokowy – czyli znacznik <div>. Został wprowadzony przede wszystkim aby umożliwić łatwe zastosowanie kaskadowego arkusza stylów w stosunku do określonej grupy znaczników HTML (zostanie to omówione w osobnym kursie), ale można go także użyć go pozycjonowania elementów poprzez wykorzystanie parametru align z wartościami leftcenter i right. Atrybut ten nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
    <div align="right">
    <p>Pierwszy paragraf wyrównany do prawej</p>
    <p>Drugi paragraf wyrównany do prawej</p>
    </div>
    <div style="text-align: right">
    <p>Pierwszy paragraf wyrównany do prawej</p>
    <p>Drugi paragraf wyrównany do prawej</p>
    </div>
  • Komentarz – w pewnych sytuacjach chcielibyśmy wstawić komentarz do pliku HTML, aby np. oznaczyć pewne miejsca (jak np. miejsce od którego zaczyna się menu czy właściwa treść strony), lub też “wyłączyć” pewne fragmenty kodu, które tymczasowo nie są potrzebne. Służy do tego znacznik <!-- -->, w obrębie którego wstawia się komentarz.
    <!-- to jest komentarz -->