1 HTML HTML (skrót terminu HyperText Markup Language) jest językiem adjustacji, który umożliwia tworzenie i publikowanie własnych dokumentów multimedialnych w sieci World Wide Web. Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy shareware, aczkolwiek znajdziemy też sporo programów komercyjnych i całkowicie bezpłatnych (freeware). HTML oparty jest na języku SGML (ang. Standard Generalized Markup Language). Zgodnie z konwencją wszystkie informacje HTML rozpoczynają się otwierającym nawiasem trójkątnym {<}, a konczą nawiasem trójkątnym zamykającym {>} - np . Znacznik ten, znany również jako znacznik HTML, informuje interpreter języka HTML (przeglądarkę), że dokument został napisany w standartowym HTML-u. Przykładem interpretera moze być Internet Explorer, Netscape Communicator lub Navigator.
2 Komponenty HTML 4.0 Formularze: Przyciski opatrzone tekstem lub grafiką, pola przeznaczone tylko do odczytu, możliwość grupowania pól, przypisywanie etykiet i skrótów klawiaturowych poszczególnym obiektom oraz tytułów każdemu elementowi aktywnemu w formularzu. Ramki: Oprócz znanych dotychczas ramek można w dowolnym miejscu na stronie umieszczać ramki inline. Tabele: Tabele można łączyć w grupy, a obramowania tabeli mogą przybierać różnorodne formy. Daje to większe możliwości projektantom stron WWW. Obsługa obiektów i skryptów: Etykieta na prowadzenie dialogu, który sterowany jest przez klienta, a nie przez serwer. Szablony stylów (Style Sheets): Pozwalają tworzyć wzorce formatów dla całych akapitów lub pojedynczych wyrazów oraz umożliwiają rozdzielenie prac redakcyjnych i edytorskich.
3 Skróty klawiaturowe (Shortcuts): Wszystkim elementom dialogowym, takim jak pola tekstowe, odsyłacze, przyciski i pola wyboru można przypisać skróty klawiaturowe. W ten sposób możliwe jest poruszanie się po Internecie za pośrednictwem klawiatury. Technika ta ułatwi korzystanie z Internetu przede wszystkim ludziom niepełnosprawnym i zgodnie z wolą W3C "Przybliży WWW milionom nowych użytkowników". Internacjonalizacja: Autorzy stron internetowych będą teraz mogli przygotowywać serwisy we wszystkich językach świata. Aby to umożliwić, HTML 4.0 wykorzystuje międzynarodowy zestaw znaków zgodny z ISO Ponadto w dokumencie HTML będzie można pisać teksty od strony prawej do lewej, tak jak na przykład w językach hebrajskim i arabskim.
4 Struktura dokumentu To jest nagłówek Tu tekst
5 Uwagi o pisaniu tekstu Gdy redagujemy tekst w edytorze, jesteśmy przyzwyczajeni do używania klawisza Enter, aby oddzielać od siebie akapity. Jednak przeglądarka ignoruje znak końca akapitu i mimo oddzielenia od siebie akapitów w edytorze zostaną one złączone w przeglądarce w ciągłą linię. Dlatego każdy akapit powinniśmy umieszczać między parą znaczników
, umieszczanym na końcu akapitu, który pozwoli oddzielić od siebie akapity, nie wprowadzając interlinii. Kilka spacji obok siebie jest zamienianych na pojedynczą spację, tak więc nie można (poza tzw. stylem preformatowanym) wstawiać większej liczby spacji między wyrazami. Na tej samej zasadzie ignorowane są również tabulatory
6 PRZYKŁAD I to z dodatkowymi interliniami a to tez cztery linie
to
cztery
linie
7 Formatowanie bloków Nagłówek pierwszy Definiowanie nagłówków sekcji, a najniższego
(najmniejsza i najmniej istotna podsekcja) to .
Nagłówek pierwszy
Nagłówek drugi
Nagłówek trzeci
Nagłówek czwarty
Nagłówek piąty
8 Formatowanie akapitówWyrównywanie akapitów
9 Linia pozioma Znacznikiem niezwykle przydatnym do wizualnego organizowania dokumentów jest znacznik linii poziomej (horizontal rule):
. Postawiony w dowolnym miejscu dokumentu powoduje pojawienie się cienkiej linii w poprzek strony
Linia może być pozbawiona cieniowania
Możemy jej nadać dowolną grubość
Linia może mieć określoną długość w pikselach
po lewej
lub z prawej
Internet Explorer pozwala nadać linii kolor. Przykład:
10 Czcionki pogrubiona kursywa migająca podkreślona o stałej szerokości (teletype) przekreślona indeks górny(superscript) indeks dolny(subscript) duża mała
11 Czcionki white aqua silver gray teal yellow lime olive navy red blue maroon fuchsia black green purple Kolory Zmiana kroju czcionki Wielkość Kroje czcionki w HTML-u przyjmują rozmiary od 1 do 7, przy czym 1 to rozmiar najmniejszy, a 7 - najwiekszy. Niestety numeracja ta jest odwrotna wzglądem numeracji znaczników nagłówków, w której nagłówek 1 jest najwiekszy, a nagłówek 6 najmniejszy.
12 Czcionki - przykłady Duży czerwony mały purpurowy Arial
13 ODSYŁACZE Odsyłacze (hiperłącza, łącza hipertekstowe, odnośniki)są chyba najbardziej charakterystycznym elementem dokumentów w światowej sieci World Wide Web. Bez odsyłaczy nie istniałyby powiązania między dokume- ntami na tym samym serwerze, w tym samym mieście, kraju czy kontynencie.Dzięki odsyłaczom można wiązać ze sobą poszczególne strony. Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca. Kliknięcie na takim wskazaniu przenosi użytkownika do docelowego miejsca, przy czym może to być z powodzeniem miejsce na tej samej stronie, inna strona w ramach tego samego, złożonego dokumentu, a nawet strona na drugim końcu świata.
14 ODSYŁACZE Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w postaci: Tekst, który należy kliknąć
15 Odczytywanie URL-a URL to unikatowy deskryptor, który może identyfikować dowolny dokument (zwykły lub hipertekstowy), grafikę, komputer, a nawet archiwum plików w dowolnym miejscu internetu lub w twoim komputerze. Stroną pozytywną jest fakt, że format określający URL jest jednakowy dla rozlicznych usług przezeń obejmowanych, a w tym dla wiadomości grup dyskusyjnych, Gophera, dokumentów WWW i archiwów FTP. W ogólnym przypadku URL składa się z następujących elementów. usługa : // nazwa - hosta : port / ścieżka-do-katalogu Nie w kazdym URL- u pojawiają się wszystkie z tych składników
16 Odczytywanie URL-a -przykłady Możesz zaglądnąć pod ten adres W tym przypadku usługa została zidentyfikowana jako http: (HTTP - to protokół transferu hipertekstu, metody dzięki której dokonuje się transferu dokumentu WWW). Użycie http: wskazuje programowi takiemu jak Explorer lub Navigator, że chcemy nawiązać połączenie z dokume- ntem WWW. komputer-gospodarz (host) udostępniający poszukiwaną informację to Końcówka com mówi, że ten ośrodek jest ośrodkiem komercyjnym; microsoft to domena lub host; a www jest nazwą serwera WWW, czyli określonego komputera. Zwykle, tak jak w tym przykładzie, portu nie trzeba podawać, ponieważ większość serwerów używa standartowych, domyślnych numerów portów. Na serwerze chcemy się dostać do pliku index.html z katalogu poland
17 Odczytywanie URL-a -przykłady Archiwum World Wide Web Consortium Ten adres identyfikuje archiwum plikowe W3C. Widać, że URL wskazuje na archiwum przez swój identyfikator usługi (ftp - protokół transferu plików). Odpytywany serwer i host to ftp.w3.org. Adres URL wskazuje, iż po ustanowieniu połączenia z serwerem FTP program przeglądarki powinien zmienić katalog na /pub/doc/ i wyświetlić tamtejsze pliki.
18 Odczytywanie URL-a -przykłady Napisz do autorów tej strony URL-e poczty elektronicznej są całkiem proste, dowolny adres poczty można podać jako URL poprzedzając go krótkim tekstem mailto; stanowiący nazwę usługi. Gdybyśmy sobie zażyczyli , aby w momencie wysłania poczty przez czytelnika strony w polu tematu listu pojawiła się jakaś domyślna treść, możemy zdefiniować odsyłacz na przykład tak: subject=Jest Pan cudowny!>
19 GRAFIKA Grafika jest jednym z najbardziej charakterystycznych elementów World Wide Web, ogromnie ubarwiając i uprzyjemniając pracę w sieci, ale także dostarczając sporej dawki informacji. Im strona bogatsza graficznie, tym bardziej atrakcyjna w odbiorze. Zręczne wykorzystywanie grafiki podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie grafika jest przyczyną ogromnego wzrostu ruchu w sieci i zatykania się łącz. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a twardymi realiami technicznymi z drugiej strony. Autorzy regularnie odwiedzanych stron (zawierających stałe aktualizacje) mogą jednak liczyć na fakt, że dobrze skonstruowane przeglądarki pozwalają wykorzystywać cache, który gromadzi (jednorazowo) elementy graficzne i pozwala przeglądarce sięgać do zasobów na dysku lokalnym, a nie do sieci, co wydatnie zmniejsza ruch na łączach. Z tego też powodu w Internecie zostały przyjęte dwa podstawowe standardy graficzne - GIF i JPG - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych.
20 GRAFIKA - wstawianie Kod HTML służący do umieszczania w dokumentach grafiki wygląda następująco
Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów, które zmienią położenie, wielkość i inne cechy obrazka. Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość).
21 TABELE
22 TABELE Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dlakomórek z danymi. W ramach 23 TABELE 24 TABELE -formatowanie 25 TABELE -łączenie komórek 26 TABELE - łączenie komórek 27 TABELE - zagnieżdżone
można umieścić wiele kolejnych definicji wierszy >/TR>, np.:
Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.
Przykład:
AA AB AC AD BA BB BC BD CA CB CC CD DA DB DC DD
wysokość
szerokość
wyrównanie tekstu w tabeli wyrównanie tekstu w komórce w poziomie wyrównanie tekstu w komórce w pionie kolor komórki
tło tabeli tło komórki Atrybut ten służy do połączenia poziomych komórek w tabeli, rozciągających się na x kolumn
Programy polskie Programy zagraniczne Polsat TVN BBC CNBC Ten natomiast atrybut służy do łączenia rzędów tabeli.
Takie
sobie
stacje BBC CNBC EuroSport
Francja Niemcy Hiszpania Kanada St. Zjednoczone
>TR> Texas Washington Floryda Kalifornia Meksyk