PROJEKTOWANIE I REALIZACJA STRON WWW. Informatyka i Technologia Informacyjna Suwałki

Transkrypt

1 PROJEKTOWANIE I REALIZACJA STRON WWW Informatyka i Technologia Informacyjna Suwałki

2 Wykład: Plan spotkań 2 marca 2013 r. sala :00-19:55 (6 godzin), 23 marca 2013 r. sala :00-19:55 (6 godzin). Ćwiczenia: 3 marca 2013 r. sala :40-16:35 (8 godzin), 24 marca 2013 r. sala :40-14:45 (6 godzin),

3 Wykład 12 godzin Zasady organizacji zajęć Ćwiczenia 14 godzin RAZEM 26 godzin

4 Literatura podstawowa Maria Sokół, ABC języka HMTL, HELION, Gliwice 2002 Laura Lemay, HTML 4 vademecum profesjonalisty, HELION, Gliwice 1998 Paweł Frankowski, Marcin Szumański, Joomla! Podręcznik administratora systemu, HELION, Gliwice 2008 Dan Rahmel, Joomla. Profesjonalne tworzenie stron WWW, HELION, Gliwice 2009

5 Literatura uzupełniająca Marcin Lis, Tworzenie stron WWW. Praktyczny kurs, HELION, Gliwice 2010 Maria Sokół, Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie III, HELION, Gliwice 2011 Bartosz Danowski, Tworzenie stron WWW w praktyce. Wydanie II, HELION, Gliwice 2007 Mirosław Sławik, Abc użytkownika Internetu Przewodnik po sieci, VIDEOGRAF EDUKACJA, Chorzów 2010

6 Kontakt Telefon: Internet:

7 Pytania od Państwa

8 WORLD WIDE WEB

9 World Wide Web (po angielsku: ogólnoświatowa sieć ), w skrócie Web lub częściej WWW hipertekstowy, multimedialny, internetowy system informacyjny oparty na publicznie dostępnych, otwartych standardach IETF i W3C. WWW jest usługą internetową, która ze względu na zdobytą popularność bywa błędnie utożsamiana z całym Internetem.

10 Historia Brytyjski inżynier i naukowiec sir Tim Berners-Lee, (W3C), napisał w marcu 1989 przedstawił rozbudowany system zarządzania informacjami, który stał się zalążkiem obecnej WWW. Do świąt Bożego Narodzenia 1990 roku zbudował wszystkie narzędzia niezbędne do działania WWW: przeglądarkę WWW (która służyła również jako edytor), pierwszy serwer WWW oraz pierwsze strony WWW, opisujące nowo powstały projekt.

11 Historia Na potrzeby projektu autor opracował system ogólnodostępnych, unikatowych identyfikatorów zasobów sieci: The Universal Document Identifier (UDI) znany później jako Uniform Resource Locator (URL) i Uniform Resource Identifier (URI), język służący projektowaniu stron HyperText Markup Language (HTML) oraz protokół przesyłania dokumentów hipertekstowych Hypertext Transfer Protocol (HTTP).

12 Historia Punktem zwrotnym w historii WWW było wprowadzenie, w 1993 roku, przeglądarki Mosaic, działającej w trybie graficznym. Dzięki połączeniu z Internetem, na całym świecie zaczęły powstawać serwery WWW, tworząc ogólnoświatowe standardy nazewnictwa domen internetowych. World Wide Web nie jest całym Internetem, a jedynie pewną aplikacją zbudowaną na jego bazie.

13 Co to jest WWW? Sieć WWW jest hipertekstowym systemem informacyjnym idea hipertekstu polega na tym, że zamiast czytać tekst po kolei, linia po linii (tak jak książkę), można przechodzić od punktu do punktu w sposób nieliniowy

14 Co to jest WWW? WWW jest systemem graficznym integruje ze sobą tekst z grafiką, dźwiękiem i sekwencjami wideo oraz wbudowane aplikacje

15 Co to jest WWW? WWW jest siecią wieloplatformową dostęp do WWW możliwy jest przy użyciu dowolnego sprzętu, dowolnego systemu operacyjnego i dowolnego typu ekranu ograniczenia wynikają z użycia niestandardowych rozszerzeń wprowadzanych przez producentów oprogramowania

16 Co to jest WWW? WWW jest siecią rozproszoną dane rozproszone są po całym świecie w tysiącach witryn na tysiącach serwerów każda witryna, każda strona ma swój unikalny adres URL (ang. Uniform Resource Locator) będący uniwersalnym identyfikatorem zasobów, np.

17 Co to jest WWW? WWW jest siecią dynamiczną dane zmodyfikowane na stronach www są automatycznie widoczne przez wszystkich użytkowników

18 Co to jest WWW? Sieć WWW jest interakcyjna możliwość reakcji na zdarzenia wywołane przez użytkownika, np. kliknięcie myszką możliwość wymiany informacji pomiędzy użytkownikiem a serwerem WWW za pomocą formularzy

19 Architektura statycznego środ. WWW WWW to środowisko klient-serwer

20 Jak to działa?

21 Jak to działa? Przeglądanie stron internetowych WWW - wpisanie adresu strony w przeglądarce internetowej, albo podanie linku do tej strony lub linku do konkretnego zasobu. Przeglądarka wysyła do serwera WWW, na którym zlokalizowana jest strona, szereg niewidzialnych dla nas zapytań, pobiera zawartość danej strony i wyświetla ją. Ogólnoświatowe standardy nazewnictwa domen internetowych.

22 Jak to działa? Nazwa serwera (część adresu URL) jest dekodowana na adres IP za pomocą Domain Name System (DNS) Przeglądarka następnie wywołuje dany zasób, wysyłając zapytanie do serwera określonego powyższym adresem. W przypadku typowej strony internetowej, przeglądarka najpierw pobiera jej skrypt HTML, analizuje go, a następnie wysyła zapytanie o resztę elementów wchodzących w jej skład (zdjęcia, grafika, dźwięki, video, animacje).

23 Składowe sukcesu www HyperText Markup Language (HTML) hipertekstowy język znaczników, zrozumiały dla każdej przeglądarki, służący formatowaniu zawartości strony internetowej; Hypertext Transfer Protocol (HTTP) protokół komunikacyjny używany do przesyłania stron internetowych; Uniform Resource Identifier (URI) standard identyfikatora zasobów w Internecie URL

24 Prefiks www

25 i Hypertext Transfer Protocol (HTTP) jest podstawowym elementem działania struktury www, HTTP Secure (HTTPS) - dodaje niezbędną warstwę ochronną w przypadku, gdy poufne informacje, takie jak hasła czy dane bankowe, mają być przesyłane w publicznej sieci Internet.

26 Architektura dynamicznego środ. WWW Architektura trójwarstwowa WWW Server Application Server DB Server

27 Serwer Aplikacyjny Serwer w sieci komputerowej, przeznaczony do zdalnego uruchamiania i użytkowania aplikacji. Zestaw oprogramowania (platforma) wspierająca programistę/developera przy tworzeniu aplikacji. Umożliwia oddzielenie logiki biznesowej od usług dostarczanych przez producenta platformy (bezpieczeństwo, zarządzanie transakcjami, skalowalność, czy też dostęp do baz danych). Do serwerów aplikacji należą m.in.: JBoss, BEA WebLogic, IBM WebSphere oraz platforma.net Microsoft-u.

28 Serwer bazy danych Oprogramowanie bądź system informatyczny służący do zarządzania komputerowymi bazami danych Posiada mechanizmy: środki do gromadzenia, utrzymywania i administrowania trwałymi i masowymi zbiorami danych, środki zapewniające spójność i bezpieczeństwo danych, sprawny dostęp do danych (zwykle poprzez język zapytań, np. SQL),

29 Serwer bazy danych c.d. środki programistyczne służące do aktualizacji/przetwarzania danych (API dla popularnych języków programowania), jednoczesny dostęp do danych dla wielu użytkowników (z reguły realizowany poprzez transakcje), środki pozwalające na regulację dostępu do danych (autoryzację), środki pozwalające na odtworzenie zawartości bazy danych po awarii, środki optymalizujące zajętość pamięci oraz czas dostępu (np. indeksy), środki do pracy lub współdziałania w środowiskach rozproszonych.

30 Serwer bazy danych Pełen adres URL ma następującą postać syntaktyczną: scheme://host:port/path/filename?query scheme - typ serwisu (nazwa protokołu), np HTTP, FTP; host - nazwa hostu (komputera w sieci WWW) port - numer portu na którym nasłuchuje dany serwer ( domyślnym numerem portu jest 80); path - ścieżka podkatalogów na serwerze (domyślnie katalog główny root); filename - nazwa dokumentu (domyślnie index.html) query treść zapytania postaci nazwa=wartość

31 Protokół HTTP (Hypertext Transfer Protocol) za pomocą protokołu HTTP przesyła się informacje w sieci WWW udostępnia on znormalizowany sposób komunikowania się komputerów ze sobą określa on formę żądań klienta dotyczących danych oraz formę odpowiedzi serwera na te żądania (protokół request/response)

32 Protokół HTTP (Hypertext Transfer Protocol) metody GET parametry zapytania przekazane w zapytaniu (query string) POST posiada blok danych umieszczony za nagłówkiem; posiada dodatkowe pola nagłówka: Content- Type:, Content-Length:

33 Metoda POST Nagłówek Treść HTTP Request POST /login.jsp HTTP/1.1 Host: User-Agent: Mozilla/4.0 Content-Length: 29 Content-Type: application/x-www-form-urlencoded login=julius&password=zgadnij HTTP Response HTTP/ OK. Date: Fri, 31 Dec :59:59 GMT Content-Type: text/plain Content-Length: 1354 status=ok

34 Metoda GET HTTP Request GET /index.html?login=julius&password=zgadnij HTTP/1.1 Host: User-Agent: Mozilla/4.0

35 Initial request line Protokół HTTP posiada trzy części: nazwę metody, ścieżkę lokalną zasobu i używaną wersję HTTP GET /path/to/file/index.html HTTP/1.0 Initial Response Line (Status Line) posiada trzy części: wersję HTTP, kod statusu odpowiedzi i opis przyczyny HTTP/ OK lub HTTP/ Not Found

36 Kody statusu odpowiedzi 2xx sukces, np. 200 OK 3xx przekierowanie, np. 302: Moved Temporarily 4xx błąd klienta, np. 404: Not Found 5xx błąd serwera, np. 500: Internal Server Error

37 Cyberprzestępczość, Bezpieczeństwo Złośliwy kod.

38 Dead links Archiwizacja stron WWW

39 Standaryzacja World Wide Web Consortium (W3C), Internet Engineering Task Force (IETF) URI HTTP

40 Prędkość transmisji Standardowe wytyczne dla idealnego czasu odpowiedzi z serwera to: 0,1 sekundy (jedna dziesiąta sekundy) 1 sekunda 10 sekund

41 Krótka statystyka 550 miliardów dokumentów internetowych w 2001 r. 11,5 miliarda publicznie indeksowanych stron internetowych od końca stycznia 2005 r. 25,21 miliarda w marcu 2009 r. Bilion ( ) unikatowych adresów URL r.

42 Jak trafić na stronę www bezpośrednio (za pomocą znanego adresu internetowego) Bezpośrednie skorzystanie z adresu internetowego jest najpewniejszą i najszybszą metodą dotarcia do określonego źródła wiedzy. Najpoważniejszą wadą tej metody jest konieczna znajomość dokładnego adresu.

43 Jak trafić na stronę www pośrednio za pomocą wyszukiwarek; Ten sposób dotarcia do szukanych fragmentów wiedzy ma znacznie poważniejsze wady. Efekt wyszukiwania zależy od wybranej wyszukiwarki, ponieważ poszczególne wyszukiwarki posługują się różnymi algorytmami wyszukiwania i nie zawsze docierają do tych samych zasobów sieciowych.

44 Wyszukiwarki internetowe to programy lub strony internetowe, ułatwiające użytkownikom znalezienie informacji w sieci (ang. search engine). Określenie wyszukiwarka stosowane jest do: Stron internetowych serwisów wyszukujących czyli implementacji oprogramowania wyszukującego działającego z interfejsem WWW ogólnodostępnym dla internautów

45 Algorytm wyszukiwarki Algorytm wyszukiwarki internetowej to zbiór zasad kierujących jej oprogramowaniem, umożliwiającym wyszukanie oraz przedstawienie w odpowiedniej kolejności wyników wyszukiwania. Algorytm wyszukiwarki opisuje między innymi, które czynniki i w jakim stopniu mają wpływać na wyniki zapytań. Do najważniejszych czynników branych zazwyczaj pod uwagę przez większość popularnych wyszukiwarek internetowych należą:

46 Algorytm wyszukiwarki c.d. Liczba i jakość linków prowadzących do stron Słowa kluczowe w linkach prowadzących do strony Budowa kodu strony (np.: stosunek treści do kodu) Treść strony (np.: hierarchia nagłówków) Popularność domeny głównej

47 Oprogramowanie wyszukiwarek to zestaw programów, modułów, z których każdy ma oddzielne zadanie. Są to: Oprogramowanie wyszukiwarek Crawler, Robot, Pająk, Spider, Bot - moduły pobierające dokumenty z sieci Indekser - moduł analizujący i oceniający Searcher - interfejs wyszukujący wyszukiwarki/podsystem odpowiadający na zapytania/analizator zapytań oraz moduł prezentacji wyników

48 Oprogramowanie wyszukiwarek c.d. oraz : programy konwersji dokumentów (np.pdf) programy archiwizujące repozytorium (najczęściej w postaci skompresowanej) programy analizy i wykrywania technik niepożądanych (spam) moduły administracyjne

49 Google Google jest obecnie najpopularniejszą wyszukiwarką na świecie dzięki algorytmowi PageRank oraz zadowolonym, powracającym użytkownikom. Korzystając z witryny można uzyskać informacje w wielu językach, obserwować notowania giełdowe, przeglądać mapy, najważniejsze wiadomości, znajdować numery telefoniczne, przeszukiwać grupy dyskusyjne oraz oglądać grafiki.

50 Google PageRank jest rozwinięciem znanej od dawna heurystyki, wedle której jakość tekstu jest proporcjonalna do liczby tekstów na niego się powołujących. Ulepszenie zaproponowane przez autorów Google polegało na ważeniu jakości odnośników wskazujących na rozpatrywany tekst ich własną wartością PageRank. Innymi słowy: jeśli na dany tekst powołuje się artykuł, który sam ma wysoką ocenę, ma to większe znaczenie, niż gdy na ten sam tekst powołuje się mało popularna strona.

51 Google Metody zbliżone do algorytmu PageRank są obecnie coraz śmielej wprowadzane do mechanizmów innych wyszukiwarek internetowych. Szczegóły właściwego algorytmu nigdy nie zostały upublicznione i są jednymi ze ściśle strzeżonych tajemnic Google. Do tego są najprawdopodobniej sukcesywnie poprawiane, aby zwiększać efektywność mechanizmu. Wszystkie informacje dostępne jawnie przedstawiają jedynie wzorcową wersję algorytmu stosowanego w wyszukiwarce Google.

52

53 Polski ranking wyszukiwarek

54 Przeglądarki internetowe to programy, który umożliwiają pobieranie i przeglądanie stron sieci Web, a także odtwarzanie niektórych plików multimedialnych

55 Polski ranking przeglądarek

56 Funkcje przeglądarek internetowych zakładki (ulubione) menadżer pobierania plików przeglądanie w kartach zapamiętywanie haseł zarządzanie prywatnymi danymi (cookies, formularze ) blokowanie wyskakujących okienek sprawdzanie pisowni powiększanie tekstu, grafiki bądź całej zawartości strony i wiele innych

57 Zagadka Co robi lojalny programista? Wiesza się razem ze swoim programem?

58 Zasady projektowania stron www

59 Strona internetowa Strona internetowa, strona WWW (ang. web page) dokument HTML udostępniony w Internecie przez serwer WWW. Po stronie hosta użytkownika, strona WWW jest otwierana i wyświetlana za pomocą przeglądarki internetowej.

60 System zarządzania treścią (ang. Content Management System). Joomla WordPress Drupal CMS

61 Przejrzystość Szybkie działanie Łatwa obsługa Cechy dobrej witryny

62 Netykieta Dobre zwyczaje obowiązują też w sieci, ale tutaj rzadko zdarzają się cenzorzy. Utrzymanie minimum poziomu kulturalnego zależy od nas samych! nie podpisuj się pod cudzą pracą oszczędnie dozuj grafikę pamiętaj, że treść jest ważniejsza od formy! wulgaryzmy świadczą dobitnie o poziomie piszącego

63 Formy prezentacji treści Projekt witryny będącej źródłem konkretnych informacji (oparty głównie na informacji tekstowej) Projekt jako źródło artystycznych doznań autora, wyraz swobody działań twórczych (tworzony głównie w oparciu o obrazy graficzne) Większość witryn łączy (w różnych proporcjach) te dwie cechy

64 Projektowanie wstępne Strona główna i nawigacja: projekt powinien mieć konstrukcję pozwalającą na łatwe dodawanie nowych elementów, zmianę ich kolejności itp. Spis treści: powinien umożliwiać wprowadzanie zmian Najważniejsze informacje umieszcza się na górze strony, by były widoczne w całości, bez konieczności przewijania

65 Projektowanie wstępne Używamy krótkich zdań, wyróżniając ważne zwroty i słowa Odwracamy logikę tekstu wnioski umieszczamy na początku (czytanie na ekranie sprawia większą trudność niż czytanie na papierze, stąd tendencja użytkowników do prześlizgiwania się wzrokiem po tekście w poszukiwaniu informacji)

66 Projektowanie wstępne Długie teksty należy dzielić na krótsze i umieszczać je w miarę możliwości na osobnych stronach

67 Skład tekstu Długi tekst należy podzielić na krótkie (ok. 10 wersów) akapity, wyróżniając je nagłówkami (tekst na ekranie czyta się wolniej) Stosujemy nie więcej niż 2 3 różne czcionki, definiując jednocześnie np. 2 wielkości (przy zastosowaniu większej ilości czcionek projekt wygląda niespójnie)

68 Skład tekstu Odnośniki tekstowe (linki)- pozostawiamy ich typowy wygląd (kolor ciemnoniebieski, a po przeczytaniu - fioletowy) Unikamy wyróżniania poprzez podkreślenie innych części tekstu niż linki Unikamy tworzenia odnośników z całych zdań

69 Czcionki Unikamy czcionek szeryfowych

70 Czcionki Unikamy czcionek dekoracyjnych i kursyw (italic)

71 Unikamy wyśrodkowywania tekstu oraz wyrównywania do prawej strony Wyrównanie tekstu

72 Kolory tła zbliżone do koloru tekstu lub nadmiernie z nim kontrastujące zmniejszają czytelność tekstu Tekst i tło

73 Ciemny tekst na białym tle jest bardziej czytelny niż biały tekst na ciemnym tle Tekst i tło

74 Witryny WWW Witryna to zbiór składający się z jednej lub kilku stron WWW powiązanych ze sobą w sposób, który odzwierciedla istotę zawartych w niej informacji i tworzy spójną całość Struktury witryn:

75 Struktura hierarchiczna posiada wiele poziomów strona główna zawiera ogólny przegląd opisywanych treści oraz połączenia do stron, które znajdują się na niższych poziomach hierarchii

76 Struktura liniowa przejście od strony do strony odbywa się w sposób liniowy (krok po kroku)

77 Struktura liniowa z alternatywą posiada możliwość odejścia od głównej ścieżki dokumentów

78 Struktura mieszana (liniowo hierarchiczna)

79 Struktura sieciowa brak ogólnej struktury dokumentów połączenia między stronami za pomocą hiperłączy

80 nauczalność wydajność zapamiętywanie błędy satysfakcja Web Usability Jest wyznacznikiem dla stron WWW w jakim kierunku mają się rozwijać, by zostały zauważone i docenione. Jest miarą jakości witryny w odniesieniu do możliwości użytkownika w poruszaniu się po niej.

81 Web Usability Slogan reklamowy Znacznik TITLE Informacje z dokładnym opisem Punkty startowe Wyszukiwarka wewnętrzna

82 Web Usability Przykładowe treści lub próbki Tworzenie linków Wykorzystywanie strony głównej do promocji najważniejszych produktów Unikanie zbyt wielu kolorów, reklam Unikanie zbędnej grafiki

83 Web Usability - prościej Celowość tworzenia danej witryny Sprawność działania witryny Zrozumiałość witryny (zarówno treści jak i zasad funkcjonowania i nawigacji)

84 Web Usability - błędy Korzystanie z technologii Flash (konieczność pobierania i instalowania pluginów) Animacje odtwarzane w cyklu ciągłym (dekoncentrują użytkownika i rozpraszają jego uwagę)

85 Web Usability - błędy Ograniczenie autonomii użytkownika poprzez: zmianę sposobu funkcjonowania przycisków (np. Back). przekierowania do miejsc innych, niż jest to zamiarem użytkownika. stosowanie wyskakujących okienek. stosowanie okien pełnoekranowych (pozbawienie użytkownika paska nawigacji, paska adresowego, listy Ulubionych itp.

86 Web Usability - błędy Zbyt długi czas ładowania Reklamy w witrynach internetowych Źle rozplanowana nawigacja brak przycisku powrót do strony głównej strona główna nie zawiera wszystkich istotnych dla użytkownika linków Używanie zwrotów w rodzaju kliknij tutaj do przekierowania użytkownika np. do innej strony

87 Metody zapewnienia użyteczności modelowanie na poziomie wciskania klawiszy procesualny model człowieka wywiad grupa fokusowa ocena heurystyczna wzorce projektowania ankieta ewaluacja diagnostyczna subiektywna ocena zdalna ocena metody hybrydowe (np. 8 +3)

88 Metody badania użyteczności Ewaluacja diagnostyczna, zwana również testami wykonania z udziałem użytkowników, jest najbardziej rozbudowaną, najkosztowniejszą, ale i przy tym najbardziej efektywną metodą wykorzystywaną w UCD (User Centred Design projektowanie skupione na użytkowniku).

89 Eyetracking Metody badania użyteczności

90 Metody badania użyteczności Actiontracking Keytracking Mousetracking Clicktracking zdalna ocena

91 Elementy języka HTML

92 Właściwości języków znakowania opis dokumentu w pliku tekstowym przenoszalność i kompatybilność poprzez wykorzystanie jedynie znaków ASCII oddzielenie struktury dokumentu od jego wyglądu (podział dokument-widok) opis struktury strony a nie wyglądu konkretnych jej elementów - odwrotnie niż w edytorach graficznych typu WYSIWYG (ang. What You See Is What You Get) praca w środowisku wieloplatformowym (różne komputery, systemy operacyjne i przeglądarki) hierarchiczna struktura znaczników

93 HTML HTML (ang. HyperText Markup Language) hipertekstowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych.

94 Historia języka HTML 1989 HTML opracowana przez Tima Berners-Lee zawiera kilkanaście znaczników wraz z odsyłaczami 1995 HTML podstawowy zestaw znaczników, obsługiwany przez wszystkie przeglądarki; 1996 HTML wprowadzono przede wszystkim obsługę: tabel, apletów oraz otaczanie obrazów tekstem. Można było określać kolor i grafikę tła. Pojawiły się formularze HTML 4.0 wprowadzono dynamiczny HTML i arkusze stylów;

95 HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej, umożliwia określenie wyglądu dokumentu w przeglądarce internetowej, w składni HTML wykorzystuje się pary znaczników umieszczone w nawiasach ostrokątnych, np. <title> i </title> lub <h1> i </h1> czy <script> i </script>, nie jest zaliczany do języków programowania, niezależny od systemu operacyjnego i wykorzystywanego sprzętu komputerowego.

96 Droga Przeglądarko! List do przeglądarki Pokaż, proszę, zdjęcie mojej salamandry w lewym górnym narożniku na zielonym tle. Wytłuść pod zdjęciem jej nazwę Ernest the Salamander. Po prawej stronie podaj wagę i wymiary Ernesta. Zamieść również opis w języku angielskim wraz z adresem ! This is Ernest the Salamander, my pet and close friend. Ernest and I have been friends for quite some time. If you have a salamander, send me, please, at...

97 List do przeglądarki w kodzie HTML <html> <head> <title>ernest the Salamander</title> </head> <body bgcolor= green > <table> <tr> <td> <p> <img src= Zdjęcie.jpg > <br> <h2>ernest the Salamander</h2> </p> </td>

98 List do przeglądarki w kodzie HTML <td> <p> <h3>ernest s Vitals</h3> <ul> <li>height in</li> <li>weight 40 gr</li> <li>sliminess 6.5</li> </ul> </p> </td> </tr> </table> <p> There is Ernest the Salamander, my pet and... at <a href=mailto:j.zuh@pr.pl>j.zuh@pr.pl</a> </p> </body> </html>

99 List w przeglądarce Ernest the Salamander Ernest s Vitals Height in Weight 40 gr Sliminess 6.5 This is Ernest the Salamander, my pet and close friend. Ernest and I have been friends for quite some time. If you have a salamander, send me, please, at j.zuh@pr.pl

100 HTML w HTML-u zdefiniowane są trzy znaczniki, które opisują ogólną strukturę strony oraz dostarczają podstawowych informacji nagłówkowych: <HTML> <HEAD> <! informacje nagłówkowe > </HEAD> <BODY> <! treść strony > </BODY> </HTML>

101 Edytory HTML W najprostszym przypadku dokument HTML, czyli stronę internetową, można pisać wprost w edytorze tekstu używając odpowiednich komend. Specjalizowane edytory (polskie!) to Pajączek, Tiger, ezhtml, WebPage Xpress. Użycie polskich edytorów uwalnia nas od zabawy w formatowanie sposobu wyświetlania polskich znaków!

102 Komentarz Opis znaczników w HMTLu <! treść komentarza > służy do zamieszczenia w kodzie źródłowym komentarza jest ignorowany przez przeglądarkę

103 Nagłówek <HEAD> <HEAD> <TITLE> Moja własna strona </TITLE> <META http-equiv="content-type" content= "text/html; charset=iso "> dla innego standardu: <META http-equiv="content-type" content= "text/html; charset=windows-1250"> </HEAD>

104 Nagłówek <HEAD> <HEAD> <TITLE> Moja własna strona </TITLE> <META http-equiv="content-type" content= "text/html; charset=iso "> <META NAME="Description" CONTENT="Na tej stronie piszę o sobie" > <META NAME="Keywords" CONTENT="piłka nożna, koszykówka, heavy metal > <META NAME="Language" CONTENT="pl" > </HEAD>

105 Automatyczne odświeżanie strony <HEAD> <TITLE> Moja kamera sieciowa </TITLE> <META http-equiv="content-type" content= "text/html; charset=iso "> <META http-equiv="refresh" content="60">... </HEAD> Strona będzie odświeżać się co 60 sekund

106 Przekierowanie na nową stronę <HEAD> <TITLE> Moja stara strona </TITLE> <META http-equiv="content-type" content= "text/html; charset=iso "> <META http-equiv= Refresh" content= 10; URL= </HEAD> Za 10 sekund nastąpi przekierowanie do nowej strony

107 <link> Opis znaczników - <HEAD> definiuje związek pomiędzy dwoma dokumentami atrybuty: href adres URL rel relacja między dokumentami type definiuje MIME type, np. text/css text/javascript image/gif <head> <link rel="stylesheet" type="text/css" href="theme.css"> </head>

108 <BODY> <BODY> Tu mogę wpisywać tekst, który po prostu ukaże się na mojej stronie. Muszę pamiętać o tym, że komputer sam będzie dzielił tekst, a zatem takie coś nic mi nie da! </BODY>

109 Akapity i podział (łamanie) wiersza <BODY> <P> Tu mogę wpisywać tekst, który po prostu ukaże się na mojej stronie.</p> <P> Muszę pamiętać o tym, by zaznaczać podział tekstu na akapity, a jeśli chcę przejść do nowej linijki, to robię to tak: <BR> i już nowa linijka! </P> </BODY>

110 Wyrównanie tekstu <BODY> <P ALIGN=LEFT> Tekst wyrównany do lewej.</p> <P ALIGN=RIGHT> Wyrównanie do prawej.</p> <P ALIGN=CENTER> Centrowanie.</P> <P ALIGN=JUSTIFY> Justowanie (wyrównanie do obu marginesów).</p> </BODY>

111 Linia pozioma <BODY> <P> Trochę tekstu przed linią.</p> <HR SIZE=10 WIDTH=300> <P> Ten tekst wyświetli się już po poziomej linii o szerokości 300 pikseli.</p> <HR WIDTH=50%> <P> Poprzednia linia miała szerokość równą połowie strony. </P> </BODY>

112 Tytuły tagi <H1> do <H6> <BODY> <H1> Rozdział 1.</H1> <H2> Podrozdział 1.1 </H2> <P> Tu będzie treść podrozdziału 1.1.</P> <H2> Podrozdział 1.2 </H2>... </BODY>

113 Atrybuty czcionki <P> <B> Tekst pogrubiony (Bold)</B> <I> Tekst pochylony, kursywa (Italic)</I> <U> Tekst podkreślony (Underline)</U> <BR> Tekst chemiczny : <BR> H<SUB>3</SUB>O<SUP>+</SUP> </P>

114 Wielkość czcionki Wielkością czcionki możemy sterować w skali od 1 do 7, albo też użyć odpowiednich tagów <SMALL> i <BIG>: <FONT SIZE= 1 > Drobniutki tekst</font> <FONT SIZE= 7 > Ogromny tekst</font> <FONT SIZE= +2 > Czcionka powiększona o dwa stopnie względem czcionki bazowej</font> <SMALL> Tekst zmniejszony </SMALL> <BIG> Tekst powiększony </BIG>

115 Kolor czcionki Kolor czcionki możemy wybrać spośród wartości predefiniowanych albo też podać składowe RGB: <FONT COLOR= green >Zielony tekst</font> <FONT COLOR= white >Biały tekst</font> <FONT COLOR= #FF0000 > Kolor... jaki? (czerwony) </FONT> Ale czy nasze napisy będzie widać na tle strony?

116 Tło strony Jako tło możemy podać wartość predefiniowaną, składowe RGB albo nazwę obrazka. Żądany atrybut jest parametrem tagu <BODY>. Można też ustawić domyślny kolor czcionki: <BODY BGCOLOR= green > lub <BODY BGCOLOR= # > albo <BODY BACKGROUND= images/tło.gif > czy też <BODY BGCOLOR= navy TEXT= white >

117 Predefiniowane kolory black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua

118 Lista nieuporządkowana atrybuty: type: disc, square, circle zawiera pozycje tworzone za pomocą elementu li element li w specyfikacji 3.2 był elementem liniowym od wersji 4.01 li jest elementem blokowym <UL> <LI> Punkt pierwszy</li> <LI> Punkt kolejny</li> </UL>

119 Lista numerowana (uporządkowana) atrybuty type: A, a, I, i, 1 start <OL> <LI> Punkt pierwszy (z numerem)</li> <LI> Punkt drugi (z numerem)</li> </OL>

120 Siła hipertekstu: odnośniki Wstawienie odnośnika na stronie to użycie tagu <A>: <A HREF= > Kliknij tu by odwiedzić strony PWSZ Suwałki </A> <A HREF= Napisz list do Baby Jagi </A> <A HREF= #objaśnienie > Kliknij jeśli coś jest niejasne </A> po kliknięciu komputer przeniesie nas do takiego miejsca: <A NAME= objaśnienie > I wszystko jasne </A>

121 Siła hipertekstu: odnośniki c.d. Można tworzyć odnośniki do obrazków, umożliwiać ściąganie plików, a w wysyłanym mailu np. przygotować temat: <A HREF=../obrazy/plik.jpg > Kliknij tu aby zobaczyć obrazek </A> <A HREF= mailto:babajaga@las.pl?subject= u-wolnić Jasia > Petycja do Baby Jagi </A> <A HREF= ftp://mój.serwer/katalog/plik.exe > Kliknij tu aby ściągnąć plik.exe </A> <A HREF= str2.html >Przejście na str.2 </A>

122 Obrazy i grafika Aby wstawić w tekst obrazek posługujemy się komendą: <IMG SRC= obrazki/obrazek.gif > Obrazek wyśrodkowany w wierszu: <CENTER> <IMG SRC= plik.gif > </CENTER> Sterujemy wielkością obrazka: <IMG SRC= obrazek.gif WIDTH=300 HEIGHT=200> Jeśli nie chcemy otaczać obrazka tekstem, wstawiamy go w wydzielony akapit: <P> <IMG SRC= plik.jpg > </P>

123 Obrazy i grafika c.d. Za otaczanie obrazka tekstem odpowiada atrybut ALIGN: <IMG SRC= obrazki/obrazek.gif ALIGN=top> Możliwe wartości tego atrybutu: ALIGN=top ALIGN=bottom ALIGN=middle ALIGN=left ALIGN=right Polecenie to działa również na znaną nam już linię poziomą: <HR WIDTH=50% ALIGN=left>

124 Tabele Wiersze tworzymy tagiem <TR>, a komórki tagiem <TD>: <TABLE BORDER=10 WIDTH=80% ALIGN=top> <TR> <TD> a11 </TD> <TD> a12 </TD> </TR> <TR> <TD> a21 </TD> <TD> a22 </TD> </TR> <TR> <TD> a31 </TD> <TD> a32 </TD> </TR> </TABLE>

125 Grupowanie elementów Grupowanie elementów <div>: umożliwia utworzenie obszaru składającego się z wielu elementów blokowych pozwala na formatowanie grupy elementów automatycznie umieszcza znaki końca linii przed i po bloku div <div style="color:#ff0000;"> <h4>this is a header in a div section</h4> <p>this is a paragraph in a div section</p> </div>

126 Grupowanie elementów liniowych Grupowanie elementów liniowych <span>: umożliwia grupowanie elementów w celu ich sformatowania nie umieszcza znaków końca linii <p>this is a paragraph <span style="color:#0000ff;">this is a paragraph</span> This is a paragraph</p> <p> <span style="color:#00dd45;"> This is another paragraph </span> </p>

127 Przykładowe znaki specjalne (funt szterling) &pound - (euro) &euro - (znak praw autorskich) &copy - (zastrzeżony znak towarowy)&reg - (ułamek zwykły) &frac14 - ¼ (index górny) &sup3 - ³ (znak akapitu) &para - (kropka) &bull - (promil) &permil -

128 Macromedia Flash <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" kwave/cabs/flash/swflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align=""> <param name="movie" value="movie.swf"> <embed src="movie.swf" quality="high" width="400" height="300" name="movie" align="" type="application/x-shockwave-flash" pluginspage=" hplayer"> </object>

129 Kaskadowe arkusze stylów CSS

130 Czym jest CSS CSS to kaskadowe arkusze stylów (Cascading Style Sheets) Style definiują w jaki sposób wyświetlać (formatować) elementy HTML Style są przechowywane w tzw. arkuszach stylów (CSS files) Style są uporządkowane kaskadowo Style zostały dodane do wersji HTML 4.0