TEMAT LEKCJI: Tabele na stronach WWW Karta pracy ucznia 1. W

TEMAT LEKCJI: Tabele na stronach WWW
Karta pracy ucznia
1. W swoim folderze ćwiczeniowym utwórz folder Wycieczka, a w nim podfolder grafiki.
2. Otwórz nowy dokument tekstowy i zapisz go w folderze Wycieczka jako index.txt. Po zmianie
rozszerzenia będzie można uruchomić go za pomocą przeglądarki.
3. Wpisz w pliku index.html podstawową strukturę strony WWW (szkielet).
4. W nagłówku strony wpisz tytuł Wycieczka.
5. Ustal tło strony.
6. W sekcji body wpisz jako tytuł wyświetlany na stronie tekst „Wycieczka do Gdyni”.
7. Sformatuj wpisany tekst, tak aby:
– litery miały wielkość 6 i były wytłuszczone i pochylone,
– był wyśrodkowany w linii.
8. Wprowadź do dokumentu tabelę składającą się z 2 wierszy i 3 kolumn:
Podpowiedź:
<table> - rozpoczynamy tworzenie tabeli
<caption> Tabela przykładowa </caption> - tytuł tabeli
<tr>
<th>Nagłówek tabeli, komórka 1</th>
<th> Nagłówek tabeli, komórka 2</th>
<tr>
<td>wiersz 1, komórka 1</td> - I wiersz
<td>wiersz 1, komórka 2</td> - I wiersz
</tr>
<tr>
<td>wiersz 2, komórka 1</td> - II wiersz
<td>wiersz 2, komórka 2</td> - II wiersz
</tr>
</table> - kończymy tworzenie tabeli
<tr> - wiersz
<td> - komórka z nagłowkiem kolumny
<th>- komórka z danymi
ATRYBUTY TABELI:
border – obramowanie tabeli
bordercolor – kolor obramowania
cellspacing – pozwala zwiększyć odstęp pomiędzy komórkami w tabeli
background – tło graficzne tabeli
cellpading – pozwala zwiększyć wolny obszar w komórkach
width – szerokość tabeli(można podawać w pikselach lub procentach)
align – wyrównanie tabeli na stronie. Możliwe wartości to: left, right, center;
Przykład:
<table border=”1” bordercolor=”#AA3300” cellspacing=”10” cellpading=”10”
width=”50%” align=”center”>
9. Tabela powinna mieć widoczne obramowanie komórek:
10. W komórkach pierwszego wiersza tabeli umieść odpowiednio teksty: „herb”, „mapa”,
„port”. Sformatuj je w wybrany przez siebie sposób.
11. Skopiuj grafiki: portg.jpg, herb.jpg, mapagdyni.jpg do folderu grafiki. Znajdują się one na
stronie szkoły
12. W komórki drugiego wiersza tabeli wstaw odpowiednio grafiki: herb.jpg,
mapagdyni.jpg, portg.jpg.
Podpowiedź:
Elementy graficzne są wyświetlane na stronie dzięki poleceniu:
<img src=”nazwaplikuzobrazem.jpg” />
Znacznik img może mieć dodatkowe atrybuty:
width=”szerokość” ;height=”wysokość”; alt=”tekst_opisu obrazka”; border=”grubość_obramowania”
align=”top | middle | bottom | left | right”
Pliki graficzne muszą zostać umieszczone na serwerze razem z plikami html tworzącymi stronę.
13. Pod tabelą wstaw wybrany fragment tekstu z pliku HistoriaGdyni.doc (dostępny na stronie
szkoły). Sformatuj tekst według własnego uznania.
14. Zapisz utworzony dokument.
Uwaga: Pamiętaj o częstym podglądzie wykonywanych zmian w modyfikowanym pliku html.