O HTML R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl
HTML! HTML jest skrótem od Hyper Text Markup Language. Jest to kolejny język opisu strony dotyczący dokumentów tekstowych. Pojęcie opis strony wywodzi się z tradycyjnej typografii i oznacza reguły ustalania wyglądu tekstu: wielkość nagłówków, typy czcionek, marginesy, interlinie.! HTML został zdefiniowany w SGML - Standard Generalized Markup Language. Przy pomocy SGML można tworzyć tzw. DTD (Document Type Definition).! Język HTML został opracowany specjalnie dla publikowania dokumentów WWW 2
Dokumenty HTML (1)! Dokumenty HTML można przygotowywać za pomocą zwykłego edytora tekstowego. Jest to jednak żmudne zajęcie, ponieważ trzeba znać polecenia i wpisywać je ręcznie.! Zadanie ułatwiają specjalistyczne edytory HTML.! Oferta obejmuje zarówno proste edytory oferujące jedynie wybrane polecenia HTML jak i edytory z cechami prawdziwego WYSIWYG (What You See Is What You Get). 3
Dokumenty HTML (2)! Dostępne są także programy dokonujące konwersji (przekształcające tekst z formatu edytora do formatu HTML).! Po co więc uczyć się języka HTML?! edytory stanowią jedynie pomoc przy wpisywaniu! wbudowane w edytory możliwości pozostają w tyle za możliwościami przeglądarek! Odtwarzaniem dokumentów HTML zajmują się przeglądarki. 4
Dokumenty HTML (3)! Kod źródłowy dokumentu HTML składa się ze zwykłego tekstu ASCII jaki można wczytać i obrabiać w dowolnym edytorze.! Wyróżnienie wybranego urywka tekstu odbywa się za pomocą ściśle określonych kodów ujętych w nawiasy klamrowe zwanych znacznikami (tags).! Większość z nich służy do zaznaczania obszarów tekstu. Obszar ten rozciąga się od znacznika otwierającego poprzez właściwy tekst aż do odpowiadającego mu znacznika zamykającego. 5
Dokumenty HTML (4)! Znacznik zamykający różni się od otwierającego jedynie ukośną kreską postawioną przed nazwą: <H1> nagłówek pierwszego poziomu (header) </H1>! Para składająca się ze znacznika otwierającego i zamykającego nazywana jest również blokiem (container). Niektóre znaczniki występują pojedynczo -nie wymagają zamknięcia! 6
Szkielet dokumentu! Niektóre znaczniki są obowiązkowe, gdyż tworzą niejako szkielet każdego dokumentu HTML.! cały dokument zawarty jest pomiędzy znacznikami <HTML> </HTML>! poza tym w każdym dokumencie występuje obszar nagłówka, który oznaczony jest przez <HEAD> i może zawierać metainformacje! wewnątrz tego obszaru za pomocą <TITLE> nadaje się tytuł! właściwa zawartość dokumentu jest pomiędzy znacznikami <BODY> 7
Najprostsza strona! Najprostsza i kompletna definicja strony HTML to: <HTML> <HEAD> <TITLE>...</TITLE> </HEAD> <BODY>... </BODY> </HTML> 8
Formatowanie (1)! HTML jest językiem bezformatowym, co oznacza, że ignorowane są przejścia do nowego wiersza i wielokrotne spacje spacje, zaś wymaganą strukturę nadajemy dokumentowi za pomocą kilku specjalnych znaczników:! akapit <P> (paragraph)! przejście do nowego wiersza <BR>! tekst wstępnie sformatowany <PRE>! pozioma linia <HR> 9
Formatowanie (2)! Akapitów nie wolno zagnieżdżać, dopuszczalne jest więc opuszczanie znaczników zamykających </P>. Przeglądarka automatycznie zamyka poprzedni akapit, gdy rozpoczyna nowy.! Odradza się używania tego typu uproszczeń, ze względu na to, że w pewnych wypadkach mogą wystąpić efekty uboczne. 10
Formatowanie (3)! Atrybuty pisma takich jak rodzaj i wielkość czcionki określa się w dokumentach HTML pośrednio poprzez określenie funkcji danego fragmentu tekstu w dokumencie.! Do wyróżniania całych akapitów służą:! <H1> do <H6> dla nagłówków rozmaitych poziomów! <BLOCKQUOTE> dla cytatów! <ADDRESS> dla adresów mailowych 11
Formatowanie (4)! Do bezpośredniego wyróżniania znacznikiem typu czcionki przewidziane są:! <I> pismo pochyłe, kursywa! <B> pismo pogrubione,! <U> pismo podkreślone! <TT> pismo maszynowe! <SUP> i <SUB> superscript i subscript 12
Wyliczenia (1)! Do bezpośredniego wyróżniania znacznikiem typu czcionki przewidziane są:! <I> pismo pochyłe, kursywa! <B> pismo pogrubione,! <U> pismo podkreślone! <TT> pismo maszynowe! <SUP> i <SUB> superscript i subscript 13
Wyliczenia (2)! Przeglądarka automatycznie dodaje przed pozycją listy wcięcie i stawia przed nią znak wyliczenia (bullet).! Przed każdą zagnieżdżoną listą przeglądarka dodaje kolejne wcięcie.! W listach uporządkowanych kolejne pozycje są automatycznie numerowane. 14
Odsyłacze hipertekstowe (1)! Odsyłacze hipertekstowe (hyperlinks) tworzy się za pomocą znacznika <A> (anchor -kotwica).! Stanowią one prosty i skuteczny element interaktywny.! Dzięki odsyłaczom hipertekstowym można wykonywać skoki do innych miejsc tekstu w danym pliku, innych dokumentów znajdujących się na dowolnym serwerze WWW a nawet ściągać (download) pliki. 15
Odsyłacze hipertekstowe (2)! W przypadku dłuższych dokumentów celowe jest przedstawienie na początku ich struktury i poprowadzenie do każdego z takich punktów odsyłacza.! W tym celu należy:! zaznaczyć miejsca tekstu, do których ma nastąpić przeskok (cel skoku definiowany jest parametrem NAME)! potrzebny jest także rozkaz skoku definiowany parametrem HREF (hypertext reference) 16
Odsyłacze hipertekstowe (3)! Przypisując parametrowi NAME pewną wartość definiujemy zakotwiczenie, do którego będzie się można odwoływać, jeśli tę samą wartość nadamy parametrowi HREF w etykiecie skoku. <A HREF= gajowy >Burzliwy życiorys Gajowego</A>... <A NAME= gajowy ></A> <H1>Narodziny Gajowego </H1> 17
Odsyłacze hipertekstowe (4)! Przy użyciu parametru HREF można podawać nie tylko zakotwiczenia w aktywnym dokumencie.! Można podawać również nazwy plików innych stron HTML (podkatalogi nie są oddzielone od siebie backslashem lecz zwykłym ukośnikiem. <A HREF= WROGOWIE.HTM >Wrogowie </A> <A HREF=../INNI/PRZYJ.HTM >Przyjaciele</A> <A HREF= http://www.faico.net >DiDa</A> 18
URL (1)! Głównym zadaniem przeglądarek jest udostępnianie zasobów znajdujących się na dowolnym podłączonym do Internetu serwerze w jakimkolwiek punkcie świata.! Do jednoznacznej identyfikacji takiego określonego obiektu służy tzw. URL (Uniform Resource Locator - jednolity lokalizator zasobów). 19
URL (2)! Kompletny URL obiektu składa się z następujących informacji:! protokół transmisji (http:, ftp:, news:, gopher:, telnet:)! nazwa serwera: port! ścieżka dostępu! nazwa pliku! W przeciwieństwie do konwencji DOS owych nazwy plików w innych systemach rozróżniają małe i duże litery (case-sensitive) 20
Grafika (1)! Z pomocą znacznika <IMG> możemy wbudowywać obrazy bezpośrednio w strukturę stronicy HTML.! Obrazy choć wpasowują się idealnie w dokument HTML nie stanowią integralnej części strony ale istnieją na serwerze WWW jako oddzielne pliki w formacie GIF lub JPEG. 21
Grafika (2)! Nazwy obrazów, które mają być przetransmitowane i wyświetlone podawane są za pośrednictwem parametru SRC znacznika IMG (względna nazwa pliku odnosi się do katalogu, w którym znajduje się aktualna strona HTML) <IMG SRC=../INNI/GAJOWY.GIF >! Znacznik IMG jest w obrębie dokumentu traktowany podobnie jak element tekstowy (nie generuje przejścia do nowej linii bądź zmiany akapitu). 22
Tabele (1)! Tabele są znakomitym instrumentem do formatowania wyglądu ekranu. Do ich definicji służą znaczniki <TABLE>, <TR>, <TD> i <TH>.! Całość definicji tabeli zawarta jest między znacznikami <TABLE>...</TABLE>. Jeśli chcemy, by komórki tabeli były obramowane dodajemy parametr <BORDER>.! Znacznik <TR> definiuje wiersz tabeli (table row)! Komórkę tabeli definiuje <TD> (table data)! Specjalny rodzaj komórek definiuje <TH> (table header) - komórki te są drukowane czcionką pogrubioną. 23
Tabele (2)! Jeśli nie zadeklarowano inaczej szerokość kolumny określana jest automatycznie i dostosowuje się do najszerszej wartości w kolumnie.! Jeśli szerokość okna przeglądarki nie wystarcza dla całej tabeli zawartość najszerszych komórek jest umieszczana w kilku wierszach. 24