Klasa III Strony WWW

Strony WWW (ang. World Wide Web – sieć ogólnoświatowa, czyli po prostu Internet) stanowią jeden z podstawowych i najczęściej wykorzystywanych elementów sieci Internet. Dzięki nim uzyskujesz informację, oglądasz filmy, słuchasz stacji radiowych, komunikujesz się z przyjaciółmi. Strony WWW są częścią usługi sieciowej o nazwie HTTP (ang. Hyper Text Transfer Protocol). Usługa ta posiada znaną nam z pierwszych lekcji architekturę klient–serwer.

obrazek

Usługa HTTP wygląda w skrócie następująco:

Serwer HTTP jest szybkim komputerem, który cały czas nasłuchuje sieć, oczekując na pojawienie się żądań od klientów HTTP. Klient HTTP to komputer użytkownika z uruchomioną na nim przeglądarką sieci (Internet Explorer, FireFox, Opera, itp.). Przeglądarka poprzez sieć Internet łączy się z serwerem i wysyła do niego żądanie obsługi. W odpowiedzi serwer przesyła do komputera klienta odpowiednią stronę WWW lub żądane elementy strony.

Sama strona WWW jest zwykłym plikiem tekstowym. Aby się o tym przekonać, wejdź na dowolną stronę WWW za pomocą swojej przeglądarki FireFox, po czym kliknij prawym przyciskiem myszki puste miejsce na stronie i z menu kontekstowego wybierz opcję Pokaż źródło strony. Na ekranie pojawi się okienko z tekstem strony WWW:

Dla człowieka ten tekst nie jest zbytnio czytelny i nie chcielibyśmy go oglądać w takiej postaci. Dlatego przeglądarka odpowiednio przetwarza zawartość strony WWW, aby ją zaprezentować czytelnikowi. Skąd przeglądarka wie, jak to zrobić? Strony WWW są zapisane w specjalnym języku zwanym HTML (ang. Hyper Text Markup Language – Język Znaczników Hipertekstu). Język ten definiuje znaczniki hipertekstowe, które określają strukturę oraz format strony WWW. Znacznik html jest napisem postaci:

<nazwa parametry>...pewien blok treści...</nazwa>

lub

Pierwsza wersja to tzw. znacznik blokowy, który składa się z dwóch elementów: początkowego <nazwa...> i końcowego </nazwa>. Działanie takiego znacznika ogranicza się do objętego nim bloku. Może być to np. zmiana koloru tła, koloru czcionki, kroju czcionki, wyrównania tekstu, itp.

Jako ćwiczenie utworzymy wg wskazówek i wyjaśnień nauczyciela typową stronę WWW w Notatniku:

<html>
    <head>
        <title>Testowa strona WWW</title>
    </head>
    <body style="color: white; background-color: green">
        <h1>Nagłówek 1 poziomu</h1>
        <h2>Nagłówek 2 poziomu</h2>
        <p>Tekst akapitu normalny, <b>pogrubiony</b>, <i>pochyły</i>,<u>podkreślony</u></p>
    </body>
</html>

Na początek: podrozdziału strony

Strona WWW jest zwykłym plikiem tekstowym i jako taka może zostać utworzona w dowolnym edytorze tekstu. Jednakże do tego celu lepiej korzystać z wyspecjalizowanych narzędzi, które posiadają wiele udogodnień. My będziemy korzystać z aplikacji Microsoft Expression Web 4, która została udostępniona darmowo przez firmę Microsoft. Zainstaluj na swoim komputerze domowym Expression Web 4 korzystając z poniższego linku:

https://www.techspot.com/downloads/downloadnow/2934/?evp=038d88127131b176d7ca0c68c6a984cf&file=3135

Expression Web 4 jest aplikacją pracującą z witrynami (ang. site – grupa powiązanych ze sobą stron WWW wraz z towarzyszącymi im plikami). Dlatego pracę rozpoczniemy od stworzenia witryny, czyli katalogu, w którym znajdą się wszystkie pliki powiązane z tworzonymi stronami.

Uruchom Expression Web 4 (w skrócie EW4). Jeśli w programie będzie otwarta jakaś witryna (program zapamiętuje ustawienia z poprzedniej grupy, która z niego korzystała), to ją zamknij za pomocą opcji Site → Close. Z menu wybierz opcję Site → New Site...:

Pojawi się okienko tworzenia nowej witryny:

W pierwszym polu zaznacz opcję General (ogólna witryna).

W drugim polu wybierz opcję Empty Site (pusta witryna). Ponieważ uczymy się, wszystko zrobimy sami od początku.

W polu Location (położenie) powinna znaleźć się ścieżka do katalogu zawierającego witrynę. Tutaj najprawdopodobniej znajdziesz katalog z innej grupy, zatem kliknij przycisk Browse... (przeglądaj), przejdź do swojego katalogu klasowego, po czym utwórz w nim katalog w01, zaznacz go i wybierz przyciskiem Open (otwórz). W polu Location powinna pojawić się ścieżka do tego katalogu.

Zatwierdź okno dialogowe przyciskiem OK. EW4 utworzy nową witrynę www w wybranym przez ciebie katalogu.

W programie pojawi się okno o nazwie Site View (widok witryny), w którym będziesz mógł zarządzać wszystkimi plikami swojej witryny. Na razie okno jest puste, ponieważ twoja witryna nie zawiera żadnego pliku.

Utworzymy teraz pierwszą stronę WWW w naszej witrynie. Z menu wybierz opcję:

Pojawi się okno dialogowe tworzenia nowej strony:

W pierwszym polu zaznacz opcję General.

W drugim polu zaznacz HTML – strona WWW w języku HTML, to określi rodzaj tworzonej strony WWW.

Zatwierdź okno dialogowe przyciskiem OK.

EW4 utworzy pustą stronę WWW i umieści ją w edytorze. Strona otrzymuje nazwę Untitled_1.html. Teraz dobrym pomysłem jest zapisanie tej strony w witrynie. Naciśnij zatem klawisze Ctrl-S. Gdy pojawi się okno zapisu, jako nazwę pliku strony wpisz index i kliknij w przycisk Save (zapisz).

Nazwa index ma znaczenie historyczne. W początkach ery WWW każda witryna posiadała stronę startową zawierającą spis (indeks) zawartości witryny. Dlatego główną stronę witryny nazywamy zwykle index.

Przejdź na zakładkę Site View. Zobaczysz teraz utworzoną przez nas stronę w witrynie. Kliknij w kolumnie Title na tytuł strony i wpisz "Moja strona WWW":

Wróć na zakładkę index.html. Po lewej stronie u dołu strony znajdują się trzy opcje widoku:

Design – to widok projektu. Tutaj możesz tworzyć swoją stronę w sposób wizualny, mniej więcej tak samo jak w procesorze tekstu. Strona WWW wygląda tak, jak zobaczysz ją w przeglądarce.

Split – to widok podzielony. U góry widzisz fragment kodu strony, a u dołu widzisz, jak ten kod zostanie wyświetlony w przeglądarce. Możesz ingerować w zawartość obu okien, czyli możesz pracować bezpośrednio z kodem HTML strony oraz wizualnie.

Code – to widok kodu strony.

Teraz sformatujemy naszą stronę WWW. Z menu wybierz opcję Format → Properties (format, własności). W okienku dialogowym Page Properties (własności strony) przejdź na zakładkę Formatting (formatowanie) i zmień kolory tła i tekstu:

Następnie przejdź na zakładkę Language (język) i ustaw język polski jako język strony:

Zatwierdź okno dialogowe przyciskiem OK. W edytorze wybierz widok kodu strony. Zwróć uwagę, iż EW4 dopisał do kodu kilka znaczników:

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

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="pl" http-equiv="Content-Language" />
<title>Moja strona WWW</title>
</head>

<body style="color: #800080; background-color: #CCFF99">

</body>

</html>

To zaleta tego programu, nie musimy wszystko wpisywać sami, edytor nas wyręcza. Zmień widok na Design i wpisz tekst: "I LO w Tarnowie", po czym wyśrodkuj go. Wróć do widoku Code:

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

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="pl" http-equiv="Content-Language" />
<title>Moja strona WWW</title>
<style type="text/css">
.auto-style1 {
	text-align: center;
}
</style>
</head>

<body style="color: #800080; background-color: #CCFF99">

<p class="auto-style1">I LO w Tarnowie</p>

</body>

</html>

Teraz wraz z nauczycielem przeanalizuj kod strony WWW. Tworząc strony internetowe musisz poznać język HTML przynajmniej w stopniu podstawowym.

Na początek: podrozdziału strony

Materiały tylko do użytku dydaktycznego. Ich kopiowanie i powielanie jest dozwolone pod warunkiem podania źródła oraz niepobierania za to pieniędzy.
Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl
Serwis wykorzystuje pliki cookies. Jeśli nie chcesz ich otrzymywać, zablokuj je w swojej przeglądarce.

Informacje dodatkowe.

Materiały dla klasy III

Strony WWW

SPIS TREŚCI

Co to jest strona WWW?

Tworzenie pierwszej strony WWW w Expression Web 4