HTML - SKiBD

Podstawy technik sieciowych
SKiBD
Wykład 4
Informacje wstępne
Koncepcja sieci WWW
■
Sieć WWW (world wide web)
została zaprojektowana w CERN
przez Tima Bernes-Lee około
1989 roku
 Prototyp graficznej
przeglądarki "Mosaic” Marc
Andreessen's
■
■
■
Sieć składa się z serwerów
udostępniających dokumenty
hipertekstowe czyli zawierające
odnośniki (links) do innych
dokumentów na tym samym, lub
na innych serwerach
Dokumenty te są wyświetlane w
przeglądarkach zainstalowanych
na komputerach klientów sieci
Połączenie jest realizowane
automatycznie dzięki tłumaczeniu
nazw serwerów na adresy IP
przez serwery DNS
3
Koncepcja Adresowania w Sieci WWW
■
URL (Universal Resource Locator)
■
Przykład
http://www.MChDelaware.com:80/Serv10/index.html
–
–
–
–
–
–
–
–
–
–
■
Protokół
Numer portu
Serwer
Ścieżka
Plik
Budowa adresu serwera
– Serwer stron www
– Serwer wejściowy organizacji
– Domena główna
■
http:
:80
//www.MChDelaware.com
/Serv10/
Index.html
Budowa adresu serwera
– www.
– MChDelaware.
– com
4
Protokół http
■
Strona Klienta
– Pobieranie informacji
– Dostarczanie informacji
– Pobieranie skróconej
informacji
■
Strona Serwera
– Domyślny dokument
– Wysyłanie statycznej
informacji
– Dynamiczne
generowanie informacji
– Przetwarzanie informacji
otrzymanej od klienta
■
Metody protokołu
– Get
– Post
– Header
■
Sewer
– Index.html
– Skrypty CGI (Common
Gateway Interface) i inne
– Interfejs do bazy danych
5
Dokumenty Statyczne
■
Dane HTML
– Język opisu wyglądu i
formatowania danych tekstowy
– Przeglądarki sieciowe mają
wbudowany program
interpretujący języki HTML
– Strony HTML są podstawowym
składnikiem przesyłania
informacji w sieci
– Odnośniki (globalne lub lokalne)
pozwalają automatycznie
przełączać dokumenty (globalny
hipertekst)
■
Dane XML
– Język opisu
znaczenia danych
– HTML jest
podzbiorem XML
– Niektóre przeglądarki
umożliwiają
wyświetlanie danych
XML
6
Efekty dynamiczne (dhttp)
■
Klient
– Animowana grafika
– Style kaskadowe
CSS (Cascading
Style Sheets)
– Skrypty JavaScripts
– Flash
– Applety
– Cookies
– XML XSL XHTML
■
Serwer
– CGI
– PHP
– ASP (Active Server
Pages VisualBasic)
– Basy Danych
7
Jak to wszystko działa?
Serwer WWW
Programy
CGI
Przeglądarka
Baza Danych
SQL
Twardy dysk
8
Przeglądarki www
■
■
■
■
■
■
Internet Explorer (Windows Mac OS)
Mozilla – Firefox (UNIX, Linux, Windows, Mac OS)
Netscape Navigator (UNIX, Linux, Windows, Mac OS)
Opera (Windows, Linux)
Chrome
Inne (Gozilla, Conqueror)
Konieczność testowania
witryny w kilku przeglądarkach !
9
Obiekty graficzne
■
GIF, PNG
Możliwość stosowania przezroczystości
Mała objętość
Ograniczenie do 256 kolorów
■
JPG
16 mln kolorów
Do prezentacji zdjęć (wiele kolorów)
Zapis z kompresją stratną
Brak przezroczystości
Nie wolno przesadzać z grafiką !
10
HTML
■
■
■
■
Prostota
Małe możliwości (praktycznie ograniczone do
formatowania tekstu i grafiki)
Niewielka objętość kodu
Interpretowany poprawnie
przez wszystkie przeglądarki
11
DHTML = HTML+CSS+ skrypty
■
■
■
■
Możliwość dynamicznego formatowania elementów
Walidacja pól formularzy
Rozbudowana interakcja
z użytkownikiem
CSS w standardzie
HTML 4.0
12
XML
■
■
■
■
■
Nowy standard formatowania tekstów
Tworzenie własnych “tagów” określających sposób
pozycjonowania obiektów
„Naturalna” reprezentacja danych
Elastyczność
Łatwość wyszukiwania oraz
przetwarzania
13
Języki skryptowe
■
Javascript, VBScript, Ruby, Python
■
Możliwość oprogramowania strony www
Ograniczone możliwości
Przerzucenie obliczeń na
stronę klienta
Różna interpretacja kodu
przez różne przeglądarki
Nie ma potrzeby kompilacji
■
■
■
■
14
Perl
■
■
■
■
■
Wyrażenia regularne, tablice haszy – ogromne
możliwości przetwarzania danych
Programów nie trzeba kompilować
Prosta składnia
Wszystkie zalety języka programowania wysokiego
poziomu
Tylko jako skrypty CGI (Po stronie serwera)
15
PHP
■
■
■
■
Kod programu bezpośrednio w kodzie html
Szybkość działania zależna od prędkości serwera
Implementacja wielu
interfejsów baz danych
„Dziwna składnia”
16
C, C++
■
■
■
■
■
Tylko jako CGI po stronie serwera
Trudności w przetwarzaniu tekstów
Szybkość wykonywania
Rozbudowany kod nawet
dla prostych zadań
Konieczność kompilacji
17
Java
■
■
■
■
■
■
Język zaprojektowany do działania w środowisku przeglądarki
www
Praktycznie nieograniczone możliwości
Konieczność posiadania w systemie “środowiska maszyny
wirtualnej javy”.
Długi kod programu
Działanie po stronie serwera lub klienta
Microsoft wycofał się ze wspierania Javy promując nowy język –
C# oraz platformę .net
18
Bazy danych
■
■
■
Podstawowy środek do przechowywania i
przetwarzania dużej ilości danych
E-business, statystyka, składowanie wyników
pomiarowych itd.
Komunikacja za
pośrednictwem SQL
19
Postgres, MySQL
■
■
■
■
■
Duża szybkość i niezawodność
Darmowe
Wiele ogólnodostępnych narzędzi
Popularne w systemach
UNIX/Linux
Niewielkie wymagania
20
Oracle, MS SQL
■
■
■
■
■
■
“Poważne” zastosowania biznesowe
Duże koszty licencji i użytkownia
Możliwość przetwarzania ogromnych ilości danych
Rozbudowana administracja
serwerem bazy
Stosunkowo wolne
„Zasobożerność”
21
Inne technologie
■
Flash, Shockwave
Konieczne specjalistyczne programy komercyjne
Znakomity do efektownych prezentacji
Trudności we wprowadzaniu zmian
Prawie niemożliwe programowanie
■
RealPlayer
Do przesyłania strumieni
danych video, audio
22
Rzeczy, które warto wiedzieć...
■
■
■
■
■
HTML nie jest językiem programowania
Języki skryptowe mają mniejsze możliwości ale działają zwykle
szybciej
Dwie skrajności rozwoju Internetu – maksimum efektów, lub
maksimum „suchej” treści
Niekomercyjne bazy danych niewiele
ustępują „dużym” systemom
Rozwój technologii i ustalanie
standardów – W3C
23
Tworzenie dokumentów w HTML
Tworzenie dokumentu HTML
■
■
■
■
Dokument HTML jest zwykłym plikiem tekstowym, w
którym znajdują się polecenia HTML.
Dokument taki można utworzyć za pomocą
najprostszego edytora tekstów, ręcznie dodając
znaczniki
Wiele specjalizowanych edytorów, które wydatnie
ułatwiają konstruowanie dokumentu, wspomagając
wprowadzanie poleceń.
Osobiście polecam używanie edytorów tekstowych, a
nie graficznych - lepsza kontrola nad tworzonym
dokumentem
25
Programy w środowisku Windows







Notatnik, Notatnik+
HomeSite, - jeden z najlepszych edytorów w tym
środowisku
Pajączek
HotDog - silny, ale dość trudny w obsłudze
WebEdit - jeden z najlepszych programów w tym
środowisku
WebPager Xpress - polski edytor, nieco słabszy od
wyżej wymienionych, ale darmowy
ezHTML - polski edytor, także darmowy
26
Dla początkujących
■
■
■
Można się posłużyć graficznymi edytorami,
Dla początkujących poleca się szczególnie darmowe
edytory dołączone do przeglądarek Internet Explorer i
Mozilla (Firefox).
Do nauki języka HTML, warto się posługiwać
edytorami tekstowymi
27
Dokument HTML
■
Znaczniki (tags)
– tekst pomiędzy znakami < a >
– Tekst to słowa kluczowe i
parametry
• Parametry mają wartość
przypisamą po znaku =
– Znaczniki zamykające mają znak /
po </
– Sekcje ograniczone znacznikami
otwierającym i zamykającym mogą
zawierać inne sekcje ale nie mogą
się „przecinać”
– Znaki < zapisajemy jako &lt a >
&gt
■
Przykłady
Znacznik formatu dokumentu
<HTML>
Gruba linia pozioma
<HR WIDTH=40>
Początek i koniec akapitu
<P>tekst akapitu</P>
Zawieranie się sekcji
<P>tekst <B>pogrubiony</B> i zwykły</P>
Błąd
<P>tekst <B>pogrubiony</P> ERROR</B>
28
Znaczniki HTML
■
■
■
Polecenie (znacznik, tag) HTML jest specjalnym
ciągiem znaków objętym nawiasami ostrymi.
– Gdybyśmy na przykład chcieli zaznaczyć jakiś
fragment tekstu jako tytuł, moglibyśmy objąć go
poleceniem <H1>treść tytułu</H1>.
Wielkość liter jest obojętna - znaczniki wpisane
małymi i wielkimi literami są interpretowane w ten sam
sposób.
Staranniej wykonane edytory HTML pozwalają nawet
zdefiniować, czy polecenia HTML będą wpisywane
małymi, czy wielkimi literami.
29
Szkielet dokumentu HTML
■
■
■
■
■
Wszystkie polecenia powinny się znaleźć w pewnych
standardowych ramach.
Zostało przyjęte, że dokument HTML zawiera szkielet,
który stanowi osnowę dla wszystkich innych poleceń.
Cały dokument powinien być objęty parą znaczników
<HTML> </HTML>.
Między nimi powinna zaś się znaleźć para znaczników
<HEAD> </HEAD>, która stanowi ramy dla informacji
nagłówkowych.
Pozostałe informacje powinny być objęte z kolei
znacznikami <BODY> </BODY>.
30
Przykład „bezpiecznego” szkieletu
HTML>
<HEAD>informacje nagłówkowe</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>
31
Jak wyświetlić dokument
■
Lokalny Dokument
HTML możemy
obejrzeć w
przeglądarce
– Albo Drag&Drop
– Albo wpisując ścieżkę w
pole adresowe
■
Na serwerze
– Dowiedzieć się gdzie jest
katalog z dokumentami www
– Apache na linux-ie
• /usr/local/httpd/htdoc
• Samba na wsdg-linux1
wyświetla powyższą
ścieżkę jako
wsdglinux1www
– Nazwać dokument
index.html i wstawić do
katalogu z dokumentami
www n.p. Do wsdglinux1www
– W przeglądarce wpisać http
://serwer lub www.serwer
• http://wsdg-linux1
32
Tytuł strony
■
Między znacznikami <HEAD> i </HEAD> powinno się
znaleźć polecenie <TITLE> </TITLE>.
<HEAD>
<TITLE>Tytuł strony</TITLE>
</HEAD>
■
TITLE nie oznacza wcale tytułu na stronie. Zawarta
między tymi znacznikami treść ukaże się w pasku
tytułowym przeglądarki:
<HEAD>
<TITLE>Kurs języka HTML - poradnik webmastera: HTML
dla bardzo początkujących</TITLE>
</HEAD>
33
Informacja o stronie kodowej dokumentu
■
■
■
Zalecane jest strony kodowej ISO-8859-2 (czyli ISO
Latin 2).
Jest to międzynarodowy standard, a "przy okazji"
także Polska Norma.
Należy sporządzać dokument w tym standardzie i
zarazem opatrywać go informacją typu META. Jest
ona umieszczana w ramach znaczników HEAD i
wygląda następująco:
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
34
Standardowa osnowa
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
<TITLE>Tytuł strony</TITLE>
</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>
35
Polskie znaki w edytorach
■
■
Czołowe polskie edytory HTML nie wymagają już
stosowania odrębnych klawiatur i czcionek
ekranowych, gdyż same automatycznie konwertują
polskie znaki do wybranej przez nas strony kodowej.
Edytory produkcji zachodniej (ISO-8859-2)
– Czcionki TrueType na polskiej stronie "ogonkowej", pod
adresem http://www.agh.edu.pl/ogonki/pl.html.
– Windows darmowe czcionki ekranowe PolskieStrony i
PolskieStrony2, dostępne w serwisie Polska Strona
Windowsowa
– HomeSite 2.5 (lub nowszy) należy zalecać używanie
czcionki PolskieStrony2. Należy również używać nakładki
klawiaturowej dla ISO
■
Problem konwersji już istniejących dokumentów
można załatwić za pomocą specjalnych programów
36
Kodowanie - podsumowanie (ISO-8859-2)
•
•
•
Zaopatrz się w dowolną czcionkę ekranową w
standardzie ISO-8859-2, za pomocą której będziesz
wyświetlać tekst dokumentu w edytorze HTML
Używaj polskiej klawiatury w standardzie ISO-8859-2
Wstaw deklarację strony kodowej ISO-8859-2 w
nagłówku dokumentu
37
Kodowanie - podsumowanie
Windows-1250
•
•
•
Użyj dowolnej czcionki ekranowej w tym standardzie
(jest ich sporo w Windows)
Używaj standardowej klawiatury Windows
Wstaw deklarację strony kodowej Windows-1250 w
nagłówku dokumentu
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
38
Kolor tła dokumentu
■
Gdy w dokumencie znajduje się para znaczników
<BODY> i </BODY>, możemy zdefiniować kolor tła
dokumentu:
<BODY BGCOLOR="kolor">
■
przy czym "kolor" może być podany imiennie (np. red,
green, black, white) lub za pomocą wartości
heksadecymalnych tak jak w przypadku koloru
czcionki - #FF0000, #008000, #000000, #FFFFFF.
Sugeruje się używanie wartości heksadecymalnych,
jako bardziej uniwersalnych
39
Tytuły
■
■
■
■
W dokumentach często wprowadzamy tytuły.
Służy do tego polecenie <Hn> </Hn>.
Znak H oznacza header, natomiast cyfra n to stopień
tytułu (mamy ich sześć).
Polecenie wprowadzające tytuł stopnia pierwszego
składa się ze znacznika otwierającego <H1> i
zamykającego </H1>. Ten drugi zawiera dodatkowo
ukośnik (ang. slash).
Wprowadzamy je za pomocą poleceń H1, H2 itd.
40
Akapit i wiersz
■
■
Rozdzielając w edytorze akapity za pomocą klawisza
Enter, przeglądarka zignoruje znaki końca wierszy i
akapitów i wyświetli jednolity blok tekstu.
Aby naprawdę rozdzielić akapity, należy się posłużyć
poleceniem <P> (P = paragraph), które wstawi
interlinie między poszczególne fragmenty tekstu.
Zaleca się także konsekwentne stosowanie znacznika
zamykającego </P>.
Przykład:
<P>To jest treść pierwszego akapitu</P>
<P>To jest treść drugiego akapitu</P>
41
Przełamanie tekstu
■
■
Chcemy przełamać tekst, nie wprowadzając przy tym
znaku końca akapitu.
Pojedyncze polecenie <BR> przenosi tekst o jeden
wiersz w dół, nie wprowadzając dodatkowej interlinii.
To jest pierwszy wiersz<BR>
To jest drugi wiersz<BR>
To jest trzeci wiersz<BR>
To jest czwarty wiersz<BR>
■
Ponadto polecenie <BR> ma jeszcze jedną zaletę.
Napisanie kilku kolejnych <BR> pozwala poszerzyć
pionowy odstęp między elementami.
42
Pozioma linia
■
■
Poziomą linie, wstawiamy za pomocą polecenia <HR>
(ang. horizontal rule).
Pozwala ono wyświetlić w dokumencie poziomą linię,
na szerokość całej strony, rozdzielając nią logiczne
fragmenty tekstu
43
Wykazy
■
■
Aby utworzyć szkielet wykazu wypunktowanego,
należy użyć polecenia <UL> </UL> (ang. unordered
list).
W ramach szkieletu znajdą się poszczególne punkty
wykazu, które wprowadzamy za pomocą polecenia
<LI>
44
Przykład wykazu
<P>Dlaczego zajmuję się UFO?</P>
<UL>
<LI>Uważam, że UFO istnieje</LI>
<LI>Uważam, że pozaziemskie cywilizacje mogą nam pomóc</LI>
<LI>Uważam, że należy się przygotować na spotkanie</LI>
</UL>
W efekcie uzyskamy:
Dlaczego zajmuję się UFO?
• Uważam, że UFO istnieje
• Uważam, że pozaziemskie cywilizacje mogą nam pomóc
• Uważam, że należy się przygotować na spotkanie
45
Wykazy numerowane
■
■
Gdy chcemy utworzyć wykaz numerowany, wówczas
zamiast <UL> i </UL> możemy zastosować <OL> i </
OL> (ang. ordered list).
Uzyskamy wówczas listę numerowaną za pomocą
liczebników arabskich
1. Uważam, że pozaziemskie cywilizacje mogą nam pomóc
2. Uważam, że należy się przygotować na spotkanie
46
Atrybuty czcionki
■
■
■
Atrybuty czcionki - pogrubienie (bold), pochylenie
(italic) i podkreślenie (underlined).
Przykłady
<B>To jest tekst pogrubiony (bold)</B>
<I>To jest tekst pochylony (italic, kursywa)</I>
<U>To jest tekst podkreślony (underlined)</U>
Choć wszystkie przeglądarki akceptują atrybuty
czcionki, warto zauważyć, że np. Netscape Navigator
2 i 3 ignoruje podkreślenie, natomiast Netscape
Communicator 4 już je widzi.
47
Odsyłacze
■
■
■
Czytelnik dokumentu będzie za pomocą kliknięć myszką na
odsyłaczach przenosić się do różnych miejsc w Internecie,
skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do
Francji.
Z jego punktu widzenia jest zupełnie obojętne, gdzie strony się
znajdują. Dla niego ważny jest łatwy dostęp do informacji.
Odsyłacz do innej strony jest tworzony za pomocą polecenia:
<A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</
A>
Przykładowy adres mógłby wyglądać następująco:
<A HREF="http://www.agh.edu.pl">Strona główna AGH </A>
48
Odsyłacze uwagi
■
■
■
Ukośnik (slash) na końcu adresu wymusza wczytanie
strony domyślnej, zazwyczaj o nazwie index.html (lub
index.htm - zależy to od typu serwera WWW).
Zaleca się nadawanie stronie głównej serwisu nazwy
index.htm lub index.html. Jest to powszechnie
przyjęta praktyka w Internecie. W ostatnich latach
stosuje się także default.htm lub default.html
Na ekranie przeglądarki jest wyświetlany tekst, który
znajduje się między znacznikami <A HREF="... "> i </
A>. Jest on domyślnie wyświetlany na niebiesko z
podkreśleniem (możemy to jednak zmienić).
49
Adres poczty jako odsyłacz
■
Stosujemy tutaj na przykład następujące polecenie:
<A HREF="mailto:[email protected]">Imię i
nazwisko</A>
■
Na przykład adres prowadzącego wykład można
zakodować w postaci:
<A HREF="mailto:[email protected]
.">Prwadzący wykład z SKiBD</A>
50
Wielkość i kolor czcionki
■
■
■
■
W dokumentach HTML stosuje się nieco inną definicję
wielkości czcionki niż przyjęta w edytorach tekstów
Podstawowa czcionka ma wielkość 3 jednostek
(zazwyczaj czcionka 10-12-punktowa).
Przeglądarki pozwalają na ogół zdefiniować, jaka
wartość punktowa odpowiada czcionce o wielkości 3.
W dokumencie możemy stosować czcionkę o
wielkości od 1 do 7. Im większa wartość, tym większa
czcionka w przeglądarce.
51
Polecenie określające wielkość czcionki
■
Nadanie wartości absolutnej
<FONT SIZE="x">Tekst objęty definicją</FONT>
■
x = 1...7
Nadanie wartości względnej
<FONT SIZE="+x">Tekst objęty definicją </FONT>
<FONT SIZE="-x">Tekst objęty definicją </FONT>
x = 1...6
Gdy jakiś fragment tekstu obejmiemy definicją <FONT
SIZE=+2> </FONT>, będzie on miał wielkość 5, gdyż
dodajemy 2 jednostki do wielkości podstawowej. Gdy
użyjemy polecenia <FONT SIZE=-1> </FONT>, tekst będzie
miał wielkość 2. W ten sposób możemy manipulować
wysokością czcionki w tekście.
52
Polecenie określające kolor czcionki
■
Składnia polecenia
<FONT COLOR="kolor">Tekst objęty poleceniem</FONT>
■
■
Kolory możemy definiować w postaci tradycyjnej, a
więc za pomocą wartości szesnastkowych (np. kolor
biały ma wartość #FFFFFF, a czarny #000000), albo
za pomocą ich nazw.
Wszystkie popularne przeglądarki akceptują wartości
heksadecymalne (w formacie RRGGBB, gdzie RR składowa czerwona, GG - składowa zielona, BB składowa niebieska).
53
Grafika na stronie
■
■
■
Strony WWW zawierają zwykle grafikę, która bardzo
urozmaica ich czytanie - pod warunkiem oczywiście,
że korzystamy z graficznego systemu operacyjnego.
Na stronach WWW są stosowane dwa podstawowe
formaty bitowych plików graficznych - GIF i JPG
(JPEG) - które są z założenia skompresowane
(często nawet dziesięciokrotnie w stosunku do innych
popularnych formatów.
Grafikę możemy wprowadzić za pomocą polecenia:
<IMG SRC="nazwa_pliku">, np..:
<IMG SRC="../gambler/gambler.gif">
54
Wstawienie grafiki do dokumentu
■
■
■
Podstawowa konstrukcja ma następującą postać:
<IMG SRC="plik_graficzny">
Wielkość obrazka możemy regulować za pomocą
parametrów HEIGHT (wysokość) i WIDTH
(szerokość).
Na przykład: <IMG SRC="tucows.gif" HEIGHT=150>
<IMG SRC="tucows.gif" WIDTH=200>
<IMG SRC="tucows.gif" WIDTH=200
HEIGHT=50>
Ramka <IMG SRC="tucows.gif" WIDTH=120
HEIGHT=160 BORDER=5> (border w pikselach)
55
Wstawienie grafiki do dokumentu
■
■
Parametry VSPACE (vertical space) i HSPACE
(horizontal space) pozwalają ustalić odległość
obrazka, w pikselach, od oblewającego go tekstu:
<IMG SRC="tucows.gif" HSPACE=50>
<IMG SRC="tucows.gif" VSPACE=50>
Odrębny, specjalny zespół parametrów, ALIGN=abc,
steruje pozycją obrazka w stosunku do oblewającego
go akapitu
<IMG SRC="obrazek" ALIGN=abc>
wartości parametru: right, left, top, bottom, middle
56
Wstawienie grafiki do dokumentu
■
■
■
Jeśli chcemy, aby osoby korzystające z Internetu w
trybie tekstowym wiedziały, co zawiera obrazek,
możemy wstawić dodatkowo parametr
ALT="informacja". Napis ten zostanie wyświetlony na
ekranie przeglądarki tekstowej. Informacja jest ważna
wówczas, gdy grafika zawiera odsyłacze do innych
stron.
Gdybyśmy chcieli umieścić obrazek na środku
wiersza, musimy objąć go znacznikami <CENTER></
CENTER
Obrazek można oczywiście umieścić w komórce
tabeli, wstawiając między znacznikami komórki
<TD></TD> definicję obrazka, co można wykorzystać
do tworzenia efektownie wyglądających obramowań
57
Tablice
■
■
Ogólne ramy tabeli <TABLE> </TABLE>
Definicja tabeli musi być umieszczona między tymi dwoma
znacznikami, które stanowią jej delimitery. W ich ramach są
umieszczane definicje rzędów, definicje komórek w rzędach,
konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i
kolumn.
Wiersz tabeli <TR> </TR>
Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek
z danymi. W ramach <TABLE> </TABLE> można umieścić wiele
kolejnych definicji wierszy <TR> </TR>
<TABLE>
<TR> </TR>
<TR> </TR>
<TR> </TR>
</TABLE>
58
Tablice
■
Komórka w wierszu <TD> </TD>
Komórka zawiera konkretne dane. Między jej
znacznikami można umieszczać tekst i grafikę.
Konkretne komórki są umieszczane między
znacznikami wybranego rzędu, na przykład:
<TABLE>
<TR> <TD> </TD><TD> </TD><TD> </TD></TR>
<TR> <TD> </TD><TD> </TD><TD> </TD></TR>
<TR> <TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
59
Obramowanie tablic
■
■
Aby tabela zawierała naokoło obramowanie,
wystarczy rozszerzyć definicję o parametr BORDER.
Jeśli nie podamy szerokości obramowania,
przyjmowana jest jej domyślna wartość.
<TABLE BORDER> </TABLE>
Gdybyśmy podali szerokość obramowania w
pikselach, zostanie ona odpowiednio zinterpretowana
przez przeglądarkę
<TABLE BORDER=10> </TABLE>
60
Obramowanie i marginesy komórek
■
■
Obramowanie komórek
Aby komórki (nie tabela!) zawierały inne obramowanie
niż domyślne, możemy użyć parametru
CELLSPACING (de facto jest to odległość między
komórkami).
<TABLE BORDER CELLSPACING=8> </TABLE>
Marginesy dla komórek
Jeśli uznamy, że odstęp między zawartością komórki
a jej obramowaniem jest zbyt mały, możemy użyć
parametru CELLPADDING (domyślnie wynosi on 1).
<TABLE BORDER CELLSPACING=5
CELLPADDING=15> </TABLE>
61
Szerokość i wysokość tablicy
■
■
■
Dotychczas tworzone tablice, przybierały domyślną
szerokość. Parametr WIDTH daje nam możliwość
zdefiniowania szerokości tabeli i jest "silniejszy" od
innych parametrów, które wpływają na
<TABLE BORDER WIDTH=600> </TABLE>
Zamiast wartości absolutnej w pikselach możemy
także użyć wartości procentowej, np. pół szerokości
ekranu przeglądarki.
<TABLE BORDER WIDTH=50%> </TABLE>
Możemy zdefiniować wysokość tablicy (nie wchodzi w
skład HTML 4.0), podając parametr HEIGHT,
wyrażony w pikselach lub procencie widocznej strony.
W poniższym przykładzie zostały użyte parametry
<TABLE BORDER WIDTH="50%" HEIGHT="30%">
62
Szerokość komórki
■
■
Parametr WIDTH możemy wykorzystać także de
zdefiniowania szerokości komórki, umieszczając go w
ramach definicji wybranej komórki, np.
<TD WIDTH=100> </TD>.
Można też podać wartość procentową, która odnosi
się do szerokości komórki w ramach tabeli, a nie
całego ekranu (akceptują ją Navigator i Internet
Explorer, ale HTML 4.0 zaleca unikania tego
polecenia).
63
Wyrównanie tablicy
■
Parametr ALIGN pozwala wyrównać tabelę w
stosunku do marginesów strony i oblewającego ją
tekstu, na przykład:
<TABLE BORDER ALIGN=right> </TABLE>
<TABLE BORDER=10 ALIGN=left> </TABLE>
64
Poziome wyrównanie danych w komórkach
Parametr ALIGN możemy także wykorzystać do
poziomego wyrównania zawartości komórki środkowania, justowania do lewej i justowania do
prawej. Używamy wówczas odpowiednio konstrukcji
<TD ALIGN=center></TD>
<TD ALIGN=left> </TD>
<TD ALIGN=right> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy
samodzielnie zdefiniujemy szerokość komórki za
pomocą WIDTH.
65
Pionowe wyrównanie danych w komórkach
Parametr VALIGN (vertical) służy do pionowego
wyrównania zawartości komórki - do górnego brzegu,
do środka i do dolnego brzegu. Używamy wówczas
odpowiednio konstrukcji:
<TD VALIGN=top> </TD>
<TD VALIGN=middle> </TD>
<TD VALIGN=bottom> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy
samodzielnie zdefiniujemy wysokość tabeli za
pomocą HEIGTH.
66
Kolor dla tablicy
■
■
■
■
Microsoft Internet Explorer i Nescape Communicator pozwalają
wykorzystać kolor tła tabeli (HTML 4.0 zaleca rezygnowanie z
tego polecenia na rzecz stylów). W tym celu należy w definicji
tabeli dodać parametr <BGCOLOR=barwa>, np. <TABLE
BORDER HEIGHT=200 BGCOLOR=yellow>
Kolory - Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray,
Lime, Fuchsia, Green, Purple, Silver , Yellow, Aqua
Możemy również "pomalować" poszczególne komórki,
wstawiając definicję koloru w ramach definicji komórek, np. TD
BGCOLOR="barwa" - HTML 4.0 zaleca rezygnowanie z tego
polecenia na rzecz stylów.
Jako tła tabeli (czy wręcz poszczególnych komórek) można
także użyć gotowego obrazka, stosując polecenie (HTML 4.0 nie
przewiduje stosowania tego polecenia w tym kontekście możemy jednak stosować style):
<table background="nazwa_obrazka">
67
Obramowanie tablicy
■
■
Kolor obramowania tabeli
Internet Explorer i Navigator interpretują także kolor
obramowania tabeli. W definicji tabeli należy wstawić
parametr <BORDERCOLOR=barwa>, np. <TABLE
BORDER=5 BORDERCOLOR=red>.
Odcień obramowania tabeli
Internet Explorer i Navigator pozwalają określić kolor cienia
obramowania tabeli. Możemy nadać odrębną barwę
cieniowi lewemu i górnemu oraz odrębną prawemu i
dolnemu. Na przykład:
<TABLE BORDER=5 BORDERCOLORDARK=black
BORDERCOLORLIGHT=white>
68
Cień w wierszu i komórce
■
Definicję cienia możemy nawet zastosować w wierszu
lub w pojedynczej komórce, na przykład:
<TR BORDERCOLORDARK=red
BORDERCOLORLIGHT=yellow>
<TD BORDERCOLORDARK=red
BORDERCOLORLIGHT=yellow>
69
Podpis pod tablicą
■
Tablica powinna na ogół zawierać tytuł, wyjaśniający
jej treść. Należy go umieścić zaraz za ogólną definicją
tabeli. Na przykład:
<TABLE BORDER WIDTH=300>
<CAPTION ALIGN=top>Tytuł tabeli umieszczony u
góry</CAPTION>
■
Microsoft Internet Explorer pozwala dodatkowo
dosunąć podpis do lewej lub prawej strony, przy
użyciu parametru VALIGN. Na przykład:
<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=top ALIGN=left>Tytuł tabeli umieszczony u
góry</CAPTION>
70
Nagłówek wiersza i kolumny
Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej.
■ Nagłówek jest definiowany za pomocą parzystego kodu <TH> </TH>.
Tak więc, aby sporządzić tabelicę z wierszem nagłówków kolumn i
wierszem danych, należy wprowadzić np. następujący kod:
<TABLE BORDER CELLPADDING=10 WIDTH=400>
<CAPTION>Wzrost produkcji w latach 1991-1995 (w mln USD)</CAPTION>
<TR bgcolor="gray"><TH>1991</TH> <TH>1992</TH><TH>1993</TH>
<TH>1994</TH> <TH>1995</TH> </TR>
<TR
ALIGN=center><TD>1150</TD><TD>1240</TD><TD>1380</TD><TD>1
420</TD><TD>1550</TD></TR>
</TABLE>
■
71
Łączenie komórek
■
■
■
Komórki danych i nagłówków można ze sobą łączyć.
Aby komórka w danym wierszu rozciągała się na x
kolumn, należy użyć w jej definicji parametru <TD
ROWSPAN=x>.
Podobnie można łączyć komórki z nagłówkami
<TD COLSPAN=x>.
72
Zagnieżdżanie tablic
■
■
Możliwe jest zagnieżdżanie tablic w komórkach
nadrzędnej tablicy.
W tym celu należy utworzyć w zwykły sposób definicję
tabeli w ramach definicji wybranej komórki tabeli
nadrzędnej, czyli w ramach <TD> </TD>.
73
Tablice - nagłówek ciało i stopka
■
Podobnie jak cały dokument, także i tablica może mieć swoją
część nagłówkową, część główną i stopkę. Elementy te są
(teoretycznie) przydatne przy określaniu wyglądu tabeli i
wyświetlaniu tabeli:
• Wydzielenie nagłówka i stopki pozwoli wyświetlać zawsze na ekranie
zawarte w nich informacje, gdy tabela przekracza wielkością ekran.
Przewijana jest tylko główna część tabeli (dane), a informacje
nagłówka i stopki pozostają cały czas widoczne. Analogicznie,
gdybyśmy drukowali większą tabelę, która nie mieści się na jednej
stronie druku, nagłówek i stopka tabeli będą drukowane na każdej
kolejnej stronie, a zmieniać się będą oczywiście dane zawarte w
BODY. Na razie ani Internet Explorer, ani Navigator nie interpretują
w ten sposób nagłówka i stopki tabeli.
• Wydzielenie części tabeli pozwala, razem z grupami kolumn,
definiować obramowanie.
74
Przykład struktury tablicy
■
■
<TABLE WIDTH=50% BORDER=5 CELLPADDING=5>
<THEAD>To jest część nagłówkowa</THEAD>
<TBODY>
<TR>
<TD>Komórka 11</TD>
</TR>
<TR>
<TD>Komórka 21</TD>
</TR>
</TBODY>
<TFOOT>To jest stopka</TFOOT>
</TABLE>
Znaczniki zamykające są opcjonalne we wszystkich trzech
poleceniach.
75
Animacja (interpretowana jedynie przez
Microsoft Internet Explorer )
■
■
■
■
Minimalna definicja Marquee ma postać <MARQUEE>Tekst
animacji</MARQUEE>.
Dodatkowe parametry są wstawiane w ramach otwierającego
znacznika, tj. <MARQUEE parametr>
Animację można wstawiać także do komórki tabeli, między
znaczniki <TD> </TD>
Tekst może się poruszać na trzy sposoby
– BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego
brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie
zza pierwszego brzegu.
– BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od
pierwszego brzegu, dociera do drugiego i "odbija się", powracając w
kierunku pierwszego.
– BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego
brzegu, dociera do drugiego i zatrzymuje się
76
Parametry animacji
■
■
■
■
BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której
porusza się napis. Kolor można podać w postaci numerycznej
lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal,
Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green,
Purple, Silver, Yellow, Aqua.
Początkowy kierunek ruchu jest określany za pomocą parametru
DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest
kierunek w lewo.
Fizyczne wymiary drogi są wyznaczone przez parametry
HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je
wyrazić w pikselach lub procencie wysokości i szerokości
ekranu.
Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy
77
Parametry animacji
■
■
■
■
■
Parametry HSPACE=x i VSPACE=y pozwalają określić
odległość pola animacji w poziomie i/lub w pionie od
sąsiadujących elementów, np. tekstu.
Skoro możemy definiować kolor tła animacji, konieczna jest
także niekiedy zmiana koloru tekstu animacji.
Możemy również wprowadzić atrybuty tekstu - pogrubienie,
pochylenie lub podkreślenie. Odpowiednie parametry należy
wstawiać na zewnątrz definicji MARQUEE.
Jak wiemy, definicja koloru fragmentu tekstu ma postać <FONT
COLOR=kolor> Tekst </FONT>.
Uwaga: akapity nad i pod animacją należy oddzielić od
animacji znakiem końca akapitu <P> lub końca wiersza
<BR>.
78
Parametry animacji
■
■
■
■
Pola animacji można bezpośrednio ze sobą łączyć.
Parametr SCROLLAMOUNT=x pozwala określić w
pikselach skoki tekstu (ruch odbywa się skokami po x
pikseli). Przy niewielkiej wartości ruch jest płynny i
wolniejszy, przy dużych - nieco szarpany i szybszy.
Parametr SCROLLDELAY=y pozwala określić w
milisekundach odstępy czasowe między kolejnymi
skokami. 1000 = 1 sekunda.
Parametr ALIGN=abc (top, middle, bottom) pozwala
ustalić, gdzie (na jakiej wysokości pola) znajduje się
tekst sąsiadujący z animacją.
79
Pobieranie informacji - formularze
■
■
■
■
Formularz jest zawarty
pomiędzy znacznikami
<form> ...a ... </form>
Znacznik <input
name=„nasza nazwa pola”>
wyświetla wejściowe pole
tekstowe
Znacznik <input
type=„submit”> wyświetla
przycisk wysyłający do
serwera wypełnioną formę
Do „obsługi” formy potrzebny
jest skrypt na serwerze
■
■
Przykład
Kod HTML
<form>
<input name=„input test 1”><br>
<input type=„submit”>
</form>
■
■
■
Do serwera zostanie wysłane
File:///D|/path/docWithForm.htm?input+test+1
Spacja jest zastępowana przez +
80
CSS – Kaskadowe Arkusz Stylów
■







Najbardziej podstawowe cechy arkuszy stylów zestawione są
poniżej:
Nazwa CSS pochodzi od Cascading Style Sheets co oznacza
Kaskadowe Arkusze Stylów.
Style definiują to w jaki sposób pokazywana będzie zawartość
strony definiowana przy pomocy składni HTML.
Style są zapisane w Arkuszach Stylów.
Zostały dodane do specyfikacji HTML 4.0 po to aby rozwiązać
część problemów związanych z wyświetlaniem dokumentów.
Zewnętrzne arkusze Stylów pozwalają na zdecydowane
zmniejszenie ilości pracy związanej z prezentacją zawartości
tworzonej witryny.
Zewnętrzne arkusze stylów przechowywane są w plikach z
rozszerzeniem CSS popularnie nazywanych plikami css.
Style zdefiniowane kilkakrotnie (np. w różnych miejscach
projektowanej witryny) stosowane są kaskadowo w celu uzyskania
żądanego wyglądu witryny.
81
Podstawowe zalety arkuszy stylów
■
■
■
Arkusze stylów definiują w jaki sposób prezentowana
będzie zawartość opisywana przez konkretne elementy
HTML.
Zewnętrzne arkusze stylów pozwalają ponadto na
zdefiniowanie dla konkretnych elementów HTML:
– sposobu ich prezentacji oraz
– zapisaniu tym ustawień w zewnętrznym pliku.
Jeden plik definiujący sposób prezentacji zastosować
dla wielu stron HTML
– ujednolicenie sposobu prezentacji całej grupy
powiązanych se sobą stron HTML
– umożliwia błyskawiczne wprowadzanie zmian
dotyczących prezentacji wszystkich dokumentów
poprzez edycję pojedynczego pliku
82
Definiowanie arkuszy stylów
■
■
■
wewnątrz dowolnego pojedynczego elementu HTML –
pozwala na lokalną zmianę prezentacji pojedynczego
elementu w dokumencie. Nie ma wpływu na sposób
prezentacji identycznego znacznika HTML użytego w
innej części dokumentu.
w części nagłówkowej pojedynczego dokumentu HTML
(wewnątrz znacznika <head>) - ten sposób definicji
stylu odnosi się do pojedynczego dokumentu HTML.
w pliku zewnętrznym tzw. pliku CSS – ma najszerszy
zasięg i odnosi się do wszystkich dokumentów
używających dany plik .css.
83
Kolejność stosowania stylów
■
Style standardowo zdefiniowane w
przeglądarce
■
Zewnętrzne arkusze stylów
■
Style wewnętrznie zdefiniowane dla konkretnej
strony (wewnątrz znacznika <head>)
■
Style zdefiniowane wewnętrznie dla
konkretnego elementu HTML
84
Zewnętrzne arkusze stylów
■
Zewnętrzne arkusze stylów idealnie nadają się do
zdefiniowania formatowań wielu stron HTML
jednocześnie
Definicja stylu
<head>
<link rel="stylesheet" type="text/css"
href="mojestyle.css" />
</head>
Przykład zawartości pliku zewnętrznego
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
85
Wewnętrzne arkusze stylów
■
Wewnętrzne arkusze stylów powinny być używane w
przypadku gdy jeden z dokumentów HTML tworzących
witrynę w sieci Web z jakichś powodów posiada inne
formatowania w porównaniu z innymi dokumentami.
<head>
<style type="text/css">
<!-hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
86
Definicja stylu w miejscu użycia
■
Definicja stylu w miejscu użycia nie jest polecanym
rozwiązaniem. Możliwość taka istnieje jedynie po to
aby zmienić wartość pojedynczego elementu dla
którego nie „opłaca” się definiować globalnych reguł.
<p style="color: sienna;
margin-left: 20px">
This is a paragraph
</p>
87
Wybrane właściwości dostępne w arkuszach
CSS
■
■
■
■
■
■
■
■
■
■
■
Właściwości tła
Właściwości elementów tekstowych
Właściwości kroju pisma
Właściwości obramowania
Właściwości konturu
Właściwości marginesów
Właściwości dopełnienia
Właściwości list
Właściwości tabel
Właściwości rozmiarów
Właściwości pozycjonowania
88