3 - HTML (03.03.2008)

Tabele

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

- łą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>
<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 - elementy poprzedzane są dużymi kropkami:
<ul>…</ul>
- uporządkowany - 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>

Wstawianie grafiki:

- pliki typu: gif, jpg, png
- znacznik stosowany do wstawienie obrazka:
<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 03

polecenie: do strony stworzonej w zadaniu 02 dodać (na istniejących 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

deadline: 08.03.2008
punkty: 3

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