Praca z tekstem

Paragraf

Podstawowym znacznikiem, w którym umieszczać będziemy treści jest paragraf – czyli blok tekstu.

<p>Tekst w paragrafie</p>

Można myśleć o nim jak o akapicie w książce, ale z punktu widzenia HTML istotne jest to, że zawiera w sobie jedną myśl bądź temat, a nie o to, że ma wcięcia i odpowiednie odstępy – to jest domena języka CSS. W taki sposób należy postrzegać znaczenie wszystkich tagów HTML.

Nagłowki

Do oznaczania nagłówków służą tagi od h1 do h6. Liczba jest po to, aby możliwe było stopniowanie ich ważności. Najczęściej na stronach znajduje się tylko jeden element h1, w którym umieszcza się tytuł artykułu. Poszczególne jego działy wyznacza się nagłówkami o niższej wadze.

<h1>Szalenie ważny nagłówek</h1>
<h2>Bardzo ważny nagłówek</h2>
<h3>Średnio ważny nagłówek</h3>
<h6>Prawnie nieważny nagłówek :-)</h6>

Szalenie ważny nagłówek

Bardzo ważny nagłówek

Średnio ważny nagłówek

Prawnie nieważny nagłówek :-)

Wyróżnianie tekstu

Najczęściej używanymi tagami do zaznaczenia czegoś w tekście są <b></b> – pogrubienie i <i></i> – pochylenie (kursywa). Specyfikacja najnowszej wersji HTML mówi jednak, że powinniśmy używać ich jedynie w< skrajnych przypadkach, kiedy na prawdę nie mamy już żadnej innej możliwości. Jest tak ze względu na prezentacyjny charakter tych znaczników. Poza informacją, że tekst ma być pogrubiony bądź pochylony nie wnoszą one nic do semantyki kodu i wchodzą w kompetencje arkuszy styli.

HTML w coraz szybszym tempie wraca założeniami do wersji w jakiej powstał. Znaczniki mają wskazywać na rodzaj treści a nie jej wizualny aspekt. Co za tym idzie jeżeli jakiś fragment tekstu ma większe znaczenie należy skorzystać z tagu <em></em>, albo <strong></strong> jeżeli ma być wyróżniony jeszcze bardziej. Stosując takie tagi również uzyskamy efekt kursywy albo pogrubienia, ale jednocześnie damy wyszukiwarkom czy różnym urządzeniom, które będą interpretowały nasz kod wkazówkę, że ten element jest szczególnie istotny.

<i>Tekst pochylony</i>
<b>Tekst pogrubiony</b>
<em>Ten tekst jest ważny, i na ogół zostanie wyświetlony pochyloną czcionką</em>
<strong>Ten element jest jeszcze bardziej istotny, dlatego zazwyczaj będzie pogrubiony</strong>
Tekst pochylony
Tekst pogrubiony
Ten tekst jest ważny, i na ogół zostanie wyświetlony pochyloną czcionką
Ten element jest jeszcze bardziej istotny, dlatego zazwyczaj będzie pogrubiony

Co ważne przedstawione powyżej znaczniki są tak zwanymi elementami śródliniowymi. Oznacza to, że w przeciwieństwie do elementu blokowego <p></p> nie zostaną wyświetlone w osobnym bloku – ich efekt widoczny będzie tylko w objętym nimi fragmencie tekstu i nie będą miały żadnego wpływu na układ blokowy dokumentu.

Tekst preformatowny

Podczas interpretacji kodu HTML przeglądarki ignorują wpisane w edytorze znaki puste (spacje czy entery). Jest to wygodne o tyle, że w celu zwiększenia czytelności możemy wykonać odpowiednie odstępy czy wcięcia w kodzie bez wpływu na jego działanie. Czasami jednak zachodzi potrzeba zachowania układu tekstu – np. jeżeli chcemy przepisać wiersz, czy nawet wyświetlić na stronie fragment kodu z zachowaniem jego wizualnej struktury. W takich sytuacjach z pomocą przychodzi znacznik <pre></pre>.

<pre>
Ten
  tekst
     zostanie
           wyświetlony
                   z zachowaniem
                             pustych znaków.
</pre>

Kod komputerowy

Aby oznaczyć, że w danym miejscu zamierzamy umieścić fragment kodu komputerowego skorzystać należy z elementu <code></code>. Zazwyczaj tekst taki będzie wyświetlony czcionką monotypiczną (o stałej szerokości).

<html> <body></body> <head></head> </html>

Należy pamiętać, że umieszczone wewnątrz tagu <code></code> znaczniki HTML nie zostaną unieważnione, to samo dotyczy PHP, JavaScriptu, czy jakichkolwiek innych języków, które mogą na stronie zostać wykonane. Aby unieważnić znaki specjalne wykorzystywane w językach należy zamienić je na encje HTML. Bardzo pomocne okażą się konwertery.

Cytaty

Mamy do dyspozycji również kilka znaczników do ujmowania w nie cytatów. Pierwszym z nich jest <cite></cite>, który określa autora – osobę, którą cytujemy.

Kolejny element to <q></q>, który jest cytatem śródliniowym, czyli możemy go zastosować np. wewnątrz bloku tekstu, na małym jego fragmencie. Co ciekawe przeglądarki zazwyczaj same będą ujmowały taki tekst w cudzysłowy.

<p>
<cite>Albert Einstein</cite> powiedział, że: - <q>Uczony jest człowiekiem, który wie o rzeczach nieznanych innym i nie ma pojęcia o tym, co znają wszyscy.<q>
</p>

Ostatni tag – <blockquote></blockquote> – stosuje się podczas cytowania dłuższego tekstu w postaci osobnego bloku.

Listy

Listy są elementem o bardzo szerokim zastosowaniu, wbrew pozorom nie używa się ich wyłącznie do czytelnej prezentacji treści. Większość osób przyzwyczajonych do korzystania z edytorów tekstowych pomyśli w tym momencie o listach wypunktowanych i numerowanych. Chociaż domyślnie listy w HTML tak właśnie się prezentują to będziemy raczej zastanawiać się czy w zbiorze podpunktów danej listy kolejność ma znaczenie czy też nie. Dlatego będziey mówić o listach uporządkowanych i nieuporządkowanych. Od tych właśnie pojęć pochodzą znaczniki ol (ordered list) i ul (unordered list).

Lista nieuporządkowana

<ul>
		<li>desktop pc</li>
		<li>tablet</li>
		<li>smartfon</li>
		<li>netbook</li>
</ul>
  • desktop pc
  • tablet
  • smartfon
  • netbook

Znacznikami ul oznaczyliśmy początek i koniec listy, tagi li natomiast to kolejne podpunkty. Warto zwrócić uwagę również na ich treść. Wymieniłem tutaj kilka odmian sprzętu komputerowego. W tym przypadku kolejność w jakiej zostaną wyświetlone nie ma znaczenia – dlatego właśnie skorzystalismy z listy nieuporządkowanej.

Lista uporządkowana

<ol>
		<li>Rozdział pierwszy pc</li>
		<li>Rozdział drugi</li>
		<li>Rozdział trzeci</li>
		<li>Rozdział czwarty</li>
</ol>
  1. Rozdział pierwszy pc
  2. Rozdział drugi
  3. Rozdział trzeci
  4. Rozdział czwarty

Lista rozdziałów w książce w zdecydowanej większości przypadków ma uporządkowaną kolejność, dlatego właśnie użylismy do tego celu listy typu ol.