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:
Jeżeli chcemy przenieść się do jakiejś strony www - wpisujemy np. "http://www.cdaction.com.pl"
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ę
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: 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.
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!