Laboratorium - Podstawy HTML

Poniższe ćwiczenia dotyczą podstaw języka HTML, którego znajomość jest niezbędna w trakcie kolejnych laboratoriów. Do wykonania ćwiczenia potrzebny jest edytor plików tekstowych (vim, kate, notepad) oraz przeglądarki internetowe (Firefox, Chrome).

Utwórz nowy dokument HTML korzystając z poniższego przykładu. Plik można zapisać lokalnie na dysku (np. jako index.html), a następnie otworzyć w przeglądarce.

<html>
        <head>
                <title>Tytuł dokumentu</title>
        </head>
        <body>
                <h1>Hello world!</h1>
                <!-- Tutaj należy wstawić treść dokumentu,
                 komentarze nie są wyświetlane przez przeglądarkę -->
        </body>
</html>

Umieść w pierwszej linii pliku deklarację wybranego typu dokumentu HTML 4.01: strict albo transitional. Dokonaj sprawdzenia poprawności dokumentu (zgodności ze standardem) poprzez serwis http://validator.w3.org/, popraw ewentualne błędy.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```

Do treści body wstaw przykładowe elementy blokowe, takie jak: nagłówki, akapity z tekstem, wypunktowania oraz listy numerowane, listy definicji, teksty preformatowane.

<h1>Hello world!</h1>
<p>W dokumencie HTML, tekst powinien być zawarty pomiędzy znacznikami akapitu. Poniżej znajdują się przykładowe elementy blokowe.</p>

<h2>Elementy blokowe h2</h2>
<p>Kolejny akapit, tym razem z przełamaniem <br> linii znacznikiem br.

<h3>Listy</h3>
<ul>
        <li>Element pierwszy</li>
        <li>Element drugi</li>
</ul>
<ol>
        <li>Element pierwszy</li>
        <li>Element drugi</li>
</ol>

<h3>Definicje</h3>
<dl>
        <dt>Rower</dt>
        <dd>Pojazd jednosladowy</dd>
        <dt>Samochod</dt>
        <dd>Pojazd wielosladowy</dd>
</d>

<h2>Na koniec ASCII-Art jako tekst preformatowany</h2>
<pre>
    ____  ____  ____  ____
   /\   \/\   \/\   \/\   \
  /  \___\ \___\ \___\ \___\
  \  / __/_/   / /   / /   /
   \/_/\   \__/\/___/\/___/
     /  \___\    /  \___\
     \  / __/_  _\  /   /
      \/_/\   \/\ \/___/
        /  \__/  \___\
        \  / _\  /   /
         \/_/\ \/___/
           /  \___\
           \  /   /
            \/___/
</pre>

Sprawdź w przeglądarce, czy zostało poprawnie rozpoznane kodowanie znaków i czy poprawnie wyświetlają się znaki diakrytyczne. Dodaj w sekcji nagłówka <head> znacznik <meta> informujący o zawartości dokumentu i użytym kodowaniu (w zależności od faktycznie użytego kodowania w edytorze zdefiniuj utf-8, windows-1250 lub ISO-8859-2). Odśwież dokument w przeglądarce.
```
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
```
Sformatuj fragmenty tekstu znacznikami wierszowymi  <tt></tt> <code></code>. Na czym polega różnica między znacznikami b/strong oraz i/em?

ASCII-Art to sposób tworzenia bardzo prostych rysunków w programach komputerowych, w których pracuje się z tekstem (np. edytory, programy pocztowe, itp.). Rysunki te są układane za pomocą zwykłych znaków ASCII, stawianych na obszarze o stałej szerokości kolumn (stałej ilości znaków w każdym wierszu) oraz o stałej wysokości znaków (tym samym stopniu pisma). Tego typu sposób tworzenia grafiki, a raczej jej symbolizowania, nosi nazwę semigrafiki. Pierwotnie rysunki ASCII-Art tworzono w programach pracujących w trybie tekstowym, z czasem zaczęto tworzyć je również w programach pracujących w trybie graficznym, wykorzystując fonty o stałym kroju pisma. ASCII-Art były początkowo tworzone z myślą o wydrukowaniu ich na drukarkach znakowych a nie graficznych. Obecnie stosowane są również np. w sygnaturkach programów pocztowych. Czasami prawidłowe odczytanie tych rysunków wymaga sporej wyobraźni. Jednym z przykładów prostych ASCII-Art mogą być emotikony. W programach w trybie tekstowym semigrafika ASCII-Art była ograniczona tylko do jednego koloru, stąd z czasem rozwinęła się również jej odmiana ANSI Art, umożliwiająca wybór innych kolorów dla znaków, atrybutów ich wyświetlania (jasności, migania), oraz umożliwiająca proste animacje na zasadzie ustalania kolejności pojawiania się znaków na ekranie monitora komputerowego, jednak nie jest to tak popularne jak zwykły Ascii Art.

Wstaw do dokumentu odnośnik do zewnętrznego serwisu oraz lokalnego pliku. Zwróć uwagę na jawny protokół http:// wyszczególniony w odnośniku zewnętrznym. Przetestuj i popraw odnośnik do strony laboratorium. Co powodowało błąd?

<a href="http://validator.w3.org/#validate_by_upload">Walidator dokumentów HTML - W3O</a>
<a href="www.cs.put.poznan.pl/mkmieciak/edu/piksr/lab_html_beginners.html">Strona laboratorium</a>
<a href="index.html">Lokalny dokument index.html</a>

Sprawdź poprawność dokumentu w obecnej postaci - popraw ewentualne błędy. Dodaj ikonkę informującą o zgodności ze standardem:

<p>
        <a href="http://validator.w3.org/check?uri=referer">
                <img src="http://www.w3.org/Icons/valid-html401"
                alt="Valid HTML 4.01 Transitional" height="31" width="88">
        </a>
</p>

Przećwicz zagnieżdżanie list.

Do dokumentu wstaw tabelkę. Wykorzystaj atrybuty colspan oraz rowspan umożliwiające sklejanie kolumn oraz wierszy.

<table border="1">
        <tr>
                <td> A </td>
                <td> B </td>
        </tr>
        <tr>
                <td> C </td>
                <td> D </td>
        </tr>
        <tr>
                <td colspan="2"> A </td>
        </tr>
        <tr>
                <td> C </td>
                <td> D </td>
        </tr>
</table>

Utwórz odnośnik pozwalający przejść na początek bieżącego dokumentu. Umieść atrybut id="link" w pierwszym paragrafie oraz link w dalszej treści dokumentu. Jak wygląda link do takiego elementu?
```
Poniżej znajdują się kolejne..
Skocz na <a href="#link">początek</a>.
```

W dokumentach HTML niektóre znaki mogą być niedostepne lub zastrzeżone (np. <>). Przetestuj encje nazwane oraz numeryczne:

&nbsp;
&copy;
&amp;
&euro;
&quot;
&gt;
&plusmn;
&bull;
&trade;
&ldquo;
&lt;
&frac12;
&dagger;
&Oslash;
&rdquo;
&deg;
&times;
&permil;
&divide;
&bdquo;
&#8212;
&#8213;

Sprawdż jak wygląda dokument HTML w różnych przeglądarkach (Firefox, Chrome, IE, Opera). Przetestuj działanie dodatku Firebug dla przeglądarki Firefox, lub opcji Zbadaj element przeglądarki Chrome.

Przetestuj działanie programu tidy sprawdzającego poprawność dokumentu HTML. Zastosuj go ponownie do uporządkowania zawartości dokumentu.

# tidy -q -e -utf8 index.html
line 4 column 3 - Warning: inserting missing ’title’ element
line 26 column 7 - Warning: <table> lacks "summary" attribute

# tidy -i -utf8 index.html 2> /dev/null
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

Całość ćwiczeń ilustruje Przykład.