Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

HTML. Struktura strony WWW prolog treść nagłówka treść dokumentu HTML.

Podobne prezentacje


Prezentacja na temat: "HTML. Struktura strony WWW prolog treść nagłówka treść dokumentu HTML."— Zapis prezentacji:

1 HTML

2 Struktura strony WWW prolog treść nagłówka treść dokumentu HTML

3 Prolog Informacja o standardzie, w jakim ten dokument został wykonany Deklaracja typu dokumentu + ewentualnie odnośnik do dokumentu zawierającego formalny opis składni dla danego standardu

4

5 Polskie litery dla Windows-1250: charset=windows-1250 dla ISO : dla iso dla UTF-8: charset=utf-8

6 Znaczniki HTML Twórcy stron WWW treść treść1 treść2 treść3

7 Atrybuty znaczników treść

8 sugestia dla przeglądarki, że głównym językiem strony będzie język polski

9 Główne znaczniki sekcji - definiuje tytuł strony - określa odwołania do zasobów zewnętrznych, np. stylów lub skryptów - określa rozmaite dane dodatkowe, np. rodzaj kodowania, opis strony, słowa kluczowe, autor, przekierowanie na inny adres

10 treść tytułu

11 atrybuty background – określa obraz stosowany jako tło; bgcolor – określa kolor tła; text – określa kolor tekstu; link – określa kolor nieodwiedzonego odnośnika; vlink – określa kolor odwiedzonego odnośnika; alink – określa kolor aktywnego odnośnika

12 Przykłady

13 Nagłówki (Tytuły) Dzielą stronę na sekcje. Mają wartości od 1 do 6. pozwala to na budowanie hierarchii tytułów. treść główny treść.....

14 Znaczniki formatowania tekstu: blokowe – definiują bloki tekstu, np.,,,, ; wierszowe – z reguły zmieniają atrybuty tekstu, np.,,, uwaga! Znaczników nie mieszamy dowolnie. W elemencie wierszowym nie umieszczamy znaczników blokowych.

15 Znacznik akapitu tekst przełamanie wiersza w obrębie akapitu

16 Formatowanie czcionki tekst tekst pogrubiony tekst kursywa tekst tekst podkreślony

17 Znacznik wstawia linię poziomą

18 Atrybuty znacznika size – zmienia grubość linii width – ustala długość linii w procentach strony align – określa położenie linii na stronie, domyślnie pośrodku color – określa kolor linii

19 Znacznik Definiuje czcionkę. Atrybuty: size="x" wielkość czcionki; x=1..7 standard x=3; size="+x " o x więcej od standardu; size="-x " o x mniej od standardu color="kolor " kolor czcionki

20 Listy treść elementu... treść elementu

21 Listy nieuporządkowane wypunktowanie pierwszy element drugi element... n-ty element punktor =disc, square, circle (koło, wypełniony kwadrat, okrąg)

22 Listy nieuporządkowane wyliczanie pierwszy element drugi element... n-ty element wyróżniki=a, A, i, I, 1 (małe litery, duże litery, liczby w zapisie rzymskim z małymi literami, liczby w zapisie rzymskim z dużymi literami, cyfry w zapisie arabskim)

23 Grafika znacznik

24 Poprawne ścieżki dostępu do obrazka plik.jpg – obrazek i dokument html w tym samym katalogu katalog/plik.gif – obrazek znajduje się w podkatalogu katalogu z dokumentem html../ plik.jpg – dokument html w podkatalogu../katalog/plik.gif – obrazek i strona w dwóch różnych podkatalogach

25 Atrybuty znacznika align ="top" tekst przy górnej krawędzi grafiki ="left" tekst po lewej stronie grafiki ="right" tekst po lewej stronie grafiki =„bottom" tekst przy górnej krawędzi grafiki =„midlle" tekst na wysokości środka grafiki

26 wysokość i szerokość grafiki

27 Formaty plików graficznych 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ść.

28 Odnośniki (hiperłącza) wskazują miejsce, do którego przeniesie nas przeglądarka po kliknięciu na wyróżnionym przez nas tekście lub obrazku. Znacznik definiuje tzw. kotwicę: źródłową – zaznacza obiekt, tworzący połączenie z obiektem docelowym; docelową – to miejsce do którego nastąpi przeniesienie.

29 Odsyłacz do podstrony opis odsyłacza np. O firmie Galeria Strona startowa

30 Odsyłacz do adresu internetowego opis odsyłacza np. Strona firmowa

31 Odsyłacz pocztowy połączenie automatycznie wywołujące zaadresowany formularz poczty elektronicznej opis odsyłacza np. poczta elektroniczna

32 Odsyłacz obrazkowy gdzie adres: ścieżka dostępu do dowolnej Twojej podstrony (np.: index.html, strona2.html), adres internetowy poprzedzony przez adres poczty elektronicznej poprzedzony przez "mailto:".

33 Nazwy odnośników wykorzystuje się przy hiperłączach lokalnych tekst wstawiamy w miejscu, do którego będziemy chcieli się przenieść; tekst lub obrazek wstawiamy w miejscu, z którego chcemy się przenieść

34 Przykład Terminy i definicje Dodatek

35 Tabele komórka1 komórka2 komórkaN komórka1 komórka2 komórkaN

36 Dodatkowe znaczniki tabeli podpis, umieszczany w obrębie tabeli komórka nagłówka tabeli, część nagłówkowa tabeli, część zawierająca główną tabelę, stopka tabeli, np. podpis pod tabelą podział tabeli przy wykorzystaniu tych elementów przydatny jest w przypadku długich tabel (nagłówek i stopka mogą być drukowane na każdej stronie)

37 Mapy odnośników na obrazach.....

38 Atrybut Shape określa kształt obszaru reagującego na kliknięcia, ma 4 wartości: default – cały obszar obrazu; rect – prostokąt o zadanych wymiarach; circle – koło o zadanym środku i promieniu; poly – wielokąt o zadanych wierzchołkach.

39 koło circle – coords= " x, y, r " gdzie x, y współrzędne środka r – promień rect – prostokąt coords= "x1, y1, x2, y2" gdzie x1, y1 – współrzędne lewego górnego rogu x2, y2 – współrzędne prawego dolnego rogu; poly – wielokąt coords= "x1, y1, x2, y2,...,xN, yN" gdzie x1, y1 – współrzędne 1 wierzchołka, x2, y2 – współrzędne 2 wierzchołka,.... xN, yN – współrzędne N-tego wierzchołka.

40 Struktura z ramkami Definiowanie strony z ramkami składa się z następujących kroków: podział witryny na sekcje przy pomocy znacznika, przypisanie ramkom zawartości, zdefiniowanie treści dla przeglądarek, które nie obsługuja ramek Uwaga! występuje zaraz za, tylko w sekcji

41 Ogólna definicja ramek.... Układ strony, czyli liczbę ramek i ich rozmieszczenie regulują atrybuty znacznika : cols i rows Rozmiar w pikselach, w procentach lub automatycznie (znak *).

42 Przykłady: cols="25%, 75%" cols="150, * " rows="15%, *, 15%" cols="25%, * " rows=" 25%, *"

43 Znacznik przyjmuje następujące atrybuty: frameborder – określa, czy ma być widoczne obramowanie ramki (0-brak, 1- jest); marginheight – okresla rozmiar górnego i dolnego marginesu; marginwidht – okresla rozmiar lewego i prawego marginesu; name – określa nazwę ramki; noresize – powoduje, że rozmiar ramki nie będzie mógł być zmieniany przez użytkownika; scrolling – określa, czy mają być widoczne paski przewijania: yes, no, auto. src – określa adres dokumentu, który ma się pojawić w ramce.

44 Przykład Twoja przeglądarka nie obsługuje ramek. Dokumenty znajdziesz tutaj i

45 Zagnieżdżanie ramek


Pobierz ppt "HTML. Struktura strony WWW prolog treść nagłówka treść dokumentu HTML."

Podobne prezentacje


Reklamy Google