W HTML wyróżnia się sześć różnych poziomów nagłówków. Są one zdefiniowane za pomocą elementów h1 do h6.
<h1>Poziom nagłówka 1</h1> <h2>Poziom nagłówka 2</h2> <h3>Poziom nagłówka 3</h3> <h4>Poziom nagłówka 4</h4> <h5>Poziom nagłówka 5</h5> <h6>Poziom nagłówka 6</h6>
Nagłówek h1 reprezentuje największy, h6 najmniejszy nagłówek. W HTML5 wprowadzono dodatkowe możliwości definiowania nagłówków, które zostaną przedstawione w dalszej części.
Różne poziomy nagłówków pomagają w strukturyzacji tekstu. Możecie się zainspirować na przykład książkami. Tam jest tytuł książki, odpowiadający treści elementu h1. Dlatego na każdej stronie HTML powinien być tylko jeden element h1. Reszta tekstu jest następnie podzielona na pozostałe poziomy. Po głównym nagłówku następuje h2. Podrozdziały h2 są z kolei oznaczone elementem h3.
Uwaga: Rozmiary poziomów nagłówków początkowo są ustalane przez przeglądarki. Jednak możecie je określić dokładnie poprzez użycie CSS. Więcej na ten temat później.
Użycie poziomów nagłówków jest bardzo proste. Wpisujecie h, a następnie żądaną cyfrę poziomu.
<h1>PSD-Tutorials.de</h1>
Za tak zdefiniowanym nagłówkiem automatycznie dodawany jest znak nowej linii oraz odstęp od następnych elementów.
Bardzo ważne jest, aby cyfry w tagach otwierających i zamykających były identyczne.
Definiowanie akapitów
Oprócz nagłówków, teksty składają się również z akapitów. Takie akapity można również bardzo łatwo zdefiniować w HTML. Do tego służy element p. Taki zaznaczony akapit domyślnie posiada pewien odstęp od następnych elementów. Jak duży jest ten odstęp, możecie znowu kontrolować za pomocą CSS.
Oto przykład dwóch definicji akapitu:
<p>To jest akapit</p> <p>To też jest akapit</p>
Widok w przeglądarce prezentuje się następująco:
W HTML5 nie jest konieczne, aby otwarte akapity były zamykane za pomocą </p>. Dla czytelności jednak zalecam faktyczne użycie zamykającego </p>.
Ręczne przerwy w wierszu
Standardowo przeglądarka automatycznie łamie tekst wewnątrz akapitów, list itp., gdy jest na przykład szerszy niż okno przeglądarki. Jest to praktyczne, ponieważ unika się niepotrzebnego poziomego przewijania. Dodatkowo można jednak wymusić łamanie tekstu w dowolnym miejscu. Do tego służy element <br />. Należy pamiętać, że jest to tzw. samowystarczalny tag, który sam się zamyka, nie ma zatem tagu zamknięcia.
<p>Dla pracowników, którzy pracują dzień i noc<br /> Ludzką ręką i umysłem, żeby zarobić swoją zapłatę<br /> Którzy od wieków nie tylko dla twojego chleba<br /> Szli krwią za swoje kraje i liczyli swoich poległych</p>
Przy użyciu <br /> nie ma znaczenia, czy znajduje się na końcu linii czy w osobnej linii. Wynik wygląda tak samo w obydwu przypadkach:
Powracając jeszcze do automatycznego łamania wierszy wstawianego przez przeglądarkę. Czasami jest to problematyczne, gdyż nie można kontrolować, gdzie dokładnie nastąpi podział. Może to prowadzić do niepożądanych rezultatów. Przykładem takiego działania są numery wersji.
iPhone 5
To powinno być normalnie w jednej linii. Podział wiersza między iPhone a 5 nie powinien wystąpić.
iPhone 5
Tego rodzaju sytuacje można unikać poprzez tzw. spacje niemożliwe do usunięcia. Przykład:
Sekwencja ta definiuje taką zabezpieczoną spację. W przeglądarce jest ona wyświetlana jako zwykła spacja: 
Aby to działało zgodnie z oczekiwaniami, nie wolno dodawać spacji w treści źródłowej. Coś takiego nie zadziała:
Tekst sformatowany
Mogą wystąpić sytuacje, w których chcesz wyświetlić tekst dokładnie w takiej samej formie, jak w kodzie źródłowym. Typowym przykładem są listy programów, takie jak te, które często można znaleźć na PSD-Tutorials.de.
W tym celu HTML umożliwia definiowanie fragmentów tekstu sformatowanych. Wówczas wcięcia są brane pod uwagę przez przeglądarkę tak, jak są zdefiniowane w kodzie źródłowym. Poniższy przykład pokazuje, jak takie coś można zrealizować:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Hallo, Welt!" in PHP</h1> <pre> <?php echo "Hallo, Welt\\n"; ?> </pre> </body> </html>
Aby wyświetlić fragment jako tekst sformatowany, definiuj go wewnątrz elementu pre. Wstawiaj tam wcięcia itp. dokładnie tak, jak mają być wyświetlone przez przeglądarkę.
Podczas przeglądania kodu przykładu zauważysz dziwne znaki <?php oraz ?>. W przeglądarce zostaną one wyświetlone jako <?php oraz ?>. Wykorzystana w kodzie źródłowym opcja nazywa się maskowaniem znaków. Jest to konieczne, gdy nie chcesz, aby przeglądarka interpretowała znaki własne dla HTML. Jeśli wprowadzisz bezpośrednio w kod <?php, przeglądarka uzna to za początek obszaru PHP. Dlatego maskuje się znaki.
• Zamień znak & na ciąg znaków &
• Zamień znak < na ciąg znaków <
• Zamień znak > na ciąg znaków >
• Zamień cudzysłowy na "
Element pre nie służy tylko do wyświetlania list programów. Także dane tabelaryczne można w ten sposób łatwo przedstawić. Poniższy przykład pokazuje typową tabelę, która została utworzona wyłącznie za pomocą spacji wewnątrz elementu pre.
<pre> Zielort Abfahrt Ankunft Bahnsteig ---------------------------------------------------------------- Berlin 10:23 14:30 2 Hamburg 11:09 13:20 13 München 12:04 15:45 1a </pre>
Wynik w przeglądarce wygląda następująco:
Przeglądarki rzeczywiście uwzględniają spacje zdefiniowane w tekście źródłowym. Pokazana wersja tabeli działa całkiem dobrze. Dla mnie jest to dość praktyczne rozwiązanie dla małych tabel. Jednak gdy dane stają się bardziej rozbudowane, lepiej skorzystać z klasycznych tabel HTML. Jak je definiować, również dowiecie się w kolejnych częściach tego cyklu.
