HTML - MCE 24
Transkrypt
HTML - MCE 24
Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Materiały szkoleniowe opracowane przez: World Wide Web Centrum Szkoleń Informatycznych VEDIUS Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Spis treści Wybierz blok tematyczny Wprowadzenie Style CSS HTML Grafika na www XHTML Formularze Projektowanie strony Koniec 2 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jakie języki poznamy... HTML XHTML CSS JavaScript JAVA PHP 6 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Internet – (łac. inter między, ang. net sieć, dosłownie międzysieć) 7 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Troche historii 1989: Fizyk Tim Berners-Lee przedstawił projekt prezentacji informacji przy użyciu hypertext. 1990: pierwsza strona pod adresem: http://info.cern.ch/hypertext/WWW/TheProject.html 1991: naukowcy z CERN-u opracowali standard WWW; 20 grudnia 1991 - Polska zostaje przyłączona do Internetu 9 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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. http://pl.wikipedia.org/wiki/Internet 12 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Hipertekstowy System Informacyjny 15 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 http://www.fajnastrona.com/, podaje właśnie URL. WWW jest siecią dynamiczną 16 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Przeglądarki sieciowe Mozilla Firefox Netscape Opera Internet Explorer Safari 17 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Inny przyklad Strona firmowa 1. O firmie a) Histroria b) Czasy obecne c) Czym sie zajmujemy 2. 3. 4. Oferta Nasz cel Kontakt a. Dane kontaktowe b. Mapka dojazdu 25 26 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Pierwsza strona w HTML-u <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Mój pierwszy dokument</TITLE> </HEAD> <BODY> <H1>To jest dokument HTML</H1> </BODY> </HTML> 27 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego HTML Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu, no i oczywiście dobre chęci. 28 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego (X)HTML (X)HTML (Extensible) Hypertext Markup Language (Rozszerzalny) Hipertekstowy Język Oznaczania 29 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Polskie znaki ąćęłńóśźżĄĆĘŁŃÓŚŹŻ 30 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego TRYB WYSIWYG Programy do tworzenia stron WWW MS FrontPage Dreamweaver NVU 31 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ramy dokumentu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zwykły tekst “Zwykły tekst ... Normalny tekst... Normalny tekst...” “Zwykły tekst ...Normalny tekst... Normalny tekst...” 33 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Tekst pochylony, Tekst podkreślony <i>Tu wpisz tekst</i> - tekst pochylony, kursywa (italic), <u>Tu wpisz tekst</u> - podkreślenie (underline). 41 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kolorki <font color="kolor">Tu wpisz tekst</font> http://www.kurshtml.boo.pl/html/wykaz_kolorow,kolory.html 43 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Łą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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kolor tła oraz tekstu <body bgcolor="kolor tła" text="kolor tekstu"> Tu jest właściwa treść strony </body> 46 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ten sam folder Poprawnie: plik.gif Niepoprawnie: C:\www\plik.gif, plik.GIF, plik Przykład zaczerpnięty z: http://www.kurshtml.boo.pl/html/wstawienie_obrazka,zielony.html 48 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: http://www.kurshtml.boo.pl/html/wstawienie_obrazka,zielony.html 49 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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: http://www.kurshtml.boo.pl/html/wstawienie_obrazka,zielony.html 50 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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: http://www.kurshtml.boo.pl/html/wstawienie_obrazka,zielony.html 51 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Odsyłacz do adresu internetowego <a href=“http://adres internetowy">opis odsyłacza</a> Adres musi zaczynać się od http:// kliknij mnie 55 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Odsyłacz pocztowy <a href="mailto:adres poczty e-mail">opis odsyłacza</a> Zamiast: "adres poczty e-mail" należy wpisać adres poczty elektronicznej (np.: jan_kowa[email protected]). Należy z rozwagą używać tego znacznika, ponieważ ten sposób wykorzystuje spam. 56 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 "http://" (np.: http://www.onet.pl), adres poczty elektronicznej poprzedzony przez "mailto:" (np.: mailto:[email protected]). 57 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Darmowe szablony SiteQL.net Tymex.org Webdiary.pl Webinside Webmade.org Webmaster.Mocny.Com WebPL.org Xklonos 58 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Generator szablonu http://www.kurshtml.boo.pl/generatory/auto szablon.html http://www.nucode.vel.pl/site.php?id=gensza 59 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 60 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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-8859-2" /> <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 e-mail" /> </head> 62 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Dodatkowe atrybuty <meta http-equiv="Creation-Date" content="data" /> //np. "Tue, 20 Aug 1996 14: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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Nieco więcej o nich 64 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wyświetlanie Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników: ▪ w bloku ▪ w linii 65 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 4.01 - zaleca się stosowanie stylów. Jak również: SIZE, COLOR, FACE 66 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 4.01 - zaleca się stosowanie stylów. 67 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego O formatowaniu Indeks górny <sup>...</sup> Indeks dolny <sub>...</sub> 68 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Tekst preformatowany <pre>...</pre> 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Tekst preformatowany <PRE> () Muu (oo) \/------- \ || |\ ||---W || * || || </PRE> 70 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zmienna, cytaty Zmienne <var>...</var> - Czcionka pochylona dla równań y = ax2 + 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego I inne EM(emfaza), KBD (klawiatura), SAMP (przykład), INS i DEL (zmiany), ABBR (skrót), ACRONYM(akronim), DFN (definicja). 73 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 76 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Lista wypunktowana <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> 78 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 4.01 zaleca się stosowanie stylów. 79 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Pozioma linia <hr> <hr /> <hr noshade="noshade" /> <hr size="2" /> <hr width="75%" /> <hr align="center" size="4" width="200" /> <hr width=“10%" /> <hr color=“red" /> 81 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 83 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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= “http://onet.pl”>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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Podlinkowanie <center> <img src="http://publikacja.cba.pl/url_a_href/liscie. jpg" alt="liscie " width="306" height="407" align="middle" /> </center> 86 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Odsyłacz FTP <a href="ftp://ftp.adres">pliki ftp</a> Protokół FTP - File Transfer Protocol (Protokół Transmisji Plików) http://support.acer-euro.com/drivers/ftp/ftp.html ftp://sunsite.icm.edu.pl/pub/ ftp://ftp.freebsd.org/pub/FreeBSD/releases/i386/7. 0-RELEASE/ 87 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Własny folder download http://login.moj.pl/home/www/download/ Przykładowy serwer http: http://ftp.tpnet.pl/vol/d1/ Aby udostepnić jeden plik do ściągnięcia piszemy: <a href= "plik.zip">Plik plik.zip do pobrania</a> 88 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Anatomia URL Protokół Ścieżka dostępu i nazwa pliku http://login.mojserwer.pl/home/www/index.html Nazwa serwera 89 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Komunikatory internetowe Gadu-Gadu <a href="gg:numer">opis</a>Status użytkownika <img src="http://status.gadugadu.pl/users/status.asp?id=numer&styl=styl" 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="http://status.tlen.pl/?u=użytkownik&t=styl" alt="Tlen" /> gdzie jako styl należy podać liczbę 1, 2 lub 3. http://www.kurshtml.boo.pl/html/komunikatory_internetowe,odsylacze.ht ml 90 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 voicemail - poczta głosowa sendfile - wyślij plik Status użytkownika <img src="http://mystatus.skype.com/ikony/użytkownik" 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. http://www.kurshtml.boo.pl/html/komunikatory_internetowe,odsylacze.html 91 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 92 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Podstawowa struktura tabeli <table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table> 94 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Małe warsztaty Stwórz własną tabele 97 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Różnice miedzy nimi: 99 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wyrównanie tabeli Wyrównanie tabeli <table align=“right“>...</table> 1. Wyrównanie zawartości tabeli Tu dochodzi dodatkowy znacznik: valign Wyrównanie zawartości całego wiersza <table> <tr align="rodzaj" valign="ustawienie">...</tr> </table> 2. 102 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wyrównanie zawartości pojedynczej komórki Wyrównanie zawartości pojedynczej komórki <table> <tr> <td align="rodzaj" valign="ustawienie">...</td> </tr> </table> 3. "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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Tło obrazkowe W całej tabeli <table background="ścieżka dostępu">...</table> W pojedynczej komórce <table> <tr> <td background="ścieżka dostępu">...</td> </tr> </table> 105 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ćwiczenia <table border="5"> <tr> <td>komórka1</td> <td>komórka2</td> </tr> <tr> <td>komórka3</td> <td>komórka4</td> </tr> </table> 106 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Łą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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Łączenie komórek Pionowe łączenie komórek <table> <tr> <td rowspan="y">...</td> </tr> </table> gdzie "y" oznacza liczbę komórek do połączenia w pionie. 108 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego <table border="1"> <tr> <td colspan="2">komórki1,2</td> </tr> <tr> <td>komórka3</td> <td>komórka4</td> </tr> </table> 109 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Pływające Ramki 111 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Przykład index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego menu.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego prawa.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego strona1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego links.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ramki pływające iframe <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego (Extensible HyperText Markup Language). 119 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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> http://www.w3.org/TR/xhtml1/ 124 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego <DOCTYPE> Znacznik ten określa typ tworzonego dokumenty HTML, który może: ▪ Transitional (pośredni), ▪ Strict (ścisły) ▪ Frameset (układ ramek). 125 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wymagania stawiane dokumentom XHTML Strict (ścisła) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional (przejściowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> Frameset (ramkowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd"> 126 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wpowadzenie do Kaskadowych Arkuszy Stylów 127 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kaskadowe Arkusze Stylów CSS 128 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Idea arkuszy stylów 129 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Idea arkuszy stylów <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Idea arkuszy stylów h1 { color: red } p { font-family: Arial, Helvetica, sans-serif; color: blue } 131 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jak zbudować... ▪ ▪ ▪ ▪ ▪ ▪ 132 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Gdzie to wstawić??? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Trzy sposoby wstawiania: Styl lokalny Wewnetrzny arkusz stylów Zewnerzny arkusz stylów 134 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Styl lokalny <selektor style="cecha: wartość; cecha2: wartość2..."> </selektor> 135 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zalety stylu lokalnego inline <span style="color:#CC00CC; text-align:center">...</span> ▪ Span nadaję się tylko do elementów pisanych w linii 136 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego DIV a SPAN <div style="background-color:#333333; textdecoration:blink”>...</div> ▪ ▪ 137 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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> ....... 138 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zewnętrzny arkusz stylów 140 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zewnętrzny arkusz stylów 141 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego <head> (...) <link rel="Stylesheet" type="text/css" href="style.css" /> (...) </head> 142 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zewnętrzny arkusz stylów body { 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ciekawostki : ▪ Narzędzia/Opcje internetowe/generalne/Dostępność/Formatuj dokumenty używając mojego arkusza stylów 144 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kaskada stylów CSS - (ang. Cascading Style Sheets) Kaskadowe Arkusze Stylów. 145 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Reguły kaskadowości 147 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Innymi słowy kolejność 1. 2. 3. 4. 5. 6. 7. Styl lokalny (inline) Rozciąganie stylu (SPAN) Wydzielone bloki (DIV) Wewnętrzny arkusz stylów Import stylów do wewnętrznego arkusza Zewnętrzny arkusz stylów Import stylów do zewnętrznego arkusza 148 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego UWAGI !important” 149 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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: http://www.w3.org/TR/CSS1/ Specyfikacja CSS w wersji 2 http://www.w3.org/TR/CSS21/ Specyfikacja w wersji 3 http://www.w3.org/Style/CSS/current-work#CSS3 150 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Nasza przyszłość... 151 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jednoski długosci ▪ ▪ 153 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jednoski długosci 154 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Właściwość margin-top Margin Opis 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). 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego http://www.kurshtml.boo.pl/css/model_pudelkowy,marginesy.html 157 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wartości MARGIN i PADDING 158 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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. Color 160 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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) b) c) d) border-bottom-width, border-left-width, border-top-width 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) b) c) d) border-bottom, border-left, border-top, border-right. 164 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Pismo szerywowe i bezszeryfowe pismo bezszeryfowe pismo szeryfowe serif Sans serif ▪ "Sans" to po francusku – "bez", w tym przypadku – "bez szeryfów". 165 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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) b) 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ą. 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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) b) c) d) e) f) g) h) baseline, middle, sub, super, text-top text-bottom (określają pozycję względem elementu nadrzędnego) top 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) b) c) d) none, overline, line-through blink. 167 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Do dzieła... 171 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego DODAWANIE KOLORU <style type="text/css"> <!-body { color:#993333; background-color: #9933FF; } -- > </style> 173 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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, SunSansRegular, sans-serif } </style> 174 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego DODANIE LINI POZIOMEJ address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } 177 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Nieruchome tło Body { … background-attachment:fixed; background-image: url(../../przyklad.png); background-position: center center; background-repeat: no-repeat; } 178 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego HTML Vademecum Profesjonalisty HTML 4 - Czarna księga WebMastera http://webmaster.helion.pl/kurshtml/ http://www.kurshtml.boo.pl www.google.pl http://algorytmy.pl/ http://www.tlumaczenia-angielski.info/ 180 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 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 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Grafika i CSS <img src="zdjecia/zd1.jpg" alt="alter tekst" /> <hr align="center"> <img src="zdjecia/zd1.jpg" alt="Opis zdjecia" style="border: 5px red solid; "> <hr align="center"> <img src="zdjecia/zd1.jpg" alt="Zdjecie w lecie" style="outline: 5px green double; "> <hr align="center"> tekst przy obrazku <img src="zdjecia/zd1.jpg" alt="przesuniety o 50px" style="margin-left: 50px; margin-right: 50px; "> tekt po obrazku oddalony o 50 px <hr align="center"> <p>Ten akapit jest napisany u góry</p> <img src="zdjecia/zd1.jpg" alt="gorne marginesy" style="margin-top: 50px; margin-bottom: 50px"> <p>dolny akapit napis</p> 184 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego ELEMENT BLOKOWY DIV Chcąc umieścić grafikę jako samodzielny element w wierszu, można by ją umieścić w elemencie blokowym div, ustawionym po lewej czy prawej stronie lub na środku wiersza. <div style="text-align:center; "> <p><img src="zdjecia/przyklad.png" alt="w bloku" /></p> </div> Jeśli nie zapewnisz osobnego miejsca grafice, sąsiadująca z nią inna grafika zostanie ustawiona w tym samym wierszu. Możesz też nadać grafice blokowy charakter, jawnie zmieniając domyślny sposób jej wyświetlania, korzystając z polecenia stylów display:block; 185 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Pozycjonowanie poziome Aby umieścić ilustrację przy prawym marginesie, należy jej nadać styl style="float: right; ". <img src="zdjecia/przyklad.png" alt="stop" style="float:right" /> Analogicznie, aby umieścić ilustrację przy lewym marginesie, należy jej nadać styl style="float: left; ". <p style="text-align:justify"><img src="zdjecia/przyklad.png" alt="stop" style="float:left" /> 186 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Pozycjonowanie pionowe Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania elementów względem siebie - wykorzystujemy w nim polecenie stylów vertical-align, które zastąpiło przestarzały atrybut align (top, middle, bottom). <p style="text-align:justify"><img src="zdjecia/przyklad.png" alt="stop"; style="vertical-align:top"/> <p style="text-align:justify"><img src="zdjecia/przyklad.png" alt="stop"; style="vertical-align:middle"/> <p style="text-align:justify"><img src="zdjecia/przyklad.png" alt="stop"; style="vertical-align:bottom"/> 187 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Mapy odsyłaczy na obrazkach A oto pełna treść polecenia: <img src="odsylacz.gif " usemap="#mapa1"> <map name ="mapa1"> <area shape="rect" coords="1, 1, 50, 50" href="1.html" alt="strona 1"> <area shape="rect" coords="51, 1, 100, 50" href="2.html" alt="strona 2"> <area shape="rect" coords="1, 51, 51, 100" href="3.html" alt="strona 3"> <area shape="rect" coords="51, 51, 100, 100" href="4.html" alt="strona 4"> </map> Pierwszy wiersz polecenia przywołuje obrazek. USEMAP informuje przeglądarkę, że obrazek "odsylacz.gif" jest mapowany, i że mapa nosi nazwę "mapa1". Drugi wiersz zapoczątkowuje definicję mapy. Wiersze 3-6 wprowadzają cztery kolejne fragmenty mapy odsyłaczy, odpowiadające prostokątom na rysunku. SHAPE=RECT mówi, że chodzi tutaj o prostokąty (RECT=rectangle). COORDS informuje o współrzędnych, przy czym pierwsze dwie liczby w wierszu podają lewy górny róg prostokąta, a następne dwa - prawy dolny. Warto unikać nakładania na siebie obszarów map, choć przeglądarka akceptuje nakładanie. HREF= stanowi przywołanie jakiegoś dokumentu HTML. Ostatni wiersz stanowi zakończenie definicji mapy. 188 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Przykład <div align="center"><img src="zdjecia/zacmienie.jpg" alt="zacmienie ksiezyca" width="640" height="480" border="0" align="top" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="40,61,194,203" href="strona1.html" /> <area shape="rect" coords="460,307,557,381" href="#" /> <area shape="circle" coords="307,132,61" href="strona2.html" /> <area shape="poly" coords="469,76,588,92,563,189,486,226,438,157" href="strona3.html" /> </map> </div> 189 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Cięcie grafiki Znana z wielu programów ułatwiających pracę webmasterom firma Coffee Cup Software ma w swojej ofercie niewielki programik do cięcia grafiki na fragmenty. Różne są powody dokonywania tej operacji przez tworzących strony WWW. Część webmasterów uważa, że grafika przygotowana w tej formie przyczynia się do szybszego ładowania obrazka na stronie, inni zaś wykorzystają tą funkcję do przypisania konkretnym fragmentom obrazka odpowiedniego odnośnika. Ustalenie przydatności pocięcia na części obrazka pozostawmy samym zainteresowanym a zajmijmy się możliwościami programu Coffee Cup Image Slicer, który tą czynność powinien nam ułatwić. 190 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Cięcie grafiki http://board.counter-strike.pl/viewtopic.php?t=27745 191 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Stosowanie rozszerzeń HTML znaczniki HTML 2.0, opcje HTML 3.2 i HTML 4.0, takie jak tabele, wycinki, tła i kolor, które są obsługiwane przez większość przeglądarek, ale nie przez wszystkie, HTML 4.0 i związane z nim możliwości, takie jak kaskadowe arkusze stylów, Dynamiczny HTML i układy ramek, XHTML 1.0, proponowane rozszerzenie języka HTML 4.0 stwarzające możliwość rozbudowy znaczników HTML i przygotowujące dokumenty HTML na przyszłe wymagania WWW, 193 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Stosowanie rozszerzeń HTML pluginy i inne obiekty osadzone wykorzystujące pliki i dane zewnętrzne (względem przeglądarki), znaczniki specyficzne dla danego typu przeglądarek (np. dla Netscape czy Internet Explorera), które mogą, ale wcale nie muszą, zostać uwzględnione w oficjalnej specyfikacji HTML — w tym przypadku obsługa tych znaczników również zależy od typu przeglądarki, inne technologie (takie jak SMIL Boston, synchronizowany język multimedialny), które w przyszłości mogą się stać specyfikacjami W3C, a które na razie nie są w ogóle obsługiwane lub są obsługiwane tylko przez nieliczne przeglądarki. 194 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jakich mamy projektantów Konserwatywny projektant Projektant eksperymentator Projektant mieszany 195 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jakich mamy projektantów Konserwatywny projektant Projektant eksperymentator Projektant mieszany 196 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Aby obsłużyć te różne podejścia HTML 4.1 lub XHTML 1.0 Transitional HTML 4.1 lub XHTML 1.0 Frameset HTML 4.1 lub XHTML 1.0 Strict 197 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt witryny i strony Nie można właściwie rozpocząć projektowania strony WWW, dopóki nie zaprojektujemy układu całej witryny. Zaczynamy od kartku papieru i ołówka/długopisu. Rozrysowujemy cały układ witryny, tworzymy szablon, na którym będą oparte wszystkie strony w witrynie 3. Ustalamy kolory (zasada 3k) 4. Styl tekstu 5. Nawigacje 1. 2. Najlepszym sposobem jest tutaj użycie Kaskadowych Akuszy Stylów. 199 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projektowanie 1. Ustal kolory witryny i stosuj te kolory konsekwentnie (komplementarność, kontrast, kordynacja) 2. Ustal styl tekstu, zachowaj jednolity sposób formatowania tekstu (np. Paragrafy zawsze mają ten sam rodzaj czcionki). 3. Spójny schemat nawigacji w obrebie witryny przyczynia się również do jednorodnego charakteru witryny 4. Pisz jasno i zwięźle 5. Organizuj strony w sposób przejrzysty 6. Ostrożnie stosuj wyróżnienia 7. Im mniej skomplikowana strona tym lepsza 200 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kolory 1. Kolory komplementarne – czyli wzajemnie się uzupełniające, wywołujące miłe dla oka wrażenie 2. Kolory kontrastowe wyróżniają poszczególne elementy strony 3. Koordynacja, harmonia kolorów na kolejnych stronach witryny wzmacnia dobre wrażenie, użytkownik oglądając Twoja witryne, wie, że jest to dzieło a nie bezładnie połączone strony. Kolory niosą ładunek emocjonalny - ciepło, chłód, surowość, łagodność, itp. 201 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ważne Korzystaj z nagłówków. Zwróć uwagę na sposób, w jaki w tej książce stosowane są nagłówki. Dzięki nim możesz szybko znaleźć interesujący Cię temat. Ta sama zasada stosuje się do stron WWW; Stosuj listy. Wspaniale nadają się do podsumowania odnoszących się do siebie pozycji. Ilekroć masz powiedzieć coś w rodzaju „każdy kij ma dwa końce” lub „zastosuj następującą procedurę”, skojarz to z listą numerowaną lub wypunktowaną; Nie zapominaj o menu zawierającym połączenia. Forma listy sprawia, że menu zawierające połączenia ma wszystkie zalety listy, będąc ponadto więcej niż doskonałym narzędziem nawigacji; Nie ukrywaj ważnych informacji w tekście. Jeśli chcesz poczynić istotną uwagę, niech pojawi się ona u góry strony lub na początku akapitu. Długie akapity czyta się gorzej, a ich skuteczność w przekazywaniu informacji jest mniejsza. Im głębiej w treści akapitu umieścisz swoją uwagę, tym mniej prawdopodobne, że ktokolwiek ją przeczyta. 202 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Twórz strony, będące samodzielnymi całościami Niech Twoje tytuły będą opisowe. Tytuł powinien informować nie tylko o temacie strony, ale także o jej pozycji względem innych stron prezentacji, której jest częścią; Umieść na stronie połączenia nawigacyjne. Jeśli strona jest tematycznie związana ze stroną poprzednią, to umieść na niej połączenie, które pozwoli wrócić na tę stronę (być może należy także umieścić na niej połączenie do strony nadrzędnej); Unikaj jako zdań otwierających zdań typu: „Możesz rozwiązać ten problem poprzez…”, „Po wykonaniu tego zrób…” i „Korzyści tej metody to…”, 203 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Nie stosuj terminologii typowej dla danego typu przeglądarek „kliknij tutaj” — cóż bowiem mają począć użytkownicy przeglądarek, które nie są obsługiwane za pomocą myszy? Bardziej stosowne będzie ogólne wyrażenie: „Wybierz to połączenie” (oczywiście powinieneś przede wszystkim unikać określenia „tutaj”); „by zapisać stronę, rozwiń menu File i wybierz Save” — każda przeglądarka ma swoje specyficzne menu i inne sposoby osiągania tego samego celu. Jeśli to możliwe, unikaj odwoływania się do specyfiki działania danej przeglądarki; „skorzystaj z przycisku Back, by powrócić do poprzedniej strony” — poprzednia uwaga jest słuszna także i w tym wypadku. Zestawy przycisków w różnych przeglądarkach mogą się różnić, podobnie jak metody przemieszczania się wstecz. Jeśli zależy Ci, by czytelnicy byli w stanie powrócić do poprzedniej lub jakiejkolwiek innej strony, stosuj połączenia. 204 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Sprawdzaj ortografię i składnię 1. Używaj znaków interpunkcyjnych, a zwłaszcza przecinków! Stawia się je prawie zawsze przed: "że", "iż" (wyjątki: "..., chyba że...", "..., dlatego że...", "..., (po)mimo że/iż..."), a najczęściej również przed: "a", "ale", "lecz", "aby", "żeby", "ponieważ", "bo", jak również przed wyrażeniami zawierającymi "który" (np.: "z którym", "w którym", "po którym", "wewnątrz którego" itd.). Nie stawiamy przecinków przed ani za spójnikami: "i", "oraz", "lub", "albo", "bądź", "ani", "czy" ( jeśli pełni rolę spójnika). 2. Kropki używamy - poza zakończeniem zdania - również po skrótach (np.: "prof.", "inż."). Wyjątkiem są skróty, kończące się na ostatnią literę pełnego wyrazu (np.: "mgr", "nr", ale "dyr."). Ponadto często stosuje się nawiasy, dla przedstawienia jakiejś uwagi pobocznej (w ich miejsce można również użyć myślników). 3. Oddzielaj nowymi akapitami fragmenty tekstu, które nieco różnią się od siebie tematycznie. Bardzo długi "czysty" tekst niezbyt dobrze się czyta. 205 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projektowanie i układ strony Naczelną zasadą, którą należy się kierować przy projektowaniu stron WWW, jest zasada maksymalnej prostoty. a) Zredukuj liczbę elementów, b) obrazów, c) nagłówków, d) linii poziomych i postaraj się, by wzrok czytelnika padał w pierwszej kolejności na najistotniejsze części strony. 206 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projektowanie i układ strony 1) 2) Stosuj nagłówki jako nagłówki Grupuj informacje wiążące się ze sobą 3) Stosuj spójny układ Czytając książkę można zauważyć: a) Każda strona ma ten sam układ b) Kazdy rozdział ma ten sam układ c) Numery stron zawsze są w tych samych miejscach d) Akapity tak samo wygladają POWTARZALNOŚĆ 207 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Cechy zwartego układu strony. konsekwentne stosowanie elementów strony — jeśli na jednej ze stron skorzystałeś z nagłówka <H2>, by przedstawić główne tematy, w ten sam sposób postępuj na pozostałych stronach. Jeśli strona rozpoczyna się nagłówkiem podkreślonym linią poziomą, taki sam układ powinien pojawić się na reszcie stron; konsekwentne formy nawigacji — na kolejnych stronach umieszczaj menu nawigacyjne zawsze w tym samym miejscu (zazwyczaj u dołu lub u góry strony) i staraj się nie zmieniać ich liczby. Jeśli masz zamiar korzystać z ikon nawigacyjnych, pamiętaj, by na każdej stronie były to te same ikony, ułożone w tym samym porządku; zewnętrzne arkusze stylów — jeśli chcesz postępować zgodnie z zaleceniami HTML 4.1 lub XHTML 1.0 to możesz stworzyć główny arkusz stylów definiujący właściwości tła, kolory tekstu i połączeń, stosowane kroje czcionek i ich rozmiar, wielkość marginesów, itd. Stosując ten arkusz stylów, uzyskasz to, że wszystkie strony wchodzące w skład witryny zachowają spójny wygląd. 208 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Stosowanie połączeń 3. Dbaj o to, by tekst prezentacyjny połączeń zawartych w menu był opisowy Umieszczaj połączenia w tekście Unikaj używania słowa „tutaj” ▪ Zamiast połączenia w takiej formie: ▪ Tutaj znajdziesz informacje na temat oswajania strusi. ▪ ▪ Może: Palo Alto Zoo udzieli Ci informacji na temat oswajania strusi. 4. Połączenia — tworzyć czy nie tworzyć (Czy połączenie będzie użyteczne? ) 1. 2. 209 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Obrazy 1. 2. 3. 4. Nie przesadź z liczbą obrazów Stosuj tekst alternatywny Stosuj małe obrazy Ostrożnie z założeniami Nie należy zakładać, że u każdego użytkownika wymiary okna przeglądarki są takie same, jak u Ciebie. Nie należy zakładać, że wszyscy korzystają z monitorów które wyświetlają 16 mln kolorów. 5. Nie przesadzaj z kolorami tła i połączeń 6. 7. Zadbaj o to, by kolory pierwszego planu (tekstu) kontrastowały z kolorami tła. Jeśli stosujesz wzorzyste tło, sprawdź, czy wzór nie pokrywa się z tekstem. Umieszczaj połączenie do strony głównej Nie rozdzielaj tematu między strony 210 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wyważ właściwie liczbę stron (duże strony) Zalety: obsługa jednego pliku jest prostsza, a połączenia w nim zawarte nie zostaną zerwane, nawet jeśli poprzesuwasz elementy lub zmienisz nazwę pliku, pojedynczy plik jest najbliższy pod względem struktury dokumentowi spoza sieci, jeśli więc rozprowadzasz dokumenty zarówno w postaci wydruku, jak i w sieci, operowanie pojedynczym plikiem ułatwi zadanie. Wady: załadowanie dużego pliku zabiera mnóstwo czasu, szczególnie w przypadku wolnych łączy sieciowych, a trwa wieki, gdy strona zawiera wiele elementów graficznych, czytelnicy muszą przewijać stronę, by znaleźć interesujący ich materiał, odszukanie właściwych informacji staje się nużące, nawigacja do punktów innych niż początek i koniec strony graniczy z niemożliwością, struktura takiej strony jest nazbyt sztywna i liniowa, choć czytelnicy mogą przeskakiwać między sekcjami strony, struktura całości przypomina dokument drukowany, brak tu elastyczności układu małych stron powiązanych ze sobą nieliniowymi połączeniami. 211 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wyważ właściwie liczbę stron (małe strony) Zalety: małe strony ładują się szybko, często całkowicie mieszczą się na ekranie, a więc prezentowane informacje są widoczne na pierwszy rzut oka. Wady: zmorą takiego rozwiązania jest obsługa połączeń, niewielkie zmiany w strukturze nawigacyjnej mogą spowodować jej załamanie się, zbyt wielka liczba połączeń może irytować, śledzenie podstawowego wątku jest utrudnione, jeśli czytelnik większość czasu spędza na skakaniu między stronami. 212 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jeszcze kilka uwag 1. Unikaj ślepych zaułków (strona nie posiadająca zadnych łaczy hipertekstowych) 2. Twórz łacza do zasobów o podobne tematyce 3. Ułatwiaj odnalezienie różnych informacji (mapa witryny) 4. Podpisuj swoje strony 5. Uwzględnienie poziomu doświadczenia użytkownika 6. Podaj listę stron zawierających opis witryny (np. O witrynie) 7. Jeżeli Twoja strona jest eksperymentem i potrzebujesz do tego okreslonych plików, apletów, pluginów, powiadom użytownika skąd je mogą pobrać, aby poprawnie wyświetlić stronę. 213 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kluczem do sukcesu jest jednak zawartość witryny 1. 2. 3. 4. 5. 6. 7. Zadecyduj jakiego rodzaju informacje bedziesz publikował na łamach witryny Zaplanuj jak efektywnie z nich korzystać Przeanalizuj treść strony pod względem przydatności, stopnia zainteresowania Zastanów się nad forma prezentacji (czasem zbyt “wybajerowana” strona jest nie czytelna). Dostosowuj kolory witryny do tematu prezentowanych informacji. Dbaj o “świeżość” informacji (częste aktualizowanie) Stosuj dynamiczną forme prezentacji a nie statyczną 214 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego A tour of new features 215 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projektowanie za pomocą tabel Za pomocą table możemy pozycjonować elemnty na stronie Tabele zbudowane są z wierszy, reprezentowanych przez znacznik , wiersze skłądają się w końcu z kolumn 217 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projektowanie za pomocą tabel Wyrównanie komórek i wyrówanie określa układ tabeli Komórki mogą obejmować więcej niż jeden wiersz lub kolumnę Tabele można zagnieżdzać Tabele to najprosztrzy sposób budowy układu strony 218 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Formatowanie czcionki <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Strona zbudowana na tabelach</title> <style type="text/css"> <!--.style1 { font-size: 18px; font-weight: bold;}--> </style> </head> <body> <center><table width="1024" border="0"> <tr> <td height="87" colspan="3" bgcolor="#FF3333"> <center>Miejsce na banner</center></td> </tr> <tr> <td width="215" height="500" valign="top" bgcolor="#9933FF"><p align="center"> </p> 219 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Formatowanie czcionki <p align="center"> </p> <p align="center"><strong>MENU 1</strong></p> <ol> <li><h5>link1</h5></li> <li><h5>link2</h5></li> <li> <h5>link3</h5></li> <li><h5>link4</h5></li> <li><h5>...</h5></li></ol> <p> </p></td> <td width="677" align="left" valign="top" bgcolor="#CC6633"><span class="style1">Wlaściwe miejsce na strone </span></td> <td width="110" valign="top" bgcolor="#9933FF"> "><p align="center"> </p> <p align="center"> </p> <p align="center"><strong>MENU 1</strong></p> <ol> <li><h5>link1</h5></li> <li><h5>link2</h5></li> <li> <h5>link3</h5></li> <li><h5>link4</h5></li> <li><h5>...</h5></li></ol> <p> </p> </td> </tr> <tr> <td colspan="3" bgcolor="#CC99CC"><div align="center">Miejsce na stopke</div></td> </tr> </table></center> </body> </html> 220 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 221 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zalety stosowania ramek Wygoda nawigacji, Prostota tworzenia struktury serwisu bez korzystania ze skryptów PHP, Oszczędność wczytywania danych przy przechodzeniu na podstrony (menu wczytuje się tylko raz), Microsoft Internet Explorer 7.0 nie potrafi stopniowo wczytywać tabelek, dlatego jeżeli struktura strony została zbudowana w oparciu o tabele, przy obszernych dokumentach najpierw czekamy dość długo przed białym ekranem, by potem zobaczyć od razu całą stronę. Problem ten nie występuje w "czystych" ramkach. 223 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wady: Niektórzy uważają, że mają mniej profesjonalny wygląd. Zwykle dodanie do zakładek (ulubione) podstron serwisu z ramkami jest utrudnione lub nawet niemożliwe. Analogiczny problem występuje w przypadku chęci skopiowania adresu konkretnej podstrony, np. aby przekazać go znajomemu. Odświeżenie serwisu w ramkach, np. w przypadku problemów w transferem, zawsze powoduje powrót na stronę główną. Ramki są przeznaczone do budowy raczej prostszych struktur serwisu. Jeśli wstawimy na stronie dużo ramek - szczególnie w mniejszych rozdzielczościach ekranu - "okienko" z właściwą treścią strony może okazać się stanowczo za małe. 224 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego PHP -- "PHP: Hypertext Preprocessor" powszechnie używany język skryptowy ogólnego przeznaczenia, który jest szczególnie przystosowany do tworzenia aplikacji Webowych, także poprzez zagnieżdżenie wewnątrz języka HTML. Składnia, wywodząca się z języków C, Java i Perl, jest łatwa do nauczenia się. Głównym celem języka jest umożliwienie programistom szybkiego tworzenia stron internetowych, ale PHP umożliwia znacznie więcej. 226 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego test.php <html> <head> <title>PHP Test</title> </head> <body> <?php echo '<p>Hello World</p>'; ?> </body> </html> 227 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego PHP -- sprawdzenie możliwości <?php Phpinfo(); echo 'Current PHP version: ' . phpversion(); ?> 228 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Formularze +PHP Składnia formularza jest zawsze taka sama, zaczynamy od znacznika <FORM> a kończymy na </FORM>. Wewnątrz znaczników wprowadzamy pola tekstowe, pola wyboru radio, przyciski itp.. Na samym początku musimy określić właściwości naszego formularza, robimy to poprzez ustawienie właściwości action oraz method. 229 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Właściwość ACTION określamy tutaj do jakiej strony będziemy przekazywać nasze dane (zmienne). Może to być dowolna strona ze skryptem. Właściwość ustawiana jest za pomocą adresu URI. Np. <form action=“cosik.php" method="GET"> 230 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Właściwość METHOD Możemy tu okteślić w jaki sposób będziemy przekazywać informacje, a mamy do dyspozycji dwie metody: POST – Jest to metoda poufnego przekazywania danych. Informacje przekazywane są ze strony na stronę w zmiennych zadeklarowanych w odpowiednich polach formularza. GET – Jeśli zdecydujemy że naszą metodą przekazywania danych będzie metoda GET to dane jakie będziemy chcieli przekazać do kolejnej strony będą znajdowały się w adresie URI np.: http://publikacja.cba.pl/formularz/cosik.php?f0=e mail.gif&f1=jakis%40jakis&f2=zaq1&f3=1&f4=1&f5 =duza 231 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wnętrze <FORM> Wewnątrz formlularza mogą pojawić się pola, do których wprowadzimy intersyjące nas informacje. Każde z tych pól wprowadzamy do naszego formularza za pomocą elementu <INPUT>, a typy naszych inputów mamy następujące: 232 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wlaściowści <INPUT> Text – pole tekstowe Check box – pole wyboru, kwadracik, który jak jest zaznaczony przyjmuje wartość “tak”, nie zaznaczenie tego pola oznacza “nie”. Tego pola można skorzystać w dowolnej ilości. Radio – Okrągły przycisk wyboru. Spośród grupy przycisków możemy wybrać tylko jeden. 233 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wlaściowści <INPUT> Button – indywidualnie definiowany przycisk. File – Specjalne pole tekstowe, w którym wprowadzana jest nazwa pliku. Submit – przycisk, do wysyłania danych z formularza. Image – to samo co wyżej, z tymże jest to obrazek. Password- pole text, o ukrytych znakach. Reset – przycisk usuwający wszytskie dane z formularza Hidden – informacja ukryta ale przesylana z innymi. 234 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego form.html <form action="cosik.php" method="GET" class="style1"> plik: <input type=file name=f0><br/><br/> e-mail: <input type=text name=f1><br/><br/> hasło: <input type=password name=f2><br/><br/><br/> <input type=checkbox name=f3 value=1>Projektuje strony w XHTMLU<br/><br/> <input type=checkbox name=f4 value=1>Projektuje strony w CSS<br/><br/> <p>W stopiniu: </p> <input type=radio name=f5 value="mala">Małym<br/> <input type=radio name=f5 value="duza">Dużym<br/> <input type=radio name=f5 value="srednia">Średnim<br/><br/><br/> <p align="center"><input type=submit value="Wyślij"> <input type=reset></p> </form> 235 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Cosik.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2" /> <title>Skrypt PHP</title> </head> <body> <table><tr><td width="300"></td> <td> <?php print "twoje dane:<br/><br/>\n\n\t"; //pobieranie pierwszej zmiennej print $_GET['f0']; print "<br/>\n\t"; //pobieranie drugiej zmiennej print $_GET['f1']; print "<br/>\n\t"; print $_GET['f4']; print "<br>\n\t"; //pobieranie szóstej zmiennej print $_GET['f5']; print "<br/>\n\t"; print "<br/><br/>zostały wysłane...\n\n\t"; ?></td></tr></table> </body> </html> //pobieranie trzeciej zmiennej print $_GET['f2']; print "<br>\n\t"; //pobieranie czwartej zmiennej print $_GET['f3']; 236 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Cosik.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Skrypt PHP</title> </head> <body> <table><tr><td width="300"></td> <td> <?php print "twoje dane:<br/><br/>\n\n\t"; //pobieranie pierwszej zmiennej print $_GET['f0']; print "<br/>\n\t"; //pobieranie drugiej zmiennej print $_GET['f1']; print "<br/>\n\t"; //pobieranie trzeciej zmiennej print $_GET['f2']; print "<br>\n\t"; //pobieranie czwartej zmiennej print $_GET['f3']; print "<br/>\n\t"; //pobieranie piątej zmiennej 237 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Cosik.php – ciąg dalszy print $_GET['f4']; print "<br>\n\t"; //pobieranie szóstej zmiennej print $_GET['f5']; print "<br/>\n\t"; print "<br/><br/>zostały wysłane...\n\n\t"; ?> </td></tr></table> </body> </html> 238 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego <form> <SELECT> <OPTION> <select name="menu"> <option> polski (pl)</option> <option> czeski (cz)</option> <option> rosyjski (ru)</option> <option> irlandzki (ie)</option> <option> holenderski (nl)</option> </select> </form> 239 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Podsumowanie Formularze służą do pobierania informacji od użytkownika w efektywny sposób Każdy element formularza powinien posiadać unikatową nazwę Z formularzami możemy używać JavaScript 240 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zabezpieczenie maila przed SPAMem <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>JavaScript</title> <script type="text/javascript"> <!-function wyslijMaila(uzytkownik, serwer){ location.href = "mailto:" + uzytkownik + "@" + serwer; } //--> </script> </head> <body> <a href="#" onclick="wyslijMaila('uzytkownik', 'jakisserwer.pl'); "><img src="email.gif" alt="" /></a> </body> </html> 241 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego HTML Vademecum Profesjonalisty HTML 4 - Czarna księga WebMastera „Tworzenie stron WWW-Biblia” David A. Crowder Andrew Bailey http://webmaster.helion.pl/kurshtml/beginner/beginner.htm http://www.kurshtml.boo.pl/html/zielony.html 242 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego HTML Vademecum Profesjonalisty HTML 4 - Czarna księga WebMastera http://webmaster.helion.pl/kurshtml/ http://www.kurshtml.boo.pl www.google.pl 243 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego HTML Vademecum Profesjonalisty HTML 4 - Czarna księga WebMastera http://webmaster.helion.pl/kurshtml/ http://www.kurshtml.boo.pl www.google.pl http://algorytmy.pl/ http://www.tlumaczenia-angielski.info/ http://pl.php.net/manual/pl/tutorial.php 244