World Wide Web. Materiały szkoleniowe opracowane przez: Centrum Szkoleń Informatycznych VEDIUS

Transkrypt

1 Materiały szkoleniowe opracowane przez: World Wide Web Centrum Szkoleń Informatycznych VEDIUS

2 Spis treści Wybierz blok tematyczny Wprowadzenie Style CSS HTML Grafika na www XHTML Formularze Projektowanie strony Koniec 2

3

4 Od czego by tu zacząć... Kluczowe pojęcia Informacja w sieci Podstawy języka HTML Edytor HTML Struktura strony WWW Podstawowe polecenia języka HTML Hiperłącza Tworzenie tabel Formularze Ramki Tworzenie stylu CSS Tryb WYSIWYG 4

5 Co dalej... Zaprojektowanie i zbudowanie prostej strony Przygotowanie grafiki na stronę Publikowanie strony WWW w internecie Podstawy języka PHP Podstawy JavaScript Egzamin Webstarter 5

6 Jakie języki poznamy... HTML XHTML CSS JavaScript JAVA PHP 6

7 Internet (łac. inter między, ang. net sieć, dosłownie międzysieć) 7

8 Trochę historii 1. Początki Internetu wiążą się z powstaniem internetu ARPANET i sięgają końca lat 60. XX wieku, gdy amerykańska firma RAND Corporation prowadziła badania studyjne nad możliwościami dowodzenia i łączności w warunkach wojny nuklearnej. 8

9 Troche historii 1989: Fizyk Tim Berners-Lee przedstawił projekt prezentacji informacji przy użyciu hypertext. 1990: pierwsza strona pod adresem: : naukowcy z CERN-u opracowali standard WWW; 20 grudnia Polska zostaje przyłączona do Internetu 9

10 Troche historii 1993: luty - powstaje pierwsza przeglądarka WWW umożliwiająca oglądanie graficznych stron - Mosaic (dostępna dla PC i Apple Macintosh). 1994: kwiecień - powstaje portal Yahoo!. Premiera przeglądarki Netscape Navigator. 1995: Powstaje pierwszy polski portal: Wirtualna Polska, 23 sierpnia 1995 prezentacja nowej przeglądarki internetowej na bazie kodu Mosaica - Internet Explorer. 10

11 Czym właściwie jest www? World Wide Web - globalny, interaktywny, dynamiczny, wieloplatformowy, rozproszony, graficzny, hipertekstowy system informacyjny, działający na bazie Internetu. 11

12 Internet a www Internet i World Wide Web (WWW) nie są synonimami. Internet to sieć komputerowa wiele połączonych ze sobą komputerów. WWW jest jednym z dóbr dostępnych przy pomocy Internetu. Innymi bardzo popularnymi są poczta elektroniczna i wymiana plików w sieciach P2P. WWW jest zbiorem dokumentów i innych zasobów połączonych hiperłączami i URL-ami. 12

13 HIPERTEXT Hipertekst - umożliwia czytanie i poruszanie się po tekście lub innym rodzaju informacji wizualnej w sposób nieliniowy, zależny od tego, czego chcesz się dowiedzieć w dalszej kolejności. 13

14 Hipertekstowy System Informacyjny Pomoc 1. Temat 1 2. Temat 2 3. Temat 3 Pomoc do tematu 2 1. Podtemat 1 2. Podtemat 2 3. Podtemat 3 Pomoc do podtematu 3 1. Szczegóły tematu 3 2. Wiecej szczegółów 3. Zobacz też 14

15 Hipertekstowy System Informacyjny 15

16 www WWW jest systemem graficznym i łatwym w nawigacji WWW jest siecią wieloplatformową WWW jest siecią rozproszoną Każda witryna, każda strona, każda najmniejsza nawet porcja informacji ma swój unikalny adres. Adres ten zwany jest w języku angielskim Uniform Resource Locator (co można przetłumaczyć na uniwersalny identyfikator zasobów), w skrócie URL. Kiedy ktoś mówi, abyś zajrzał pod adres podaje właśnie URL. WWW jest siecią dynamiczną 16

17 Przeglądarki sieciowe Mozilla Firefox Netscape Opera Internet Explorer Safari 17

18 Serwer WWW Serwer WWW to program działający na komputerze w sieci Internet, który odpowiada na żądania przeglądarki i wysyła do niej odpowiednie pliki. Jest on niezbędny do publikowania dokumentów w sieci. 18

19 Grunt to organizacja zapamiętanie różnic pomiędzy serwerem WWW, witryną WWW, stroną WWW i stroną główną, wybieranie informacji, które chciałbyś umieścić w Internecie, wyznaczenie celu, któremu witryna ma służyć. podzielenie zawartości na główne tematy, organizację ogólnej struktury stron i ich tematów. 19

20 Anatomia witryn WWW Witryna WWW zbiór składający się z jednej lub kilku stron WWW (The Web Site). Serwer WWW komputer podłączony do Internetu lub intranetu, na którym przechowywana jest jedna lub kilka witryn WWW. Strona WWW (Page) pojedynczy element witryny, zapisany na dysku w formie pliku. Strona główna wejściowa strona witryny, która może zawierać połączenia do innych stron tej samej witryny. 20

21 Do czego właściwie chcesz wykorzystać WWW? Informacje osobiste możesz tworzyć strony, opisujące wszystkie sprawy związane z Twoją osobą, które mogłyby okazać się interesujące dla innych: zainteresowania, życiorys, zdjęcia, osiągnięcia. Hobby i zainteresowania strona WWW może zawierać informacje na konkretny temat, może być to hobby lub inna rzecz leżąca w kręgu Twoich zainteresowań, na przykład muzyka, Star Trek, motocykle, kultowe filmy, grzyby halucynogenne, antyczne kałamarze lub terminy najbliższych koncertów jazzowych w okolicy. Publikacje gazety, magazyny ilustrowane i inne media publikacyjne bardzo dobrze sprawdzają się w sieci WWW, gdzie nawet zyskują przewagę nad swoimi drukowanymi odpowiednikami; mogą być łatwiej i szybciej aktualizowane. 21

22 A może do... Witryny firm na stronie WWW możesz umieścić informacje o tym, czym firma się zajmuje, gdzie znajduje się jej siedziba, oferty pracy, wyniki finansowe, informacje marketingowe, prezentacje produktów i dane osób, z którymi należy się kontaktować w różnych sprawach. Dokumentacja elektroniczna pojęcie dokumentacji elektronicznej może odnosić się do wszystkiego, od krótkich przewodników do pełnej, szczegółowej dokumentacji, interakcyjnych przewodników czy też modułów szkoleniowych. Wszystko, co opisuje jakąś czynność (zmiana oleju w samochodzie, przygotowanie omletu, malowanie krajobrazów, nauka języka HTML) może być traktowane jako dokumentacja elektroniczna. Katalogi towarów jeżeli firma oferuje towary na sprzedaż, nie ma lepszego i szybszego sposobu na powiadomienie klientów o cenach i oferowanych produktach niż lista, dostępna w sieci WWW. Przy każdej zmianie cen, wystarczy korekta plików i publikowane informacje stają się aktualne. 22

23 A może jednak do... Wirtualne sklepy WWW może być wykorzystana do prowadzenia sprzedaży. W tego typu witrynach znajdują się koszyki, do których użytkownicy mogą wrzucać towary w trakcie przeglądania katalogu. Na koniec podają tylko numer karty kredytowej oraz informację o miejscu dostawy towaru i zamówienie jest już gotowe. Sondaże opinii publicznej i głosowania interakcyjność i formularze w sieci WWW pozwalają na zbieranie opinii czytelników na każdy temat, mogą to być sondaże, sugestie na temat zawartości stron, produktów itp. Edukacja interakcyjność i niski koszt przekazywania informacji w sieci WWW decydują o tym, że jest ona bardzo atrakcyjnym nośnikiem informacji w procesie edukacji na odległość. Wiele uniwersytetów o wiekowej tradycji, jak również mnóstwo nowo powstałych szkół internetowych oferuje obecnie różnorakie formy kształcenia na odległość za pośrednictwem WWW. Wszystko, co tylko zdołasz wymyślić hipertekstowa fikcja, wirtualne zabawy, archiwa, warsztaty artystyczne... dosłownie wszystko. 23

24 Podziel treść na główne tematy JULIAN TUWIM DZIECIOM 1. Biografia i twórczość Juliana Tuwima 2.Najważniejsze dzieła, Nagrody i wyróżnienia oraz Miejsca w Łodzi związane z Tuwimem 3. Podobizny poety 4. Kilka wierszy 5. oraz kilka cytatów. 24

25 Inny przyklad Strona firmowa 1. O firmie a) Histroria b) Czasy obecne c) Czym sie zajmujemy 2. Oferta 3. Nasz cel 4. Kontakt a. Dane kontaktowe b. Mapka dojazdu 25

26 26

27 Pierwsza strona w HTML-u <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Mój pierwszy dokument</title> </HEAD> <BODY> <H1>To jest dokument HTML</H1> </BODY> </HTML> 27

28 HTML Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu, no i oczywiście dobre chęci. 28

29 (X)HTML (X)HTML (Extensible) Hypertext Markup Language (Rozszerzalny) Hipertekstowy Język Oznaczania 29

30 Polskie znaki ą ć ę ł ń ó ś ź ż Ą Ć Ę Ł Ń Ó Ś Ź Ż 30

31 TRYB WYSIWYG Programy do tworzenia stron WWW MS FrontPage Dreamweaver NVU 31

32 Ramy dokumentu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta name="description" content="tu wpisz opis zawartości strony" /> <meta name="keywords" content="tu wpisz wyrazy kluczowe rozdzielone przecinkami /> <title>tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html> 32

33 Zwykły tekst Zwykły tekst... Normalny tekst... Normalny tekst... Zwykły tekst...normalny tekst... Normalny tekst... 33

34 Znaczniki Poza zwykłym tekstem, na stronę możesz wprowadzić znaczniki (tzw. tagi). Znacznik jest to specjalny tekst, umieszczony w nawiasach ostrych, np.: <p>. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Znacznik nie jest widoczny przy wyświetlaniu strony. 34

35 Znaki specjalne Ponieważ znaki: "<" (znak mniejszości) oraz ">" (znak większości) są zarezerwowane dla znaczników, nie powinny się one pojawić w normalnej treści strony. Jeżeli musimy ich użyć, należy wpisywać zamiast nich odpowiednio: < oraz >. Ponadto znak "&" (ampersand - angielskie "and" - Shift+7) należy zastępować przez: & 35

36 Znaczniki Otwarty znacznik musi zostać zamknięty. Np. <b> ma znacznik zamykający </b> Błednie zapisany bedzie znacznik <b> tu jest tekst wytłuszczony <\b> 36

37 XHTML UWAGA! W języku XHTML wszystkie znaczniki muszą być pisane obowiązkowo małymi literami. Dlatego zalecane jest już od początku uczyć się właśnie tej zasady! Oraz wszystkie znaczniki powinny mieć swoje odpowiedniki zamykające. 37

38 Koniec linii <br /> - enter w języku HTML Znacznik <br /> w języku HTML nie ma znacznika zamykającego (to jest właśnie jeden z nielicznych wyjątków)! <meta /> <img /> 38

39 Akapit podstawowe formatowanie tekstu p>tu wpisz treść akapitu Akapit w pewnych warunkach nazywany jest paragrafem Następujące po sobie akapity, są rozdzielone linijką przerwy Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w akapitach 39

40 Podstawowe formatowanie tekstu Wyrównanie tekstu do lewej strony (domyślnie) <p align="left">treść akapitu</p> lub po prostu <p>treść akapitu</p> Wyrównanie tekstu do prawej <p align="right">treść akapitu</p> Wyśrodkowanie tekstu <p align="center">treść akapitu</p> Justowanie tekstu (wyrównanie do obu marginesów jednocześnie) <p align="justify">treść akapitu</p> 40

41 Tekst pochylony, Tekst podkreślony <i>tu wpisz tekst</i> - tekst pochylony, kursywa (italic), <u>tu wpisz tekst</u> - podkreślenie (underline). 41

42 Wielkość czcionki <font size="n">tu wpisz tekst</font> Czcionka o rozmiarze 1 Czcionka o rozmiarze 2 Czcionka o rozmiarze 3 (domyślna) Czcionka o rozmiarze 4 Czcionka o rozmiarze 5 Czcionka o rozmiarze 6 Czcionka o rozmiarze 7 42

43 Kolorki <font color="kolor">tu wpisz tekst</font> 43

44 Czcionki <font face="rodzaj">tu wpisz tekst</font> lub <font face="rodzaj1, rodzaj2, rodzaj3...">tu wpisz tekst</font> gdzie zamiast rodzaj, rodzaj1, rodzaj2, rodzaj3... należy wpisać rodzaje czcionek (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to w przypadku drugiego polecenia należy ją objąć w znaki apostrofu (np.: <font face="verdana, 'Times New Roman', Arial">Tekst</font>). 44

45 Łączenie argumentów <p align="center"> <font size="5" color= blue face= Arial"><b><i><u> To jest jakiś tekst </u></i></b></font></p> Jak bedzie wyglądał tekst po wyświetleniu w przeglądarce?? 45

46 Kolor tła oraz tekstu <body bgcolor="kolor tła" text="kolor tekstu"> Tu jest właściwa treść strony </body> 46

47 Wstawienie obrazka <img src= Względna ścieżka dostępu do obrazka" alt="tekst alternatywny" /> Względna ścieżka dostepu do pliku: katalog/moj.gif lub../katalog/moj.gif Bez względana ścieżka dostępu do pliku: C:\apache\www\moj.gif UWAGA! Znacznik <img /> nie posiada w jezyku HTML znacznika zamykającego! 47

48 Ten sam folder Poprawnie: plik.gif Niepoprawnie: C:\www\plik.gif, plik.gif, plik Przykład zaczerpnięty z: 48

49 Poprawnie: katalog/plik.gif Niepoprawnie: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.gif, katalog/plik Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego W podrzędnym katalogu Poprawnie: katalog/plik.gif Niepoprawnie: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.gif, katalog/plik Przykład zaczerpnięty z: 49

50 Strona odwołująca się do zewnętrznego pliku Poprawnie:../katalog2/plik.gif Niepoprawnie: C:\www\katalog2\plik.gif, katalog2/plik.gif,..\katalog2\plik.gif,../katalog2/plik.gif,../katalog2/plik Przykład zaczerpnięty z: 50

51 W katalogach nadrzędnych Poprawnie:../../katalog2/katalog2a/plik.gif Niepoprawnie: C:\www\katalog2\katalog2a\plik.gif, katalog2/katalog2a/plik.gif,../katalog2/katalog2a/plik.gif Przykład zaczerpnięty z: 51

52 Obrazki a objętość strony GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość. JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości. PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. Niestety zwłaszcza ta ostatnia własność może nie być interpretowana przez starsze przeglądarki (np. MSIE 6.0). BMP bitmapa (bardzo rzadko stosowany format ) 52

53 Ustawienie obrazka <img src= Względna ścieżka dostępu do obrazka" alt= Tekst alternatywny" align="ustawienie" /> Ustawienie może przyjmować wartości: Left Right <center><img src= Względna ścieżka dostępu " alt= Tekstalt" /></center> 53

54 Odsyłacz do podstrony Prawie najważniejszy znacznik w HTML-u <a href="względna ścieżka dostępu do podstrony">opis odsyłacza</a> <a href = plik.html > Odsyłacz do tematu 1</a> podstrona.html - kliknij mnie 54

55 Odsyłacz do adresu internetowego <a href= internetowy">opis odsyłacza</a> Adres musi zaczynać się od kliknij mnie 55

56 Odsyłacz pocztowy <a href="mailto:adres poczty ">opis odsyłacza</a> Zamiast: "adres poczty " należy wpisać adres poczty elektronicznej (np.: Należy z rozwagą używać tego znacznika, ponieważ ten sposób wykorzystuje spam. 56

57 Odsyłacz obrazkowy <a href="adres"><img src= Względna ścieżka dostępu do obrazka" alt= Tekst alter" border=" " /></a> Przycisk gdzie jako "adres" można podać: względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu (np.: index.html), adres internetowy poprzedzony przez " (np.: adres poczty elektronicznej poprzedzony przez "mailto:" (np.: 57

58 Darmowe szablony SiteQL.net Tymex.org Webdiary.pl Webinside Webmade.org Webmaster.Mocny.Com WebPL.org Xklonos 58

59 Generator szablonu szablon.html 59

60 60

61 Budujemy stronę Rozszerzymy wiadomości na temat <head> <meta /> </head> <body> </body> Rozwiniemy temat formatowania tekstu o: Dodatkowe formatowanie Listy, wypunktowania <hr /> Komentarze Połączenia, odsyłacze, <a> Tabele Ramki Ćwiczenia 61

62 Co do Head a jeszcze dodamy... <head> <title>tytuł strony</title> //Tytuł strony jest znacznikiem obowiązkowym. Pominięcie go stanowi błąd! <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta name="description" content="tu podaj opis twojej strony" /> // nie zapomnieć o " <meta name="keywords" content="wyraz1, wyraz2, wyraz3..." /> <meta http-equiv="content-language" content="język" /> <meta name="author" content="tu wpisz swoje imię i nazwisko" /> <meta http-equiv="reply-to" content="twój adres " /> </head> 62

63 Dodatkowe atrybuty <meta http-equiv="creation-date" content="data" /> //np. "Tue, 20 Aug :25:27 GMT". <meta http-equiv="last-modified" content="data" /> <meta http-equiv="refresh" content="s" /> <link rel="shortcut icon" href="adres ikony" /> // favicon.ico 63

64 Nieco więcej o nich 64

65 Wyświetlanie Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników: w bloku w linii 65

66 Jeszcze o formatowaniu Akapit <p>...</p> Nagłowek <hn>...</hn> //<hn title="tu podaj opis">opis w IE</hn>, Blok <div>...</div> Wyśrodkowanie <center>...</center> Czcionka <font>...</font> Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML zaleca się stosowanie stylów. Jak również: SIZE, COLOR, FACE 66

67 Jeszcze o formatowaniu <nobr>...</nobr> <u>...</u> <strike>...</strike> zalecany <del>... </del> <blink>...</blink> Znaczniki NOBR oraz WBR nie wchodzą w skład specyfikacji HTML zaleca się stosowanie stylów. 67

68 O formatowaniu Indeks górny ^... Indeks dolny _... 68

69 <pre>...</pre> Tekst preformatowany teskt napisany czcionką monotypiczną (o stałej szerokości znaku), uwzględnia dodatkowe spacje, tabulację i znaki końca linii (bez <br />) nie jest automatycznie zawijany Należy jednak przy tym pamiętać, aby tekst nie zawierał znaków: "<" oraz ">" (w zamian używaj: < i >). 69

70 Tekst preformatowany <PRE> </PRE> ( ) Muu (oo) \/ \ \ ---W * 70

71 Kod komputerowy, Dalekopis Kod komputerowy <code>...</code> Pozwala wprowadzić fragment kodu komputerowego Nie uwzględnia on jednak dodatkowych spacji, tabulacji ani znaków końca linii (trzeba używać <br />) jest automatycznie zawijany Łatwiej użyc tekstu preformatowanego. Dalekopis <tt>...</tt> 71

72 Zmienna, cytaty Zmienne <var>...</var> - Czcionka pochylona dla równań y = ax 2 + bx + c Cytat <cite>...</cite> Krótki cytat<q>...</q> <cite>albert Einstein</cite> powiedział: <q>dwie rzeczy nie mają granic: wszechświat i ludzka głupota.</q> Wynik: Albert Einstein powiedział: Dwie rzeczy nie mają granic: wszechświat i ludzka głupota. Blok cytowany <blockquote>...</blockquote> 72

73 I inne EM(emfaza), KBD (klawiatura), SAMP (przykład), INS i DEL (zmiany), ABBR (skrót), ACRONYM(akronim), DFN (definicja). 73

74 Po co ich aż tyle?? Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to np.: CENTER, B, I, U, S, STRIKE, FONT, BASEF ONT, BIG, SMALL. Znaczniki semantyczne - określają charakter (znaczenie) tekstu, który obejmują, jak również czasem odpowiednio formatuje. Są to np.: Hn, STRONG, EM, CODE, KBD, SAMP, VAR, Q, CITE, BLOCKQUOTE, ADD RESS, INS i DEL, ABBR, ACRONYM, DFN. 74

75 Ze znaków semantycznych korzystają: Z informacji niesionej przez znaczniki semantyczne korzystają zwykłe przeglądarki internetowe, wyróżniając je w specjalny, właściwy sobie sposób Osoby niewidome Roboty wyszukiwarek internetowych 75

76 76

77 Wykazy ponumerowane, nieuporzadkowane Wszystkie znaczniki list posiadają następujące, wspólne elementy: cała lista jest objęta przez znaczniki początkowe i końcowe, odpowiednie dla danego rodzaju listy (na przykład <UL> i </UL>, <OL> i </OL>), każdy element listy posiada swój własny znacznik: <DT> i <DD> dla listy pojęć oraz <LI> dla pozostałych list. 77

78 <ul> <li>punkt pierwszy</li> <li>punkt drugi</li> <li>punkt trzeci</li> </ul> <ol> <li>punkt pierwszy</li> <li>punkt drugi</li> <li>punkt trzeci</li> </ol> Lista wypunktowana 78

79 Atrybuty <ol type="rodzaj numeracji"> gdzie jako "rodzaj numeracji" należy podać:"1" (domyślny) - numeracja według liczb arabskich "I" - według dużych liczb rzymskich "i" - według małych liczb rzymskich "a" - według małych liter "A" - według dużych liter <ol start="n"> //zaczynamy od n-tej liczby <li value="n">punkt drugi</li> //zmieniona wartość punktu, n zawsze liczbą musi być Atrybut TYPE,START,VALUE, jest zdeprecjo nowany przez specyfikację HTML zaleca się stosowanie stylów. 79

80 Triki <ul style="color: red"> <li><span style="color: blue">punkt pierwszy</span></li> <li><span style="color: black">punkt drugi</span></li> <li><span style="color: green">punkt trzeci</span></li> </ul> 80

81 <hr> <hr /> Pozioma linia <hr noshade="noshade" /> <hr size="2" /> <hr width="75%" /> <hr align="center" size="4" width="200" /> <hr width= 10%" /> <hr color= red" /> 81

82 Komentarze <!-- Ten tekst zostanie zignorowany przez przeglądarkę --> Tekst nie widoczny wiec po co się je stosuje? 1. Dla informacji co się poniżej/powyżej znajduje 2. Dla wyłaczenia części kodu Nie zagnieżdzamy komentarzy 82

83 83

84 Odsyłacz <a> </a> coś szerzej o nim <a>...</a> - kreator hiperpołączeń na stronach HTML <a href= index.html >Główna strona</a> <a href= >Odwiedź Onet.pl</a> <a href="../index.html" title="do strony głównej">strona główna</a> //dymek do podpisu strony <a href="../index.html" onmouseover="window.status='do strony głównej'; return true" onmouseout="window.status=''; return true">strona główna</a> //IE 84

85 Tworzenie połączeń i odnośników do określonych miejsc w dokumencie (etykiety) <A NAME="Czesc4">Część czwarta: opis hiperłączy</a> Aby sie odwołać do tego miejsca na stronie wystarczy: <A HREF= #Czesc4 >Powrót do opisu hiperłaczy</a> Aby się odwołać na inną stronę w dane miejsce z atrybutem NAME należy zastosować konstrukcje: <a href= strona.html#czesc4">idź do Części Czwartej</a> 85

86 Podlinkowanie <center> <img src=" jpg" alt="liscie " width="306" height="407" align="middle" /> </center> 86

87 Odsyłacz FTP <a href="ftp://ftp.adres">pliki ftp</a> Protokół FTP - File Transfer Protocol (Protokół Transmisji Plików) ftp://sunsite.icm.edu.pl/pub/ ftp://ftp.freebsd.org/pub/freebsd/releases/i386/7. 0-RELEASE/ 87

88 Własny folder download Przykładowy serwer http: Aby udostepnić jeden plik do ściągnięcia piszemy: <a href= "plik.zip">plik plik.zip do pobrania</a> 88

89 Anatomia URL Protokół Ścieżka dostępu i nazwa pliku Nazwa serwera 89

90 Komunikatory internetowe Gadu-Gadu <a href="gg:numer">opis</a>status użytkownika <img src=" alt="gadu-gadu" /> gdzie jako styl należy podać liczbę 1. Jeżeli podamy 2, zamiast obrazka zostanie zwrócona liczba odzwierciedlająca status użytkownika: 1 - "niedostępny", 2 - "dostępny", 3 - "zaraz wracam". Tlen <a href="tlen://chat użytkownik ">opis</a>status użytkownika <img src=" alt="tlen" /> gdzie jako styl należy podać liczbę 1, 2 lub 3. ml 90

91 Komunikatory internetowe Skype <a href="skype:użytkownik">opis</a> <a href="skype:użytkownik?akcja">opis</a>akcjacall - rozmowa głosowa chat - rozmowa tekstowa add - dodaj do kontaktów userinfo - profil użytkownika voic - poczta głosowa sendfile - wyślij plik Status użytkownika <img src=" alt="skype" />gdzie jako ikony należy podać zestaw ikon: smallicon, mediumicon,smallclassic, bigclassic, balloon. Aby status wyświetlał się poprawnie, należy w ustawieniach komunikatora zaznaczyć opcję: Narzędzia/Opcje/Prywatność/Pozwól na wyświetlanie mojego statusu. 91

92 92

93 Części tabeli Podpis informuje o zawartości tabeli, na przykład, Liczba elektronów na powłokach w zależności od pierwiastka Podpisy są opcjonalne. Nagłówki tabeli to etykiety wierszy i (lub) kolumn. Wyświetlane są zazwyczaj czcionką większą lub w pewien sposób wyróżnioną w stosunku do reszty tekstu tabeli. Są opcjonalne. Komórki tabeli to najmniejsze jej elementy. Komórka może zawierać dane lub nagłówek. Dane tabeli to wartości wpisane w samą tabelę. Nagłówki i dane to tabela. 93

94 <table> <tr> </tr> <tr> </tr> </table> Podstawowa struktura tabeli <td>...</td> <td>...</td> <td>...</td> <td>...</td> 94

95 Wiersza i komórki <table> - znaczk rozpoczęcia tabeli </table> <tr> - znacznik rozpoczęcia wiersza </tr> <th> - znacznik rozpoczęcia nagłówka w wierszu </th> <td> - znaczik rozpoczęcia kolumny <td> (inaczej komórki danych) Liczba wierszy jest nieograniczona Natomiast musimy zadbać o to aby liczba komórek była taka sama. 95

96 Podpisy Ustawienie podpisu tabeli <caption align= top > Domyślne ustawienie</caption> Inne wartości: "bottom" - tytuł dolny "left" - ustawienie przy lewej krawędzi tabeli "right" - przy prawej krawędzi "center" - na środku Element CAPTION musi się znajdować zaraz po znaczniku TABLE! 96

97 Stwórz własną tabele Małe warsztaty 97

98 Marginesy w komórkach Szerokość marginesu w komórkach (x pikselach) <table border= 1 cellpadding="x">...</table> Np. <table border= 4" cellpadding= 15"> Szerokość odstępu (x w pikselach) między sąsiednimi komórkami <table cellspacing="x">...</table> Np. <table border= 4" cellspacing= 5"> 98

99 Różnice miedzy nimi: 99

100 Wymiary tabel (wiecej miejsca w komórkach) Wymiary całej tabeli <table width="x" height="y">...</table> Lub <table width="x%" height="y%">...</table> 100

101 Wymiary pojedynczej komórki <table> <tr> <td width="x" height="y">...</td> </tr> </table> Lub <table> <tr> <td width="x%" height="y%">...</td> </tr> </table> 101

102 Wyrównanie tabeli 1. Wyrównanie tabeli <table align= right >...</table> Wyrównanie zawartości tabeli Tu dochodzi dodatkowy znacznik: valign 2. Wyrównanie zawartości całego wiersza <table> <tr align="rodzaj" valign="ustawienie">...</tr> </table> 102

103 Wyrównanie zawartości pojedynczej komórki 3. Wyrównanie zawartości pojedynczej komórki <table> <tr> <td align="rodzaj" valign="ustawienie">...</td> </tr> </table> "left" - wyrównanie zawartości (wiersza lub komórki) do lewej (domyślnie) "right" - wyrównanie zawartości do prawej "center" - wyśrodkowanie zawartości ustawienie"top" - ustawienie zawartości (wiersza lub komórki) na górze "bottom" - ustawienie zawartości na dole "middle" - ustawienie zawartości po środku (domyślnie) 103

104 Kolor tła W całej tabeli <table bgcolor="red">...</table> W jednym wierszu <table> <tr bgcolor="blue">...</tr> </table> W pojedynczej komórce <table> <tr> <td bgcolor="green">...</td> </tr> </table> 104

105 Tło obrazkowe W całej tabeli <table background="ścieżka dostępu">...</table> W pojedynczej komórce <table> <tr> </tr> </table> <td background="ścieżka dostępu">...</td> 105

106 <table border="5"> <tr> Ćwiczenia <td>komórka1</td> <td>komórka2</td> </tr> <tr> <td>komórka3</td> <td>komórka4</td> </tr> </table> 106

107 Łączenie komórek Poziome łączenie komórek <table> <tr> <td colspan="x">...</td> </tr> </table> gdzie "x" oznacza liczbę komórek do połączenia w poziomie. 107

108 Łączenie komórek Pionowe łączenie komórek <table> <tr> </tr> </table> <td rowspan="y">...</td> gdzie "y" oznacza liczbę komórek do połączenia w pionie. 108

109 <table border="1"> <tr> <td colspan="2">komórki1,2</td> </tr> <tr> </tr> </table> <td>komórka3</td> <td>komórka4</td> 109

110 Bardziej zaawansowane możliwości ulepszania tabel Grupowanie i określanie wyrównania kolumn Grupowanie i określanie wyrównania wierszy Atrybuty FRAME oraz RULES 110

111 Pływające Ramki 111

112 Przykład index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>przykladowa strona z ramkami</title> </head> <frameset cols="*,*" frameborder="no" border="0" framespacing="0"> <frame src="menu.html" name="lewa" title="lewa" /> <frame src="prawa.html" name="prawa" title="prawa" /> </frameset> <noframes><body> </body> </noframes></html> //Zapisujemy pod nazwa index.html 112

113 menu.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>przykladowa strona z ramkami</title> </head> <body style="background:#993333"> <h1 align="center" > Menu </h1> <ul> <li><a href= " prawa.html" target="prawa" >Strona główna</a></li> <li><a href="strona1.html" target="prawa" >Strona1</a></li> <li><a href="strona2.html" target="prawa" >Strona2</a></li> <li><a href="links.html" target="prawa" >Linki</a></li> </ul> </body> </html> 113

114 prawa.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <Przykladowa strona z ramkami</title> </head> <body style="background:#999933"> <h1>moja pierwsza strona w Ramkach</h1> <p>witam na mojej stronie!</p> <p>bedziemy sobie tutaj edytowali nasza pierwsza strone.</p> <p>powinno znaleść się tutaj więcej informacji ale je szcze nie teraz...</p> <!-- Podpisz stronę... z grzeczności! --> <address class="podkreslenie"> Wykonana 10 grudzien, 2008 </address> </body> </html> 114

115 strona1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>untitled Document</title> <style type="text/css"><!--.styl1 { font-size: 10px }--> </style> </head> <body bgcolor="#6633ff"> <hr /> <center><h1> Strona test 1</h1></center> <hr /> <p> </p><p> </p><p> </p><p> </p><p> </p> <p class="styl1"><a href="prawa.html">powrót</a></p> </body> </html> 115

116 links.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>untitled Document</title> <style type="text/css"><!--.styl1 { font-size: 10px }--> </style> </head> <body bgcolor="#0000ff"> <hr /> <center><h1> LINKI</h1></center> <hr /> <p> </p><p> </p><p> </p><p> </p><p> </p> <p class="styl1"><a href="prawa.html">powrót</a></p> </body> </html> 116

117 Ramki pływające iframe <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>ramki pływające</title> </head> <body> <h1 align="center">pływające ramki</h1> <center><iframe width="650" height="650" name="messier" src="m42.html"></iframe> <div><a href="m41.html" target="messier">m41</a> <a href="m42.html" target="messier" >M42</a> <a href="m57.html" target="messier">m57</a> <a href="m101.html" target="messier">m101</a> </div></center> </body> </html> 117

118

119 (Extensible HyperText Markup Language). 119

120 Język znaczników HTML jest językiem znacznikowym, które mają zadanie opisać strukture strony, a nie jej wygląd. HTML nigdy nie został zaprojektowany w celu określania wyglądu strony (wyboru czcionek, kolorów czy też odległości pomiędzy wyrazami bądź literami), został on stworzony w celu opisu elementów tworzących stronę (nagłówków, teksu, obrazów, itp.) Rozszerzenia standardowych znaczników HTML (<font>, <color>) udostępniły autorom stron WWW możliwości wykraczające poza początkowe zamierzenia twórców języka HTML. 120

121 Po co CSS I XHTML? W celu przywrócenia początkowej struktury języka HTML i zapewnienia autorom stron WWW tak poszukiwanej możliwości kontroli ich układu i wyglądu World Wide Web Consortium wprowadziło kaskadowe arkusze stylów (ang: Cascading Style Sheets, w skrócie: CSS) oraz XHTML 121

122 Czym jest XHTML i dlaczego należy go używać? Jakie korzyści z tego płyną? Dokumenty XHTML są zgodne ze składnią XML, więc mogą być łatwo przeglądane, edytowane i walidowane (sprawdzane) przez standardowe narzędzia XML. Dokumenty XHTML mogą być napisane tak, aby działały równie dobrze lub nawet lepiej zarówno w przeglądarkach obsługujących HTML 4 jak i XHTML. Dokumenty XHTML mogą zawierać skrypty i applety, które bazują na językudom (Document Object Model) zgodnym z HTML jak i XHTML. 122

123 Jakie korzyści Podczas gdy rodzina języków XHTML będzie ewoluować, dokumenty zgodne z XHTML będą bardziej przyjazne do działania wewnątrz i pomiędzy różnymi środowiskami XHTML. W języku XML stosunkowo łatwo można wprowadzać nowe elementy i atrybuty. Rodzina języków XHTML została zaprojektowana tak, aby przystosować te rozszerzenia do modułów XHTML. Moduły pozwalają tworzyć kombinacje istniejących i nowych cech podczas budowania serwisów oraz projektowania nowych przeglądarek. Serwery, proxy i przeglądarki będą zdolne do przeprowadzania lepszej transformacji treści. Dokumenty zgodne z XHTML będą poprawnie interpretowane w każdej przeglądarce zgodnej z tym językiem. 123

124 Identyfikator <DOCTYPE> Jakie są wymagania, aby naszą strone można było nazwać, że jest napisana w XHTML-u? Każdy znacznik ma swój odpowiednik zamykający Znaczniki pisane małymi literami A także: wartości atrybutów zapisuj wewnątrz cudzysłowów poprawnie zagnieżdżaj znaczniki i nie dopuszczaj, aby zachodziły na siebie XHTML dodaje jeszcze jeden wymagany element: <DOCTYPE> 124

125 <DOCTYPE> Znacznik ten określa typ tworzonego dokumenty HTML, który może: Transitional (pośredni), Strict (ścisły) Frameset (układ ramek). 125

126 Wymagania stawiane dokumentom XHTML Strict (ścisła) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Transitional (przejściowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> Frameset (ramkowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " frameset.dtd"> 126

127 Wpowadzenie do Kaskadowych Arkuszy Stylów 127

128 Kaskadowe Arkusze Stylów CSS 128

129 Idea arkuszy stylów 129

130 Idea arkuszy stylów <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>zastosowanie arkuszy stylów</title></head> <body> <h1>zastosowanie arkuszy stylów</h1> <p> Chcemy aby nagłówek został wyświetlony na czerwono, a tekst akapitu będzie miał inną czcionkę i kolor niebieski.</p></body> </html> 130

131 Idea arkuszy stylów h1 { color: red } p { font-family: Arial, Helvetica, sans-serif; color: blue } 131

132 Jak zbudować

133 Gdzie to wstawić??? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>zastosowanie arkuszy stylów</title> <style type="text/css"> <!-- h1 { color: red } p { font-family: Arial, Helvetica, sans-serif; color: blue } --> </style> </head> <body> <h1>zastosowanie arkuszy stylów</h1> <p>chcemy aby nagłowek został wyświetlony na czerwono, a tekst akapitu będzie miał inną czcionkę.</p> </html> 133

134 Trzy sposoby wstawiania: Styl lokalny Wewnetrzny arkusz stylów Zewnerzny arkusz stylów 134

135 Styl lokalny <selektor style="cecha: wartość; cecha2: wartość2..."> </selektor> 135

136 Zalety stylu lokalnego inline <span style="color:#cc00cc; text-align:center">...</span> Span nadaję się tylko do elementów pisanych w linii 136

137 DIV a SPAN <div style="background-color:#333333; textdecoration:blink >...</div> 137

138 Wewnętrzny arkusz stylów <head> <title>zastosowanie arkuszy stylów</title> <style type="text/css"> <!-- h1 { color: red } p { font-family: Arial, Helvetica, sans-serif; color: blue } --> </style> </head> <body>

139 Osadzone arkusze stylów <style type="text/css"> <! - /* Ten tekst zostanie zignorowany przez przeglądarkę, ale może zawierać informacje cenne dla projektanta arkusza CSS */ --> </style> 139

140 Zewnętrzny arkusz stylów 140

141 Zewnętrzny arkusz stylów 141

142 <head> (...) <link rel="stylesheet" type="text/css" href="style.css" /> (...) </head> 142

143 body { Zewnętrzny arkusz stylów font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } 143

144 Ciekawostki : Narzędzia/Opcje internetowe/generalne/dostępność/formatuj dokumenty używając mojego arkusza stylów 144

145 Kaskada stylów CSS - (ang. Cascading Style Sheets) Kaskadowe Arkusze Stylów. 145

146 Zewnętrzny arkusz stylów Gdy na jednej stronie WWW zostaną zastosowane wszystkie trzy typy arkuszy stylów to: reguły zdefiniowane w arkuszu późniejszym mają wyższy priorytet, niż reguły zdefiniowane w arkuszach wcześniejszych, Najmniejszy priorytet mają zewnętrzne, osadzone, a nawyższy lokalne. 146

147 Reguły kaskadowości 147

148 Innymi słowy kolejność 1. Styl lokalny (inline) 2. Rozciąganie stylu (SPAN) 3. Wydzielone bloki (DIV) 4. Wewnętrzny arkusz stylów 5. Import stylów do wewnętrznego arkusza 6. Zewnętrzny arkusz stylów 7. Import stylów do zewnętrznego arkusza 148

149 UWAGI!important 149

150 Najczęściej stosowane właściwości stylów oraz ich wartości Do pełnego poznania wszystkich właściwości stylów brakło by czasu. Dlatego pełna specyfikacja wszystkich rzeczy z CSS w wersji pierwszej jest pod adresem: Specyfikacja CSS w wersji 2 Specyfikacja w wersji

151 Nasza przyszłość

152 Najczęściej stosowane właściwości stylów oraz ich wartości marginesy oraz wypełnienie strony Tło, kolory i obrazy Określanie wyglądu obramowań Określanie czcionek i stylów wyrównanie tekstu Atrybut CLASS 152

153 Jednoski długosci 153

154 Jednoski długosci 154

155 Właściwość Opis margin-top Konfiguruje obszar pomiędzy elementem a jego sąsiadami (górny margines elementu). Można go definiować w jednostkach absolutnych, w procentach względem szerokości tekstu lub automatycznie (wartość auto). margin-right Konfiguruje obszar pomiędzy elementem a jego sąsiadami (prawy margines elementu). margin-bottom Konfiguruje obszar pomiędzy elementem a jego sąsiadami (dolny margines elementu). margin-left Konfiguruje obszar pomiędzy elementem a jego sąsiadami (lewy margines elementu). Margin Właściwość skrótowa dająca możliwość łatwiejszego określenia właściwości margin-top, margin-right, marginbottom oraz margin-left. Akceptowane wartości tej właściwości to długości wyrażone liczbowo, wartości procentowe lub wartość auto. 155

156 Właściwość Opis Padding-top Określa odległość pomiędzy górną granicą obszaru a elementami zawartymi w tym obszarze. Odległość może być podawana w dowolnych stosowanych jednostkach miary, w procentach lub automatycznie (wartość auto). Padding-right Określa odległość pomiędzy granicą obszaru z prawej strony a elementami zawartymi w tym obszarze. Padding-bottom Określa odległość pomiędzy dolną granicą obszaru a elementami zawartymi w tym obszarze. Padding-left Określa odległość pomiędzy granicą obszaru z lewej strony a elementami zawartymi w tym obszarze. Padding Określa odległości pomiędzy granicą obszaru a elementami zawartymi w tym obszarze. Odległość może być podawana w dowolnych stosowanych jednostkach miary, w procentach lub automatycznie (wartość auto). 156

157 157

158 Wartości MARGIN i PADDING 158

159 Background-color Określa kolor tła dla elementu. Możliwymi wartościami są nazwy kolorów (lub odpowiadający im heksadecymalny tryplet rgb) lub słowo transparent. Background-image Definiuje obraz jako tło elementu. Wartością powinien być adres URL pliku obrazu lub słowo none. Background-repeat Jeśli konieczne jest złożenie tła z identycznych obrazów, ten atrybut umożliwi określenie sposobu wyświetlania tła. Wartości atrybutu to repeat, repeat-x i repeaty. Wartość repeat wskazuje, że obraz powinien być powielany w sposób normalny. Zastosowanie wartości repeat-x spowoduje powtórzenie obrazu w pojedynczej linii poziomej, a zastosowanie wartości repeat-y w linii pionowej. 159

160 Color Określa kolor elementu (w większości przypadków dotyczy to koloru tekstu wyświetlanego wewnątrz elementu strony WWW). Kolor można określić, podając jedną z 16 nazw lub używając kilku różnych sposobów zapisu wartości RGB. Background-attachment Określa czy obraz tła jest stały (dołączony do dokumentu), czy też będzie przewijany wraz z nim. Dostępne wartości tej właściwości to: scroll oraz fixed. Background-position Określa początkowe położenie obrazu tła. Background Właściwość skrótowa umożliwiająca określenie jednej lub kilku powyższych właściwości w jednym miejscu arkusza stylów. 160

161 Przykład nieporuszającego sie obrazku na środku strony body { background-attachment:fixed; background-image: url(../../przyklad.png); background-position: center center; background-repeat: no-repeat; } 161

162 Wygląd obramowań border-style Określa styl wszystkich czterech obramowań elementu. Wartości tej właściwości są identyczne jak wartości właściwości border-bottom-style. Styl poszczególnych obramowań można także określać niezależnie, posługując się właściwościami: a) border-bottom-style, b) border-left-style, c) border-top-style d) border-right-style. Dostępne wartości, które można przypisać tej właściwości to: none, dotted, dashed, solid, double, grove, ridge, inset oraz outset. border-color Określa kolor wszystkich czterech obramowań elementu. Kolor poszczególnych obramowań można także określać niezależnie, posługując się właściwościami: a) border-bottom-color, b) border-left-color, c) border-top-color d) border-right-color. Wartością tych właściwości może być jedna z 16 nazw kolorów, wartość RGB zapisana w jednej z kilku dostępnych postaci lub też wartość transparent. 162

163 Określanie czcionek i stylów font-family Określa krój czcionki. Pozwala na podanie nazwy czcionki (na przykład: Arail, Times lub Palatino),bądź jednej z pięciu ogólnych nazw czcionek: serif, sans-serif, cursive, fantasy lub monospace. font-size Określa wielkość czcionki, wyrażoną w wielkościach bezwzględnych, względnych lub jako wartość procentową. font-style Określa styl czcionki, może to być jedna z wartości: oblique, italic lub normal. font-weight Określa grubość (wagę) czcionki, można ją ustalić przy użyciu wartości normal, bold, bolder, lub lighter. font-variant Określa modyfikację czcionki, może to być wartość small-caps lub normal. Font Właściwość skrótowa umożliwiająca określenie wartości właściwości font-weight, font-size, fontstyle, font-family oraz line-height w jednym arkusza stylów. miejscu 163

164 Wygląd obramowań border-width Określa grubość wszystkich czterech obramowań elementu. Grubość p szczególnych obramowań można także określać niezależnie, posługując się właściwościami: a) border-bottom-width, b) border-left-width, c) border-top-width d) border-right-width. Dostępne wartości to: thin, medium, thick lub też wartość określająca długość. Border Właściwość skrótowa umożliwiająca jednoczesne określenie grubości, stylu oraz koloru wszystkich czterech obramowań elementu. Wygląd poszczególnych obramowań elementu (jego grubość, kolor oraz styl) można także określa niezależnie, przy użyciu właściwości: a) border-bottom, b) border-left, c) border-top, d) border-right. 164

165 Pismo szerywowe i bezszeryfowe pismo bezszeryfowe pismo szeryfowe serif Sans serif "Sans" to po francusku "bez", w tym przypadku "bez szeryfów". 165

166 Właściwości CSS określające wyrównanie tekstu word-spacing Umożliwia zwiększenie domyślnych odstępów pomiędzy wyrazami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal. letter-spacing Umożliwia zwiększenie domyślnych odstępów pomiędzy literami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal. line-height Określa odległość pomiędzy liniami bazowymi dwóch kolejnych linii. Wartość liczbowa określa, że wysokość linii będzie wielkością czcionki pomnożoną przez podaną liczbę, na przykład: a) line-height: 2 tworzy linię o wysokości równej dwukrotnej wielkości czcionki. Właściwości line-height można także przypisać wartość bezwzględną. b) line-height: 15px oznacza, że wysokość linii będzie wynosiła 15 pikseli. W przypadku podania wartości procentowej, wysokość linii jest obliczana na podstawie wysokości elementu. Na przykład: a) line-height: 200% jest równoważne podaniu wartości liczbowej: line-height: 2. b) wartość normal -- linia będzie miała domyślną wysokość. 166

167 Wyrównanie tekstu vertical-align Określa absolutną pozycję tekstu w pionie lub jego pozycję względem elementu nadrzędnego. Oto lista jego wartości: a) baseline, b) middle, c) sub, d) super, e) text-top f) text-bottom (określają pozycję względem elementu nadrzędnego) g) top h) bottom (określają pozycję względem wiersza). Stosując procentowe wartości ujemne lub dodatnie, obniżamy lub podnosimy element ponad linię bazową elementu nadrzędnego. text-align Umożliwia to, co standardowe wyrównanie HTML (wartości left, right, center,justify). Text-decoration Umożliwia wprowadzanie dodatkowych ozdobników, takich jak podkreślenie, przekreślenie i miganie. Może przyjmować cztery wartości: a) none, b) overline, c) line-through d) blink. 167

168 Wyrównanie tekstu text-indent Określa wcięcie pierwszej linii sformatowanego tekstu w elemencie. Wartość ta może być wartością bezwzględną lub wartością procentową, bazującą na szerokości elementu. Wartości procentowe określane są na podstawie szerokości elementu i w przeważającej większości przypadków działają najlepiej. white-space Atrybut określa odstępy i złamania wiersza w obrębie elementu. Wartości są następujące: a) normal w tym przypadku dodatkowe odstępy są ignorowane, tak jak w przypadku zwykłego HTML, b) pre jak w formatowanym wstępnie za pomocą znacznika <PRE> tekście HTML c) nowrap wiersze są łamane tylko za pomocą znacznika <BR />. 168

169 Atrybut CLASS <title>stosowanie klas</title> <style type="text/css"> <!-- p { font-family Arial, Helvetica, sans-serif; color: green } p.wiekszy { font-family: Arial, Helvetica, sans-serif; font-size: larger} p.maly {font-family:geneva, Arial, Helvetica, sansserif; font-size:smaller}.podkreslenie {text-decoration:line-through} --> </style> 169

170 A w tekscie: <p class="wiekszy">witam na mojej stronie!</p> <p class="maly">bedziemy sobie tutaj edytowali nasza pierwsza strone.</p> <p>powinno znaleźć się tutaj więcej informacji ale jeszcze nie teraz...</p> <address class="podkreslenie">wykonana 10 grudzien, 2008</address> 170

171 Do dzieła

172 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>moja strona z arkuszami stylów</title> </head><body> <!-- Nawigacja strony --> <ul > <li><a href="index.html">strona główna</a></li> <li><a href="strona1.html">strona1</a></li> <li><a href="strona2.html">strona2</a></li> <li><a href="links.html">linki</a></li> </ul> <!-- Moja treść --> <h1>moja pierwsza strona ze stylami</h1> <p >Witam na mojej stronie!</p> <p >Bedziemy sobie tutaj edytowali nasza pierwsza strone.</p> <p>powinno znaleźć się tutaj więcej informacji ale jeszcze nie teraz...</p> <address> Wykonana 10 grudzien, 2008 </address></body></html> 172

173 DODAWANIE KOLORU <style type="text/css"> <!-- body { color:#993333; background-color: #9933FF; } -- > </style> 173

174 DODANIE CZCIONKI <style type="text/css"> body { font-family: Georgia, "Times New Roman", Times, serif; color:#993333; background-color: #9933FF; } h1 { font-family: Helvetica, Geneva, Arial, SunSans- Regular, sans-serif } </style> 174

175 DODANIE PASKA NAWIGACJI <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color:#993333; background-color: #9933FF; } ul.navbar { position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sansserif } </style> Wstaw <ul class="navbar > 175

176 STYLOWANIE LINKÓW <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color:#993333; background-color: #9933FF; } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } </style> 176

177 DODANIE LINI POZIOMEJ address { } margin-top: 1em; padding-top: 1em; border-top: thin dotted 177

178 Nieruchome tło Body { background-attachment:fixed; background-image: url(../../przyklad.png); background-position: center center; background-repeat: no-repeat; } 178

179 Używanie class p { font-family Arial, Helvetica, sans-serif; color: green } p.wiekszy { font-family Arial, Helvetica, sans-serif; font-size: larger } p.maly { font-family:geneva, Arial, Helvetica, sans-serif; font-size:smaller}.podkreslenie {text-decoration:line-through} <p class="wiekszy">witam na mojej stronie!</p> 179

180 HTML Vademecum Profesjonalisty HTML 4 - Czarna księga WebMastera

181

182 Wstawianie obrazka Standardowe wstawianie obrazka: <img src="obrazek.png" width="150" height="150" alt="tekst alternatywny" /> Połaczenie obrazka oraz łacza hipertekstowego: <a href="strona.html" title="tytyl tego hiperlacza" target="_blank"> <img src="obrazek.jpg" alt="alter" /></a> 182

183 Wzajemne położenie tekstu i obrazu ALIGN="TOP" Wyrównuje górną krawędź obrazu względem górnej krawędzi linii (może to być górna krawędź tekstu lub innego obrazu). ALIGN="MIDDLE" Wyrównuje obraz w taki sposób, że jego środek leży dokładnie pośrodku linii. ALIGN="BOTTOM" Wyrównuje dolną krawędź obrazu względem dolnej krawędzi linii. ALIGN="TEXTTOP" Wyrównuje górną krawędź obrazu względem górnej krawędzi najwyższej litery w linii (ALIGN="TOP" wyrównuje obraz względem najwyższego elementu linii, czyli nie tylko liter, ale innych obrazów). ALIGN="ABSMIDDLE" Wyrównuje obraz w taki sposób, że jego środek leży pośrodku największego elementu linii (ALIGN="MIDDLE" działa tak, że środek obrazu znajduje się pośrodku samego tekstu). ALIGN="BASELINE" Wyrównuje dolną krawędź obrazu względem dolnej krawędzi tekstu. ALIGN="ABSBOTTOM"Wyrównuje dolną krawędź obrazu względem dolnej krawędzi największego elementu w linii. również 183