Embed Size (px)
Citation preview
STRONA W W W
INACZEJ W3
1 krok
HTML a dokładniej XHTML
W W W – W3
- skrót od "World Wide Web",
globalna sieć komputerowa, której
zasoby można przeglądać i
pobierać za pomocą przeglądarek
internetowych.
Najprostszym edytorem stron WWW umożliwiającym tego typu działalność jest Notatnik wbudowany w system Windows. Jego największe wady to:
brak wyróżniania składni języka HTML różnymi kolorami,
brak obsługi standardów kodowania polskich znaków diakrytycznych (ą, ę i tym podobnych) niezbędnych przy tworzeniu stron WWW.
Dopiero najnowsze wersje programu Notatnik mogą zapisywać pliki tekstowe zgodnie z nowym standardem UNICODE UTF-8 żadna wersja nie potrafi jednak zapisać kodu strony w starszym, lecz sprawiającym czasem mniej kłopotów standardzie ISO-8859-2.
Unicode HTML - to komputerowy zestaw
znaków, mający w zamierzeniu obejmować
wszystkie pisma używane na świecie. W
zestawie Unicode kod numeryczny
jednoznacznie identyfikuje symbol. Dzięki
temu można umieszczać znaki różnych
języków w jednym dokumencie.
UTF-8 - sposób kodowania znaków
Unicode.
KOD STRONY
Kodu HTML, który za chwilę będzie wprowadzony, należy nauczyć się na pamięć, gdyż będzie on stanowić szkielet każdej tworzonej strony WWW. Trzy wprowadzone w nim elementy języka HTML pozwolą przeglądarce WWW podzielić kod strony na obszar nagłówka strony (zawierający informacje niewidoczne dla osoby przeglądającej stronę, lecz niezbędne dla prawidłowego działania strony) oraz obszar treści strony (zawierający wszystkie elementy strony wyświetlane w oknie przeglądarki):
Spotykane - ISO<HTML>
<HEAD><meta http-equiv="Content-
type"content="text/html;charset=iso-8859-2"><meta name="description"content="tu wpisz krótki opis
strony"><meta name="keywords"content="tu wpisz słowa
kluczowe"><title>Tu wpisz tytuł strony</title>
</HEAD><BODY>Tu umieść właściwą treść dokumentu
</BODY></HTML>
Ćwiczenie 1
Ćwiczenie 1. W/w kod zapisz w notatniku –
pamiętając:
- plik zapisz jako:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"lang="pl">
<head> </head>
<body>
Ciało dokumentu
</body>
</html >
Ćwiczenie 2 - wykonaj jak ćwiczenie 1
Zapisz jako -> strona2.html
Następnie sprawdź efekt - wyciągnij wnioski
<?xml version="1.0" encoding="utf-8"?>
Pierwszy wiersz kodu zawiera informację o
tym, że plik zapisany jest zgodnie z
zasadami standardu XML
(ang. Extensible Markup Language) —
uniwersalnego języka znaczników. Język
HTML zapisany w zgodzie z zasadami XML
nosi nazwę XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
W drugim wierszu tekstu wprowadzono tak zwaną
deklarację typu dokumentu, reprezentowaną
przez znacznik <!DOCTYPE>. Deklaracja typu
dokumentu informuje przeglądarkę WWW, jak
ściśle powinna się ona trzymać standardu języka
HTML w czasie interpretowania kodu HTML
strony. Powyższa deklaracja również podkreśla,
że strona WWW zawiera kod zapisany w zgodzie
ze standardami HTML i XML, czyli — XHTML.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"lang="pl">
<head> </head>
<body>
</body>
</html >
Następnie — wiersz niżej — znalazł się znacznik otwierający <html>, ograniczający obszar kodu HTML tworzonej strony —<html>.
Za nim znajdować się będą wszystkie elementy składające się na stronę WWW, aż do znacznika zamykającego </html>, za którym nie może znajdować się już nic.
uwaga
Te dwa pierwsze elementy strony są
jedynymi, które nie wymagają
(i nie dopuszczają) zamykania ich
znaczników
Wszystkie znaczniki należy zapisywać
małymi literami. Wyjątkiem jest znacznik
<!DOCTYPE>,
rozpoczynający kod strony WWW
<HEAD>……</HEAD>
Nagłówek strony nie jest nigdzie wyświetlany
(z wyjątkiem tytułu strony wyświetlanego na
pasku tytułu okna przeglądarki) — zawiera
tylko informacje o dokumencie (stronie),
takie jak nazwa standardu kodowania
polskich znaków diakrytycznych, tytuł strony
czy odnośniki do plików składowych.
<BODY>……..</BODY>
Dalsze dwa wiersze zawierają znaczniki otwierający i zamykający elementu <body>deklarującego obszar treści strony. Wszystko, co użytkownik wpisze między tymi dwoma znacznikami, zostanie wyświetlone w oknie przeglądarki. Z drugiej strony, nie wolno nigdzie indziej umieszczać tekstu lub znaczników — dopuszczalne jest to tylko wewnątrz elementu <body>
<META>…..</META>
Każdy, kto kiedykolwiek tworzył stronę internetową spotkał się na pewno ze znacznikami meta, umożliwiającymi podanie między innymi opisu dokumentu (description), czy słów kluczowych (keywords). Czy są to jednak metody wystarczające do zobrazowania zawartości strony www? Na dzień dzisiejszy wyszukiwarki internetowe nie traktują już ich poważnie – albo wręcz ignorują. Czy zaś na ich podstawie jesteśmy w stanie sami dobrze ocenić zawartość strony internetowej? Raczej nie. Dlatego też zaistniała potrzeba stworzenia nowego sposobu opisu dokumentów.
Dublin Core
Rozwijaniem formatu Dublin Core zajmuje
się organizacja Dublin Core Metadata
Initiative. Celem przedsięwzięcia jest
rozszerzenie dotychczasowych znaczników
meta o możliwość głębszego i
dokładniejszego opisu dokumentów
Dublin Core
Znaczniki Dublin Core
mogą składać się z następujących atrybutów:
name - nazwa elementu
lang - język zawartości atrybutu content
sheme - standard, zgodnie z którym zapisana jest zawartość atrybutu content
content - zawartość elementu
Dublin Core składa się z 15 podstawowych elementów:
Tytuł: DC.title
Jest to nazwa dokumentu.
Jeśli tytuł naszej strony brzmi "Mój blog:
wakacje w Grecji" to najodpowiedniejszą
nazwą dokumentu będzie "Wakacje w
Grecji", albo samo "Grecja".
<meta name="DC.title" lang="pl"
content="Wakacje w Grecji" />
Autor: DC.creator
Podmiot który stworzył dokument
- osoba, bądź organizacja.
<meta name="DC.creator"
content="Robert Nowak" />
Temat: DC.subject
Tematy poruszone w dokumencie.
Opisujemy je za pomocą słów kluczowych, albo fraz oddzielonych średnikiem.
<meta name="DC.subject" lang="pl" content="Gracja; Ateny; hotele; greckie jedzenie; sztuka gracka" />
Opis: DC.description
Opis dokumentu i jego treści.
<meta name="DC.description"
lang="pl" content="Notka z
pamiętnika - blog. Wspomnienia
z moich wakacji w Grecji." />
Wydawca: DC.publisher
Mówi o tym kto publikuje dokument.
<meta name="DC.publisher"
content="Onet.pl Blog" />
Współtwórca: DC.contributor
Zawiera informacje o osobie, organizacji bądź
usłudze pomogła w powstaniu dokumentu.
<meta name="DC.contributor"
content="Jan Kowalski" />
Data: DC.dateOstatnia ważna data związana z dokumentem.
Może to być publikacja, albo np. poważna aktualizacja. Pamiętajmy o tym, że jak ktoś szuka rozkładu jazdy komunikacji miejskiej w Atenach, to zależy mu na tym, by dokument był pisany w danym roku. Dlatego jeśli np. w naszej notatce o wakacjach w Grecji po upływie roku poprawiliśmy tylko przecinki, to nie zmieniajmy DC.date.Zalecane jest używanie formatu ISO-8601 (W3CDTF) czyli: RRRR-MM-DD (rok-miesiąc-dzień).
<meta name="DC.date" scheme="W3CDTF" content="2006-11-12" />
Typ dokumentu: DC.type
Mówi o typie dokumentu. Zbiór podstawowych typów został zawarty w zbiorze DCMIType. Zawiera on następujący typy: Collection, Dataset, Event, Image, InteractiveResource, MovingImage, PhysicalObject, Service, Software, Sound, StillImage, Text. Najczęściej używany jest oczywiście ten ostatni - czyli dokument tekstowy.
<meta name="DC.type" scheme="DCMIType" content="Text" />
Język: DC.language
Język w jakim został napisany dokument. DCTERMS.URI to standard zapisu kodu języka. Dla języka używanego w Wielkiej Brytanii użyjemy kodu "en_GB" (język angielski, Wielka Brytania). Dla języka polskiego będzie to "pl_PL".
<meta name="DC.language" scheme="DCTERMS.URI" content="pl_PL" />
Format dokumentu: DC.format
Zawiera informacje o formacie dokumentu, jego kodowaniu oraz rozmiarze. Jest to użyteczne przy wyborze odpowiedniego programu do otwarcia dokumentu. Rozmiar może zawierać informacje o fizycznej wielkości dokumentu, albo np. o długości ścieżki dźwiękowej.
<meta name="DC.format" content="text/html;charset=iso-8859-2" />
<meta name="DC.format" content="43576 bytes" />
Identyfikator: DC.identifier
Pełen adres dokumentu.
<meta name="DC.identifier"
content="http://robert.blog.onet.
pl/Wakacje_w_Grecji.html" />
Źródło: DC.sourceTu podajemy adresy URL stron, które wykorzystaliśmy jako istotne dla powstania dokumentu źródła informacji. Jeśli nasz dokument jest kopią innego, to podajemy adres oryginału.
Znacznik ten jest bardzo użyteczny, ponieważ ułatwia on czytelnikowi odnalezienie pełnej informacji, z której my skorzystaliśmy tylko w części. Może być też tak, że uprościliśmy jakiś naukowy, pisany żargonem tekst. Warto podać w ten czas czytelnikowi odniesienie do oryginału.
<meta name="DC.source" content="http://bartek.blog.onet.pl; http://www.grecja.pl" />
Zasięg: DC.coverage
Zawiera informację o tym, jakiego obszaru
dokument dotyczy. Przydatny szczególnie
dla organizacji rządowych.
<meta name="DC.coverage"
content="Miasto Kraków”/>
Podobne strony: DC.relation
Powinny się tu znaleźć odnośniki do stron
o podobnej tematyce.
<meta name="DC.relation"
content="http://www.grecja.pl;
http://www.ateny.com" />
Legalność: DC.rights
Zawiera adres licencji dokumentu.
<meta name="DC.rights"
content="http://robert.blog.onet.
pl/licencja.html" />
<TITLE>…….</TITLE>
Każda strona WWW powinna mieć tytuł określający skrótowo jej zawartość lub przynależność do większego serwisu internetowego. Tytuł strony wyświetlany jest na pasku tytułowym przeglądarki WWW, a w kodzie strony odpowiada za niego element <title> umieszczony w obszarze nagłówka strony.
Aby wyposażyć tworzoną pustą stronę WWW
w tytuł, należy otworzyć i zamknąć element
<title> w obrębie nagłówka strony (czyli
wewnątrz elementu <head>).
Następnie w obrębie elementu <title>
(czyli między znacznikiem otwierającym i
zamykającym) wprowadza się dowolną
nazwę strony.
Kod strony powinien w tym momencie wyglądać następująco:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title> Moja pierwsza strona WWW </title>
</head>
<body>
</body>
</html>
Ćwiczenie 3 <TITLE>………..</TITLE>
Ćwiczenie 3 - efekt
PAMIĘTAJ
Należy pamiętać, że nazwa pliku zawierającego kod
strony WWW musi mieć rozszerzenie .html.
Dla pewności najlepiej zawsze samodzielnie
dopisywać je do nazwy pliku. Należy też w
nazwach plików zawierających kod tworzonych
stron używać wyłącznie małych liter — serwery
WWW często odróżniają nazwy plików pisane
małymi i wielkimi literami — i nie używać znaku
spacji, a raczej zastępować go myślnikiem.
PODSUMOWANIE
Po wykonaniu pierwszych ćwiczeń powinno się już wiedzieć, jak wyglądają znaczniki HTML, jak można je zagnieżdżać i jaka ich liczba jest niezbędna, by przeglądarka wyświetliła pustą stronę WWW bez zgłaszania jakiegokolwiek błędu.
Warto zapamiętać kod czystej strony WWW, gdyż każdą nową stronę trzeba zacząć od wprowadzenia tego "szkieletu strony", a dopiero później uzupełnia się kod kolejnymi elementami. Należy też wyrobić sobie nawyk częstego zapisywania dokonywanych zmian, by w razie problemów z zasilaniem lub niestabilnej pracy komputera nie stracić efektów wielogodzinnej pracy.
UWAGA
Nazwa strony powinna być krótka i
opisowa. Należy przy tym pamiętać, że
długość paska tytułowego okna
przeglądarki jest skończona, nie można
więc zakładać, że jeżeli na jednym
komputerze cały tytuł strony mieści się
na pasku tytułowym, na innych
komputerach będzie tak samo.
