Ćwiczenie 1 Deklarowanie metainformacji.

Wielkość: px

Rozpocząć pokaz od strony:

Download "Ćwiczenie 1 Deklarowanie metainformacji."

Maksymilian Nowicki
8 lat temu
Przeglądów:

1 Zadania do wykonania: Ćwiczenie 1 Deklarowanie metainformacji. Ćwiczenie 1 poświęcone jest wypełnieniu części <head> dokumentu HTML. Umieszczamy w niej wszystkie informacje dodatkowe interpretowane przez przeglądarki. KaŜdą z nich w znaczniku <meta />. Znaczniki te dodają wszystkie metainformacje (ich zadaniem jest dostarczenie dodatkowych informacji na temat witryny WWW). Nie są one wyświetlane w przeglądarce, ale cechy przez nie podane są równie waŝne. Nie wszystkie są wymagane. W znaczniku <body>...</body> umieszczony jest, wraz ze znacznikami, właściwy dokument, odpowiednio sformatowany i zinterpretowany przez przeglądarkę. W kaŝdym dokumencie HTML musi się on znaleźć. W jednym dokumencie moŝe być tylko jeden taki znacznik. W związku z tym, Ŝe wszystkie atrybuty znacznika <body> są zdeprecjonowane, czyli właściwie są przestarzałe dla HTML 4.01 i XHTML 1.0, nie będziemy się w tym ćwiczeniu zajmowali kolorem tekstu strony, kolorem tła strony, tłem obrazkowym, kolorem odsyłaczy, szerokością marginesów i kolorem suwaków. Te efekty zapewnią nam CSS (poznamy na kolejnych zajęciach). Ćwiczenie 1 polega na wypełnieniu wszystkich informacji meta. NaleŜy postępować zgodnie z pojawiającymi się kolejno zrzutami z edytora ked (do wyboru dowolny edytor). Wyniki swojej pracy naleŝy zapisać w pliku meta.html i przesłać do mnie na . Ogólny schemat budowy dokumentu HTML. Warto mu się przyjrzeć... <html> <head> <meta /> <title> <title/> </head> <body> <inne znaczniki> </inne znaczniki> </body> </html>

Znaczniki te dodają wszystkie metainformacje (ich zadaniem jest dostarczenie dodatkowych informacji na temat witryny WWW).

2 Krok 1. Teraz czas otworzyć edytor HTML i wpisać pierwsze znaczniki. Pierwszy ze znaczników <meta /> jest ten opisujący sposób przejścia między stronami: <meta http-equiv= sposób content= revealtrans(duration=s,transition=n) />. Musi on być wpisany jako pierwszy zaraz po <head>. Posiada trzy atrybuty, które naleŝy określić: sposób sposób kiedy strona na włączyć przejście do następnej 1. Page-Enter - przejście nastąpi przy wchodzeniu na stronę 2. Page-Exit - przejście nastąpi przy wyjściu 3. Site-Enter - przejście przy wejściu z innej domeny (adresu) 4. Site-Exit - przejście przy wyjściu do innej domeny s czas trwania przejścia (w sekundach) n numer filtru graficznego (liczba od 0 do 23) 0 - Zmniejszający się prostokąt (Box in) 1 - Zwiększający się prostokąt (Box out) 2 - Zmniejszające się koło (Circle in) 3 - Zwiększające się koło (Circle out) 4 - Wytarcie w górę (Wipe up) 5 - Wytarcie w dół (Wipe down) 6 - Wytarcie w prawo (Wipe right) 7 - Wytarcie w lewo (Wipe left) 8 - Pionowa zasłona (Vertical blinds) 9 - Pozioma zasłona (Horizontal blinds) 10 - Szachownica w prawo (Checkerboard across) 11 - Szachownica w dół (Checkerboard down) 12 - Losowy rozkład (Random dissolve) 13 - Połączenie w pionie (Split vertical in) 14 - Rozłączenie w pionie (Split vertical out) 15 - Połączenie w poziomie (Split horizontal in) 16 - Rozłączenie w poziomie (Split horizontal out) 17 - Wytarcie w lewy-dolny róg (Strips left down) 18 - Wytarcie w lewy-górny róg (Strips left up) 19 - Wytarcie w prawy-dolny róg (Strips right down) 20 - Wytarcie w prawy-górny róg (Strips right up) 21 - Losowe poziome smugi (Random bars horizontal)

Musi on być wpisany jako pierwszy zaraz po <head>. Posiada trzy atrybuty, które naleŝy określić: sposób sposób kiedy strona na włączyć przejście do następnej 1.

3 22 - Losowe pionowe smugi (Random bars vertical) 23 - Efekt losowy - jeden z powyŝszych (Random)

4 Krok 2. Kolejna informacja to tytuł strony pojawiający się na pasku tytułu przeglądarki: <title>tytuł strony</title>

5 Krok 3. Następna jest deklaracja strony kodowej. Bardzo waŝna i wymagana: <meta http-equiv= Content-Type content= text/html; charset=iso /> Ta jest właściwa dla polskich znaków. NaleŜy przepisać całość do edytora...

content= text/html; charset=iso-8859-2 /> Ta jest

6 Krok 4. Kolejny jest opis zawartości strony: <meta name= Description content= Tu podaj opis twojej strony /> Ciekawy, lecz niezbyt długi... Informacja dla wyszukiwarek sieciowych. Podaj tutaj swoje zainteresowania.

7 Krok 5. Dalej wpisujemy słowa kluczowe, oddzielone przecinkami - kolejna informacja dla wyszukiwarek sieciowych: <meta name= Keywords content= wyraz_1, wyraz_2, wyraz_3... />

8 Krok 6. Następny znacznik <meta /> opisuje język strony: <meta http-equiv="content-language" content="język" /> Dwuliterowy skrót. 1. pl - polski 2. en - angielski 3. de - niemiecki 4. fr - francuski 5. ru - rosyjski

9 Krok 7. Dalej jest podany autor strony. W odpowiednie miejsce proszę wpisać swoje imię i nazwisko <meta name="author" content="tu wpisz swoje imię i nazwisko" /> Następnie adres zwrotny. Proszę podać swój adres . <meta http-equiv="reply-to" content="twój adres " />

name="author" content="tu wpisz swoje imię i nazwisko" /> Następnie

10 Krok 8. Teraz data utworzenia: <meta http-equiv="creation-date" content="data" /> Jako "data" najlepiej wpisać datę utworzenia dokumentu w formacie GMT, np.: "Tue, 20 Aug :25:27 GMT". Czas w formacie GMT jest określany dla Greenwich (południk "0"). W Polsce strefa czasowa jest przesunięta o +1 godz. (czas zimowy) lub +2 godz. (czas letni). Dlatego w przypadku tworzenia daty GMT, naleŝy odjąć od czasu lokalnego odpowiednio: 1 lub 2 godziny. Komenda wprowadza informację o dacie utworzenia dokumentu, z której mogą korzystać np. sieciowe indeksery. Polecenie moŝe być wstawione tylko w treści nagłówkowej dokumentu - między znacznikami: <head>...</head>.

(czas zimowy) lub +2 godz. (czas letni). Dlatego w przypadku tworzenia daty GMT, naleŝy odjąć od czasu lokalnego odpowiednio: 1 lub 2 godziny.

11 Krok 9. Ostatnia modyfikacja: <meta http-equiv="last-modified" content="data" /> Format daty jak wyŝej, np.: "Tue, 20 Aug :25:27 GMT". Komenda wprowadza informację, kiedy dany dokument był ostatnio zmieniany. MoŜe to być sygnał dla przeglądarki, Ŝe trzeba wczytać go ponownie. Polecenie moŝe być wstawione tylko w treści nagłówkowej dokumentu - między znacznikami: <head> oraz </head>.

12 Krok 10. Automatyczne odświeŝanie strony: <meta http-equiv="refresh" content="s" /> s - liczba sekund po których strona zostanie odświeŝona.

13 Krok 11. Kolejna metainformacja to nazwa edytora, przy pomocy którego został napisany dokument: <meta name="generator" content="nazwa edytora" />.

14 Krok 12. Następna rzecz to ikona strony pojawiająca się na pasku adresu i na karcie przeglądarki. Wybrać dowolną ikonę z rozszerzeniem ico. MoŜna samemu narysować 16x16 pikseli. Umieścić w pobliŝu dokumentu i podać ścieŝkę dostępu. W Internet Eksplorerze nie wyświetla się chętnie, ale za to w Operze i Mozilli Firefox tak. <link rel= Shortcout icon href= adres ikony />

Wybrać dowolną ikonę z rozszerzeniem ico. MoŜna samemu narysować 16x16 pikseli.

15 Krok 13. I dochodzimy do znacznika <body>...</body>... i na razie nie umieszczamy w nim nic konkretnego. Zapisujemy plik jako meta.html MoŜemy zobaczyć stronę w podglądzie edytora, jeŝeli posiada, lub otworzyć ją w dowolnej przeglądarce www. Między znaczniki body moŝemy wpisać sobie dowolny tekst: To jest przykładowy tekst

html MoŜemy zobaczyć stronę w podglądzie edytora, jeŝeli posiada, lub otworzyć

16 Krok 14. Na koniec jeszcze, ale u samej góry dokumentu, przed znacznikiem <html> wpisujemy deklarację Doctype. Jaką deklarację wpisać dowiedzieliście się czytając L2. Deklaracja standardu HTML oraz kodowanie polskich znaków. Ponownie zapisujemy plik. Proszę pamiętać, Ŝe oceniane będą tylko te pliki, które zostaną do mnie przesłane na . W miejscu gdzie znajduje się dowolny tekst, proszę napisać czemu właśnie tą a nie inną deklarację HTML wybrałeś dla swojej strony.

Ponownie zapisujemy plik. Proszę pamiętać, Ŝe oceniane będą tylko te pliki, które zostaną do mnie przesłane na e-mail.

Podobne dokumenty

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej