Wykład 2 Mechatronika PWSW Informatyka. Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 Internet Explorer Opera Firefox(Mozilla) Safari.

Prezentacja na temat: "Wykład 2 Mechatronika PWSW Informatyka. Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 Internet Explorer Opera Firefox(Mozilla) Safari."— Zapis prezentacji:

1 Wykład 2 Mechatronika PWSW Informatyka

2 Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 Internet Explorer Opera Firefox(Mozilla) Safari Chrome(Google)

3 HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML – kod źródłowy języka, można bezpośrednio pisać korzystając z edytora tekstu nieformatowanego (ASCII) np. Notatnik – zapis w pliku tekstowym ASCII, z rozszerzeniem htm lub html HTML zdefiniowanie sposobu strukturalnej i wizualnej prezentacji dokumentu w przeglądarce internetowej, osadzanie ciągów instrukcji języków skryptowych, wpływających na zachowanie przeglądarek lub innych parserów HTML przeglądarka dla przesyłu dokumentów HTML korzysta przede wszystkim z protokołu HTTP (hypertext transfer protocol) – ale także bezpieczniejszego (szyfrowanego) protokołu HTTPS. HTML

4 Dynamiczny HTML lub DHTML (ang. Dynamic HyperText Markup Language, dynamiczny hipertekstowy język znaczników) techniki służące do dynamicznej zmiany treści, wyglądu, zachowania dokumentu HTML w przeglądarce umożliwiające interakcję strony WWW z użytkownikiem i stosowanie efektów wizualnych plik HTML - tekst nieformatowany – małe pliki łatwe do przesyłu w sieci

5 Tytuł w nagłówku okna Tu są elementy pojawiające się na stronie PODSTAWOWA STRUKTURA dokumentu HTML konfiguracja treść strony

6 Znaczniki (tagi) – postać ogólna zawartość atrybuty są opcjonalne (niekonieczne) znacznik otwierający znacznik zamykający

7 Onet Przykład dla znacznika opisującego hiperłącze nazwa atrybutu zawartość wartość atrybutu

8 Strukturalne (pewien obiekt), np. P – akapit H1 – akapit nagłówkowy TABLE – tabela UL, LI – listy DIV, SPAN – grupujące IMG – obraz i inne Prezentacyjne – określające formę – np. B – pogrubienie I – italic U - podkreślenie Hiperłącza (kotwice) A Znaczniki podstawowe (jest ich ok. 80)

9 Zagnieżdżanie znaczników Tekst1 Tekst2 Tekst 3 Tekst1 Tekst2Tekst3 obrazek w komórce tabeli np. UWAGA: ciąg spacji HTML traktuje jak jedną – przy konieczności użycia kilku spacji stosuje się twarde spacje text text

10 Znaczniki elementów pustych (bez zawartości) przykładowo: wymuszona zmiana wiersza grafika pole formularza lecz zgodnie z XHTML powinno być: ze spacją można pisać:

11 Wybrane znaczniki … Przykłady: Tytuł Tytuł2 Nagłówek pierwszy Nagłówek drugi Nagłówek trzeci Nagłówek czwarty Nagłówek piąty Nagłówek szósty Akapit tekstowy - znacznik - Akapity nagłówkowe określonych gotowych stylów wybór kroju, koloru, rozmiaru czcionki przez atrybut style i jego cechy – o tym za chwilę Dawniej określał to znacznik ale niezalecany dla nowszych standardów HTML

12 Linie poziome znacznik HR pusty – nie ma znacznika zamykającego

13 Styl czcionki tekst pogrubiona tekst kursywa tekst podkreślona Stosuje się tylko lokalnie, np. wewnątrz akapitu dla krótkiego fragmentu tekstu Litwo, Ojczyzno moja tylko jedno słowo pogrubione

14 Kolor tła strony – jako atrybut znacznika BODY motywy lub obrazek w tle strony można zdefiniować innymi parametrami stylu dla BODY np. background-image

15 Oprócz nazw ang. można podawać 3 dwupozycyjne liczby w układzie szesnastkowym (cyfry 0123456789ABCDEF), określające nasycenie składowych RGB (red, green, blue) od 00 (minimum) do FF (maksimum = 255 10 ) np. R G B czyli np. #00FF00 to zielony Kolory #17AACF white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy

16 …. … znacznik wiersza … znacznik kolumny Przykład: AA AB BA BB CA CB Tabele

17 tekst punktu pierwszego tekst punktu drugiego tekst punktu trzeciego Lista wypunktowana Lista numerowana tekst punktu pierwszego tekst punktu drugiego tekst punktu trzeciego

18 Punkt 1. Punkt 2. Podpunkt 1. Podpunkt 2. 1. Punkt 1. 2. Punkt 2. Podpunkt 1. Podpunkt 2. Przykład efekt

19 Grafika znacznik IMG folder podrzędny względem tego, w którym jest plik HTML

20 Odsyłacze (link – hiperłącze) Element, który należy kliknąć Np. Wirtualna Polska Możesz zaglądnąć pod ten adres Odsyłaczem jest konstrukcja, która wskazuje pewien adres (zakładka na tej samej stronie, inna strona, inny adres URL) i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką.

21 Formularze Rock and roll Jazz Blues Podstawowe Średnie Wyższe Wpisz tekst: cd. … ta sama nazwa

22 OK MIEJSCE NA WIĘKSZY TEKST

23 efekt…

24 Dla obsługi danych wpisanych do formularzy (np. ich wysłanie na serwer w celu zapisu czy też analizy) konieczne jest zastosowanie specjalnych metod

25 Moja strona To jest moja strona AA AB BA BB CA CB Onet GOOGLE Interia Przykład dokumentu HTML tabela lista hiperłączy BODY HEAD

26 CSS – arkusze stylów Styl może mieć wiele parametrów:... cechy oddzielamy średnikami cecha1:wartość; cecha2:wartość itd.

27 Indeks: elementy p {font-size: 144px;}.czerwony {background-color:#ff0000;border:1px solid black;} #moj {background-color:#00cc00;} To jest tekst 1 AAA BBB tag klasa Definicje stylów znaczników lub klasy 1. bezpośrednio w elemencie 2. w bloku HEAD To jest tekst identyfikator

28 Plik style.css p {font-size: 44px;}.czerwony {background-color:#ff0000;} Plik index.html Indeks: elementy '; To jest tekst 1 AAA 3. W osobnym pliku

29 Styl OpisPrzykładowa wartość background-color kolor tłared background-image adres tła graficznegourl('rys.gif') border-color kolor ramki#33FF99 border-style styl i wygląd obramowania solid dotted dashed border grubość, styl i kolor ramki1px solid green cursor wygląd kursorahand color kolor czcionki tekstuyellow font-family rodzaj oraz rodzina czcionkiArial sans-serif font-size wielkość czcionki14px font-style styl czcionkiitalic Przykładowe cechy stylów

30 font-weight grubość (waga) czcionkibold lighter height wysokość elementu10cm 20px 10mm 2in (cale) left top odległość od lewej (górnej) krawędzi 10cm text-align wyrównanie poziome tekstuleft text-decoration wygląd tekstuunderline vertical-align wyrównanie w pionietop width szerokość elementu200px margin odległość od zewnętrznego elementu 10px 20px 30px 50px (góra prawy dół lewy) padding odległość od krawędzi elementu jak wyżej Pełny opis możliwych do zastosowania cech stylów: np. http://www.signs.pl/html/o/style.php

31 Przykładowo: margin Tekst w komórce padding Obejrzeć efekt w przeglądarce

32 …... itd tekst akapitu …. body{font: 14px helvetica, sans-serif;} td {font: 14px helvetica, sans-serif;} p.gruby {font: bold 16px helvetica, sans-serif;} Przykładowo: i dalej..