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

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

Author: Klimek Filip

0 downloads 3 Views

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

2 Organizacja Prowadzący: dr inż. Jarosław Koźlak C2, 3 piętro, p 306 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

3 Podstawowa bibliografiaLaura 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)

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

5 Ogólna prezentacja WWW 2Realizacja: 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)

6 Ogólna prezentacja WWW 3Sieć 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

7 Ogólna prezentacja WWW 4Sieć 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

8 URL (ang. uniform resource locator)URL - uniwersalny identyfikator zasobów adres określający lokalizację porcji informacji w Internecie Części składowe URL: 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

9 URL (ang. uniform resource locator) 2Nazwa 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)

10 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

11 HTML 2 HTML - język opisu struktury stronyma 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)

12 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 : text 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

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

14 Rozwój języka HTML HTML 2.0 - podstawowy zestaw znacznikówHTML 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

15 Struktura dokumentu Przykład dokumentu: Dokument

To jest dokument HTML

Podstawowe znaczniki struktury dokumentu , < /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 …. tekst strony …..

16 Znaczniki struktury dokumentu, oznacza nagłówek strony w obrębie nagłówka może się znaleźć tylko kilka specjalnych znaczników jak tytuł strony, To jest tytuł … , - pomiędzy tymi znacznikami znajduje się tekst strony , 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 znajduje się zawsze w obrębie nagłówka strony strona może posiadać tylko jeden tytuł 17 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> 18 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 na początku każdego akapitu (m.in. ułatwia dosuwanie tekstu dolewej/prawej strony i jego centrowanie) Tekst w akapicie 19 - łamanie linii nie wstawia dodatkowych linii, tylko zapewnia rozpoczęcie wyświetlania tekstu od nowej linii 20 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 21 Polskie znaki obowiązujący w Internecie standard kodowania polskich znaków ISO (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 należy w jej nagłówku (między znacznikami <HEAD>…. </HEAD> umieścić) <HEAD> <meta http-equiv="content-type" content="text/html ; charset=iso "> </HEAD> 22 Rodzaje list: listy numerowane listy wypunktowanelisty 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) 23 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 24 Przykład listy Trylogia Sienkiewicza składa się z następujących części <UL> <LI> Ogniem i mieczem <LI> Potop <LI> Pan Wołodyjowski </UL> 25 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> 26 Atrybuty list numerowanychznaczniki 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ąć 27 Atrybuty list numerowanych: Atrybut TYPEAtrybut 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 28 Atrybuty list numerowanych: Atrybut STARTAtrybut 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 29 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> 30 Listy definicji Każdy element listy jest złożony z: pojęcia DefinicjiZnaczniki: <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> 31 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> 32 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> 33 Listy zagnieżdzone jest możliwe zagnieżdzanie list w HTMLaby 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> 35 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" rel="nofollow"> 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" rel="nofollow"> Strona AGH </A> 36 Połączenia i odnośniki wewnątrz stronyrealizacja 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" rel="nofollow"> 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" rel="nofollow"> Przejście do części czwartej </A> 37 Style logiczne - znaczniki… - oznacza, że tekst powinien być wyróżniony (zwykle jest to kursywa) … - tekst powinien być wyróżniony mocniej niż przez (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 38 Style fizyczne Style fizyczne - ściśle określają zmianę wyglądu danego fragmentu tekstu … - pogrubienie … - kursywa <TT>… </TT> - czcionka maszynowa (znaki o jednakowej szerokości) <BIG>…</BIG> - czcionka większa od reszty tekstu … - czcionka mniejsza od reszty tekstu … -indeks dolny … - indeks górny 39 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 40 Adresy/cytaty Adresy:<ADDRESS rel="nofollow">.. </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 41 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 ) 42 Kody znaków używanych w definicjach znaczników 43 Położenie tekstu na stronieKontrola 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 44 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 45 Przykład tabeli 1 wiersz, 3 komórki Nagłówek <TABLE> <TR> <TH< Nagłówek </TH> <TD> Dane </TD> <TD> Dane </TD> </TR> </TABLE> 46 Tabele – dodatkowe możliwościAtrybut 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> 47 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 48 Znaczniki i atrybuty do przygotowania tabeli 1 49 Znaczniki i atrybuty do przygotowania tabeli 2 50 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]> 51 Zmiana kolorów i grafika w tleatrybuty 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"> 52 Ramki Ramki umożliwiają m.in: umieszczanie tabel w tabelachdodawanie 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 53 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> 54 Ramki 3 <HTML> <HEAD> <TITLE> Ramki

55 Kaskadowe arkusze stylówKaskadowe 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

56 Przeglądarki obsługujące kaskadowe arkusze stylówarkusze 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

57 Kaskadowe arkusze stylów 2wszystkie osadzone arkusze stylów mają tę samą postać definicji i są umieszczane w sekcji stron WWW Ogólna postać arkusza CSS: 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

58 Przykład definicji styluPrzykład definicji: tekst w tej sekcji będzie pisany odpowiednią czcionką 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

59 Łączenie deklaracji stylu z dokumentem HTMLOpis stylów w oddzielnym dokumencie. Zastosowanie znacznika Strona używająca style ... 2. Włączenie deklaracji stylów do dokumenty HTML. Znacznik

60 Łączenie deklaracji stylu z dokumentem HTML 23. Umieszczenie poleceń stylów w kodzie dokumentu HTML, bezpośrednio po znaczniku, którego dotyczą Przykłady:

Nagłówek pierwszego stopnia

To jest tekst akapitu

61 Kaskadowe arkusze stylów. Klasyz 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 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:

Ten nagłówek JEST niebieski

62 Kaskadowe arkusze stylów. Klasy 2klasa 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ć: { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/423628/1/images/62/Kaskadowe+arkusze+styl%C3%B3w.+Klasy+2.jpg", "name": "Kaskadowe arkusze stylów. Klasy 2", "description": "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ć:

64 Kaskadowe arkusze stylówKaskadowe 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 H % 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

65 CSS: ID Zastosowanie ID zmienia właściwości znacznika, któremu jest przypisany odpowiedni ID Przykład: #zielony { color: green;} Wywołanie ID:

Ten tekst będzie zielony

66 CSS. Przykład: Modyfikacja wyglądu odnośnikówKaskadowe 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;

67 CSS:Właściwości czcionek

68 CSS:Właściwości tekstu

69 CSS:Kolor i tło dokumentu

70 CSS:Marginesy

71 CSS:Listy

72 Przydatne adresy WWW - strona główna W3C - kurs tworzenia stron WWW (w języku polskim) - 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

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

Recommend Documents

To jest dokument HTML

Nagłówek pierwszego stopnia

Ten nagłówek JEST niebieski