11 Kolory "RGB(0,255,0) " "#426B9C" black (czarny) white (biały) silver(srebrny) gray (szary) maroon (kasztanowy) red (czerwony) purple (purpurowy) fuchsia (fuksja) green (zielony) lime (limonowy) olive (oliwkowy) yellow (żółty) navy (granatowy) blue (niebieski) teal (zielonomodry) aqua (akwamaryna) "RGB(0,255,0) " "#426B9C"

12 Linki opisopis opis nowe okno Opis dymek opis odsyłacza (...) (opis etykiety) do etykiety opis do strony opis do poczty

13 Multimedia oramowanie dymek Tu wpisz tekst animacje Tu wpisz tekst BEHAVIOR = scrol DIRECTION = left alternate right slide up down SCROLLAMOUNT szybkość przesuwania

14 Tabele Struktura tabeli

                   

...	...
...	...

... znacznik tabeli ... znacznik wiersza ... znacznikiem komórki

15 Tabele

... rozmiary... obramowanie ... wewnątrz ... ... ...

16 Przykład

komórka1	komórka2
komórka3	komórka4

17 Tabele Łączenie komórek Pion Poziom

    

...

Pion     

...

Poziom x, y - oznaczają liczbę komórek do połączenia

18 Ramki       <A HREF="spis.html" rel="nofollow">Spis treści</A> ... znaczniki ramek za ... pion ... poziom ... kolor ramki ... szerokość obramowania przewijanie ramki Ramka lokalna (pływająca)

19 Przykład

20 Formularze

     (Tutaj umieszcza się pola formularza)

NAME nazwa potrzebna do odwołań

…

umieszczenie elementów formularza mailto –miejsce docelowe formularza METHOD (post, get) ACTION=skrypt.cgi

21 Elementy formularzy Pole tekstowe SIZE="k" rozmiar pola w znakach MAXLENGTH="n" dopuszczalna ilość liter READONLY domyślna wartość tylko do odczytu Hasło

22 Elementy formularzy Pole wyboru CHECKED – zaznaczonaopis pola CHECKED – zaznaczona DISABLED – zablokowanie pola Pole opcji opis pola

23 Elementy formularzy Lista rozwijana

               Pierwsza możliwość           Druga możliwość           (...)      Trzecia możliwość

kilka opcji wysokość pola

24 Elementy formularzy Obszar tekstowy

     Domyślny ... Rozmiar pola ... Zblokowanie pola ... Brak możliwości edycji tekstu domyślnego

25 Elementy formularzy Selektor plików Wysyłanie formularza Przycisk obrazkowy

26 Elementy formularzy Czyszczenie formularza Przycisk Treść przycisku Rodzaj:submit reset button

27 Kaskadowe arkusze stylów (CSS)Definiowanie stylów odbywa się w następujący sposób: selektor1 { właściwość1: wartość1; właściwość2: wartość2 } selektor2 { właściwość3: wartość3; właściwość4: wartość4 } Sektory to nazwy Tagów, jakim zostaną przypisane odpowiednie właściwości Trzy typy osadzania stylów: Osadzony Zewnętrzny Wpisany

28 Styl osadzony Umieszczamy w nagłówku dokumentu między znacznikami { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/830591/2/images/28/Styl+osadzony+%3Cstyle+type%3D+text%2Fcss+%3E%3C%21%E2%80%94.jpg", "name": "Styl osadzony Umieszczamy w nagłówku dokumentu między znacznikami. i ", "width": "800" } 29 Styl zewnętrzny selektor1 { właściwość1: wartość1; właściwość2: wartość2 } //--> Definiowanie stylu odbywa się w oddzielnym pliku a w nagłówku dokumentu robimy do niego specjalny link: . W pliku styl.css wszystko definiujemy tak jak w stylu osadzonym { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/830591/2/images/29/Styl+zewn%C4%99trzny+%3C%21%E2%80%94+selektor1+%7B+w%C5%82a%C5%9Bciwo%C5%9B%C4%871%3A+warto%C5%9B%C4%871%3B+w%C5%82a%C5%9Bciwo%C5%9B%C4%872%3A+warto%C5%9B%C4%872+%7D+%2F%2F--%3E.jpg", "name": "Styl zewnętrzny ", "description": "Definiowanie stylu odbywa się w oddzielnym pliku a w nagłówku dokumentu robimy do niego specjalny link: . W pliku styl.css wszystko definiujemy tak jak w stylu osadzonym.", "width": "800" } 30 właściwość2: wartość2 }">...Styl wpisany

... Styl definiujemy tylko dla jednago znacznika używając parametru style="właściwości_stylu". Dwa pierwsze sposoby ustalają styl znacznika w całym dokumencie { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/830591/2/images/30/w%C5%82a%C5%9Bciwo%C5%9B%C4%872%3A+warto%C5%9B%C4%872+%7D+%3E....jpg", "name": "właściwość2: wartość2 } >...", "description": "Styl wpisany. ... Styl definiujemy tylko dla jednago znacznika używając parametru style= właściwości_stylu . Dwa pierwsze sposoby ustalają styl znacznika w całym dokumencie.", "width": "800" } 31 Tworzenie klas i wyjątkówDla stworzenia wyjątek stylu od jakiegoś znacznika dla jednego elementu. Definiujemy styl dla nagłówków drugiego stopnia: h2 { font-family: Courier New; text-align: center; color: blue } chcemy, aby jeden lub więcej nagłówków było w kolorze czerwonym. W związku z tym definiujemy klasę: .wyjatek { color: red } A do tagu dodajemy odpowiedni parametr:

. Przy definiowaniu klasy wystarczy podać tylko te właściwości, które różnią klasę od stylu. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/830591/2/images/31/Tworzenie+klas+i+wyj%C4%85tk%C3%B3w.jpg", "name": "Tworzenie klas i wyjątków", "description": "Dla stworzenia wyjątek stylu od jakiegoś znacznika dla jednego elementu. Definiujemy styl dla nagłówków drugiego stopnia: h2 { font-family: Courier New; text-align: center; color: blue } chcemy, aby jeden lub więcej nagłówków było w kolorze czerwonym. W związku z tym definiujemy klasę: .wyjatek { color: red } A do tagu dodajemy odpowiedni parametr: . Przy definiowaniu klasy wystarczy podać tylko te właściwości, które różnią klasę od stylu.", "width": "800" } 32 Właściwości dotyczące tekstuELEMENT OPIS MOŻLIWE WARTOŚCI color kolor czcionki wszystkie możliwe kolory font-family krój czcionki wszystkie możliwe kroje czcionek font-size wielkość czcionki w punktach (pt); xx-small, x-small, smaler, small, large, larger, x-large, xx-large font-style styl czcionki normal, italic, oblique font-weight waga (grubość) czcionki lighter, normal, bold, bolder font-variant kapitaliki normal, small_caps text-align wyrównanie tekstu left, right, center, justify text-decoration dekoracja tekstu none, underline, line-through text-indent wcięcie pierwszego wiersza akapitu w punktach (pt), procentach lub pikselach (px) text-transform transformacja tekstu none, lowercase, uppercase, capitalize white-space tekst normalny / preformatowany / 'niełamliwy' wiersz normal, pre, nowrap cursor rodzaj kursora e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, hand, crosshair, help, move, text, auto, default, wait { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/830591/2/images/32/W%C5%82a%C5%9Bciwo%C5%9Bci+dotycz%C4%85ce+tekstu.jpg", "name": "Właściwości dotyczące tekstu", "description": "ELEMENT. OPIS. MOŻLIWE WARTOŚCI. color. kolor czcionki. wszystkie możliwe kolory. font-family. krój czcionki. wszystkie możliwe kroje czcionek. font-size. wielkość czcionki. w punktach (pt); xx-small, x-small, smaler, small, large, larger, x-large, xx-large. font-style. styl czcionki. normal, italic, oblique. font-weight. waga (grubość) czcionki. lighter, normal, bold, bolder. font-variant. kapitaliki. normal, small_caps. text-align. wyrównanie tekstu. left, right, center, justify. text-decoration. dekoracja tekstu. none, underline, line-through. text-indent. wcięcie pierwszego wiersza akapitu. w punktach (pt), procentach lub pikselach (px) text-transform. transformacja tekstu. none, lowercase, uppercase, capitalize. white-space. tekst normalny / preformatowany / niełamliwy wiersz. normal, pre, nowrap. cursor. rodzaj kursora. e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, hand, crosshair, help, move, text, auto, default, wait.", "width": "800" } 33 Właściwości dotyczące tłaELEMENT OPIS MOŻLIWE WARTOŚCI background-attachment tło przewijane/znak wodny scroll, fixed background-color kolor tła wszystkie możliwe kolory background-image grafika jako tło url("plik.jpg") background-position pozycja tła w punktach (pt), procentach lub pikselach (px) background-repeat sposób powtarznia tła repeat, repeat-x, repeat-y, no-repeat { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/830591/2/images/33/W%C5%82a%C5%9Bciwo%C5%9Bci+dotycz%C4%85ce+t%C5%82a.jpg", "name": "Właściwości dotyczące tła", "description": "ELEMENT. OPIS. MOŻLIWE WARTOŚCI. background-attachment. tło przewijane/znak wodny. scroll, fixed. background-color. kolor tła. wszystkie możliwe kolory. background-image. grafika jako tło. url( plik.jpg ) background-position. pozycja tła. w punktach (pt), procentach lub pikselach (px) background-repeat. sposób powtarznia tła. repeat, repeat-x, repeat-y, no-repeat.", "width": "800" } 34 Właściwości dotyczące marginesówELEMENT OPIS MOŻLIWE WARTOŚCI margin-top górny margines w punktach (pt), procentach lub pikselach (px) margin-bottom dolny margines margin-left lewy margines margin-right prawy margines word-spacing odstępy pomiędzy wyrazami letter-spacing odstępy pomiędzy znakami line-height odstępy pomiędzy wierszami

29 Styl zewnętrzny selektor1 { właściwość1: wartość1; właściwość2: wartość2 } //--> Definiowanie stylu odbywa się w oddzielnym pliku a w nagłówku dokumentu robimy do niego specjalny link: . W pliku styl.css wszystko definiujemy tak jak w stylu osadzonym

30 właściwość2: wartość2 }">...Styl wpisany

... Styl definiujemy tylko dla jednago znacznika używając parametru style="właściwości_stylu". Dwa pierwsze sposoby ustalają styl znacznika w całym dokumencie

31 Tworzenie klas i wyjątkówDla stworzenia wyjątek stylu od jakiegoś znacznika dla jednego elementu. Definiujemy styl dla nagłówków drugiego stopnia: h2 { font-family: Courier New; text-align: center; color: blue } chcemy, aby jeden lub więcej nagłówków było w kolorze czerwonym. W związku z tym definiujemy klasę: .wyjatek { color: red } A do tagu dodajemy odpowiedni parametr:

. Przy definiowaniu klasy wystarczy podać tylko te właściwości, które różnią klasę od stylu.

32 Właściwości dotyczące tekstuELEMENT OPIS MOŻLIWE WARTOŚCI color kolor czcionki wszystkie możliwe kolory font-family krój czcionki wszystkie możliwe kroje czcionek font-size wielkość czcionki w punktach (pt); xx-small, x-small, smaler, small, large, larger, x-large, xx-large font-style styl czcionki normal, italic, oblique font-weight waga (grubość) czcionki lighter, normal, bold, bolder font-variant kapitaliki normal, small_caps text-align wyrównanie tekstu left, right, center, justify text-decoration dekoracja tekstu none, underline, line-through text-indent wcięcie pierwszego wiersza akapitu w punktach (pt), procentach lub pikselach (px) text-transform transformacja tekstu none, lowercase, uppercase, capitalize white-space tekst normalny / preformatowany / 'niełamliwy' wiersz normal, pre, nowrap cursor rodzaj kursora e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, hand, crosshair, help, move, text, auto, default, wait

33 Właściwości dotyczące tłaELEMENT OPIS MOŻLIWE WARTOŚCI background-attachment tło przewijane/znak wodny scroll, fixed background-color kolor tła wszystkie możliwe kolory background-image grafika jako tło url("plik.jpg") background-position pozycja tła w punktach (pt), procentach lub pikselach (px) background-repeat sposób powtarznia tła repeat, repeat-x, repeat-y, no-repeat

34 Właściwości dotyczące marginesówELEMENT OPIS MOŻLIWE WARTOŚCI margin-top górny margines w punktach (pt), procentach lub pikselach (px) margin-bottom dolny margines margin-left lewy margines margin-right prawy margines word-spacing odstępy pomiędzy wyrazami letter-spacing odstępy pomiędzy znakami line-height odstępy pomiędzy wierszami

×

Sign In

Email

Password

Remember Password Forgot Password?

Sign In

---

Login with Google