Strona z ćwiczeniami jest stroną archiwalną,
wiele materiałów jest już nieaktualnych,
ale jeżeli ktoś ma ochotę, to zapraszam... :)

Dzieła Człowieka

Czy jestem ateistą? Bóg jeden raczy wiedzieć

Zajęcia specjalizacyjne: III klasa TI
HTML

Ćwiczenie 2 - Body i meta

Zadania do wykonania:

Ćwiczenie 2 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. 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.

Ćwiczenie 2 polega na wypełnieniu w kED wszystkich informacji meta. Należy postępować zgodnie z pojawiającymi się kolejno zrzutami z edytora kED.

Jako pierwszy pojawia się ogólny schemat budowy dokumentu HTML. Warto mu się przyjrzeć...

Krok 1

Teraz czas otworzyć kED-a 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ć:


  1. sposób:
  2. "Page-Enter" - przejście nastąpi przy wchodzeniu na stronę
  3. "Page-Exit" - przejście nastąpi przy wyjściu
  4. "Site-Enter" - przejście przy wejściu z innej domeny (adresu)
  5. "Site-Exit" - przejście przy wyjściu do innej domeny

  1. s:
  2. czas trwania przejścia (w sekundach)

  1. n - numer filtru graficznego (liczba od 0 do 23):
  2. 0 - Zmniejszający się prostokąt (Box in)
  3. 1 - Zwiększający się prostokąt (Box out)
  4. 2 - Zmniejszające się koło (Circle in)
  5. 3 - Zwiększające się koło (Circle out)
  6. 4 - "Wytarcie" w górę (Wipe up)
  7. 5 - "Wytarcie" w dół (Wipe down)
  8. 6 - "Wytarcie" w prawo (Wipe right)
  9. 7 - "Wytarcie" w lewo (Wipe left)
  10. 8 - Pionowa zasłona (Vertical blinds)
  11. 9 - Pozioma zasłona (Horizontal blinds)
  12. 10 - Szachownica w prawo (Checkerboard across)
  13. 11 - Szachownica w dół (Checkerboard down)
  14. 12 - Losowy rozkład (Random dissolve)
  15. 13 - Połączenie w pionie (Split vertical in)
  16. 14 - Rozłączenie w pionie (Split vertical out)
  17. 15 - Połączenie w poziomie (Split horizontal in)
  18. 16 - Rozłączenie w poziomie (Split horizontal out)
  19. 17 - "Wytarcie" w lewy-dolny róg (Strips left down)
  20. 18 - "Wytarcie" w lewy-górny róg (Strips left up)
  21. 19 - "Wytarcie" w prawy-dolny róg (Strips right down)
  22. 20 - "Wytarcie" w prawy-górny róg (Strips right up)
  23. 21 - Losowe poziome smugi (Random bars horizontal)
  24. 22 - Losowe pionowe smugi (Random bars vertical)
  25. 23 - Efekt losowy - jeden z powyższych (Random)

źródło: www.kurshtml.boo.pl


Reszta na zrzucie...

Krok 2

Kolejna informacja to tytuł strony pojawiający się na pasku tytułu przeglądarki: <title>Tytuł strony</title>. Należy wpisać dowolny tytuł...

Krok 3

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

Krok 4

Kolejny jest opis zawartości strony: <meta name="Description" content="Tu podaj opis twojej strony" />. Ciekawy, acz niezbyt długi... Informacja dla wyszukiwarek sieciowych.

Krok 5

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

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

Krok 7

Dalej jest podany autor strony: <meta name="Author" content="Tu wpisz swoje imię i nazwisko" />.

Krok 8

Następnie adres zwrotny: <meta http-equiv="Reply-To" content="twój adres e-mail" />.

Krok 9

Teraz data utworzenia: <meta http-equiv="Creation-Date" content="data" />. Jako "data" najlepiej wpisać datę utworzenia dokumentu w formacie GMT, np.: "Tue, 20 Aug 1996 14: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>.

Krok 10

Ostatnia modyfikacja: <meta http-equiv="Last-Modified" content="data" />. Format daty jak wyżej, np.: "Tue, 20 Aug 1996 14: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>.

Krok 11

Data utraty ważności dokumentu: <meta http-equiv="Expires" content="data" />. Format daty jak wyżej, np.: "Tue, 20 Aug 1996 14:25:27 GMT".

Krok 12

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

Krok 13

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

Krok 14

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.

Krok 15

I dochodzimy do znacznika <body>...</body>... i na razie nie umieszczamy w nim nic konkretnego...

Krok 16

Zapisujemy plik jako meta.html.

Krok 17

Możemy zobaczyć stronę w podglądzie edytora.

Krok 18

I w przeglądarce... Tyle pisania... i nic...

Krok 19

Na koniec jeszcze, ale u samej góry dokumentu, przed znacznikiem <html> wpisujemy deklarację Doctype. Jest ich kilka, należy wybrać jedną i powiedzieć dlaczego tę się wybrało... Na zrzucie jest Transitional. I zapisujemy plik.

Do wyboru są następujące DTD - document type declaration:

Dla HTML:

1. Strict DTD - (ścisła) zawiera wszystkie elementy i atrybuty, które nie są zdeprecjonowane oraz nie pojawiają się w dokumentach z ramkami. Taką ma postać:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. Transitional DTD - (przejściowa) lub inaczej loose DTD ("luźna") - zawiera wszystko co w Strict DTD plus elementy i atrybuty zdeprecjonowane. Taką ma postać:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3. Frameset DTD - (dla ramek) zawiera wszystko co w Transitional DTD plus elementy odnoszące się do ramek: FRAME, FRAMESET oraz NOFRAMES (używane na stronach startowych ramek). Taką ma postać:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Dla XHTML:

W języku XHTML 1.0 są też trzy możliwe do zastosowania wersje DTD:

1. Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Krok 20


Oceniany będzie plik meta.html z wypełnionymi wszystkimi informacjami w nagłówku: znacznikami <meta /> i <title>...</title> oraz deklaracją Doctype.




Strona Główna


do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki