Temat 2: Tabela jako szablon strony

Wielkość: px

Rozpocząć pokaz od strony:

Download "Temat 2: Tabela jako szablon strony"

Franciszek Mazurek
8 lat temu
Przeglądów:

1 Temat 2: Tabela jak szabln strny Tabela Struktura tabeli: <table> Prada: Ilść kmórek w każdym wierszu musi być taka sama! Przykład 7: struktura tabeli <table brder= 1 > <td>kmórka1</td> <td>kmórka2</td> <td>kmórka3</td> <td>kmórka4<</td> Otrzymamy: Tabele wykrzystamy d pdzielenia strny na bszary. Zadanie 4: Skpiuj przykład 8 d prgramu Ntatnik. Zapisz plik pd nazwą tabela.html i bejrzy efekt. Przykład 8: szkielet tabeli <html> <meta http-equiv="cntent-type" cntent="text/html; windws-1250" /> <meta name="descriptin" cntent="tu wpisz pis zawartści strny" /> <meta name="keywrds" cntent="tu wpisz wyrazy kluczwe rzdzielne <meta name="authr" cntent="tu wpisz swje imię i nazwisk" />

bszary. Zadanie 4: Skpiuj przykład 8 d prgramu Ntatnik. Zapisz plik pd nazwą tabela.html i bejrzy efekt.

2 <title>strna nauczyciela</title> <bdy> <table brder= 1 > <td>baner</td> <td>lg</td> <td>zapraszam na mją strnę</td> <td>mja ftka</td> <td>panel wyświetlania pdstrn</td> <td>linki</td> <td clspan= 2 >Adres pcztwy autra strny</td> </bdy> Strna zstała pdzielna na bszary tematyczne, w których uprządkujesz wprwadzane treści. Szkielet mże wyglądać różnie, zależnie d ptrzeb. W dalszej części zbaczysz inne prpzycje. Teraz pznamy atrybuty tabeli. Atrybuty tabeli brder - d kreślenia ramki wkół całej tabelki cellspacing - d kreślenia dstępu między kmórkami cellpadding - d kreślenia dstępu między zawartścią kmórki a jej brzegiem width i height - d kreślenia rzmiaru tabeli

Szkielet mże wyglądać różnie, zależnie d ptrzeb. W dalszej części zbaczysz inne prpzycje. Teraz pznamy atrybuty tabeli.

3 Przykład 9: atrybuty tabeli <html> <meta http-equiv="cntent-type" cntent="text/html; windws-1250" /> <meta name="descriptin" cntent="tu wpisz pis zawartści strny" /> <meta name="keywrds" cntent="tu wpisz wyrazy kluczwe rzdzielne <meta name="authr" cntent="tu wpisz swje imię i nazwisk" /> <title>strna nauczyciela</title> <bdy> <table cellspacing=3 cellpadding=5 width=100% height=100% brder= 1 > <td>baner</td> <td>lg</td> <td>zapraszam na mją strnę</td> <td>mja ftka</td> <td>panel wyświetlania pdstrn</td> <td>linki</td> <td clspan= 2 >Adres pcztwy autra strny</td> </bdy> Zadanie 5: D pprzednieg pliku dpisz atrybuty tabeli (zapisane czerwną czcinką I zbacz jaka jest szerkść I wyskść tabeli raz dległści w kmórkach. Przykład 10: atrybuty dla rzędów i kmórek height - wyskść rzędu bgclr - klr tła Prada: Ustawienia dtyczą wszystkich kmórek wewnątrz rzędu. Dla kmórek mżemy kreślić: width - szerkść kmórki bgclr - klr tła align - spsób wyrównywania zawartści kmórki (left, center, right) valign - spsób wyrównywania zawartści kmórki w pinie (tp, center, bttm)

<td>baner</td> <td>lg</td> <td>zapraszam na mją strnę</td> <td>mja ftka</td> <td>panel wyświetlania pdstrn</td> <td>linki</td> <td clspan= 2 >Adres pcztwy autra strny</td> </bdy> Zadanie 5: D

4 <html> <meta http-equiv="cntent-type" cntent="text/html; windws-1250" /> <meta name="descriptin" cntent="tu wpisz pis zawartści strny" /> <meta name="keywrds" cntent="tu wpisz wyrazy kluczwe rzdzielne <meta name="authr" cntent="tu wpisz swje imię i nazwisk" /> <title>strna nauczyciela</title> <bdy> <table cellspacing=0 cellpadding=2 width=100% height=100% brder= 1 > <tr bgclr=#ffffcc height=60px> <td>baner</td> <td>lg</td> <td bgclr=#fff9e5 valign=bttm align=center width=80% height=50px>zapraszam na mją strnę</td> <td>mja ftka</td> <td valign=tp>panel wyświetlania pdstrn</td> <td>linki</td> <td clspan= 2 height=20px valign=middle align=center >Adres pcztwy autra strny</td> </bdy> Zadanie 6: Skpiuj przykład 10, zapisz i bejrzyj efekt. Zauważ różnice w wielkści kmórek i w rzmieszczeniu w nich tekstu.

height=60px> <td>baner</td> <td>lg</td> <td bgclr=#fff9e5 valign=bttm align=center width=80% height=50px>zapraszam na mją strnę</td> <td>mja ftka</td> <td valign=tp>panel wyświetlania pdstrn</td>

5 Łączenie kmórek Ostatnia kmórka zbudwana jest z dwóch płącznych razem. Płączenie uzyskujemy przy użyciu wartści: clspan - t płączenia kilku kmórek znajdujących się w sąsiadujących klumnach np. clspan= 2 rwspan - t płączenia kilku kmórek znajdujących się w sąsiadujących rzędach Przykład 11: łączenie kmórek <html> <meta http-equiv="cntent-type" cntent="text/html; windws-1250" /> <meta name="descriptin" cntent="tu wpisz pis zawartści strny" /> <meta name="keywrds" cntent="tu wpisz wyrazy kluczwe rzdzielne <meta name="authr" cntent="tu wpisz swje imię i nazwisk" /> <title>strna nauczyciela</title> <bdy> <table cellspacing=2 cellpadding=2 brder=1 width=100% height=100%> <td>1</td> <td>2</td> <td>3</td> <td clspan=2>3</td> <td rwspan=2>4</td> </bdy>

clspan= 2 rwspan - t płączenia kilku kmórek znajdujących się w sąsiadujących rzędach Przykład 11: łączenie kmórek <html> <meta http-equiv="cntent-type" cntent="text/html; windws-1250" />

6 Zadanie zaliczeniwe nr 2: Na pdstawie materiału zawarteg w lekcji zbuduj szkielet strny w pstaci tabeli wg wzru. Ustawienie i łączenie kmórek wg własneg pmysłu.

Podobne dokumenty

Wprowadzenie do Internetu zajęcia 1

Wprowadzenie do Internetu zajęcia 1 Wprwadzenie d Internetu zajęcia 1 XHTML cechy Dkument HTML/XHTML jest zwykłym plikiem tekstwym, w którym znajdują się plecenia XHTML i mżna g utwrzyć przy pmcy zwykłeg edytra tekstów np. ntatnika, wprwadzając