Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

HTML. Podstawowa struktura dokumentu Znaczniki META Poniżej opisuję podstawowe opisy najbardziej użytecznich znaczników meta.   Polecenie informuje.

Podobne prezentacje


Prezentacja na temat: "HTML. Podstawowa struktura dokumentu Znaczniki META Poniżej opisuję podstawowe opisy najbardziej użytecznich znaczników meta.   Polecenie informuje."— Zapis prezentacji:

1 HTML

2 Podstawowa struktura dokumentu

3 Znaczniki META Poniżej opisuję podstawowe opisy najbardziej użytecznich znaczników meta.   Polecenie informuje przeglądarkę o obsłudze znaków. Dzieki kodowaniu iso i przekonwertowaniu jej za pomocą specjalnych programów twoja strona będzie prawidłowo interpretować polską czcionkę. Istnieją także kodowania windows-1250, jednak jego używanie nie jest zalecane.   Ten znacznik pozwoli przeglądarkom łatwiejsze odnalezienie jej. W miejscu - "wyrazy" wpisz wyrazy opisujące twoją stronę np. Ten znacznik pozwoli przeglądarkom łatwiejsze odnalezienie jej. W miejscu - "wyrazy" wpisz wyrazy opisujące twoją stronę np.   Wpisany w miejscu "opis" tekst będzie wyświetlony po znalezieniu twojej strony przez wyszukiwarkę. Opis może zawierać maksymalnie 250 znaków.   Wisany w miejsce "dene osoby" tekst będzie informował o autorze strony.   Znacznik informuje o używanym edytorze do tworzenia stron   Polecenie informuje o języku strony   Znacznik powoduje, że strona będzie przeładowywana co czas podany w miejscu "x". Czas wyrażany jest w milisekundach

4 Nagłówki Nagłówki (Heading) służą w HTML'a do tworzenia... nagłówków!!! Nagłówek otwieramy komendą, gdzie zamiast # wstawiamy liczbę od 1 do 6. Jak większość flag i ta wymaga zamknięcia.

5 Znacznik FONT Każdy tekst, który będzie miał mieć określony kolor, krój wielkość czcionki musimy objąć znacznikami np. wpisanie kodu: tekst1 tekst2 tekst1 tekst2 spowoduje wyświetlenie w przeglądarce: tekst1 tekst2 Wielkość czcionki Wielkość czcionki reguluje parametr - SIZE="x". "X" może przyjmować wartości od

6 Kolory

7 Pomocne dodatkowe znaczniki - obięty tymi znacznikami tekst jest pogrubiony - obięty tymi znacznikami tekst jest przekreślony - obięty tymi znacznikami tekst jest pochylony - obięty tymi znacznikami tekst jest podkreślonu - obięty tymi znacznikami tekst jest ułożony przy lewej krawędzi - obięty tymi znacznikami tekst jest wyśrodkowany - obięty tymi znacznikami tekst jest ułożony przy prawej krawędzi - wstawienie tego tagu spowoduje wyświetlenie na stronie poziomej lini. Dodatkowo możemy zadeklarować szerokość lini, oraz kolor. Dodanie słówka "NOSHADE" spowodyje, że linia nie będzie trójwymiarowa - - ta komenda (bez zakończenia) tworzy wcięcia przed tekstem (akapit) - podobne działanie jak TAB w edytorach tekstowych. - obięty tymi znacznikami tekst jest pogrubiony - obięty tymi znacznikami tekst jest przekreślony - obięty tymi znacznikami tekst jest pochylony - obięty tymi znacznikami tekst jest podkreślonu - obięty tymi znacznikami tekst jest ułożony przy lewej krawędzi - obięty tymi znacznikami tekst jest wyśrodkowany - obięty tymi znacznikami tekst jest ułożony przy prawej krawędzi - wstawienie tego tagu spowoduje wyświetlenie na stronie poziomej lini. Dodatkowo możemy zadeklarować szerokość lini, oraz kolor. Dodanie słówka "NOSHADE" spowodyje, że linia nie będzie trójwymiarowa - - ta komenda (bez zakończenia) tworzy wcięcia przed tekstem (akapit) - podobne działanie jak TAB w edytorach tekstowych. i - indeks dolny. Umieszczenie tekstu niżej niż zwykle (np. wzory chemiczne) i - indeks dolny. Umieszczenie tekstu niżej niż zwykle (np. wzory chemiczne) i - indeks górny. Umieszczenie tekstu wyżej niż zwykle (np. potęgowanie) i - indeks górny. Umieszczenie tekstu wyżej niż zwykle (np. potęgowanie)

8 Listy i - lista nieuporządkowana i - lista uporządkowana i - lista nieuporządkowana i - lista uporządkowana Następnie pomiędzy tymi flagami wstawiamy poszczególne pozycje ( - List Item) Aby określić symbol/ sposób wyliczania w listach należy dodać do komendy / parametr TYPE np... Wartości tego parametru to: Nieuporządkowane: disk - kropka square - kwadrat circle - puste koło Uporządkowane: 1 - cyfry arabskie (domyślne) A - litery łacińskie małe a - litery łacińskie duże I - cyfry rzymskie małe i - cyfry rzymskie duże

9 Grafika Przy wstawianiu grafiki będziemy zawsze wstawiać znacznik. Samo wstawienie tego tagu nie spowoduje nic (tak na prawdę to może spowodować tylko błąd). Wewnątrz tego znacznika będziemy wstawiać kolejne parametry takie jak: SRC="nazwa_obrazka.gif" - dzieki tej właściwości przeglądarka wie jaki plik ma wyświetlić. Należy pamiętać, że przeglądarki interpretują tylko dwa typy grafiki - gif, jpg. Jeżeli obrazek znajduje się w tym samym katalogu co dokument HTML nie trzeba podawać ścieżki, w przeciwnym wypadku tak. WIDTH="30" Height="50" - polecenia określają szerokość obrazka (Width), oraz wysokość (Height). W przypadku jeżeli nie zostaną zadeklarowane obrazek przyjmie naturalne wielkości. ALT="opis" - parametr spowoduje, że po najechaniu myszą na obrazek pokarze się się tekst VSPACE="5" HSPACE="10" - właściwości ustawiają odstęp od tekstu w poziomie (HSPACE), oraz w pionie (VSPACE). BORDER="5" - znaczniki powodują wyświetlenie ramki wokół obrazka. ALIGN="left" - jak już możliwie zauważyłeś wstawiony w powyższy sposób obrazek rozdziela tekst. Aby to zmienić, i aby tekst otaczał grafikę należy zastosować właściwość - ALIGN. Może ona przyjmować właściwości "left", "center", "right", "justify", "top", "middle", "bottom", "absmiddle", "absbottom", "texttop", "baseline".

10 Hiperłącza  Zajrzyj  Zajrzyj Napisz Napisz Muzyka Muzyka

11 Tabele Tabele ograniczają znaczniki. Wewnątrz wstawia się tagi, a w nich.Przykładowa tabela wygląda następująco: Kolumna1A Kolumna1B Kolumna2A Kolumna2B Tabele ograniczają znaczniki. Wewnątrz wstawia się tagi, a w nich.Przykładowa tabela wygląda następująco: Kolumna1A Kolumna1B Kolumna2A Kolumna2B

12 Tabele cd. Definiując dodatkowe właściwośći tagu możemy regulować wygląd całej tabeli. Parametr BACKGROUND dediniuje obrazek który ma zostać wykorzystany na tło tabeli np. Możemy także podać kolor tła: Właścowość BORDER ustala grubość ramki w okół tabeli, zaś BORDERCOLOR jej kolor. Parametr CELLPADDING zdefiniować odstęp pomiędzy tekstem, a ramką kratki, która zostaje zdefiniowana poprzez parametr CELLSPACING=grubość. Jeżeli nam zależy na stałej szerokości tabeli możemy ją ustalić poprzez opcję WIDTH. Może ona przyjmować wartość wyrarzoną w procentach (WIDTH=90%), lub pixelach (WIDTH=500). Definiując dodatkowe właściwośći tagu możemy regulować wygląd całej tabeli. Parametr BACKGROUND dediniuje obrazek który ma zostać wykorzystany na tło tabeli np. Możemy także podać kolor tła: Właścowość BORDER ustala grubość ramki w okół tabeli, zaś BORDERCOLOR jej kolor. Parametr CELLPADDING zdefiniować odstęp pomiędzy tekstem, a ramką kratki, która zostaje zdefiniowana poprzez parametr CELLSPACING=grubość. Jeżeli nam zależy na stałej szerokości tabeli możemy ją ustalić poprzez opcję WIDTH. Może ona przyjmować wartość wyrarzoną w procentach (WIDTH=90%), lub pixelach (WIDTH=500). i i Wstawione znaczniki pomiędzy tagi zostają ustawione w jednej lini. Ich ilość jest praktycznie nie ograniczona. Znacznik posiada dodatkowe parametry takie jak: BGCOLOR, który ustala kolor tła kratki: lub WIDTH - parametr używany w przypadku jeżeli chcemy wymusić na kratce określoną szerokość: Wstawione znaczniki pomiędzy tagi zostają ustawione w jednej lini. Ich ilość jest praktycznie nie ograniczona. Znacznik posiada dodatkowe parametry takie jak: BGCOLOR, który ustala kolor tła kratki: lub WIDTH - parametr używany w przypadku jeżeli chcemy wymusić na kratce określoną szerokość:

13 Ramki Ramkową strukturą dokumentu nazywamy dokument, który posiada wydzielone poszczególne elementy strony tzn. strona składa się z kilku dokumentów gdzie jeden np. jest wyświetlany stale. Ramkową strukturą dokumentu nazywamy dokument, który posiada wydzielone poszczególne elementy strony tzn. strona składa się z kilku dokumentów gdzie jeden np. jest wyświetlany stale. Podstawowy dokument z ramkami ma strukturę: Podstawowy dokument z ramkami ma strukturę:

14 Ramki cd Załóżmy, że stworzyliśmy plik index.html który posiada strukturę ramkową: Chcielibyśmy teraz, aby po kliknięciu na link z dokumentu menu.html nowa strona została wyświetlona w ramce - Ramka2. I tu trzeba wrócić pamięcią do tworzenia odsyłaczy i właściwości TARGET. Przykładowy link mógłby wyglądać następująco: Kilka linków Spowoduje to wspomniany wcześniej efekt. Obiecywałem, że powrócę do właściwości TARGET więc powracam. Nadanie temu parametrowi opcji "_blank" spowoduje, że strona zostanie wyświetlona w nowym oknie. Właściwość "_self" działa tak jakby właściwość target nie została zastosowana, czyli powoduje, że strona zosanie wyświetlona w tej samej ramce. Zastosowanie kodu: spowoduje że link zostanie wyświetlony w ramce podanej w miejsce "nazwa".

15 Style CSS Głównym zadaniem HTMLa jest opis struktury strony, natomiast CSS odpowiada za określenie jej wyglądu. Stosując style zyskujemy bardzo duże możliwości wpływania na wygląd strony. Możemy określić niemal wszystko, zaczynając od wyboru koloru i rodzaju czcionki a kończąc na obramowaniu tabelek ! Jedną z ważniejszych funkcji CSS jest to, że wraz z JavaScriptem tworzy DHTML.

16 Style CSS cd. CSS opiera się na zasadzie że każdy element HTML-a ma w CSS przypisane mu cechy, a one mogą przyjmować rózne wartości Selektor { Selektor { właściwość:wartość; właściwość:wartość; właściwość: wartość;... właściwość: wartość;... }

17 Style CSS cd. Przykładowa definicja stylu dla akapitu przedstawiona jest poniżej P { P { font-size:10pt; font-size:10pt; font-family:verdana; font-family:verdana; color:green; color:green; }

18 Sposoby deklaracji stylu 1.Wewnątrz znacznika - wpisane jakiś tekst jakiś tekst 2.W bierzącym pliku - osadzone Witaj na mojej stronie! Witaj na mojej stronie! 3.W osobnym pliku w ramach znaczników – zewnętrzne

19


Pobierz ppt "HTML. Podstawowa struktura dokumentu Znaczniki META Poniżej opisuję podstawowe opisy najbardziej użytecznich znaczników meta.   Polecenie informuje."

Podobne prezentacje


Reklamy Google