HTML – Podstawowa edycja tekstu na stronie internetowej.

Damian Grabowski

W języku (X)HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu:

  1. Znaczniki formatujące – mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to np.: CENTER (wyśrodkowanie), B (pogrubienie), I (pochylenie), U (podkreślenie), S i STRIKE (przekreślenie), FONT (czcionka), BASEFONT (czcionka bazowa), BIG (czcionka powiększona) SMALL (czcionka pomniejszona). Użycie tych znaczników gwarantuje, że w każdej sytuacji tekst otrzyma określone formatowanie (wygląd), ale nic nie mówi o charakterze tego tekstu. Innymi słowy: nie wiemy, czy tekst jest pogrubiony dlatego, że zawiera ważny termin, który powinien się wyróżniać, czy może dlatego, że autor strony chciał w tym miejscu po prostu wprowadzić czcionkę pogrubioną, bo akurat dobrze komponuje się z innymi elementami strony.
  2. Znaczniki semantyczne – określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie, ale nie jest to wymagane. Są to np.: Hn (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR (zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres), INS i DEL (zmiany), ABBR (skrót), ACRONYM (akronim), DFN(definicja). Nie ma żadnej pewności, w jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik <strong>...</strong> jest pogrubiony, ale nic nie stoi na przeszkodzie, aby jakaś specjalna przeglądarka wyświetliła go normalnie, a jedynie ze zmienionym na czerwono kolorem.

 

Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników:

  1. w bloku – podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki końca linii (linijki przerwy) przed oraz po takim bloku tak, że każdy taki element jest wyświetlany w nowej linii. Generalnie element blokowy może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur niż elementy wyświetlane w linii. Wyjątkami od tej reguły są akapit i adres, które mimo że stanowią elementy blokowe, nie mogą zawierać w sobie dodatkowych bloków – w tym innych akapitów.
  2. w linii – elementy takie są wyświetlane normalnie, tzn. bez dodawania dodatkowych interlinii przed i po (tak jak zwykły tekst). Dwa takie elementy mogą znajdować się w jednej linii – obok siebie. Nie mogą one zawierać w sobie elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst.

 

Akapit

<p>...</p>

Akapit jest to część tekstu objęta znacznikami: <p>...</p>. Następujące bezpośrednio po sobie akapity są oddzielone przerwą w tekście (pustą linią). Dzięki umieszczaniu w kolejnych akapitach treści nieco różniącej się tematycznie, strona stanie się bardziej estetyczna oraz czytelniejsza.

 

Wyrównanie akapitu

<p align="left">...</p>
<p align="right">...</p>
<p align="center">...</p>
<p align="justify">...</p>

<p style="text-align: left">Tekst wyrównany do lewej</p>
<p style="text-align: right">Tekst wyrównany prawej</p>
<p style="text-align: center">Tekst wycentrowany</p>
<p style="text-align: justify">Tekst wyrównany do lewej i prawej</p>

Powyżej widać sposoby wycentrowania akapitu do w konkretne miejsca.

WAŻNE: Spora część znaczników została zdeprecjonowana w przez specyfikację HTML 4.01. Oznacz to iż nie należy ich juz stosować. Zaleca się używania w takich przypadkach styli, czyli kolejnych elementów w powyższym przykładzie.

Powyższy sposób wyrównania można zastosować do każdego znacznika HTML który może wymagać pozycjonowania.

 

Tytuł czyli nagłówek akapitu, rozdziału, czy części tekstu

<hn>...</hn>

gdzie n to liczba od 1 do 6.

Istnieje sześć rzędów tytułów. Najwyższym rzędem jest rząd pierwszy: <h1>...</h1>, a najniższym – szósty: <h6>...</h6>. Tytuł wyższego rzędu jest pisany większą czcionką.

 

Wyrównanie nagłówka

<h1 style="text-align: left">Nagłówek wyrównany do lewej</h1>
<h1 style="text-align: right">Nagłówek wyrównany prawej</h1>
<h1 style="text-align: center">Nagłówek wycentrowany</h1>
<h1 style="text-align: justify">Nagłówek wyrównany do lewej i prawej</h1>

Dymek narzędziowy (demek pojawiający sie po najechaniu na tekst)

Stosując polecenie: <hn title="Tu podaj opis">...</hn>, możemy wprowadzić opis, który będzie się pojawiał, gdy przesuniemy wskaźnik myszki na dany tytuł. Atrybut ten (title="...") można stosować praktycznie w stosunku do wszystkich znaczników HTML (oprócz: <base />, <basefont />, <head>, <html>, <meta />, <param />, <script>, <title>).

 

Blok

<div>...</div>

Polecenie to wydziela większy blok tekstu, przez co możemy nadać mu jakiś rodzaj formatowania.

W odróżnieniu od paragrafu, blok może zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, należy np. zastosować znacznik <br />).

 

Wyróżnienie tekstu

<em>...</em>
Mocne wyróżnienie
<strong>...</strong>

Pozwala wyróżnić dowolny tekst (tzw. emfaza), aby podkreślić jego znaczenie. Pierwsze polecenie zwykle wyświetla tekst napisany kursywą, natomiast drugie – pogrubiony. Różnią się one jednak od zwykłego wytłuszczenia i kursywy tym, że dodatkowo niosą ze sobą pewne informacje, co do ważności tekstu. W sytuacjach kiedy szczególnie zależy nam na zwróceniu uwagi czytelnika na jakieś informacje, a nie jedynie na określonym sformatowaniu czcionki, powinniśmy użyć właśnie przedstawionych powyżej znaczników.

 

Indeks górny

<sub>...</sub>

Przykład z indeksem górnym

 

Indeks dolny

<sub>...</sub>

Przykład z indeksem dolnym

 

Czcionka powiększona i pomniejszona

<big>...</big>
<small>...</small>

Wprowadza tekst napisany powiększoną czcionką (<big>) lub pomniejszoną (<small>). Wpisując powyższe znaczniki (tego samego rodzaju) jeden wewnątrz drugiego (np.: <big><big>...</big></big>), można zwiększyć lub zmniejszyć rozmiar tekstu o kilka wielkości.

 

Tekst preformatowany

<pre>...</pre>

Wprowadza tekst preformatowany, czyli napisany czcionką monotypiczną (o stałej szerokości znaku), który uwzględnia dodatkowe spacje, tabulację i znaki końca linii (nie trzeba stosować znaczników <br />) oraz nie jest automatycznie zawijany. Dzięki niemu możesz np. wkleić na stronę WWW tekst, wprost ze zwykłego edytora, bez stosowania dodatkowych znaczników (niestety informacje dotyczące formatowania zostaną pominięte). Należy jednak przy tym pamiętać, aby tekst nie zawierał znaków: „<” oraz „>” (w zamian używaj: &lt; i &gt;).

 

Kod komputerowy

<code>...</code>

Pozwala wprowadzić fragment kodu komputerowego („wyciąg” z programu lub źródła dokumentu), który jest napisany czcionką monotypiczną (tak jak w przypadku tekstu preformatowanego). Nie uwzględnia on jednak dodatkowych spacji, tabulacji ani znaków końca linii (trzeba używać <br />) oraz jest automatycznie zawijany.

 

Dalekopis

<tt>...</tt>

Pozwala wprowadzić do dokumentu tekst, napisany czcionką monotypiczną, czyli o stałej szerokości znaku (efekt dalekopisu).

Przykład:tekst pisany czcionką monotypiczną

 

Przykład

<samp>...</samp>

Pozwala wprowadzić do dokumentu tekst, będący przykładem wyniku wygenerowanego przez program, skrypt itp. Zwykle działa analogicznie jak <code>.

 

Zmienna

<var>...</var>

Wyświetlenie wartości liczbowej.

 

Cytowanie:

Odniesienie do źródła
<cite>...</cite>
Krótki cytat
<q>...</q>
Dłuższy cytat
<blockquote>...</blockquote>

 

Adress

<address>...</address>

Wprowadza blok informacji kontaktowych z autorem. Może to być np. adres e-mail lub zwykły adres pocztowy – o ile należy do autora artykułu. Nie należy stosować tego elementu do tworzenia listy adresów w formie książki adresowej.

Blok taki nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. W przeglądarkach najczęściej jest automatycznie napisany czcionką pochyłą.

 

Skrót osobowy

<abbr>prof.</abbr>

Znacznik <abbr> pozwala oznaczyć wpisaną formę skróconą jak np.: „inż.„, „prof.„.

 

Akronim

<acronym>...</acronym>

<acronym> wskazuje na akronim(skrótowiec), czyli wyraz utworzony z pierwszych liter lub pierwszych zgłosek (najczęściej sylab) kilku wyrazów będących zwykle jakąś nazwą, np.: „WWW” (World Wide Web).

 

Słownik / lista definicyjna

<dl>
<dt>Pierwszy termin</dt>
<dd>Definicja pierwszego terminu</dd>
<dt>Drugi termin</dt>
<dd>Definicja drugiego terminu</dd>
<dt>Trzeci termin</dt>
<dd>Definicja trzeciego terminu</dd>
</dl>

Definicje i terminy można wyświetlać dowolną ilośc razy pod rząd.

Przykład:

Zamek
Urządzenie do zamykania drzwi za pomocą klucza.
Zapięcie wszywane do odzieży.
Warowna budowla mieszkalna.
Auto
Samochód
Dwuśladowy pojazd mechaniczny napędzany silnikiem.

Lista wyliczeniowa – WYKAZ

<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>

Przykład:

  • Punkt pierwszy
  • punkt drugi
  • punkt trzeci

 

Wykaz numerowany

<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

Przykład:

  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

 

Wykazy można zagnieżdzać, pamiętaj jedynie o ich właściwej kolejności

<ul>
<li>Punkt pierwszy
	<ul>
	<li>Punkt 1.1
		<ul>
		<li>Punkt 1.1.1</li>
		<li>Punkt 1.1.2</li>
		</ul>
	</li>
	<li>Punkt 1.2</li>
	</ul>
</li>
<li>Punkt drugi</li>
</ul>

 

Pozioma linia

<hr />

Za pomocą stylów można jej nadać ciekawy wygląd.

 

Obramowanie wokół bloku tekstu

<fieldset>...</fieldset>

 

Obramowanie z tytułem

<fieldset>
<legend>Opis</legend>
Jakiś tekst
</fieldset>

 

Komentarz

<!-- Ten tekst
zostanie zignorowany
przez przeglądarkę -->

Cały tekst który zostanie do niego wpisany będzie zignorowany przez przeglądarkę, ale może przechowywać ważne informacje dla autora strony