Jarosław Koźlak KI AGH, 2003/2004 Podstawy WWW Jarosław Koźlak KI AGH, 2003/2004

Organizacja Prowadzący: dr inż. Jarosław Koźlak C2, 3 piętro, p 306 kozlak@agh.edu.pl http://galaxy.uci.agh.edu.pl/~kozlak Plan wykładu Prezentacja WWW HTML (struktura dokumentu, podstawowe tagi, polskie znaki, listy, odsyłacze, obrazki, mapy odsyłaczy, multimedia, style, rozszerszenia) Kaskadowe arkusze stylów Protokół HTTP (struktura, przykłady interakcji) CGI Formularze PHP Cookies JavaScript Serwery HTTP (najpopularniejsze realizacje, podstawowe parametry) Przeglądarki WWW XML

Podstawowa bibliografia Laura Lemay, "HTML 4", Vademecum profesjonalisty, Wydawnictwo Helion, 1998 (Macmillan Computer Publishing, 1998) Maria Sokół, "Tworzenie stron WWW. Ćwiczenia praktyczne", Helion 2000 Bartosz Czyżkowski. „Ćwiczenia z tworzenia stron WWW”, MIKOM 2001 Stephen Spainhour, Valerie Quercia, "Webmaster. Podręcznik administratora", RM,1997 (O'Reilly 1996) Rafe Colburn, "CGI", Helion 1998 (Macmillan Computer Publishing, 1998) Eugene Eric Kim, ”Programowanie CGI. Przewodnik”, LT & P, 1996 Jason Cranford Teague, "DHTML. Dynamic HTML", Helion 1999 "Professional Java Server Programming", WOX Press, 1999 Julie C. Meloni „PHP. Podręcznik tworzenia stron WWW“, Wydawnictwo MIKOM, 2001, Jerry Bradenbaugh, „JavaScript Receptury. Programowanie aplikacji sieciowych w języku JavaScript”, Helion 2001 (O’Reilly 1999)

Ogólna prezentacja WWW (World Wide Web) Co to jest WWW: "globalny, interaktywny, dynamiczny, wieloplatformowy, rozproszony, graficzny, hipertekstowy system informacyjny działający na bazie Internetu„ Hipertekstowy system informacyjny Hipertekst - umożliwia czytanie i poruszanie się po tekście lub innej informacji wizualnej w sposób nieliniowy, w sposób nieliniowy, zależny od tego, do jakich informacji użytkownik chce uzyskać dostęp w dalszej kolejności Przykłady hipertekstu: kontekstowe systemy pomocy (np. Help w Micosoft Windows)

Ogólna prezentacja WWW 2 Realizacja: występują hiperpołączenia, odwołując się do których można dostać się do innych części danego dokumentu, lub też innych dokumentów System graficzny istnieje możliwość wyświetlenia na jednej stronie tekstu i grafiki (jak również dzwięku i sekwencji wideo)

Ogólna prezentacja WWW 3 Sieć wieloplatformowa można uzyskać dostęp do WWW używając różnego rodzaju sprzętu ograniczenia spowodowane używaniem elementów charakterystycznych tylko dla danej architektury (np. plug-ins w przeglądarce, polecenia interpretowane tylko przez niektóre przeglądarki itd.) dane zlokalizowane na serwerach internetowych o różnych architekurach Sieć rozproszona informacje zlokalizowane na serwerach rozmieszczonych na całym świecie (identyfikowanych przez adres WWW) z punktu widzenia użytkownika - lokalizacja nie decyduje(generalnie) o dostępności informacji (w praktyce: przepustowość, możliwość ograniczenia dostępu do informacji tylko dla poszczególnych domen) Sieć dynamiczna dane zlokalizowane na serwerach mogą być w każdej chwili zmodyfikowane sieć podlega ciągłym zmianom

Ogólna prezentacja WWW 4 Sieć interakcyjna interakcja - wymiana informacji między użytkownikiem i serwerem WWW wybieranie połączenia i przechodzenie do innej strony możliwość komunikacji z osobami publikującymi strony i innymi odbiorcami ich (np. poprzez formularze, które strony mogą zawierać) Przeglądarki sieciowe programy, które służą do oglądania i poruszania się po stronach WWW czynności przeglądarki; uzyskuje dostęp do informacji na podstawie adresu URL obsługa protokołów (http i innych) - przeglądarki potrafią odczytywać nie tylko WWW (protokół HTTP), ale takze gopher, ftp, mailto, usenet formatowanie i wyświetlanie dokumentów HTML, oraz innych (grafika, dzwięk, wideo) najpopularniejsze przeglądarki: Netscape, Micosoft Internet Explorer, Lynx Serwery WWW służą do publikowanai dokumentów w sieci WWW odpowiada na żądanie przeglądarki i wysyła jej odpowiednie informacje

URL (ang. uniform resource locator) URL - uniwersalny identyfikator zasobów adres określający lokalizację porcji informacji w Internecie Części składowe URL: http://www.agh.edu.pl/info.html protokół | nazwa serwera | ścieżka dostępu i nazwa pliku Protokół - metoda dostępu do strony, określa, jak przeglądarka pobiera plik z sieci przykłady protokołów http ftp gopher

URL (ang. uniform resource locator) 2 Nazwa serwera - identyfikuje system w sieci Internet,na którym są zlokalizowane informacje numer portu - może występować w nazwie serwera, informuje, że połączenie powinno zostać utworzone przy użyciu portu o podanym numerze - innym niż domyślny port dla danego protokołu Katalog i nazwa pliku - określa położenie pliku na serwerze (może być rzeczywistą nazwą pliku, albo określać w inny sposób położenie danych w systemie)

HTML (ang. Hyper Text Markup Language) HTML powstał w oparciu o SGML (ang. Standard Generalized Markup Language), który jest rozbudowanym językiem do tworzenia dokumentów SGML język opisu struktury strony, a nie jej konkretnych elementów - podstawowa różnica w porównaniu z edytorami WYSIWIG (ang. What You See Is What You Get), tę właściwość ma również HTML

HTML 2 HTML - język opisu struktury strony ma zdefiniowany zestaw stylów, które są używane w dokumentach: nagłówki, akapity, listy, tabele, pewne elementy formatowania znaków (pogrubienia, tekst pochyły)

Znaczniki w HTML pisanie w HTML obejmuje: napisanie tekstu dodanie do tekstu odpowiednich znaczników, które określają różne elementy strony i wpływają na jej sposób prezentacji w przeglądarce Znaczniki: postać większości znaczników : <NazwaZnacznika> text </NazwaZnacznika> znacznik początkowy znacznik końcowy znaczniki formatują zagnieżdzone między nimi partie tekstu różne przeglądarki interpretują zbiory znaczników, które mogą się w pewnym stopniu różnić od siebie

przeglądarki WWW ignorują atrybuty, których znaczenia nie rozumieją specjalne elementy znaczników, które zawierają dodatkow opcje lub informacj o znacznikach przeglądarki WWW ignorują atrybuty, których znaczenia nie rozumieją

Rozwój języka HTML HTML 2.0 - podstawowy zestaw znaczników HTML 3.2 (1996) - dodano możliwość wyświetlania ramek, tła dokumentu, rozszerzoną obsługę formularzy, nowe opcje formatowania akapitów, kontrolę czcionek HTML 4.0 (lipiec 1997) - dodano m.in. kaskadowe arkusze stylów, możliwość określenia bezwzględnej pozycji obiektu na stronie, ramki i skrypty po stronie klienta

Struktura dokumentu Przykład dokumentu: <HTML> <HEAD> <TITLE > Dokument </TITLE> </HEAD> <BODY> <H2> To jest dokument HTML </H2> </BODY> </HTML> Podstawowe znaczniki struktury dokumentu <HTML>, < /HTML> znacznik określający, że zawartość danego pliku jest kodem w HTML-u cała zawartość pliku powinna znajdować się pomiędzy początkowym i końcowym znacznikiem <HTML> …. tekst strony …..

Znaczniki struktury dokumentu <HEAD>, </HEAD> oznacza nagłówek strony w obrębie nagłówka może się znaleźć tylko kilka specjalnych znaczników jak tytuł strony, <HTML><HEAD> <TITLE> To jest tytuł </TITLE> </HEAD> … </HTML> <BODY>, </BODY> - pomiędzy tymi znacznikami znajduje się tekst strony <TITLE>, </TITLE> nadaje stronie tytuł z tytułu korzystają przeglądarki i programy katalogujące strony WWW w wielu przeglądarkach pojawia się na paski tytułowego okna programu tytuł określa temat strony i opisuje stronę na listach stron i wykazach ostatnio odwiedzanych/ulubionych miejsc znacznik <TITLE> znajduje się zawsze w obrębie nagłówka strony strona może posiadać tylko jeden tytuł

Nagłówki służą do podziału tekstu na części (rola podobna jak rozdziały w książce) zdefiniowane jest 6 poziomów nagłówka, które różnią się: wielkością atrybutami czcionki (pogrubienie, podkreślenie, wielkie litery) narzędzia tworzące indeksy do przeszukiwania zasobów sieci korzystają z nagłówków, by oznaczyć najważniejsze elementy strony Postać nagłówka : <Hn> To jest nagłówek </Hn> gdzie n - poziom nagłówka Przykłady: <H1> To jest nagłówek </H1> <H2> To jest rozdział 1 </H2> <H3> To jest podrozdział 1.1 </H3> <H3> To jest podrozdział 1.2 </H3>

służą do określenie początku i końca akapitu Akapity służą do określenie początku i końca akapitu znacznik końca akapitu - opcjonalny warto używać znacznika <P> na początku każdego akapitu (m.in. ułatwia dosuwanie tekstu dolewej/prawej strony i jego centrowanie) <P> Tekst w akapicie </P>

<BR> - łamanie linii nie wstawia dodatkowych linii, tylko zapewnia rozpoczęcie wyświetlania tekstu od nowej linii

Linie poziome <HR> - wstawia na stronie poziomą linię atrybuty znacznika <HR> SIZE - określa grubość linii (w pikselach), standardowa wartość (minimalna) 2 WIDTH - określa długość linii w poziomie (w pikselach lub w procentach aktualnej szerokości ekranu) ALIGN - określa położenie linii jeśli nie wypełnia ona całej szerokości ekranu, możliwe wartości: ALIGN=LEFT, ALIGN=RIGHT, ALIGN=CENTER

Polskie znaki obowiązujący w Internecie standard kodowania polskich znaków ISO-8859-2 (zwane też ISO Latin-2) nie należy kodować stron w innych formatach (takich jak CP 1250) aby przeglądarka wiedziała, że dana strona jest napisana w standardzie ISO-8859-2 należy w jej nagłówku (między znacznikami <HEAD>…. </HEAD> umieścić) <HEAD> <meta http-equiv="content-type" content="text/html ; charset=iso-8859-2"> </HEAD>

Rodzaje list: listy numerowane listy wypunktowane listy definicji (każda pozycja jest złożona z pojęcia i definicji, pojęcie jest wyróżnione) listy menu listy katalogów (listy małych elementów, które mogą być porządkowane poziomo lub pionowo)

Listy: Zasada budowy Charakterystyczne własności znaczników list: cała lista jest objęta przez znaczniki początkowe i końcowe, odpowiednie dla danego rodzaju listy (np. <UL> i </UL>, <MENU> i </MENU>) każdy element listy posiada swój własny znacznik : <DT> i <DD> dla listy pojęć i <LI> dla pozostałych list

Przykład listy <P> Trylogia Sienkiewicza składa się z następujących części </P> <UL> <LI> Ogniem i mieczem <LI> Potop <LI> Pan Wołodyjowski </UL>

Listy numerowane są objęte znacznikami <OL> … </OL> (OL - lista uporządkowana, ang. Ordered List) każdy element listy rozpoczyna się od znacznika <LI> każdy element listy posiada swój numer przeglądarka nadaje odpowiednie numery elementom listy <OL> <LI> element 1 <LI> element 2 <LI> element 3 </OL>

Atrybuty list numerowanych znaczniki list numerowanych istnieją atrybuty, które pozwalają sposobem wyświetlania listy przez przeglądarkę: można wybrać sposób numeracji można określić liczbę, od której numeracja ma się rozpocząć

Atrybuty list numerowanych: Atrybut TYPE Atrybut TYPE, pozwala wybrać jeden z poniższych schematów numerowania: "1" - numeracja w formie (1,2,3 …) - przyjmowana domyślnie "a" - numeracja w formie (a,b,c …) "A" - numeracja w formie (A,B,C…) "i" - numeracja w formie (i,ii,iii,iv…) "I" - numeracja w formie (I, II, III, IV…) Schemat numeracji jest zapisywany w znaczniku <OL> np. <OL TYPE="a"> - lista jest wyświtlona w formie (a,b,c…) Atrybut TYPE może być także używany w znaczniku <LI> -- zmiana w schemacie numeracji ma miejsce poczynając od elementu listy, w którym znacznik został użyty

Atrybuty list numerowanych: Atrybut START Atrybut START określa, od jakiej liczby lub litery nalezy rozpocząć numercję np. <OL TYPE="a" START=3> - pierwszym numerem w liście numerowanej alfabetycznie będzie c

Listy wypunktowane w liście wypunktowanej elementy są oznaczane kropkami, lub innymi znakami są objęte znacznikami <UL> … </UL> (OL - lista uporządkowana, ang. Ordered List) każdy element listy rozpoczyna się od znacznika <LI> Atrybut TYPE pozwala na zmiane formatu listy w niektórych przeglądarkach: "disc" - kółko (wypełnione) lub kropka, wartość przyjmowana standardowo "square" - mały kwadrat "circle" - puste kółko Można zmienić symbol wypunktowania poczynając od dowolneho elementu listy, używając atrybuty TYPE w znaczniku <LI>

Listy definicji Każdy element listy jest złożony z: pojęcia Definicji Znaczniki: <DT> -- oznacza pojęcie <DD> -- oznacza definicję oba powyższe znaczniki są pojedyncze i występują zazwyczaj parami <DL>… </DL> - znaczniki obejmujące całą listę Przykład: <DL> <DT> Pojęcie 1< DD> Definicja pojęcia 1 <DT> Pojęcie 2 <DD> Definicja pojęcia 2 <DT> Pojęcie 3 <DD> Definicja pojęcia 3 </DL>

Listy menu Menu listy lub krótkie akapity nie poprzedzone żadnymi znakami ani numerami listy menu zawierają się między znacznikami <MENU> … </MENU> <MENU> <LI> Idź w lewo <LI> Idź w prawo <LI> Idź w górę <LI> Idź w dół </MENU>

Listy katalogów stworzone dla elementów jeszcze krótszych, niż listy menu powinny być przedstawiane przez przeglądarki w postaci kolumn - jak np. lista zawartości katalogu w systemie DOS czy Unix listy katalogów znajdują się w obrębie znaczników <DIR> … </DIR> każdy element listy jest poprzedzony znacznikiem <LI>

Listy zagnieżdzone jest możliwe zagnieżdzanie list w HTML aby zagnieździć listy wystarczy całą listę jako element innej listy wiele przeglądarek odróżnia listy nadrzędne i zagnieżdzone i formatuje je w różny sposób (inny symbol wypunktowania, lub inny schemat numeracji w liście zagnieżdzonej ) Przykład: <OL> <LI> WWW <LI> HTML <UL> <LI> Co to jest HTML <LI> Struktura dokumentu <LI> Nagłówki <LI> Paragrafy <LI> Komentarze </UL> <LI> Linki </OL>

składnia komentarza: <!-- To jest komentarz --> Komentarze można wstawiać do tekstu HTML-owego komentarze (do opisu elementów strony lub jej statusu) składnia komentarza: <!-- To jest komentarz --> nie należy wstawiać w komentarzach żadnych innych znaczników HTML, gdyż może to zmylić przeglądarkę nie należy używać w komentarzach znaków: < > --

Połączenia Do utworzenia hiperpołączenia są potrzebne: nazwa pliku (lub jego URL), do którego będzie prowadziło połączenie tekst, który będzie wyróżniony przez przeglądarkę i po wybraniu którego nastąpi realizacja połączenia Składnia znacznika do tworzenia hiperpołączeń służy znacznik <A>… </A> atrybut HREF (ang. Hypertext REFerence) - odnośnik hipertekstowy tekst pomiędzy znacznikami - wyróżniony, reprezentuje na stronie hiperpołączenie Przykład: Powrót do <A HREF="../menu.html"> Menu Głównego </A> Połączenia do innych stron na dysku lokalnym ścieżki względne (preferowane) ścieżki bezwzględne (problem z przenośnością stron, które je wykorzystują) Połączenia do innych stron w Internecie: <A HREF="http://www.agh.edu.pl"> Strona AGH </A>

Połączenia i odnośniki wewnątrz strony realizacja połączenia do konkretnego miejsca strony służą do tego umieszczane w kodzie strony odnośniki - miejsca w dokumencie HTML, do których można tworzyć połączenia odnośniki nie są widoczne na stronie połączenie tworzone na stronie wyjściowej musi zawierać nie tylko nazwę pliku, ale także nazwę odnośnika Znacznik <A> jako odnośnik: <A NAME="Czesc4"> Część czwarta </A> "Część czwarta" - tekst, który ukaże się na górze ekranu, po przejściu do odnośnika Realizacja połączenia do odnośnika. po nazwie pliku jest wstawiany znak # i nazwa odnośnika <A HREF="duzastrona.html#Czesc4"> Przejście do części czwartej </A>

Style logiczne - znaczniki <EM>… </EM> - oznacza, że tekst powinien być wyróżniony (zwykle jest to kursywa) <STRONG>… </STRONG> - tekst powinien być wyróżniony mocniej niż przez <EM> (zwykle jest to pogrubienie) <CODE>… </CODE> - tekst powinien być wyświetlony czcionką o stałej szerokości (np. Courier) <SAMP>… </SAMP> - oznacza tekst przykładowy, wyśiwtlany podobnie jak <CODE> <KBD>… </KBD> - teskt, który powien być wpisany przez użytkownika z klawiatury <VAR> … </VAR> - wskazuje nazwę obiektu (zmiennej), który powinien być zastąpiony przez inną wartość <DFN> … </DFN> - znacznik definicji <CITE>… </CITE> - służy do oznaczania krótkich cytatów

Style fizyczne Style fizyczne - ściśle określają zmianę wyglądu danego fragmentu tekstu <B>… </B> - pogrubienie <I>… </I> - kursywa <TT>… </TT> - czcionka maszynowa (znaki o jednakowej szerokości) <BIG>…</BIG> - czcionka większa od reszty tekstu <SMALL>…</SMALL> - czcionka mniejsza od reszty tekstu <SUB>…</SUB> -indeks dolny <SUP>…</SUP> - indeks górny

Tekst preformatowany <PRE>…</PRE> - tekst nie jest formatowany przez przeglądarkę (jak zazwyczaj, gdy np. wszystkie dodatkowe znaki spacji, tabulacji, czy nowej linii są ignorowane), ale każda spacja znajdująca się w oznaczonym tekście jest wyświetlana

Adresy/cytaty Adresy: <ADDRESS>.. </ADDRESS> - służy do umieszczenia "podpisu" na stronie WWW Cytaty <BLOCKQUOTE>… </BLOCKQUOTE> zaznaczanie cytatów, dotyczy dłuższych cytatów, które nie są zagnieżdzane w akapitach

Znaki specjalne Rodzaje kodów znaków: nazwane - zaczynają się od znaku &, a kończą znakiem ; pomiędzy powyższymi znakami występuje nazwa znaku uwaga: w przeciwieństwie do pozostałych znaczników HTML nazwy te są zależne od wielkości liter numerowane - zaczynają się od znaku &, a kończą znakiem ; zamiast nazwy zawierają znak # i liczbę, która odpowiada numerowi znaku w zbiorze ISO-Latin-1 (ISO-8859-1)

Kody znaków używanych w definicjach znaczników

Położenie tekstu na stronie Kontrola pojedynczych elementów aby ułożyć nagłówek lub akapit używa się atrybutu ALIGN ALIGN może przyjmować 3 wartości: LEFT, RIGHT i CENTERED Kontrola położenia grup elementów stosowany znacznik <DIV>… </DIV>, który pozwala oznaczyć dowolny fragment kodu HTML wraz ze znacznikiem używa się atrybutu ALIGN, który wpływa na cały kod wewnątrz <DIV> jeśli we fragmencie kodu wewnątrz znaczników <DIV> znajdzie się znacznik z atrybutem ALIGN, to dotyczy on danego znacznika

Tablice Elementy tablicy: podpis - informuje o zawartości tabeli (opcjonalny) nagłówki tabeli - etykiety wierszy i/lub kolumn dane tabeli - wartości wpisane w tabele komórki tabeli - najmniejsze elementy tabeli, mogą zawierać dane lub nagłówek Znacznik <TABLE>… </TABLE> służy do tworzenia tabeli pozwala stworzyć podpis tabeli i samą tabelę atrybut BORDER - służy do obramowania tabeli Znacznik <TR>… </TR> tworzy wiersz tabeli Znacznik <TH>… </TH> tworzy komórki nagłówka Znacznik <TD>…</TD> tworzy komórki danych

Przykład tabeli 1 wiersz, 3 komórki Nagłówek <TABLE> <TR> <TH< Nagłówek </TH> <TD> Dane </TD> <TD> Dane </TD> </TR> </TABLE>

Tabele – dodatkowe możliwości Atrybut BORDER znacznika TABLE – umożliwia otaczanie tablicy obramowaniem. Znacznik <CAPTION> - wstawiany między tagami <TABLE> i </TABLE>, przed definicjami wierszy - umożliwia podpisanie tabeli i nadanie jej tytułu, jest opcjonalny opcjonalny atrybut ALIGN znacznika <CAPTION> określa sposób wyrównywania tekstu podpisu. dostępne wartości: TOP (domyślna wartość, podpis nad tablicą) i BOTTOM (podpis pod tablicą) Podpisy w Internet Explorer: atrybut VALIGN – umożliwia umieszczenie podpisu nad lub pod tabelą atrybut ALIGN – przyjmuje wartości LEFT, RIGH i CENTER, służy do wyrównywania tekstów w poziomie np. <CAPTION ALIGN=BOTTOM> Podpis </CAPTION>

Wyrównywanie tabel i zawartości komórek. Domyślnie tabela jest wyrównywana do lewej krawędzi strony Atrybut ALIGN umożliwia wyrównywanie tabel względem dowolnego marginesu oraz otaczanie ich tekstem, jak w przypadku obrazów Rezygnacja z otaczania tekstem – podobnie jak dla obrazów – znacznik złamania wiersza z atrybutem CLEAR Wyrównywanie zawartości komórek Wyrównanie zawartości komórki w poziomie Atrybut ALIGN przyjmujący wartości LEFT, CENTER i RIGHT Wyrównanie zawartości komórki w pionie Atrybut VALIGN przyjmujący wartości TOP – dosunięcie do górnego marginesu, BOTTOM – dosunięcie do dolnego marginesu, MIDDLE – wycentrowanie względem obu marginesów, BASELINE – jak TOP, ale zawartość jest wyrównywana względem pierwszego wiersza każdej komórki

Znaczniki i atrybuty do przygotowania tabeli 1

Znaczniki i atrybuty do przygotowania tabeli 2

Obrazki znacznik <IMG> służy do umieszczenia obrazka na stronie parametr SRC - określa nazwę pliku lub URL wstawianego obrazka parametr ALIGN - określa wzajemne położenie tekstu i obrazu parametr ALT - umożliwia wstawienie tekstu w miejsce obrazku w przeglądarkach, które nie mogą wyświetlać grafiki (np. Lynx) Przykład: <IMG SRC="image.gif"> <IMG SRC="image.gif" ALT=[obrazek image.gif]>

Zmiana kolorów i grafika w tle atrybuty BGCOLOR, TEXT, LINK, VLINK znacznika <BODY> umożliwiają zmiany kolorów tła, tekstu i odsyłaczy atrybut BACKGROUND znacznika <BODY> umożliwia wykorzystanie obrazków jako tła dokumentu WWW Przykład: <BODY BACKGROUND="tlo.gif">

Ramki Ramki umożliwiają m.in: umieszczanie tabel w tabelach dodawanie nagłówków, stopek i pasków z połączaniami do stron na jednym ekranie są wyświetlane informacje z kilku osobnych dokumentów HTML powiązanych ze sobą Definiowanie ramek: podstawowy z dokumentów HTML - dokument zawierający definicje ramek znacznik <FRAMESET> - zastępuje znacznik <BODY> w dokumentach złożonych z ramek znacznik <FRAME > - służy do stowarzyszenia dokumentów HTML z poszczególnymi ramkami

Ramki 2 Przykład układ 3 poziomych ramek o jednakowej wysokości <FRAMESET ROWS="*,*,*"> <FRAME SRC="doc1.html"> <FRAME SRC="doc2.html"> <FRAME SRC="doc3.html"> </FRAMESET>

Ramki 3 <HTML> <HEAD> <TITLE> Ramki </TITLE> <FRAMESET COLS=”30%, 70%”> <FRAMESET ROWS-”250,*”> <FRAME SRC=”./menu_po_lewej.html”> <FRAME SRC=”./dolny_kawalek.html”> </FRAMESET> </FRAME SRC=”./tresc_po_prawej”> <NOFRAMES> Tekst wyświetlany w przeglądarce nie obsługującej ramek </NOFRAMES> </HTML>

Kaskadowe arkusze stylów Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) :jest to zalecana przez W3C metoda stosowania stylów arkusze stylów dają twórcy strony ścisłą kontrolę nad jej wyglądem i pozwalają oddzielić zawartość od elementów konstrukcyjnych (co ułatwia późniejsze zmiany) przed wprowadzeniem arkuszy, wygląd strony był uzależniony od przeglądarki, która decydowała o sposobie rozmieszczenia zawartości dokumentu kaskadowy - można łączyć informacje o stylach z wielu źródeł - styl ogólny z pliku zewnętrznego może zostać połączony ze stylami specyficznymi dla danego elementu, zdefiniowanymi za pomocą atrybutu STYLE tego elementu definicje stylu zawarte w arkuszu obowiązują kaskadowo - te zawarte w ostatnich arkuszach dominują nad definicjami wcześniejszymi arkusze CSS są obsługiwane przez przeglądarki : Microsoft Internet Explorer wersja 4 i późniejsze (IE3 obsługuje pewne elementy CSS) Netscape Navigator, wersja 4 i późniejsze

Przeglądarki obsługujące kaskadowe arkusze stylów arkusze CSS są obsługiwane przez przeglądarki : Microsoft Internet Explorer wersja 4 i późniejsze (IE3 obsługuje pewne elementy CSS) Netscape Navigator, wersja 4 i późniejsze

Kaskadowe arkusze stylów 2 wszystkie osadzone arkusze stylów mają tę samą postać definicji i są umieszczane w sekcji <HEAD> stron WWW Ogólna postać arkusza CSS: <STYLE TYPE="text/css"> <!-- ZNACZNIK {właściwość: wartość;} … --> </STYLE> lista znaczników HTML z właściwościami arkusza, które je definiują właściwości muszą być umieszczone w nawiasach klamrowych ({}) oraz oddzielone średnikami (;) przeglądarki, które nie potrafią obsługiwać arkuszy stylów potraktują kod jak komentarz

Przykład definicji stylu Przykład definicji: tekst w tej sekcji będzie pisany odpowiednią czcionką <STYLE TYPE="text/css"> <!-- BODY {font-family: Verdana, Arial, Helvetica;} --> </STYLE> Definicja kroju pisma, który zostanie zastosowany do tekstu strony w sekcji BODY, tekst pisany czcionką Verdana, jeśli nie zostanie ona znaleziona – wówczas Arial lub Helvetica. Powyższa definicja nie obejmuje tekstu występującego w komórkach tabeli

Łączenie deklaracji stylu z dokumentem HTML Opis stylów w oddzielnym dokumencie. Zastosowanie znacznika <LINK> <HTML> <HEAD> <META http-equiv=”Content-type” content=”text/html; charset=iso-8859-2”> <LINK rel=”stylesheet” type=”text/css” href=”./style.css”> <TITLE > Strona używająca style </TITLE> </HEAD> <BODY> ... </BODY> </HTML> 2. Włączenie deklaracji stylów do dokumenty HTML. Znacznik <STYLE> <STYLE type=”text/css”> P {color: blue} </STYLE>

Łączenie deklaracji stylu z dokumentem HTML 2 3. Umieszczenie poleceń stylów w kodzie dokumentu HTML, bezpośrednio po znaczniku, którego dotyczą Przykłady: <H1 STYLE=”font-family: Arial, sans-serif; font-size: 25px; color: red; text-align: center”> Nagłówek pierwszego stopnia </H1> <P STYLE=”font-family: ’Bookman Old Style’, serif; color: navy> To jest tekst akapitu </P1>

Kaskadowe arkusze stylów. Klasy z definicji arkusza stylów wynika, że np. przypisanie nagłówkowi H2 koloru niebieskiego sprawi, że wszystkie nagłówki tego rzędu będą tej barwy jeśli chce się tylko kilku z nich nadać ten kolor -> można to uzyskąc przy pomocy klas <STYLE TYPE="text/css"> <!-- H1.blue {color: blue;} --> </STYLE> po wstawieniu powyższego arkusza stylów do dokumentu HTML, nagłówki H1 nie staną się niebieskie - trzeba wskazać nagłówek, który ma być wyświetlony w tym kolorze, poprzez użycie atrybutu CLASS: <H1 CLASS="blue"> Ten nagłówek JEST niebieski </H1>

Kaskadowe arkusze stylów. Klasy 2 klasa blue jest stowarzyszona tylko ze znacznikiem H1, nie będzie działać, ze znacznikiem H2, jeśli ma się ona odnosić do dowolnego znacznika, należy napisać: <STYLE TYPE="text/css"> <!-- .blue {color: blue;} </STYLE>

Kaskadowe arkusze stylów. Przykładowa definicja arkusza stylów <STYLE TYPE="text/css"> <!-- BODY {font-family: Times New Roman, Serif; color: black;} H1 {font-family: Verdana, Arial, Sans-serif; font-size: 140%; color:maroon;} H2 {font-family: Verdana, Arial, Sans-serif; font-size: 110%;color:maroon;} TABLE {border:3px solid black; padding: 2px} TD.head {background-color: #FFFCCC; color: black;} .verdana {font-family:Verdana, Arial, Sans-serif;} --> </STYLE>

Kaskadowe arkusze stylów Kaskadowe arkusze stylów. Przykładowa definicja arkusza stylów - objaśnienie W tym arkuszu: Podstawowy krój pisma: Times New Roman (drugorzędna czcionka: standardowa szeryfowa) Zdefiniowano kolor: czarny Nagłówki H1 i H2 są pisane czcionką Verdana (lub Arial, ewentualnie standardową czcionką bezszeryfową) w kolorze kasztanowym Rozmiar czcionek nagłówka H1 wynosi 140% rozmiaru tekstu podstawowego, a w nagłówka H2 - 110% rozmiaru tekstu podstawowego Tabele umieszczone na stronie mają obramowanie o szerokości 3 pikseli, a odległość między obramowaniem i tekstem wynosi 2 piksele Komórki nagłówka tabeli mają tło w kolorze jasnożółtym (#FFFFCC) oraz tekst w kolorze czarnym Zdefiniowano klasę verdana (bez znacznika), a więc można ją zastosować wszędzie, gdzie ma się pojawić czcionka o takim kroju Całą definicję umieszczono w obrębie znacznika komentarza, aby była ignorowana przez przeglądarki, które nie obsługują arkuszy CSS

CSS: ID Zastosowanie ID zmienia właściwości znacznika, któremu jest przypisany odpowiedni ID Przykład: #zielony { color: green;} Wywołanie ID: <p ID=”zielony”> Ten tekst będzie zielony </p>

CSS. Przykład: Modyfikacja wyglądu odnośników Kaskadowe arkusze stylów posiadają zdefiniowane standardowe klasy – pseudoklasy Pseudoklasy odpowiedzialne za określanie wyglądu odnośników: A:LINK, A:VISITED i A:HOVER A:link /*standardowy odnośnik*/ { font-size: 12pt; color: navy; } A:link /*odnośnik odwiedzony*/ color: blue; A:link /*odnośnik po najechaniu na niego myszką*/ color: red;

CSS:Właściwości czcionek

CSS:Właściwości tekstu

CSS:Kolor i tło dokumentu

CSS:Marginesy

CSS:Listy

Przydatne adresy WWW www.w3.org - strona główna W3C http://www.ournet.pl/kurshtml/ - kurs tworzenia stron WWW (w języku polskim) www.agh.edu.pl/ogonki - informacje dotyczące stosowania polskich znaków na stronach WWW i zbiór programów służących do konwersji między różnymi formatami zapisu polskich znaków