Podstawy technik sieciowych

Wykład 4

SKiBD

Informacje wstępne

3

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

4

Koncepcja Adresowania w Sieci WWW■ URL (Universal Resource Locator)

– Protokół– Numer portu– Serwer– Ścieżka– Plik

■ Budowa adresu serwera– Serwer stron www– Serwer wejściowy organizacji– Domena główna

■ Przykładhttp://www.MChDelaware.com:80/Serv10/index.html

– http:– :80– //www.MChDelaware.com– /Serv10/– Index.html

■ Budowa adresu serwera– www.– MChDelaware.– com

5

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

6

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

7

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

8

Jak to wszystko działa?

Baza Danych

Serwer WWW

Twardy dysk

Programy CGI

Przeglądarka

SQL

9

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 !

10

■ GIF, PNGMożliwość stosowania przezroczystościMała objętośćOgraniczenie do 256 kolorów■ JPG16 mln kolorówDo prezentacji zdjęć (wiele kolorów)Zapis z kompresją stratnąBrak przezroczystości

Obiekty graficzne

Nie wolno przesadzać z grafiką !

11

HTML

■ Prostota■ Małe możliwości (praktycznie ograniczone do

formatowania tekstu i grafiki)■ Niewielka objętość kodu■ Interpretowany poprawnie

przez wszystkie przeglądarki

12

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

13

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

14

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

15

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)

16

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”

17

C, C++

■ Tylko jako CGI po stronie serwera■ Trudności w przetwarzaniu tekstów■ Szybkość wykonywania■ Rozbudowany kod nawet

dla prostych zadań■ Konieczność kompilacji

18

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

19

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

20

Postgres, MySQL

■ Duża szybkość i niezawodność■ Darmowe■ Wiele ogólnodostępnych narzędzi■ Popularne w systemach

UNIX/Linux■ Niewielkie wymagania

21

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ść”

22

Inne technologie

■ Flash, ShockwaveKonieczne specjalistyczne programy komercyjneZnakomity do efektownych prezentacjiTrudności we wprowadzaniu zmianPrawie niemożliwe programowanie

■ RealPlayerDo przesyłania strumieni danych video, audio

23

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

Tworzenie dokumentów w HTML

25

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

26

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

27

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

28

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ładyZnacznik 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>

29

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.

30

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>.

31

Przykład „bezpiecznego” szkieletu

HTML><HEAD>informacje nagłówkowe</HEAD><BODY>

właściwa treść (ciało) dokumentu</BODY></HTML>

32

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

33

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>

34

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">

35

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>

36

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

37

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

38

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">

39

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

40

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.

41

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>

42

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.

43

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

44

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>

45

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

46

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

47

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.

48

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>

49

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ć).

50

Adres poczty jako odsyłacz

■ Stosujemy tutaj na przykład następujące polecenie:<A HREF="mailto:autor@jego.adres">Imię i

nazwisko</A>

■ Na przykład adres prowadzącego wykład można zakodować w postaci:<A HREF="mailto:kurowski@agh.edu.pl

.">Prwadzący wykład z SKiBD</A>

51

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.

52

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.

53

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).

54

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">

55

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)

56

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

57

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ń

58

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>

59

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>

60

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>

61

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>

62

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%">

63

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).

64

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>

65

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.

66

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.

67

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">

68

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>

69

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>

70

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>

71

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>1420</TD><TD>1550</TD></TR>

</TABLE>

72

Łą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>.

73

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>.

74

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.

75

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.

76

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ę

77

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

78

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>.

79

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ą.

80

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=To+co+wpisaliśmy■ Spacja jest zastępowana przez +

81

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.

82

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

83

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.

84

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

85

Zewnętrzne arkusze stylów

■ Zewnętrzne arkusze stylów idealnie nadają się do zdefiniowania formatowań wielu stron HTML jednocześnie

<head><link rel="stylesheet" type="text/css"href="mojestyle.css" /></head>

hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}

Definicja stylu

Przykład zawartości pliku zewnętrznego

86

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>

87

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>

88

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