<?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)
<?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
HTML HTML Hyper Text Markup Language 3
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
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> <!-- Istnieje możliwość wpisania bloku komentarza //--> 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
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-8859-2"> <meta http-equiv= "content-type" content="text/html;charset=utf-8"> 6
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=http://www.mat.umk.pl/glowna.html"> lub zupełnie innej strony <meta http-equiv="refresh" content="30; url=http://www.umk.pl/uwagi/test.php"> 7
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 1997 08: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
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
HTML analizatory i generatory meta znaczników http://www.submitexpress.com http://www.jusz.info/generator/ 10
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
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
HTML znaki i symbole specjalne Pełna lista znaków specjalnych: http://www.w3schools.com/tags/ref_entities.asp Pełna lista symboli specjalnych: http://www.w3schools.com/tags/ref_symbols.asp Kod HTML " & Znak cudzysłów niełamliwa spacja & < < > > symbol euro wyliczenie pauza półpauza - 13
HTML walidacja kodu W3C walidator (http://validator.w3.org/) Polecane kursy i ciekawe miejsca http://www.w3schools.com/xhtml/ http://www.w3.org/tr/xhtml1/ http://xhtml.b7.pl/specyf.html http://www.kurshtml.boo.pl/html/xhtml.html http://algorytmy.pl/doc/xhtml/ http://www.w3.org/qa/2002/04/valid-dtd-list.html 14
<?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
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
XHTML budowa dokumentu <!DOCTYPE definicja typu > <html xmlns="http://www.w3.org/1999/xhtml"> <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
XHTML -!DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Zawiera wszystko to co Strict DTD plus zdeprecjonowane elementy i atrybuty. 18
<?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
CSS http://www.w3.org/tr/css21/ 20
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
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"> <!-- znacznik {właściwość: wartość; } --> </style> </head> 22
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"> <!-- p.nieb{color: blue;} --> </style> </head> <body> <p class="nieb">niebieskitekst</p> </body> </html> 23
CSS klasy nie związane ze znacznikami Klasy niezwiązane ze znacznikami można używać z różnymi znacznikami <style type="text/css"> <!--.nieb{color: blue;} --> </style> użycie <znacznik class="nieb"> tekst </znacznik> 24
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"> <!--.nieb {color: blue;} --> </style> </head> <body> <p class="nieb">niebieski tekst </p> <h1 class="nieb">niebieski tekst </h1> <div class="nieb">niebieski tekst </div> </body> </html> 25
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
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
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
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
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
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
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
Zakończenie http://www.mat.umk.pl/~jaymz/ 33