do strony głównej: 'Index.htm' Powrót do strony początkowej HTML : 'htmprz.htm'

PODSTAWY JĘZYKA HTML c.d.

 

1. Podstawy HTML,struktura dokumentu 2. BLOKI 3.WYKAZY 4. Znaczniki 5. Odsyłacze 6. Grafika 7. Tabele 7. Formularze 8. RAMKI


FORMULARZE

Uwagi ogólne | Ogólne ramy formularza | | Typy pól formularza | INPUT | BUTTON | SELECT | TEXTAREA | Plik w załączniku


Uwagi ogólne

Formularz to kolekcja kontrolek. Stosowane sa w sklepach internetowych, np. ksiazki z goscmi.Formularze to jeden z najciekawszych i najważniejszych elementów stron internetowych. Pozwalają one autorom stron uzyskiwać informację od czytelników, zaś tym ostatnim, na przykład, wypełniać ankiety czy zamawiać jakieś towary i usługi.


Ogólne ramy formularza

Elementy formularza są tworzone w pewnych ogólnych ramach, zakreślonych przez polecenie:
<FORM [ACTION="akcja" METHOD="GET|POST"></FORM>.
Między nimi umieszczamy wszystkie pozostałe elementy.

Kolejnym ważnym punktem jest akcja, która jest wykonywana przez komputer, gdy czytelnik strony zechce przesłać do autora jakieś informacje. Na poczatku formularz umieszcza sie specjalne polecenie ACTION=jakaśtamakcja. Należy również określić sposób komunikowania się przeglądarki czytelnika z serwerem, a więc czy przesyła ona jakieś informacje, czy też je pobiera. Wybieramy zatem jedną z dwóch możliwych metod - POST lub GET.

<FORM ACTION="http://miejsce.com/cgi-bin/x" METHOD="GET|POST">
....
</FORM>

Dla długich stron przewidziana metoda POST. Idzie oddzielna paczka danych. GET uzywamy w wyszukiwarkach.

Jesli przesyła sie poczta elektroniczna to ACTION ma postac:

<FORM ACTION="mailto:autor_strony@jego_domena" METHOD="Post">
....
</FORM>

Mozna tez dodac temat listu, czyli subject po znaku zapytania, wypełniony formularz trafi do autora z taką właśnie informacją w polu tematu listu. Jeśli zamieszczamy na stronie kilka formularzy z ankietami, każdą z nich możemy opatrzyć innym tematem, co ułatwi np. organizację odbieranej poczty, a także da od razu szybką informację o tym, czego dotyczy konkretna przesyłka.


Typy pól formularza

Formularz zawiera różnego typu pola, które są wypełniane informacjami - np. imię i nazwisko, zamawiany towar, dalsze informacje o sobie komentarz itd.
Pola te są podzielone na kilka podstawowych grup:

Na przykład:
Wpisz swoje imię i nazwisko:
lub
Ile masz lat?

Mniej niż 20 21-40 41-60 więcej niż 60

 

Na przykład:

Jakiej przeglądarki WWW używasz?




Na przykład:
Wpisz swoje uwagi:



INPUT

Jak wspomnieliśmy wyżej, INPUT służy o wprowadzania pól, które pozwolą czytelnikowi wpisać jakąś informację lub wybrać jedną z opcji.

INPUT ma następującą składnię:

<INPUT TYPE="typ" NAME="nazwa" VALUE="wartosc">.
Można jeszcze podać MAXLENGTH=n, ograniczające długość wpisywanej informacji do n znaków.

Parametr TYPE określa rodzaj pola.
Jeśli nie wpiszemy TYPE, pole będzie domyślnie polem tekstowym. Gdybyśmy pytali o imię i nazwisko, możemy wpisać: <INPUT NAME="nazwisko">.
NAME jest nazwą pola, które je identyfikuje. W przypadku imienia i nazwiska nie musimy wpisywać wartości pola, czyli VALUE, gdyż wprowadziłoby to do formularza jakieś dane, gdy to my sami oczekujemy ich od czytelnika.

TYPE="text"

Podaj swoje imię i nazwisko:

 

TYPE="checkbox" pozwala wprowadzić pole w postaci kwadratu. Kliknięcie w nim powoduje zaznaczenie pola, ponowne kliknięcie usuwa zaznaczenie. Jeśli zdefiniujemy kilka pól, czytelnik strony będzie mógł zaznaczyć parę z nich lub wszystkie, zależnie od treści. Na przykład w ten sposób moglibyśmy się dowiedzieć, jakimi językami kongresowymi włada.

<INPUT TYPE="checkbox" NAME="jezyk" VALUE="angielski"> angielski
<INPUT TYPE="checkbox" NAME="jezyk" VALUE="francuski"> francuski
...

NAME jest nazwą pola - w tym wypadku jest to język. Każdy kolejny INPUT zawiera tę samą nazwę, gdyż pytamy o ten sam rodzaj danych (tę samą zmienną). VALUE zmienia się, zależnie od języka. Wartość ta zostanie przesłana do autora. W kolejnych wierszach musimy wpisać różne języki. Za poleceniem INPUT wpisujemy jeszcze raz nazwę języka, aby była widoczna dla czytelnika.

Czy znasz któryś z języków kongresowych?
angielski
francuski
niemiecki
hiszpański
rosyjski
chiński
arabski

 

TYPE="radio" pozwala wprowadzić przełącznik (przycisk radiowy). Jest wybór tylko jednej z możliwych wartości. Kliknięcie na jakiejś wartości powoduje jej zaznaczenie, ale zarazem usuwa zaznaczenie z innej. Typ ten stosujemy wtedy, gdy nie można podać kilku wartości, gdyż jest to nielogiczne.

<INPUT TYPE="radio" NAME="plec" VALUE="kobieta" checked> Kobieta
<INPUT TYPE="radio" NAME="plec" VALUE="mężczyzna"> Mężczyzna

Nazwą pola jest "plec", VALUE przybiera dwie możliwe wartości. Jeśli podamy przy jednej z możliwości "checked", pole to będzie domyślnie zaznaczone.

Podaj swoją płeć

Kobieta
Mężczyzna

 

TYPE="submit" służy do wysłania informacji do autora strony (ciągle zakładamy, że posługujemy się funkcją poczty elektronicznej).

<INPUT TYPE="submit" VALUE="Wyślij do nas informacje">

VALUE="jakaśtreść" spowoduje wyświetlenie informacji na przycisku. Kliknięcie na przycisku uruchomi z kolei domyślny program obsługujący pocztę elektroniczną i zapoczątkuje proces przesyłania poczty do osoby, która została zdefiniowana w ACTION.

TYPE="reset" spowoduje usunięcie wszystkich danych wpisanych do formularza ( właściwie zresetowanie do wartości domyślnych). Czasem rozmyślimy się, więc zawsze warto mieć możliwość zrezygnowania i rozpoczęcia wszystkiego od nowa.

<INPUT TYPE="reset" VALUE="Usuń wszystkie informacje">


BUTTON

Polecenie BUTTON jest podobne do klasycznego INPUT, ale pozwala wprowadzić do "klikalnego" przycisku znacznie więcej elementów. Polecenie jest interpretowane tylko przez Internet Explorera 4 lub 5.

<BUTTON>Treść przycisku</BUTTON>



Przycisk z tekstem


Funkcjonalność przycisku można rozbudowywać o skrypty.


SELECT

SELECT służy do tworzenia rozwijanych menu, zawierających kilka opcji. Czytelnik strony może wybrać jedną lub kilka. Składnia jest następująca:

<SELECT NAME="nazwa_listy">
<OPTION> pierwsza pozycja
<OPTION> druga pozycja
<OPTION> trzecia pozycja
...
</SELECT>

w praktyce wygląda to następująco:

Wybierz produkt:

Gdybyśmy chcieli zapewnić możliwość wybrania kilku pozycji, powinniśmy podać <SELECT NAME="nazwa_listy" MULTIPLE>

Domyślnie program wyświetla cztery pozycje z listy, pozwalając ją przewijać. Wybieranie kilku pozycji wymaga trzymania naciśniętego klawisza Ctrl. Rezygnacja z wyboru także wymaga przyciśnięcia Ctrl.

Jeśli chcemy zaznaczyć domyślnie jedną z pozycji, musimy użyć przy niej parametru SELECTED (czyli <OPTION SELECTED> pozycja).

Możemy też zmienić wysokość okienka (długość listy), używając parametru SIZE. Na przykład:

<SELECT SIZE=10>


TEXTAREA

TEXTAREA jest poleceniem, które pozwala wprowadzić pole dla komentarza czytelnika. Jest to wygodne, gdyż jest w stanie przewidzieć wszystkie możliwości. Można więc zostawić miejsce, które wypełni czytelnik, jeśli uzna, że warto o czymś jeszcze napisać. A często autor wręcz prosi o dodatkowe uwagi.

<TEXTAREA NAME=nazwa> </TEXTAREA> wprowadza standardowe pole o 40 kolumnach i 4 wierszach.

Wpisz swoje uwagi:

Jeśli chcemy, aby pole miało inną wielkość, możesz podać dodatkowe wartości ROWS=x COLS=y. Na przykład:

<TEXTAREA NAME="komentarz" ROWS=10 COLS=50> </TEXTAREA>

Pp podaniu jakiegoś tekst między otwierającym i zamykającym znacznikiem TEXTAREA, tekst ten ukazałby się w okienku.

Wpisz swój komentarz na temat programu:


Wysyłanie plików

Specyfikacja HTML przewiduje jeszcze polecenie przesyłania plików, aczkolwiek jest ono w tej chwili źle interpretowane.

Polecenie ma przykładową postać:

<input name="pliczek" type="file">

Wyślij ten plik

W poleceniu definiującym akcję powinno być podane <FORM ENCTYPE="multipart/form-data" ACTION=... >

Niestety, tylko Netscape potrafi wysłać tekstowy załącznik (z polskimi literami są tu jednak kłopoty) w formularzu opracowanym według metody mailto:. Pliki binarne są przetwarzane na "sieczkę". Nie obsługuje tego także mailer Response-O-Matic, który obsługuje ankietę w naszym kursie. Internet Explorer, nawet w najnowszej wersji, nie dołącza plików w ogóle.

Jeśli wolimy, aby odpowiedź przychodziła nie w postaci "zaszyfrowanego" załącznika, lecz w czytelnej postaci w ramach listu, możemy zastosować parametr enctype="text/plain", np:
<form enctype="text/plain" action="mailto:nazwisko@adres?subject=Temat ankiety" method="Post">
A oto, co zobaczymy w otrzymanym liście:

Imię i nazwisko=Jan Kowalski
Płeć=mężczyzna
Wiek=31-40
zajęcie=praca
Miejscowość=powyżej 1000
komputer=PC Pentium
system operacyjny=Windows 95
Przeglądarka WWW=Internet Explorer
Przeglądarka WWW=Netscape Navigator
Ocena=bdb
Opinia=Genialne
ąćęłńóśźż
ĄĆĘŁŃÓŚŹŻ
submit=Wyślij do nas informacje


Przykłady formularzy

Przykład 1

<FORM>
<p> <input type="text" size="10" maxlength="50" name="nazwa" value="00-000">
<input type="checkbox" checked name="nazwa1" value="zaznacz1">bialy
<input type="checkbox" checked name="nazwa2" value="zaznacz2">czarny
<input type="radio" checked name="nazwa3" value="zazn3">opis
<INPUT TYPE="hidden" NAME="sendto" VALUE="wojtek@friko">
</p>>BR> </FORM>

bialy czarny opis

 


Przykład 2

<FORM ACTION="mailto:rokita@elf.ii.uj.edu.pl" METHOD="Post">
<P>
Nazwisko: <INPUT NAME="login">
<P>Haslo:<INPUT TYPE="password" NAME="P_word"><BR>
</P>
<P>Adres:
ul. <INPUT NAME="ul.">
Kod: <INPUT NAME="kod" SIZE=6 VALUE="41-303"><BR>
<INPUT NAME="miejsc." SIZE=20
</P>
<P>Jezyki obce:
<INPUT TYPE="checkbox" NAME="jezyk" VALUE="english">angielski<BR>
<INPUT TYPE="checkbox" NAME="jezyk" VALUE="francais">francuski<BR>
<INPUT TYPE="checkbox" NAME="jezyk" VALUE="deutsch">niemiecki<BR>
<P>Plec:<BR> <INPUT TYPE="radio" NAME="plec" VALUE="masculin">mezczyzna<BR>
<INPUT TYPE="radio" NAME="plec" VALUE="feminin">kobieta<BR> </P>
<P> <INPUT TYPE="hidden" NAME="sendto" VALUE="rokita@elf.ii.uj.edu.pl">
<INPUT TYPE="submit" VALUE="Wyslij formularz">
<INPUT TYPE="image" NAME="point" SRC="egipt.bmp">Wysłanie obrazka
<INPUT TYPE="reset" VALUE="Zresetuj formularz">
</P>
</FORM>

Nazwisko:
Haslo

Adres:
ul.
Kod:

Jezyki obce:
angielski
francuski
niemiecki

Plec:
mezczyzna
kobieta

Wysłanie obrazka


Przykład 3

Lista wyboru

<FORM>
<P>Smaki - wybierz z listy wyboru</P>
<SELECT NAME="smak">
<OPTION>Czekolada
<OPTION>wanilia
<OPTION value="Banan"Banan
<OPTION selected>Wisnia
</SELECT>
</FORM>

Smaki - wybierz z listy wyboru

 


Przykład 4

Textarea

<FORM>
<TEXTAREA NAME="adres" ROWS=6 COLS=40>
Jamsa Press
2975 S. Rainbow
Suite I
Las Vegas, Nevada 89102
USA
KANADA
MEXICO
CUBA
</TEXTAREA>
</FORM>

 


RAMKI


Czym są ramki w dokumencie HTML? | Ogólna struktura strony | Wyjaśnienie znaczników | Parametry FRAMESET | Parametry FRAME | Ramki w kolumnach i wierszach | Odsyłacze | NOFRAMES

 


Czym są ramki w dokumencie HTML?

Coraz więcej przeglądarek potrafi interpretować ramki, które stały się już oficjalnym standardem języka HTML (w wersji 4.0). Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML i dlatego są chętnie stosowane przez wielu webmasterów.

Najbardziej typowym przykładem użycia ramek jest umieszczenie w jednej spisu treści i przeznaczenie drugiej na wywoływane dokumenty (odrębne strony HTML), dowiązane do poszczególnych pozycji spisu. Gdyby ktoś się martwił, że ramka przeznaczona na dokumenty jest zbyt mała, może ją łatwo powiększyć, przeciągając po prostu jej brzegi za pomocą myszki (o ile ramka nie jest zablokowana przez autora strony). W ten sposób można powiększyć ramkę do wielkości niemal całego obszaru roboczego przeglądarki, niezależnie od domyślnych parametrów utworzonych przez autora strony.


Ogólna struktura strony

Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami podrzędnymi.

Zauważmy od razu, że na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki NOFRAMES pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <BODY></BODY> mogą być umieszczane jedynie w obrębie NOFRAMES.

Poniższy przykład obrazuje znaczniki wprowadzone na fikcyjnej stronie prezentującej kilka edytorów HTML.

<HTML>
<TITLE>Edytory HTML</TITLE>

<FRAMESET COLS="25%,*%">
<FRAME SCROLLING="auto" NAME="lista edytorów" SRC="spisedyt.htm">
<FRAME SCROLLING="yes" NAME="edytory" SRC="edyt.htm">
</FRAMESET>
<NOFRAMES>

<BODY>

</BODY>

</NOFRAMES>

</HTML>


Wyjaśnienie znaczników

Kluczowe znaczenie ma para znaczników <FRAMESET> </FRAMESET>. Stanowią one, z dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek.

Zwróćmy uwagę na "wyłamującą się" parę znaczników <NOFRAMES> </NOFRAMES>. Służą one do wprowadzenia elementów strony, które będą widoczne dla posiadacza przeglądarki innej niż Navigator i Internet Explorer (pomijając mniej znane programy). Jeśli natomiast czytelnik strony używa Navigatora lub Internet Explorera, wszelkie informacje między tymi znacznikami zostaną zignorowane. W ten sposób autor strony może utworzyć dokument uniwersalny, uniezależniony od konkretnej przeglądarki.
Nietrudno się domyślić, że treść między znacznikami <NOFRAMES> </NOFRAMES> powinna stanowić swoisty równoważnik strony "ramkowej".

Znacznik <FRAME> służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki.


Parametry FRAMESET

Aby konstrukcja mogła działać, konieczne jest podzielenie strony - pionowe lub poziome. Poniższy kod (kontynuujemy nasz przykład) zawiera informację o podzieleniu strony na dwie kolumny. Służy do tego parametr COLS="x,y", umieszczany w otwierającym znaczniku FRAMESET. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy).

Możemy zastosować parametr BORDER=x, wprowadzonywany przez Navigatora i akceptowany przez Internet Explorera 4, który określa w pikselach szerokość obramowania rozdzielającego ramki. Parametr BORDERCOLOR=kolor pozwala określić kolor obramowania rozdzielającego ramki. Parametr FRAMEBORDER=yes|no lub 1|0 (zalecana jest "liczbowa" postać) pozwala wyświetlać lub chować obramowanie rozdzielające ramki (domyślnie jest ono wyświetlane). Parametr jest na pewno akceptowany przez Navigatora 4.04 i Internet Explorera 4.01.

Aby usunąć obramowania w Internet Explorerze, oprócz FRAMEBOERDER=0 powinniśmy jeszcze użyć parametru FRAMESPACING=0.

<FRAMESET COLS="18%,82%">

Gdybyśmy dzielili stronę na trzy wiersze, moglibyśmy, przez analogię, użyć konstrukcji:

<FRAMESET ROWS="200,*,200">

 


Parametry FRAME

Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty, zazwyczaj w formacie HTML

Aby przypisać ramce dokument, musimy podać źródło dokumentu. Należy w tym celu użyć konstrukcji:

<FRAME SRC="nazwa_pliku.htm">

Byłoby dobrze, gdyby przywoływany plik znajdował się w tym samym katalogu, choć możemy także podać nazwę pliku z pełną ścieżką dostępu:

Jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć parametru, który wyświetli ramkę razem z suwakami. Stosowny parametr ma postać:

<FRAME SCROLLING=yes>

Gdy dokument jest niewielki, np. zawiera jakiś tytuł, który ma pozostawać na ekranie, możemy zrezygnować z suwaków i wstawić parametr SCROLLING=no, ustawiając zarazem odpowiednio szerokość lub wysokość przeznaczonej dla niego ramki. Gdy użyjemy parametru SCROLLING=auto, suwaki pojawią się wtedy, gdy dokument będzie większy niż ramka.

Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą ramkę. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy.

<FRAME NAME="jakaś_tam_nazwa">

Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji parametru

<FRAME NORESIZE>

zabezpieczymy ramkę przed skalowaniem.. Domyślnie, wszystkie ramki są skalowalne.

Parametr FRAMEBORDER=1|0 pozwala ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też nie. W przypadku IE należy jeszcze dodać FRAMESPACING=0 (nie przewiduje go jednak HTML 4).

Parametr MARGINHEIGHT=x wymusza dodatkowy odstęp (margines) u góry i u dołu konkretnej ramki, odsuwając treść od obramowania. Z kolei MARGINWIDTH=x wymusza margines lewy i prawy.

Parametr BORDERCOLOR=kolor określa kolor obramowania danej ramki. Parametr jest akceptowany poprawnie przez Navigatora, natomiast IE akceptuje go z błędami. Element ten nie jest jednak przewidziany przez HTML 4 dla definicji FRAME.

Cała definicja ramki może mieć postać:

<FRAME SCROLLING=yes NAME="jakaś_tam_nazwa" SRC="nazwa_pliku.htm">

W identyczny sposób określamy pozostałe ramki - tyle, ile kolumn (lub wierszy) zadeklarowaliśmy w definicji FRAMESET. W ten sposób zostaną "na dzień dobry" wczytane pewne strony początkowe.

Ramki w kolumnach i wierszach

Powyżej zostały przedstawione dwa konkretne przykłady, obrazujące podział strony na dwie kolumny lub trzy wiersze. Możliwe jest jednak dość dowolne mieszanie definicji kolumn i wierszy, co pozwala np. na utworzenie strony, w której znajdują się trzy wiersze, wiersz środkowy jest podzielony na trzy, a wiersz ostatni na dwie kolumny (łącznie 6 ramek) Oczywiście należy dość ostrożnie zwiększać liczbę ramek, gdyż może to ujemnie wpłynąć na czytelność strony.

Cała sztuka polega na tym, że najpierw dzielimy (w naszym konkretnym przykładzie) stronę na wiersze, a następnie w drugim i trzecim wierszu deklarujemy dodatkowy podział na kolumny - trzy w drugim i dwie w trzecim.
Odpowiedni kod mógłby mieć postać:

<FRAMESET ROWS=200,*,200>

        <FRAME SRC=strona6.htm>

    <FRAMESET COLS=35%,*,35%>

        <FRAME SRC=strona7.htm>

        <FRAME SRC=strona8.htm>

        <FRAME SRC=strona9.htm>

    </FRAMESET>

    <FRAMESET COLS=50%,50%>

        <FRAME SRC=strona10.htm>

        <FRAME SRC=strona11.htm>

    </FRAMESET>

</FRAMESET>

Objaśnienie:

Rozpoczęliśmy konstrukcję od zadeklarowania w pierwszej linii liczby wierszy (trzy).

W drugiej linii od razu wstawiliśmy ramkę z przypisaną jej stroną, gdyż wiersz nie ulega żadnemu podziałowi.

W trzeciej linii ponawiamy definicję FRAMESET (niższego rzędu), dzieląc drugi wiersz na trzy kolumny.

W czwartej, piątej i szóstej linii wstawiamy definicje konkretnych trzech ramek dla drugiego wiersza, przypisując im odpowiednie strony.

W siódmej linii musimy zakończyć tę "lokalną" definicję FRAMESET.

W ósmej linii tworzymy kolejną "lokalną" definicję FRAMESET, tym razem dla trzeciego wiersza, dzieląc go na dwie kolumny.

W dziewiątej i dziesiątej linii wstawiamy definicje dwóch konkretnych ramek dla trzeciego wiersza, przypisując im odpowiednie strony.

W jedenastej linii kończymy "lokalną" definicję FRAMESET.

W dwunastej linii kończymy "globalną" definicję FRAMESET.


Odsyłacze

Teraz powinniśmy się zastanowić, co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce. Jest to kluczowa sprawa, jeśli chcemy wykorzystać ramki w dokumentach. Zauważmy, że kliknięcie na odsyłaczu w spisie treści w lewej ramce powoduje załadowanie dokumentu do prawej ramki, a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które nadawaliśmy poszczególnym ramkom.

Powróćmy do przykładu przedstawionego wyżej w punkcie Ogólna struktura strony.

Strona ta składa się z dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane odpowiednie strony z opisami. Lewej nadaliśmy nazwę lista edytorów, natomiast prawej edytory.

<FRAMESET COLS="25%,*">

<FRAME SCROLLING="auto" NAME="lista edytorów" SRC="spisedyt.htm">

<FRAME SCROLLING="auto" NAME="edytory" SRC="edyt.htm">

</FRAMESET>

<NOFRAMES>

</NOFRAMES>

Nietrudno się domyślić, że należy dokonać pewnych manipulacji na stronie, która jest stale widoczna w lewej ramce o nazwie lista edytorów. Do ramki tej jest ładowana strona zawarta w pliku o nazwie - spisedyt.htm.

Lista tematów zawiera odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do ramki o nazwie edytory. Można to uczynić za pomocą następującej konstrukcji:

<A HREF="fp97.htm" TARGET="edytory">FrontPage 97</A>
<A HREF="hs25.htm" TARGET="edytory">HomeSite 2.5</A>
<A HREF="paj2000.htm" TARGET="edytory">Pajączek 2000.5</A>

itd.

HREF="nazwa_ładowanej_strony" dotyczy nazwy pliku, w którym jest zapisana dana strona

TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana strona. Widzimy tutaj rolę, jaką pełnią nazwy ramek.

FrontPage 97, HomeSite 2.5 i Pajączek 2000 są konkretnymi tematami w ich spisie, pozwalającymi po prostu wybrać interesujące nas zagadnienie.

Oczywiście należy pamiętać o poprawnej konstrukcji, a więc <A HREF=...> </A>

Zwróćmy jeszcze uwagę na cztery zastrzeżone nazwy w przypadku parametru TARGET.

TARGET="_blank"
TARGET="_self"
TARGET="_parent"
TARGET="_top"

W pierwszym przypadku przywoływany dokument zostanie załadowany do nowego, pustego okna (uruchomi nową kopię przeglądarki.
W drugim przypadku (przypadek domyślny) nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku.
W trzecim przypadku przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu.
W czwartym przypadku przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę".

Szczególnie przydatny i często stosowany jest ten ostatni parametr. Użycie "_top" pozwoli uniknąć dość kłopotliwej sytuacji, gdy do ramki jest ładowany dokument, który sam składa się z ramek. "_top" usuwa więc wszelkie istniejące ramki i wyświetla dokument "na czysto". Naturalnie moglibyśmy tutaj z powodzeniem użyć "_blank", ale pozbawiamy się w ten sposób "historii" skoków.

NOFRAMES

NOFRAMES jest ukłonem w stronę użytkowników, którzy nie mogą oglądać ramek w swojej przeglądarce, a więc wszystkich tych osób, które nie posiadają nowej przeglądarki

Posiadacz starszej przeglądarki zobaczyłby pustą stronę, gdyby między <NOFRAMES> </NOFRAMES> nie było żadnej informacji. Dlatego musimy w tym miejscu powtórzyć informację zawartą w jednej z ramek. W naszym przykładzie podstawową stroną jest strona o nazwie Edytory HTML (plik edytory.htm). Strona ta zawiera definicję dwóch ramek: do lewej jest na stałe przypisana strona spisedyt.htm, do prawej natomiast są wlewane inne strony, zależnie od wskazanego tematu. Z kolei między <NOFRAMES> </NOFRAMES> znalazło się powtórzenie treści strony spisedyt.htm (lista edytorów), jako strony wyjściowej dla osób nie posiadających Navigatora czy Internet Explorera. Tym samym osoby te, wywołując kurs, zobaczą stronę Edytory HTML (edytory.htm), ale w taki sposób, jakby wywołały stronę Lista edytorów (spisedyt.htm). Z poziomu tej strony mogą sięgać do konkretnych tematów, które będą oczywiście zajmować cały ekran, a nie ramkę, jak w Navigatorze czy Internet Explorerze. Naturalnie powinny się tutaj znaleźć stosowne odsyłacze hipertekstowe, które pozwolą nawigować w całym, wielostronicowym kursie HTML.Przypomnijmy, że gdy używamy nowych programów, wszelkie informacje między znacznikami NOFRAMES zostaną zignorowane.

W naszym przykładzie będzie to następujący blok:

<noframes>
<body>
Twoja przeglądarka nie akceptuje ramek
<br>
<hr>
<h3>Edytory HTML</h3>
<ul type=square>
<li><a href="corelweb.htm" target="edytory">Corel WebGraphics Suite</a>
<li><a href="webmast.htm" target="edytory">Corel WebMaster Suite</a>
<li><a href="fp97.htm" target="edytory">FrontPage 97</a>
<li><a href="hedit11.htm" target="edytory">Hedit 1.1</a>
<li><a href="homesite.htm" target="edytory">HomeSite 2.5</a>
<li><a href="hotdog3.htm" target="edytory">HotDog 3</a>
<li><a href="composer.htm" target="edytory">Netscape Composer</a>
<li><a href="paj2000.htm" target="edytory">Pajączek 2</a>
</ul>
</body>
</noframes>

Uwaga: nie jest do końca jasne, czy NOFRAMES umieszczać w ramach FRAMESET, czy też poza nim. Uprzednio autorzy podręczników sugerowali tę drugą możliwość, ale w specyfikacji HTML 4 pojawiła się informacja, że NOFRAMES mogą być umieszczone w ramach FRAMESET "pierwszego rzędu". Niezależnie od tego przeglądarki interpretują poprawnie oba sposoby umieszczania NOFRAMES.

 

 

Powrót do strony głównej: 'Index.htm'