Kurs z HTML dla początkujących

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

Kategoria wpisu Kurs HTML, Kursy, Tekst Tagi: , , , on przez .



Reading Time: 3 minutes

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!

Sytemy CMS

Obecnie najpopularniejszym typem stron są witryny z systemem CMS (do zarządzania treścią). Posiadają one wbudowane edytory treści ułatwiające jej wprowadzanie. Niestety nie oznacza to, że wprowadzenie treści jest łatwe.

uwaga: nigdy nie przyklejaj bezpośrednio z plikó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 (przedefiniowane)

Na mojej stronie nagłówki prezentują się następująco:

Nagłówek 1

Nagłówek 2

Nagłówek 3

Nagłówek 4

Nagłówek 5
Nagłówek 6

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.

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.

Akapity

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

 

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

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

 

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ą.

 

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

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

 

Przykładowe inne elementy

Odsyłacze w treści HTML

Przekreślenie Tekstu HTML/CSS

Pogrubiony, pochylony lub podkreślony tekst

Przeczytaj również

Wyśrodkowanie w poziomie za pomocą CSS Istnieje kilka metod na wyśrodkowanie poziomie div-a lub innego elementu strony w większości jest to związane z innymi ustawieniami takimi jak miejsce...
Indeks Górny i Dolny w HTML i/lub CSS W języku skryptowym HTML jak i w CSS bardzo łatwo uzyskać jest efekt mniejszego tekstu u góry (indeks górny) lub dołu normalnego (indeks dolny). I...
Zmiana rozmiaru fontu na stronie z HTML Rozmiar fontu (czcionki elektronicznej) na stronie można zmienić na kilka sposobów jednym z nich jest zastosowanie znacznika HTML . Roz...
Zastosowanie właściwości outline Właściwość outline w zastosowaniu jest bardzo podobna do "border"(obramowanie) - podobnie jak ona stanowi formę obramowania (konturu) obiektu. Wyk...