HTML Hyper Text Markup Language

Prezentacja na temat: "HTML Hyper Text Markup Language"— Zapis prezentacji:

1 HTML Hyper Text Markup Language
Tabele, ramki, mapy HTML Hyper Text Markup Language

2 Tabele <TABLE > .. </TABLE> /określa obszar tabeli, znacznik kończący jest wymagany/ <TR>..</TR> /definiuje wiersz tabeli, wewnątrz zawiera znaczniki TD/ < TD>..</TD> /definiuje komórkę w wierszu tabeli, znacznik zamykający nie wymagany, ale zalecany!/

3 Konstrukcja <TABLE > <TR> <TD>kom1</TD>

4 Ważne atrybuty tabeli określa szerokość obramowania, wartością domyślną jest 1, dla wartości = 0 brak obramowania wyrównanie w poziomie określa kolor tła dla całej tabeli definiuje wielkość odstępu pomiędzy krawędziami komórek a ich zawartością, domyślnie = 1 określa wysokość, szerokość całej tabeli w punktach lub jako % zawartości okna przeglądarki określa wyrównanie w pionie BORDER=liczba ALIGN=CENTER lub RIGHT lub LEFT BGCOLOR= ”nazwa koloru” CELLPADDING=liczba HEIGHT=liczba lub procenty WIDTH= liczba lub procenty VALIGN = TOP, MIDDLE, BOTTOM, BASELINE

5 Ważne atrybuty komórki
COLSPAN= liczba określa liczbę połączonych kolumn ROWSPAN=liczba określa liczbę połączonych wierszy ALIGN=CENTER lub RIGHT lub LEFT BGCOLOR= ”nazwa koloru” VALIGN = TOP, MIDDLE, BOTTOM, BASELINE /jak dla tabeli/

6 Scalanie komórek <TABLE > <TR> <TD COLSPAN=2> Kom1+2
<TD>kom3</TD> <TD>kom4</TD> </TABLE> Kom1+2 kom3 kom4

7 Scalanie w pionie i poziomie
<table> <tr ><th colspan=2> razem w poziomie </th> </tr> <tr ><td rowspan=2> razem w pionie </td> <td> prawa 1</td> <tr ><td > prawa 2 </td> </table> razem w poziomie razem w pionie prawa 1 prawa 2

8 Zagnieżdżanie tabel i grafika
<table border=1> <tr align=center> <td><table border=4> <tr><td> paryż </td> </tr> <tr><td>londyn</td> </tr></table> <td ><img src=„paris.gif”> </td> </table> paryż londyn

9 Tabela i odnośniki tekstowe
<table border=1> <tr align=center> <td><table border=4> <tr><td> <a href=„paris.htm”>paryż</a> </td></tr> <tr><td>londyn</td> </tr></table> <td ><img src=paris.gif> </td> </table> paryż londyn

10 Tabela i odnośniki graficzne
<table border=1> <tr ><th colspan=2> grzyby </th> <tr ><td > <a href="borowik.htm"><IMG SRC="BOROWTH.GIF" > </td> <td > <a href="rydz.htm"><IMG SRC=„”RYDZTH.GIF”" > </td> <tr ><td >BOROWIK</td><td >RYDZ</td> </table> grzyby Borowik Rydz tabela_grzyb_linki.htm

11 Tabele i ramki pływające
<table border=1 > <tr align=center> <td> <table border=4 > <tr> <td><a href="paris.htm" target=stolica> paryż</a> </td></tr> </table> <table border=4 > <tr><td><a href="londyn.htm" target=stolica> londyn </td></tr> </table> <table border=4 > <tr><td><a href="japan.htm" target=stolica> tokio </td> </tr> </table></td> <td> <iframe name=„stolica”></iframe> </td> </table> paryż londyn tokio

12 Ramki pływające 1. umieszczenie pliku w ramce:
<IFRAME HEIGHT=200 WIDTH=300 NAME=ramka.htm></IFRAME> lub: <IFRAME SRC=HEIGHT=230 WIDTH=280 NAME=obraz></IFRAME> 2. dostęp do ramki poprzez polecenie: TARGET

13 Mapa odnośników znacznik <MAP> posiada obowiązkowy atrybut NAME=”nazwa”, do której odnosi się polecenie <IMG> wstawiające obrazek albo mapę. <MAP name="obiekty"> <IMG SRC=„obrazek.gif” USEMAP=„obiekty”> znacznik <AREA> definiuje obszary hiperłącz, atrybut COORDS=”” podaje definicje współrzędnych obszaru, atrybut SHAPE=”” określa kształt obszaru: Circle-koło Rect=prostokąt Polygon-wielokąt

14 Mapa prostokątów <map name="obiekty">
<area href="dali1.htm" coords="4,4,205,271" shape="rect"> <area href="dali3.htm" coords="206,4,283,271" shape="rect"> <table width=100% height=100% border=0> <tr> <td align=center valign=middle> <img src="dali2.jpg" usemap="#obiekty" width="289" height="275" > </td> </tr> </table> obszar1 obszar2

15 Koniec