Projektowanie stron WWW

Transkrypt

1 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); Projektowanie stron WWW Projektowanie stron WWW Wykład 2 Michał Dudkiewicz, WMiI UMK (jaymz@mat.umk.pl)

2 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); HTML wprowadzenie $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 2 Projektowanie stron WWW

3 HTML HTML Hyper Text Markup Language 3

4 HTML nagłówek dokumentu Zmienne systemowe - przeznaczone dla przeglądarek: <meta http-equiv="nazwa" content="wartość"> Są równoważne ze zmiennymi definiowanymi w nagłówku HTTP. Czasami mogą być automatycznie tłumaczone na nagłówki HTTP przez serwer WWW. Zmienne użytkownika - przeznaczone dla wyszukiwarek: <meta name="nazwa" content="wartość"> 4

5 HTML budowa dokumentu <html> <head> informacje nagłówkowe </head> <body> właściwa treść (ciało) dokumentu </body> </html> Znaczniki: <znacznik otwierający> </znacznik zamykający>  przy znacznikach używamy małych liter kaskadowość i dziedziczenie: <i><b> tekst pochylony i pobrubiony</b></i> <i><b> tekst pochylony, pobrubiony<u> i podkreślony</u></b></i> błędne znaczniki są ignorowane przez przeglądarkę <i><blue> tekst pochylony, pobrubiony<u> i podkreślony</u></b></i> 5

6 HTML kodowanie znaków meta http-equiv="content-type" Zapewnia poprawną obsługę wybranej strony kodowej przez przeglądarkę WWW. Musi być zgodna z formatem wykorzystanym podczas zapisywania pliku. Przykład: <meta http-equiv="content-type" content="text/html; charset="iso "> <meta http-equiv= "content-type" content="text/html;charset=utf-8"> 6

7 HTML odświeżanie dokumentu meta http-equiv="refresh" Pozwala na automatyczne wysłania do serwera WWW żądania dotyczącego tego samego elementu: <meta http-equiv="refresh" content="3"> innego elementu <meta http-equiv="refresh" content="10; url= lub zupełnie innej strony <meta http-equiv="refresh" content="30; url= 7

8 HTML znaczniki http-equiv Wyłączenie funkcji buforowania dokumentów <meta http-equiv="pragma" content="no-cache"> Określenie daty ważności pliku <meta http-equiv="expires" content="wed, 26 Feb :21:57 GMT"> Definiuje domyślny język skryptowy w dokumencie <meta http-equiv="content-script-type" content="text/javascript"> Definiuje domyślne style <meta http-equiv="content-style-type" content="text/css"> Ustawienie zmiennych cookie <meta http-equiv="set-cookie" content="cookievalue=xxx;expires=friday, 31-Dec-09 23:59:59 GMT; path=/"> 8

9 HTML znaczniki meta name Opisuje zawartość dokumentu dla wyszukiwarek <meta name="content" content="strona o robotach"> Definiuje słowa kluczowe <meta name="keywords" content="robot, automatyka, sztuczna inteligencja"> Informacje dla robotów <meta name="robots" content="noindex,follow"> - noindex strona nie jest indeksowana - nofollow zabezpiecza przed śledzeniem linków i indeksowaniem podlinkowanych stron - noimageindex zabezpiecza przed indeksowaniem obrazów, tekst może być indeksowany - noimageclick zabezpiecza przed tworzeniem linków bezpośrednio do obrazów, tworząc linki do całej strony 9

10 HTML analizatory i generatory meta znaczników

11 HTML podstawowe znaczniki <p></p> - definiuje akapit <div></div> - definiuje i grupuje elementy (element blokowy) <span></span> - neutralny element grupujący <hr /> - pozioma linia <ul></ul> - lista wypunktowana <li></li> - element listy <ol></ol> - lista numerowana <br /> - znak nowego wiersza <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>, <h7></h7> <a href=... ></a> - odnośnik (hiperłącze) <img src=... /> - obraz 11

12 HTML proste formatowanie Formatowanie logiczne: <code>kod maszynowy</code> <samp>tekst przykładowy</samp> <strong>mocniejszy</strong> Formatowanie fizyczne: <b></b> - pogrubienie <u></u> - podkreślenie <i></i> - pochylenie <big>większy</big> <small>mniejszy</small> <em>wyróżnienie</em> <var>zmienna</var> <cite>cytowanie</cite> 12

13 HTML znaki i symbole specjalne Pełna lista znaków specjalnych: Pełna lista symboli specjalnych: Kod HTML " & Znak cudzysłów niełamliwa spacja & < < > > symbol euro wyliczenie pauza półpauza - 13

14 HTML walidacja kodu W3C walidator ( Polecane kursy i ciekawe miejsca

15 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; XHTML $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 15 Projektowanie stron WWW

16 XHTML XHTML (ang. Extensible HyperText Markup Language, rozszerzalny język znaczników hipertekstowych) język służący do tworzenia stron WWW ogólnego przeznaczenia. Specyfikacje XHTML przygotowuje organizacja W3C. XHTML/1.0 nie jest następcą HTML, a jedynie przedstawieniem HTML 4.01 w postaci XML. XHTML/2.0 miał być następcą HTML, niekompatybilnym wstecz, ale ze względu na niekompatybilność m.in. Internet Explorera, a co za tym idzie niechęć użytkowników, W3C zadecydowało o kontynuowaniu linii XHTML/1.0 i HTML 4 jako XHTML 1.1 i HTML 5. 16

17 XHTML budowa dokumentu <!DOCTYPE definicja typu > <html xmlns=" <head> <title>tutaj tytuł</title> </head> <body> treść </body> </html> <!DOCTYPE> i DTD (ang. Document Type Definitions) 1. DOCTYPE jest nagłówkiem informującym przeglądarkę z jakim typem dokumentu ma ona do czynienia. 2. Wskazuje plik DTD, który opisuje składnię języka, w którym napisano dokument. 3. Przeglądarka może dowiedzieć się jak wczytać dany dokument na podstawie deklaracji DOCTYPE. 17

18 XHTML -!DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Stosowany przy użyciu samych znaczników, bez zaawansowanego formatowania wizualnego Zawiera elementy, które nie zostały zdeprecjonowane (ang. deprecated). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Zawiera wszystko to co Strict DTD plus zdeprecjonowane elementy i atrybuty. 18

19 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; CSS $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); $t->addstring($string); (kaskadowe arkusze stylów) $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 19 Projektowanie stron WWW

20 CSS 20

21 CSS budowa i typy HTML służy jest używany do strukturyzacji treści. CSS jest używany do formatowania tej treści. wpisane osadzone zewnętrzne określa definiowaną właściwość znacznika selektor { właściwość: wartość; } określa jakich znaczników dotyczy ta definicja definiuje wartość właściwości 21

22 CSS Zmiana koloru tła może być zrealizowana przy użyciu kodu <body bgcolor="#10ff13"> lub w równoważny sposób z wykorzystaniem stylu body {background-color: #10FF13;} style wpisane - umieszczany jako parametr znacznika <znacznik style="właściwość:wartość;">blabla</znacznik> np.: <div style="color: red;"> czerwony tekst </div> style osadzone - umieszczamy wewnątrz sekcji <head> <head> <style type="text/css">  </style> </head> 22

23 CSS klasy znaczników Klasa "niebieska" dla znacznika p <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf8"> <title>style</title> <style type="text/css">  </style> </head> <body> <p class="nieb">niebieskitekst</p> </body> </html> 23

24 CSS klasy nie związane ze znacznikami Klasy niezwiązane ze znacznikami można używać z różnymi znacznikami <style type="text/css">  </style> użycie <znacznik class="nieb"> tekst </znacznik> 24

25 CSS klasy nie związane ze znacznikami Klasa "nieb" stosowana w wielu znacznikach <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv= "content-type" content="text/html;charset=utf8"> <title>style</title> <style type="text/css">  </style> </head> <body> <p class="nieb">niebieski tekst </p> <h1 class="nieb">niebieski tekst </h1> <div class="nieb">niebieski tekst </div> </body> </html> 25

26 CSS style zewnętrzne (łączone) plik style.css.nieb{color: blue;} H3{ text-align:center; font-family:arial; color:navy }.wyliczenie { text-align:left; font-family:timesnew Roman; font-size: 12px; color:teal; font-weight:bold } w pliku HTML <head> <link rel="stylesheet" type="text/css" href="plik.css"> </head> 26

27 CSS kolory, obraz w tle Kolory color opisuje kolor pierwszoplanowy background-color opisuje kolor tła elementów body { background-color: #FF0000; color:green; } h1 { color:blue; background-color: Gray; } 27

28 CSS kolory, obraz w tle Obraz w tle background-image - pozwala na umieszczenie obrazu w tle (strony, tekstu, sekcji, itp.) background-repeat - pozwala na kontrolę obrazu w tle background-repeat: repeat-x - obrazek powtarza się w poziomie background-repeat: repeat-y - obrazek powtarza się w pionie background-repeat: repeat - obrazek powtarza się w poziomie oraz w pionie background-repeat: no-repeat - obrazek nie powtarza się background-attachment: scroll - obrazek porusza się razem z zawartością strony background-attachment: fixed - obrazek jest zablokowany body { background-color: #ff0000; color:green; background-image: url( kot.jpg"); background-repeat: repeat-y; } 28

29 CSS kolory, obraz w tle Położenie tła - background-position(top, bottom, center, left, right, cm, %, piksele) background-position: 2cm 2cm - obrazek jest ustawiony 2 cm od lewej i 2 cm od góry background-position: 50% 25% - obrazek jest ustawiony centralnie w poziomie i w jednej czwartej wysokości okna (licząc od góry) background-position: top right - obrazek jest ustawiony w górnym prawym rogu okna background: [background-color] [background-image] [backgroundrepeat] [background-attachment] [background-position] W przypadku, gdy jakaś wartość jest pominięta, przeglądarka przyjmuje wartość domyślną. Uwaga, gdy jakiś parametr jest błędny, lub jest ich za dużo cała właściwość background jest pomijana! 29

30 CSS czcionki font-family jest używany do ustawiania listy priorytetowej czcionek, które mają być wykorzystywane przez dany element lub całą stronę. Jeżeli pierwsza czcionka na liście nie jest zainstalowana w systemie klienta, przeglądarka poszuka kolejnej czcionki na liście dopóki nie znajdzie odpowiedniej. Czcionki są określane za pomocą: nazwy rodziny i rodziny ogólnej. Przykładem nazw rodzin czcionek (często nazywanych wręcz czcionkami ) mogą być: Arial, Times New Roman lub Tahoma. Rodzina ogólna określa grupę rodzin czcionek z pewnymi określonymi cechami. Tworząc listę czcionek dla strony, zaczynamy od najbardziej preferowanej czcionki, a następnie listę uzupełniamy alternatywnymi czcionkami. Lista czcionek może być uzupełniana rodziną ogólną, dzięki czemu w najgorszym wypadku przeglądarka wykorzysta czcionkę tej samej rodziny jeżeli żadna z wymienionych czcionek nie jest dostępna. np.: p {font-family: arial, verdana, sans-serif;} 30

31 CSS czcionki font-style definiuje styl użytej czcionki normal - styl prosty, italic - kursywa, oblique - styl pochylony, np.: div.normal{font-style: normal; font-size: 200%;} div.italic{font-style: italic; font-size: 100%;} div.oblique{font-style: oblique; font-size: 300%;} font-weight pozwala na użycie czcionki normalnej lub pogrubionej, wartości: normal bold bolder lighterbold lub {font-weight: n;} n = 100, 200, 300, 400 (=normal), 500, 600, 700 (=bold), 800, 900 Czasami rozróżniane są tylko dwie wartości: normal i bold. 31

32 CSS czcionki font-size pozwala na określenie wielkości czcionki {font-size: (możliwe wartości: n pt n px n in n cm n mm n pc n em n ex) ;} n liczba dodatnia pt - punkty (1/72 cala), px - piksele, in - cale, cm - centymetry, mm - milimetry, pc - picas(1 pc= 12 pt, em - rozmiar bieżącego fontu, ex - rozmiar znaku x w bieżącym foncie {font-size: m%;} m wartość w procentach (liczba dodatnia) {font-size: (możliwe wartości: xx-small x-small small smaller) ;} {font-size: (możliwe wartości: xx-large x-large large larger);} {font-size: medium ;} 32

33 Zakończenie 33