| |
|
|
 HTML
Poniżej przedstawiam wybrane, ciekawe informacje dotyczące opisu języka HTML.
Dodatkowo, polecam początkującym dział krótko wprowadzający do dynamicznej wersji HTML, czyli DHTML.
Ramki
Ramki są bardzo ciekawym urozmaiceniem. Pozwalają podzielić główne okno przeglądarki na mniejsze "podokna", czyli ramki, a w każdym z nich można jednocześnie wyświetlać różne dokumenty.
Na początku tworzymy plik główny (na razie bez ramek).
Aby dokonać podziału pliku na ramki, do pliku INDEX.HTM wpisujemy kod jak niżej:
‹frameset rows="30%,*" FRAMEBORDER="0"›
‹frame scrolling="no name="menu" src="menu.htm"›
‹frame scrolling="auto" name="tresc" src="intro.htm"›
‹/frameset›
‹noframes›
‹/noframes›
Powyższy kod zmieni wygląd naszej strony. INDEX.HTM będzie zawierał dwie ramki, do których wczyta domyślnie różne pliki HTM. Każda z ramek będzie miała swoją nazwę.
Widać zatem, że parametr ROWS nakazał podzielić plik INDEX.HTM na dwie ramki w poziomie (parametr COLS stworzyłby dwie ramki w pionie).
Liczba 30% oznacza w tym przypadku wysokość ramki (tu: w procentach; można też podać wysokość w pikselach).
Pozostałymi parametrami ramki są: nazwa
(NAME) i zródło (SRC). Do czego są te parametry? SRC określa plik, jaki ma znajdować się w ramce i jest zaznaczony białą czcionką na rysunku. A NAME? Wyobrazmy sobie, że w pliku MENU.HTM znajduje się menu z przyciskami,
wśród których jest np. przycisk Galeria, po naciśnięciu którego do dolnej ramki (nazwanej TRESC) ma wczytać się plik ZDJECIE1.HTM. Tak więc linia kodu przypisana do przycisku Galeria pliku MENU.HTM wyglądałaby:
‹A HREF="zdjecie1.htm" TARGET="tresc"›
czyli widzimy wyraznie, iż parametr NAME ramki (oznaczony na rysunku niebieską czcionką) jest niezwykle pomocny przy określaniu, w której ramce ma pojawić się dany plik.
Oczywiście, plik INTRO.HTM, znajdujący się w dolnej ramce (o nazwie TRESC) może również zawierać w sobie inne ramki. Załóżmy, że plik INTRO.HTM będzie zawierał tym razem dwie pionowe ramki, co uzyskamy wpisując do kodu strony:
‹frameset cols="30%,*" FRAMEBORDER="0"›
‹frame scrolling="no" name="iko" src="ico.htm"›
‹frame scrolling="auto" name="opis" src="wstep.htm"›
‹/frameset›
‹noframes›
‹/noframes›
Wówczas będzie on wyglądał, jak poniżej:
Co po wczytaniu do ramki TRESC da nam razem:
Prosze zwrócić uwagę, aby nie powtarzać tych samych nazw ramek (NAME). Jak widzisz, ramki można dowolnie zagnieżdżać, jednak im ich więcej, tym trudniej zorientować się, gdzie jaki plik się właściwie znajduje. Pokazana powyżej sytuacja jest najczęstściej stosowaną.
Przykładowo, w górej ramce umieszczamy MENU GŁOWNE, w lewej GŁÓWNE TEMATY a w prawej WSTĘP. Teraz w odnośnikach ze stron znajdujących się w poszczególnych ramkach wpisujemy tylko w tag'u A parametr TARGET=nazwa_ramki, gdzie nazwa_ramki będzie zdefiniowaną przez nas wcześniej nazwą ramki, w której ma pojawić się dany plik.
Jak pewnie zauważyłaś/łeś, tag FRAME ma parametr SCROLLING, który określa sposób przewijania dokumentu w tej ramce (YES, NO, AUTO).
Parametr 'target'
Atrybut TARGET jest wykorzystywany przy znaczniku ‹A› i określa sposób otwarcia np. nowej strony:
‹A HREF="about.htm" TARGET="_parent"›
Istnieją następujące możliwości atrybutu TARGET:
- "_blank" powoduje, że dokument wskazywany w znaczniku ‹A› jest ładowany do nowego okna nie mającego nazwy
- "_self" ładuje dokument wskazywany w znaczniku ‹A› do tego samego okna lub ramki, w którym znajduje się połączenie definiowane znacznikiem ‹A›. Jest to użyteczne gdy chcemy by dane połączenie spowodowało wyświetlenie dokumentu nie w ramce domyślnej ale w bieżącej.
- "_parent" ładuje dokument do ramki nadrzędnej w stosunki do ramki zawierającej bieżący dokument. W przypadku braku ramki nadrzędnej będzie stosowane ustawienie TARGET="_self".
- "_top" powoduje, że ładowany dokument zajmie całe okno przeglądarki, zastępując całkowicie bieżący układ ramek
Poza wymienionymi powyżej, jako atrybutu TARGET używa się nazw ramek definiowanych w znaczniku ‹FRAME› jak poniżej:
‹FRAME NAME="menu_glowne"›
i następnie
‹A HREF="menu.htm" TARGET="menu_glowne"›
Parametry 'img'
Atrybut LOWSRC obiektu IMG służy do udostępniania czegoś w rodzaju podglądu właściwego obrazu znajdującego się na stronie. Korzysta się z niego dokładnie tak jak z atrybutu SRC podając ścieżkę do odpowiedniego pliku:
‹IMG SRC="fotofull.jpg" LOWSRC="fotolow.jpg"›
Przeglądarka, napotykając na atrybut LOWSRC w pierwszej kolejności wczytuje obraz podany w tym miejscu, następnie po odczytaniu zawartości całej strony zostaje wczytany obraz ze ścieżki parametru SRC.
Zaleca się aby obiekty LOWSRC stanowiły mniejsze lub mniej dokładne właściwych obrazów (jeżeli plik LOWSRC będzie większy niż SRC to umieszczanie go nie ma sensu!). Ich zadaniem jest wcześniejsze pokazanie odbiorcy strony w postaci zbliżonej do efektu końcowego.
Pliki AVI na stronie
Aby umieścić plik AVI na stronie WWW należy do znacznika ‹IMG› wstawić atrybut DYNSRC (Dynamic Source) jak poniżej:
‹IMG DYNSRC="welcome.avi" SRC="powitanie.gif"›
Proszę zwrócić uwagę, że atrybut SRC jest wciąż konieczny i określa on obraz statyczny, który znajdzie się na stronie w wypadku gdy plik AVI nie zostanie odnaleziony.
Poniżej przedstawiono resztę atrybutów usprawniających zarządzanie plikami AVI:
- CONTROLS - pod okienkiem z odtwarzanym plikiem AVI pojawia się zestaw przycisków sterujących animacją
- LOOP - wartość liczbowa określa liczbę powtórzeń natomiast wartość (-1) lub INFINITE spowoduje ciągłe odtwarzanie animacji
- START - atrybut regulujący rozpoczęcie odtwarzania
FILEOPEN=rozpoczęcie po załadowaniu całej strony
MOUSEOVER=rozpoczęcie po przesunięciu kursora myszy nad obszar animacji.
Animacja 'marquee'
Animacja MARQUEE to napis płynnie przewijany w poprzek ekranu na stronie WWW. Aby utworzyć prostą animację wystarczy użyć polecenia:
‹MARQUEE›Cześć‹/MARQUEE›
Animacja MARQUEE utworzona jak wyżej przewija tekst z prawej na lewą stronę ekranu a napis musi zniknąć w całości zanim pojawi się ponownie. Oto atrybuty pozwalające zmienić zachowanie napisu MARQUEE:
- BEHAVIOR
SCROLL=standardowe
SLIDE=po osiągnięciu lewego marginesu napis zatrzymuje się
ALTERNATE=tekst "odbija się" od marginesów
- DIRECTION dotyczy tylko animacji z atrybutem SCROLL
LEFT/RIGHT=kierunek przesuwania tekstu
- LOOP określa ile razy napis przesunie się po ekranie natomiast wartość (-1) lub INFINITE spowoduje ciągłe przesuwanie
- SCROLLAMOUNT i SCROLLDELAY określają prędkość przesuwania napisu; pierwszy - liczbę pikseli w pojedynczym kroku animacji, drugi - czas w [ms] między krokami animacji
Istnieją też atrybuty zmieniające wygląd animacji:
- BGCOLOR zmienia kolor tła w obszarze przesuwającego się napisu
- HEIGHT i WIDTH określają rozmiar obszaru po którym przesuwa się napis
- HSPACE i VSPACE kontrolują odległość obszaru napisu od otaczającego go tekstu
- ALIGN określa sposób ułożenia tekstu otaczającego animację (TOP, MIDDLE, BOTTOM)
Mapowanie obrazów
Mapy odsyłaczy są specjalnym rodzajem obrazów czułych na klikanie myszą ich poszczególnych, zdefiniowanych przez użytkownika obszarów. Mapy umiesczamy w dokumencie za pomocą znacznika ‹MAP›:
‹MAP NAME="mapa_do_menu"›
Następnie za pomocą znaczników ‹AREA› definiujemy obszary czułe na kliknięcia myszy.
‹AREA SHAPE=kształt COORDS=parametry HREF=dokument›
Poszczególne zmienne oznaczają:
- SHAPE określa kształt czułego obszaru
CIRCLE=koło
POLY=dowolna figura zamknięta
RECT=kwadrat
POINT=punkt
- COORDS opisują współrzędne czułego obszaru
CIRCLE=x,y,promień
POLY=x1,y1,x2,y2,...,xN,yN
RECT=x1,y1,x2,y2
POINT=x,y
Mając zdefiniowaną mapę odsyłaczy, wystarczy teraz wskazać przeglądarce obiekt graficzny do którego się odnosi (który będzie z niej korzystał) dodając atrybut USEMAP do znacznika ‹IMG› jak poniżej:
‹IMG SRC="menu.gif" USEMAP="mapa_do_menu"›
Co to jest DHTML?
Dynamiczny HTML (DHTML) znacząco rozszerzył możliwości autora pod względem wpływania na wygląd stron WWW. Niestety, DHTML "widziany oczyma" Microsoft'u i Netscape'a to dwie różne rzeczy. To co mają wspólne, to kaskadowe arkusze stylów (Cascading Style Sheets - CSS) umożliwiające m.in. łatwe i szybkie formatowanie tekstu na stronach WWW.
Generalnie, warstwy są interpretowane zarówno przez IE jak i NN jednak Netscape podszedł do tego zagadnienia bardziej szczegółowo, dostarczając użytkownikom niezliczone atrybuty umożliwiające nieograniczoną kontrolę nad elementami stron.
Warstwy w DHTML
Ze względu na wykorzystywane przeze mnie oprogramowanie, opiszę zastosowanie warstw w IE.
Warstwy powiązane są ze sobą relacją OBIEKT NADRZĘDNY-OBIEKT PODRZĘDNY. Oznacza to, że dana warstwa może zawierać inną. Wszystkie warstwy umieszczane są wewnątrz znacznika ‹BODY›. Utworzone warstwy mogą być umiejscawiane względem zawierającej je warstwy nadrzędnej lub względem okna całego dokumentu.
‹
›
Aby utworzyć warstwę należy wpisać:
‹style type="text/css"›
‹!--
#nazwa_warstwy {parametry_warstwy}
-->
‹/style›
Poszczególne parametry wpisuje się w formacie parametr:wartość oddzielając je od siebie średnikiem. Kolejne parametry to:
- position określa pozycję warstwy (absolute/relative/static)
- left określa odległość w punktach od lewej krawędzi elementu nadrzędnego (ekranu lub warstwy nadrzędnej)
- top definiuje odległość od górnej krawędzi jak wyżej
- width określa szerokość prostokątnego obszaru warstwy
- height definiuje wysokość warstwy
- clip definiuje obszar elementu widocznego warstwy - część elementu znajdująca się poza widocznym obszarem staje się przezroczysta. Obszar widoczny definiujemy następująco: clip:rect(top,right,bottom,left)
- z-index określa uporządkowanie warstw wzdłuż osi "z" (trzeci wymiar) co ma istotne znaczenie w momencie, gdy zaczniemy jednocześnie wyświetlać kilka nachodzących na siebie warstw
- visibility określa czy warstwa jest widoczna (VISIBLE) czy niewidoczna (HIDDEN)
- background-color definiuje kolor warstwy, brak powoduje że warstwa jest przezroczysta
Przykładowa definicja warstwy może wyglądać następująco:
#warstwa {position:absolute; left:10; top:15;
width:250; height:400; clip:rect(0,0,400,0);
visibility:hidden; background-color:#008000}
Mając zdefiniowaną warstwę tworzymy znacznik ‹DIV› określający zawartość warstwy:
‹DIV ID="nazwa_warstwy"›
‹!-- kod z zawartością warstwy --›
‹/DIV›
czyli np.
‹DIV ID="nazwa_warstwy"›
Kliknij ‹IMG SRC="menu.gif"› aby rozpocząć
‹/DIV›
Teraz aby uaktywnić warstwę np. po kliknięciu tekstu wpisujemy:
‹A onClick=document.all[ident].style.visibility =
"visible"›Pokaż warstwę‹/A›
Po kliknięciu napisu Pokaż warstwę na stronie pojawi się prostokąt o współrzędnych (10,15,260,415) zawierający polecenie kliknięcia rysunku "menu.gif".
Kaskadowe arkusze stylów
Definicje stylu ogólnie umieszczamy w znaczniku ‹STYLE› przed znacznikiem ‹BODY› strony:
‹STYLE TYPE="text/css"›
‹#nazwa_stylu {definicje_stylu}
‹/STYLE›
Poszczególne definicje wpisuje się w formacie nazwa:wartość oddzielając je od siebie średnikiem. Kolejne parametry to:
- font-family określa krój pisma (nazwa czcionki lub jednej z pięciu rodziny czcionek - SERIF, SANS-SERIF, CURSIVE, FANTASY i MONOSPACE). Definiując rodzinę czcionek możesz wymienić kilka typów oddzielając je przecinkami - wówczas gdy wybrana przez Ciebie czcionka nie będzie dostępna - system użyje następnej nazwy z listy.
- font-size określa wielkość czcionki (np. 10pt)
- font-style określa styl czcionki (NORMAL lub ITALIC)
- font-weight określa grubość czcionki (NORMAL, BODL, BOLDER lub LIGHTER)
- font-variant definiuje stosowanie kapitalików (NORMAL lub SMALL-CAPS)
- color określa kolor czcionki (wartość słowna lub szesnastkowa)
- text-decoration określa sposób wyświetlania czcionki (NONE, OVERLINE-przekreślone, UNDERLINE-podkreślone)
- background-color określa kolor tła (nazwa lub kod heksadecymalny)
- background-image określa ścieżkę do obrazu będącego tłem elementu
- background-repeat określa składanie tła z identycznych fragmentów
- text-align definiuje sposób wyrównania tekstu (LEFT, RIGHT, CENTER i JUSTIFY)
- text-ident określa wcięcie pierwszego wiersza tekstu (np. 4cm)
Przykładowy styl może wyglądać następująco:
‹STYLE TYPE="text/css"›
.mojstyl {font-family: Tahoma; font-size:8pt;
color: black; font-weight: normal}
‹/STYLE›
Mając zdefiniowany styl, formatujemy za jego pomocą wybrany tekst:
‹P CLASS="mojstyl"›
Ubezwłasnowolniona konstantynopolitańczykiewiczówna.
‹/P›
Tekst "Ubezwłasnowolniona konstantynopolitańczykiewiczówna" pojawi się czcionką Tahoma o wysokości 8pt w kolorze czarnym.
Zamiast nazw styli można wpisać znacznik, przy użyciu którego dany styl ma zaistnieć, np. aby usunąć podkreślenie znacznika ‹A› można wpisać:
‹STYLE TYPE="text/css"›
A {text-decoration:none}
‹/STYLE›
Polecam książki
Oto książki, z których dowiesz się więcej na temat opisywanych powyżej zagadnień.
|
| |
|
|
|
|
