Obsługa informatyczna w hotelarstwie

Temat: Źródła informacji turystycznej - tabele w dokumencie HTML

Strony internetowe tworzymy, korzystając z języka HTML. Do pisania kodu w tym języku nie będzie ci potrzebny dostawca usług internetowych ani nawet podłączenie do Internetu. Aktualnie powszechnie stosowanym standardem jest HTML5.
Dokument HTML to zwykły plik tekstowy, który możesz tworzyć i modyfikować praktycznie w każdym edytorze tekstu. Dla systemów Windows i Linux może to być wspomniany przed chwilą - Notepad++, dla systemu MacOS – Text Edit czy Sublime Text, dla systemu Android – DroidEdit.

Przydatne linki i programy:
Tworzenie tabel w HTML

Tabele (ang. table) nadają się fantastycznie do czytelnego, dwuwymiarowego przedstawiania danych. Cały obszar tabeli ograniczony jest – rzecz jasna – znacznikami <table></table>.
Pojedynczy wiersz tabeli tworzymy tagami <tr></tr> (ang. table row), zaś wewnątrz wierszy definiować będziemy komórki tabeli <td></td> (ang. table drawer).
Jako przykład, przyjrzyjmy się tabeli zawierającej 3 wiersze, a w każdym z nich po 3 komórki:

Przykład1: 

<table border="1" style="border-color:#000000; border-collapse: collapse; height: 230px; width: 220px;" align="center">
   <tr>
      <td>1</td> <td align="center">2</td><td align="right">3</td>
   </tr>
   <tr>
      <td>4</td> <td align="center">5</td><td align="right">6</td>
   </tr>
   <tr>
      <td>7</td> <td align="center">8</td><td align="right">9</td>
   </tr>
</table>
Efekt:
1 23
4 56
7 89


Przykład2: 

<table border="1" style="border-color:#000000; border-collapse: collapse; height: 230px; width: 220px; margin-left: 50px;">
   <tr>
       <td align="center" bgcolor="#00ff00" colspan="3">1</td>
   </tr>
   <tr>
       <td>4</td> <td align="center" bgcolor="#0080ff" >5</td><td rowspan="2" bgcolor="#008000" align="right">6</td>
   </tr>
   <tr>
       <td bgcolor="#0080ff" >7</td> <td align="center">8</td>
   </tr>
</table>
Efekt:
1
4 56
7 8


Ćwiczenie:
Wykorzystując podstawowe znaczniki HTML stwórz tabelę wg wzoru poniżej. Pamiętaj, aby nazwa strony była zapisana z rozszerzeniem .html tak, aby integrowała się z domyślną przeglądarką.



Podstawowe znaczniki do wykorzystania:
<table> </table>
<tr> </tr> <td> </td>
<b> - pogrubienie </b>
<u> - podkreślenie </u>
<i> - pochylenie </i>
<h1> - <h6> - nagłówek tekstu
<p> - nowy akapit tekstowy </p>
<font> - zmiana czcionki <font color="" size=""> </font>
<img> - wstawianie obrazka <img src="" alt="">

Powinieneś umieć: