Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę internetową w jaki sposób ma wyświetlić daną stronę (np.: ten fragment tekstu napisz kursywą ). Aby przekonać się jak naprawdę wygląda oglądana przez nas strona, wystarczy nacisnąć na sronie prawy przycisk myszy i wybrać opcję Pokaż źródło. W Internecie jest wiele darmowych kursów HTML-a, dwa z nich znajdują sie na stronach: http://webmaster.helion.pl/kurshtml/ http://web.reporter.pl/ Język HTML jest nieustannie rozwijany, specyfikacja aktualnej wersji języka znajduje się na stronie: http://www.w3.org. 1 Podstawy Strony WWW możemy pisać w dowolnym edytorze tekstu pozwalającym na zapisywanie edytowanych dokumentów do plików tekstowych. Wystarczy wpisać treść dokumentu i zapisać w pliku tekstowym o rozszeniu html. Tworząc strony WWW używamy etykiet (znaczników) informujących przeglądarkę internetową o zawartości strony oraz o sposobie w jaki ma ją wyświetlić. Etykiety umieszczane są pomiędzy znakami < > (np.:<br> ), nawiasy te informują przeglądarkę, że to jest polecenie języka HTML. Są dwa typy etykiet: 1

Kontenery - etykiety te są dwuczęściowe, składają się z etykiety początkowej i końcowej. Etykieta końcowa różni się od początkowej znakiem / (np.:<i>...ten tekst na stronie będzie napisany kursywą... </I>). Etykiety samodzielne - te etykiety występują pojedyńczo (bez etykiety kończącej). Przykładem takiej etykiety jest etykieta <BR>, która powoduje przejście do nowej linii. Przeglądarka internetowa formatuje tekst strony zgodnie z naszymi zaleceniami, ignoruje jednak przy tym spacje i znaki końca linii znajdujące się w dokumencie HTML. 2 Struktura dokumentu Przyjrzyjmy się teraz strukturze dokumentu napisanego w HTML-u. Składa się on z trzech części: Określenia użytej wersji języka HTML. Nagłówka zawierającego informacje o stronie. Ciała dokumentu zawierającego treść strony. A oto przykładowa prosta strona: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Moja pierwsza strona WWW</TITLE> </HEAD> <BODY> Tu powinna zajdować się treść strony </BODY> </HTML> 2

2.1 Określenie wersji języka HTML Wersję języka HTML zaznaczyliśmy w pierwszych dwu wierszach naszego przykładowego programu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Zadeklarowaliśmy, że będziemy używać wyłącznie etykiet HTML z wersji 4.01. Gdybyśmy chcieli zaznaczyć, że używamy także konstrukcji z porzednich wersji HTML-a poiwinniśmy to zadeklarować w następujący sposób: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> Aby zadeklarować, że strona będzie oparta na ramkach należy napisać: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> Cała pozostała treść strony czyli nagłówek oraz ciało strony znajduje się węwnątrz etykiety <HTML>... </HTML>. 2.2 Nagłówek strony Nagłówek strony zawiera informacje dotyczące całej strony takie jak tytuł strony, opis strony, słowa kluczowe wiążące się z treścią strony. Informacje zawarte w nagłówku są wykorzystywane przez przeglądarkę internetową jak również przez wyszukiwarki internetowe. Treść nagłówka znajduje się węwnątrz etykiety <HEAD>... </HEAD>. Aby określić tytuł strony należy użyć etykiety <TITLE>. Jest to kontener w którego środku należy wstawić tytuł strony: <TITLE> To jest tytuł strony </TITLE> 3

Tytuł strony pojawia się na pasku tytułowym przeglądarki. Ważnym poleceniem występującym w nagłówku strony jest polecenie <META>. Przy pomocy tego polecenia przekazujemy przeglądarce podstawowe informację na temat strony. Jedną z informacji jaką musimy przekazac przeglądarce, jest używana przez nas strona kodowa. Jak wiadomo wszystkie dane na komputerze są przechowywane w postaci liczbowej. Dotyczy to także znaków (liter) widocznych na ekranie. Każda litera ma przyporządkowaną sobie liczbę. Nietrudno sobie wyobrazic, że liczby możemy przyporządkowywać literom na różne sposoby. Dlatego musimy poinformować przeglądarkę jakiego przyporządkowania (strony kodowej) używamy. Robimy to w następujący sposób: <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> Powyższa etykieta informuje przeglądarkę, że używamy standardowej strony kodowej iso-8859-2. Niestety Windows używa innej strony kodowej, jeżeli więc piszemy w Notatniku i nie konwertujemy stworzonego przez nas dokumentu to musimy zadeklarować to w następujący sposób: <meta http-equiv="content-type" content="text/html; charset=windows-1250"> Przy pomocy etykiety <META> można także ustalić język dokumentu: <meta http-equiv="content-language" content="pl"> określić autora strony: <meta name="author" content="imię i nazwisko"> opisać zawartość strony 4

Dla przeglądarki nie ma znaczenia ile białych znaków umieścimy pomiędzy dwoma wyrazami, tekst jest traktowany jako jednolity ciąg wyrazów. Wszystkie dodatkowe spacje, tabulacje czy znaki końca wiersza zostaną przez przeglądarkę zignorowane. O ile nie wydamy innych poleceń, przęglądarka sama zdecuduje kiedy złamać wiersz (czyli przejść do nowego wiersza). To ma sens gdyż na różnych komputerach taka potrzeba wystąpi w różnych miejscach tekstu. W ostatnich latach istnieje tendencja, żeby w HTML-u oddzielić zawartość strony od sposobu jej wyświetlania. Sposób wyświetlania strony jest często umieszczany w oddzielnych plikach zawierających arkusze stylów. W samych doukmentach HTML-owych pozostaje wtedy opis zawartości strony. Jednym z poleceń służacych właśnie temu celowi jest polecenie <P>... </P>. Etykieta ta oznacza początek i koniec poszczególnych akapitów. Przeglądarki zaczynają nowy akapit od nowego wiersza, zaś pomiędzy akapitami robią dodatkowy odstęp. Sposobami formatowania tekstu wewnątrz akapitu będziemy zajmować się później. Czasami istniej potrzeba złamania wiersza wewnątrz akapitu. Do tego służy samodzielna etykieta <BR>. Umieszczenie jej w jakimś miejscu tekstu, wymusi na przeglądarce rozpoczęcie w tym miejscu nowej linii bez rozpoczynania nowego akapitu. 3.2 Atrybuty czcionki oraz tekst nagłówkowy Często chcemy wyróżnić pewne fragmenty tekstu. Możemy to zrobić poprzez nadanie czcionce pewnych atrybutów. Przykładowo kontener <B>... </B> spowoduje pogrubienie zaznaczonego w ten sposób tekstu. A to inne etykiety o podobnym działaniu: <B> Ten fragment tekstu zostanie pogrubiony</b> <I> Ten fragment tekstu będzie napisany kursywą</i> <U> Ten fragment tekstu będzie podkreślony </U> <S> Ten fragment tekstu bedzie przekreślony </S> <TT> A to będzie tekst napisany czcionką maszynową </TT> Inne etykiety, służące do wyrózniania pewnych fragmentów tekstu to etykiety nagłówków. Jest sześć etykiet nagłówków o różnych poziomach. Nagłó- 6

wek najwyższego poziomu to: <H1>... </H1> nagłówek najniższego poziomu to: <H6>... </H6>. A oto wszystkie poziomy nagłówka: <H1>Nagłówek pierwszego poziomu</h1> <H2>Nagłówek drugiego poziomu</h2> <H3>Nagłówek trzeciego poziomu</h3> <H4>Nagłówek czwartego poziomu</h4> <H5>Nagłówek piątego poziomu</h5> <H6>Nagłówek szóstego poziomu</h6> Nagłówki są dobrym przykładem na oddzielenie treści strony od sposobu jej formatowania. Używając ich nie definiujemy jak dokładnie ma wyglądać ten tekst, informujemy tylko przeglądarkę, że to jest nagłówek określonego poziomu. Standardowo nagłówki są wyświetlane pogrubionym tekstem zaś rozmiar czcionki zależy od numeru nagłówka. Nagłówek stanowi również oddzielny akapit. 4 Listy W języku HTML są specjalne znaczniki służące do tworzenia list numerownych i nienumerowanych (inaczej uporządkowanych i nieuporządkowanych). Służą do tego odpowiednio kontenery <OL>... </OL> i <UL>... </UL>. Powyższe znaczniki okreslają początek i koniec listy. Poszczególne elementy obu list umieszczamy w kontenerze <LI>... </LI>. Aby przekonać się jak działają te listy umieść w swoim dokumencie HTML następujący tekst: <OL> <LI> pierwsza pozycja </LI> <LI> druga pozycja </LI> </OL> <UL> <LI> pierwszy punkt </LI> <LI> drugi punkt </LI> </UL> <OL> <LI>Można tez jedną listę </LI> <LI> umiesczać w drugiej liście</li> 7

<UL> <LI> podpunkt pierwszy</li> <LI> podpunkt drugi</li> </UL> <LI> no i punkt trzeci</li> </OL> Innym rodzajem listy jest lista definicji. Tworzymy ją przy pomocy znaczników <DL>... </DL>. Elementy takiej listy składaja się z dwóch części: definiowanego pojęcia znajdującego się w kontenerze <DT>... </DT> oraz samej definicji umieszczonej w kontenerze <DD>... </DD>. A oto przykład wykorzystania listy definicji: <DL> <DT>Pierwsze definiowane pojęcie</dt> <DD>Opis pierwszego pojęcia</dd> <DT>drugie pojęcie</dt> <DD>Opis drugiego pojęcia</dd> </DL> 5 Linki Elementem języka HTML, który przesądził o jego sukcesie, są odsyłacze czyli linki. Trudno wyobrazić sobie stronę internetową bez odnośników przenoszących nas na inne strony. To odsyłacze właśnie tworzą pajęczą sieć oplatającą Internet od której pochodzi skrót WWW (World Wide Web). Odsyłacze tworzymy przy pomocy etykiety <A>... </A>. Aby odnośnik zadziałał potrzebujemy jeszcze adresu strony do której ma nas przenieść. Do tego służy parametr href. Przykładowy odnośnik może wyglądac tak: <A href="http:\\www.onet.pl"> Kliknij tu a zobaczysz co słychać na onecie</a> Jeżeli odnosimy się do strony, która znajduje sie na tym samym serwerze zamiast adresu internetowego podajemy ścieżkę dostępu do odpowiedniego pliku. Na przykład, jeżeli plik do którego odsyłamy znajduje się w tym samym katalogu co bieżący dokument, możemy napisać : 8

<A href="drugi_plik.html"> Kliknij tu</a> Ciekawą możliwością, jaką daje nam etykieta <A>, jest możliwość zrobienia odnośnika do konkretnego miejsca na danej stronie (na przykład powrót do góry strony). Jest to szczególnie ważne na długich stronach. Żeby zrobić taki odnośnik, należy najpierw umieścić w miejscu, do którego będziemy chcieli się przenosić, znacznik nadający nazwę danemu miejscu: <A name="nazwa"> Tutaj nasze hiperłącze będzie odsyłać </A> Teraz możemy w dowolnym miejscu umieścić odsyłacz: <A href="drugi_plik.html#nazwa"> Kliknij tu</a> Jeżeli odsyłamy do innego miejsca w bieżącym dokumencie możemy w odnośniku pominąć nazwę pliku. 6 Obrazki Ważnym elementem każdej strony WWW jest grafika, która zwiększa wizualną atrakcyjność a także czytelność strony. Jednym ze sposobów umieszczenia grafiki na stronie jest użycie etykiety <IMG>. Etykieta ta umieszcza obrazek z pliku znajdującego się w lokalizacji podanej w parametrze src. Przy podawaniu nazwy obrazka należy pamiętać o podaniu pełnej nazwy pliku razem z rozszerzeniem. W parametrze alt umieszczamy opis obrazka, pojawi się on w przeglądarkach tekstowych. W przeglądarkach graficznych opis obrazka pojawi się po najechaniu kursorem myszy na obrazek. Przykładowe użycie etykiety <IMG> może wyglądać następująco: <IMG src="plik graficzny.jpg" alt="jakiś opis"> Jeżeli etykietę <IMG> umieścimy wewnątrz kontenera <A>... </A> wtedy obrazek będzie odnośnikiem. 9

7 Tabele Kolejnym często wykorzystywanym elementem stron WWW są tabele. Zawartość tabeli umieszczamy wewnątrz etykiety <TABLE>... </TABLE>. Każdy wiersz tabeli opisujemy oddzielnie umieszczając jego zawartość wewnątrz etykiety <TR>... </TR>. Wewnątrz każdego wiersza definiujemy po kolei poszczególne komórki wewnątrz etykiety <TD>... </TD>. Wewnątrz każdej z komórek może znajdować się dowolna zawartość (w szczególności tekst, obrazek lub inna tabela). A oto jak może wyglądać przykładowy opis tabeli: <TABLE> <TR><TD>(1,1)</TD><TD>(1,2)</TD><TD>(1,3)</TD></TR> <TR><TD>(2,1)</TD><TD>(2,2)</TD><TD>(2,3)</TD></TR> <TR><TD>(3,1)</TD><TD>(3,2)</TD><TD>(3,3)</TD></TR> <TR><TD>(4,1)</TD><TD>(4,2)</TD><TD>(4,3)</TD></TR> <TABLE> Isnieje także możliwość utworzenia komórek o szerokośći (wysokości) kilku kolumn (wierszy). Służą do tego parametry ROWSPAN i COLSPAN etykiety <TD>, które określają odpowiednio szerokość i wysokość danej komórki (podana liczba oznacza odpowiedni liczbę wierszy lub kolumn). Poniżej przykład użycia tych parametrów: <TABLE> <TR><TD>(1,1)</TD><TD>(1,2)</TD><TD>(1,3)</TD><TD>(1,4)</TD></TR> <TR><TD>(2,1)</TD><TD ROWSPAN="2" COLSPAN="2">Komórka łączona</td> <TD>(2,4)</TD></TR> <TR><TD>(3,1)</TD><TD>(3,4)</TD></TR> <TR><TD>(4,1)</TD><TD>(4,2)</TD><TD>(4,3)</TD><TD>(4,4)</TD></TR> <TABLE> Aby widzieć krawędzie rozdzielające poszczególne komórki tabeli nadaj parametrowi BORDER etykiety <TABLE> wartość większą od 0. Etykieta <TABLE> jak i inne etykiety przedstawione w tym dokumencie mają wiele 10

parametrów określających sposób ich wyświetlania. Nie zajmujemy się tymi parametrami, ponieważ będziemy określać sposób wyświetlania strony przy pomocy arkuszy stylów umieszczanych w oddzielnym pliku. Takie podejście pozwala łatwo zunifikować wygląd stron i podstron jednej witryny internetowej. Pozwala także łatwo zmieniać wygląd wielu stron jednocześnie. 8 Ramki Jednym ze sposobów zorganizowania przestrzeni na stronie WWW są ramki. Ramki pozwalają podzielić okno przeglądarki na kilka części (ramek). W każdej z ramek możemy wyświetlić inny dokument HTML. Jeżeli tworzymy stronę opartą na ramkach, wtedy zamiast etykiety <BODY>... </BODY> używamy etykiety <FRAMESET>... </FRAMESET>. W parametrach rows i cols określamy na ile wierszy i ile kolumn będzie dzielone okno. Etykietę <FRAMESET> możemy zagnieżdżać aby uzyskać bardziej skomplikowane podziały okna przeglądarki. Do określenia zawartości poszczególnych ramek służy samodzielna etykieta <FRAME>. Oto przykład strony opartej na ramkach: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <HTML> <HEAD> <TITLE> Moja pierwsza strona z ramkami</title> </HEAD> <FRAMESET rows="30%,70%"> <FRAME src="naglowek.html" name="nazwa1"> <FRAMESET cols="30%,70%"> <FRAME src="menu.html" name="nazwa2"> <FRAME src="glowna.html" name="nazwa3"> </FRAMESET> </FRAMESET> </HTML> Parametr src etykiety <FRAME> określa dokument HTML-owy, który ma być wyświetlony w danej ramce. Parametr name określa nazwę ramki. 11

Nazwę ramki możemy wykorzystać w etykiecie <A>... </A>. Kliknięcie w link zadeklarowany w następujący sposób: <A href="http://www.wszia.edu.pl" target="nazwa1">kliknij tutaj</a> spowoduje umieszczenie w ramce o nazwie nazwa1 strony o podanym adresie. Parametr target może przyjmować także nastepujące wartości: blank - otworzenie nowego okna i załadowanie do niego wskazywanej przez link strony top - załadowanie wskazywanego przez link dokumentu HTML do bieżącego okna, ale bez ramek self - opcja domyślna, załadowanie dokumentu do bieżącej ramki parent - załadowanie dokumentu do ramki nadrzędnej (o ile taka istnieje) 12