Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Podstawy i rozszerzenia języka HTML + style kaskadowe (CSS) i ich zastosowania Oprac. Dariusz Wojtala.

Podobne prezentacje


Prezentacja na temat: "Podstawy i rozszerzenia języka HTML + style kaskadowe (CSS) i ich zastosowania Oprac. Dariusz Wojtala."— Zapis prezentacji:

1 Podstawy i rozszerzenia języka HTML + style kaskadowe (CSS) i ich zastosowania Oprac. Dariusz Wojtala

2 Osnowa dokumentu Informacje nagłówkowe Właściwa treść (ciało) dokumentu

3 Tytuł dokumentu Tytuł własny strony TITLE - nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład:

4 Strona kodowa lub

5 Podsumowując Tytuł strony właściwa treść (ciało) dokumentu

6 Kolor tła dokumentu "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości szesnastkowych - #FF0000, #008000, #000000, #FFFFFF

7 Tytuły... Wartość domyślna: Zawsze pogrubione i wyrównane do lewej. Opcje: Opcje: (align=left/center/right) Największy Najmniejszy

8 Akapity i wiersze To jest treść pierwszego akapitu To jest treść drugiego akapitu To jest pierwszy wiersz To jest drugi wiersz To jest trzeci wiersz To jest czwarty wiersz

9 Pozioma linia Opcje dodatkowe: size – rozmiar w pikselach, noshade – brak cieniowania, color – kolor linii, width – długość w pikselach lub procentach strony. strony. align – typ wyrównania (do lewej, środka, prawej)

10 Wykazy – wypunktowane Dlaczego zajmuję się UFO? Uważam, że UFO istnieje Uważam, że pozaziemskie cywilizacje mogą nam pomóc Uważam, że należy się przygotować na spotkanie Opcje dodatkowe: type=kształt (circle,square,disc)

11 Wykazy – numerowane Dlaczego zajmuję się UFO? Uważam, że UFO istnieje Uważam, że pozaziemskie cywilizacje mogą nam pomóc Uważam, że należy się przygotować na spotkanie Opcje dodatkowe: type=typ (A, a, I, i, 1) start=x (początek numeracji

12 Atrybuty czcionek To jest tekst normalny To jest tekst pogrubiony (bold) To jest tekst pochylony (italic, kursywa) To jest tekst podkreślony (underlined) To jest tekst przekreślony (strike) Czcionka o stałej szerokości Tekst cytatu książkowego

13 Odsyłacze (linki, hiperłącza) Portal darmowego oprogramowania Napisz do Bolka (Kolory ) vlink vlink=kolor (kolor łącza odwiedzonego) alink alink =kolor (kolor łącza podczas kliknięcia)

14 Wielkość czcionki Wielkość bezwzględna Tekst objęty definicją x = Wielkość względna Tekst objęty definicją x = 1...6

15 Kolor czcionki Tekst objęty poleceniem Szesnaście podstawowych barw: black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua Kolor może być podany kodem hexadecymalnym w postaci: #CCF78A

16 Grafika na stronie lub Ważne!!! Konieczna ścieżka dostępu, jeśli plik znajduje się w innym katalogu.

17 Muzyka na stronie lub Ważne!!! Konieczna ścieżka dostępu, jeśli plik znajduje się w innym katalogu.

18 Ogólne ramy tabel

19 Wiersz tabeli

20 Komórka w wierszu Przykład:

21 Obramowanie tabeli

22 Obramowanie komórek

23 Marginesy dla komórek Kowalski

24 Szerokość tabeli, komórki Możemy podać w procentach szerokości strony, np. 45%

25 Wysokość tabeli Lub podajemy zamiast w procentach w pikselach np. 50

26 Wyrównanie tabeli

27 Poziome i pionowe wyrównanie danych w komórce Poziome Pionowe text

28 Kolor tła tabeli i komórki Obrazek w tle: !!! Można użyć dla oznaczenia koloru kodu hexadecymalnego

29 Kolor obramowania …

30 Tytuł tabeli (podpis tabeli) Tytuł tabeli umieszczony u góry Tytuł tabeli umieszczony u góry i z lewej strony

31 Dalsze kroki: content&task=view&id=112&Itemid=160STYLE le.htm

32 Kaskadowe Arkusze Stylów - Cascading Style Sheet Podstawy CSS

33 Atrybuty arkuszy stylów Atrybutu kaskadowych arkuszy stylów można pogrupować w kilka szerokich kategoriach: Wygląd czcionki i jej styl. Tło - kolor i obrazy. Wyrównywanie tekstu. Odstępy Wygląd obramowań Inne (w tym skalowanie, zawijanie tekstu i listy).

34 Wygląd i styl czcionki – cz.I AtrybutOpis font-familyOkreśla krój pisma. Wartościami są nazwy czcionek (takie jak Arial, Times lub Palatino) lub nazwa jednej z pięciu rodzin ogólnych: SERIF(times), SANS-SERIF(helvetica), CURSIVE(zaph chancery), FANTASY(western), MONOSPACE(courier) font-size Określa wielkość czcionki w oparciu o rozmiar absolutny, względny, w stosunku do wartości em oraz w procentach. (pt, in, cm, px) font-styleOkreśla styl czcionki. Jest on reprezentowany przez wartości normal, italic i oblique font-weightOkreśla grubość czcionki. Podstawowymi wartościami są normal, bold, bolder i lighter,.

35 Wygląd i styl czcionki – cz.II AtrybutOpis font Umożliwia jednoczesne dokonanie wszystkich dotychczas omawianych ustawień. Oto porządek, w jakim powinny się pojawiać atrybuty: font-style, font-variant, font-weight, font-size, line-height, font-family. color Definiuje kolor elementu tekstu i jest określany za pomocą jednego z szesnastu słów kluczowych: black, maroon lub kodem hexadec. text- decoration Umożliwia wprowadzanie dodatkowych ozdobników, takich jak podkreślenie, przekreślenie i miganie. Może przyjmować cztery wartości: none, overline, line-through i blink.

36 Wygląd i styl czcionki – cz.III AtrybutOpis backgroundUmożliwia jednoczesne definiowanie szeregu wartości atrybutów tła. Porządek jest następujący: background-color, background-image, background- position. background: gray line-heightUstawia odległość między liniami pisma (interlinia) - w (pt), (in), (cm), (px). margin-left margin-right margin-top margin-bottom Ustawia marginesy - w (pt), (in), (cm), (px). Przykład margin-left: 1.5cm text-alignUstawia justowanie (do lewej – left), do środka (center), do prawej (right). text-indentUstawia odległość od lewego marginesu - w (pt), (in), (cm), (px).

37 Wygląd i styl czcionki – cz. IV AtrybutOpis word-spacing Umożliwia zwiększenie domyślnych odstępów pomiędzy wyrazami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal. letter-spacingUmożliwia zwiększenie domyślnych odstępów pomiędzy literami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal.

38 Przykłady i ćwiczenia do wykonania Tekst sformatowany bez użycia stylów WYKONAJ korzystając z NOTATNIKA Oto zwykły akapit z informacjami. Oto zwykły akapit z informacjami.

Tu będzie wyświetlony pewien kod, powinien być "w courierze" i powinien mieć duże odstępy między wierszami, więcej niż normalnie w przypadku kroju średniego rozmiaru. Tu będzie wyświetlony pewien kod, powinien być "w courierze" i powinien mieć duże odstępy między wierszami, więcej niż normalnie w przypadku kroju średniego rozmiaru.
I nie zapomnij także o tej ważnej - wciętej - uwadze! I nie zapomnij także o tej ważnej - wciętej - uwadze!

39 Ćwiczenia i przykłady-śródliniowe arkusze stylów WYKONAJ korzystając z NOTATNIKA (wewnątrz WYKONAJ korzystając z NOTATNIKA (wewnątrz Oto zwykły akapit z informacjami. Tu będzie wyświetlony pewien kod, powinien być "w courierze" i powinien mieć duże odstępy między wierszami, więcej niż normalnie w przypadku kroju 12-punktowego. I nie zapomnij także o tej ważnej - wciętej - uwadze! Lecz popatrz - ma wcięcie z jednej strony, a nie z obydwu, czyli lewej i prawej. Nareszcie jest sposób na realizację tej kwestii!

40 Ćwiczenia i przykłady – cd. WYKONAJ korzystając z NOTATNIKA (wewnątrz WYKONAJ korzystając z NOTATNIKA (wewnątrz Ćwiczenie wykonane zwykłym i poniżej uproszczonym zapisem stylu CSS

Pierwszy ważny nagłówek Drugi ważny nagłówek

41 Ćwiczenia i przykłady – cd. WYKONAJ korzystając z NOTATNIKA (wewnątrz WYKONAJ korzystając z NOTATNIKA (wewnątrz Pierwszy akapit Drugi akapit Trzeci akapit

42 Obramowanie wokół tekstu

Zespół Szkół Nr 1 w Mławie kontra

Zespół Szkół Nr 1 w Mławie Typy obramowania groove (wyżłobienie), none (brak), dotted (kropkowane) dashed (kreskowane), solid (ciągłe), double (podwójne), Ridge (grzbiet), inset (wklęsłe), outset (wypukłe).


Pobierz ppt "Podstawy i rozszerzenia języka HTML + style kaskadowe (CSS) i ich zastosowania Oprac. Dariusz Wojtala."

Podobne prezentacje


Reklamy Google