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 HTMLHTML 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 internetowePrzeglą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 internetoweMicrosoft 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 internetoweNetscape 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 internetoweOpera (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 internetoweNSCA 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ępneRóż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ępneRóż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 uwagiProjektują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 HTMLZnaczniki (tagi) HTML – rozkazy pisane pomiędzy znakami mniejszości (<) i większości (>). Większość znaczników istnieje w dwóch odmianach: otwierającej:
15 Tworzenie dokumentu HTMLWiele 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 HTMLCały dokument jest objęty znacznikami: . Między nimi powinna się znaleźć para znaczników , która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny się znaleźć pomiędzy znacznikami
17 Tworzenie dokumentu HTMLUWAGA: gdy jako znaczników używamy dużych liter dokument HTML jest bardziej czytelny. Między znacznikami powinien się znaleźć znacznik
18 Tworzenie dokumentu HTMLBardzo 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 i wygląda następująco: Strona kodowa Latin 2 wymaga klawiatury z tzw. ogonkami.
19 Tworzenie dokumentu HTML
20 Tworzenie dokumentu HTML-obróbka tekstuPodział wiersza: akapit
(na początku nowego wiersz);nie ma zamknięcia tego znacznika. Akapit: litery na 24 punkty,
Linie poziome: litery na 18 punktów itd. do
: litery 8 pkt ,
linia w kolorze tekst, 6 piksel szerokości, zmiana parametrów: SIZE – grubość linii, WIDTH – szerokość linii, NOSHADE – wyłącza trójwymiarowość,
: wymiar 18 lub 200 w pkt
21 Tworzenie dokumentu HTML-obróbka tekstuWyrównywanie: opcja ALIGN w znacznikach ,
22 Tworzenie dokumentu HTML-obróbka tekstuStyle czcionki: Pogrubienie: ... , Kursywa: ... , Powiększenie czcionki o dwa punkty: ... , Pomniejszenie czcionki o dwa punkty: ... , Indeks górny: ... , Indeks dolny: ... .
23 Tworzenie dokumentu HTML-obróbka tekstuZnacznik: ... , gdzie n jest liczbą z zakresu od 1 do 7. Znacznik: oznacza powiększenie (+) lub zmniejszenie (-) o n, Kroje czcionek: : 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 tekstuKolor: definicja w znacznikach za pomocą nazw angielskich (ograniczenie!) lub za pomocą wartości szesnastkowych. Znacznik: Znacznik: ... Listy (całe listy): znaczniki: ...
z parametrem: TYPE: DISC, CIRCLE, SQUARE, Wyróżnik listy: znacznik:
25 Tworzenie dokumentu HTML-obróbka tekstuZnaczniki wyodrębniające całość listy: ...
; 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ówNazwa 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ówNazwa 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: opis odsyłacza (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:
29 Odsyłacze Kotwice: znacznik: nazwa . Przy tworzeniu odsyłacza do kotwicy należy podać jej nazwę poprzedzoną krzyżykiem #: nazwa Jeśli odnośnikiem jest plik znajdujący się w katalogu w którym jest plik index.htm znacznik jest następujący: nazwa
30 Odsyłacze Struktury wielostronicowe
31 Odsyłacze Adres poczty elektronicznej: znacznik Odsyłacz typu: FILE: znacznik: nazwa Grupy dyskusyjne: znacznik: nazwa
32 Grafika – formaty plikówFormat *.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 – umieszczanieGrafika w tle: znacznik: . Jeśli obrazek nie pokrywa całej strony, to zostanie on powielony tak, aby pokrył całą stronę Umieszczanie grafiki w dokumencie HTML: znacznik:
34 Grafika – pozycja i wyrównywanieOpcja ALIGN określana w obrębie znacznika z parametrami: TOP, MIDDLE, LEFT, RIGHT:
Tekst alternatywny, opcja ALT:
35 Grafika – rozmiar Opcje: WIDTH i HIGHT: znacznik: . (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ępyParametr BORDER (w pikselach, kolor taki jak kolor tekstu). Znacznik: 
Parametr HSPACE i VSPACE (w pikselach). Znacznik:
37 Grafika – odsyłacze Grafika może być odsyłaczem. Znacznik:. 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: . Definicje kolejnych wierszy podajemy w znacznikach:
. W wierszach rozmieszczane są kolumny za pomocą znacznika: . Koniec tabeli – znacznik:
39 Tabele - krawędzie Krawędzie - parametr BORDER: znacznik: 40 Tabele – formatowanie Formatowanie tabel – parametry znacznika 41 Tabele – formatowanie komórekFormatowanie dla każdej komórki niezależnie; parametry w znaczniku 42 Tabele – formatowanie Znacznik 43 Tabele – łączenie komórekŁączenie komórek leżących w sąsiednich kolumnach: parametr COLSPAN w znaczniku: 44 Tabele - nagłówki Komórka nagłówkowa: znacznik: 45 Tabele – grupy wierszy i kolumnPodział tabel na grupy wierszy lub kolumn i formatowanie komórek w danej grupie. Grupa wierszy: znaczniki: (dla części zasadniczej), (dla wierszy nagłówkowych), 46 Tabele – linie i krawędzieParametr 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ędzieParametr 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: określa rozmiar i kształt ramek. Wartość bezwzględna w pikselach lub w procentach, znak gwiazdki (*) powoduje wypełnienie pozostałego miejsca: Znacznik: przypisuje każdej z ramek nazwę (parametr NAME): 49 Wypełnianie ramek Dokumenty stanowiące treść wypełniającą ramki definiowane są poprzez atrybuty SRC: 50 Odsyłacze i ramki doceloweAby wyświetlać zawartość odsyłaczy w poszczególnych ramkach należy to zadeklarować w znaczniku użyć parametru TARGET: 51 Odsyłacze i ramki doceloweOpcje 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: (zwykle w obszarze ). Parametrem TYPE=text/css określa on język definicji arkuszy stylów); np.: Opis tabeli:
: 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)
: ALIGN w poziomie, VALIGN w pionie.Znacznik z parametrami: Właściwości tła: BGCOLOR i BACKGROUND. Znacznik z parametrami: , , ) tekst tekst ... . Łączenie wierszy leżących w sąsiednich komórkach: parametr ROWSPAN w znaczniku: ... . tekst , Wiersz nagłówkowy: Tekst tekst ... tekst tekst ..., tekst dane ..., i .