Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

World Wide Web Materiały szkoleniowe opracowane przez: Centrum Szkoleń Informatycznych VEDIUS Projekt współfinansowany ze środków Unii Europejskiej w ramach.

Podobne prezentacje


Prezentacja na temat: "World Wide Web Materiały szkoleniowe opracowane przez: Centrum Szkoleń Informatycznych VEDIUS Projekt współfinansowany ze środków Unii Europejskiej w ramach."— Zapis prezentacji:

1 World Wide Web Materiały szkoleniowe opracowane przez: Centrum Szkoleń Informatycznych VEDIUS Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego

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

3 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego

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

5 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

6 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

7 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ć)łac.ang. 7

8 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

9 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Troche historii  1989: 1989  Fizyk Tim Berners-Lee przedstawił projekt prezentacji informacji przy użyciu hypertext.Tim Berners-Leehypertext  1990: 1990  pierwsza strona pod adresem:  1991: 1991  naukowcy z CERN-u opracowali standard WWW;CERN-uWWW  20 grudnia Polska zostaje przyłączona do Internetu 20 grudnia 9

10 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Troche historii  1993: 1993  luty - powstaje pierwsza przeglądarka WWW umożliwiająca oglądanie graficznych stron - Mosaic (dostępna dla PC i Apple Macintosh).Mosaic  1994: 1994  kwiecień - powstaje portal Yahoo!.Yahoo!  Premiera przeglądarki Netscape Navigator.Netscape Navigator  1995: 1995  Powstaje pierwszy polski portal: Wirtualna Polska,portalWirtualna Polska  23 sierpnia 1995 prezentacja nowej przeglądarki internetowej na bazie kodu Mosaica - Internet Explorer. 23 sierpniaInternet Explorer 10

11 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

12 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.World Wide Websynonimami  Internet to sieć komputerowa – wiele połączonych ze sobą komputerów.sieć komputerowa  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.poczta elektronicznaP2P hiperłączamiURL-ami  12

13 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

14 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

15 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Hipertekstowy System Informacyjny 15

16 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 podaje właśnie URL.  WWW jest siecią dynamiczną 16

17 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

18 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

19 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

20 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

21 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

22 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

23 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ę „koszy­ki”, do których użytkownicy mogą „wrzucać” towary w trakcie przeglądania katalo­gu. Na koniec podają tylko numer karty kredytowej oraz informację o miejscu dostawy towaru i zamówienie jest już gotowe.  Sondaże opinii publicznej i głosowania — interakcyjność i formularze w sieci WWW pozwalają na zbieranie opinii czytelników na każdy temat, mogą to być sondaże, sugestie na temat zawartości stron, produktów itp.  Edukacja — interakcyjność i niski koszt przekazywania informacji w sieci WWW decydują o tym, że jest ona bardzo atrakcyjnym nośnikiem informacji w procesie edukacji na odległość. Wiele uniwersytetów o wiekowej tradycji, jak również mnóstwo nowo powstałych szkół „internetowych” oferuje obecnie różnorakie formy kształcenia na odległość za pośrednictwem WWW.  Wszystko, co tylko zdołasz wymyślić — hipertekstowa fikcja, wirtualne zabawy, archiwa, warsztaty artystyczne... dosłownie wszystko. 23

24 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

25 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. Oferta 3. Nasz cel 4. Kontakt a. Dane kontaktowe b. Mapka dojazdu 25

26 26

27 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Pierwsza strona w HTML-u Mój pierwszy dokument To jest dokument HTML 27

28 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

29 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego (X)HTML EHML ( E xtensible) H ypertext M arkup L anguage RHJO ( R ozszerzalny) H ipertekstowy J ęzyk O znaczania 29

30 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Polskie znaki ą ć ę ł ń ó ś ź ż Ą Ć Ę Ł Ń Ó Ś Ź Ż 30

31 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego TRYB WYSIWYG WYS Is WYG What You See Is What You Get To Co Widzisz Jest Tym Co Otrzymasz Programy do tworzenia stron WWW  MS FrontPage  Dreamweaver  NVU 31

32 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ramy dokumentu html head meta meta meta Tu wpisz tytuł strony title head Tu wpisuje się treść strony body html 32

33 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zwykły tekst Pisząc normalnie w dokumenice tekstowym tekst : “Zwykły tekst... Normalny tekst... Normalny tekst...” Natomiast w przeglądarce zostanie wyswietlony : “Zwykły tekst...Normalny tekst... Normalny tekst...” 33

34 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.:. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Znacznik nie jest widoczny przy wyświetlaniu strony. 34

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

36 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Znaczniki Otwarty znacznik musi zostać zamknięty. Np. ma znacznik zamykający Błednie zapisany bedzie znacznik tu jest tekst wytłuszczony 36

37 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!XHTML  Oraz wszystkie znaczniki powinny mieć swoje odpowiedniki zamykające. 37

38 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Koniec linii - enter w języku HTML Znacznik w języku HTML nie ma znacznika zamykającego (to jest właśnie jeden z nielicznych wyjątków)! 38

39 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Akapit – podstawowe formatowanie tekstu  Tu wpisz treść akapitu ▪ Akapit w pewnych warunkach nazywany jest paragrafem ▪ Następujące po sobie akapity, są rozdzielone linijką przerwy ▪ Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w akapitach 39

40 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) Treść akapitu lub po prostu Treść akapitu Wyrównanie tekstu do prawej Treść akapitu Wyśrodkowanie tekstu Treść akapitu Justowanie tekstu (wyrównanie do obu marginesów jednocześnie) Treść akapitu 40

41 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Tekst pochylony, Tekst podkreślony Tu wpisz tekst - tekst pochylony, kursywa (italic), Tu wpisz tekst - podkreślenie (underline). 41

42 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wielkość czcionki Tu wpisz tekst Czcionka o rozmiarze 1 Czcionka o rozmiarze 2 Czcionka o rozmiarze 3 (domyślna) Czcionka o rozmiarze 4 Czcionka o rozmiarze 5 Czcionka o rozmiarze 6 Czcionka o rozmiarze 7 42

43 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kolorki Tu wpisz tekst 43

44 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Czcionki Tu wpisz tekst lub Tu wpisz tekst 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.: Tekst ). 44

45 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Łączenie argumentów To jest jakiś tekst Jak bedzie wyglądał tekst po wyświetleniu w przeglądarce?? 45

46 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kolor tła oraz tekstu  Tu jest właściwa treść strony 46

47 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wstawienie obrazka 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 nie posiada w jezyku HTML znacznika zamykającego! 47

48 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: 48

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

50 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: 50

51 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: 51

52 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

53 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ustawienie obrazka   Ustawienie może przyjmować wartości: ▪ Left ▪ Right  53

54 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 opis odsyłacza Odsyłacz do tematu 1 Odsyłacz do tematu 1 podstrona.html - kliknij mnie podstrona.html - kliknij mnie 54

55 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Odsyłacz do adresu internetowego  opis odsyłacza Adres musi zaczynać się od kliknij mnie kliknij mnie 55

56 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Odsyłacz pocztowy  opis odsyłacza  Zamiast: "adres poczty " należy wpisać adres poczty elektronicznej (np.:  Należy z rozwagą używać tego znacznika, ponieważ ten sposób wykorzystuje spam. 56

57 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Odsyłacz obrazkowy  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.:  adres poczty elektronicznej poprzedzony przez "mailto:" (np.: Przycisk 57

58 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Darmowe szablony  SiteQL.net SiteQL.net  Tymex.org Tymex.org  Webdiary.pl Webdiary.pl  Webinside Webinside  Webmade.org Webmade.org  Webmaster.Mocny.Com Webmaster.Mocny.Com  WebPL.org WebPL.org  Xklonos Xklonos 58

59 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Generator szablonu  szablon.html szablon.html  59

60 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 60

61 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Budujemy stronę  Rozszerzymy wiadomości na temat  Rozwiniemy temat formatowania tekstu o:  Dodatkowe formatowanie  Listy, wypunktowania   Komentarze  Połączenia, odsyłacze,  Tabele  Ramki  Ćwiczenia 61

62 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Co do Head’a jeszcze dodamy... Tytuł strony //Tytuł strony jest znacznikiem obowiązkowym. Pominięcie go stanowi błąd! // nie zapomnieć o "  “ “ 62

63 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Dodatkowe atrybuty 63 //np. "Tue, 20 Aug :25:27 GMT". // favicon.ico

64 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Nieco więcej o nich 64

65 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

66 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jeszcze o formatowaniu 66 Akapit... Nagłowek... // Opis w IE, Blok... Wyśrodkowanie... Czcionka... Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML zaleca się stosowanie stylów. Jak również: SIZE, COLOR, FACE

67 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jeszcze o formatowaniu  zalecany Znaczniki NOBR oraz WBR nie wchodzą w skład specyfikacji HTML zaleca się stosowanie stylów.

68 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego O formatowaniu 68 Indeks górny... Indeks dolny...

69 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Tekst preformatowany  teskt napisany czcionką monotypiczną (o stałej szerokości znaku),  uwzględnia dodatkowe spacje, tabulację i znaki końca linii (bez )  nie jest automatycznie zawijany  Należy jednak przy tym pamiętać, aby tekst nie zawierał znaków: " " (w zamian używaj: < i >).

70 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Tekst preformatowany ( ) Muu (oo) \/ \ || | \ ||---W || * || 70

71 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kod komputerowy, Dalekopis 71  Kod komputerowy... Pozwala wprowadzić fragment kodu komputerowego  Nie uwzględnia on jednak dodatkowych spacji, tabulacji ani znaków końca linii (trzeba używać )  jest automatycznie zawijany Łatwiej użyc tekstu preformatowanego.  Dalekopis...

72 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zmienna, cytaty 72  Zmienne ... -  Czcionka pochylona dla równań y = ax 2 + bx + c  Cytat...  Krótki cytat... Albert Einstein powiedział: Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.  Wynik: Albert Einstein powiedział: ”Dwie rzeczy nie mają granic: wszechświat i ludzka głupota”.  Blok cytowany ...

73 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego I inne 73  EM(emfaza), EM  KBD (klawiatura), KBD  SAMP (przykład), SAMP  INS i DEL (zmiany), INSDEL  ABBR (skrót), ABBR  ACRONYM(akronim), ACRONYM  DFN (definicja). DFN

74 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Po co ich aż tyle?? 74  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.CENTERBIUSSTRIKEFONTBASEF ONTBIGSMALL  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.HnSTRONGEMCODE KBDSAMPVARQCITEBLOCKQUOTEADD RESSNSDELABBRACRONYMDFN

75 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ze znaków semantycznych korzystają: 75  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

76 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 76

77 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 77 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 i, i ), ▪ każdy element listy posiada swój własny znacznik: i dla listy pojęć oraz dla pozostałych list. Wykazy ponumerowane, nieuporzadkowane

78 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Lista wypunktowana 78 Punkt pierwszy Punkt drugi Punkt trzeci Punkt pierwszy Punkt drugi Punkt trzeci

79 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Atrybuty 79   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  //zaczynamy od n-tej liczby  Punkt drugi //zmieniona wartość punktu, n – zawsze liczbą musi być Atrybut TYPE,START,VALUE, jest zdeprecjo nowany przez specyfikację HTML zaleca się stosowanie stylów.

80 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Triki 80 ul Punkt pierwszy lispan li Punkt drugi lispan li Punkt trzeci lispan li ul

81 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Pozioma linia 81

82 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Komentarze 82   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

83 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 83

84 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Odsyłacz coś szerzej o nim 84 ... - kreator hiperpołączeń na stronach HTML  Główna strona  Odwiedź Onet.pl  Strona główna  //dymek do podpisu strony  Strona główna //IE

85 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 85 Część czwarta: opis hiperłączy Aby sie odwołać do tego miejsca na stronie wystarczy: Powrót do opisu hiperłaczy Aby się odwołać na inną stronę w dane miejsce z atrybutem NAME należy zastosować konstrukcje: Idź do Części Czwartej Tworzenie połączeń i odnośników do określonych miejsc w dokumencie (etykiety)

86 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Podlinkowanie 86   liscie

87 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Odsyłacz FTP 87  pliki ftp Protokół FTP - File Transfer Protocol (Protokół Transmisji Plików) ftp://sunsite.icm.edu.pl/pub/ ftp://ftp.freebsd.org/pub/FreeBSD/releases/i386/7. 0-RELEASE/

88 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Własny folder download 88   Przykładowy serwer http:   Aby udostepnić jeden plik do ściągnięcia piszemy:  Plik plik.zip do pobrania

89 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Anatomia URL 89 Protokół Nazwa serwera Ścieżka dostępu i nazwa pliku

90 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Komunikatory internetowe 90 Gadu-Gadu opis Status użytkownika 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 opis Status użytkownika gdzie jako styl należy podać liczbę 1, 2 lub 3. ml

91 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Komunikatory internetowe 91 Skype opis opis akcjacall - rozmowa głosowa chat - rozmowa tekstowa add - dodaj do kontaktów userinfo - profil użytkownika voic - poczta głosowa sendfile - wyślij plik Status użytkownika 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.

92 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 92

93 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Części tabeli 93  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.

94 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Podstawowa struktura tabeli

95 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wiersza i komórki 95  - znaczk rozpoczęcia tabeli  - znacznik rozpoczęcia wiersza ▪ - znacznik rozpoczęcia nagłówka w wierszu  - znaczik rozpoczęcia kolumny (inaczej komórki danych)  Liczba wierszy jest nieograniczona  Natomiast musimy zadbać o to aby liczba komórek była taka sama.

96 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Podpisy 96  Ustawienie podpisu tabeli Domyślne ustawienie 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!

97 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Małe warsztaty 97  Stwórz własną tabele

98 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Marginesy w komórkach 98  Szerokość marginesu w komórkach (x – pikselach) ▪... ▪ Np.  Szerokość odstępu (x w pikselach) między sąsiednimi komórkami ▪... ▪ Np.

99 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Różnice miedzy nimi: 99

100 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wymiary tabel (wiecej miejsca w komórkach) 100 Wymiary całej tabeli... Lub...

101 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wymiary pojedynczej komórki Lub...

102 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wyrównanie tabeli Wyrównanie tabeli...  Wyrównanie zawartości tabeli Tu dochodzi dodatkowy znacznik: valign 2. Wyrównanie zawartości całego wiersza...

103 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...  "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)

104 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kolor tła 104  W całej tabeli...  W jednym wierszu...  W pojedynczej komórce...

105 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Tło obrazkowe 105 W całej tabeli... W pojedynczej komórce...

106 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ćwiczenia 106 table tr komórka1 komórka2 td tr tr komórka3 komórka4 td tr table

107 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Łączenie komórek 107 Poziome łączenie komórek... gdzie "x" oznacza liczbę komórek do połączenia w poziomie.

108 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Łączenie komórek 108 Pionowe łączenie komórek... gdzie "y" oznacza liczbę komórek do połączenia w pionie.

109 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 109 table tr komórki1,2 td tr tr komórka3 komórka4 td tr table

110 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Bardziej zaawansowane możliwości ulepszania tabel 110  Grupowanie i określanie wyrównania kolumn  Grupowanie i określanie wyrównania wierszy  Atrybuty FRAME oraz RULES

111 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Pływające Ramki 111

112 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Przykład  index.html Przykladowa strona z ramkami //Zapisujemy pod nazwa index.html 112

113 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego menu.html Przykladowa strona z ramkami Menu Strona główna Strona1 Strona2 Linki 113

114 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego prawa.html Moja pierwsza strona w Ramkach Witam na mojej stronie! Bedziemy sobie tutaj edytowali nasza pierwsza strone. Powinno znaleść się tutaj więcej informacji ale je szcze nie teraz... Wykonana 10 grudzien,

115 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego strona1.html 115   Untitled Document    Strona test 1   powrót 

116 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego links.html 116 Untitled Document LINKI powrót

117 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ramki pływające iframe Ramki pływające Pływające ramki M41 M42 M57 M

118 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego

119 (Extensible HyperText Markup Language). 119

120 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Język znaczników 120  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 (, ) udostępniły autorom stron WWW możliwości wykraczające poza początkowe zamierzenia twórców języka HTML.

121 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Po co CSS I XHTML? 121  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

122 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

123 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jakie korzyści 123  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.

124 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Identyfikator 124  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: 

125 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 125  Znacznik ten określa typ tworzonego dokumenty HTML, który może: ▪ Transitional (pośredni), ▪ Strict (ścisły) ▪ Frameset (układ ramek).

126 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 126  Strict (ścisła)  Transitional (przejściowa)  Frameset (ramkowa) Wymagania stawiane dokumentom XHTML

127 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wpowadzenie do Kaskadowych Arkuszy Stylów 127

128 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kaskadowe Arkusze Stylów CSS 128  Kaskadowe Arkusze Stylów CSS nie mogą funkcjonować samodzielnie, ponieważ definiują jedynie wygląd elementów dokumentu,  Style CSS same nie tworzy znaczników.  Wszystkie elementy stylów css`a muszą zostać wstawione do dokumentu w postaci struktury znaczników np. za pomocą języka XHTML lub HTML.  Aby pojąć jakie możliwości dają style CSS konieczna jest wcześniejsza znajomość zasad języka (X)HTML.

129 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Idea arkuszy stylów 129  Reguły stylów mogą formatować wszystkie znaczniki HTML.  W arkuszach stylów znaczniki HTML używane są jako selektory.  Reguły stylów mogą określać układ znacznika oraz wszelkie inne właściwości związane z typografią oraz jego wyglądem.

130 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 130 Zastosowanie arkuszy stylów Zastosowanie arkuszy stylów Chcemy aby nagłówek został wyświetlony na czerwono, a tekst akapitu będzie miał inną czcionkę i kolor niebieski. Idea arkuszy stylów

131 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 131  Aby poprwanie odzielić wygląd od struktury strony zastosujemy Akusze stylów.  Chcemy aby nagłówek strony był czerwony ale tekst poniżej, był napisany inną czcionką i kolorem niebieskim.  Aby tego dokonać czyli zmienić wygląd strony piszemy: h1 { color: red } p { font-family: Arial, Helvetica, sans-serif ; color: blue } Idea arkuszy stylów

132 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jak zbudować  Reguły stylów, używane w kaskadowych arkuszach stylów, składają się z dwóch części: 1. selektora, którym może być znacznik HTML ▪ p ▪h1 ▪ a 2. deklaracji definiującej właściwości i wartości selektora ▪color: blue ▪ font-family: Arial, Helvetica, sans-serif; ▪font-size:20px  selektor { dekoracja }

133 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Gdzie to wstawić??? 133 Zastosowanie arkuszy stylów Zastosowanie arkuszy stylów Chcemy aby nagłowek został wyświetlony na czerwono, a tekst akapitu będzie miał inną czcionkę.

134 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Trzy sposoby wstawiania: 134  Styl lokalny  Wewnetrzny arkusz stylów  Zewnerzny arkusz stylów

135 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Styl lokalny 135 Selektor – dowolny znacznik (x)HTML np. p, h1, td, table... Cecha - czy inaczej własność bądź właściwość (ang. "property") np. kolor tekstu – color. Wartość – (w deklaracji stylu) wpisujemy dokładną wartość atrybutu (np. dla koloru tekstu będzie to: red, blue czy też #31F4A5 itd.).

136 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zalety stylu lokalnego 136  Pozwala nadać wygląd konkretnemu pojedynczemu elementowi strony.  W lini (Tzw. styl inline )  W paru liniach... ... ▪Span nadaję się tylko do elementów pisanych w linii

137 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego DIV a SPAN 137 ...  Generalnie element blokowy (DIV) może zawierać wewnątrz siebie: ▪zwykły tekst ▪inne elementy blokowe.  Został on pomyślany do tworzenia obszerniejszych struktur. On nim jeszcze później.

138 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wewnętrzny arkusz stylów 138 Zastosowanie arkuszy stylów

139 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Osadzone arkusze stylów 139  Znacznik STYLE może znajdować się tylko i wyłącznie w nagłówku dokumentu...  Można go zastosować, gdy elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). style style

140 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zewnętrzny arkusz stylów 140  Zewnętrzne arkusze stylów: 1. reguły stylów przechowane są w osobnych plikach, poza dokumentami HTML.  Zalety: arkuszy stylów można wykorzystywać w wielu dokumentach HTML wchodzących w skład witryny. można tworzyć strony WWW o spójnym, jednolitym wyglądzie. umożliwienie szybkiej modyfikacji wyglądu witryny. Dzięki umieszczeniu reguł stylów w jednym dokumencie i połączeniu go z wieloma stronami WWW, zmiana sposobu ich prezentacji polega na zmianie tylko jednego pliku.

141 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zewnętrzny arkusz stylów 141 Dokument zawierający arkusz stylów, to: zwyczajne pliki tekstowe zapisane w kodzie ASCII posiadające specjalne rozszerzenia (.css) Strony WWW są zapisywane z rozszerzeniami.html lub.htm Dokument ten definiuje wspólne reguły stylów stosowane we wszystkich stronach WWW. Zewnętrzny arkusz stylów dołącza się do dokumentów HTML za pomocą znacznika.

142 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 142 (...) (...)  gdzie "style.css" względną scieżką dostępu do zewnętrznego arkuszu stylów.

143 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 143 body { font-family: Verdana, Arial, Helvetica, sans-serif;font-family font-size: 10pt;font-size colorcolor: #003868; background-colorbackground-color: #80B8E8; marginmargin: 6mm; } p { text-align: justify;text-align } pre, code { font-size: 8pt; }font-size Zewnętrzny arkusz stylów

144 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Ciekawostki 144  W pojedynczym dokumencie (X)HTML można dołączyć dowolną liczbę zewnętrznych arkuszy stylów - każdy jako osobny element. W przypadku konfliktów, ważniejsze będą deklaracje z arkusza dołączonego później.  Swój własny kasskadowy arkusz stylów dla kazdej strony w IE : ▪ Narzędzia/Opcje internetowe/generalne/Dostępność/Formatuj dokumenty używając mojego arkusza stylów

145 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Kaskada stylów 145  Co się stanie, gdy w jednym pliku zdefiniujemy wszystkie trzy sposoby deklaracji stylów? a) Powstaną konflikty b) Komputer się zawiesi c) Przegladarka wyświetli bład strony d) Nic sie nie stanie KASKADOWOŚĆ CSS - (ang. Cascading Style Sheets) Kaskadowe Arkusze Stylów.

146 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 146  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. Zewnętrzny arkusz stylów

147 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Reguły kaskadowości 147  W pierwszej kolejności wygląd strony jest modyfikowany zgodnie z regułami podanymi w zewnętrznych arkuszach stylów.  W drugiej kolejności zostają zastosowane definicje stylów zapisane w osadzonych arkuszach stylów, które, w razie konieczności, zastępują definicje stylów opisane w zewnętrznych arkuszach stylów.  Na końcu są stosowane style lokalne, które w razie konieczności zastępują definicje stylów podane w dwóch poprzednich rodzajach arkuszy stylów.

148 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Innymi słowy kolejność Styl lokalny (inline) 2. Rozciąganie stylu (SPAN) 3. Wydzielone bloki (DIV) 4. Wewnętrzny arkusz stylów 5. Import stylów do wewnętrznego arkusza 6. Zewnętrzny arkusz stylów 7. Import stylów do zewnętrznego arkusza

149 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego UWAGI 149  MSIE 7.0 nie obsługuje alternatywnych arkuszy stylów, jednak osadzenie ich w podany sposób nie powoduje błędów w wyświetlaniu strony. Dodatkowym rozwiązaniem może być skrypt Skórki, który ponadto zapamiętuje wybór dokonany przez użytkownika przy przechodzeniu pomiędzy stronami.  UWAGA! Polecenie dołączenia zewnętrznego arkusza powinno znajdować się w dokumencie wcześniej niż wewnętrzny arkusz. Odwrotna kolejność złamie zasady kaskadowości! Jest możliwe świadome złamanie kaskadowości poprzez polecenie “ !important”

150 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 150 Do pełnego poznania wszystkich właściwości stylów brakło by czasu.  Dlatego pełna specyfikacja wszystkich rzeczy z CSS w wersji pierwszej jest pod adresem:  Specyfikacja CSS w wersji 2  Specyfikacja w wersji 3

151 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Nasza przyszłość Nie ma pewności, że przeglądarki, obsługujące kaskadowe arkusze stylów, będą wyświetlać tak jak to sobie założylismy lub te same przykłądy z kursu będą tak samo wygladać.  Nie pozastaje nic innego, jak tylko:  próbować,  próbować  i jeszcze raz próbować,  aż w końcu otrzymasz zadowalające rezultaty.

152 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 152  Kontrola układu strony przy użyciu właściwości CSS  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

153 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jednoski długosci 153  Jednostki długości: ▪względnych ▪bezwzględnych.  Do względnych jednostek długości zaliczane są: a) em (wielkość określonej czcionki), b) ex (wysokość określonej czcionki) c) px (piksele, zależne od urządzenia, na którym strona będzie wyświetlana).  Jednostki bezwzględne to: a) pt (punkty), b) cm (centymetry), c) mm (milimetry) d) pc (pica).

154 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Jednoski długosci 154  Wartości procentowe są zawsze określane względem innej, wybranej wartości, takiej jak długość.  Mogą się rozpoczynać od opcjonalnego znaku + lub - bezpośrednio po nim należy podać liczbę i znak procentu (%).  Jednostka długości może również przyjąć wartość auto;

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

156 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 156  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). Właściwość Opis

157 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 157

158 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wartości MARGIN i PADDING 158 We właściwościach margin oraz padding można podać do czterech wartości:  jedna wartość — będzie dotyczyła wszystkich czterech marginesów lub wypełnień,  dwie wartości — pierwsza z nich będzie dotyczyła górnego i dolnego wypełnienia lub marginesu, natomiast druga — prawego i lewego,  trzy wartości — pierwsza wartość dotyczy górnego marginesu lub wypełnienia, druga — prawego i lewego, natomiast trzecia wartość — dotyczy dolnego marginesu lub wypełnienia.

159 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 159  Background-color Określa kolor tła dla elementu. Możliwymi wartościami są nazwy kolorów (lub odpowiadający im heksadecymalny „tryplet” rgb) lub słowo transparent.  Background-image Definiuje obraz jako tło elementu. Wartością powinien być adres URL pliku obrazu lub słowo none.  Background-repeat Jeśli konieczne jest złożenie tła z identycznych obrazów, ten atrybut umożliwi określenie sposobu wyświetlania tła. Wartości atrybutu to repeat, repeat-x i repeat- y. 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.

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

161 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Przykład nieporuszającego sie obrazku na środku strony 161 body { background-attachment:fixed; background-image: url(../../przyklad.png); background-position: center center; background-repeat: no-repeat; }

162 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 162  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. Wygląd obramowań

163 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 163  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, font- style, font-family oraz line-height w jednym miejscu arkusza stylów. Określanie czcionek i stylów

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

165 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 165  pismo bezszeryfowe  pismo szeryfowe  serif  Sans serif ▪ "Sans" to po francusku – "bez", w tym przypadku – "bez szeryfów". Pismo szerywowe i bezszeryfowe

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

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

168 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wyrównanie tekstu 168  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 tekście HTML c) nowrap — wiersze są łamane tylko za pomocą znacznika.

169 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Atrybut CLASS 169 Stosowanie klas

170 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego A w tekscie: 170  Witam na mojej stronie!  Bedziemy sobie tutaj edytowali nasza pierwsza strone.  Powinno znaleźć się tutaj więcej informacji ale jeszcze nie teraz...  Wykonana 10 grudzien, 2008

171 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Do dzieła

172 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 172 Moja strona z arkuszami stylów Strona główna Strona1 Strona2 Linki Moja pierwsza strona ze stylami Witam na mojej stronie! Bedziemy sobie tutaj edytowali nasza pierwsza strone. Powinno znaleźć się tutaj więcej informacji ale jeszcze nie teraz... Wykonana 10 grudzien, 2008

173 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego DODAWANIE KOLORU 173 Miejsce na banner 219

220 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Formatowanie czcionki MENU 1 link1 link2 link3 link4... Wlaściwe miejsce na strone "> MENU 1 link1 link2 link3 link4... Miejsce na stopke 220

221 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego 221

222 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego

223 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

224 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

225 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego

226  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 PHP -- "PHP: Hypertext Preprocessor"

227 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego test.php PHP Test 227

228 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego PHP -- sprawdzenie możliwości  228

229 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 a kończymy na.  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

230 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. 230

231 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.: mail.gif&f1=jakis%40jakis&f2=zaq1&f3=1&f4=1&f5 =duza mail.gif&f1=jakis%40jakis&f2=zaq1&f3=1&f4=1&f5 =duza 231

232 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wnętrze  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, a typy naszych inputów mamy następujące: 232

233 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wlaściowści  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

234 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Wlaściowści  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

235 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego plik: hasło: Projektuje strony w XHTMLU Projektuje strony w CSS W stopiniu: Małym Dużym Średnim 235 form.html

236 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Skrypt PHP 236 Cosik.php

237 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Cosik.php Skrypt PHP

238 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Cosik.php – ciąg dalszy print $_GET['f4']; print " \n\t"; //pobieranie szóstej zmiennej print $_GET['f5']; print " \n\t"; print " zostały wysłane...\n\n\t"; ?> 238

239 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego polski (pl) czeski (cz) rosyjski (ru) irlandzki (ie) holenderski (nl) 239

240 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

241 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego Zabezpieczenie maila przed SPAMem JavaScript 241

242 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 242

243 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego HTML Vademecum Profesjonalisty HTML 4 - Czarna księga WebMastera 243

244 Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego HTML Vademecum Profesjonalisty HTML 4 - Czarna księga WebMastera


Pobierz ppt "World Wide Web Materiały szkoleniowe opracowane przez: Centrum Szkoleń Informatycznych VEDIUS Projekt współfinansowany ze środków Unii Europejskiej w ramach."

Podobne prezentacje


Reklamy Google