język HTML tabele i ramki (19 str)

Język HTML - Tabele i Ramki

HTML - Wykład 2

Dr Beata Pańczyk

Definiowanie Tabeli

<TABLE> ... </TABLE>	Definicja tabeli
<CAPTION>...</CAPTION>	Nagłówek tabeli
<TR> ... </TR>	Wiersz
<TD> ... </TD> <TH> ... </TH>	Komórka Komórka w postaci nagłówka

Np.

<TABLE>

<TR> <TD> ... </TD> <TD> ... </TD> </TR>

</TABLE>

Przykład 1 - Tworzymy prostą tabelę

<html><body>

<table>

<tr><td>Ania</td>

<td>Ola</td>

<td>Ela</td>

</tr>

<tr>

<td>Adam</td>

<td>Piotr</td>

<td>Stanisław</td>

</tr>

</table>

</body></html>

Parametry znacznika TABLE

BORDER	szerokość krawędzi np. border=”0” - ukrywa krawędzie border=”3”
CELLSPACING	szerokość odstępów między komórkami
CELLPADDING	szerokość odstępu pomiędzy wewnętrzną krawędzią komórek a umieszczonych w nich tekstem
WIDTH	szerokość tabeli (w % lub punktach) np. width=”100%” width=50
HEIGHT	wysokość tabeli (wartości jak wyżej)

Przykład 1 - Dodajemy Nagłówek Tabeli i Krawędzie

<table border>

<caption> Imiona</caption>

<tr>

<td>Ania</td>

<td>Ola</td>

<td>Ela</td>

</tr>

<tr>

<td>Adam</td>

<td>Piotr</td>

<td>Stanisław</td>

</tr>

</table>

</body></html>

Przykład 1 - wysokość i szerokość tabeli

<html><body>

<table border="10" width="100%" height="80%">

<caption> Imiona</caption>

<tr>

<td>Ania</td>

<td>Ola</td>

<td>Ela</td>

</tr>

<tr>

<td>Adam</td>

<td>Piotr</td>

<td>Stanisław</td>

</tr>

</table>

</body></html>

Przykład 1 - wysokość i szerokość tabeli

<html><body>

<caption> Imiona</caption>

<tr>

<td>Ania</td>

<td>Ola</td>

<td>Ela</td>

</tr>

<tr>

<td>Adam</td>

<td>Piotr</td>

<td>Stanisław</td>

</tr>

</table>

</body></html>

Przykład 1 - wyrównanie tekstu w komórce

<html><body>

<table border="10" width="100%" height="90%" cellspacing="3" cellpadding="3">

<caption> Imiona</caption>

<tr>

<td align="left" valign="top">Ania</td>

<td align="center" valign="middle">Ola</td>

<td align="right" valign="bottom">Ela</td>

</tr>

<tr>

<td>Adam</td>

<td>Piotr</td>

<td>Stanisław</td>

</tr></table>

</body></html>

Przykład 1 - kolory

<html><body>

<table border="10" width="100%"

height="90%" cellspacing="3" cellpadding="3"

bgcolor="pink">

<caption> Imiona</caption>

<tr>

<td align="left" valign="top">Ania</td>

<td align="center" valign="middle">Ola</td>

<td align="right" valign="bottom">Ela</td>

</tr>

<tr bgcolor="yellow">

<td bgcolor="red">Adam</td>

<td>Piotr</td>

<td>Stanisław</td>

</tr>

</table>

</body></html>

Przykład 1 - parametry COLSPAN i ROWSPAN

<html><body>

<table border="10" width="100%"

height="90%" bgcolor="pink"

bordercolor=”red”>

<caption> Imiona</caption>

<tr>

<td rowspan="2">Ania</td>

<td>Ola</td>

<td>Ela</td>

</tr>

<tr>

<td colspan="2">Piotr</td>

</tr>

</table>

</body></html>

Tworzenie Ramek

<FRAMESET> ... </FRAMESET>

Parametry: COLS, ROWS

FRAMEBORDER

Np.:
<FRAMESET ROWS=”50, *, 2*”>

<FRAMESET COLS=”30%,*,30%”>

Obszar definiowania ramek

Określenie sposobu podziału okna Obramowanie ramki (0 lub 1)

<FRAME>

Parametry: SRC
NAME
SCROLLING
NORESIZE

Definiuje poszczególną ramkę

Nazwa pliku w ramce

Nazwa ramki

Paski przewijania (auto, yes, no)

Zakaz zmiany wielkości ramki

<NOFRAME> ... </NOFRAME>

Określa dokument, który jest wyświetlany przez przeglądarki nie obsługujące ramek

Struktura dokumentu z ramkami

<html> <head>.............</head>

<FRAMESET cols="25%,75%" frameborder=0 >

<FRAME src="menu.htm" name="Menu">

<FRAME src="home.htm" name="Home">

<NOFRAMES>

<body>

<h2>Witamy na stronie domowej</h2>

<h3> Niestety Twoja przeglądarka nie obsługuje ramek </h3>

</body>

</NOFRAMES>

</FRAMESET>

</html>

Przykład 2 - Ramki - Podział na Kolumny

<html>

<frameset cols="2*,*">

<frame src="w2_p1.html">

<frame src="w3_p1.html">

</frameset>

</html>

Przykład 2 - Ramki - Podział na Wiersze

<html>

<frameset rows="2*,*">

<frame src="w2_p1.html">

<frame src="w3_p1.html">

</frameset>

</html>

Przykład 2 - Ramki - Podział mieszany

<html>

<frameset rows="70,*">

<frame src="tytul.html">

<frameset cols="30%,70%">

<frame src="w3_p1.html">

<frame src="w2_p1.html">

</frameset>

</html>

Parametr TARGET Znacznika <A>
Odwołania w Dokumentach z Ramkami

<A HREF=”nowy.htm” TARGET=”nazwa ramki”> ....... </A>

Wartości predefiniowane:

TARGET=”_blank” - nowe okno

TARGET=”_self” - aktualne okno

TARGET=”_parent” - okno dokumentu nadrzędnego

TARGET=”_top” - całe okno robocze przeglądarki

Przykład 3 - Odwołania pomiędzy ramkami

<html>

<frameset rows="70,*">

<frame src="tytul.html">

<frameset cols="30%,70%">

<frame src="menu.html"

name="lewa">

<frame src="home.html"

name="prawa">

</frameset>

</html>

Przykład 3 - Odwołania pomiędzy ramkami

Plik menu.htm

<html><body> <h2>Menu</h2>

<a href="w2_p1.html" target="prawa"> Podstawy</a><br>

<a href="w3_p1.html" target="prawa"> Tabele</a><br>

<a href="w3_p2.html" target="_parent"> Ramki</a><br>

<a href="http://www.pagetutor.com"

target="_top">Przykłady</a>

</body></html>

Przykład 3 - parametry frameset

<html>

<frameset rows="70,*" border="20" bordercolor="red">

<frame src="tytul.html">

<frameset cols="30%,70%" >

<frame src="menu.html"

name="lewa">

<frame src="home.html"

name="prawa">

</frameset>

</html>

Praca pochodzi z serwisu www.e-sciagi.pl

Beata Pańczyk - HTML (Wykład 2) 1

Wyszukiwarka

Podobne podstrony:
język HTML podstawy (25 str)
znaki i sygnały wysyłane do innych przez nasze ciało(19 str), ☆♥☆Coś co mnie kręci psychologia
HTML Tabele HTML 12 2004
definicje marketingu (19 str), Marketing
dopłaty bezpośrednie a środki na rozwój wsi (19 str)(1), Bankowość i Finanse
prawo wspólnotowe (19 str), Prawo Administracyjne, Gospodarcze i ogólna wiedza prawnicza
sklep z artykulami wyposazeniem wnetrz biznes plan (19 str) YDKF66M3NBYX6D3OJ24QIUUDYU5DOZM4QXLP2KA
ramki (19)
HTML Tabele
ABC JĘZYKA HTML - Rozdział 8. - Ramki i układy ramek, ► Szkoła, HTML
finanse jednostek samorządu terytorialnego (19 str)(1), Bankowość i Finanse
zarządzanie kadrami (19 str), Zarządzanie(1)
Poradnik Webmastera, Język HTML , Język HTML
przestępstwa internetowe (19 str), Administracja-notatki WSPol, Zwalczanie przestepczości gospodarcz

więcej podobnych podstron