1 HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu 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 tzw. parserów (analizatorów składni) HTML. HTML – kod źródłowy języka, można bezpośrednio pisać korzystając z edytora tekstu nieformatowanego (ASCII) np. Notatnik – zapis w pliku z rozszerzeniem htm lub html
2 Dynamiczny HTML lub DHTML (angDynamiczny 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 umożliwiających interakcję strony www z użytkownikiem i stosowanie efektów wizualnych Protokół przesyłu w sieci – HTTP (ang. hyper text transfer protocol) – także HTTPS (+secure – bezpieczny)
3 Znaczniki (tagi) – postać ogólna
4 Onet Przykład Onet nazwa atrybutu wartość atrybutu znacznik zamykający znacznik otwierający zawartość
5 Znaczniki podstawowe (jest ich ok. 80)Strukturalne H1 – nagłówek P – akapit DIV, SPAN - grupujące Prezentacyjne B – pogrubienie I – italic Hiperłącza (kotwice) A
6 Zagnieżdżanie znaczników Tekst1 Tekst2 Tekst 3
7 Znaczniki elementów pojedynczych (pustych)
wymuszona zmiana wiersza grafika pole formularza można pisać:
lub
lecz zgodnie z XHTML powinno być:
ze spacją
8 Wybrane znaczniki … Akapit tekstowy - znacznik
Przykłady: Jakiś tekst Nagłówek pierwszy
Nagłówek drugi
Nagłówek trzeci
Nagłówek czwarty
Nagłówek piąty
Nagłówek szósty
9 Linie poziome znacznik HR (pojedynczy)
10
Litwo, Ojczyzno moja
Styl czcionki tekst pogrubienie tekst kursywa tekst podkreślenie Stosuje się tylko lokalnie, np. wewnątrz akapitu dla krótkiego fragmentu tekstuLitwo, Ojczyzno moja
11 Kolor tła strony – jako cecha atrybutu style white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy inne kolory oraz np. motywy lub obrazek w tle strony można zdefiniować parametrem stylu dla BODY – o tym za chwilę
12 Tabele
AA | AB |
BA | BB |
CA | CB |
13 Lista wypunktowana Lista numerowana
14 Przykład
15 znacznik IMG - pojedynczyGrafika znacznik IMG - pojedynczy
folder podrzędny względem tego, w którym jest plik HTML
16 Odsyłacze (link – hiperłącze)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ą. Tekst (lub obrazek), który należy kliknąć Np. Wirtualna Polska Możesz zaglądnąć pod ten adres
17 Formularze
19 efekt…
20 Przykład skryptu HTML
AA | AB |
BA | BB |
CA | CB |
21 CSS - atrybut style i jego cechyWykorzystujemy tu atrybut style dla dowolnego znacznika 22 Kolory Oprócz nazw ang. można podawać 3 liczby w układzie szesnastkowym, określające nasycenie składowych RGB (red, green, blue) np. #17AACF R G B czyli np. #00FF00 to zielony 23 Przykładowe cechy stylówOpis Przykładowa wartość background-color kolor tła #ff0000 green background-image adres tła graficznego rys.gif border-color kolor ramki red border-style styl i wygląd obramowania dotted dashed solid color kolor tekstu yellow #669933 font-family rodzaj oraz rodzina czcionki Arial sans-serif font-size wielkość czcionki 14px 2cm font-style styl czcionki italic 24 font-weight grubość (waga) czcionki bold lighter height wysokość elementu 10cm 3mm left top odległość od lewej (górnej) krawędzi margin-top margin-bottom margin-left margin-right każdy margines osobno 5cm margin wszystkie marginesy (góra, lewy, dół, prawy) 10px 20px 10px 40px text-align wyrównanie poziome tekstu left center justify vertical-align wyrównanie w pionie top bottom width szerokość elementu padding odległość od krawędzi elementu ... Styl może mieć wiele cech, np..:
itd. cechy oddzielamy średnikami