Wykłady z HTML'a Język HTML został stworzony w Szwajcarii przez programistów pracujących w laboratoriach.

Prezentacja na temat: "Wykłady z HTML'a Język HTML został stworzony w Szwajcarii przez programistów pracujących w laboratoriach."— Zapis prezentacji:

1 Wykłady z HTML'a Język HTML został stworzony w Szwajcarii przez programistów pracujących w laboratoriach

2 Geneza języka HTML Konieczność stworzenia języka służącego do porozumiewania się w Internecie oraz tworzenia zasobów internetowych - stron WWW (World Wide Web) Język HTML (HyperText Markup Language) został stworzony w Szwajcarii (cztery języki urzędowe) przez programistów pracujących w laboratoriach badawczych CERN-u. HTML ma pełnić rolę języka Esperanto.

3 Edytory HTML-a Każdy edytor tekstowy (notepad, notatnik, Word, Word Perfect, Lotus AmiPro etc.,) może być wykorzystany jako edytor języka HTML (zalety – małe rozmiary plików, możliwość kontroli składni),

4 Edytory HTML-a Specjalistyczne programy: Home Site 5.0, 1st Page 2000 (2.0), Hot Dog Pro 6.6, Zajączek (2.2), Ace HTML 5.05, Kicia 4.0, ezHTML 2.0, FrontPage, Front Page Express Webmajster, Pajączek 2000 (4.8.1) (Power Chip Tip 2002),

5 Możliwości języka HTML
HTML umożliwia formatowanie tekstu, kreślenie linii, dołączanie grafiki, dźwięków i filmów video. HTML umożliwia wykorzystanie następujących plików: Filmy Quick Time (*.qt, *.mov) Video (*.avi, *.mpg) Audio (*.au, *.snd, *.wav) Pliki skompresowane (*.zip, *.gz) Skrypty i aplety Java (*.jav, *.js) Tekstowe (*.txt, *.tex) Obrazy skompresowane (*.gif, *.jpg)

6 Przeglądarki internetowe
Przeglądarki internetowe (browsers) interpretują stronę HTML (oraz skrypt Java) i wyświetlają ją w zadanym formacie UWAGA: nie wszystkie polecenia HTML-a są poprawnie interpretowane przez wszystkie przeglądarki !

7 Przeglądarki internetowe
Microsoft Internet Explorer – przeglądarka jest częścią systemu operacyjnego Windows, i podobnie jak system operacyjny, równie popularną. Standardowo w systemie Vista umieszczana jest wersja 7.0 tej przeglądarki (różne wersje językowe).

8 Przeglądarki internetowe
Netscape Navigator – działa w następujących SO: Windows 3.x, 9x, ME, 2000, XP, UNIX, Macintosh. Przeglądarka posiada odtwarzacz video i wspomaganie dźwięku. Dosyć często ukazują się nowe wersje przeglądarki.

9 Przeglądarki internetowe
Opera (9.25) – większość systemów operacyjnych, wbudowana wyszukiwarka, wbudowane karty i blokada wyskakujących okien. Firefox 2 (mozilla) – darmowa, większość systemów operacyjnych, wbudowana wyszukiwarka,

10 Przeglądarki internetowe
NSCA Mosaic – najpopularniejsza przeglądarka w czasie, gdy Internet rozpoczynał swoją pracę. Lynx – przeglądarka stosowana na komputerach systemem operacyjnym UNIX. Przeglądarka pozwala na bardzo szybkie i efektywne przeglądanie stron WWW ale graficzne elementy nie są wyświetlane.

11 Tworzenie dokumentu HTML – uwagi wstępne
Różnorodność komputerów, za pomocą których dokument HTML będzie odczytywany (możliwości hardware’owe – różne szybkości pracy procesorów, etc.) Różnorodność systemów operacyjnych

12 Tworzenie dokumentu HTML – uwagi wstępne
Różnorodność przeglądarek internetowych (nie wszystkie komendy HTML-a są dostępne w każdej przeglądarce) Różne rodzaje połączeń komputera z Internetem (modem analogowy, modem cyfrowy (SDI, ISDN), karta sieciowa 10 MBps, 100 MBps, WiFi (2.4 GHz, 5 GHz) – różne czasy dostępu do zasobów sieciowych (dokumentów HTML)

13 Tworzenie dokumentu HTML – pożyteczne uwagi
Projektując dokument HTML należy bezwzględnie unikać komunikatów typu: strona w budowie (web side under construction) Zakończony dokument koniecznie należy przetestować, najlepiej używając monitora monochromatycznego (czarno-białego)

14 Tworzenie dokumentu HTML
Znaczniki (tagi) HTML – rozkazy pisane pomiędzy znakami mniejszości (<) i większości (>). Większość znaczników istnieje w dwóch odmianach: otwierającej: <słowo kluczowe> i zamykającej </słowo kluczowe>.

15 Tworzenie dokumentu HTML
Wiele znaczników posiada dodatkowe atrybuty (parametry). Atrybuty wpisywane są pomiędzy słowo kluczowe a kończący znak większości znacznik. Często można wpisać kilka atrybutów do jednego znacznika, pisząc je jeden po drugim i oddzielając spacją.

16 Tworzenie dokumentu HTML
Cały dokument jest objęty znacznikami: <HTML></HTML>. Między nimi powinna się znaleźć para znaczników <HEAD></HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny się znaleźć pomiędzy znacznikami <BODY></BODY>

17 Tworzenie dokumentu HTML
UWAGA: gdy jako znaczników używamy dużych liter dokument HTML jest bardziej czytelny. Między znacznikami <HEAD> powinien się znaleźć znacznik <TITLE>Tytuł strony</TITLE>

18 Tworzenie dokumentu HTML
Bardzo ważnym elementem strony WWW jest informacja o stronie kodowej dokumentu. Zalecana strona kodowa to ISO czyli ISO Latin 2. Informacja umieszczona jest w ramach znaczników <HEAD> i wygląda następująco: <META http-equiv="content-type" content="text/html; charset=iso "> Strona kodowa Latin 2 wymaga klawiatury z tzw. ogonkami.

19 Tworzenie dokumentu HTML
<HEAD> <META http-equiv="content-type" content="text/html; charset=iso "> <TITLE>Tytuł strony</TITLE> </HEAD> <BODY> Właściwa treść (ciało) dokumentu </BODY> </HTML>

20 Tworzenie dokumentu HTML-obróbka tekstu
Podział wiersza: <BR> (na początku nowego wiersz);nie ma zamknięcia tego znacznika. Akapit: <P> akapit </P> (przenosi tekst i oddziela od poprzedniego szerszym odstępem) Nagłówek: <H...> nagłówek </H...>,np.. <H1> litery na 24 punkty, <H2> litery na 18 punktów itd. do <H6>: litery 8 pkt , Linie poziome: <HR> linia w kolorze tekst, 6 piksel szerokości, zmiana parametrów: SIZE – grubość linii, WIDTH – szerokość linii, NOSHADE – wyłącza trójwymiarowość, <HR SIZE=18 WIDTH=80% lub =200>: wymiar 18 lub 200 w pkt

21 Tworzenie dokumentu HTML-obróbka tekstu
Wyrównywanie: opcja ALIGN w znacznikach <P>, <H..>. Ustawieniami tego parametru są słowa kluczowe: LEFT, CENTER, RIGHT, JUSTIFY (podobnie jak wszystkie pozostałe słowa kluczowe w HTML można pisać wielkimi i małymi literami oraz ewentualnie ujmować w cudzysłowy). <P ALIGN=justify> Znacznik <CENTER> tekst </CENTER>: znacznik może być wykorzystany w każdym fragmencie tekstu

22 Tworzenie dokumentu HTML-obróbka tekstu
Style czcionki: Pogrubienie: <B> ... </B>, Kursywa: <I> ... </I>, Powiększenie czcionki o dwa punkty: <BIG> ... </BIG>, Pomniejszenie czcionki o dwa punkty: <SMALL> ... </SMALL>, Indeks górny: <SUP> ... </SUP>, Indeks dolny: <SUB> ... </SUB>.

23 Tworzenie dokumentu HTML-obróbka tekstu
Znacznik: <FONT SIZE=n> ... </FONT>, gdzie n jest liczbą z zakresu od 1 do 7. Znacznik: <FONT SIZE=+/-n> oznacza powiększenie (+) lub zmniejszenie (-) o n, Kroje czcionek: <FONT FACE=>: arial, „Times New Roman”, „Wingdings” etc. (wyświetlane są kroje czcionek zainstalowane w komputerze, np. w sys. Windows. Rózne przeglądarki, mają różne mechanizmy osadzania krojów czcionek).

24 Tworzenie dokumentu HTML-obróbka tekstu
Kolor: definicja w znacznikach za pomocą nazw angielskich (ograniczenie!) lub za pomocą wartości szesnastkowych. Znacznik: <BODY BGCOLOR=" " TEXT=" " LINK=" " VLINK=" " ALINK=" "> Znacznik: <FONT COLOR=" ">...</FONT> Listy (całe listy): znaczniki: <UL>...</UL> z parametrem: TYPE: DISC, CIRCLE, SQUARE, Wyróżnik listy: znacznik:<LI> i opcjonalnie </LI>

25 Tworzenie dokumentu HTML-obróbka tekstu
Znaczniki wyodrębniające całość listy: <OL>...</OL>; parametr TYPE: 1 (liczby), A lub a (litery wielkie i małe), I lub i (liczby rzymskie Kroje czcionek: używamy niewiele czcionek (kod HTML nie przenosi kroju czcionek): Arial, Curier New, Times New Roman.

26 Standardowy zestaw kolorów
Nazwa koloru Kolor Wartość Aqua turkusowy 00FFFF Black czarny 000000 Blue niebieski 0000FF Fuchsia różowofioletowy FF00FF Gray szary 808080 Green zielony 008000 Lime seledynowy 00FF00 Maroon brązowy 800000

27 Standardowy zestaw kolorów
Nazwa koloru Kolor Wartość Navy granatowy 000080 Olive oliwkowy 808000 Purple fioletowy 800080 Red czerwony FF0000 Silver jasnoszary C0C0C0 Teal Morska zieleń 008080 White biały FFFFFF Yellow żółty FFFF00

28 Odsyłacze Hipertext: znacznik: <A HREF="adres URL_docelowy">opis odsyłacza</A> (URL-Uniwersal Resourse Locator, czyli adres strony lub zasobu. Standardowo odsyłacze mają kolor niebieski (nie odwiedzane) lub purpurowy (odwiedzanie). Kolory te można zmienić za pomocą parametrów znacznika BODY:<BODY LINK=kolor odsyłacza nie odwiedzanego, ALINK=kolor odsyłacza aktywnego, VLINK=kolor odsyłacza odwiedzanego>

29 Odsyłacze Kotwice: znacznik:<A NAME=nowe> nazwa </A>. Przy tworzeniu odsyłacza do kotwicy należy podać jej nazwę poprzedzoną krzyżykiem #: <A HREF=#nowe> nazwa </A> Jeśli odnośnikiem jest plik znajdujący się w katalogu w którym jest plik index.htm znacznik jest następujący: <A HREF=nazwa pliku> nazwa </A>

30 Odsyłacze Struktury wielostronicowe

31 Odsyłacze Adres poczty elektronicznej: znacznik <A wyślij do mnie a </A> Odsyłacz typu: FILE: znacznik: <A HREF=FILE:///c:nazwa_katalogu/silnik.wav> nazwa </A> Grupy dyskusyjne: znacznik: <A HREF=news:adres.grupy.dyskusyjnej> nazwa </A>

32 Grafika – formaty plików
Format *.gif – rysunki o ostrych konturach i jednolitym wypełnieniu, grafika komputerowa oraz tekst (maksymalnie 256 kolorów,) Format *.jpg – przeznaczony do zdjęć i grafiki o płynnych przejściach między kolorami (miliony kolorów, wielkość pliku zależy od rozmiarów ilustracji a nie od liczby kolorów)

33 Grafika – umieszczanie
Grafika w tle: znacznik: <BODY BACKGROUND=nazwa_grafiki>. Jeśli obrazek nie pokrywa całej strony, to zostanie on powielony tak, aby pokrył całą stronę Umieszczanie grafiki w dokumencie HTML: znacznik: <IMG SRC=( ścieżka)nazwa_pliku.gif>

34 Grafika – pozycja i wyrównywanie
Opcja ALIGN określana w obrębie znacznika <IMG SRC...> z parametrami: TOP, MIDDLE, LEFT, RIGHT: <IMG SRC=obrazek.gif ALIGN=top> Tekst alternatywny, opcja ALT: <IMG SRC=obrazek.gif ALT=obrazek ALIGN=texttop>

35 Grafika – rozmiar Opcje: WIDTH i HIGHT: znacznik: <IMG SRC=obrazek.gif WIDTH="piksele lub procenty" HIGHT="piksele lub procenty">. (W procentach podajemy jeden z parametrów; przeglądarka sama przeskaluje obrazek zachowując proporcje. Jeśli wprowadzimy oba parametry (różne) obrazek zostanie zniekształcony)

36 Grafika – krawędzie i odstępy
Parametr BORDER (w pikselach, kolor taki jak kolor tekstu). Znacznik: <IMG SRC=obrazek.jpg BORDER=25> Parametr HSPACE i VSPACE (w pikselach). Znacznik: <IMG SRC=obrazek.gif HSPACE=30 VSPACE=40>

37 Grafika – odsyłacze Grafika może być odsyłaczem. Znacznik:<A HREF=plik.htm><IMG SRC=obrazek.jpg></A>. Jako odsyłacz zostaje wyróżniony obwódką, którą można usunąć, korzystając z parametru BORDER=0.

38 Tabele – definicje Kod tworzący tabelę rozpoczyna się od znacznika: <TABLE>. Definicje kolejnych wierszy podajemy w znacznikach: <TR>. W wierszach rozmieszczane są kolumny za pomocą znacznika: <TD>. Koniec tabeli – znacznik: </TABLE>

39 Tabele - krawędzie Krawędzie - parametr BORDER: znacznik: <TABLE BORDER=2> Opis tabeli: <CAPTION> opis </CAPTION>. Opis jest wyśrodkowany i umieszczony nad tabelą. Znacznik w formie: <CAPTION ALIGN=botom> wyświetla opis pod tabelą.

40 Tabele – formatowanie Formatowanie tabel – parametry znacznika <TABLE>: WIDTH (szerokość w pikselach lub procent szerokości okna), ALIGN (wyrównywanie do środka, do prawa – tak samo jak dla grafiki), BGCOLOR (kolor tła tabeli), BACKGROUND (grafika zamiast koloru tła), CELLSPACING (odległość między kolejnymi wierszami i kolumnami – obramowania), CELLPADDING (odległość w pikselach między zawartością a jej krawędziami)

41 Tabele – formatowanie komórek
Formatowanie dla każdej komórki niezależnie; parametry w znaczniku <TD>: ALIGN w poziomie, VALIGN w pionie.Znacznik z parametrami: <TD ALIGH=center VALIGN=bottom> Właściwości tła: BGCOLOR i BACKGROUND. Znacznik z parametrami: <TD BACKGROUN=obrazek.gif>, <TD BACKGROUN=yellow>,

42 Tabele – formatowanie Znacznik <FONT...> musi być zastosowany niezależnie do każdej komórki (między znacznikami <TD></TD>) Rozmiar komórki: parametr WITDH umieszczony w każdym znaczniku <TD...>: <TD WIDTH=80%> tekst</TD><TD WITDH=20%>tekst</TD>

43 Tabele – łączenie komórek
Łączenie komórek leżących w sąsiednich kolumnach: parametr COLSPAN w znaczniku: <TD COLSPAN=n> ... </TD>. Łączenie wierszy leżących w sąsiednich komórkach: parametr ROWSPAN w znaczniku: <TD ROWSPAN=n> ... </TD>.

44 Tabele - nagłówki Komórka nagłówkowa: znacznik: <TH> tekst </TH>, Wiersz nagłówkowy: <TR><TH>Tekst</TH><TH> tekst</TH> ...</TR> Kolumna nagłówkowa: <TR><TD> tekst</TD><TH> tekst</TH>...,</TR> <TR><TH> tekst</TH><TD> dane </TD>..., </TR>

45 Tabele – grupy wierszy i kolumn
Podział tabel na grupy wierszy lub kolumn i formatowanie komórek w danej grupie. Grupa wierszy: znaczniki:<TBODY> (dla części zasadniczej), <THEAD> (dla wierszy nagłówkowych), <TFOOD> (dla stopki), po tych znacznikach występują znaczniki <TR> i <TD>.

46 Tabele – linie i krawędzie
Parametr FRAME – definiuje krawędź zewnętrzną – opcje: VOID – brak krawędzi (ustawienia domyślne) ABOVE – tylko krawędź górna BELOW – tylko krawędź dolna HSIDES – tylko krawędzie poziome (górna i dolna) VSIDES – tylko krawędzie pionowe (lewa i prawa) LHS – tylko krawędzie lewe RHS – tylko krawędzie prawe BOX lub BORDER – wszystkie krawędzie

47 Tabele – linie i krawędzie
Parametr RULES definiuje krawędzie między komórkami – opcje: NONE – brak linii GROUPS – linie tylko między grupami kolumn i grupami wierszy ROWS – linie tylko między wierszami COLS – linie tylko między kolumnami ALL – linie między wszystkimi komórkami

48 Ramki Znacznik: <FRAMESET></FRAMESET> określa rozmiar i kształt ramek. Wartość bezwzględna w pikselach lub w procentach, znak gwiazdki (*) powoduje wypełnienie pozostałego miejsca: <FRAMESET COLS=25%,75%>, <FRAMESET ROWS=100,250,*> Znacznik: <FRAME></FRAME> przypisuje każdej z ramek nazwę (parametr NAME):<FRAME NAME=środek>

49 Wypełnianie ramek Dokumenty stanowiące treść wypełniającą ramki definiowane są poprzez atrybuty SRC: <FRAME NAME=spis SRC=pasek.html> <FRAME NAME=glowna SRC=strona.html>

50 Odsyłacze i ramki docelowe
Aby wyświetlać zawartość odsyłaczy w poszczególnych ramkach należy to zadeklarować w znaczniku <A HREF> użyć parametru TARGET: <A HREF="nazwa.htm" TARGET="nazwa_ramki">

51 Odsyłacze i ramki docelowe
Opcje parametru TARGET: TARGET=_self – domyślne działanie odsyłacza TARGET=_top – zastępuje całą stronę nową – wszystkie ramki zostaną usunięte TARGET=_parent – zastępuje zestaw ramek zawierający odsyłacz, z usunięciem w nim podziałów TARGET=_blank – powoduje otwarcie nowego okna przeglądarki i wyświetlenie w nim strony

52 Arkusze stylów (standard CSS)
Określenie rozmiaru tekstu i odstępu między literami, wyrazami i wierszami, Określenie marginesów, obramowania i kolorów dla stron i akapitów – kolor tła można też zdefiniować wewnątrz akapitu, Sterowanie sposobem wyświetlania obrazów w tle strony i używanie grafiki jako znaków wypunktowania na listach.

53 Arkusze stylów Wprowadzanie stylu do dokumentu:
Utworzenie odsyłacza do zewnętrznego arkusza stylów lub zaimportowanie go. Użycie pary znaczników: <STYLE>...</STYLE> (zwykle w obszarze <HEAD>). Parametrem TYPE=text/css określa on język definicji arkuszy stylów); np.:<STYLE TYPE=text/css> Przedefiniowanie znacznika w części <BODY> przy użyciu parametru STYLE np. w znaczniku <P>.

54 Arkusze stylów – elementy i dziedziczenie
Element – znacznik wraz z tekstem lub grafiką, której dotyczy, np. cała część zasadnicza ze znacznikami <BODY>, cały nagłówek ze znacznikiem <H...>, akapit ze znacznikiem <P> wyraz wyróżniony znacznikami pogrubienia <B>. Element znajdujące się wewnątrz innego elementu – np. pogrubiony wyraz w akapicie – nazywa się elementem potomnym, a element go zawierający, nadrzędnym. Elementy potomne dziedziczą charakterystykę elementów nadrzędnych.

55 Arkusze stylów – atrybuty czcionek
Atrybut FONT-FAMILY wraz z nazwą ogólną pisaną dokładnie w taki sposób, jak są wyświetlane w systemie. Atrybut FONT-STYLE (np. italic, normal). Atrybut FONT-WEIGH (np. bold, bolder, lighter, normal, lub liczby od 100 do 900, przy czym 500 to czcionka normalna) Atrybut FONT-SIZE (np. small, medium, large, larger, x-large, xx-large)

56 Arkusze stylów – atrybuty tekstu
Atrybuty tekstu dotyczą układu tekstu i mogą być stosowane niezależnie od atrybutów stylu czcionki. Atrybut TEXT-ALIGN (parametry: left, right, center, justify). Atrybut TEXT-INDENT (wcięcie pierwszego wiersza akapitu). Atrybut TEXT-DECORATION (underline, line-through, overline, blink).

57 Arkusze stylów – atrybuty tekstu
Atrybut TEXT-TRANSFORM (capitalize, uppercase, lowercase, none). Atrybut WORD-SPACING (normal lub wartość zdefiniowana - MIE). Atrybut LATTER-SPACING (odległość między literami - MIE). Atrybut VERTICAL-ALIGN (sub, super - MIE).

58 Kolory i właściwości tła
Atrybut COLOR (określa kolor tekstu, linii i krawędzi. Można go określić za pomocą angielskich nazw potocznych lub za pomocą parametru RGB z zakresu od 0 do 255 (w systemie dziesiętnym)). Atrybut BACKGROUND-COLOR (nazwa koloru lub RGB lub słowa TRANSPARENT). Atrybut BACKGROUND-IMAGE (argument w postaci adresu URL).

59 Kolory i właściwości tła
Atrybut BACKGROUND-REPEAT (parametry repeat, repeat-x, repeat-y, norepead). Atrybut BACKGROUND-ATTACHMENT (parametry scroll, fixed). Atrybut BACKGROUND-POSITION (parametry top, center, bottom, left).

60 Marginesy i krawędzie Parametry: obramowanie (BOX), margines (MARGIN), krawędź (BORDER), odstęp (PADDING). Rozmiar obramowania okreslają atrybuty: WIDTH i HEIGHT. Wartości definiowane są w cm, em (szerokość litery m) lub w pikselach (px).

61 Marginesy i krawędzie Definiuje się również wygląd każdego boku niezależnie za pomocą parametrów typu: MARGIN-TOP, BORDER-WIDTH-BOTTOM, PADDING-RIGHT itp. Kolor i styl krawędzi – parametry: BORDER-COLOR, BORDER-TOP-COLOR, BORDER-STYLE (parametry: SOLID, DOUBLE, GROOVE, INSET, OUTSET, NONE) itp.

62 Klasy i identyfikatory
Klasy i identyfikatory umożliwiają zastosowanie dowolnej liczby stylów wobec tego samego znacznika HTML (np. H1 {FONT-SIZE:30pt; COLOR:green}, H1.czerwony {FONT-STYLE:italic; COLOR:red}, H1niebieski {COLOR:blue},<H1 CLASS=czerwony>)

63 Klasy i identyfikatory
Istnieją klasy, które mogą być stosowane wobec wszystkich znaczników. (np. all.jasnoczerwony {font-weight:300; color green},..., <H3 CLASS=jasnoczerwony> <P CLASS=jasnoczerwony>

64 Klasy i identyfikatory
Identyfikatory – definicja formatu, który może być stosowany wobec dowolnego znacznika. Definicja jest umieszczana w obszarze STYLE, koniecznie ze znakiem # przed nazwą: #czerw-obram {border-color: red; border-width:10px; padding: 5px}

65 Klasy i identyfikatory
Stosowanie stylu w postaci identyfikatora wymaga użycia parametru ID oraz nazwy pozbawionej znaku #: <H2 ID=czerw-obram> ... </H2> <ADDRESS ID=czerw-obram> ... </ADDRESS>

66 Style zależne Definicja stylu znaczników śródtekstowych może być powiązana z elementem nadrzędnym. Styl ma zastosowanie wtedy, gdy znajdzie się w bloku tekstu oznaczonym tym elementem: (znacznik <EM> wyróżnia tekst zwykle za pomocą kursywy) H1 EM {FONT-WEIGHT:900;COLOR:BLUE} P EM {FONT-STYLE:normal; FONT-WEIGHT:700;COLOR:GREEN}

67 Style zależne Przy takiej deklaracji znacznik <EM> będzie dawał bardzo gruby, niebieski tekst wewnątrz elementu <H1>, oraz cieńszy, zielony i wyprostowany tekst wewnątrz elementu <P>. We wszystkich innych sytuacjach znacznik <EM> zachowuje swoje standardowe działanie.

68 Arkusze ze strukturą Znacznik <DIV> oddziela fragment strony w którym można zastosować format specjalny. <DIV ALIGN=center> ... </DIV> Wewnątrz znacznika można zastosować parametr <STYLE>. Znacznik <DIV> może być formatowany także z użyciem klasy lub identyfikatora zdefiniowanych w obszarze STYLE.

69 Arkusze ze strukturą Znacznik <SPAN> wyróżnia fragmenty wewnątrz tekstu. Formatowanie odbywa się wyłącznie przez arkusze stylów, np.: Ten kolor jest <SPAN STYLE=color:red>czerwony</SPAN>. Styl znacznika <SPAN> może być definiowany też klasą lub identyfikatorem (podobnie jak <DIV>).

70 Pozycjonowanie elementów
Atrybut FLOAT wyrównuje grafikę do lewej lub prawej krawędzi okna (łącznie z atrybutami MARGIN-LEFT, MARGIN-RIGHT). (efekt pływania obrazu nad tekstem).

71 Pozycjonowanie elementów
Atrybut CLEAR określa potrzebne dla tekstu puste miejsce. Możliwe są cztery ustawienia: none – tekst wyświetlany obok lub między pływającymi grafikami, left i right – miejsce z lewej lub z prawej strony musi być wolne na tekst. Początek tekstu zostanie umieszczony w następnym wierszu pod pływającym obrazem, both – tekst zostanie umieszczony tam, gdzie po obu stronach nie będzie żadnych elementów pływających.

72 Warstwy Dodając do znacznika informacje o położeniu, można umieścić element w dowolnym miejscu ekranu. Elementy wyświetlane są w takiej kolejności, w jakiej występują w kodzie, przy czym późniejsze zakrywają wcześniejsze – stąd warstwy. Pozycje elementów można określić np. w obszarze STYLE lub w znaczniku <DIV>.

73 Zewnętrzne arkusze stylów
Pliki z definicjami stylów są wykorzystywane za pomocą odwołań do różnych stron jednocześnie. Instrukcja dołączenia zewnętrznego arkusza stylów (styl_1.css) jest następująca: <LINK REL=STYLESHEET TYPE=text/css HREF=styl_1.css> Dalsze modyfikacje atrybutów odbywają się za pośrednictwem ustawień STYLE w kodzie stron.

74 Tworzenie pliku z arkuszem stylów
Definicje znaczników. Klas i identyfikatorów, są zapisywane w dokładnie taki sam sposób jak w obszarze STYLE, lecz bez znaczników <STYLE>. Plik zapisywany jest w formacie tekstowym z rozszerzeniem .css. Komentarze umieszczane są między symolami /* */.

75 Formularze Otwarcie formularza: znacznik <FORM>
Parametr: Action – zawiera URL w postaci adresu mailto, lub programu, który w pewien sposób przetworzy wprowadzone do formularza informacje. Parametr: Method – ma dwa ustawienia: POST i GET.

76 Formularze <FORM METHOD=post ACTION=mailto:aaa@css.com>
<P>Wpisz nazwę firmy: <INPUT TYPE=text NNAME=klient SIZE=40> <P>Wybierz kolor koszuli z listy: <SELECT NAME=styl> <OPTION>Czerwony</OPTION> <OPTION>Zielony</OPTION> <OPTION>Biały</OPTION></SELECT></P> <INPUT TYPE=submit VALUE=Wyślij></FORM>

77 Formularze Ustawienie GET – skomplikowane serwisy np.. Z mechanizmem wyszukiwania (coraz rzadziej używane). Ustawienie POST – poleca przeglądarce przesłać dane formularza pod adresem wskazanym parametrem ACTION. Wewnątrz formularz muszą się znaleźć: element edytowalny przez użytkownika (INPUT) oraz przycisk powodujący wysłanie formularza (SUBMIT).

78 Formularze Każdy element edytowalny w formularzu powinien być identyfikowany przez nazwę wpisywaną w parametrze NAME. Odpowiedziami są wartości (VALUE) elementu, wpisywane lub wybierane przez użytkownika. Dane formularza są zwracane w postaci nazwa=wartość.

79 Formularze Pola tekstowe: TEXT BOX – zawiera pojedynczy wiersz,
TEXT AREA – obszar o definiowalnym rozmiarze Dla jednego wiersza: <INPUT Name= VALUE= SIZE= MAXLENGTH=> Obszar tekstowy: <TEXTAREA NAME= COLS= ROWS=></TEXTAREA>

80 Formularze Pola wyboru.
<INPUT TYPER=CHECKBOX NAME= VALUE=> (Wrtość parametru VALUE staje się aktywna i jest zwracana z wynikami formularza). Przyciski opcji. <INPUT TYPE=RADIO NAME= VALUE=>

81 Formularze Listy rozwijane. <SELECT NAME=kolor>
<OPTION VALUE=zielony>Morska zieleń <OPTION VALUE=niebieski>Błękit nieba <OPTION VALUE=brązowy>Ciemny brąz </SELECT>

82 Formularze Parametry <SELECT NAME= MULTIPLE SIZE=>
Jeśli pierwsza pozycja służy jako opis listy stosujemy parametr DISABLED <OPTION DISABLED>

83 Formularze Przyciski: <INPUT> <BUTTON>
<INPUT TYPE=submit NAME= VALUE=Wyślij> <BUTTON TYPE=submit NAME=>Wyślij polecony</BUTTON> <INPUT TYPE=reset VALUE=Pomyłka>

84 Formularze Przyciski niestandardowe.
<INPUT TYPE=image SRC=images/submit.gif> <BUTTON TYPE=butto><IMG SRC=images/obrazek.gif></BUTTON> <BUTTON TYPE=reset><IMG SRC=images/obrazek1.gif>Wyczyść formularz!</BUTTON>