Podstawy HTML w 6 tematach

Transkrypt

1 Podstawy HTML w 6 tematach Temat 1 - budujemy ramy dla dokumentu Temat 2 - formatujemy tekst Temat 3 - wprowadzamy listy i wyliczenia Temat 4 - włączamy grafikę Temat 5 - tworzymy połączenia (linki) Temat 6 - stosujemy kolor Lekcja 1 - budujemy ramy dla dokumentu Co to jest HTML? Struktura dokumentu (strony) HTML o Prolog o o o Przykład <HTML> <HEAD> <BODY> Lekcja 2 - formatujemy tekst Jakiego kodu używamy? (CP-1250 kontra ISO ) Akapit i jego atrybuty Atrybuty i wielkość czcionki Inne drobiazgi Lekcja 3 - wprowadzamy listy i wyliczenia Lista nienumerowana Lista numerowana Lista definicyjna Mieszanie list Lekcja 4 - włączamy grafikę Grafika w tekście Polecenie <IMG...> Atrybuty polecenia <IMG...> Obrazki w tle Lekcja 5 - tworzymy połączenia (linki) Hierarchia stron

2 Wygląd połączeń Linki do innych protokołów Lekcja 6 - stosujemy kolor Jak nazywają się kolory? o tablica kolorów (RGB) o nazwy kolorów Jak definiować kolory? Co to jest HTML? HTML (HyperText Markup Language) to język formatowania dokumentów elektronicznych, który pozwala uformować tekst oraz połączyć go z grafiką. Dzięki HTML dokumenty mogą łączyć hipertekstowe powiąznia ("linki") tworząc strukturę, po której porusza się użytkownik. Obecnie w dokumentach HTML można zagnieżdżać dźwięk, animację, sekwencje video. Jednakże wymaga to najczęściej dodatkowych rozszerzeń, wykraczających poza sam język HTML. Dokument HTML ma postać pliku tekstowego, gdzie tekst przeplatany jest komendami (ang. tags) języka. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami: ten tekst jest poza działaniem komendy <KOMENDA>na ten komenda działa</komenda> zaś tutaj jej działanie się kończy Plik źródłówy jest interpretowany przez "przeglądarkę" (ang. browser ) która prezentuje dokument w jego ostatecznym kształcie. Najpopularniejsze "przeglądarki" MS Internet Explorer, Opera i wiele wyszukiwarek opartych na rdzeniu zwanym Mozilla (są to zarówno popularny Netscape jak i mniej znane Galeon czy Phoenix). Nie działają one identycznie, a dokument powinien we wszystkich wyglądać tak samo. Uzyskanie takiej jednolitości to czasami prawdziwe wyzwanie! Do tworzenia dokumentów HTML można stosować każdy edytor plików tekstowych. W klasie programów pomagających w tworzeniu dokumentów można wyróżnić takie, które działają na poziomie kodu (jedynie usprawniając jego tworzenie) oraz takie, które działają na poziomie dokumentu (WYSIWYG), generując kod automatycznie. Stosowanie pierwszych jest żmudniejsze, lecz daje pełną kontrolę nad dokumentem (oczywiście przy znajomości HTML). Stosowanie drugich jest szybsze i nie wymaga znajomości komend HTML ale wprowadzanie poprawek może być utrudnione, zaś niektóre efekty mogą być nie do uzyskania, jeśli wykraczają poza możliwości programu. Wybór odpowiedniego programu zależy od okoliczności. Struktura dokumentu (strony) HTML Typowy dokument HTML zdefiniowany jest poprzez komendy podane poniżej:

3 Prolog - deklaracja dokumentu <HTML> - początek kodu HTML <HEAD> - początek nagłówka treść nagłówka </HEAD> - koniec nagłówka <BODY> - początek części właściwej zawartość części właściwej </BODY> - koniec części właściwej </HTML> - koniec kodu HTML Prolog Prolog to jednolinijkowa deklaracja typu dokumentu, określająca m.in. wersję używanego języka HTML. Wersje różnią się od siebie zestawem używanych komend i ich zakresem. Szczegółowe objaśnienie składni prologu można znaleść w technicznej specyfikacji HTML dostępnej w sieci. Obecnie najpopularniejsze prologi to: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> Oznaczają one dokumenty zakodowane przy pomocy wersji 4.0 języka HTML. W pierwszym przypadku to wersja najprostsza (domyślna), która nie dopuszcza "niestandardowych" elementów języka. Wersja "tarnsitional" pozwala na rozszerzenie języka o dodatkowe elementy zaś "frameset" jest przeznaczona dla obsługi stron z ramkami. Jeśli nie jesteśmy pewni jakiej wersji HTML używamy, prolog można pominąć. "Przeglądarki" potrafią najczęściej "zgadnąć" wersję analizując nasz dokument. Gdy jednak jakiś element nie pojawia się na stronie trzeba spróbować wersji "transitional". <HTML> Komenda <HTML> występuje bezpośrednio po prologu i sygnalizuje początek dokumentu zakodowanego przy pomocy języka HTML, zaś </HTML> oznacza koniec. Komenda ta "nie robi" nic poza tym i jej pominięcie nie wywołuje z reguły żadnych skutków. Jednakże dla poprawności, czytelności i stosowania "dobrego stylu" należy jej używać. <HEAD> Pomiędzy początkiem komendy <HEAD> i jej końcem </HEAD> znajduje się nagłówek dokumentu zawierający wiele ważnych informacji, które zwykle nie są wyświetlane ale niejednokrotnie wpływają na interpretacje całości lub części dokumentu.

4 Poszczególne komendy stosowane w nagłówku, będą się pojawiać sukcesywnie w toku następnych lekcji. Jedną z nich jest komenda <TITLE>, sygnalizująca tytuł dokumentu. <TITLE>To jest tytuł</title> Tytuł pojawia się na górnej belce okna przeglądarki oraz jest przepisywany jako oznaczenie dokumentu w tzw."zakładkach" (ang. bookmarks). Tytuł jest też podstawową charakterystyką treści dokumentu - jest więc ważny dla wszelkich serwisów indeksujących zasoby Internetu. Dlatego też powinien on być sformłuowany starannie i adekwatnie do zawartości dokumentu. <BODY> Pomiędzy początkiem komendy <BODY> i jej końcem </BODY> znajduje się cały dokument interpretowany przez przeglądarkę. Atrybuty tej komendy mogą definiować kolor tła, kolor tekstu i elementów hipertekstowych. Odpowiednie atrybuty będą prezentowane w toku następnych lekcji omawiających stosowanie koloru itp. Przykład 1 Podsumowując naszą pierwszą lekcję spróbujmy stworzyć ramy dla naszego pierwszego dokumentu. Nie będzie to nic efektownego ale od czegoś musimy zacząć. Przypuśćmy, że będą to osobiste strony Jana Kowalskiego. Kod dokumentu wygląda więc tak: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Jan Kowalski - moja strona </TITLE> </HEAD> <BODY> Nazywam się Jan Kowalski. Na razie to wszystko. Witajcie! </BODY> </HTML> Jakiego kodu używamy? Tak zwany "problem polskich liter" był kiedyś utrapieniem programistów i producentów drukarek. Przyczyną były różne sposoby kodowania diakrytyków w trybie tekstowym polegające na zastępowaniu pewnych znaków standardu ASCII, znakami charakterystycznymi dla języka polskiego. Z chwilą rozpowszechnienia się środowiska Windows problem właściwie przestał istnieć, gdyż drukarki pracujące w trybie graficznym, były w stanie wydrukować każdy znak, bez wcześniejszego definiowania standardu, zaś Microsoft dostarczył narzędzi do płynnego przechodzenia ze strony kodowej CP 852, używanej w DOS, do CP 1250 używanej w Windows. W Internecie problem jednakże powrócił, gdyż strony, które tworzymy oglądają różni użytkownicy, wyposażeni w różne systemy, kodujące diakrytyki w różny sposób.

5 Dużą popularność w Internecie zdobył sobie standard ISO , gdyż był on konsekwentnie implementowany w systemach unixowych, a takie komputery stworzyły Internet. Z chwilą "wejścia" do Internetu komputerów klasy PC, drugim sposobem kodowania najczęściej stosowanym dla języka polskiego jest strona kodowa Windows czyli CP Obecne wersje przeglądarek internetowych radzą sobie z oboma tymi sposobami kodowania, w "locie" przekodowując strony z kodu użytego w dokumencie na kod używany w lokalnym systemie. Aby działo się to automatycznie potrzebna jest deklaracja kodu, gdyż inaczej sposób dekodowania musi by ustawiany "ręcznie". Jeśli więc tworzymy strony w Windows, nie używając żadnych narzędzi przekodowujących dokument, to deklaracja ma postać: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> Jeśli program tworzący strony daje w wyniku dokument w kodzie ISO to deklaracja ma postać: <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> Deklarację kodu umieszczamy w nagłówku, czyli pomiędzy komendą <HEAD> i jej końcem </HEAD>, zwykle przed tytułem <TITLE>. UWAGA! Tworząc strony w wersji angielskiej, najlepiej zrezygnować z jakiegokolwiek sposobu kodowania, gdyż anglojęzyczni użytkownicy nie mają na swoich komputerach żadnej strony kodowej zawierającej polskie diakrytyki i znaki są błędnie wyświetlane. Zamiast Łódź piszemy więc Lodz, co będzie w rezultacie bardziej czytelne. Akapit i jego atrybuty Do tej pory, wszystko co napisaliśmy, wyświetlane było jako jeden ciąg tekstu. Aby zaznaczyć przejście do nowej linii należy zastosować komendę . Główną komendą formatującą akapit jest . Jeśli używamy jej poprawnie (tzn. zgodnie ze specyfikacją HTML), ujmując pomiędzy i całość tekstu akapitu, to możemy stosować atrybut ALIGN oznaczający: Przykładowo: ALIGN=left - równanie do lewej ALIGN=center - centrowanie ALIGN=right - równanie do prawej Ten tekst domyślnie wyrówna się do lewej Ten będzie na środku Ten zaś wyrówna się do prawej da w efekcie:

6 Ten tekst domyślnie wyrówna się do lewej Ten będzie na środku Ten zaś wyrówna się do prawej Należy zauważyć, że deklaracja akapitu powoduje dodanie pustej linii po końcu akapitu. Dlatego też najczęściej używa się samego , umieszczając go na końcu linii w celu wygenerowania przejścia do nowej linii razem z dodaniem linii pustej. Efekt centrowania można uzyskać również poleceniem <CENTER>.. </CENTER>. Chociaż jest to polecenie szeroko stosowane, nie należało do formalnej specyfikacji języka HTML w wersji 3.x, zaś w wersji 4.x istnieje inny ekwiwalent tej komendy. Przeglądarki w swoich najnowszych wesjach wciąż, interpretują <CENTER> tak jak dotąd, więc można jej jeszcze użyć. Atrybuty i wielkość czcionki Czcionka może posiadać atrybuty bezwzględne takie jak: pogrubienie (..), pochylenie (..) i podkreślenie (..). Tekstowi można nadawać też szereg tzw. atrybutów logicznych, które dają efekty zależne od konfiguracji przeglądarki. Są to np.: <CITE>... </CITE> <CODE>... </CODE> ... ... Wypróbuj ich działanie! Jeśli chcemy napisać coś w ideksie górnym, np. godzinę 10 30, używamy atrybutu: .... Indeks dolny to:... Możemy też chcieć by nasz napis mrugał. Jest to możliwe dzięki atrybutowi: <BLINK>...</BLINK> Czasem mamy fragment tekstu w postaci pliku tekstowego, gdzie chcemy zachować jego pierwotną formę (tak jest w przypadku np. tekstu pisanego w kolumnach). Możemy użyć wtedy komendy <PRE>...</PRE>, która powoduje iż tekst pomiędzy początkiem i końcem komendy nie jest refomatowany (czyli zachowane są wszystkie odległości i przejścia do nowej linii) i wyświetlany jest czcionką o stałej szerokości. Na przykład: początek zajęć koniec zajęć poniedziałek wtorek środa

7 Oczywiście są w HTML inne komendy pozwalające projektować wszelkiego rodzaju tabele. Komenda <PRE>...</PRE> ma więc zastosowanie głównie w przypadku włączania kawałków pliku tekstowego do dokumentu HTML. Wielkość czcionki możemy regulować poprzez definiowanie nagłówków dokumentu i jego części lub bezpośrednią zmianę wielkości fontu. Defnicja atrybutu nagłówka ma postać: <Hx>... </Hx> - gdzie x jest liczbą od 1 do 4 (można definiować również H5 i H6 ale zwykle nie ma to sensu, gdyż przeglądarki interpretują to tak samo jak H4). Numery w nagłówkach odzwierciedlają ważność (poziom) nagłówka. 1 jest największy i najważniejszy. 2, 3 i 4 są coraz mniejsze i mniej ważne. Deklaracja nagłówka powoduje dodanie pustej linii nad i pod napisem. Jeśli napiszemy: <H1> To jest nagłówek nr 1 </H1> <H2> To jest nr 2 </H2> <H3> a to nr 3 </H3> to zostanie to wyświetlone następująco: To jest nagłówek nr 1 To jest nr 2 a to nr 3 Jeśli chcemy zmieniać wielkość czcionki w tekście, na przykład w ten sposób, to stosujemy jeden z atrybutów komendy ... , a mianowicie "size". Przy pomocy tego atrybutu można uzyskać zarówno czcionki większe jak i mniejsze. Popatrzmy na przykład: Zaczynamy od dwukrotnego powiększenia, przechodzimy na pojedyncze, teraz jest kawałek pisany normalnym rozmiarem, a to już o jeden pomniejszony. który wyświetla się następująco: Zaczynamy od dwukrotnego powiększenia, przechodzimy na pojedyncze, teraz jest kawałek pisany normalnym rozmiarem, a to już o jeden pomniejszony. Podane powyżej atrybuty jakimi można określić czcionkę są wystarczające w większości zastosowań. Dodatkowo można żądać w dokumencie zastosowania konkretnego kroju czcionki, jadnakże zawsze istnieje niebezpieczeństwo, że na komputerze użytkownika dany font może nie być zainstalowany. Jeśli potrzebujemy zdefiniować font o stałej szerokości znaków, można stosować takie komendy jak: <CODE>... </CODE>, <PRE>... </PRE> lub <XMP>... </XMP>. Jeśli chcemy umieścić w dokumencie komentarze, które mają być niewidoczne, stosujemy następujący kod:

8 Inne drobiazgi Aby zapanować nad podstawowym układem strony, prócz komend formatujących tekst i akapit, trzeba poznać jeszcze komendę <HR> oraz znaki specjalne. Komenda <HR> służy do rysowania linii ale ma też kilka atrybutów pozwalających tworzyć proste ornamenty: SIZE=liczba - wyznacza grubość linii WIDTH=liczba/procent - wyzacza jej szerokość (domyślnie, całe okno czyli 100%) ALIGN=left/right/center - wyrównanie do lewej/centrowanie/do prawej NOSHADE - usunięcie "cienia" Przealizuj następujący przykład: <HR SIZE=10> <HR WIDTH=70%><HR WIDTH=60%><HR WIDTH=50%><HR WIDTH=40%><HR WIDTH=30%> <HR WIDTH=40% ALIGN=left NOSHADE> <HR SIZE=5 WIDTH=40% ALIGN=right> który daje poniższy efekt. Znaki specjalne to znaki wyświetlane w rezultacie użycia polecenia &nazwa lub &#numer, gdzie numer jest heksadecymalnym numerem znaku zaś nazwa, stanowi umowną nazwę znaku. Pełną listę znaków specjalnych można znaleść w specyfikacji języka HTML, jednak trzeba pamiętać, że ich pełne stosowanie jest zależne od możliwości przeglądarki oraz zainstalowanych w komputerze fontów. Teoretycznie polskie diakrytyki można zastąpić odpowiednimi znakami specjalnymi. Jednak niektóre przeglądarki nie rozpoznają prawidłowo większości z nich. Kilka znaków specjalnych warto znać gdyż przydają się one w niektórych sytuacjach. Jeśli chcemy rozpocząć akapit od wcięcia, nic nie da pisanie zwykłych spacji, gdyż są one redukowane do jednej. Znak "twardej" spacji &nbsp pozwoli nam zrobić dowolnie długą przerwę. Znaki takie jak &amp, &lt i &gt pozwalają wyświetlić znaki umowne, używane w składni poleceń HTML, takie jak &, <, >. Inne znaki specjalne umożliwiają wyświetlanie symboli, greckich liter oraz różnych diakrytyków. Należy jeszcze raz przypomnieć, że ostateczny efekt zależy od możliwości i konfiguracji przeglądarki, dlatego znaki specjalne muszą być ostrożnie stosowane.

9 Lista nienumerowana Jest wiele sytuacji kiedy tekst ma charakter "wyliczanki", czyli listy. Listę można skonstruować za pomocą znanych już poleceń, nie byłoby to jednak zbyt wygodne i nie dawałoby pewności, jak pozycje listy reformatowałyby się przy zmianie wielkości okna przeglądarki. Użycie poleceń HTML tworzących listy daje pewność, że będą one zawsze wyglądały jak lista, nawet gdy okno będzie bardzo wąskie. Lista nienumerowana jest przykładem najprostszej listy, którą definiuje się w następujący sposób: <UL> <LI>pierwsza pozycja listy <LI>druga pozycja listy <LI>trzecia pozycja listy </UL> zaś efekt jest następujący: pierwsza pozycja listy druga pozycja listy trzecia pozycja listy Lista może być wielostopniowa: <UL> <LI>pierwsza pozycja listy <UL> <LI>pozycja 1 podlisty pierwszej <LI>pozycja 2 podlisty pierwszej <LI>pozycja 3 podlisty pierwszej </UL> <LI>druga pozycja listy <LI>trzecia pozycja listy </UL> A oto efekt: pierwsza pozycja listy o pozycja 1 podlisty pierwszej o pozycja 2 podlisty pierwszej o pozycja 3 podlisty pierwszej druga pozycja listy trzecia pozycja listy Jeśli nie podobają się nam domyślne oznaczenia punktów, możemy próbować je zmieniać. Mamy do dyspozycji poniższe typy: TYPE=disc TYPE=circle TYPE=square Jeśli zastosujemy w kodzie typ square

10 <UL TYPE=square> <LI>pierwsza pozycja listy <LI>druga pozycja listy </UL> to efekt będzie następujący: pierwsza pozycja listy druga pozycja listy Lista numerowana Pozycje listy mogą być automatycanie numerowane. Zaletą użycia numerowanej listy jest możliwość uzupełniania jej w dowolnym punkcie bez martwienia się o przenumerowanie pozycji. <OL> <LI>pierwsza pozycja listy <LI>druga pozycja listy <LI>trzecia pozycja listy </OL> Efekt jest następujący: 1. pierwsza pozycja listy 2. druga pozycja listy 3. trzecia pozycja listy Tak jak lista nienumerowana, może być wielostopniowa: <OL> <LI>pierwsza pozycja listy <OL> <LI>pozycja 1 podlisty pierwszej <LI>pozycja 2 podlisty pierwszej <LI>pozycja 3 podlisty pierwszej </OL> <LI>druga pozycja listy <LI>trzecia pozycja listy </OL> A oto efekt: 1. pierwsza pozycja listy 1. pozycja 1 podlisty pierwszej 2. pozycja 2 podlisty pierwszej 3. pozycja 3 podlisty pierwszej 2. druga pozycja listy 3. trzecia pozycja listy Taka lista nie wygląda jednak rewelacyjnie. Żeby lista wielostopniowa wyglądała lepiej trzeba zadeklarować dwa różne typy numerowania, np. domyślny oraz małe litery: <OL> <LI>pierwsza pozycja listy <OL TYPE=a>

11 <LI>pozycja 1 podlisty pierwszej <LI>pozycja 2 podlisty pierwszej <LI>pozycja 3 podlisty pierwszej </OL> <LI>druga pozycja listy <LI>trzecia pozycja listy </OL> Efekt jest następujący: 1. pierwsza pozycja listy a. pozycja 1 podlisty pierwszej b. pozycja 2 podlisty pierwszej c. pozycja 3 podlisty pierwszej 2. druga pozycja listy 3. trzecia pozycja listy Inne typy to: TYPE=A TYPE=a TYPE=I TYPE=i TYPE=1 (domyślny) Wypróbuj jak działają! Innym problemem jest sytuacja gdy numerowanie nie zaczyna się od 1. Można zadać liczbę (literę) startową poleceniem START. Przykładowo: <OL START=5> <LI>pierwsza pozycja listy <LI>druga pozycja listy <LI>trzecia pozycja listy </OL> Daje następujący efekt: 5. pierwsza pozycja listy 6. druga pozycja listy 7. trzecia pozycja listy Lista definicyjna Nazwa tej listy bierze się stąd, że każda pozycja ma drugi element struktury pozwalający zamieścić opis pozycji, tak jak opis hasła w encyklopedii. Stąd ten rodzaj listy nadaje się świetnie do tworzenia wykazu haseł z objaśnieniami (definicjami). Popatrzmy na przykład: <DL> <DT>termin pierwszy <DD>to jest opis do pierwszego terminu, który ma postać dłuższego komentarza, więc będzie on kontynuowany, tak aby zajmować co najmniej dwie linijki, chociaż oczywiście nie jest to konieczne <DT>termin drugi

12 <DD>to opis drugiego terminu, który już nie będzie taki długi </DL> Rezultat wygląda następująco: termin pierwszy to jest opis do pierwszego terminu, który ma postać dłuższego komentarza, więc będzie on kontynuowany, tak aby zajmować co najmniej dwie linijki, chociaż oczywiście nie jest to konieczne termin drugi to opis drugiego terminu, który już nie będzie taki długi Kiedy lista zawiera relatywnie krótkie terminy i objaśnienia możemy zapisać je w jednej linii dzięki atrybutowi COMPACT. Przykładowo: <DL COMPACT> <DT>żaba <DD>należy do zwierząt <DT>bułka <DD>należy do pieczywa <DT>radio <DD>należy do środków przekazu </DL> Efekt jest następujący: żaba należy do zwierząt bułka należy do pieczywa radio należy do środków przekazu Efekt sprawdza się dla krótkich terminów. Mieszanie list Listy można dowolnie ze sobą mieszać. Popatrzmy na poniższy przykład: 1. Poniedziałek rozruch po niedzieli po południu kino zakupy pieczywo trzeba uważać, żeby było miękkie, nie więcej jak 5 bułek (1 chleb) coś do kanapek pamiętać o warzywach! produkty do obiadu warzywa na zupę, mięso, ziemniaki (ryż), coś na surówkę, ogórki konserwowe! wieczorem nic nie planować! 2. Wtorek a. rano sprawdzić towar b. rozwieść po sklepach c. uporządkować rachunki d. przed 15 do banku 3. itd.

13 Kod wygląda następująco: <OL> <LI>Poniedziałek <UL TYPE=square> <LI>rozruch po niedzieli <LI>po południu kino <LI>zakupy <DL> <DT>pieczywo <DD>trzeba uważać, żeby było miękkie, nie więcej jak 5 bułek (1 chleb) <DT>coś do kanapek <DD>pamiętać o warzywach! <DT>produkty do obiadu <DD>warzywa na zupę, mięso, ziemniaki (ryż), coś na surówkę, ogórki konserwowe! </DL> <LI>wieczorem nic nie planować! </UL> <LI>Wtorek <OL TYPE=a> <LI>rano sprawdzić towar <LI>rozwieść po sklepach <LI>uporządkować rachunki <LI>przed 15 do banku </OL> <LI>itd. </OL> Grafika w tekście Jedną z najważniejszych cech języka HTML jest możliwość płynnego łączenia grafiki i tekstu. Element graficzny musi być oczywiście wcześniej przygotowany przy pomocy dowolnego programu, który pozwala na zapis w formacie GIF lub JPG (te dwa formaty obsługują wszystkie przeglądarki). Obrazek zapamiętywany jest w odrębnym pliku i może być wielokrotnie wykorzystany, nawet w następnej linii tej samej strony. Obrazek może się znajdować w tym samym folderze co dokument, w innym folderze lub na innym serwerze internetowym. Obrazek może być ilustracją rozdzielającą linią efektownym ozdobnikiem lub niestandardowym napisem

14 Składnia polecenia jest następująca: Polecenie <IMG...> <IMG SRC="adres pliku" atrybuty> Adres pliku może być względny lub bezwzględny. Adres względny może wyglądać następująco: SRC="graf.jpg" - jeśli plik graf.jpg jest w tym samym folderze co dokument SRC="obrazki/graf.jpg" - jeśli plik graf.jpg jest w folderze podrzędnym (o nazwie obrazki) w stosunku do foldera dokumentu SRC="../graf.jpg" - jeśli plik graf.jpg jest w folderze nadrzędnym Adres bezwzględny ma postać internetowego adresu w protokole HTTP. Przykładowo: SRC=" W ten sposób można włączyć do swojego dokumentu każdy obrazek, którego położenie w Internecie jesteśmy w stanie zlokalizować. Jeśli mechanizm ten nie jest szeroko stosowany, to dlatego, że adresy internetowe mogą się zmieniać zaś pbrazki przemieszczać. Dlatego też lepiej jest mieć obrazki "u siebie". W przypadku umieszczania wielu stron różnych użytkowników na jednym serwerze, warto jednak tworzyć wspólny bank obrazków. Atrybuty polecenia <IMG...> Aby móc wkomponować obrazek w jak najlepszy sposób mamy do dyspozycji szereg atrybutów: ALIGN ALT WIDTH / HEIGHT BORDER VSPACE / HSPACE ALIGN Atrybut ALIGN służy ustaleniu położenia tekstu wobec obrazka. Wartość ALIGN=top powoduje wyświetlenie tekstu od szczytu obrazka. Należy jednak pamiętać, że druga linia zaczyna się pod obrazkiem.

15 Wartość ALIGN=middle powoduje wyświetlenie tekstu od środka wysokości obrazka. I tutaj druga linia zaczyna się pod obrazkiem. Wartość ALIGN=bottom powoduje wyświetlenie tekstu od dołu obrazka. Tutaj druga linia zaczynająca się pod obrazkiem wygląda naturalnie. Tak więc wartości top/middle/bottom nadają się tylko do formatowania krótkich opisów. Aby uzyskać efekt "oblewania" można zastosować poniższe wartości: Wartość ALIGN=left powoduje wyświetlenie obrazka po lewej stronie tekstu. Przechodzenie do nowej linii odbywa się płynnie, tak jak w normalnym tekście. Pojawia się natomiast drugi problem: jak zacząć nowy akapit już pod obrazkiem? Pomocny w tym będzie atrybut polecenia . Będzie ono miało poniższą postać: Analogicznie wartość ALIGN=right powoduje wyświetlenie obrazka po prawej stronie tekstu. Aby zacząć nowy akapit pod obrazkiem napiszemy: Jeśli obrazki po lewej i prawej "zazębiają się" możemy napisać: by mieć pewność, że zaczniemy od linii poniżej wszystkich obrazków. ALT Ten atrybut zapisuje "nazwę" obrazka widoczną gdy niewidoczny jest obrazek (przy wyłączonej opcji ładowania grafiki lub w przyglądarce Lynx) lub gdy kursor wskazuje obrazek (w nowych wersjach przeglądarek). Można więc w ten sposób opatrywać obrazki krótkimi komentarzami lub podpisami. Zobacz poniższy przykład, którego kod wygląda następująco:

16 <IMG SRC="graf.jpg" ALT="Portret kobiety-cyborga"> Efekt będzie następujący: WIDTH / HEIGHT Jeśli pominiemy atrybuty WIDTH / HEIGHT przeglądarka wyświetli obrazek w oryginalnym rozmiarze, a więc w takim, jaki został zapisany w programie graficznym. Możemy jednak podać jawnie szerokość i wysokość obrazka, aby go zmniejszyć, powiększyć lub zdeformować. Obrazek graf.jpg ma szerokość 160 pikseli zaś wysokość 121. Obok każdego z obrazków podany jest kod HTML. <IMG SRC="graf.jpg" ALIGN=middle> <IMG SRC="graf.jpg" ALIGN=middle WIDTH=80 HEIGHT=60> WIDTH=320 HEIGHT=242> <IMG SRC="graf.jpg" ALIGN=middle

17 <IMG SRC="graf.jpg" ALIGN=middle WIDTH=80 HEIGHT=120> Jak widać z powyższych przykładów powiększanie tym sposobem nie daje dobrych efektów (spadek jakości). Z kolei pomniejszanie jest niepraktyczne, gdyż wymaga odczytania (i przesłania po sieci) większej ilości danych niż jest to nam potrzebne (lepiej tworzyć po prostu mniejsze obrazki). Podawanie szerokości i wysokości jest natomiast bardzo użyteczne gdy chcemy wyrównać rozmiary obrazków, które różnią się między sobą kilkoma pikselami. Niewielka deformacja jest tu niewidoczna, zaś równe obrazki dają wrażenie czystości i schludności. Wyrównywanie obrazków z dokładnością co do piksela w programach graficznych może być bardzo trudne (jeśli nie tworzymy ich od początku). BORDER Atrybut BORDER pozwala otoczyć obrazek ramką o podanej grubości. Kolor ramki odpowiada kolorowi używanej czcionki (domyślnie - czarny). Jak zmieniać kolory czcionki, a tym samym ramki, powiemy sobie w lekcji 6. <IMG SRC="graf.jpg" ALIGN=middle BORDER=0> <IMG SRC="graf.jpg" ALIGN=middle BORDER=10> <IMG SRC="graf.jpg" ALIGN=middle BORDER=25>

18 VSPACE / HSPACE Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. kod: <IMG SRC="graf.jpg" ALIGN=left VSPACE=0 HSPACE=0> Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. kod: <IMG SRC="graf.jpg" ALIGN=left VSPACE=10 HSPACE=10> Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. kod: <IMG SRC="graf.jpg" ALIGN=left VSPACE=50 HSPACE=50> Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza. Atrybuty VSPACE / HSPACE określają ilość pustego miejsca wokół obrazka. Działanie komend widać gdy otoczone są tekstem, więc zastosujemy powyższe zdania jako rodzaj wypełniacza.

19 Obrazki w tle Obrazki mogą występować również w roli tła na naszej stronie, dzięki atrybutowi polecenia <BODY>. Składnia polecenia jest następująca: <BODY BACKGROUND="adres pliku"> Tak jak w poleceniu <IMG...> adres pliku może być względny lub bezwzględny. Obrazek zadeklarowany jako tło, jest powtarzany tyle razy ile potrzeba do wypełnienia całego okna przeglądarki. Powinien być więc tak zaprojektowany, by przy potarzaniu lewa i prawa strona oraz góra i dół łaczyły się stosunkowo harmonijnie. Popatrzmy na obrazek poniżej: A tak wygląda strona z tym obrazkiem w tle: Przykład Hierarchia stron Łączenie stron poprzez "linki" jest podstawową cechą języka HTML (litera H oznacza hipertekst czyli dynamiczny system stron). Planując system stron zaczynamy zwykle od strony głównej, która nazywa się najczęściej index.htm lub index.html (ma to związek z konfiguracją serwerów HTTP, które przyjmują te nazwy jako nazwy domyślne głównych dokumentów systemu stron, wtedy w adresie można pominąć nazwę tej strony, kończąc na nazwie foldera). Połączenie można stworzyć do dowolnej strony w Internecie o znanym adresie (bezwzględnym). W przypadku stron znajdujšcych się na tym samym komputerze adres może być względny, tak samo jak przy adresie pliku z obrazkiem. Składnia linku ma następującą postać: <A HREF="adres pliku ze stroną">aktywny napis linku</a> Zwykły link odsyła do początku strony. Jeśli jest ona bardzo długa, to można odesłać również do dowolnego punktu strony, pod warunkiem, że zostanie tam umieszczony punkt orientacyjny o następującej składni: <A NAME="dowolna nazwa">napis, od którego ma zostać wyświetlona strona</a> Przeanalizujmy poniższy przykład: Na tej stronie są trzy linki: Strona główna (index.htm) do strony podrzędnej 1

20 do strony podrzędnej 2 do drugiej połowy strony podrzędnej 2 Odpowiednie kody linków mogą wyglądać następująco: <A HREF="pod1.htm">do strony podrzędnej 1</A> <A HREF="pod2.htm">do strony podrzędnej 2</A> <A HREF="pod2.htm#połowa">do drugiej połowy strony podrzędnej 2</A> Strona podrzędna 1 (pod1.htm) Na tej stronie mogą być różne linki ale ostatnim powinien być powrót do strony nadrzędnej, który może wyglądać tak: <= Powrót do strony głównej zaś jego kod następująco: <A HREF="index.htm"> <= Powrót do strony głównej</a> Strona podrzędna 2 (pod2.htm) Na tej stronie, jak na tej po lewej, powinien być link powrotny (identyczny, bo odsyłająy do tej samej strony) ale pamiętajmy, że musimy umieścić tutaj też punkt orientacyjny dla ostatniego linku z dokumentu index.htm, używając tej samej nazwy, która pojawiła się w linku. Zaznaczyć możemy dowolny fragment tekstu, który niczym nie będzie się różnił w wyglądzie od tekstu normalnego. Załóżmy, że w połowie strony zaczyna się rodział 2 oznaczony napisem: ROZDZIAŁ II Aby stał się on punktem orientacyjnym kod powinien wyglądać następująco: <A NAME="połowa">ROZDZIAŁ II</A> "Linkowanie" nie musi mieć charakteru hierarchicznego. Strony mogą odsyłąć do siebie wielokrotnie, na różnych poziomach. Aby uniknąć wrażenia chaosu należy jednak zadbać, by system strony był czytelny, tj. by zawsze było wiadomo, na której stronie się znajdujemy oraz jak wrócić do poziomu nadrzędnego oraz do samego początku (strony głównej). Taki przemyślany system linków wraz z towarzyszącymi mu oznaczeniami nazywany jest "systemem nawigacji" lub krócej "nawigacją" i jest bardzo ważnym elementem stron. Zła nawigacja jest męcząca dla użytkownika i świadczy o braku profesjonalizmu projektanta. Wygląd połączeń Link może wyglądać różnie. Najprostszą postacią jest oczywiście tekst. Ale może być to również obrazek lub fragment formularza. Prześledźmy poniższe przykłady: Przykład najprostszy: <<< Powrót do spisu treści i jego kod: <<< <A href="index.html#lekcja5">powrót do spisu treści</a>

21 Przykład z obrazkiem: Kod wygląda następująco: <A href="index.html#lekcja5"><img SRC="obrazki/strzalki/yhome.gif"></A> Jak widać obrazek, który jest linkiem otacza dodatkowa obwódka. Nie zawsze jej kolor dobrze się komponuje z obrazkiem. By się jej pozbyć dodajemy atrybut BORDER=0. Wtedy kod wygląda następująco: <A href="index.html#lekcja5"><img SRC="obrazki/strzalki/yhome.gif" BORDER=0></A> zaś efekt jego działania jest następujący: Wreszcie można użyć fragmentu kodu formularza do wygenerowania estetycznego klawisza, takiego jak poniżej: Kod wygląda następująco: <FORM><INPUT TYPE="button" VALUE=" Powrót " onclick="parent.location.href='index.html#lekcja5'"></form> Linki do innych protokołów Najczęściej używamy linków do innych stron HTML czyli łączymy się poprzez protokół HTTP. Inne protokoły obsługiwane przez przeglądarki to GOPHER i FTP. Wpisanie w miejsce protokołu MAILTO odsyła do adresu poczty elektronicznej i uruchamia wbudowanego lub zewnętrznego klienta poczty. Można wpisywać jeszcze inne nazwy prtokołów, lecz będą one obsługiwane przez programy zewnętrzne. Najważniejsze protokoły wyglądają więc następująco: <A HREF=" <A HREF="ftp://adres.servera.ftp"> <A HREF="gopher://adres.gophera"> <A HREF="mailto:adres@poczty.elektronicznej"> <A HREF="telnet://adres.odległego.komputera"> Jak nazywają się kolory? Kolory mogą pojawiać w poleceniu <BODY>, oraz jako atrybuty tabelek, o których będziemy mówić w lekcji 7.

22 Kolory możemy deklarować poprzez podanie ich szesnastkowego kodu RGB lub nazwy. Pierwszy sposób jest o tyle pewniejszy, że wszystkie przeglądarki interpretują kod RGB podobnie (jest zależne również od ogólnych ustawień monitora karty graficznej). Nazwy mogą być interpretowane różnie, w zależności od przeglądarki. Kod RGB (Red, Green, Blue) ma postać: #rrggbb gdzie # jest symbolem kodu szesnastkowego (operującego "cyframi" od 0 do F) rr dwoma cyframi koloru czerwonego gg dwoma cyframi koloru zielonego bb dwoma cyframi koloru niebieskiego RGB jest jednym ze sposobów kodowania kolorów, stosowanym w monitorach. Kod szesnastkowy z kolei to jeden z kodów stosowanych w programowaniu. Zainteresowani mogą sięgnąć po bogatą literaturę na temat tych standardów. Dla potrzeb poznania podstaw języka HTML wystarczy wiedzieć tylko jaki kod reprezentuje jaki kolor. Ułatwia to znakomicie tablica kolorów opracowana przez Steve'a Nelsona przy pomocy JavaScript. Łatwiejsze do zapamiętania są oczywiście nazwy umowne, szczególnie jeśli znamy język angielski. Ich stosowanie należy jednak zawsze przetestować w kilku najpopularniejszych przeglądarkach (IE, Netscape, Mozilla, Opera). Co kryje się za nazwami, można sprawdzić tutaj. Jak definiować kolory? Jeśli nk oznacza numer lub nazwę koloru to globalna definicja kolorów na stronie wygląda następująco: <BODY BGCOLOR=nk TEXT=nk LINK=nk VLINK=nk ALINK=nk> gdzie: BGCOLOR - oznacza kolor tła (domyślnie szary lub biały) TEXT - kolor tekstu (domyślnie czarny) LINK - kolor połączenia (domyślnie ciemno-niebieski) VLINK - kolor używanego (odwiedzonego) połączenia (domyślnie fioletowy) ALINK - kolor linku nad którym zatrzymał się kursor (nie działa w starszych przeglądarkach) Jeśli nie zadeklarujemy koloru, zostaną przyjęte kolory domyślne. Lokalnie, możemy deklarować kolory poprzez atrybut fontu: tutaj znajduje się kolorowany tekst Operując kolorem i wielkością czcionki można uzyskać poniższe efekty: U W A G A!

23 Kolor może być zmieniany dowolnie często. Ten fragment nie ma żadnych atrybutów, więc będzie taki jak globalna definicja w <BODY>. A tutaj zaczynają się małe, buraczkowe literki. Kod tego fragmentu jest dość obszerny: <CENTER> U W A G A ! </CENTER> Kolor może być zmieniany dowolnie często. Ten fragment nie ma żadnych atrybutów, więc będzie taki jak globalna definicja w <BODY>. A tutaj zaczynają się małe, buraczkowe literki.