XHTML (2) - Znaczniki

Walidator

Walidator - program sprawdzający poprawność dokumentu o określonej składni (w naszym przypadku XHTML).
Pod adresem http://validator.w3.org/ znajduje się narzędzie do sprawdzania poprawności dokumentów XHTML (i HTML) utworzone przez konsorcjum W3C ustalające standardy sieciowe.

Narzędzie umożliwia sprawdzenie strony już znajdującej się w sieci (przez podanie jej adresu) - opcja Validate by URI, strony zapisanej w pliku na dysku komputera - opcja Validate by File Upload lub treści dokumentu wklejonej bezpośrednio w formularz na stronie - opcja Validate by Direct Input.

validator.png

Meta-dane strony - znacznik <meta>

Elementy <meta> występują w nagłówku dokumentu XHTML, zatem pomiędzy znacznikami <head> i </head>. Dostarczają one dodatkowych informacji o stronie internetowej i nazywane są meta-danymi.

Znamy już meta-dane dotyczące kodowania znaków UTF-8:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Znaczniki <meta> opisywane są przy pomocy następujących atrybutów:

  • http-equiv - zmienna systemowa lub name - zmienna użytkownika
  • content - wartość zmiennej

Przykładowe meta-dane umieszczane w nagłówkach stron:

  • Dodatkowe informacje o zawartości strony: słowa kluczowe i krótki opis strony
<meta name="keywords" content="słowa kluczowe oddzielone przecinkami" />
<meta name="description" content="krótki opis strony" />
  • Język treści strony:
<meta http-equiv="content-language" content="pl" />
  • Autor strony:
<meta name="author" content="imię i nazwisko" />
  • Data utworzenia strony:
<meta http-equiv="creation-date" content="Tue, 04 Dec 1993 21:29:02 GMT" />
  • Wskazówki do indeksowania przez wyszukiwarki:
<meta name="robots" content="none" /><!-- strona nie zostanie zaindeksowana przez wyszukiwarki -->

Semantycznie poprawny XHTML

To już znamy: Nagłówki

To tworzenia nagłówków używamy znaczników h1h6. Istnieje dobra praktyka mówiąca, że każda strona powinna mieć jeden (i tylko jeden) nagłówek h1 określający tytuł danej strony (np. tytuł artykułu).

<h1>Tytuł strony</h1>

Nie należy "udawać" nagłówków pogrubioną czcionką lub znacznikiem strong. Podobnie nie ma sensu całej treści nagłówka dodatkowo podkreślać znacznikami strong lub em.

<!-- To jest bez sensu ... -->
<h2><strong>Nagłówek</strong></h2>
 
<!-- ... bo to w zupełności wystarczy -->
<h2>Nagłówek</h2>

Nie ma też potrzeby dodawania znacznika nowej linii br na końcu nagłówka. Jeśli natomiast br wydaje się być potrzebne wewnątrz nagłówka, być może należy go rozbić na tytuł i podtytuł?

To już znamy: Nowe linie

Znacznik br wymuszający rozpoczęcie nowej linii jest w 99% przypadkach niepotrzebny!

  • Akapity tekstu oddzielamy używając znacznika p
  • Wypunktowane listy tworzymy używamy znaczników ol lub ul (patrz poniżej)
  • Szerokość bloku tekstu ustalamy ustawiając odpowiednie wartości np. marginesów przy pomocy CSS (poznamy później).

Jednym z niewielu przykładów poprawnego użycia znacznika br jest oddzielenie wersów wiersza :)

<p>Kuszącego <em>br</em> znacznika<br />
   Używaj tylko we wierszykach ;)</p>

To już znamy: Podkreślenie

Do podkreślania ważności słów lub fragmentów tekstu używamy znaczników strong lub em.

Choć standard XHTML obejmuje znaczniki takie jak b, i czy big i small korzystanie z nich jest niezalecane, gdyż określany przez nie efekt można osiągnąć przy pomocy stylów CSS.

<!-- To jest niezalecane -->
<p>To jest słowo <b>pogrubione</b>, a to <i>pochylone</i>.</p>
 
<!-- To jest semantycznie poprawne -->
<p>To jest słowo <strong>ważne</strong>, a to <em>coś charakterystycznego</em>.</p>

Znacznik em (standardowo wyświetlany pochyłą czcionką) nie powinien też być wykorzystywany do oznaczania cytatów. Służą do tego elementy cite i blockquote (patrz poniżej).

Listy i wykazy

W języku XHTML można definiować 3 rodzaje list:

  • lista nieuporządkowana: znaczniki ul i li
  • lista uporządkowana: znaczniki ol i li
  • lista definicji: znacznili dl, dt i dd

Listy upodządkowane i nieuporządkowane

Elementy tworzące listę bez określonej kolejności obejmujemy w znaczniki li (list item), a całą listę w znacznik ul (unordered list)

<h2>Składniki:</h2>
<ul>
    <li>400 g mąki</li>
    <li>30 g drożdży</li>
    <li>4 łyżki oliwy z oliwek</li>
    <li>2/3 szklanki wody</li>
    <li>łyżeczka cukru</li>
    <li>szczypta soli</li>
</ul>

Elementy tworzące listę w określonej kolejności obejmujemy w znaczniki li (list item), a całą listę w znacznik ol (ordered list)

<h2>Przyrządzenie:</h2>
<ol>
    <li>W podgrzanej (lecz nie gorącej) osłodzonej wodzie rozpuszczamy drożdże.</li>
    <li>Mąkę wsypujemy do miski, dodajemy sól i rozpuszczone drożdże.</li>
    <li>Mieszamy składniki i dodajemy oliwę.</li>
    <li>Wyrabiamy ciasto przez około 10 minut dodając w razie potrzeby mąkę lub wodę.</li>
    <li>Odstawiamy ciasto do wyrośnięcia w ciepłe miejsce na około pół godziny.</li>
    <li>Ciasto należy rozwałkować na grubość około 5-6mm i piec około 20-30 minut w temperaturze 180 stopni.</li>
</ol>

Listy definicji

Tzw. listy definicji służą do opisu elementów złożonych z pary: wyrażenie i opis.
Cała lista objęta jest w znacznik dl (definition list), opisywane wyrażenie w znacznik dt (definition term), a jego opis w znacznik dd (definition description).

Listy definicji są najczęściej używane do tworzenia "słownikowych" opisów, np.

<dl>
   <dt>semantyka</dt>
   <dd>dział językoznawstwa, którego przedmiotem jest analiza znaczeń wyrazów</dd>
</dl>

Możliwe jest grupowanie wielu elementów dt lub dd.

<dl>
   <dt>semantyka</dt>
   <dd>dział językoznawstwa, którego przedmiotem jest analiza znaczeń wyrazów</dd>
   <dd>dział semiotyki zajmujący się badaniem związków, jakie zachodzą między wyrażeniami
       języka a przedmiotami, do których się one odnoszą</dd>
</dl>

A także grupowanie wielu par elementów w ramach jednej listy:

<dl>
   <dt>semantyka</dt>
   <dd>dział językoznawstwa, którego przedmiotem jest analiza znaczeń wyrazów</dd>
   <dd>dział semiotyki zajmujący się badaniem związków, jakie zachodzą między wyrażeniami
       języka a przedmiotami, do których się one odnoszą</dd>
   <dt>semantyka funkcjonalna</dt>
   <dd>dział semantyki badający rozwój znaczenia wyrazów z punktu widzenia identyczności
       funkcji, jaką spełnia desygnat nazwany przez dany wyraz</dd>
</dl>

Listy definicji nie muszą być używane jedynie do reprezentowania słownikowych definicji. Listy te są poprawne wszędzie, gdzie występuje pewna relacja między pewnymi dwoma elementami (wyrażeniem i jego opisem).

Przykładowo wykorzystany może być w dialogach, gdzie cały dialog ujęty będzie w element dl, imię mówionej osoby w znacznik dt, a jej słowa w dt.

Zagnieżdżanie list

Listy i wykazy można zagnieżdżać (tworząc podlisty):

<ul>
<li>Element głównej listy</li>
<li>Kolejny element głównej listy</li>
<li>A tu jest element z zagnieżdżoną listą
   <ol>
      <li>Element listy zagnieżdżonej</li>
   </ol>
</li>
<li>Tu znowu element głównej listy</li>
<li>A tutaj zagnieżdżona lista definicji
   <dl>
      <dt>element</dt>
      <dd>opis elementu</dd>
   </dl>
</li>
</ul>

Wstawianie grafiki

Obrazki lub zdjęcia wstawia się w treść dokumentu przy pomocy znacznika img

<img src="kotek.jpg" alt="Śliczny kociaczek" width="300px" height="200px" />

Atrybuty:

  • src - ścieżka do pliku z obrazkiem (typy plików: gif, jpg, png)
  • alt - alternatywny tekst zawierający słowny opis zawartości obrazka
  • longdesc - opcjonalny dokładny i długi opis zawartości obrazka
  • width i height - rozmiar w pikselach (pozwala przeglądarce ustalić rozmiar obrazka zanim zostanie on załadowany)

Znacznik img powinien być używany jedynie do obrazków i zdjęć mających znaczenie dla treści dokumentu (będących częścią samej treści dokumentu). Wszelkie graficzne elementy ozdobne powinny być dodawane przy pomocy CSS (omówimy to później).

Każdy obrazek musi mieć opis w atrybucie alt. Jeśli nie możesz wymyślić dobrego opisu, lub opis sprowadza się do czegoś w rodzaju "ozdobnik", ''śliczny element tła strony" lub ''piękny zaokrąglony narożnik", to najlepszy znak, że obrazek ten nie powinien się znaleźć w kodzie XHTML, a przeniesiony powinien zostać do stylu CSS.

Odnośniki i cytaty

Cytaty

Jeśli cytujemy lub odnosimy się do zewnętrznych źródeł możemy to zaznaczyć przy pomocy elementu cite:

<p>Poniższy artykuł jest dość subiektywną recenzją książki <cite>Przygoda z owcą</cite> Haruki Murakamiego.</p>

Krótkie cytowane fragmenty obejmujemy w znacznik q (quote):

<p><q>Za dziesięć minut będzie ważny telefon</q> - te słowa bohaterki okazały się prorocze.</p>

Dłuższe bloki cytowanego tekstu obejmujemy w znacznik blockquote:

<blockquote cite="http://webdesign.about.com/od/htmltags/f/blfaqblockquote.htm" title="What is a blockquote?">
When you're writing text in a Web page, you sometimes want to call out a block of text as a quotation.
In publishing this is sometimes called a pull-quote, and in Web design it's called a blockquote. 
</blockquote>

Atrybuty znacznika blockquote:

  • cite - zalecany atrybut zawierający odnośnik do cytowanego artykułu lub tekstu
  • title - opcjonalny tytuł cytatu

Odnośniki (linki)

Do definiowania odnośników (linków) zarówno do fragmentów strony, podstron bieżącej witryny, jak i zewnętrznych stron www służy znacznik a

Do zewnętniej strony:

<a href="http://google.pl" title="Google">Wyszukiwarka Google</a>

Do podstrony tej samej witryny:

<!-- plik podstrona.html znajduje się w tym samym katalogu co bieżąca stona -->
<a href="podstrona.html" title="Podstrona">Więcej informacji na tej podstronie</a>
 
<!-- plik podstrona.html znajduje się w tym samym podkatalogu 'podstrony' -->
<a href="/podstrony/podstrona.html" title="Podstrona">Więcej informacji na tej podstronie</a>

Każdy element dokumentu XHTML może mieć nadany identyfikator (etykietę) przy pomocy atrybutu id.
Każdy taki identyfikator muni być unikalny w ramach danego dokumentu.

<h2 id="opis">Opis</h2>
<p>Tutaj zaczyna się opis czegoś bardzo ciekawego.</p>
<ul id="wazna_lista">
  <li>element ważnej listy</li>
</ul>

Etykiety są przydatne przy definiowania stylów elementów przy pomocy CSS i wykorzystywania ich w rozmaitych skryptach, jednak można je stosować także to tworzenia odnośników, które otworzą stronę przeglądarki dokładnie na wybranym elemencie:

<!-- link do elementu 'opis' w ramach bieżącej strony -->
<a href="#opis" title="Opis">Więcej informacji znajdziecie w opisie</a>
 
<!-- link do elementu 'wazna lista' na innej stronie -->
<a href="podstrona.html#wazna_lista" title="Ważna lista">Koniecznie zobaczcie tą ważną listę!</a>

Atrybuty:

  • href - adres odnośnika
  • title - opcjonalny, ale zalecany tytuł odnośnika

Treść odnośnika powinna mieć sens, gdy jest wyrwana z kontekstu. Należy unikać linków o treści np. kliknij tutaj. Jeśli jednak sytuacja wymaga użycia takiej treści, koniecznie należy użyć atrybutu title, gdzie znajdzie się odpowiedni opis pozwalający użytkownikowi stwierdzić gdzie dany link prowadzi.

Możliwe jest również stworzenie odnośnika pozwalającego na wysłanie wiadomości e-mail:

<a href="mailto:moj.adres@example.com" title="Napisz do mnie">Wszelkie uwagi można kierować na mój e-mail</a>

Tabele

Tabele służą tylko i wyłącznie do przedstawiania tabelarycznych danych. Nie należy używać tabel do pozycjonowania elementów na stronie - do tego służy CSS.

Znaczniki:

  • <table></table> - cała tabela
  • <tr></tr> - poszczegolne wiersze tabeli:
  • <td></td> - komórki
<table>
<tr><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><td>treść</td><td>treść</td><td>treść</td></tr>
</table>

Dodatkowe znaczniki:

  • <caption>podpis</caption> - podpis tabeli
  • <th>nagłówek kolumny</th> - nagłówek kolumny lub wiersza:

Zalecane jest korzystanie z atrybutu summary służącego do tekstowego opisu zawartości i struktury tabeli.

<table summary="Przykładowa tabela">
<caption>nagłówek</caption>
<tr><th>nagłówek kolumny 1</th><th>nagłówek kolumny 2</th><th>nagłówek kolumny 3</th></tr>
<tr><th>nagłówek wiersza 1</th><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><th>nagłówek wiersza 2</th><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><th>nagłówek wiersza 3</th><td>treść</td><td>treść</td><td>treść</td></tr>
</table>
Łączenie komórek

Możliwe jest połączenie komórek (tak by pojedyncza komórka obejmowała kilka kolumn lub wierszy):

Łączenie komórek tabeli w poziomie:
<td colspan="x">treść</td>
<th colspan="x">nagłówek kolumny</th>
gdzie x oznacza liczbę komórek, które mają zostać połączone

Łączenie komórek tabeli w pionie:
<td rowspan="x">treść</td>
<th rowspan="x">nagłówek wiersza</th>

Na przykład:

<table>
<tr><td colspan="2">Kolumny 1 i 2</td><td>Kolumna 2</td></tr>
<tr><td>Wiersz 2</td><td rowspan="2">Wiersz 2 i 3</td><td>Wiersz 2</td></tr>
<tr><td>Wiersz 3</td><!-- tu pojawi się komórka z wiersza 2 --><td>Wiersz 3</td></tr>
</table>

Pomoce naukowe

Zadanie 2

  1. Dodać 2-3 podstrony z różną treścią do swojej strony
  2. Na każdej z podstron umieścić spójną nawigację w postaci listy (słowo klucz: listy) odnośników do pozostałych podstron
  3. Na podstronach wykorzystać (ale w ramach semantycznie poprawnego XHTML) wybrane znaczniki omówione na zajęciach (listy uporządkowane, nieuporządkowane, definicji, cytaty, tabele)
  4. Umieścić w nagłówku każdej z podstron odpowiednie znaczniki meta zawierające opis strony, słowa kluczowe, dane autora, język strony, kodowanie znaków
  5. Każda z podstron musi oczywiście być poprawnym ("walidującym się") i semantycznie poprawnym XHTML-em.

termin: sobota godzina 0:00 (północ z piątku na sobotę)
punkty: 3

  • 1 punkt - 2-3 walidujące się podstrony
  • 2 punkty - dodatkowo poprawna nawigacja między podstronami, sensowne zastosowanie co najmniej 3 różnych znaczników z zajęć
  • 3 punkty - dodatkowo semantycznie poprawny XHTML

Za każdy dzień spóźnienia odejmowany jest 1 punkt.

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy