KURS HTML


Witam Was w następnym odcinku z serii: 'Webmaster'. To już czwarty, a więc za miesiąc będzie jubileusz. Na tę okazję postaram się przygotować coś extra! Ale to będzie za miesiąc. Jak już pewnie zauważyliście, to co zapowiadałem miesiąc temu stało się faktem. Powstał nowy corner o wdzięcznej/dźwięcznej (niepotrzebne skreślić :) nazwie 'Programista'. Razem z Heniem czekamy teraz na opinie i propozycje dotyczące tego kącika. To tak a'propos nowego kąta w AM. A teraz przechodzimy do sedna sprawy. W tym miesiącu, jak pewnie pamiętacie, będziemy zajmować się tabelami i ramkami. Spróbujemy też omówić bardzo przydatne 'mapy odsyłaczy'. Do dzieła!

SKLEROZA :)

Na początku chciałem jeszcze przyznać się, że zapomniałem podczas opisywania odsyłaczy o dwóch rzeczach. Pierwsza to parametr TARGET taga A. Wartość TARGET może być równa:

  • TARGET="_blank" - strona otwiera się w nowym oknie;
  • TARGET="_top" - strona wstawi się na miejsce strony pierwszej w hierarchii skoków;
  • TARGET="_self" - strona zastąpi aktywną stronę;
  • TARGET="_parent" - strona zastąpi dokument nadrzędny w hierarchii;
Druga rzecz, to sposób poruszania się w obrębie dokumentu. Chodzi tu o to, że mamy np. długi dokument i chcemy umożliwić czytelnikowi sprawniejsze poruszanie się. Nazywamy wtedy kolejne rozdziały. Aby to zrobić, wpisujemy:
<A NAME="rozdzial1">Rozdział I</A>

Następnie tworzymy coś w rodzaju spisu treści na początku dokumentu, w którym zamieszczamy odsyłacz:

<A HREF="#rozdzial1">Naciśnij tutaj, aby przejść do rozdziału I</A>

Nie przypadkowo oznaczyłem # kolorem niebieskim (znacznik). Gdyby tego znaku nie było, odsyłacz poprowadził by do dokumentu rozdzial1, a tak przenosi do części tego samego dokumentu oznaczonej rozdzial1. To by było na tyle jeśli chodzi o sklerozę. Jeśli jeszcze o czymś zapomniałem, to piszcie na amwebmaster@poland.com.

[na górę]

TABELE

Tabele są z pozoru jedną z najtrudniejszych części HTMLa. Wielu moich kumpli do tej pory używa różnych programów ułatwiających ich robienie (chociażby Word). Ja jednak cały czas będę upierał się przy notatniku (dostałem mercedesa i milion zielonych od Billa G. za promowanie produktu Małego-Miękkiego:)))). I to nie dlatego, że jestem masochistą, jak uważają koledzy redaktorzy ;), tylko z powodu tego, że np. Word dopisuje masę całkowicie niepotrzebnych tagów. A jak wiadomo każdy kb się liczy (przynajmniej w AM ;)). Podstawowym znacznikiem definiującym tabelę jest <TABLE></TABLE>. Parametrami TABLE są:
  • WIDTH="x" - szerokość tabeli w pikselach;
  • HEIGHT="y" - wysokość tabeli;
  • BORDER="z" - grubość obramowania tabeli (0=brak obramowania);
  • BACKGROUND="sciezka" - obrazek tła tabeli;
  • BGCOLOR="kolor" - kolor tła tabeli;
  • CELLSPADDING="a" - margines w tabeli w pikselach;
  • CELLSPACING="b" - odległość między komórkami w tabeli;
  • BORDERCOLOR="kolor" - kolor obramowania tabeli;
  • BORDERCOLORLIGHT="kolor" - kolor obramowania jasnego (zastosowanie światła);
  • BORDERCOLORDARK="kolor" - kolor obramowania ciemnego (zastosowanie cienia);
Jest jeszcze oczywiście wiele innych parametrów, ale są one bardziej skomplikowane, więc może innym razem. I tak możecie być pewni, że z tabelami nudzić się nie będziecie.
Tak więc mamy ogólne ramy tabeli. Teraz trzeba zdefiniować pierwszy wiersz w tabeli (dla (t)opornych wiersz to 'to poziome' ;). Robimy to za pomocą znacznika <TR></TR>
Teraz wstawiamy w ramy wiersza poszczególne komórki tabeli za pomocą znaczników <TD></TD>. Potem można wstawiać następne wiersze i następne komórki. Całość tabeli może więc wyglądać tak:

<TABLE WIDTH="300" HEIGHT="100" BORDER="1" BGCOLOR="white" CELLSPACING="2" CELLPADDING="1" BORDERCOLORDARK="gray" BORDERCOLORLIGHT="white">
<TR><TD>aaa</TD><TD>bbb</TD></TR>
<TR><TD>ccc</TD><TD>ddd</TD></TR>
<TR><TD>eee</TD><TD>fff</TD></TR>
</TABLE>

Co z kolei będzie wyglądało tak:
aaabbb
cccddd
eeefff

Teraz postaram się przetłumaczyć ten ciąg dziwnych znaków na "normalny" język. A więc tak. Tabela o szerokości 300 pixeli i wysokości 100 pixeli ma obramowanie grubości 1 pixela, tło białe, odległość między komórkami równą 2 px, marginesy równe 1 px, kolor ciemnej strony obramowania: szary, jasnej strony obramowania: biały. Są 3 wiersze, każdy wiersz zawiera 2 komórki. Teraz pora na omówienie znacznika <TD>. Do tego znacznika są wszystkie parametry TABLE oprócz parametrów określających obramowanie, odległości między komórkami i marginesy. Można za to dołożyć do tego parametry takie jak:

  • ALIGN="cos" - wyrównanie poziome tekstu w komórce (left, center, right, justify);
  • VALIGN="cos" - wyrównania pionowe tekstu w komórce (top, middle, bottom);
  • COLSPAN="x" - scalenie komórek leżących obok siebie w poziomie ('x' oznacza ile kolejnych komórek ma być scalonych);
  • ROWSPAN="y" - scalenie komórek leżących obok siebie w pionie;

Bardzo ważne jest to, aby było po tyle samo komórek we wszystkich wierszach tabeli. Jeśli jednak musimy mieć w jednym wierszu np. 4 komórki, a w drugim 3, to wystarczy w tym drugim scalić dwie komórki ze sobą. Jeszcze jedna ważna rzecz. Jeśli scalamy dwie komórki ze sobą, to musimy pamiętać, że stosując parametr COLSPAN lub ROWSPAN, definiujemy od razu, że ta komórka byłaby normalnie dwiema komórkami. Nie trzeba więc dopisywać drugiej komórki.

To by było chyba na tyle, jeśli chodzi o tabele. Proponuję wam popróbować samemu zrobić najróżniejsze tabele. Pamiętajcie, że praktyka czyni mistrza!

[na górę]

RAMKI

Ramki w HTMLu służą nam do tego, aby podzielić okno dokumentu na kilka części. W każdej z tych części może być inna podstrona. Dzięki ramkom też możemy się łączyć pomiędzy poszczególnymi podstronami. W dokumencie, w którym definiujemy ramki, tag BODY wstawiamy dopiero między znacznikami <NOFRAMES></NOFRAMES>. BODY w dokumencie definiującym ramki jest więc tylko znacznikiem uruchamianym, gdy przeglądarka nie obsługuje ramek. Znacznikiem ramek jest <FRAMESET></FRAMESET>. Parametrami FRAMESET są:

  • COLS="x,y" - dzielenie okna na kolumny ('x' i 'y' to szerokości poszczególnych kolumn);
  • ROWS="x,y" - dzielenie okna na wiersze ('x' i 'y' to wysokości poszczególnych wierszy);
  • FRAMESPACING="z" - odległość między ramkami;

Poszczególne ramki oznaczamy za pomocą taga <FRAME> bez 'zamknięcia'. Parametrami FRAME są:

  • SRC="sciezka" - dokument wstawiony do tej ramki;
  • NAME="nazwa" - nazwa ramki;
  • SCROLLING="typ" - przewijanie ramki (gdzie typ=yes, no lub auto);
  • FRAMEBORDER="x" - grubość obramowania ramki (0=brak obramowania);
  • NORESIZE - zabezpieczenie przed ręcznym skalowaniem ramki;

W ten sam sposób definiujemy pozostałe ramki. Całość może więc wyglądać tak:

<FRAMESET COLS="200,*" FRAMESPACING="0">
<FRAME SRC="lewa.html" NAME="left" SCROLLING="auto" FRAMEBORDER="0" NORESIZE>
<FRAME SRC="prawa.html" NAME="right" SCROLLING="yes" FRAMEBORDER="0" NORESIZE>
</FRAMESET>

Przy opisywaniu ramek warto też wspomnieć, że * oznacza: 'reszta okna'. Tłumaczenie: Definiujemy dwie ramki ułożone w kolumnach o szerokości 200 px i o szerokości równej reszcie okna. Odstępy między ramkami ustawiamy na 0. W pierwszej ramce o nazwie 'left' umieszczamy dokument lewa.html. Dokument ten będzie przewijany automatycznie, kiedy długość dokumentu wykroczy poza rozmiary ramki. Ramka 'left' nie ma obramowania i nie może być ręcznie skalowana. Druga ramka jest podobna, z tym że dokument w tej ramce nazywa się prawa.html, cała ramka nazywa się 'right', a ramka jest domyślnie przewijalna.
Teraz pora na omówienie sposobu kontaktowania się między ramkami. Chodzi tu o to, że umieszczamy w jednej ramce odsyłacz do jakiegoś dokumentu, a ten dokument ukazuje się w drugiej ramce. W HTMLu wygląda to tak:

<A HREF="stronka.html" TARGET="ramka2">

Dokument 'stronka.html' zostaje umieszczony w ramce o nazwie 'ramka2'.
Następna rzecz. Ramki można oczywiście umieścić równocześnie w kolumnach i w wierszach. Aby to zrobić, zamiast ramki, która ma być podzielona na dwa wiersze, wpisujemy tag FRAMESET ze wszystkimi pozostałymi znacznikami. W ten sposób jedna ramka zostaje podzielona na kilka ramek.

To chyba wszystko, jeśli chodzi o ramki. Jeśli o czymś zapomniałem, piszcie na amwebmaster@poland.com.

[na górę]

MAPY ODSYŁACZY

Mapy odsyłaczy służą nam do tego, żeby w zależności, w którą część obrazka się kliknie, przenosiło nas do innego dokumentu. Można więc zrobić menu w postaci jednego dużego obrazka i wstawić odsyłacze do każdego z elementów tego menu. Aby to zrobić, robimy najpierw ów obrazek (ale mi podpowiedź ;). Następnie w dokumencie wpisujemy znacznik określający mapę odsyłaczy:
<MAP NAME="mapa1"> </MAP>. Pod 'mapa1' możemy oczywiście wstawić inną nazwę. Teraz definiujemy obszary odsyłaczy na tym obrazku (wstawiamy oczywiście między <MAP> a </MAP>):
<AREA SHAPE="kształt" COORDS="współrzędne">.
Pod 'kształt' możemy podstawić: rect (prostokąt), circle (koło), polygon (obszar nieregularny). Współrzędne najłatwiej jest odczytać otwierając obrazek w...Paincie. Tam po najechaniu na fragment obrazka, w pasku statusu wyświetlają się współrzędne. Przy prostokącie będą nam potrzebne współrzędne 2 przeciwległych wierzchołków (a więc będą 4 wartości - dwie dla jednego wierzchołka i dwie dla drugiego). Przy kole będą nam potrzebne współrzędne środka koła i długość promienia (a więc 3 wartości - dwie dla środka koła i jedna dla długości promienia). Przy obszarze nieregularnym będą nam potrzebne współrzędne wszystkich wierzchołków (po dwie współrzędne dla każdego wierzchołka). Współrzędne wpisujemy oczywiście po przecinkach (dla niekumatych, przecinek wygląda tak:' , ':). W ten sposób definiujemy kilka obszarów (trzeba uważać, aby nie nachodziły one na siebie). Następnie wstawiamy w tag AREA parametr HREF="strona.html". No chyba nie muszę mówić, co pod 'strona.html' podstawić ;). Jeśli ktoś chce, może też wstawić parametr
ALT='opis obszaru'. Służy on do tego samego co w obrazkach, a więc do opisu obszaru. Teraz wystarczy w tag obrazka (IMG) wstawić parametr: USEMAP="#mapa1". Pod 'mapa1' podstawiamy nazwę wcześniej zdefiniowanej mapy odsyłaczy.
To by było wszystko, jeśli chodzi o mapy odsyłaczy.

[na górę]

LUDZIE LISTY PISZĄ...

Bardzo wszystkim dziękuję za zainteresowanie moim kursem. Przyszło naprawdę sporo listów z pochwałami ;))). W tym miesiącu postanowiłem opublikować jeden list, który umieszczam poniżej:

Siemka! Czytałem WEBMASTERA i mam pytanie dotyczące Front Page 2000. A więc zrobiłem stronke w tym programie (narazie tylko index) i wysłałem ją na serwer. Do tekstu powitalnego i do gifu dodałem efekty DHTML (Menu "Format" i "Dynamic HTML Effects"). Gdy wpisałem adres strony w przeglądarce, to po chwili wyświetliła mi się pusta strona nie zawierająca ani efektu DHTML ani tekstu i gifu. Sprawdziłem źródło HTML strony i wszystko było na swoim miejscu. Najgorsze że strona z dyskietki ładowała się jak trzeba. Tylko że ze złości sformatowałem potem tą dyskietke :-) i nie wiem teraz czy to ja popełniłem jakiś błąd czy to FrontPage ma takie głupie dodatki które nie działają?!? Podoba mi się pomysł działu WEBMASTER w Action Magu. Pozdrawiam :-))

Egzo

Wygląda to tak. Ja używam tylko i wyłącznie notatnika do robienia stron webowych, więc nie korzystam z frontpage'a. Ale sprawdź jedną rzecz, która mi się kiedyś przytrafiła. Miałem wiele kont i wrzuciłem stronkę na nie ten serwer. Sprawdź też jeszcze jedno. Może wysłałeś po prostu sam plik index.html bez plików graficznych i skryptów. Sprawdź jeszcze raz.

[na górę]

KONIEC :(

Koniec, ale tylko w tym miesiącu. Jak zawsze zapraszam do wyrażania swojej opinii, wysyłając maila na amwebmaster@poland.com. Zapraszam też do wysyłania pytań dotyczących webmasterstwa. Zawsze chętnie pomogę. Za miesiąc omówimy wykazy wypunktowane i numerowane oraz jak już wcześniej wspomniałem, będzie coś extra! Yo!

PELE

[na górę]