02. HTML, część druga

Tabele

Tabele służą do przechowywania danych typu tabelarycznego, nie zaś do tworzenia struktury strony.

Tabele tworzy się za pomocą znacznika:
<table></table>

Poszczegolne wiersze tabeli:
<tr></tr>

Komórki:
<td></td>

Przykład:

<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>

Nagłówek tabeli:
<caption>nagłówek</caption>

Nagłówek kolumny lub wiersza:
<th>nagłówek kolumny</th>

Przykład:

<table>
<caption>nagłówek</caption>
<tr><td></td><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>

Uwaga! Formatowanie elementów na stronie (tabeli, obrazków, akapitów, etc.) zaleca się przeprowadzać za pomocą języka CSS. Jednak na potrzeby niniejszych zajęć możemy użyć argumentu "border" tagu "table". W następujący sposób:

<table border="10">
<caption>nagłówek</caption>
<tr><td></td><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 tabeli w pionie:
<td rowspan="x">treść</td>

Analogicznie dla nagłółków:
<th rowspan="x">nagłówek wiersza</th>
gdzie x oznacza liczbę komórek, które mają zostać połączone

Łączenie komórek tabeli w poziomie:
<td colspan="x">treść</td>

Analogicznie dla nagłółków:
<th colspan="x">nagłówek kolumny</th>
gdzie x oznacza liczbę komórek, które mają zostać połączone

Przykład:

<table border="10">
<tr><td colspan="2">treść</td><td>treść</td></tr>
<tr><td>treść</td><td rowspan="2">treść</td><td>treść</td></tr>
<tr><td>treść</td><td>treść</td></tr>
</table>

Listy/wykazy

Nieuporządkowany (unordered list) - elementy poprzedzane są dużymi kropkami:
<ul>…</ul>

Uporządkowany (ordered list) - elementy są numerowane:
<ol>…</ol>

Elementy wykazu:
<li>element</li>

Wykazy można zagnieżdżać.

Przykład:

<ul>
    <li>coś</li>
    <li>drugie coś</li>
    <li>wykaz zagnieżdżony
        <ol>
            <li>element</li>
            <li>element</li>
            <li>element</li>
        </ol>
    </li>
    <li>i jeszcze coś</li>
</ul>

Odwołania symboliczne (linki)

Link dodajemy używjąc taga:
<a href="adres_www">Tekst, który ma się wyświetlić</a>

Kod wygląda w ten sposób:

<a href="http://kognitywistyka.amu.edu.pl/seminarium/">Seminaria środowe ZLiK</a>

A efekt tak:

Analogicznie możemy tworzyć również postrony naszej strony głównej!
Jednak wcześniej musimy oczywiście stworzyć nowy plik HTML reprezentujący tę podstronę.
Następnie dodajemy na naszej stronie głównej kod:

<a href="gallery.html">Galeria</a>

I gotowe.

Wstawianie grafiki:

Jako grafiki wstawiać możemy na przykład pliki typu: gif, jpg, png.

Znacznik stosowany do wstawienie obrazka to:
<img …>

Ścieżka do pliku graficznego:
src="sciezka_do_pliku"

Nazwa alternatywna - zostanie wyświetlona w przglądarce w przypadku nie znalezienia obrazka:
alt="nazwa alternatywna"

Tekst wyświetlany przy najechaniu na obrazek kursorem:
title="tekst"

Przykład:

<img src="sciezka_do_pliku" alt="nazwa alternatywna" title="tekst">

Zadanie 02

Polecenie: do strony stworzonej w zadaniu 01 dodać (na istniejącej stronie lub nowych podstronach):

  • tabelę - z wykorzystaniem łączenia komórek oraz nagłówków (tabeli i kolumn/wierszy);
  • wykaz uporządkowany oraz nieuporządkowany - przynajmniej jeden z nich musi być zagnieżdżony;
  • przynajmniej jeden obrazek.

Wszystkie pliki strony należy umieścić na swoim koncie ftp.

Terminy:

  • grupy poniedziałkowe: niedziela (22.10), godzina 23:59 (północ z niedzieli na poniedziałek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z wtorku na środę oznaczać będzie brak punktów.
  • grupy czwartkowe: środa (18.10), godzina 23:59 (północ z środy na czwartek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z piątku na sobotę oznaczać będzie brak punktów.

Punkty: 3

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