Kurs html cz.2 Prezentacja tekstu

Witam w drugiej części kursu html. W tej części dowiesz się w jaki sposób możesz prezentować treść strony, którą będziemy umieszczali w sekcji <body> </body>. Jeśli nie pamiętasz, co powinna zawierać sekcja <body> </body> wróć do pierwszej części kursu. Pamiętaj również aby nie zapamiętywać wszystkich znaczników, które zostaną tutaj wymienione gdyż nie ma to większego sensu z bardzo prostego powodu – mianowicie zawsze możesz zajrzeć tutaj. 



Celem dla, którego tworzymy stronę internetową jest chęć przekazania internautom pewnych treści. Jak powszechnie wiadomo dobrze sformatowany tekst na stronie czyta się przyjemnie i szybko wyłapując ważne informacje. Dlatego też w html’u wprowadzono znaczniki, które są odpowiedzialne za formatowanie tekstu. Zacznijmy zatem od nagłówków: 

Nagłówki

Język html daje nam do dyspozycji sześć rozmiarów nagłówków, które są używane do umieszczenia na stronie jaka sama nazwa wskazuje nagłówków lub po prostu tytułu przykładowo jakiegoś newsa. Znacznik, który o tym mówi wygląda następująco: 

<hx>treść nagłówka </hx> - za literkę x wpisujemy cyfry od 1-6. Wpisując <h1> </h1> uzyskujemy największy rozmiar czcionki natomiast wpisując <h6> </h6> uzyskujemy najmniejszy rozmiar czcionki. Dzięki nagłówkom możemy wyróżnić ważny element strony. Należy pamiętać aby nie używać tego znacznika zbyt często gdyż tekst staje się wtedy nieczytelny i ciężko jest wyłapać najważniejsze informacje. 

Akapity

W akapitach umieszczamy tekst, który automatycznie będzie się dopasowywał do szerokości okna przeglądarki czyli rozdzielczości jaką mamy ustawioną na komputerze. Po każdym akapicie zostaje dodana linijka odstępu. Znacznik akapitu wygląda następująco: 

<p>Tekst artykułu </p> 

Akapitów na stronie można umieszczać nieskończenie wiele, ale również trzeba to robić rozsądnie aby nie stracić na czytelności strony. Generalnie nowy akapit tworzymy wtedy kiedy rozpoczynamy nową myśl w pisanym tekście lub rozpoczynamy zupełnie inny temat. 

Cytaty

W celu zacytowania jakiegoś fragmentu z innego źródła należy zastosować znacznik: 

<blockquote> Cytowany tekst </blockquote> 

Fragmenty tekstu możesz również cytować wewnątrz bloku tekstowego np. akapitu. W takim przypadku należy użyć znacznika: 
<p> <q> fragment cytowany </q> </p> 

Efektem zastosowania znacznika cytatu zauważymy na stronie w postaci tekstu objętego cudzysłowem. 

Indeks górny i dolny

W html’u możemy również wstawić indeks górny i indeks dolny. W celu uzyskania indeksu górnego bądź dolnego należy użyć znacznika: 

<p>Pole powierzchni kwadratu 23m <sup>2 </sup> </p> (znacznik <sup> </sup> indeks górny) 

<p>Niewiadoma x <sub>2 </sub> </p> (znacznik <sub> </sub> indeks dolny) 

Łamanie wierszy

Czasami zdarzają się sytuacje, że wybrany wiersz musi koniecznie zaczynać się od nowej linii bez względu na to czy tekst znajduje się w bloku tekstu czy też nie. W celu uzyskania takiego efektu należy użyć znacznika <br>. Znacznik umożliwia załamanie linii w miejscu gdzie zostanie wpisany. Należy pamiętać, że zbyt częste używanie tego znacznika uważane jest za nieprofesjonalne. Zaleca się używanie bloków tekstu aby uzyskać efekt załamania linii. 

Wyróżnianie tekstu

W zdaniu zdarzają się słowa, które trzeba wyróżnić dla zaznaczenia, że jest to bardzo istotny zwrot bądź element całej zawartości warty uwagi. W html’u umieszczone specjalne znaczniki umożliwiające wyróżnienie jednego słowa w bloku tekstu. Wygląda to następująco: 

<strong> </strong> - efektem jest pogrubienie tekstu 

<Em> </Em> - efektem jest pochylony tekst 

<code> </code> - przydatny kiedy chcemy pokazać listnig kodu przykładowego programu 

Twarda spacja

Umieszczając w bloku tekstu dodatkowe spacje przeglądarka automatycznie je zignoruje i efektem jaki uzyskamy będzie jedna spacja zamiast przerwy jaką wykonaliśmy za pomocą klawisza spacji. W celu uzyskania dużego odstępu między wskazanymi wyrazami należy wstawić twardą spację. Twardą spacje wstawiamy za pomocą znacznika: 

Po zastosowaniu twardej spacji uzyskamy odstęp między wyrazami. Oczywiście aby uzyskać jeszcze większy odstęp musimy użyć twardej spacji wielokrotnie. Należy jednak zwrócić uwagę na to, że wielokrotne używanie twardej spacji powoduje zwiększenie ilości kodu strony, co może spowodować dłuższe ładowanie się strony z serwera.