Webmaster

              



Jak powiedziałem (a wlaściwie napisałem) tydzień temu, dzisiaj zajmiemy się głównie odsyłaczami, czy jak kto woli linkami oraz formularzami. Chciałem też wspomnieć, że na 99,9% od następnego numeru (lipcowego) wraz z Heniem będę prowadził kącik w ogóle o programowaniu (HTML, Pascal, C++, Delphi, QBasic [Hi, Devi]). Oczywiście zapraszam! Jak zawsze możecie pisać na amwebmaster@poland.com. A teraz: do dzieła!

LINKI

Linki w HTMLu są to takie chochliki dzięki którym możemy poruszać się między stronami bez ciągłego wpisywania adresu.
Odsyłacze obsługuje tag <A></A>, ale żeby tchnąć w nie życie przyda nam się parametr HREF. Przykładzik:

<A HREF="strona">Odsyłacz</A>
Teraz pora na omówienie. HREF wskazuje nam na jaką stronę mamy być przeniesieni (w tym przypadku 'strona') po naciśnięciu na 'Odsyłacz'. Zamiast 'strona' wpisujemy:
  1. Jeżeli chcemy przenieść się do jakiejś strony www - wpisujemy np. "http://www.cdaction.com.pl"
  2. Jeżeli chcemy przenieść się do innego dokumentu HTML - wpisujemy np. "aaa.html" lub jeśli jest w innym katalogu wpisujemy pełną ścieżkę
  3. Jeżeli chcemy zrobić odsyłacz do maila - wpisujemy np. "mailto:amwebmaster@poland.com", ważny jest parametr mailto:, który powoduje uruchomienie domyślnego programu pocztowego
Możemy oczywiście robić odsyłacze do obrazków, czy zipów, ale robimy to tak samo jak w przypadku dokumentu HTML.
Kilka przykładów praktycznych:
odsyłacz1 - przeniesie nas na stronę CD-Action;
odsylacz2 - przeniesie nas na zakładkę "listy";
odsylacz3 - uruchomi program pocztowy z wpisanym w polu do: adresem amwebmaster@poland.com;
odsylacz4 - otworzy obrazek tytul.gif.

Warto też wspomnieć, że linki można osadzić np. w obrazkach. Definicję obrazka już znamy. Teraz tylko wszystko skleić do kupy (fuj:). Zamiast 'Odsyłacz' wpisujemy:
<IMG SRC="obrazek.jpg">

Jeszcze tylko pozostało ustalenie kolorów dla odsyłaczy. Służą do tego parametry BODY: LINK, VLINK, ALINK. LINK służy do ustalenia koloru dla linku "w spoczynku". VLINK - dla linku odwiedzonego, a ALINK dla linku aktywnego. W praktyce wygląda to tak:
<BODY LINK="x" VLINK="y" ALINK="z">
Pod x, y, z podstawiamy angielskie nazwy kolorów lub wartości w hexach.

W GŁĘBI

Omówię tutaj różne ciekawostki, dzięki którym odsyłacz będzie żywszy. Po pierwsze w linku do maila możemy tak zamieszać, że w programie pocztowym, oprócz wpisanego w polu do: adresu mailowego, będzie wpisany tytuł, czy fragment listu! Nie będę znowu przepisywał całego tagu, tylko zajmiemy się obróbką samego "mailto:amwebmaster@poland.com".
Aby dodać tytuł piszemy: "mailto:amwebmaster@poland.com?subject=tytul".
Praktyka: link
Aby dodać jeszcze fragment treści listu, piszemy: "mailto:amwebmaster@poland.com?subject=tytul&body=tresc".
Praktyka: link

Jeśli już wypróbowaliście linki, to na pewno zauważyliście, że w pasku stanu (na dole ekranu) wyświetla się dokładnie to, co wpisaliście po HREF. Aby to zmienić użyjemy JavaScriptu.
<A HREF="strona.html"
onMouseOver="window.status='
tekst';return true"
onMouseOut="window.status='';return true"></A>

Omówienie: Po najechaniu myszką w obszar odsyłacza (onMouseOver), status okna będzie wyświetlał 'tekst'. Po odjechaniu (onMouseOut) status nie będzie nic wyświetlał. Ważne jest polecenie onMouseOut, gdyż gdyby go nie było, to 'tekst' wyświetlał by się bez przerwy. Najedź na ten link:
Link

Następny numer, który już na pewno na wielu stronach widzieliście (chociażby w Webmasterze [menu]). Polega on na tym, że po najechaniu myszką nad obszar pierwszego obrazka, pojawia nam się w jego miejsce drugi. Najedź na kwadrat, a pojawi się okrąg:
A w HTMLu:
<A HREF="strona.html"
onMouseOver="document.images['
nazwa'].src='obrazek2.gif'"
onMouseOut="document.images['
nazwa'].src='obrazek1.gif'">
<IMG SRC="
obrazek1.gif" NAME="nazwa"></A>
Opis: Definiujemy obrazek i jego nazwę (w tym przypadku SRC="obrazek1.gif" NAME="nazwa"). Bardzo ważna jest nazwa, żeby JavaScript wiedział, który obrazek ma wymienić na inny. W parametrze onMouseOver obrazek o nazwie 'nazwa' zamienia się na obrazek2.gif. Po odjechaniu (onMouseOut) wraca z powrotem obrazek1.gif. W ten sposób można zrobić ciekawe menu.

FORMULARZE

Formularze w HTMLu służą przede wszystkim do ankiet, mailerów itp. Głównym tagiem formularza jest <FORM></FORM>. Parametrami FORM są:
METHOD="metoda" - np. POST lub GET
ACTION="mailto:adres@e-mail" - adres na który ma zostać wysłany formularz
ENCTYPE="text/plain" - służy do przedstawienia otrzymanego formularza w postaci nazwa=wartosc
Teraz pora na utworzenie elementów formularza. I tak:
Okienko tekstowe:
<INPUT TYPE="text">
Opis: Służy np. do wpisania jakiegoś imienia lub innego krótkiego tekstu

Opcja ukryta:
<INPUT TYPE="hidden">
Opis: Użycie omówimy później ;)

Przyciski radiowe: opcja 1 opcja 2
<INPUT TYPE="radio" NAME="nazwa">
Opis: Służą do wyboru jednej opcji z kilku. Ważna jest nazwa (we wszystkich opcjach wyboru musi być taka sama), aby kompjuter wiedział między którymi opcjami się wybiera.

Pola wyboru: opcja 1 opcja 2
<INPUT TYPE="checkbox" NAME="nazwa">
Opis: Służy do wyboru opcji, przy czym można wybrać więcej niż jedną

Hasło:
<INPUT TYPE="password">
Opis: Po wpisaniu tekstu do okienka tekstowego, zamiast liter pojawiają się gwiazdki (*)

Pole tekstowe:
<TEXTAREA COLS="x" ROWS="y"></TEXTAREA>
Opis: Można wpisać tu większą wiadomość. Pod 'x' podstawiamy szerokość pola, a pod 'y' wysokość, z taką różnicą, że nie w pikselach, a w ilościach znaków.

Rozwijana lista wyboru:
<SELECT>
<OPTION>
opcja 1
<OPTION>
opcja 2
</SELECT>

Opis: Select jest głównym znacznikiem informującym, że zaczęła się rozwijana lista. Dodatkowym parametrem SELECT jest MULTIPLE, co spowoduje, że będzie można zaznaczyć więcej niż jedną opcję. Option wskazuje nam na jedną z opcji. Dodatkowo można użyć SELECTED jako parametr OPTION, dzięki czemu opcja będzie zaznaczona jako domyślna.

Przycisk:
<INPUT TYPE="button" value="napis_na_przycisku">
Opis: Jest to zwykły przycisk. VALUE informuje, co ma być wypisane na przycisku.

Potwierdzenie/Wysłanie formularza:
<INPUT TYPE="submit" value="napis_na_przycisku">
Służy do potwierdzenia wysłania formularza na adres podany w FORM ACTION

Wyczyszczenie formularza:
<INPUT TYPE="reset" value="napis_na_przycisku">
Powoduje wyczyszczenie wszystkich wpisów do formularza.

Dodatkowe parametry:
We wszystkich elementach formularza powinien znajdować się parametr NAME i VALUE. NAME wiadomo już co to jest, teraz pora na VALUE="tekst". W okienkach tekstowych dopisany ten parametr, powoduje wyświetlenie się w nich "tekst". W przyciskach radiowych, polach wyboru i rozwijanych listach natomiast, powoduje on nazwanie zaznaczonego pola (tzn. nazywamy np. dwa przyciski radiowe NAME="wybor", a w VALUE wpisujemy w jednym przycisku: "opcja1", a w drugim "opcja2". Po wysłaniu formularza na twój adres, w polu 'wybor' będzie napisane 'opcja1' lub 'opcja2'). Trochę się tutaj zamieszałem, więc jeśli nie wiecie w czym rzecz, to piszcie do mnie. W okienkach tekstowych można też dopisać parametr SIZE="x", który ustali nam szerokość pola na 'x' znaków. W okienkach tekstowych możliwe jest dopisanie parametru MAXLENGTH="y", który ustali nam maksymalną ilość znaków, jaka może być tam wpisana.

Teraz dla podsumowania spróbujemy stworzyć przykładowy formularz (znaki końca linii <BR> zostały wstawione dla czytelności formularza). Tak więc:
<FORM ACTION="mailto:amwebmaster@poland.com" METHOD="POST" ENCTYPE="text/plain">
Imię: <INPUT TYPE="text" NAME="imie"><BR>
Nazwisko: <INPUT TYPE="text" NAME="nazwisko" SIZE="20"><BR>
E-mail: <INPUT TYPE="text" NAME="email"><BR>
Płeć: <INPUT TYPE="radio" NAME="plec" VALUE="mezczyzna">mężczyzna
<INPUT TYPE="radio" NAME="plec" VALUE="kobieta">kobieta <BR>
Hobby: <INPUT TYPE="checkbox" NAME="hobby" VALUE="gry">gry
<INPUT TYPE="checkbox" NAME="hobby" VALUE="html">HTML <BR>
Województwo: <SELECT NAME="wojewodztwo">
<OPTION VALUE="none">----------wybierz----------
<OPTION VALUE="dolnośląskie">dolnośląskie
<OPTION VALUE="kujawsko-pomorskie">kujawsko-pomorskie
<OPTION VALUE="lubelskie">lubelskie
<OPTION VALUE="lubuskie">lubuskie
<OPTION VALUE="łódzkie">łódzkie
<OPTION VALUE="małopolskie">małopolskie
<OPTION VALUE="mazowieckie">mazowieckie
<OPTION VALUE="opolskie">opolskie
<OPTION VALUE="podkarpackie">podkarpackie
<OPTION VALUE="podlaskie">podlaskie
<OPTION VALUE="pomorskie">pomorskie
<OPTION VALUE="śląskie">śląskie
<OPTION VALUE="świętokrzyskie">świętokrzyskie
<OPTION VALUE="warmińsko-mazurskie">warmińsko-mazurskie
<OPTION VALUE="wielkopolskie">wielkopolskie
<OPTION VALUE="zachodnio-pomorskie">zachodnio-pomorskie
</SELECT><BR>
Uwagi:<BR>
<TEXTAREA COLS="50" ROWS="10" NAME="uwagi"></TEXTAREA><BR>
<INPUT TYPE="submit" VALUE="Wyślij"> <INPUT TYPE="reset" VALUE="Wyczyść">
</FORM>


Otrzymamy: (możesz ten formularz wysłać)

Imię:
Nazwisko:
E-mail:
Płeć: mężczyzna kobieta
Hobby: gry HTML
Województwo:
Uwagi:


MAILER

Mailer jest to skrypt CGI udostępniony przez bydgoski oddział Topnetu. Został on stworzony, aby ułatwić przesłanie formularzy. Dzięki niemu, formularz wysyłany jest bez udziału poczty elektronicznej. Aby go wstawić do dokumentu, wystarczy wpisać:
<FORM ACTION="http://www.byd.top.pl/cgi-bin/mailform.cgi" METHOD="POST">
<INPUT TYPE="hidden" NAME="mailto" VALUE="
amwebmaster@poland.com">
<INPUT TYPE="hidden" NAME="mailsubject" VALUE="
formularz ze strony WWW">
<INPUT TYPE="hidden" NAME="mailfrom" VALUE="
PELE">
<INPUT TYPE="hidden" NAME="includelabel" VALUE="
yes">
<INPUT TYPE="hidden" NAME="desturl" VALUE="
thanx.html">

<!-- Tu wstaw resztę formularza -->

</FORM>

Tutaj właśnie wykorzystaliśmy typ "hidden". Jest to element formularza niewidoczny użytkownikowy, a więc nie może go wypełnić. Jeszcze tylko opiszę poszczególne elementy mailera:
NAME="mailto" -> adres e-mail, na który ma być wysłany formularz
NAME="mailsubject" -> temat listu
NAME="mailfrom" -> adres e-mail lub opis przesyłającego list
NAME="includelabel" -> 'yes' lub 'no' - opis pól w liście (nazwa=wartość)
NAME="desturl" -> strona, która ma być wyświetlona po wysłaniu formularza

KONIEC :(


Przypominam, że od następnego numeru AM nie będzie już istniał taki dział jak 'Webmaster'. Będzie za to dział, który będzie nosił jakże wymowną nazwę: 'Programista'. W nim też wszystko o językach programowania, takich jak: HTML, Pascal, C++, Delphi, QBasic. Zapraszam już teraz! Kurs HTMLa będę oczywiście prowadził nadal aż do wykończenia pomysłów. Mam nadzieję, że nie nastąpi to zbyt wcześnie. A w następnym odcinku kursu zajmiemy się ramkami, tabelami i... zobaczymy co jeszcze ;). A na razie mówię: "Wspaniały, Wielki, Webmaster". Do zobaczyska!
              

Copyright © 2001 by Pele for Action Mag