Strona WWW od podstaw |
Każda strona WWW powinna być zawarta pomiędzy znacznikami <html></html>, które informują przeglądarkę, że ma do czynienia z dokumentem HTML a nie zwykłym plikiem tekstowym. Dodatkowo powinna składać się z dwóch sekcji: head - części zawierającej informacje o dokumencie przy użyciu tagów meta - oraz body - części zasadniczej, zawierającej informacje, które zostaną wyświetlone w oknie przeglądarki. |
Nagłówek
W sekcji nagłówka można wstawić wiele znaczników, które dostarczą przeglądarce, jak i wyszukiwarkom, niezbędnych informacji o stronie.
Najważniejszym elementem jest tytuł strony, który uzyskamy dzięki znacznikowi <title></title>, np. <title>Moja pierwsza strona WWW</title>.
Ukazuje się on w belce tytułowej przeglądarki. Tytuł nie tylko informuje odwiedzających o zawartości dokumentu, lecz również wykorzystywany jest przez roboty systemów wyszukiwawczych, jak Infoseek lub Altavista.
Znaczniki meta są opcjonalnymi poleceniami, które mają za zadanie szczegółowo informować o typie i zawartości dokumentu. Tagi te nie są jedynie zbiorem nikomu niepotrzebnych zaklęć - choć można by tak sądzić widząc, jak bardzo po macoszemu są one traktowane przez webmasterów, zarówno amatorów i profesjonalistów. Przeciwnie, są one wręcz niezbędne dla poprawnego skatalogowania czy też zindeksowania stron przez spidery (wyspecjalizowane roboty systemów wyszukiwawczych). Poprawność meta tagów daje duże szanse, że zbudowana przez nas strona zajmie wysoką pozycję w wynikach wyszukiwarek. Prawidłowa struktura meta znaczników umieszczonych w części nagłówka <head> strony powinna wyglądać co najmniej tak:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta name="description" content="Strona na temat komputerów.">
<meta name="keywords" content=" komputer,internet,procesor">
<meta name="date" content="20-03-2001">
<meta name="language" content="pl">
Aby nieco przybliżyć te tajemnicze znaczniki, należą się słowa wyjaśnienia.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
Polecenie to jest deklaracją strony kodowej, w jakiej została napisana treść dokumentu.
W naszym kraju standardem kodowania polskich liter jest norma ISO-8859-2 i to ona została zasygnalizowana w tym znaczniku.
<meta name="description" content="Strona na temat komputerów.">
Polecenie to opisuje zawartość strony.
Opis ten pojawia się podczas wyświetlania wyników szukania systemów wyszukiwawczych, co w dużej mierze ułatwia orientacje osobom, które z nich korzystają. W przypadku braku tego pola wyszukiwarka wyświetla kilka pierwszych wierszy dokumentu, które mogą być całkowicie przypadkowe i zupełnie nie odzwierciedlać jego zawartości. Maksymalnie można użyć 200 znaków do opisania strony.
<meta name="keywords" content=" komputer,internet,procesor">
Tag ten informuje o słowach kluczowych, czyli takich, które w trafny sposób definiują jego zawartość. W tym miejscu decydujemy, jakie elementy strony są istotne. Jeśli np. robimy witrynę o tematyce komputerowej, to na pewno w polu tym powinniśmy umieścić takie słowa, jak: komputer, Internet, procesor, monitor.
<meta name="date" content="20-03-2001">
To polecenie informuje o dacie utworzenia dokumentu.
<meta name="language" content="pl">
Polecenie to informuje o języku, w jakim została napisana zawartość redakcyjna strony. Niektóre wyszukiwarki korzystają z niego przy precyzowaniu zapytań.
<meta http-equiv="refresh" content="X; url=http://adres.strony>/
Polecenie spowoduje automatyczne wczytanie strony wskazanej w polu url po X sekundach. Nie jest to standardowo, na każdej stronie WWW, stosowany tag meta; przydaje się głównie wtedy, gdy nasza strona z jakichś powodów zmieniła dotychczasową lokalizację bądź adres.
Sekcja BODY
Jak już wcześniej wspomniałem, w sekcji tej znajdują się znaczniki oraz właściwa treść dokumentu. Tag <body> można zmodyfikować stosując kilka parametrów, które zdecydują o graficznej postaci strony oraz o kolorze czcionki, domyślnej dla całej strony.
<body bgcolor="#ffffff" text="#000000" leftmargin="0" topmargin="0">
Parametr bgcolor pozwala na wybranie koloru tła strony. W przypadku gdy nie zostanie on zadeklarowany, odwiedzający zobaczą tło zależne od własnych ustawień w przeglądarce. Za pomocą parametru text="kolor" określamy kolor czcionki tekstu w dokumencie. Wybierając ten kolor, należy zwrócić uwagę, aby dobrze wkomponował się w tło strony; inaczej mówiąc, aby tekst był czytelny.
Możemy także zdefiniować kolory odsyłaczy. Parametr link="kolor" określa standardową barwę odnośnika tekstowego; vlink="kolor" określa kolor linku, który został co najmniej raz użyty. Natomiast alink="kolor" odpowiada za kolor aktywnego odsyłacza, czyli linku będącego w trakcie ładowania dowiązanego do niego dokumentu.
Parametry leftmargin i topmargin odpowiadają za pozycjonowanie w pikselach zawartości dokumentu odpowiednio od lewego i górnego marginesu strony.
Tworzenie tabel
|
W dokumencie HTML tabele stosuje się nie tylko w ich pierwotnym przeznaczeniu, czyli wizualizowania danych liczbowych i zestawień porównawczych analogicznie do arkuszy kalkulacyjnych. O wiele częściej używa się je do precyzyjnego umiejscawiania elementów jak grafika i tekst na obszarze strony.
Tabele stanowią wtedy szkielet strony WWW. Poprawne wykorzystanie wszystkich możliwości tabel nie jest sprawą prostą, zważywszy na możliwość zagnieżdżania jednej tabeli w drugiej. To właśnie błędy w ich konstrukcji sprawiają, że pewnych stron w ogóle nie można obejrzeć pod przeglądarkami jak Netscape Navigator, Mozilla i Opera, które rygorystycznie przestrzegają składni kodu HTML.
Ogólne ramy tabeli definiuje się znacznikami <table></table>. W niej następnie są umieszczane definicje rzędów <tr></tr>, definicje komórek w rzędach <td></td>, a w tych ostatnich właściwe dane. Należy zaznaczyć, że danymi zamieszczonymi w pojedynczej komórce może być zarówno tekst, grafika, jak i nowa tabela.
Przykładowa tabela:
<table border="0" width="60%" align="center" cellspacing="2" cellpadding="2" bgcolor="#ffffff">
<tr>
<td> dane 1</td><td> dane 2</td>
</tr>
<tr>
<td> dane 3</td><td> dane 4</td>
</tr>
</table>
Parametr border określa grubość ramki tabelki. Gdy stosujemy tabele do konstrukcji szkieletu strony, wartość tę należy ustawić na "0", dzięki temu ukryjemy przed oczami czytelnika całe "rusztowanie", które nie zawsze musi wyglądać zachęcająco.
|
Za szerokość tabeli odpowiada width. Parametr ten przyjmuje zarówno wartości absolutne podane w pikselach, np. width="500", jak i wartości względne, zwane też procentowymi, np. width="50%" - co jest równoznaczne z połową szerokości ekranu przeglądarki. Jak łatwo się domyślić, tabela z szerokością zdefiniowaną w procentach będzie się skalowała, czyli dynamicznie dostosowywała swój rozmiar do aktualnej wielkości okna przeglądarki.
Pozycjonowanie tabeli na stronie uzyskuje się dzięki zastosowaniu parametru align. Odstęp między komórkami danych opisuje parametr cellspacing, natomiast cellpading jest odpowiedzialny za obszar dokoła danymi w konkretnej komórce. Umiejętne wykorzystanie tych parametrów daje możliwość naprawdę dokładnego umiejscowienia danych na stronie.
Podobnie jak znacznik <body> tabele również mogą mieć określony kolor tła. Wykorzystamy do tego poznany już wcześniej parametr bgcolor. Wpisywanie zawiłych znaczników odpowiadających za formatowanie tabeli, co w większości przypadków jest jednoznaczne z konstrukcją całej strony, jest czynnością zarówno żmudną, jak i wymagającą dużej uwagi i precyzji. Niejeden webmaster zagubił się już w gąszczu kolejnych wierszy i komórek. Na szczęście z pomocą przychodzą wyspecjalizowane kreatory tabel, w które wyposażone są profesjonalne edytory HTML, zarówno tekstowe, jak i pracujące w trybie WYSIWYG.
Grafika
|
W Internecie występują dwa najbardziej popularne formaty graficzne. GIG, do statycznych i animowanych grafik o niedużej ilości kolorów, oraz JPEG - do zdjęć i obrazków, które wymagają dużej, ponad 256, gamy kolorów.
Podstawowa konstrukcja odpowiedzialna za umieszczenie grafiki w dokumencie HTML ma następującą postać:
<img src="gfx/home.gif" width="70" height="31" border="0" alt="Strona główna">
Znacznik <img src> może zawierać zarówno bezpośrednie odwołanie do pliku graficznego lub poprzez podaną ścieżkę, gdy grafikę i dokumenty HTML trzymamy w osobnych katalogach. Pożądanym nawykiem jest podawanie rozmiarów (height i width) obrazka, ponieważ znacząco to przyspiesza jego ładowanie, a tym samym całej strony webowej.
Parametr border działa w podobny sposób jak w przypadku znacznika <table> i określa grubość ramki okalającej grafikę. Wręcz nagminnie pomijanym parametrem jest alt, w którym podajemy tekst alternatywny, który pokazuje się w dwóch przypadkach. Gdy czytelnik najedzie myszką na obrazek lub gdy z jakiegoś powodu (wielu internautów wyłącza obsługę grafik w swoich przeglądarkach, aby przyspieszyć pojawianie się stron), a obrazek nie zostanie wyświetlony.
Podpis zastępczy grafiki jest niezastąpiony, gdy elementy graficzne zostały wykorzystane do nawigacji po serwisie, wtedy nawet brak samych obrazków nie uniemożliwi odwiedzającemu poruszanie się po witrynie.
Odsyłacze
Odsyłacze, zwane również hiperłączami, linkami i odnośnikami, są najbardziej charakterystycznym elementem dokumentów w Internecie. Bez odsyłaczy bowiem nie mogłyby istnieć i funkcjonować powiązania między dokumentami serwisu, umieszczonymi na tym samym serwerze, w tym samym lub innym mieście, a nawet innym kontynencie. Bez hipertekstu całą treść dokumentu trzeba by pokazywać na jednej stronie ciągnącej się w nieskończoność niczym wstęga, co jest bardzo uciążliwe w czytaniu.
Powszechnie używane odsyłacze to takie, które kierują do innych stron WWW i taki, który uruchamia klienta poczty elektronicznej.
Standardowymi linkami przekierowującymi do innych dokumentów są odsyłacze tekstowe. Aby stworzyć taki odsyłacz, wystarczy wybrane słowo lub wyrażenie, a nawet i całe zdanie, zamknąć między znacznikami <a href="..."></a>. Domyślnie taki tekst jest wyświetlany na niebiesko z podkreśleniem. Działanie taga linku można zmodyfikować poprzez dodanie parametru target="_blank", który spowoduje, że strona, do której prowadził odsyłacz, otworzy się w nowym oknie przeglądarki.
Podobnie jak znacznik <img src> odnośniki również można wzbogacić "dymkiem" z alternatywnym tekstem; w tym wypadku stosujemy parametr title (należy jednak pamiętać, że nie wszystkie przeglądarki go obsługują).
Odsyłacze mogą również ułatwić poruszanie się po jednym dokumencie poprzez przeskakiwanie precyzyjnie w konkretne miejsce, np. śródtytuł artykułu.
W tym celu należy zastosować etykiety (kotwice), którymi opatrujemy wybrany wyraz.
<a name="etykieta">śródtytuł</a>
Chcąc się odwołać do tak oznaczonego miejsca, należy stworzyć link o następującej konstrukcji:
<a href="stron.html#etykieta">treść linku</a>,
w przypadku gdy odwołujemy się do miejsca z tego samego dokumentu, wystarczy podać:
<a href="#etykieta">treść linku</a>
Odsyłaczem w dokumencie HTML nie musi być jedynie tekst. Równie dobrze można do tego wykorzystać grafikę. Co więcej, można to zrobić w tradycyjny sposób:
<a href="strona.html" target="_blank"><img src="obrazek" border="0" width="x" height="x" alt="tekst zastępczy"></a>,
jak i stosując graficzną mapę odsyłaczy.
Mapa graficzna jest specjalnie oprogramowaną grafiką, w której zostały zdefiniowane niezależne obszary o regularnych i nieregularnych kształtach będące odnośnikami.
Konstrukcja przykładowej mapy:
<map name="nazwa_mapy">
<area alt="Odsyłacz numer 1" shape="rec" coords="9,5,107,52" href="strona1.html">
<area alt="Odsyłacz numer 2" shape="circle" coords="167,34,21" href=" strona2.html">
</map>
<img src="obrazek" width="x" height="x" border="0" usemap="#nazwa_mapy">
Parametry shape oraz coords odpowiadają za określenie rodzaju odsyłacza (rec - czworobok, circle - koło, poly - wielokąt) oraz dokładną lokalizację wydzielonych obszarów w obrębie grafiki.
Każdy z typów hiperłączy można z powodzeniem wykorzystać do uruchomienia programu pocztowego odwiedzającego. W tym celu wystarczy odpowiednio przygotować wpis:
<a href="mailto:autor@adres">Napisz do mnie</a>.
Jeśli samo wywołanie klienta e-mail nas nie zadowala, to w prosty sposób możemy nadać domyślny tytuł takiemu listowi.
<a href="mailto:autor@adres?subject=tytul listu">Napisz do mnie</a>
Wykazy
Wykazy, które powszechnie spotyka się na stronach wielu serwisów WWW, są systematycznymi wyliczeniami punktów, które w sposób skondensowany prezentują zespół zagadnień lub myśl. Jest to element dość często używany przez użytkowników edytorów i procesorów tekstu, np. Microsoft Word.
Szkielet wykazu wypunktowanego uzyskamy stosując polecenie <ul></ul>. Polecenie to możemy wzbogacić parametrem type, które może przybrać wartość: circle (kółko), square (kwadrat) i disc (kropka).
Parametr ten określa wygląd wyliczenia.
<ul type="circle">
<li><a href="plik1.html">Pierwsza pozycja</a></li>
<li><a href="plik2.html">Druga pozycja</a></li>
</ul>
Wykaz numerowany, w którym wyliczenia są przedstawione w postaci cyfr lub liter, uzyskuje się znacznikiem <ol></ol>. Także i ten tag ma parametr type pozwalający na przyjmowanie różnej postaci wyliczenia, np. cyfry arabskie, cyfry rzymskie, litery alfabetu.
Znaczniki formatowania bloków
Blokami dokumentu HTML nazywamy elementy treści ujęte w ramy wydzielonych znaczników, odpowiadających za rozmieszczenie tekstu na stronie WWW. Takimi tagami są: stopnie tytułów, paragraf, znaki końca wiersza, linia separacyjna, preformatowanie oraz pozycjonowanie warstwy. Paragraf jest podstawowym blokiem tekstu w dokumencie. Dzięki znacznikowi <p></p> poszczególne akapity są oddzielone od siebie dodatkową przestrzenią sprawiając, że cały tekst staje się bardziej czytelny. Dodatkowym parametrem jest align wyrównujący tekst do lewej bądź prawej strony, wypośrodkowuje i justuje, czyli wyrównuje do obu brzegów akapitu (lewego i prawego) naraz na wzór druku książkowego.
Stopnie tytułów, zwane również nagłówkami, to ustalone formatowanie pod względem rozmiarów czcionek. Wyróżnia się 6 stopni, od największego <h1></h1> do najmniejszego <h6></h6>. Znaczniki te także mają parametr align określający położenie nagłówka na środku, po lewej albo prawej stronie dokumentu.
Znacznik końca wiersza to <br>.
Powoduje on przerwanie wiersza i przeniesienie pozostałej części tekstu o wiersz niżej.
W przeciwieństwie do paragrafu jego zastosowanie nie wymusza dodatkowej przestrzeni między wierszami. <br> jest jednym z tych znaczników, który obecnie nie wymaga zamknięcia.
Linia separacyjna <hr> ma za zadanie oddzielić bloki tekstu. Znacznik ten ma wiele parametrów modyfikujących wygląd linii.
<hr size="5" width="300" align="right" noshade>
Parametry width i align działają identycznie jak przy innych znacznikach; size pozwala nadać jej dowolną grubość, natomiast noshade pozbawia ją cieniowania.
Preformatowanie jest poleceniem wywoływanym tagami <pre></pre> i powoduje wyświetlenie tekstu w taki sposób, w jaki został on uprzednio zredagowany w edytorze HTML, inaczej mówiąc przenosi fizyczny rozkład tekstu w edytorze do okna przeglądarki.
Znaczniki formatujące tekst
|
Tagi odpowiadające za wygląd i krój czcionek, a tym samym całych tekstów, dzielą się na fizyczne i logiczne. Znaczniki fizyczne działają w analogiczny sposób do atrybutów czcionek w procesorach tekstowych.
<b>czcionka pogrubiona</b>
<i>czcionka pochylona</i>
<u>czcionka podkreślona</u>
<strike>czcionka przekreślona</strike>
<tt>czcionka monotypiczna, o stałej szerokości znaku</tt>
<big>duża czcionka, o rozmiarze +1 punkt</big>
<small>mała czcionka, o rozmiarze -1 punkt</small>
<sup>indeks górny</sup>
<sub>indeks dolny</sub>
Znaczniki logiczne odnoszą się do konkretnych zastosowań tekstu, lecz ich efekt wizualny jest identyczny jak w przypadku tagów fizycznych. Dlatego też coraz rzadziej można spotkać strony, przy budowie których wykorzystano te znaczniki. Jednakże są one istotne dla przeglądarek głośnomówiących, używanych przez osoby niewidome, albowiem inaczej dany tekst jest odczytywany.
Przykłady znaczników logicznych:
<em>czcionka wyróżniona</em>
<strong>czcionka mocno wyróżniona</strong>
<cite>cytat</cite>
<code>kod programu</code>
Jeden z parametrów taga <body> pozwala zdefiniować kolor czcionki obowiązującej w danym dokumencie. Jednakże nic nie stoi na przeszkodzie, aby dowolnemu fragmentowi tekstu nadać oddzielną barwę, gdy zajdzie taka potrzeba. Wystarczy objąć go znacznikami <font color="kolor">treść</font>. Zwyczajowo przyjęło się określać kolory na potrzeby WWW w wartościach heksadecymalnych, i tak np. #000000 to czarny, #ff0000 to czerwony, a #ffffff - biały.
Jednakże istnieje 16 "bezpiecznych", podstawowych kolorów, dla których utworzono nazwy imienne, które obsługują niemal wszystkie przeglądarki. Są to: black, white, red, blue, green, navy, silver, purple, olive, teal, maroon, gray, lime, fuchsia, yellow i aqua.
Parametrem znacznika <font></font> odpowiadającym za rozmiar czcionki jest size przyjmujący wartości bezwzględne od 1 do 7 oraz względne od -7 do +7.
Krój czcionki definiuje parametr face, który jednak wraz z rozwojem stylów kaskadowych jest schyłkowym poleceniem HTML.
Na koniec
Nie opisano tu oczywiście wszystkich znaczników oraz metod ich wykorzystania, które można spotkać przeglądając źródła stron WWW . Jednak nawet tylko taka ich znajomość wystarczy do zbudowania złożonej strony webowej. Niezależnie czy będą to statyczne strony (najbardziej popularne wśród początkujących webmasterów tworzących swoje prywatne witryny), czy strony dynamiczne (wykorzystywane przede wszystkim przez profesjonalistów do budowy zaawansowanych serwisów i portali), pobierające informacje z baz danych, to szkielet ich musi zawierać wymienione elementy.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}