Instrukcja

Laboratorium Informatyki
HTML (ang. HyperText Markup Language)
hipertekstowy język znaczników
Ćwiczenie 2.
1. Wprowadzenie
Istotnym
elementem
języka
znaczników
HTML
stosowanym
przy
projektowaniu każdej strony internetowej są tabele. Pozwalają one nie
tylko umieszczać w tworzonym dokumencie tabeli, ale także dostarczają
narzędzi wspomagających wizualną organizacje, umiejscowienie tekstu na
witrynie.
Drugim narzędziem wspomagającym formatowanie tekstu
zawartości strony internetowej są bloki i akapity.
ale
i
innej
2. Tabela
Tworzenie i edycja tabel realizowana jest za pomocą trzech znaczników:
<TABLE></TABLE> - definiuje rozmiar i wygląd globalny tabeli
<TR></TR> - definiuje parametry wiersza tabeli
<TD></TD> - definiuje parametry komórek
Każdy z wymienionych znaczników określany jest przez szereg atrybutów,
wybrane z nich zestawiono w tabeli poniżej.
<TR>
<TABLE>
Znacznik Atrybut
border=”xx”
bordercolor=”xxxx”
backgroud=”xxxx”
bgcolor=”xxxx”
height=”xx”
width=”xx”
cellpadding=”xx”
cellspacing=”xx”
align=”xxxx”
title=”xxxx”
align=”xxxx”
bgcolor=”xxxxx”
bordercolor=”xxxx”
height=”xxxx”
title=”xxxx”
Opis
Grubość ramki w pikselach
Kolor ramki (kod RGB lub nazwa)
Wskazanie na bitmapę dla tekstury tła
Kolor tła
Wysokość tabeli (w pikselach)
Szerokość tabeli (w pikselach lub %)
Szerokość marginesu w komórkach tabeli
Odstęp pomiędzy komórkami
Wyrównanie tabeli na pulpicie
Okienko z nazwa obiektu
Wyrównanie tekstu w komórkach wiersza
Kolor tła wiersza
Kolor ramki wiersza
Wysokość wiersza
Okienko z nazwa obiektu
1
<TD>
bordercolor=”xxxx”
backgroud=”xxxx”
bgcolor=”xxxx”
height=”xxxx”
width=”xxxx”
align=”xxxx”
valign=”xxxx”
rowspan=”xxxx”
colspan=”xxxx”
title=”xxxx”
Kolor krawędzi komórki
Wskazanie na bitmapę dla tekstury tła
Kolor tła komórki
Wysokość komórki
Szerokość komórki
Wyrównanie tekstu w komórce (poziom)
Wyrównanie tekstu w komórce (pion)
Łączenie komórek między wierszami
Łączenie sąsiednich komórek w wierszu
Okienko z nazwa obiektu
Podstawowa konstrukcja
tabeli, pokazana obok,
zapewnia umieszczenie w
dokumencie tekstu w
zaprogramowanym szyku.
wiersz 1 kolumna 1 kolumna 2 kolumna 3 kolumna 4
wiersz 2 kolumna 1 kolumna 2 kolumna 3 kolumna 4
wiersz 3 kolumna 1 kolumna 2 kolumna 3 kolumna 4
<table>
<tr>
<td>wiersz 1</td>
<td>kolumna 1</td>
<td>kolumna 2</td>
<td>kolumna 3</td>
<td>kolumna 4</td>
</tr>
<tr>
<td>wiersz 2</td>
<td>kolumna 1</td>
<td>kolumna 2</td>
<td>kolumna 3</td>
<td>kolumna 4</td>
</tr>
<tr>
<td>wiersz 3</td>
<td>kolumna 1</td>
<td>kolumna 2</td>
<td>kolumna 3</td>
<td>kolumna 4</td>
</tr>
</table>
3. Przykłady formatowania tabeli
<table border="5" bgcolor="gray"
cellpadding="25" cellspacing="10">
<tr>
Ustawienie grubości ramki, koloru tła,
marginesu i odstępu pomiędzy komórkami.
Ustawienie szerokości ramki komórek w
wierszu pierwszym, wyrównanie do prawej,
definicje koloru tła, wysokość wiersza oraz
okienka z tytułem elementu (tabeli, wiersza
pierwszego i pierwszej komórki).
Ustawiono kolor tła i krawędzi oraz połączono
po dwie komórki w pionie i poziomie.
Przy łączeniu komórek istotne jest skasowanie
znaczników odpowiadających komórkom które
zostały połączone z komórko w której
zdefiniowano połączenie. W przeciwnym
wypadku mogą pojawić się nadmiarowe
komórki.
<table border="5" title="Tabela testowa">
<tr align="right" bgcolor="gray"
bordercolor="red" height="50" title="Pierwszy
wiersz">
<td title="Pierwsza komórka">wiersz 1</td>
<td>wiersz 1</td>
<td colspan="2">kolumna 1</td>
<td bgcolor="red" rowspan="2">kolumna 3</td>
<td bordercolor="red" >kolumna 4</td>
2
4. Osadzanie grafiki
Osadzanie grafiki w dokumencie HTML realizowane jest za pomocą
znacznika <IMG>. Jest to jeden z niewielu znaczników pojedynczych.
Podstawowe atrybuty znacznika i ich właściwości zestawiono w tabeli.
Atrybut
Właściwości
src=”xxxxx”
Wskazanie na plik z grafiką „../pic/graf.jpg”
width=”xxxx”
Szerokość grafiki
height=”xxxx” Wysokość grafiki
align=”xxxxx” Wyrównanie
title=”xxxx”
Tekst wyświetlany w ramce po najechaniu myszką na grafikę
<table width="400">
<TR><TD colspan="2">
Zamek – według prof. Bohdana Guerquina zespół elementów warownych i
budynków mieszkalnych powiązanych w zamknięty obwód obronny, który to
zespół powstał w ustroju feudalnym jako ośrodek władzy książęcej,
siedziba możnowładcy, siedziba rycerza lub placówka militarna.
</TD></TR>
<tr><TD>
Zasadniczą cechę takiego zespołu stanowi zamknięty obwód obronny
początkowo w postaci wałów lub konstrukcji drewniano-ziemnej, a w
następnych okresach murowany.
</TD>
<TD>
<img src="zamek.jpg" width="200">
</TD></tr></table>
5. Akapit, sekcja i linia
HTML dostarcza kilku znaczników wspomagających formatowanie tekstu.
Znaczniki <p></p> i <div></div> wspomagają formatowanie akapitów lub
bloków tekstu, natomiast <span></span> formatowanie w jednej linii.
3
Niestety ustawianie ich parametrów
kaskadowych arkuszy styli CSS.
realizowane
6. Zadania
a. Utworzyć stronę www z tabelami
przykładu pokazanego poniżej.
jest
tylko
utworzoną
na
za
pomocą
podstawie
b. Korzystając z znaczników odpowiedzialnych za budowę tabeli
przeprowadzić formatowanie CV w celu uzyskania optymalnego
wyglądu zgodnego z wybranym wzorem przypisanym do ćwiczenia
pierwszego
4