Nagłówki i podział tekstu w plikach stron WWW

Czas czytania: 3 minut

Podczas umieszczania tekstu na stronie internetowej bardzo istotne jest by tekst był odpowiednio sformatowany. Zadajcie sobie pytanie jakie teksty czyta się lepiej. Długie ciągłe pozbawione widocznych akapitów? Czy może podzielone na sekcje z ładnymi nagłówkami i akapitami?

Zdecydowanie te drugie!

Systemy CMS (z edytorem)

Obecnie najpopularniejszym typem witryn internetowych są te wyposażone w systemem CMS (do zarządzania treścią). Posiadają one wbudowane edytory z pomocą, których w łatwy sposób można umieścić na stronie różnego typu treści. Niestety nie oznacza to, że wprowadzenie treści jest łatwe – trzeba się bowiem nauczyć obsługi edytora. Pomimo to próg wejścia do tego typu strony przynajmniej po stronie docelowego użytkownika jest dużo niższy niż w przypadku tradycyjnej strony.

Oznacza to, że aktualizować stronę lub wprowadzać produkty do sklepu może osoba jedynie po krótkim przeszkoleniu.

uwaga: nigdy nie przyklejaj bezpośrednio z plików z edytorów tekstów takich jak MS Word czy OpenOffice – najpierw wklej je do notatnika potem do edytora CMS i na nowo sformatuj. W przeciwnym razie oprócz tekstu wkleisz także dużo niepotrzebnych śmieci, które mogą zostać odczytane jako kod CSS przez przeglądarki internetowe.

Strony statyczne

Innym typem stron są strony, w których treść edytujemy bezpośrednio w plikach, co jest już nieco bardziej skomplikowane.

Nieważne jaki typ strony internetowej się posiada na pewno warto jest poznać podstawowe zasady edycji tekstu. W większości przypadków do edycji treści wykorzystujemy HTML i CSS.

Typy nagłówków dostępne w HTML (predefiniowane)

<h1>Nagłówek 1</h1>
<h2>Nagłówek 2</h2>
<h3>Nagłówek 3</h3>
<h4>Nagłówek 4</h4>
<h5>Nagłówek 5</h5>
<h6>Nagłówek 6</h6>

Domyślnie wielkość nagłówków prezentuje się następująco:

See the Pen
nagłówki by Aura (@Julka85)
on CodePen.0

Nagłówki HTML na stronie internetowej powinny funkcjonować tak samo jak rozdziały w książce. Posiadamy więc jeden tytuł (H1 – najważniejszy nagłówek), rozdziały (H2), pod rozdziały (H3) i tak dalej.

Wygląd nagłówków edytujemy w CSS tak samo jak innych elementów HTML. Czyli jeśli chcemy np. zmienić kolor tła lub fontu (czcionki) może to wyglądać następująco:

h2{
color: pink;
background: #ccc;
}

Czym się charakteryzuje H1

<h1> jest najważniejszy na całej stronie. Podobnie jak w przypadku książki powinna się w nim znajdować najważniejsza informacja czyli np. tytuł strony lub podstrony. Ze względu na swoją rolę powinien być tylko jeden – na podstronie. Czasami błędnie

Akapity

Kolejnym istotnym elementem są akapity – czyli praktycznie nasza treść. Tworzy się je w HTML podobnie jak poniżej:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et diam et felis accumsan faucibus nec in ante. Sed sit amet consequat lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue magna, fringilla sit amet ante vitae, placerat bibendum felis. Sed ut felis </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et diam et felis accumsan faucibus nec in ante. Sed sit amet consequat lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue magna, fringilla sit amet ante vitae, placerat bibendum felis. Sed ut felis </p>

Jak widać w przykładzie mamy 2 akapity – dzięki czemu tekst zrobił się bardziej czytelny. Akapit rozpoczynamy od <p> a kończymy </p>. To w jaki sposób i gdzie umieścimy nasz akapit zależy tylko od nas.

Teraz powiedzmy, że chcemy dodać przejście do następnej linii bez zakończenia akapitu – zwiększają.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et diam et felis accumsan faucibus nec in ante. Sed sit amet consequat lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>

Sed augue magna, fringilla sit amet ante vitae, placerat bibendum felis. Sed ut felis</p>

Przełamanie tekstu bez zakończenia akapitu otrzymujemy dzięki <br>.

Przykładowe inne elementy

• https://www.aurainweb.pl/2016/09/odsylacze-tresci-html/
• https://www.aurainweb.pl/2017/01/przekreslenie-tekstu-html/
• https://www.aurainweb.pl/2016/11/pogrubiony-pochylony-lub-podkreslony-tekst/