INTERNETOWY KURS TWORZENIA STRON WWW Z WYKORZYSTANIEM DYNAMIC HTML

Przykro mi twoja przeglądarka nie obsługuje ramek.


LEKCJE


INTERNETOWY KURS PROGRAMOWANIA W JĘZYKU JAVASCRIPT

Przykro mi twoja przegl±darka nie obsługuje ramek.


INTERNETOWY KURS PROGRAMOWANIA W JĘZYKU DHTML

Przykro mi twoja przegl±darka nie obsługuje ramek.


DODATKI


Dodatki
WŁAŚCIWOŚCI ARKUSZY STYLÓW
Tutaj zamieszczone są wszystkie właściwości arkuszy stylów. Dla szybszego dostepu zostały one podzielone na kilka grup: style dotyczące fontów, wyrównania tekstu, tła, odstępów i marginesów oraz dotyczące obramowania.

Style dotyczące fontów:
WŁAŚCIWOŚCI | WYJAŚNIENIE | MOŻLIWE WARTOŚCI
font-family | Krój pisma | Wszystkie nazwy czcionek
font-size | Rozmiar czcionki | W jednostkach (np. 10pt), w procentach, larger, smaler, large, small, x-large, x-small, xx-large, xx-small
font-style | Styl czcionki | normal, italic, oblique
font-weight | Grubość czcionki | normal, bold, bolder, lighter
font-variant | Kapitaliki | normal, small_caps
color | Kolor czcionki | Wszystkie możliwe nazwy kolorów znajdują się w dodatkach w tabeli kolorów.
text-transform | Transformacja tekstu | none, lowercase, uppercase, capitalize
text-decoration | Dekoracja | none, underline, blink, line-through

Style dotyczące wyrównania tekstu:
WŁAŚCIWOŚCI | WYJAŚNIENIE | MOŻLIWE WARTOŚCI
text-align | Wyrównanie tekstu | left, right, center, justify
text-ident | Wcięcie pierwszego wiersza | w jednostkach, w procentach

Style dotyczące tła:
WŁAŚCIWOŚCI | WYJAŚNIENIE | MOŻLIWE WARTOŚCI
background-color | Kolor tła | Nazwa koloru, transparent (przezroczystość)
background-image | Rysunek jako tło | url(nazwa pliku)
background-attachment | Tło przewijane czy nie | scroll, fixed
background-repeat | Sposób wyświetlania tła | repeat, repeat-x, repeat-y, no-repeat
background-position | pozycja tła | W procentach, w pikselach

Style dotyczące odstępów i marginesów:
WŁAŚCIWOŚCI | WYJAŚNIENIE | MOŻLIWE WARTOŚCI
margin-top | Górny margines | W procentach, w jednostkach, auto
margin-bottom | Dolny margines | W procentach, w jednostkach, auto
margin-left | Lewy margines | W procentach, w jednostkach, auto
margin-right | Prawy margines | W procentach, w jednostkach, auto
word-spacing | Odstępy między wyrazami | W jednostkach
letter-spacing | Odstępy między znakami | W jednostkach
line-height | Odstępy między wierszami | W jednostkach, liczba, normal
white-space | Tekst preformatowany lub nie | normal, pre, nowrap

Style dotyczące obramowania:
WŁAŚCIWOŚCI | WYJAŚNIENIE | MOŻLIWE WARTOŚCI
border-width | Grubość obramowania | W jednostkach
border-style | Styl obramowania | none, solid, double, inset, outset, groove, ridge
border-color | Kolor obramowania | Wszystkie możliwe nazwy kolorów znajdują się w dodatkach w tabeli kolorów.


Dodatki
WARSTWY
Tutaj zamieszczone są tylko dodatkowe właściwości dotyczące warstw. Resztę możesz znaleźć we właściwościach kaskadowych arkuszy styli, które również znajdują się w dodatkach.

Właściwości:
WŁAŚCIWOŚCI | WYJAŚNIENIE | MOŻLIWE WARTOŚCI
Position | Rodzaj warstwy | absolute (bezwzględna), relative (względna)
Left | Poziome położenie górnego lewego rogu warstwy | W pikselach
Top | Pionowe położenie górnego lewego rogu warstwy | W pikselach
Z-index | Określa kolejność warstw (im większa wartość tym warstwa jest wyżej) | Liczby całkowite
Width | Szerokość warstwy | W pikselach
Height | Wysokość warstwy | W pikselach
Visibility | Widoczność warstwy | show (pokazana), hide (ukryta), dla MSIE (visible i hidden)
Background-color | Kolor tła | transparent lub dowolna nazwa koloru (tabela ze wszystkimi możliwymi nazwami kolorów znajduje się w dodatkach)
Background-image | Tło jako rysunek | url("nazwa_pliku")
Source-include | Plik, który ma się ukazać w warstwie | url("nazwa_pliku")
Clip | Określa część warstwy, która ma być pokazana | rect(x1,y1,x2,y2)


Dodatki - Kolory

Dodatki
TABELA KOLORÓW
Wszystkie znajdujące się w poniższej tabeli wartości kolorów mogą być używane w języku JavaScript do definiowania kolorów tekstu i tła za pomocą własności JavyScript. Tabela zawiera wszystkie predefiniowane nazwy kolorów oraz ich składowe RGB (czerwony, zielony, niebieski) w zapisie szesnastkowym i dziesiętnym.

KOLOR | NAZWA JAVASCRIPT | RGB | CZERWONY | ZIELONY | NIEBIESKI
kolor | aliceblue | F0F8FF | 240 | 248 | 255
kolor | antiquewhite | FAEBD7 | 250 | 235 | 215
kolor | agua | 00FFFF | 0 | 255 | 255
kolor | aquamarine | 7FFFD4 | 126 | 255 | 212
kolor | azure | F0FFFF | 240 | 255 | 255
kolor | beige | F5F5DC | 245 | 245 | 220
kolor | bisque | FFE4DC | 255 | 228 | 220
kolor | black | 000000 | 0 | 0 | 0
kolor | blanchedalmond | FFEBCD | 255 | 235 | 205
kolor | blue | 0000FF | 0 | 0 | 255
kolor | blueviolet | 8A2BE2 | 138 | 43 | 226
kolor | brown | A52A2A | 165 | 42 | 42
kolor | burlywood | DEB887 | 222 | 184 | 135
kolor | cadetblue | 5F9EA0 | 95 | 158 | 160
kolor | chartreuse | 7FFF00 | 127 | 255 | 0
kolor | chocolate | D2691E | 210 | 105 | 30
kolor | coral | FF7F50 | 255 | 127 | 80
kolor | cornflowerblue | 6495ED | 40 | 149 | 237
kolor | cornsilk | FFF8DC | 255 | 248 | 220
kolor | crimson | DC143C | 220 | 20 | 60
kolor | cyan | 00FFFF | 0 | 255 | 255
kolor | darkblue | 00008B | 0 | 0 | 139
kolor | darkcyan | 008B8B | 0 | 139 | 139
kolor | darkgoldenrod | B8860B | 184 | 134 | 11
kolor | darkgray | A9A9A9 | 169 | 169 | 169
kolor | darkgreen | 006400 | 0 | 100 | 0
kolor | darkkhaki | BDB76B | 189 | 183 | 107
kolor | darkmagenta | 8B008B | 139 | 0 | 139
kolor | darkolivegreen | 556B2F | 85 | 107 | 47
kolor | darkorange | FF8C00 | 255 | 140 | 0
kolor | darkorchid | 9932CC | 153 | 50 | 204
kolor | darkred | 8B0000 | 139 | 0 | 0
kolor | darksalmon | E9967A | 233 | 150 | 122
kolor | darkseagreen | 8FBC8F | 143 | 188 | 143
kolor | darkslateblue | 483D8B | 72 | 61 | 139
kolor | darkslategray | 2F4F4F | 47 | 79 | 79
kolor | darkturquoise | 00BFFF | 0 | 191 | 255
kolor | darkviolet | 9400D3 | 148 | 0 | 211
kolor | deeppink | FF1493 | 255 | 20 | 147
kolor | deepskyblue | 00BFFF | 0 | 191 | 255
kolor | dimgray | 696969 | 105 | 105 | 105
kolor | dodgerblue | 1E90FF | 30 | 144 | 255
kolor | firebrick | B22222 | 178 | 34 | 34
kolor | floralwhite | FFFAF0 | 255 | 250 | 240
kolor | forestgreen | 228B22 | 34 | 139 | 34
kolor | fuchsia | FF00FF | 255 | 0 | 255
kolor | gainsboro | DCDCDC | 220 | 220 | 220
kolor | ghostwithe | F8F8FF | 248 | 248 | 255
kolor | gold | FFD700 | 255 | 215 | 0
kolor | goldenrod | DAA520 | 218 | 165 | 32
kolor | gray | 808080 | 128 | 128 | 128
kolor | green | 008000 | 0 | 128 | 0
kolor | greenyellow | ADFF2F | 173 | 255 | 47
kolor | honeydew | F0FFF0 | 240 | 255 | 240
kolor | hotpink | FF69B4 | 255 | 105 | 180
kolor | indianred | CD5C5C | 205 | 92 | 92
kolor | indigo | 4B0082 | 75 | 0 | 130
kolor | ivory | FFFFF0 | 255 | 255 | 240
kolor | khaki | F0E68C | 240 | 230 | 140
kolor | levender | E6E6FA | 230 | 230 | 250
kolor | levenderblush | FFF0F5 | 255 | 240 | 245
kolor | lawngreen | 7CFC00 | 124 | 252 | 0
kolor | lemonchiffon | FFFACD | 255 | 250 | 205
kolor | lightblue | ADD8E6 | 173 | 216 | 230
kolor | lightcoral | F08080 | 240 | 128 | 128
kolor | lightcyan | E0FFFF | 224 | 255 | 255
kolor | lightgoldenrodyellow | FAFAD2 | 250 | 250 | 210
kolor | lightgreen | 90EE90 | 144 | 238 | 144
kolor | lightgrey | D3D3D3 | 211 | 211 | 211
kolor | lightpink | FFB6C1 | 255 | 182 | 193
kolor | lightsalmon | FFA07A | 255 | 160 | 122
kolor | lightseagreen | 20B2AA | 170 | 178 | 32
kolor | lightskyblue | 87CEFA | 135 | 206 | 250
kolor | lightslategray | 778899 | 119 | 136 | 153
kolor | lightsteelblue | B0C4DE | 176 | 196 | 222
kolor | lightyellow | FFFFE0 | 255 | 255 | 224
kolor | lime | 00FF00 | 0 | 255 | 0
kolor | limegreen | 32CD32 | 50 | 205 | 50
kolor | linen | FAF0E6 | 250 | 240 | 230
kolor | magenta | FF00FF | 255 | 0 | 255
kolor | maroon | 800000 | 128 | 0 | 0
kolor | mediummaquamarine | 66CDAA | 102 | 205 | 170
kolor | mediumblue | 0000CD | 0 | 0 | 205
kolor | mediumorchid | BA55D3 | 186 | 85 | 211
kolor | mediumpurple | 9370DB | 147 | 112 | 219
kolor | mediumseagreen | 3CB371 | 60 | 179 | 113
kolor | mediumslateblue | 7B68EE | 123 | 104 | 238
kolor | mediumspringgreen | 00FA9A | 0 | 250 | 154
kolor | mediumturquoise | 48D1CC | 72 | 209 | 204
kolor | mediumvioletred | CD1585 | 205 | 21 | 133
kolor | midnightblue | 191970 | 25 | 25 | 112
kolor | mintcream | F5FFFA | 245 | 255 | 250
kolor | mistyrose | FFE4E1 | 255 | 228 | 225
kolor | moccasin | FFE4B5 | 255 | 228 | 181
kolor | navajowhite | FFDEAD | 255 | 222 | 173
kolor | navy | 000080 | 0 | 0 | 128
kolor | oldlace | FDF5E6 | 253 | 245 | 230
kolor | olive | 808000 | 128 | 128 | 0
kolor | olivedrab | 6B8E23 | 107 | 142 | 35
kolor | orange | FFA500 | 255 | 165 | 0
kolor | orangered | FF4500 | 255 | 69 | 0
kolor | orchid | DA70D6 | 218 | 112 | 214
kolor | palegoldenrod | EEE8AA | 238 | 232 | 170
kolor | palegreen | 98FB98 | 152 | 251 | 152
kolor | palaturquoise | AFEEEE | 175 | 238 | 238
kolor | palevioletred | DB7093 | 219 | 112 | 147
kolor | papayawhip | FFEFD5 | 255 | 239 | 213
kolor | peachpuff | FFDAB9 | 255 | 218 | 185
kolor | peru | CD853F | 205 | 133 | 63
kolor | pink | FFC0CB | 255 | 192 | 203
kolor | plum | DDA0DD | 221 | 160 | 221
kolor | powderblue | B0E0E6 | 176 | 224 | 230
kolor | purple | 800080 | 128 | 0 | 128
kolor | red | FF0000 | 255 | 0 | 0
kolor | rosybrown | BC8F8F | 188 | 143 | 143
kolor | royalblue | 4169E1 | 29 | 105 | 225
kolor | saddlebrown | 8B4513 | 139 | 69 | 19
kolor | salmon | FA8072 | 250 | 128 | 114
kolor | sandybrown | F4A460 | 244 | 164 | 96
kolor | seagreen | 2E8B57 | 46 | 139 | 87
kolor | seashell | FFF5EE | 255 | 245 | 238
kolor | sienna | A0522D | 160 | 82 | 45
kolor | silver | C0C0C0 | 192 | 192 | 192
kolor | skyblue | 87CEEB | 135 | 206 | 235
kolor | slateblue | 6A5ACD | 205 | 90 | 205
kolor | slategray | 708090 | 112 | 128 | 144
kolor | snow | FFFAFA | 255 | 250 | 250
kolor | springgreen | 00FF7F | 0 | 255 | 127
kolor | steelblue | 4682B4 | 70 | 130 | 180
kolor | tan | D2B48C | 210 | 180 | 140
kolor | teal | 008080 | 0 | 128 | 128
kolor | thistle | D8BFD8 | 216 | 191 | 216
kolor | tomato | FF6347 | 255 | 99 | 71
kolor | turquoise | 40E0D0 | 64 | 224 | 208
kolor | violet | EE82EE | 238 | 130 | 238
kolor | wheat | F5DEB3 | 245 | 222 | 179
kolor | white | FFFFFF | 255 | 255 | 255
kolor | whitesmoke | F5F5F5 | 245 | 245 | 245
kolor | yellow | FFFF00 | 255 | 255 | 0
kolor | yellowgreen | 9ACD32 | 154 | 205 | 50


Strona główna kursu Lekcja 1
CO TO JEST DHTML ? 		następna lekcja
Skrót DHTML pochodzi od nazwy Dynamic HyperText Markup Language. Język ten jest rozszerzeniem HTML-a pozwalającym tworzyć interaktywne strony reagujące na działania użytkownika. Dynamic HTML daje nam dużo nowych możliwości, dzięki czemu nasze strony WWW mogą stać się jeszcze bardziej atrakcyjne. Jedną z jego największych zalet jest możliwość dynamicznego umieszczania obiektów na stronach poprzez zastosowanie warstw. DHTML umożliwia także tworzenie kaskadowych arkuszów styli, co daje nam jeszcze większą kątrolę nad wyglądem dokumentu.

W ostatnim czasie w tym języku powstają nawet proste gry, umieszczane na stronach WWW, które mają na celu umilić internautom surfowanie po sieci. Aktualnie trudno znaleźć stronę w internecie, która chociaż w niewielkim stopniu nie korzystałaby z dobrodziejstw dynamicznego HTML-a. Aktualnie każdy szanujący się webmaster w celu precyzyjnego ustawienia elementów na tworzonej stronie wykorzystuje arkusze stylów wchodzące w skład języka DHTML.

Aby móc oglądać strony wykorzystujące Dynamiczny HTML musisz posiadać zainstalowaną przeglądarkę internetową Netscape Navigator lub Microsoft Internet Explorer w wersji przynajmniej 4.0. Przeglądarki te bardzo różnie interpretują DHTML. Zarówno Microsoft jak i Netscape wprowadzają w kolejnych wersjach swoich produktów własne technologie, które bardzo utrudniają pracę ludziom tworzącym strony WWW. Jeżeli jakaś przedstawiana w tym kursie metoda działa tylko w przeglądarce jednej z tych firm jest to wyraźnie zaznaczone zaznaczone.

Chcąc zacząć poznawać ten język trzeba posiadać umiejętność tworzenia chociaż najprostszych stron WWW w HTML-u z wykorzystaniem języka JavaScript.

Strona główna kursu strona główna kursu następna lekcja


Poprzednia lekcja Lekcja 2
KASKADOWE ARKUSZE STYLÓW (CSS) 		następna lekcja
Kaskadowe arkusze stylów (CSS) umożliwiają zwiększenie kontroli nad wyglądem dokumentu. Dzięki nim możemy nadać jednolity wygląd całej stronie definiując takie atrybuty jak: kolor, rozmiar lub krój czcionki, które będą takie same dla danego bloku tekstu (np. akapitu, wiersza tabeli,). Arkusze stylów definiuje się za pomocą poniższego schematu:

<STYLE TYPE="text/css">
 Typ_elementu { właściwość: wartość }
Typ_elementu { właściwość: wartość }
</STYLE>

Pomiędzy nawiasami { i } można nadać wartość kilku właściwościom. Należy jednak pamiętać, aby każdą nową właściwość oddzielać średinkiem.

Definicję arkuszy stylów należy umieścić w sekcji nagłówka dokumentu. Wszystkich możliwe typy elementów, których wartości można definiować za pomocą CSS, spisane są w dodatkach (Właściwości arkuszy stylów).

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
 Definicję arkuszy stylów powinno obejmować się znacznikami komentarzy, dzięki czemu starsze przeglądarki, nie obsługujące dynamicznego HTML-a nie będą wykazywać błędów.
 H1 { font-size: 16pt; color: yellow; text-align: center }
P { font-style: italic; font-weight: bolder }
A { text-decoration: none; color: white }
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#6FB20F">
<H1>To jest nagłówek rzędu pierwszego</H1>
<P>Arkusze stylów dają nowe możliwości projektantom stron WWW<BR>
<A HREF="javascript:window.close()">Odnośnik bez bodkreślenia, w białym kolorze?</A>
</BODY>
</HTML>
EFEKT DZIAŁANIA:

To jest nagłówek rzędu pierwszego

Arkusze stylów dają nowe możliwości projektantom stron WWW
Odnośnik bez podkreślenia, w białym kolorze?


Poprzednia lekcja Lekcja 3
DEFINIOWANIE KLAS 		następna lekcja
Klasy umożliwiają nadanie właściwościom odpowiednich wartości dla kilku elementów naraz. Dzięki klasom zdefiniowanie np. niebieskiego koloru nagłówka nie spowoduje wyświetlenia zielonych nagłówków na całej stronie. Definiowanie klasy powinno przebiegać według poniższego schematu:

typ_elementu.nazwa_klasy { właściwość: wartość; }

Definicję klas umieszczamy, podobnie jak definicję arkuszy stylów, pomiędzy znacznikami <STYLE> i </STYLE>. Obiekt można zastąpić wyrażeniem all, co spowoduje zdefiniowanie klasy dla wszystkich elementów.

Odwołania do odpowiednich klas stosujemy dodając do odpowiedniego znacznika atrybut CLASS="nazwa_klasy".

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
 H1.naglowek { color: yellow; font-size: 14pt }
A { color: white }
A.bezpodkreslenia { text-decoration: none }
Jeżeli nie znasz jakiejś właściwości danego elementu musisz zajrzeć do dodatków. Tam znajduje się spis wszystkich właściwości wraz ze wszystkimi ich wartościami.
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#6FB20F">
<H1 CLASS="naglowek">Ten nagłówek jest żółty dzięki klasie naglowek.</H1>
<H1>Ten zaś nie korzysta z żadnej klasy.</H1>
<A HREF="javascript: window.close()">Dzięki klasom możesz umieszczać odnośniki podkreślone</A><BR>
<A CLASS="bezpodkreslenia" HREF="javascript: window.close()">i nie podkreślone na jednej stronie.</A>
</BODY>
</HTML>

EFEKT DZIAŁANIA:

Ten nagłówek jest żółty dzięki klasie naglowek.

Ten zaś nie korzysta z żadnej klasy.

Dzięki klasom możesz umieszczać odnośniki podkreślone
i nie podkreślone na jednej stronie.

Kaskadowe arkusze stylów dla wygody można umieszczać także w osobnych plikach. Nie używa się wtedy znaczników <STYLE> i </STYLE>. Trzeba jednak dołączyć plik z CSS do aktualnego dokumentu za pomocą polecenia:
<LINK REL="StyleSheet" TYPE="text/css" HREF="nazwa.pliku">


Poprzednia lekcja Lekcja 4
UŻYWANIE WYJĄTKÓW 		następna lekcja
Poznane w poprzednich lekcjach arkusze stylów i klasy umożliwiają np. tworzenie niepodkreślonych odnośników w białym kolorze. Co jednak zrobić kiedy na stronie ma być wyświetlonych 10 niepodkreślonych odnośników i 1 podkreślony (także w białym kolorze)? Wtedy należałoby stworzyć oddzielną klasę. Łatwiej jest jednak skorzystać z wyjątków. Trzeba zdefiniować wyjątek dla tego jednego odnośnika według schematu:
#Nazwa_wyjątku { właściwość: wartość }

Aby zastosować wyjątek do polecenia trzeba dodać odpowiedni parametr:
<POLECENIE CLASS="Nazwa_kalsy" ID="Nazwa_wyjątku">.

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
 H1.naglowek { color: yellow; font-size: 14pt }
A.bezpodkreslenia { text-decoration: none; color: white}
#wyjatek1 { text-decoration: underline }
#wyjatek2 { color: black; font-size: 16pt }
 -->
 </STYLE>
</HEAD>
<BODY BGCOLOR="#6FB20F">
<H1 CLASS="naglowek">Ten nagłówek jest żółty dzięki klasie naglowek.</H1>
<H1 CLASS="naglowek">Ten nagłówek jest żółty dzięki klasie naglowek.</H1>
<H1 CLASS="naglowek" ID="wyjatek2">Ten zaś jest wyjątkiem i ma kolor czarny</H1>
<H1 CLASS="naglowek">Ten nagłówek jest żółty dzięki klasie naglowek.</H1>
<H1 CLASS="naglowek">Ten nagłówek jest żółty dzięki klasie naglowek.</H1>
<A CLASS="bezpodkreslenia" HREF="javascript: window.close()">Odnośnik</A><BR>
<A CLASS="bezpodkreslenia" HREF="javascript: window.close()">Odnośnik</A><BR>
<A CLASS="bezpodkreslenia" HREF="javascript: window.close()">Odnośnik</A><BR>
<A CLASS="bezpodkreslenia" ID="wyjatek1" HREF="javascript: window.close()">Tym razem podkreślony</A><BR>
<A CLASS="bezpodkreslenia" HREF="javascript: window.close()">Odnośnik</A><BR>
</BODY>
</HTML>
EFEKT DZIAŁANIA:

Ten nagłówek jest żółty dzięki klasie naglowek.

Ten nagłówek jest żółty dzięki klasie naglowek.

Ten zaś jest wyjątkiem i ma kolor czarny

Ten nagłówek jest żółty dzięki klasie naglowek.

Ten nagłówek jest żółty dzięki klasie naglowek.

Odnośnik
Odnośnik
Odnośnik
Tym razem podkreślony
Odnośnik

Pamiętaj, że w definicji wyjątków występuje znak #, zaś w wartości atrybutu ID tego znaku nie ma.


Poprzednia lekcja Lekcja 5
TWORZENIE WARSTW 		następna lekcja
Poznane w poprzednich lekcjach arkusze stylów są bardzo przydatne do tworzenia warstw. Warstwa to nic innego jak wydzielony obszar dokumentu w kształcie prostokąta, któremu można określić położenie, kolor tła, styl czcionki oraz wiele innych przydatnych właściwości. Przy zastosowaniu kilku warstw na jednej stronie można ustalić, która ma być na wierzchu, która na samym dole itd. Definicja warstwy powinna przebiegać wg schematu:
<STYLE TYPE="text/css">
#nazwa_warstwy1 { właściwość: wartość }
#nazwa_warstwy2 { właściwość: wartość }
 </STYLE>

Tekst lub gafika, która ma się znaleźć na warstwie musi być objęta znacznikami <DIV ID="#nazwa_warstwy"> i </DIV>.

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
 #warstwa1 { position: absolute; left: 50; top: 50; width: 300; height: 200 }
 Wartość absolute właściwości position spowoduje, że definiowana warstwa zostanie umieszczona w miejscu o współrzędnych podanych przez left i top względem lewego, górnego rogu aktualnego dokumentu.
#warstwa2 { position: absolute; left: 50; top: 110; background-color: transparent;
font-size: 16pt; color:yellow; text-align: center; width: 300; height: 200 }
#warstwa3 { position: relative; left: 250; top: 230; background-color: red;
width: 200; height: 75; }
 W tym przypadku warstwa zostanie umieszczona względem obecnej pozycji w dokumencie (dzięki wartości relative)
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#6FB20F">
<DIV ID="warstwa1">
<IMG SRC="../rys/comp.jpg">
</DIV>
<DIV ID="warstwa2">
Dzięki warstwom<BR>
możesz pisać na grafice !!!<BR>
Bez znajomości DHTML-a<BR>
jest to niemożliwe.
</DIV>
Ten tekst nie jest na żadnej warstwie.
<DIV ID="warstwa3">
To jest przykład warstwy względnej.
</DIV>
</BODY>
</HTML>
EFEKT DZIAŁANIA:

Firma Netscape wprowadziła kilka nowych znaczników do tworzenia warstw m.in. <LAYER>. W kursie nie będę ich opisywał ze względu na to, iż poleceń tych nie obsługuje Internet Explorer. Warstwy stworzone za pomocą arkuszy stylów są interpertowane poprawnie przez obydwie przeglądarki i dają takie same możliwości jak warstwy stworzone przy pomocy znaczników firmy Netscape. Dodatkowe właściwości warstw umieszczone są w dodatkach.


Poprzednia lekcja Lekcja 6
ROZPOZNAWANIE PRZEGLĄDARKI 		następna lekcja
Umiesz już tworzyć warstwy. Dzięki jezykom DHTML i JavaScript możesz teraz się trochę pobawić nad warstwami. Firma Netscape zastosowała trochę inny sposób operowania nad warstawami niż firma Microsoft. Musimy dlatego napisać mały skrypcik, który będzie rozpoznawał w jakiej przeglądarce otwarta zostałą strona. Najłatwiej zrobić to tak jak poniżej:
nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;

Jeżeli używasz przeglądarki firmy Netscape, zmiennej nn4 zostanie przypisana wartość true. W przeciwnym wypadku wartość false. Podobnie ze zmienną ie4 dla przeglądarki Internet Explorer. Teraz wystarczy uzależnić od wartości zmiennych nn4 i ie4 wykonywanie odpowiednich poleceń:

if (nn4) { polecenia dla przeglądarki Netscape Navigator }
if(ie4) { polecenia dla przeglądarki Internet Explorer }

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
</HEAD>
<BODY BGCOLOR="#6FB20F">
<CENTER>
<SCRIPT LANGUAGE="JavaScript">
 nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;
if (nn4) { document.write("Używasz przeglądarki Netscape Navigator"); }
if (ie4) { document.write("Używasz przeglądarki Microsoft Internet Explorer"); }
</SCRIPT>
</CENTER>
 </BODY>
</HTML>
EFEKT DZIAŁANIA:

Dzięki powyższym wiadomościom będziesz mógł stworzyć stronę, która sama rozpozna rodzaj przeglądarki w której jest wyświetlana i dostosuje się do odpowiedniej jej wersji.


Poprzednia lekcja Lekcja 7
UKRYWANIE WARSTW 		następna lekcja
Tematem kilku następnych lekcji będzie manipulacja warstwami przy użyciu języka JavaScript. Występują tutaj pewne niezgodności pomiędzy przeglądami Navigator i Internet Explorer. Na początku zajmiemy się ukrywaniem i pokazywaniem warstw. Jeżeli chcemy ukryć jakąś warstwę trzeba się do niej odwołać według schematu:
Microsoft Internet Explorer: document.all["nazwa_warstwy"];
Netscape Navigator: document.layers["nazwa_warstwy"];

Ukrywanie warstw możliwe jest dzięki właściwości style.visibility (MSIE) lub visibility (NN). Właściwość ta może przyjmować wartości:
Microsoft Internet Explorer: hidden (warstwa ukryta) lub visible (warstwa widoczna).
Netscape Navigator: hide (warstwa ukryta) lub show (warstwa widoczna).

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
 #warstwa1 { position: absolute; left: 50; top: 0; background-color:yellow; visibility: hidden }
#warstwa2 { position: absolute; left: 100; top: 0; background-color:blue; visibility: hidden }
#warstwa3 { position: absolute; left: 150; top: 0; background-color:red; visibility: hidden }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
 nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;
 function klikniecie(nacisniecie,nazwa)
{ if (nn4) { if (nacisniecie) { document.all[nazwa].style.visibility='visible'}
else { document.all[nazwa].style.visibility='hidden'};
if (ie4) { if (nacisniecie) { document.layers[nazwa].visibility='show'}
else { document.layers[nazwa].visibility='hide'}; } }
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#6FB20F">
 Wybierz, które warstwy chcesz zobaczyć:<BR>
<FORM NAME="wybierz">
<INPUT TYPE="Checkbox" onClick="klikniecie(this.checked,'warstwa1');">Warstwa pierwsza<BR>
<INPUT TYPE="Checkbox" onClick="klikniecie(this.checked,'warstwa2');">Warstwa druga<BR>
<INPUT TYPE="Checkbox" onClick="klikniecie(this.checked,'warstwa3');">Warstwa trzecia
</FORM>
<DIV ID="warstwa1">To jest warstwa pierwsza</DIV>
<DIV ID="warstwa2">To jest warstwa druga</DIV>
<DIV ID="warstwa3">To jest warstwa trzecia</DIV>
</BODY>
</HTML>
EFEKT DZIAŁANIA:

Wybierz, które warstwy chcesz zobaczyć:
Warstwa pierwsza
Warstwa druga
Warstwa trzecia
To jest warstwa pierwsza

To jest warstwa druga

To jest warstwa trzecia


Poprzednia lekcja Lekcja 8
PORUSZANIE WARSTWAMI 		następna lekcja
Nic nie stoi na przeszkodzie, aby nasze warstwy zaczęły się ruszać. Zmianę położenia dowolnej warstwy dokonujemy za pomocą poleceń:
Microsoft Internet Explorer:
document.all['nazwa_warstwy'].style.left = współrzędna_x;
document.all['nazwa_warstwy'].style.top = współrzędna_y;

Netscape Navigator:
document.layers['nazwa_warstwy'].left = współrzędna_x;
document.layers['nazwa_warstwy'].top = współrzędna_y;

W ten sposób możesz zmieniać większość właściwości warstw. Język JavaScript odgrywa tutaj dużą rolę. Spis właściwości warstw dostępnych w tym języku znajduje się w dodatkach.

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
#warstwa { position: absolute; left: 50; top: 50; background-color:yellow; }
 -->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
 x=50; y=50;
function przesun()
{ nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;
if (ie4) { document.all['warstwa'].style.left = x;
document.all['warstwa'].style.top = y; }
if (nn4) { document.layers['warstwa'].left = x;
document.layers['warstwa'].top = y;} }
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#6FB20F">
<DIV ID="warstwa">Warstwa</DIV>
 Za pomocą poniższych przycisków możesz przesuwać warstwę.<P>
<FORM NAME="Ster">
<CENTER>
<INPUT TYPE="Button" VALUE="Góra" onClick="y=y-10; przesun();"><BR>
<INPUT TYPE="Button" VALUE="Lewo" onClick="x=x-10; przesun();">
<INPUT TYPE="Button" VALUE="Prawo" onClick="x=x+10; przesun();"><BR>
<INPUT TYPE="Button" VALUE="Dół" onClick="y=y+10; przesun();">
</FORM>
</BODY>
</HTML>
EFEKT DZIAŁANIA:

Warstwa
Za pomocą poniższych przycisków możesz przesuwać warstwę.

Na razie umiesz przesuwać warstwy "ręcznie". W następnej lekcji dowiesz się co uczynić, aby warstwy poruszały się same.


Poprzednia lekcja Lekcja 9
ANIMOWANE WARSTWY 		następna lekcja
Animowane warstwy otrzymuje się poprzez ciągłą zmianę współrzędnych położenia warstwy. Najłatwiejszym sposobem jest użycie polecenia:
setInterval(polecenie, czas, argumenty);

Polecenie jest to najczęściej nazwa funkcji, która będzie wykonywana w podanych w milisekundach odstępach czasowych. Jeżeli funkcja wymaga argumentów to w tym przypadku podajemy je na końcu.

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
 #warstwa { position: absolute; background-color:yellow; }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
 x=1; y=1;
function przesun()
{ nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;
if (ie4) { document.all['warstwa'].style.left = x;
document.all['warstwa'].style.top = y; }
if (nn4) { document.layers['warstwa'].left = x;
document.layers['warstwa'].top = y;} }
if (y==1) { x++ };
if (y>=1 && x==200) { x=200; y++ };
if (y==100) { x-- };
if (y<=100 && x==1) {x=1; y--} ; };
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#6FB20F">
<DIV ID="warstwa">To się rusza !!!</DIV>
<SCRIPT LANGUAGE="JavaScript">
 setInterval(przesun,5);
</SCRIPT>
</BODY>
</HTML>
EFEKT DZIAŁANIA:
To się rusza !!!

Pamiętaj, że polecenie setInterval jak i wszystkie inne modyfikujące właściwości warstwy mogą się pojawić dopiero po znacznikach <DIV> i </DIV>, dotyczących tej warstwy. Jeżeli polecenia te umieścisz przed tymi znaczniami przeglądarka wyświetli odpowiedni komunikat o błędzie.


Poprzednia lekcja Lekcja 10
NAKŁADANIE WARSTW 		następna lekcja
Już w przykładzie w poprzedniej lekcji mieliśmy do czynienia z nakładaniem warstw. Bez względu jednak na kolejność ich pokazywania, zawsze tak samo się przykrywały (żółta była na spodzie, niebieska po środku i czerwona na wierzchu). Do określenia kolejności nakładania warstw służy właściwość:
Microsoft Internet Explorer: style.z-index
Netscape Navigator: z-index

Właściwość może przyjmować tylko wartości całkowite. Im wyższą liczbę jej przypiszemy tym warstwa znajdzie się wyżej.

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
 #warstwa1 {position:absolute; left:50; top:120; width:100; height:100; background-color:yellow}
#warstwa2 {position:absolute; left:110; top:140; width:100; height:100; background-color:blue}
#warstwa3 {position:absolute; left:70; top:180; width:100; height:100; background-color:red}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
 a=5;
function klikniecie(nacisniecie,nazwa)
{ a=a+1; nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;
if (nacisniecie) {
if (ie4) { document.all[nazwa].style.zIndex=a }
if (nn4) { document.layers['przyklad'].document.layers[nazwa].zIndex=a } }
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#6FB20F">
 Wybierz, która warstwa ma się ukazać na wierzchu:<BR>
<FORM NAME="wybierz">
<INPUT TYPE="Radio" onClick="klikniecie(this.checked,'warstwa1');" NAME="n">Żółta<BR>
<INPUT TYPE="Radio" onClick="klikniecie(this.checked,'warstwa2');" NAME="n">Niebieska<BR>
<INPUT TYPE="Radio" onClick="klikniecie(this.checked,'warstwa3');" NAME="n" CHECKED>Czerwona
</FORM>
<DIV ID="warstwa1">żółta</DIV>
<DIV ID="warstwa2">niebieska</DIV>
<DIV ID="warstwa3">czerwona</DIV>
</BODY>
</HTML>
EFEKT DZIAŁANIA:
Wybierz, która warstwa ma się ukazać na wierzchu:
Żółta
Niebieska
Czerwona
żółta
niebieska
czerwona


Poprzednia lekcja Lekcja 11
SKALOWANIE ZDJĘĆ (MSIE) 		następna lekcja
DHTML daje nam możliwość dynamicznej zmiany rozmiarów rysunków. Wystarczy umieścić rysunek na warstwie i nadać mu atrybut WIDTH=100%. W celu zmiany rozmiarów rysunku należy zmienić rozmiary warstwy, a rysunek dostosuje się sam. Rozmiary warstwy zmieniamy zgodnie z poniższym schematem:
document.all['nazwa_warstwy'].style.width = szerokość
document.all['nazwa_warstwy'].style.height = wysokość

W przypadku, gdy warstwa nie miała zdefiniowanej wysokości lub szerokości wystarczy zmienić jedną z tych właściwości. Druga się dostosuje sama. Sztuczka ta działa tylko w przeglądarce Microsoft Internet Explorer.

KOD ŹRÓDŁOWY PRZYKŁADU:
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
 #warstwa { position: absolute; top:100; width:300; }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
 w=1;
function skala()
{ if (w<=0.1) {w=0.1}
document.forms["skaluj"].ekran.value=100*w;
document.all["warstwa"].style.width=300*w; }
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#6FB20F">
<FORM NAME="skaluj">
<INPUT TYPE="Button" VALUE="<<" onClick="w=w-0.1;skala()">
<INPUT TYPE="Text" NAME="ekran" VALUE="100" SIZE="3" >%
<INPUT TYPE="Button" VALUE=">>" onClick="w=w+0.1;skala()">
</FORM>
<DIV ID="warstwa"><IMG SRC="../rys/comp.jpg" WIDTH="100%"></DIV>
</BODY>
</HTML>
EFEKT DZIAŁANIA:
%

Przedstawiony sposób skalowania zdjęć działa tylko w przeglądarce Internet Explorer. W tym przypadku wymiary zdjęcia dostosowują się do wymiarów warstwy. W przeglądarce firmy Netscape jest niestety odwrotnie.


Poprzednia lekcja Lekcja 12
CIENIOWANE TEKSTY 		następna lekcja
Dzięki Dynamicznemu HTML-owi możliwe jest w bardzo prosty sposób uzyskanie efektu cieniowanego tekstu. Sztuczka ta polega na nałożeniu na siebie dwóch warstw o identycznej zawartości (na jedej warstwie tekst może mieć inny kolor) i przesunięciu jednej z nich o kilka pikseli. Należy pamiętać, że warstwa, która ma być cieniem musi zostać wyświetlona jako pierwsza. Wtedy druga - będąca już tekstem - przysłoni większą część tej pierwszej i uzyskamy efekt cieniowanego tektu.

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
 #tlo { position: absolute; top: 102; left: 102; color: black; font-size: 18pt; font-weight: bold }
#tekst { position: absolute; top: 100; left: 100; color: red; font-size: 18pt; font-weight: bold }
</STYLE>
</HEAD>
<BODY BGCOLOR="#6FB20F">
<DIV ID="tlo">INTERNETOWY KURS DHTML-a</DIV>
<DIV ID="tekst">INTERNETOWY KURS DHTML-a</DIV>
</BODY>
</HTML>
EFEKT DZIAŁANIA:

INTERNETOWY KURS DHTML-a
INTERNETOWY KURS DHTML-a


Poprzednia lekcja Lekcja 13
ZMIANA ZAWARTOŚCI WARSTWY (NN) 		następna lekcja
Zmiany zawartości warstwy za pomocą JavyScript często się przydaje. Możliwe jest to jednak tylko w przeglądarce Netscape Navigator. Odbywa to się według schematu:

document.layers["nazwa_warstwy"].document.open();
document.layers["nazwa_warstwy"].document.write("tekst lub polecenia HTML");
document.layers["nazwa_warstwy"].document.close();

KOD ŹRÓDŁOWY PRZYKŁADU:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--
 #warstwa { position: absolute; top:200; left:10; layer-background-color:yellow; }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
 function dodaj()
{ document.layers["warstwa"].document.open();
document.layers["warstwa"].document.write(document.forms['pole'].tekst.value);
document.layers["warstwa"].document.close(); }
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#6FB20F">
 Wpisz tutaj tekst, który ma się ukazać w warstwie:<BR>
<FORM NAME="Pole">
<TEXTAREA COLS="55" ROWS="5" NAME="tekst" onChange="dodaj()"></TEXTAREA>
</FORM>
<DIV ID="warstwa">Jeżeli ten tekst Ci się nie podoba to go zmień !!!</DIV>
</BODY>
</HTML>
EFEKT DZIAŁANIA:

Jeżeli ten tekst Ci się nie podoba to go zmień !!!

Wpisz tutaj tekst, który ma się ukazać w warstwie:

Zmiana zawartości warstw jest bardzo przydatna. Można na przykład stworzyć edytor HTML-a, gdzie tworzona strona będzie od razu pokazywana w tym samym oknie.


Poprzednia lekcja Lekcja 14
EDYTORY DYNAMICZNEGO HTML-a 		strona główna kursu
Na koniec chciałbym napisać o edytorach dynamicznego HTML-a. Programy te w znacznym stopniu wspomagają korzystanie z tego języka. Najlepszym polskim programem pełniących tę funkcję jest Skryba firmy Cream Software.

Program Skryba jest jednym z pierwszych na świecie, a może nawet pierwszym, specjalizowanym programem służącym do tworzenia skryptów JavaScript i programów DHTML wykorzystywanych na stronach WWW.

Oprócz bogatych możliwości edycyjnych oraz wbudowanego podglądu realizowanego przy pomocy przeglądarki Internet Explorer, program oferuje mechanizmy zarządzające tworzonymi skryptami, pozwalając na ich wygodne składowanie w bibliotece skryptów użytkownika, a jedną z najważniejszych cech programu jest niespotykana nigdzie bardzo obszerna biblioteka ponad 50 skryptów gotowych do natychmiastowego wykorzystania.

Program został stworzony z myślą o zaawansowanych i początkujących twórcach stron WWW, którym daje jednakowo duże możliwości. Początkujący znajdą w nim nieocenione źródło gotowych, atrakcyjnych efektów specjalnych, które w łatwy sposób umieszczą na swojej stronie. Profesjonaliści natomiast, mają wreszcie pierwsze specjalizowane narzędzie pozwalające na tworzenie i testowanie JavaScript.

Skryba dostarczany jest z dokumentacją w postaci pliku pomocy (rys. obok), który pomoże każdemu zrozumieć podstawy pracy z edytorem. Oprócz pomocy do programu wraz ze Skrybą otrzymasz kurs programowania w języku JavaScript w postaci dokumentacji HTML w języku polskim oraz specyfikację języka VBScript (HTML Help - język angielski).

Polecam gorąco Skrybę. Jest naprawdę najlepszy w swojej dziedzinie. Jednocześnie zachęcam do zamieszczania logo Skryby na swojej stronie. Aby tego dokonać, wystarczy skopiować poniższy fragment w dowolne miejsce na swojej stronie:

<A HREF="http://www.creamsoft.com.pl/skryba" TARGET="_top">
<IMG SRC="http://www.creamsoft.com.pl/graphic/icons/skr-act.gif" HEIGHT="31" WIDTH="83" border=0 ALT="Dynamika to Skryba"></A>

Nie pozostaje więc nic innego, jak ściągnięcie programu i przekonanie się o jego możliwościach, do czego gorąco namawiam.

Więcej informacji na temat Skryby, możesz znaleźć na stronie WWW firmy Cream Software.

Podziękowania dla Rafała Płatka, za udostępnienie materiałów na temat programu Skryba.

strona główna kursu


Archiwum z kursem

To jest wersja off-line kursu z dnia 30.III. 2000 r.

Jeżeli chcesz zobaczyć jego najnowszą wersję - odwiedź stronę domową kursu: http://www.ipts.w.pl.

Krótkie info

Cały materiał kursy podzielony jest na 14 lekcji. W dodatkach znajdziesz dodatkowe materiały przydatne podczas tworzenia dynamicznych stron: właściwości arkuszy stylów, właściwości warstw. Do dyspozycji masz również listę najpopularniejszych stron dotyczących języka DHTML. Niektóre z nich oferują do ściągnięcia darmowe skrypty.

Uwaga !!!

Jeżeli chcesz, aby ten kurs był dołączany do Twojego programu lub pragniesz go umieścić na płycie - napisz.

Kurs ten jest własnością Michała Gwoździa. Kopiowanie i rozpowszechnianie całości lub fragmentu kursu bez jego zgody jest zabronione.

Dynamiczny HTML jest zestawem technologii, w skład których wchodzą rozszerzenia HTML-a oraz polecenia pozwalające autorom tworzyć strony interaktywne.

DHTML umożliwia projektantowi strony zwiększenie kontroli nad wyglądem dokumentu.

Zaczynając naukę tego języka musisz dosyć dobrze zanć HTML i JavęScript. Do poszczególnych lekcji dotrzeć można za pomocą górnego menu lub poniższego spisu:

1 - Co to jest DHTML ?
2 - Kaskadowe arkusze stylów
3 - Definiowanie klas
4 - Używanie wyjątków
5 - Tworzenie warstw
6 - Rozpoznawanie przeglądarki
7 - Ukrywanie warstw
8 - Poruszanie warstwami
9 - Animowane warstwy
10 - Nakładanie warstw
11 - Skalowanie zdjęć (MSIE)
12 - Cieniowane teksty
13 - Zmiana zawartości warstwy
14 - Edytory DHTML-a

Wielu ciekawych rzeczy na temat języka DHTML możesz także dowiedzieć się z artykułów umieszczonych w poradniku.

Tworzenie dynamicznych stron WWW na pewno ułatwią Ci zamieszczone na stronie Podręcznika liczne prorgamy wspierające tą technologię.

Jeżeli masz jakiekolwiek problemy lub pytania dotyczące tego języka chętnie w miarę możliwości Ci pomogę. Pisz na mój adres: gwozdz@star.wckp.lodz.pl


 Wybierz, która warstwa ma się ukazać na wierzchu:
Żółta
Niebieska
Czerwona
żółta
niebieska
czerwona
Przykład przeznaczony dla przeglądarki Microsoft Internet Explorer !!!


To się rusza !!!

Przykład przeznaczony dla przeglądarki Microsoft Internet Explorer !!!


To się rusza !!!

Przykład przeznaczony dla przeglądarki Netscape Navigator !!!


%
Przykład przeznaczony dla przeglądarki Microsoft Internet Explorer !!!

HTML>