Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Kurs języka HTML Mariusz Tomczyk. Plan referatu -Budowa dokumentu HTML -Znaczniki tekstu -Multimedia na stronie -Formularze -Ramki i tabele -Kaskadowe.

Podobne prezentacje


Prezentacja na temat: "Kurs języka HTML Mariusz Tomczyk. Plan referatu -Budowa dokumentu HTML -Znaczniki tekstu -Multimedia na stronie -Formularze -Ramki i tabele -Kaskadowe."— Zapis prezentacji:

1 Kurs języka HTML Mariusz Tomczyk

2 Plan referatu -Budowa dokumentu HTML -Znaczniki tekstu -Multimedia na stronie -Formularze -Ramki i tabele -Kaskadowe arkusze stylów

3 Budowa strony Tytuł strony właściwa treść dokumentu (ciało) strona Nagłówek Tytuł Ciało dokumentu

4 Tu wpisz tytuł strony Tu wpisuje się treść strony Budowa dokumentu

5 BODY...

6 Znacznik akapitu Oznaczenie paragrafu oddzielonego linią pustą Korzystając z metod:...

7 ... nadawanie nagłówkom tytułów Tytuł pierwszego rzędu (H1) Tytuł drugiego rzędu (H2) Tytuł trzeciego rzędu (H3) Tytuł czwartego rzędu (H4) Tytuł piątego rzędu (H5) Tytuł szóstego rzędu (H6)... Znacznik tytułów

8 Formatowanie tekstu... Wydzielenie większego bloku tekstu (metody)... wyśrodkowanie elementu zakończenie linii... blokada przełamania tekstu... pogrubienie czcionki... pochylenie... podkreślenie fragmentu tekstu... lub... przekreślenie... indeks górny... indeks dolny... tekst predefiniowany (spacje i tabulatory)

9 Znacznik czcionki wielkość czcionki n(1..7) lub kolor czcionki... Łączenie parametrów To jest jakiś tekst

10 Elementy graficzne linia pozioma bez cieniowania y – grubość w pikselach lub szerokość kolor linii ustawienie linii... obramowanie tekstu

11 Kolory 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 opis 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

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... Poziom... Pion x, y - oznaczają liczbę komórek do połączenia

18 Ramki Spis treści... 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 opis pola CHECKED – zaznaczona DISABLED – zablokowanie pola opis pola Pole opcji

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 Treść przycisku Rodzaj:submit reset button Przycisk

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 i

29 Styl zewnętrzny 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 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

... Styl definiujemy tylko dla jednago znacznika używając parametru">

31 Tworzenie klas i wyjątków 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.

32 ELEMENTOPISMOŻLIWE WARTOŚCI colorkolor czcionkiwszystkie możliwe kolory font-familykrój czcionkiwszystkie możliwe kroje czcionek font-sizewielkość czcionki w punktach (pt); xx-small, x-small, smaler, small, large, larger, x- large, xx-large font-stylestyl czcionkinormal, italic, oblique font-weightwaga (grubość) czcionkilighter, normal, bold, bolder font-variantkapitalikinormal, small_caps text-alignwyrównanie tekstuleft, right, center, justify text-decorationdekoracja tekstunone, underline, line-through text-indent wcięcie pierwszego wiersza akapitu w punktach (pt), procentach lub pikselach (px) text-transformtransformacja tekstunone, lowercase, uppercase, capitalize white-space tekst normalny / preformatowany / 'niełamliwy' wiersz normal, pre, nowrap cursorrodzaj 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 Właściwości dotyczące tekstu

33 Właściwości dotyczące tła ELEMENTOPISMOŻLIWE WARTOŚCI background-attachmenttło przewijane/znak wodnyscroll, fixed background-colorkolor tławszystkie możliwe kolory background-imagegrafika jako tłourl("plik.jpg") background-positionpozycja tła w punktach (pt), procentach lub pikselach (px) background-repeatsposób powtarznia tłarepeat, repeat-x, repeat-y, no-repeat

34 ELEMENTOPISMOŻLIWE WARTOŚCI margin-topgórny margines w punktach (pt), procentach lub pikselach (px) margin-bottomdolny margines w punktach (pt), procentach lub pikselach (px) margin-leftlewy margines w punktach (pt), procentach lub pikselach (px) margin-rightprawy margines w punktach (pt), procentach lub pikselach (px) word-spacing odstępy pomiędzy wyrazami w punktach (pt), procentach lub pikselach (px) letter-spacingodstępy pomiędzy znakami w punktach (pt), procentach lub pikselach (px) line-height odstępy pomiędzy wierszami w punktach (pt), procentach lub pikselach (px) Właściwości dotyczące marginesów


Pobierz ppt "Kurs języka HTML Mariusz Tomczyk. Plan referatu -Budowa dokumentu HTML -Znaczniki tekstu -Multimedia na stronie -Formularze -Ramki i tabele -Kaskadowe."

Podobne prezentacje


Reklamy Google