Tworzenie stron WWW: wprowadzenie

O stronach 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:

obrazek

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 objetego nim bloku. Może być to np. zmiana koloru tła, koloru czcionki, kroju czcionki, wyrównania tekstu, itp.

Ćwiczenie

W menadżerze plików (ikonka obok przycisku startowego na pasku zadań) otwórz katalog /var/www/html i usuń z niego wszystkie pliki, które mogły utworzyć wcześniejsze grupy. Menadżer plików zamknij.

Aby zrozumieć funkcjonowanie stron WWW, stworzymy prostą stronę w notatniku. Kliknij w przycisk startowy, a następnie uruchom:

obrazek

Leafpad jest prostym edytorem tekstu, odpowiednikiem Notatnika w systemie Windows.

obrazek

Po otwarciu notatnika naciśnij klawisze Ctrl+S. Kombinacja ta uruchamia zapis edytowanego pliku na dysku. Zapisz go z kodowaniem ISO-8859-2 w systemie plików w katalogu (ważne!!!):

/var/www/html

pod nazwą:

index.html

obrazek

Podany katalog jest katalogiem na strony WWW. Na każdym stanowisku uczniowskim zainstalowany jest serwer stron WWW o nazwie Apache. Strona WWW o nazwie index.html jest standardową stroną WWW, którą prześle serwer do klienta, jeśli ten nie określi innej strony WWW. Podgląd strony uzyskamy za chwilę w przeglądarce.

Teraz wpisz:

<html>

</html>

Znaczniki te informują przeglądarkę, że strona będzie zapisana w języku HTML. Pomiędzy tymi znacznikami umieszczamy dalszą część kodu HTML:

<html>
  <head>

  </head>
  <body>

  </body>
</html>

Znacznik <head>...</head> obejmuje tzw. nagłówek strony WWW. W nagłówku umieszczone są różne informacje o stronie WWW.

Znacznik <body>...</body> obejmuje treść strony. Treść ta będzie się pojawiała w oknie przeglądarki.

W sekcji HEAD dopisujemy kolejny znacznik, który określi tytuł strony.

<html>
  <head>
    <title>Moja strona WWW</title>
  </head>
  <body>

  </body>
</html>

Naciśnij Ctrl+S, aby zapisać stronę WWW. Teraz zobaczmy jej podgląd. W tym celu uruchom przeglądarkę FireFox i w pasku adresowym wpisz localhost. Zostanie otwarta twoja strona i na pasku tytułowym pojawi się twój tytuł:

obrazek

localhost jest internetową nazwą twojego komputera.

Kontynuujemy tworzenie strony WWW. W sekcji BODY dopisujemy:

<html>
  <head>
    <title>Moja strona WWW</title>
  </head>
  <body>
    <h1>I Liceum Ogólnokształcące
        w Tarnowie</h1>
  </body>
</html>

Znacznik <h1>...</h1> definiuje tzw. nagłówek pierwszego poziomu. Nagłówków w HTML mamy 6 od <h1> do <h6>. Nagłówek cechuje się inną czcionką oraz wielkością liter niż tekst normalny strony. Tekst w nagłówku złamaliśmy po wyrazie Ogólnokształcące. Zapisz stronę, naciskając Ctrl+S. Przejdź do przeglądarki FireFox o odśwież stronę, naciskając klawisz F5. Otrzymasz następującą treść:

obrazek

Zwróć uwagę, że na stronie tekst nie został złamany. Dlaczego? Po prostu w języku HTML podziały tekstu w pliku nie są brane pod uwagę. Jeśli chcesz złamać wiersz po określonym wyrazie, to musisz umieścić tam znacznik <br> (ang. break).

<html>
  <head>
    <title>Moja strona WWW</title>
  </head>
  <body>
    <h1>I Liceum Ogólnokształcące<br>
        w Tarnowie</h1>
  </body>
</html>

Zapisz stronę, przejdź do przeglądarki i odśwież widok. Teraz nagłówek będzie złamany prawidłowo:

obrazek

Teraz dodamy nieco tekst. Pod nagłówkiem wpisz:

<html>
  <head>
    <title>Moja strona WWW</title>
  </head>
  <body>
    <h1>I Liceum Ogólnokształcące<br>
        w Tarnowie</h1>
    <p>Jest to najstarsza szkoła średnia w Tarnowie.
       Niedawno obchodziła swoje 450-lecie.
       W szkole uczniowie mogą wybrać wiele profili nauczania.
       Przedmioty są nauczane na wysokim poziomie.
       Po zajęciach organizowane są różne koła przedmiotowe.
       W ramach koła informatycznego uczniowie mogą uczyć się elektroniki
       i techniki cyfrowej oraz programowania w języku C++.</p>
  </body>
</html>

Zapisz plik i odśwież widok w przeglądarce. Otrzymasz:

obrazek

Znacznik <p>...</p> definiuje akapit, czyli jednolity blok tekstu. Jak widzisz, podział wierszy w akapicie nie odpowiada ich podziałowi w tekście strony. Teraz ładnie wyjustujemy tekst akapitu. W znaczniku otwierającym dopisz:

<html>
  <head>
    <title>Moja strona WWW</title>
  </head>
  <body>
    <h1>I Liceum Ogólnokształcące<br>
        w Tarnowie</h1>
    <p style="text-align: justify;">Jest to najstarsza szkoła średnia w Tarnowie.
       Niedawno obchodziła swoje 450-lecie.
       W szkole uczniowie mogą wybrać wiele profili nauczania.
       Przedmioty są nauczane na wysokim poziomie.
       Po zajęciach organizowane są różne koła przedmiotowe.
       W ramach koła informatycznego uczniowie mogą uczyć się elektroniki
       i techniki cyfrowej oraz programowania w języku C++.</p>
  </body>
</html>

Po zapisie i odświeżeniu widoku w przeglądarce otrzymasz:

obrazek

Umieściliśmy w znaczniku <p> tzw. styl, który określa sposób ułożenia tekstu akapitu w obrębie strony WWW. text-align: justify wyrównuje oba marginesy (możliwe są również ułożenia: right – wyrównanie do prawego marginesu, left – wyrównanie do lewego marginesu, center – wyśrodkowanie tekstu akapitu).

Teraz przed nagłówkiem dodamy znacznik, który umieści na stronie herb naszej szkoły (przepisz go dokładnie):

<html>
  <head>
    <title>Moja strona WWW</title>
  </head>
  <body>
    <img src="/images/i-lo_logo.gif">
    <h1>I Liceum Ogólnokształcące<br>
        w Tarnowie</h1>
    <p style="text-align: justify;">Jest to najstarsza szkoła średnia w Tarnowie.
       Niedawno obchodziła swoje 450-lecie.
       W szkole uczniowie mogą wybrać wiele profili nauczania.
       Przedmioty są nauczane na wysokim poziomie.
       Po zajęciach organizowane są różne koła przedmiotowe.
       W ramach koła informatycznego uczniowie mogą uczyć się elektroniki
       i techniki cyfrowej oraz programowania w języku C++.</p>
  </body>
</html>

Gdy zapiszesz plik i odświeżysz widok strony w przeglądarce, otrzymasz:

obrazek

Znacznik <img...> wprowadza obrazek. Obrazki nie są częścią pliku strony. To osobne pliki. Dlatego w znaczniku img musimy podać źródło obrazka. W tym przypadku obrazek zostanie pobrany z naszego szkolnego serwera.

Na koniec zmienimy kolory tekstu i tła strony. W znacznikach <body> i <h1> dopisz:

<html>
  <head>
    <title>Moja strona WWW</title>
  </head>
  <body text="White" bgcolor="Green">
    <img src="/images/i-lo_logo.gif">
    <h1 style="color: Yellow">I Liceum Ogólnokształcące<br>
        w Tarnowie</h1>
    <p style="text-align: justify;">Jest to najstarsza szkoła średnia w Tarnowie.
       Niedawno obchodziła swoje 450-lecie.
       W szkole uczniowie mogą wybrać wiele profili nauczania.
       Przedmioty są nauczane na wysokim poziomie.
       Po zajęciach organizowane są różne koła przedmiotowe.
       W ramach koła informatycznego uczniowie mogą uczyć się elektroniki
       i techniki cyfrowej oraz programowania w języku C++.</p>
  </body>
</html>

Efekt powinien być następujący:

obrazek

Gratulacje. Właśnie utworzyłeś na serwerze HTTP swoją własną stronę WWW.

Pisanie stron bezpośrednio w języku HTML jest możliwe (niektórzy robią to często zawodowo), lecz dla przeciętnego użytkownika byłoby bardzo trudne. Na szczęście stworzono wiele narzędzi, które ułatwiają to zadanie. Jedną z tych aplikacji poznamy na następnych zajęciach.

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl

W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe