Podstawowe wiadomości o stronach WWW

Jeśli edukację graficzną rozpoczynałeś od Photoshopa, znasz już takie pojęcia jak ka­na­ły alfa i gradienty, ale prawdopodobnie brak Ci informacji na temat protokołów inter­ne­to­wych i programowania w HTML. W Fireworks kody HTML i JavaScript możesz two­rzyć równie łatwo jak GIF-y i JPEG-i, więc nic nie stoi na przeszkodzie, aby zbudować całą witrynę internetową (lub przynajmniej jej szkielet) bezpośrednio w Fireworks. Wie­dza na temat Internetu pomoże Ci w pełni wykorzystać wszystkie możliwości Fire­works.

Formatowanie stron

HTML, czyli HyperText Markup Language (Język Znaczników Hipertekstowych) jest językiem opisu stron WWW. Doku­men­ty HTML wyświetlane w przeglądarce (rysunek A.1) są sformatowanymi stronami podobnymi do tych, które są spotykane w drukowanych czasopismach. Składają się z teks­tu formatowanego różnymi czcionkami i stylami, obrazków, a nawet multimediów, ta­kich jak odtwarzane potokowo dźwięki lub filmy.

Otwarcie dokumentu HTML w edytorze tekstu umożliwia wyświetlenie tworzącego go ko­du składającego się z opisów formatowania nazywanych znacznikami, które mówią prze­glądarce, jak wyświetlić tekst i jak dołączyć do strony obrazki i filmy.

Aby wyświetlić kod HTML tworzący stronę WWW, otwórz dokument HTML w prze­glą­darce i:

u      Jeśli używasz Netscape Navigatora lub Communicatora, wybierz z menu po­le­ce­nie View Page Source

u      Jeżeli używasz Microsoft Internet Explorera, wybierz z menu polecenie View Source

u      Jeśli korzystasz z jeszcze innej przeglądarki, poszukaj polecenia podobnego do po­wyższych lub przejrzyj dokumentację techniczną aplikacji.

Kod HTML bieżącej strony jest przeważnie wyświetlany w edytorze tekstu lub spe­cjal­nym oknie kodu HTML, i będzie wyglądał mniej więcej tak jak na rysunku A.2.

Nie przejmuj się, jeżeli to co widzisz to dla Ciebie kompletna "chińszczyzna". Pozorna złożoność HTML kryje w sobie bardzo prostą strukturę.

Znaczniki i atrybuty

Znaczniki w kodzie HTML można rozpoznać po otaczających je trójkątnych nawiasach (<>). Wszystkie elementy dokumentu HTML są albo znacznikami, albo zawartością znacz­ników. Znaczniki definiują 24324p1524y , które fragmenty tekstu mają być nagłówkiem, a które aka­pitem oraz jak te fragmenty powinny być sformatowane. Na przykład, aby tekst We Got the Funk wyświetlić za pomocą wytłuszczonej czcionki, powinieneś wpisać go w znacz­niku Bold, oznaczanym literą b

<b>We Got the Funk</b>

Zwróć uwagę, że ukośnik (/) w powyższym kodzie oznacza drugi znacznik jako znacz­nik zamykający. Konwencja taka jest stosowana w wielu innych znacznikach HTML, choć niektóre z nich nie wymagają znaczników zamykających.

Para znaczników: otwierający i zamykający, mówi, że "wszystko, co znajduje się mię­dzy nami jest właśnie tym". Przykładowo, znaczniki <title></title> mówią, że "wszys­tko znajdujące się między nami jest tytułem". Para znaczników <b></b> znaj­du­jąca się w powyższym kodzie mówi, że "wszystko znajdujące się między nami jest wy­tłuszczone".

Wiele znaczników może również posiadać atrybuty jeszcze bardziej modyfikujące zna­cznik. Przykładowo, znacznik mówiący "wstaw tutaj tabelę" (znacznik <table>) może po­siadać atrybuty definiujące szerokość tabeli, grubość jej obramowania i wiele innych para­metrów. Atrybuty są umieszczane wewnątrz znaczników. Prosty, podstawowy zna­cz­nik <table> wygląda więc tak:

<table>

Znacznik <table> definiujący tabelę o szerokości 400 pikseli i obramowaniu o gru­boś­ci 3 pikseli wygląda następująco:

<table width="400" border="3">

Mimo że istnieje około stu różnych znaczników HTML, przytłaczająca większość stron WWW tworzona jest z wykorzystaniem jedynie ich małej części.

Dziesięć najważniejszych znaczników

Język HTML oferuje wszelkie rodzaje znaczników umożliwiające wszystkim pro­jek­tan­tom tworzenie rozmaitych rodzajów stron. Szczęśliwie dla początkujących projektantów in­ternetowych, nie wszystkie z nich są potrzebne, aby zbudować całą zawartość no­wo­czes­nej witryny WWW. Znajomość dziesięciu najważniejszych znaczników umożliwia utwo­rzenie większości kodów HTML i stron WWW. Po przyjrzeniu się każdemu z tych dzie­sięciu super-znaczników, zbudujemy prostą stronę WWW, aby nauczyć się wyko­rzys­tywać je w praktyce.

Znacznik HTML: <html></html>

Znacznik <html> mówi, że "wszystko znajdujące się wewnątrz mnie jest kodem HTML". Każdy dokument HTML rozpoczyna się znacznikiem otwierającym <html> i koń­czy znacznikiem zamykającym </html>. Przeglądarki internetowe przeważnie igno­rują wszystko, co nie znajduje się pomiędzy tymi znacznikami. Dlaczego? Gdyż nie jest to kodem HTML. Znaczniki <html> nie posiadają żadnych atrybutów.

Budowę strony WWW rozpoczniemy od wpisania znaczników <html>

<html>

</html>

Znacznik head: <head></head>

O znaczniku <head> możesz myśleć jako o sposobie "przedstawienia" strony prze­glą­dar­ce. Jest to znajdująca się w tle informacja, która nie jest wyświetlana w przeglądarce. Znacz­nik <head> zawiera tytuł strony i indeksy wykorzystywane przez wyszukiwarki inter­netowe. Po dodaniu znacznika <head> do naszej przykładowej strony WWW (no­we fragmenty kodu są wytłuszczane), jej kod będzie wyglądał następująco:

<html>

<head>

</head>

</html>

Znacznik title: <title></title>

Znacznik <title> zawiera tytuł strony. Jest to bardzo ważny znacznik, ponieważ jest wy­korzystywany przez wiele wyszukiwarek internetowych przy indeksowaniu stron WWW. Innymi słowy - jeśli użytkownik szuka słowa Pokemon, w liście stron wy­świe­tlo­nych przez wyszukiwarkę więcej będzie dokumentów zawierających słowo Pokemon w tytule, niż stron zawierających to samo słowo w swej zawartości. Znacznik <title> zaw­sze znajduje się wewnątrz znacznika <head> i powinien być pierwszym znacz­ni­kiem wpisywanym po znaczniku otwierającym <head>. W przeciwnym przypadku nie­któ­re wyszukiwarki nie odnajdą dokumentu. Po dodaniu znacznika <title> do naszej stro­ny, jej kod będzie wyglądał następująco:

<html>

<head>

<title>An Example Page</title>

</head>

</html>

Znacznik meta: <meta></meta>

Znacznik <meta> umożliwia przechowywanie informacji o stronie WWW wewnątrz sa­mej strony. Znacznik ten można traktować jako pole w bazie danych. Do jednej strony WWW możesz dodać tyle znaczników <meta>, ile tylko zechcesz i każdemu z nich na­dać jego własną nazwę (typ danych) oraz zawartość (dane). Najczęściej wykorzy­sty­wa­ny­mi naz­wami znaczników <meta> są: description, która zawiera opis strony wyświe­tla­ny przez niektóre wyszukiwarki internetowe zaraz po tytule strony, oraz keywords, która za­wie­ra słowa kluczowe (oddzielane przecinkami) używane przez wyszukiwarki inter­ne­to­we do indeksowania stron w swoich bazach danych. Stosowanie precyzyjnych i opi­so­wych słów kluczowych w znacznikach <meta> zwiększa szansę na to, że Twoją stro­nę znajdą faktycznie nią zainteresowani użytkownicy używający wyszukiwarek. Możesz użyć dowolnej liczby słów klu­czowych, ale pierwszych szesnaście ma największe znaczenie. Powtarzanie słów klu­czowych może uniemożliwić zaindeksowanie Twojej strony w wyszukiwarce. Ist­nie­ją jeszcze inne znaczniki <meta>, na przykład takie, które wyświetlają w wyszukiwarce nazwisko auto­ra strony. Kod naszej przykładowej strony będzie wyglądał następująco:

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content=="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring ">

<meta name="author" content="Simon White">

</head>

</head>

</html>

Znacznik body: <body></body>

Znacznik <body> jest miejscem, w którym przechowywana jest cała zawartość strony wy­świetlana w przeglądarce. Tekst, obrazki, plug-iny, aplety Javy - wszystkie te ele­men­ty znajdują się w znaczniku <body>. Znacznik ten prawie zawsze posiada pewne atry­buty definiujące kolor tła i tekstu strony. Jeśli parametry te nie zostaną zdefi­nio­wa­ne, używane są domyślne kolory przeglądarki użytkownika (które mogą być u każdego użyt­kownika inne). Kolory są definiowane w języku HTML poprzez ich wartości w mo­de­lu RGB i podawane w zapisie szesnastkowym (heksadecymalnym). W naszym przy­kła­dzie użyjemy białego (#FFFFFF) tła i czarnego (#000000) tekstu, więc kod będzie wy­glądał następująco:

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring ">

<meta name="author" content="Simon White">

</head>

<body bgcolor="#FFFFFF" text=="#000000">

</body>

</html>

Zauważ, że nasza strona posiada już znacznik <body>, ale jedyną rzeczą jaka zostanie wy­świetlona w przeglądarce jest białe tło.

Znacznik paragraph: <p></p>

Każda para otwierających i zamykających znaczników <p> zawiera akapit. Akapit mo­że składać się z tekstu, obrazków i prawie wszystkich innych elementów, które mogą być wyświetlane na stronie WWW. Pomiędzy poszczególnymi akapitami przeglądarki po­zostawiają jeden pusty wiersz. Do znacznika <p> możesz dodać atrybuty wyrów­na­nia, aby wyrównać zawartość akapitu do lewej, wyśrodkować lub wyrównać do prawej, jak w naszym przykładzie. Jeśli pominiesz atrybuty wyrównania, zawartość akapitu zos­tanie wyrównana do lewej.

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content=="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring">

<meta name="author" content="Simon White">

</head>

<body bgcolor="#FFFFFF" text=="#000000">

<p>Here is a paragraph full of text.</p>

<p align="right">Here is a right-aligned paragraph full of text.</p>

</body>

</html>

Nasz strona WWW wyświetlana w przeglądarce (rysunek A.3) wreszcie ma jakąś za­wartość.

	Rysunek A.3. Przeglądarki internetowe pozostawiają jeden wiersz odstępu pomiędzy akapitami i wyrównują akapity zgodnie z atrybutami znaczników <p>		Znacznik zamykający </p> nie jest wymagany przez przeglądarki, ale dob­rze jest go stosować. XML, SMIL i inne pochodne HTML zaw­sze wymagają znaczników zamykających, a specyfikacja HTML 4 wy­ma­ga znaczników zamykających dla zachowania pełnej zgodności. Znacznik anchor: <a></a> Znacznik <a> (anchor - odnośnik), jest bardzo ważny w Internecie, gdyż umożliwia two­rzenie hiperłączy. Czym byłby hipertekst bez hiperłączy? Utworzenie łącza to bar­dzo proste zadanie. Wystarczy otoczyć tekst lub obrazek, który ma być łączem za po­mo­cą otwie­ra­ją­cego i zamykającego znacznika <a> oraz nadać mu atrybut href, jak poniżej: <a href="https://www.google.com ">Search at Google!</a> Atrybut href mówi przeglądarce, jaką stronę ma otworzyć po kliknięciu przez użyt­kow­nika tekstu Search at Google! ącza są zazwyczaj podkreślane i wyświetlane w kolorze nie­bieskim. Gdy dodamy na naszej stronie łącze do słowa text, powstanie na­stę­pujący kod: <html> <head> <title>An Example Page</title> <meta name="description" content="A Web page built as an example of the most common tags and where they go."> <meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring "> <meta name="author" content="Simon White"> </head> <body bgcolor="#FFFFFF" text=="#000000"> <p>Here is a paragraph full of <a href="https://www.dictionary.com ">text </a>.</p> <p align="right">Here is a right-aligned paragraph full of text.</p> </body> </html> Na rysunku A.4 możesz zobaczyć, jak nasz kod będzie interpretowany przez prze­glą­darkę. Rysunek A.4. ącza są domyślnie podkreślane Znacznik image: <img> Znacznik <img> mówi przeglądarce, aby wyświetliła w danym miejscu na stronie określony obrazek. Zwróć uwagę, że znacznik <img> nie posiada znacznika zamykającego, gdyż nie otacza żad­nych innych znaczników lub zawartości. Mimo że nie musisz definiować szerokości i wysokości obrazka za pomocą atrybutów width i height, ich określenie przyspiesza ła­dowanie strony. Dobrą praktyką jest także stosowanie atrybutu alt. Pozwala on na two­rzenie tekstu zastępczego dla przeglądarek nie obsługujących grafiki oraz dla użyt­kow­ni­ków, którzy wyłączyli wyświetlanie obrazków w swoich przeglądarkach lub mają sła­by wzrok. Znacznik <img> może być umieszczany wewnątrz innych znaczników, prze­waż­nie wewnątrz znaczników akapitów i tabel. Znacznik <img> można nawet otoczyć znacz­nikiem <a>, aby utworzyć z obrazka łącze. Obrazki pełnią oczywiści w Internecie funkcję ilustracyjną, ale są również nieza­wod­nym sposobem na zachowanie określonego formatowania strony WWW. Dlatego też bar­dzo często są wykorzystywane do umieszczania na stronach tytułów, znaków gra­ficz­nych i tym podobnych elementów. W naszym przykładzie wykorzystamy dwa obraz­ki. Jeden z nich będzie ilustracją, drugi zaś tytułem strony. Pliki obrazków są zazwyczaj przechowywane w pobliżu wykorzystujących je plików HTML, czyli w tych samych lub sąsiednich folderach, często nazywanych images (obraz­ki) lub podobnie. Obrazki wykorzystywane na naszej stronie znajdują się w tym sa­mym katalogu co plik HTML, więc atrybut src zawiera jedynie ich nazwy: <html> <head> <title>An Example Page</title> <meta name="description" content="A Web page built as an example of the most common tags and where they go."> <meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring"> <meta name="author" content="Simon White"> </head> <body bgcolor="#FFFFFF" text=="#000000"> <p><img src="example_title.gif" width="400" height="50"alt="An Example Page "></p> <p>Here is a paragraph full of <a href="https://www.dictionary.com ">text</a>.</p> <p align="right">Here is a right-aligned paragraph full of text.</p> <p><img src="mona.gif" width="125" height="160" alt="A generic placeholder image of the Mona Lisa."></p> </body> </html> Wynik powyższego kodu możesz zobaczyć na rysunku A.5. Rysunek A.5. Znacznik <img> wyświetla plik obrazka, na przykład znajdującą się obok Monę Lisę, na stronie WWW Możesz również wykorzystywać obrazki znajdujące się w innych katalogach albo nawet w dowolnych lokalizacjach w Internecie, dodając do opisującego obrazek atrybutu href właściwy adres URL. Znacznik font: <font></font> Prosty tekst może się szybko znudzić. Umieszczenie wokół tekstu znaczników <font> umo­żliwia zmodyfikowanie jego formatowania, zdefiniowanie wyglądu czcionki za pomocą atry­butu face i koloru za pomocą atrybutu color. Kolory są definiowane poprzez ich war­tości w modelu RGB, podawane w zapisie szesnastkowym. Musisz jednak zwrócić szcze­gólną uwagę na to, jakich czcionek możesz używać, a jakich nie. Czcionki są za­zwy­czaj definiowane w formie listy, na przykład "Arial, Helvetica, sans-serif", po­nie­waż użytkownik musi posiadać wybraną czcionkę w swoim systemie operacyjnym. Jeśli pierw­sza czcionka nie zostanie znaleziona, przeglądarka pobiera drugą czcionkę z listy, następnie trze­cią itd. Opcja serif lub sans-serif zawsze powinna być ostatnią pozycją w liście. Opcje te mówią przeglądarce, aby użyła domyślnej, szeryfowej (na przykład Times Ro­man) lub bezszeryfowej czcionki (na przykład Helvetica). Możesz również użyć programu Bitsream Dynamic Fonts do ładowania do­wolnych czcionek wraz ze stroną WWW. Mogą być one wyświetlane bez­pośrednio w Netscapie 4+ oraz, za pomocą małej kontrolki Active X, w Internet Explorerze 4+.   W tym momencie naruszę nieco zasady i wykorzystam dwa dodatkowe znaczniki. Aby wy­tłuś­cić tekst, otoczę go znacznikiem <b> i określę dla niego kursywę za pomocą znaczników <i> Po dodaniu znaczników <font> <b> i <i>, kod naszej strony będzie wyglądał nastę­pująco: <html> <head> <title>An Example Page</title> <meta name="description" content="A Web page built as an example of the most common tags and where they go."> <meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring "> <meta name="author" content="Simon White"> </head> <body bgcolor="#FFFFFF" text=="#000000"> <p><img src="example_title.gif" width="400" height="50" alt="An Example Page "></p> <p><font face="Verdana, Helvetica, sans-serif" color="FF0000 "><i>Here</i> is a <b>paragraph</b> full of <a href="https://www.dictionary.com"> text</a>.</font></p> <p align="right">Here is a right-aligned paragraph full of text.</p> <p><img src="mona.gif" width="125" height="160" alt="A generic placeholder image of the Mona Lisa."></p> </body> </html> Na rysunku A.6 możesz zobaczyć, jak nasz kod będzie interpretowany przez prze­glądarkę. Rysunek A.6. Znaczniki <font>, <b> i <i> sprawiają, że pierwszy akapit wygląda nieco inaczej niż drugi Znacznik table: <table></table> Znacznik <table> pierwotnie został stworzony z myślą o łatwiejszym wyświetlaniu na stro­nach WWW tabel zawierających dane (podobnych do tych, jakie można znaleźć w arku­szach kalkulacyjnych). Obecnie, jest powszechnie wykorzystywany do pro­jek­to­wa­nia szkieletów całych stron WWW, na których elementy takie jak tekst i obrazki są roz­mieszczane w komórkach tabeli. Elementy te mogą się wówczas znajdować mniej więcej w wybranych punktach na stronie. Znacznik <table> jest prawdopodobnie najtrudniejszy z dziesięciu najważniejszych znaczników, dlatego też najczęściej jest tworzony w edy­to­rach graficznych, zamiast poprzez ręczne programowanie. Wybiegając poza ograniczenie do dziesięciu znaczników, znacznik <table> posiada dwóch "pomocników": znacznik <tr> (table row - wiersz tabeli) i znacznik <td> (table data - da­ne tabeli). Znacznik <tr> mówi, iż "wszystko znajdujące się wewnątrz mnie jest wier­szem tabeli". Znacznik <td>, który zawsze występuje wraz ze znacznikiem <tr>, defi­niuje komórkę tabeli. Kolumny nie są definiowane, lecz wyznaczane poprzez liczbę ko­mórek w wierszu tabeli. Oto jak wygląda kod pustej tabeli zawierającej dwa wiersze i trzy ko­lumny: <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> Zauważ, że liczba kolumn jest wyznaczana przez łańcuchy trzech par znaczników <td></td>. Jeśli wszystkie tabele są puste, ich ręczne formatowanie jest dość proste, ale gdy zaczniesz umieszczać w nich jakieś elementy, wszystko zacznie się kom­pli­ko­wać. Po umieszczeniu zawartości w tabeli o trzech wierszach i dwóch kolumnach pow­sta­nie następujący kod: <html> <head> <title>An Example Page</title> <meta name="description" content="A Web page built as an example of the most common tags and where they go."> <meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring"> <meta name="author" content="Simon White"> </head> <body bgcolor="#FFFFFF" text=="#000000"> <table width="500" border="0"> <tr> <td colspan="2"><img src="example_title.gif" width="400" height="50" alt="An Example Page"></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td><p><img src="mona.gif" width="125" height="160" alt="A generic placeholder image of the Mona Lisa."></p></td> <td><p><font face="Verdana, Helvetica, sans-serif" color="FF0000"><i>Here</i> is a <b>paragraph</b> full of <a href="https://www.dictionary.com"> text</a>.</font></p> <p align="right">Here is a right-aligned paragraph full of text.</p> </td> </tr> </table> </body> </html> Ukończona przykładowa strona (rysunek A.7) zawiera tytuł, informacje wymagane przy in­deksowaniu, sformatowany tekst, hiperłącze oraz tabelę, a wszystko to zostało utwo­rzo­ne z wykorzystaniem najczęściej stosowanych znaczników. Zastosowanie Virtual PC w MacOS Po zainstalowaniu emulatora Virtual PC w MacOS, staje się on idealnym komputerem testowym dla każdego projektanta stron WWW, gdyż umożliwia uruchamianie wielu różnych wersji przeglądarki Netscape, Microsoft i AOL dla Windows, MacOS i Linux, jak również przeglądarki WebTV, i to wszystko na jednym urządzeniu (bez stosowania partycji lub ponownego uruchamiania). Należy w tym celu pominąć zalecenie IE i AOL dla Windows, które mówi, że na jednym komputerze można instalować tylko jedną wersję przeglądarki. Virtual PC umożliwia obejście tego problemu, pozwalając na utrzymanie wielu konfiguracji, każdej z nich odpowiadającej innej wirtualnej partycji startowej, a tak naprawdę jest to tylko plik na dysku twardym, dla aplikacji Virtual PC. Każda z konfiguracji może zawierać inną wersję Windows lub Linux, konfigurację i przeglądarkę (i (lub) zestaw zainstalowanych plug-inów przeglądarki). Wszystkie zrzuty ekranowe umieszczone w niniejszej książce zostały wykonane na jednym komputerze Macintosh, przy wykorzystaniu wielu wersji Windows i około dwudziestu przeglądarek.   Rysunek A.7. Otwarcie strony w Dreamweaverze pozwoli przyjrzeć się strukturze znacznika <table>. Za Dreamweaverem, ta sama strona jest otwarta w Netscapie   Jeśli wciąż mało Ci znaczników, następne w kolejce do poznania są <style>, <form>, <script> oraz znacznik komentarza. Więcej o nich znaj­dziesz w źródłach języka HTML, na przykład na stronie Roba Schul­ter'a, znajdującej się pod adresem https://utopia.knoware.nl/users/schluter /doc/tags/index.html. Przeglądarki Każdy z projektów może być przeznaczony dla innych użytkowników posiadających róż­ne przeglądarki internetowe. Jeśli tworzysz, na przykład, witrynę zawierającą rady dla użyt­kowników Windows 2000 możesz założyć, że przytłaczająca większość odwiedza­ją­cych będzie korzystała z Internet Explorera 5 uruchamianego w Windows 2000, gdyż ta przeglądarka stanowi część pakietu Windows 2000. Inter­ne­towy magazyn dla projektantów internetowych będzie odwiedzany przez użytkow­ni­ków po­sia­dających najnowsze wersje Internet Explorera i Netscapa uruchamianych zarówno w Win­dows, jak i w MacOS. Sklep internetowy będzie odwiedzany praktycznie przez wszys­tkich użytkowników posiadających różne wersje przeglądarek dla MacOS, Win­dows i AOL. Zapoznanie się z możliwościami i kaprysami wszystkich przeglądarek oraz testowanie, testowanie i jeszcze raz testowanie pozwolą uchronić się przed późniejszymi nie­spo­dziankami. Netscape Navigator (Communicator) Wersje 1, 2 i 3 Navigatora praktycznie już nie istnieją, ale jeśli projektujesz witrynę dla sze­ro­kiego grona użytkowników, dobrą przeglądarką testującą jest Navigator 3, który był bar­dzo popularny i wiele z jego funkcji zostało zaadoptowanych w nowszych prze­glą­dar­kach. W większości przypadków, jeśli Twoja strona dobrze pracuje w Navigatorze 3, będzie wymagała jedynie kilku udoskonaleń, aby wyglądała równie dobrze w późniejszych wersjach Navi­ga­to­ra, w Internet Explorerze i w innych przeglądarkach, jak np. Opera. Chociaż Navigator 4.x stracił na popularności w oczekiwaniu na wersje 5. lub 6. tej przeglądarki, jest jednak wciąż najbardziej popularną przeglądarką spośród tych, które nie są produktem Microsoft. Navigator 4.x obsługuje niektóre funkcje CSS (wliczając warstwy), ale nie tak, jak ży­czy­łoby sobie World Wide Web Consortium (W3C). Przeglądarka ta posiada powszech­nie znany błąd - nie przeładowuje stron bez formatowania CSS, jeśli użytkownik prze­ska­lu­je okno przeglądarki. Navigator 4.x jest dostępny dla systemów Windows, MacOS, OS/2, Linux oraz wielu innych platform UNIX-owych. Pamiętaj, że plug-iny prze­glą­da­rek również są uzależnione od systemów operacyjnych i większość z nich przeznaczona jest wyłącznie dla Windows oraz MacOS. W połączeniu z pozostałymi elementami pakietu opro­gra­mowania, Netscape znany jest jako Netscape Communicator, ale cały czas chodzi o tę samą przeglądarkę. Odwiedź witrynę World Wide Web Consortium, która znajduje się pod ad­resem www.w3c.org.   Długo oczekiwanym uaktualnieniem oprogramowania Netscape jest Navigator 6, zupełnie nowy produkt oparty na otwartym dostępie do kodu źródłowego, zespołu pro­gramistów Mozilla.org. Navigator 6 w pełni obsługuje HTML-a 4 oraz CSS 1, ale został dosyć chłodno przyjęty przez recenzentów. Otwarty dostęp do kodu źródłowego oznacza, że interpreter HTML (nazywany Gecko) bę­dzie najprawdopodobniej zbudowany w oparciu o szeroki zakres różnych kom­po­nen­tów sprzętowych i programowych, takich jak inne przeglądarki internetowe. Profe­sjo­na­liści zajmujący się projektami internetowymi powinni więc trzymać rękę na pulsie. Microsoft Internet Explorer Internet Explorer 1 i 2 miały bardzo ograniczone możliwości i nie były zbyt szeroko sto­sowane, możemy więc zupełnie zignorować te przeglądarki. IE 3 zawiera niektóre pod­stawowe funkcje CSS, ale są one słabo zaimplementowane i różnią się całkowicie od tych spotykanych w IE 4, nie polecam więc testowania projektów w IE 3 z CSS. Wer­sja dla Windows nie obsługuje przełączania obrazków, ale nie zgłasza przy tym żad­nych błędów. Pamiętaj, że jeśli tworzysz skomplikowane przełączanie obrazków, ca­ły projekt pójdzie na marne, jeśli przełączanie nie będzie obsługiwane przez prze­glądarkę. IE 3 jest obecnie bardzo rzadko używany, ale zestaw jego funkcji został prze­jęty przez wiele przeglądarek AOL.   IE 4 dla Windows bardzo dobrze interpretuje dokumenty HTML i obsługuje wiele (acz­kol­wiek niekompletnie) zaawansowanych technologii internetowych. Popularność tej prze­glądarki wynika z jej wymuszonej integracji z systemami Windows oraz braku współpracy z za­in­stalowaną na tym samym komputerze przeglądarką Netscape. IE 5 dla Windows poprawił standardy obsługi, jednak wielu programistów wciąż bazuje na funkcjach IE 4 (chociaż wciąż zalecane jest testowanie w IE 5). IE 5.5 wprowadził nowy zakres rozszerzeń HTML, specyficznych dla Microsoftu, jakby chcąc przypomnieć czasy, gdy producenci przeglądarek rywalizowali w tym, jak przekonać programistę, żeby tworzył stronę dostępną tylko w ich przeglądarce. Internet Explorer dla Windows i IE dla MacOS to zupełnie różne narzędzia obsługujące in­ne technologie internetowe oraz inaczej interpretujące HTML. IE3 i 4 dla MacOS są wyposażone w miłe interfejsy użytkownika, ale są to - mówiąc szczerze - beznadziejne przeglądarki. Jednak przeglądarka IE 5.5 jest czymś zupełnie innym. Wciąż korzysta z doskonałego interfejsu użytkownika, ale dodaje najlepszy z dostępnych na rynku interpreter Microsoft - Tazman., dostępny tylko w wersji IE 5 dla MacOS (rysunek A.8). Rysunek A.8. Internet Explorer 5 dla Macintosha (pokazany tu na Mac OS X) jest jedyną przeglądarką, która jest w stanie poprawnie odtworzyć tzw. "CSS acid test" W3C, dokument testujący pełną zgodność ze specyfikacją CSS 1.0. Po wpisaniu "about:tasman" w pasku adresowym IE 5 dla MacOS, pojawi się specjalna wersja tego testu, zastępująca tekst obszaru zablokowanego nazwą programisty W3C CSS Acid Test znajdziesz pod adresem www.w3.org/Style/CSS/Test/ current/sec5526c-test.htm.   Wersje IE dla Windows i dla MacOS różnią się również bardzo pod względem obsługi plug-inów i skryptów. IE dla Windows wyko­rzy­stuje technologie pracujące tylko w tym systemie, takie jak ActiveX i VBScript (mi­mo że umożliwia również podstawową obsługę plug-inów Netscape oraz doskonałą obsługę Java­Scriptu). Wersja IE na MacOS używa wyłącznie plug-inów Netscape i JavaScript, mi­mo że obsługa tych elementów w wersjach 3 i 4 przeglądarki jest najgorsza ze wszys­tkich najważniejszych przeglądarek., niemniej jednak w IE 5 dla MacOs obsługa plug-inów i JavaScript jest tu doskonała. Należy pamiętać, że plug-iny przeglądarek zależą od platformy, chociaż są dostępne wersje MacOS wszystkich głównych plug-inów. Istnieją również wersje IE dla UNIX-a, ale nie są one zbyt szeroko sto­sowane i reklamowane.   America Online Przeglądarki AOL 3, 4 i 5 są zmodyfikowanymi wersjami Internet Explorer Microsoft, ale niestety numery wersji nie są ze sobą zgodne. Innymi słowy - przeglądarka AOL 4 mo­że być oparta na IE 3 lub IE 4. Najważniejszą różnicą pomiędzy AOL i IE jest to, iż prze­glądarki AOL mogą mieć otwarte jednocześnie tylko jedno okno. AOL dodatkowo jeszcze umieszcza obrazki w pamięci podręcznej i dokonuje ich powtórnej kompresji, co może powodować powstawanie zniekształceń w JPEG-ach, a obrazki są ograniczone do rozmiaru 640x480. Więcej informacji o projektowaniu witryn dla przeglądarek AOL znaj­dziesz na stronie AOL Webmaster znajdującej się pod adresem webmaster.aol.com.   WebTV Przeglądarka WebTV nie wywołała burzy wśród internautów i jej użytkownicy stano­wią bardzo małą część społeczności internetowej. Dostęp do Internetu poprzez telewizję być może zdobędzie większą popularność w przyszłości i wtedy na pewno w wielu urzą­dzeniach znajdziesz funkcje przypominające przeglądarkę WebTV, dlatego też warto jej się nieco bliżej przyjrzeć. WebTV wyświetla strony internetowe w dość wyjątkowy sposób, aby dostosować je do nis­kich rozdzielczości ekranów odbiorników telewizyjnych. Najważniejszą rzeczą do za­pamiętania jest to, iż "okno przeglądarki" ma ściśle ustalone wymiary: 544 piksele sze­rokości i 378 pikseli wysokości. Jeżeli strona będzie szersza, zostanie ściś­nię­ta. Jeśli zaś będzie wyższa, użytkownik będzie musiał użyć przewijania, aby zobaczyć jej pozostałe elementy. WebTV umożliwia otwarcie tylko jednego okna przeglądarki i dość nietypowo obsługuje ramki: zestaw ramek jest konwertowany na tabelę i ścis­ka­ny do szerokości 544 pikseli. WebTV umożliwia korzystanie z dowolnych czcionek, ale mu­szą mieć one rozmiary 14 pikseli i być wytłuszczone oraz bezszeryfowe. WebTV obsłu­guje Flasha 2.0 oraz RealAudio 3.0. Jedną z rzeczy dobrze obsługiwanych przez WebTV jest odtwarzanie plików MIDI za pomocą programowego syntezatora opartego na technologii firmy Beatnik. Nie istnieje żadna możliwość sprawdzenia, jak Twoja strona będzie wyświetlana w WebTV. Na szczęście, twórcy WebTV oferują darmową przeglądarkę WebTV Viewer dla Win­dows i MacOS, które pomagają w tworzeniu stron "bezpiecznych" dla WebTV. Prze­glą­darkę taką możesz pobrać ze strony https://developer.webtv.net (rysunek A.9). Wieloplatformowość Internet jest zaskakująco wieloplatformowym medium, zwłaszcza gdy weźmiemy pod uwa­gę, że Netscape pracuje podobnie w Windows, w MacOS i w systemie Linux, ale ist­nieje kilka rzeczy, o których musisz pamiętać, jeśli chcesz, aby Twoje strony wy­glą­da­ły podobnie na każdej z wymienionych platform. Rysunek A.9. Strona WWW z rysunku A.1 wyświetlona w przeglądarce WebTV Viewer 2.0 dla MacOS Czcionki Zanim powstał Internet, publikacje były głównie drukowane. Wybór czcionki w pro­gra­mie komputerowym oznaczał zatem przeważnie wybór jej rozmiaru, mierzonego w punk­tach (pt). Aby 12-punktowa czcionka mogła zostać wyświetlona na ekranie mo­ni­tora, komputer musi przekształcić punkty (jeden punkt to 1/72 cala) na piksele (naj­mniej­szy punkt, jaki może zostać wyświetlony na ekranie monitora). Na rysunku A.10 widać stronę WWW wyświetlaną w MacOS, gdzie 10-punktowa czcion­ka ma rozmiar 10 pikseli, gdyż rozdzielczość wyświetlania na MacOS to 72 dpi. Rysunek A.10. System MacOS do konwersji punktów na piksele używa rozdzielczości wynoszącej 72 dpi, więc czcionki o takich samych rozmiarach będą w MacOS mniejsze niż w Windows Na rysunku A.11 pokazano tę samą stronę WWW wyświetlaną w systemie Windows, gdzie 10-punktowa czcionka jest wyświetlana w rozmiarze 12 pikseli, gdyż roz­dziel­czość wyświetlania w Windows to 96 dpi.   Rysunek A.11. System Windows do konwersji punktów na piksele używa rozdzielczości wynoszącej 96 dpi, więc czcionki o takich samych rozmiarach będą w Windows większe niż w MacOS   Internet Explorer 5 dla MacOS wprowadził nową funkcję w celu poprawienia wyświetlania czcionek na różnych platformach. Zgodnie z ustawieniem domyślnym, rozdzielczość jest ustawiona na standard Windows, czyli 96dpi, ale zarazem rozmiar czcionki jest ustawiony na 16 punktów, dzięki czemu użytkownicy, którzy nie zmienią ustawień będą widzieć tekst o większym rozmiarze niż użytkownicy systemu Windows. Protokoły Informacje "podróżują" po Internecie zgodnie z zestawem protokołów nazywanym TCP/IP (Transmission Control Protocol/Internet Prostocol). Zestaw protokołów jest gru­pą protokołów lub porozumieniem pewnej grupy ludzi dotyczącym sposobu wy­ko­na­nia określonej operacji. TCP/IP zawiera ponad sto takich elementów, ale tutaj przyj­rzy­my się tym najczęściej używanym. HTTP i HTTPS HTTP (HyperText Transfer Protocol) wysyła żądania dokumentów HTML z prze­glą­dar­ki do serwera, a następnie wysyła te dokumenty z serwera do przeglądarki. Jak za­pew­ne wiesz, jest to bardzo często stosowana funkcja w Internecie. Gdy przeglądarka i serwer chcą sobie "porozmawiać w cztery oczy" (na przykład w trakcie transakcji in­ter­netowej), używają protokołu HTTPS (HyperText Transfer Protocol Secure). Rysunek A.12. Elementy formularzy w każdym systemie operacyjnym wyglądają trochę inaczej i mogą mieć różne rozmiary Gdy prze­glądarka korzysta z protokołu HTTPS, w jej pasku stanu wyświetlana jest ikona kłód­ki lub podobna, zaś wszelkie informacje są przed wysłaniem szyfrowane. Wszys­tkie przeglądarki obsługują protokół HTTP, a większość z nich obsługuje również HTTPS. URL HTTP wygląda tak: https://opensrs.com. URL HTTPS wygląda podobnie, z tym wyjątkiem, że korzysta z przedrostka https://. FTP FTP (File Tranfer Protocol) pozwala na kopiowanie plików pomiędzy komputerami (na­wet pomiędzy różnymi typami komputerów) oraz na podstawowe operacje na plikach, ta­kie jak wypisywanie zawartości katalogów na odległym komputerze. Przeglądarki ob­sługują FTP jedynie w podstawowym zakresie, zaś pełną kontrolę nad tym pro­to­ko­łem dają programy klienckie FTP, takie jak WS FTP dla Windows lub Anarchie dla Mac­OS. Wiele serwerów FTP pozwala na anonimowy dostęp do ich zasobów. Użyt­kow­nik podaje w takich serwerach jako hasło swój adres e-mail i ma ograniczone upra­w­nienia. URL FTP wygląda tak: ftp://ftp.panic.com. Mogłoby się wydawać, że w adresie ftp://ftp.panic.com protokół FTP jest definiowany dwukrotnie, ale tak nie jest. Pierwsze słowo ftp de­fi­niu­je protokół, zaś drugie jest częścią nazwy serwera FTP - panic.com. Serwery HTTP często posiadają w nazwie słowo www, jak w adresie https://www.panic.com.   SMTP i POP SMTP (Simple Mail Transfer Protocol) umożliwia przekazywanie poczty elektronicznej pomiędzy różnymi kom­puterami w sieci. POP (Post Office Protocol) jest nowszą me­­to­dą od­bierania poczty. Klienci poczty elektronicznej, na przykład Netscape Mes­senger lub Micro­soft Outlook Express używają protokołów SMTP i POP do wysyła­nia i od­bie­ra­nia poczty. NNTP NNTP (Network News Transfer Protocol) jest wykorzystywany przez programy od­czy­tu­jące listy dyskusyjne do kierowania zapytań do serwerów oraz przez serwery grup dys­kusyjnych do odbierania wiadomości. Protokół NNTP jest odpowiedzialny za znany przez wszystkich i lubiany Usenet. URL NNTP wygląda tak: news://forums.macrome­dia.com /macromedia.fireworks. Inne protokoły używają przedrostka takiego samego jak ich nazwy (na przy­kład protokół FTP korzysta z przedrostka ftp://), ale protokół NNTP używa przedrostka news://.   RTSP RTSP (Real-Time Streaming Protocol) jest prawdopodobnie najbardziej rozbudowanym pro­tokołem Internetowym umożliwiającym sprawne przesyłanie przez Internet od­twa­rza­nych potokowo plików multimedialnych, na przykład dźwięków i filmów wideo. Wy­rażenie real-time (w czasie rzeczywistym) oznacza, że pliki dźwiękowe i wideo są prze­syłane do klienta bez przerywania prezentacji. Oprogramowanie serwera, na przy­kład QuickTime Streaming Server lub RealServer używają protokołu RTSP do prze­sy­ła­nia informacji odpowiednio do QuickTime Playera lub RealPlayera (rysunek A.13). URL RTSP rozpoczyna się przedrostkiem rtsp://. Rysunek A.13. QuickTime Player (po lewej) i RealPlayer używają protokołu RTSP do potokowego odbierania plików multimedialnych (w tym przypadku filmów wideo) przez Internet Document Info Accesari: 1758 Apreciat: Comenteaza documentul: Nu esti inregistrat Trebuie sa fii utilizator inregistrat pentru a putea comenta Creaza cont nou A fost util? Daca documentul a fost util si crezi ca merita sa adaugi un link catre el la tine in site Copiaza codul: in pagina web a site-ului tau. <a href="https://www.scritub.com/limba/poloneza/Podstawowe-wiadomoci-o-stronac1932415243.php" target="_blank" title="Podstawowe wiadomości o stronach WWW - https://www.scritub.com">Podstawowe wiadomości o stronach WWW</a> eCoduri.com - coduri postale, contabile, CAEN sau bancare Politica de confidentialitate | Termenii si conditii de utilizare Copyright © Contact (SCRIGROUP Int. 2024 )