Wykład 2 Mechatronika PWSW Informatyka

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

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

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

OK MIEJSCE NA WIĘKSZY TEKST

efekt…

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

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

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

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

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

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

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.

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

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