(Microsoft PowerPoint - XHTML_0.ppt [tryb zgodno\234ci])

(Microsoft PowerPoint - XHTML_0.ppt [tryb zgodno\234ci])

HTML
(ang. HyperText Markup Language,
hipertekstowy język znaczników)
to język składający się ze znaczników (ang. tags) stosowany
do pisania stron WWW.
Jego pierwsza wersja została opracowana przez Tima Berners-Lee w
1989 roku -- konsultanta do spraw oprogramowania w CERN
(Europejska Organizacja Badań Jądrowych).
Pierwotnie HTML składał się z kilkunastu znaczników – pozwalały
one wyświetlać tekst wraz z odsyłaczami do innych tekstów.
Rewolucyjność pomysłu polegała na tym, że użytkownik
przeskakujący do innego tekstu nie musiał w ogóle wiedzieć gdzie
fizycznie znajduje się interesujący go tekst.
Była to tzw. zerowa wersja HTML.
1
Wraz z rozwojem i upowszechnianiem sieci WWW pojawiła się
potrzeba dołączania do tekstów
• tabel
• grafiki i
• plików multimedialnych
zaczęły więc powstawać kolejne wersje HTML
rozwijały je firmy produkujące przeglądarki stron WWW, bez
wzajemnych konsultacji
doprowadziło to do częściowej
niekompatybilności wersji HTML, zaimplementowanych w
przeglądarkach różnych producentów
Utworzono więc organizację W3C czyli
World Wide Web Consortium
które zajmuje się ustanawianiem wspólnych standardów HTML, a
także innych spraw związanych z pisaniem stron WWW.
2
Kolejne „oficjalne" wersje HTML są uzgadnianie przez
szeroką dyskusję ekspertów i przedstawicieli
zainteresowanych firm.
Pierwszą „oficjalną” wersją HTML był HTML 2, którego
sukcesem było to, że ważniejsze przeglądarki takie jak
Internet Explorer i Netscape są w zasadzie z nim zgodne.
Drugą wersją HTML, którą udało się uzgodnić w trakcie
tzw. wojny przeglądarek,
czyli ostrej i nie zawsze uczciwej konkurencji między
Microsoftem i Netscape,
była wersja HTML 3.2.
3
Ostatnią wersją HTML jest wersja 4.01 (1999 r.), która
próbuje wydzielić zarządzanie wyglądem strony do
kaskadowych arkuszy stylów (CSS).
HTML 4.01 okazał się jedynie częściowym sukcesem w
dziedzinie standaryzacji, gdyż wsparcie dla CSS w większości
przeglądarek było przez wiele lat niepełne i zawierało wiele
mniejszych i większych niekompatybilności.
Niekompatybilności te stają się jednak z czasem coraz mniejsze,
i pisanie stron, obsługiwanych poprawnie przez wiele
przeglądarek, jest teraz łatwiejsze niż w czasach wojen
edytorowych.
Do najpopularniejszych przeglądarek należą: Internet Explorer,
Mozilla Firefox, Opera, Safari i Netscape.
Jednak oprócz nich istnieje również wiele innych.
4
Zaawansowane języki, jakie mają dzisiaj do dyspozycji twórcy
witryn to
XHTML (ang. eXtensible HyperText Markup Language )
rozszerzalny hipertekstowy język znaczników)
-- język służący do tworzenia stron WWW ogólnego
przeznaczenia. XHTML jest następcą języka HTML.
Specyfikacje XHTML przygotowuje organizacja W3C
Najważniejsze różnice między HTML i XHTML dotyczą oddzielenia
formatowania od struktury strony. Struktura jest tworzona przy
pomocy poleceń języka XHTML, a formatowaniem zajmują się
wyłączie kaskadowe arkusze stylów.
JavaScript to stworzony przez firmę Netscape, zorientowany
obiektowo skryptowy język programowania, najczęściej
stosowany na stronach WWW.
Implementacja JavaScriptu stworzona przez firmę Microsoft
nosi nazwę JScript.
5
PHP (ang. PHP Hypertext Preprocessor) – skryptowy język
programowania służący przede wszystkim do tworzenia
dynamicznych stron WWW
ASP (ang. Active Server Pages) to technologia firmy
Microsoft służąca tworzeniu dynamicznych stron
WWW wykonywanych po stronie serwera, oparta o
jeden z dostępnych języków skryptowych
XML (ang. Extensible Markup Language) to uniwersalny
język formalny przeznaczony do reprezentowania
różnych danych w strukturalizowany sposób
Ale wszystko i tak zaczyna się od HTML
6
Odnośniki do specyfikacji najnowszych wersji języków XHTML,
HTML i narzędzia służącego do sprawdzania poprawności kodu
(tzw. walidatora):
http://www.w3.org/TR/html4 - specyfikacja kodu HTML 4.01
http://www.w3org/TR/xhtml11 - specyfikacja kodu XHTML 1.1
http://validator.w3.org – walidator
Odnośniki do specyfikacji kaskadowych arkuszy stylów:
http://www.w3.org/TR/REC-CSS1 - specyfikacja CSS1
http://www.w3.org/TR/REC-CSS2 - specyfikacja CSS2
http://www.3.org/TR/CSS21 - specyfikacja CSS2.1
http://jigsaw.w3.org/css-validator - walidator
7
Niekiedy spotyka się twierdzenie, że używanie edytorów HTML
nie jest konieczne. Wyspecjalizowany program tego typu
umożliwia jednak:
o szybsze wprowadzanie znaczników dzięki gotowym
szablonom
o unikanie błędów wynikających z ręcznego wprowadzania
znaczników
Edytory HTML można podzielić na dwie podstawowe klasy:
edytory pracujące w trybie tekstowym
edytory pracujące w trybie graficznym
Mianem edytorów pracujących w trybie tekstowym określamy
programy, które pozwalają pracować bezpośrednio z kodem
HTML, wyświetlając tekst dokumentu i kody sterujące
8
Dokument HTML jest zwykłym plikiem tekstowym, w
którym znajdują się polecenia HTML.
Dokument taki można zatem utworzyć za pomocą najprostszego
edytora tekstów – np. Notatnik w Windows - ręcznie wpisując
znaczniki.
Na rynku pojawiło się już wiele specjalizowanych edytorów,
które wydatnie ułatwiają konstruowanie dokumentu,
wspomagając wprowadzanie poleceń.
Są to zazwyczaj programy komercyjne
ale jest też sporo programów całkowicie bezpłatnych
(freeware).
W chwili obecnej mamy do dyspozycji wiele polskich
programów, które doskonale nadają się do tworzenia stron.
9
Od dobrego edytora HTML należy oczekiwać takich cech, jak:
Sprawdzanie poprawności pisowni
Edycja informacji nagłówkowych
Edytor HTML powinien wspomagać tworzenie informacji
nagłówkowych (META), istotnych dla poprawnego
funkcjonowania witryny w Internecie, jak tytuł, opis, słowa
kluczowe i szereg innych informacji o pomniejszym
znaczeniu
Projekty
Zaawansowany edytor HTML powinien mieć narzędzie do
organizowania zespołu stron tworzących wspólnie witrynę
internetową w tzw. projekty, które ułatwiają zarządzanie,
np. wprowadzanie wspólnych opisów, kontrola spójności,
weryfikacja odsyłaczy czy wysyłanie na serwer FTP
10
Szablony
Edytor powinien dysponować narzędziem do tworzenia
szablonów stron, które przyspieszają pisanie stron i
ujednolicają wygląd dokumentów.
Biblioteki wstawek
Użytkownik niejednokrotnie posługuje się powtarzającymi
się zestawami kodów - możliwość tworzenia bibliotek
takich zestawów pozwoli wprowadzać je do dokumentów,
bez konieczności każdorazowego wpisywania kodu.
Obsługa języków
W nowoczesnym edytorze HTML pożądana jest nie tylko
obsługa samego języka HTML, ale i przynajmniej
elementarna obsługa innych popularnych języków, jak
JavaScript i PHP, a przede wszystkim CSS, czyli
współdziałających z kodem HTML kaskadowych arkuszy
stylów.
11
Kolorowanie kodu
Aby móc łatwo odróżniać znaczniki od treści dokumentu,
konieczne jest kolorowanie znaczników danego języka.
Wprowadzanie znaków specjalnych
Konieczność wprowadzania znaków spoza alfabetu
łacińskiego (np. znaki matematyczne, znaki innych
alfabetów) wymaga od edytora udostępnienia ich listy.
Kodowanie polskich znaków w standardzie ISO i UTF
Mapowanie odsyłaczy
Używana na stronach internetowych grafika jest często
wykorzystywana jako zbiór odsyłaczy. Umieszczenie
odsyłaczy internetowych w wyznaczonych miejscach grafiki
wymaga stosowania specjalnej mapy odsyłaczy, której
skomplikowana konstrukcja jest kłopotliwa do
wprowadzenia, jeśli nie korzystamy z wizualnego
12
wspomagania zapewnionego przez edytor.
Podgląd dokumentu
Kontrolę rzeczywistego wyglądu strony zapewnia
podgląd dokumentu w specjalnym oknie, obsługiwanym
przez kontrolki Internet Explorera lub Mozilli. Jeśli edytor
nie dysponują taką funkcją, konieczne jest wczytanie
redagowanej strony do przeglądarki internetowej.
Kontrola poprawności składniowej
Zdarzające się niekiedy błędy składniowe, wkradające
się szczególnie przy ręcznych poprawkach, mogą
poważnie zaburzać wyświetlanie stron - wbudowane
narzędzia do kontroli poprawności składniowej
umożliwiają wychwycenie usterek.
Kontrola spójności
Błędy konstrukcyjne mogą także dotyczyć powiązań
między dokumentami witryny - kontrola spójności
powiązań jest jednym z kluczowych zadań
zaawansowanego edytora HTML.
13
Weryfikacja odsyłaczy
Zamieszczone w dokumencie odsyłacze do innych miejsc
w Internecie mogą się stopniowo dezaktualizować specjalne narzędzia edytora pozwalają automatycznie
sprawdzić poprawność odsyłaczy i wskazują te, które są
nieaktualne.
Wysyłanie na serwer FTP
Chociaż witrynę można wysłać na serwer za pomocą
zwykłego programu FTP, wbudowane narzędzia FTP
pozwalają wysłać na serwer cały projekt lub pojedyncze
strony, a niekiedy także są w stanie śledzić, które strony
zostały zaktualizowane w trakcie edycji i wymagają
wysłania.
14
Lepiej używać edytorów pracujących w trybie tekstowym, a nie
graficznym, gdyż mamy wtedy lepszą kontrolę nad tworzonym
dokumentem.
W środowisku Windows 95/98/ME/NT/2000/XP można używać
m.in.
• Pajączek - program komercyjny. Jest to jeden z najlepszych
tekstowych edytorów HTML i XHTML
• CoreEditor - polski, komercyjny edytor, porównywalny z
Pajączkiem, obsługujący także XHTML
• kED - polski, darmowy edytor, szybki i konfigurowalny,
obsługujący XHTML i CSS.
• HateML Pro - polski, darmowy edytor z obsługą
(X)HTML.
15
• Tiger98 i Tigerll Millenium - komercyjny polski edytor,
jednak już bardzo wiekowy.
• TigerII MiniPad - darmowy notatnik, wygodny do szybkich
poprawek.
• edHTML - polski, darmowy edytor; jego następcą jest
CoreEditor.
• Website Pro - polski, darmowy edytor.
• Zajączek PHP - polski, darmowy edytor, z dobrą obsługą PHP.
• Ager Web Edytor - polski, darmowy edytor ze wsparciem dla
JavaScript.
• Extra Page - darmowy polski edytor, jednak piszący w "starym
stylu".
16
•
HTML-Kit - bardzo silny amerykański edytor, z ogromną
liczbą pluginów, darmowy.
• 1'st Page 2006 - jeden z najpotężniejszych programów
webmasterskich, darmowy – pozwala na pracę w trybie
tekstowym oraz graficznym, ma wiele kreatorów,
ułatwiających utworzenie bardziej skomplikowanego elementu
na stronie, np. dodanie tabeli czy galerii ze zdjęciami. Brak
jednak polskiej wersji językowej. http://www.evrsoft.com
• ACE HTML Freeware - darmowy, anglojęzyczny
• HotDog - amerykański edytor, komercyjny.
• CoffeeCup HTML Editor - amerykański edytor, komercyjny.
17
•
PSPad – zaawansowany edytor programistyczny, obsługuje
wiele języków programowania, w tym HTML, XHTML i CSS. Ma
moduł sprawdzania pisowni – również polskiej. Zaletą jest
polskojęzyczny interfejs i wygoda obsłgi. Jest zintegrowany z
darowym edytorem kaskadowych arkuszy stylów (TopStyle
Lite), sprawdza poprawnść kodu i obsługuje wiele dodatków
(można je pobrać ze strony http://www.pspad.com/en)
darmowy.
• TopStyle Lit – wyspecjalizowany edytor CSS. Program stosuje
kolorowanie składni, domykanie znaczników oraz używa
wygodnego mechanizmu podpowiedzi. Na uwagę zasługują:
podgląd działania budowanego arkusza, moduł sprawdzający
poprawność kodu arkusza oraz możliwość integracji edytora z
PSPadem, darmowy.
18
Edytory pracujące w trybie graficznym
(WYSIWYG - What You See Is What You Get)
Oferują wiele kreatorów i gotowych szablonów, mających pomóc w pracy nad
strona. Istotną wadą edytorów graficznych jest ograniczona kontrola kodu
strony. Przykłady edytorów:
Adobe Dreamweaver (można o nim poczytać na stronie
http://www.adobe.com/products/dreamweaer), Microsoft FrontPage
(http://www.microsoft.com/frontpage), NetObjects Fusion, Nvu.
Co się stało z programem FrontPage?
Zróżnicowane potrzeby dotychczasowych użytkowników tego programu firma
MS stara się zaspokoić wprowadzając trzy nowe programy do tworzenia
aplikacji i witryn sieci Web obsługujące najnowsze technologie:
•Microsoft Office SharePoint Designer 2007 dla pracowników działów
informacyjnych w przedsiębiorstwach,
•Microsoft Expression Web Designer dla zawodowych projektantów witryn sieci
Web i
•Microsoft Visual Studio 2005 dla programistów sieci Web.
19
Edytory HTML dla GNU/Linuksa:
Bluefish,
Screem,
Quanta Plus,
Nvu (dostępny również dla Windows),
CoffeeCup HTML Editor,
IBM Homepage Builder,
Webdesigner.
20
Nowoczesna strona nie może się obejść bez elementów graficznych. Dobrymi
(ale drogimi) programami do obróbki grafiki są:
Adobe Photoshop
Corel Photo-Paint
Darmowe rozwiązania:
Paint Shop Pro (pozwala pracować na warstwach, obsługuje formaty gif, png, jpeg)
Paint.NET – rozbudowany edytor grafiki rastrowej, wspiera korzystanie z warstw,
ma opcję cofania zmian oraz efekty specjalne. Polska wersja programu nie jest
dostępna. http://www.eecs.wsu.edu/paint.net
Gimp – do obróbki grafiki rastrowej (ma też wsparcie dla animowanych GIFów,
tworzenie map odnośników, może łączyć tekst z grafiką). Jest dostępny w polskiej
wersji językowej, dla różnych systemów operacyjnych. http://gimp.eu.org
DrawPlus 4 – do tworzenia grafiki wektorowej, pozwala na pracę z wykorzystaniem
warstw, na grupowanie elementów i zamianę tekstu na krzywe. Może służyć do
przygotowania animacji. Niedostępny w wersji polskiej.
http://www.freeserifsoftware.com
21
Wybór usługodawcy, u którego zamieścimy stronę www
oprzed wyborem dostawcy należy go sprawdzić - głównie sprawdzić
czy jego serwery działają poprawnie i stabilnie
owarto zwrócić uwagę na to jacy klienci korzystają z usług tego
dostawcy - lepiej unikać dostawców np. stron erotycznych, gdyż są one
powodem ogromnego obciążenia serwerów i zapychania łączy.
oJeżeli tworzysz stronę dla firmy korzystaj z serwerów płatnych np.
http://www.progreso.pl czy http://www.home.pl
oDla strony własnej możesz skorzystać z darmowych serwerów, np.
http://pages.google.com , http://republika.pl czy http://www.prv.pl
oJeśli zamierzasz się rozwijać na polu Internetu, to warto szukać
dostawcy oferującego dodatkowo:
możliwość rejestracji własnej domeny
możliwość zwiększania pojemności przeznaczonej na stronę
(warto zacząć od 100 MB)
konto e-mailowe o dużej pojemności
brak ograniczenia na generowany przez nasz serwer ruch w 22
sieci
Przypomnijmy:
Każdy serwer ma:
adres IP – jest to adres liczbowy np.: 213.180.130.200
adres domenowy – zawierający nazwę domeny, zrozumiały dla
człowieka, np. onet.pl
Konwersja nazw odbywa się automatycznie dzięki specjalnym
serwerom DSN. Serwery te posiadają spis numerów IP oraz
przypisanych im domen.
Mamy kilkaset domen głównych, np. domena krajowa pl, domeny
funkcjonalne np. com.pl, net.pl oraz domeny regionalne, np. lodz.pl
Listę wszystkich domen funkcjonalnych i regionalnych obsługiwanych
głównie przez NASK (Naukowa i Akademicka Sieć Komputerowa)
można znaleźć pod adresem http://www.dns.pl/dns-funk.html oraz
http://www.dns.pl/dns-regiony.html
Nazwa domeny może zawierać jedynie znaki alfabetu łacińskiego, cyfry i
znak minus (-). Nie można używać przerw w nazwach wieloczłonowych a
23
max liczba znaków to 63.
Podstawowe rozszerzenia plików strony WWW:
.html - plik tekstowy zawierający kod HTML, czasami też kod JavaScript
.shtml - plik tekstowy zawierający kod HTML oraz instrukcje SSI (ang.
Server Side Includes) to prosty mechanizm skryptowy służący do dynamicznego
generowania stron WWW na serwerze WWW. Używany przede wszystkim do
włączania zdefiniowanych plików do dokumentu wynikowego (include).
.php - plik tekstowy zawierający kod HTML połączony ze skryptami PHP4
.php3 - plik tekstowy zawierający kod HTML połączony ze skryptami PHP3
.cgi - plik tekstowy zawierający skrypty napisane w Perlu bądź Shellu,
często połączone z kodem HTML
.pl - plik tekstowy zawierający skrypty napisane w Perlu, często połączone
z kodem HTML
.css - plik tekstowy zawierający zewnętrzne arkusze stylów, CSS
.js - plik tekstowy zawierający skrypty napisane w języku JavaScript
24
Jeżeli otworzysz za pomocą przeglądarki dowolną stronę
WWW a następnie skorzystasz z opcji podglądu źródła
dokumentu (w programie MS Internet Explorer wystarczy, że
klikniesz prawym przyciskiem myszy kod strony i z
podręcznego menu wybierzesz Pokaż źródło), to zobaczysz
zawartość dokumentu.
Tworzenie stron zgodnie ze standardem w3w pozwala na
uniknięcie problemów związanych z niepoprawnym
działaniem strony w różnych przeglądarkach. Nie ma 100%
gwarancji, że strona zadziała poprawnie ale będzie łatwiej
szukać i poprawiać ewentualne różnice w interpretacji
poszczególnych poleceń przez różne przeglądarki.
25