hipertekstowy język znaczników)

Transkrypt

1 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

2 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

3 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

4 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

5 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

6 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

7 Odnośniki do specyfikacji najnowszych wersji języków XHTML, HTML i narzędzia służącego do sprawdzania poprawności kodu (tzw. walidatora): - specyfikacja kodu HTML specyfikacja kodu XHTML walidator Odnośniki do specyfikacji kaskadowych arkuszy stylów: - specyfikacja CSS1 - specyfikacja CSS2 - specyfikacja CSS walidator 7

8 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

9 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

10 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

11 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

12 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.

13 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

14 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

15 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

16 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

17 HTML-Kit - bardzo silny amerykański edytor, z ogromną liczbą pluginów, darmowy. 1'st Page 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. ACE HTML Freeware - darmowy, anglojęzyczny HotDog - amerykański edytor, komercyjny. CoffeeCup HTML Editor - amerykański edytor, komercyjny. 17

18 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 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

19 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 Microsoft 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

20 Edytory HTML dla GNU/Linuksa: Bluefish, Screem, Quanta Plus, Nvu (dostępny również dla Windows), CoffeeCup HTML Editor, IBM Homepage Builder, Webdesigner. 20

21 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. 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. 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. 21

22 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. czy odla strony własnej możesz skorzystać z darmowych serwerów, np. czy 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 owe o dużej pojemności brak ograniczenia na generowany przez nasz serwer ruch w 22 sieci

23 Przypomnijmy: Każdy serwer ma: adres IP jest to adres liczbowy np.: 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 oraz 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 max liczba znaków to

24 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

25 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