Karkonoska Państwowa Szkoła Wyższa

Jelenia Góra ul. Lwówecka, tel. 75 645 33 00

Projektowanie witryn sieci Web z wykorzystaniem udostępnionego szablonu


Strona WWW

   Co to jest WWW? W potocznym rozumieniu często mylimy internet z siecią WWW, którą nazywamy inaczej siecią Web - pajęczyną lub siecią World Wide Web - co w wolnym tłumaczeniu oznacza globalną pajęczynę. Internet nie zawiera informacji, lecz jest jej nośnikiem. Informacje w internecie prezentowane są przede wszystkim w postaci dokumentów sieci WWW. Dokumenty te nazywa się także stronami WWW. Gotowe strony WWW zapisywane są na specyficznym komputerze, który nazywamy serwerem, który jest odpowiedzialny za realizację żądania przesłania dokumentu do tego komputera, który z tym wystąpił. home image Jest także konieczny do opublikowania dokumentów w sieci. Dane, które otrzymujemy są zakodowane w specjalany sposób - są zapisane w języku HTML, który w odpowiedni sposób interpretuje przeglądarka, wyświetlając pobraną stronę na monitorze komputera.
   Każdy dokument HTML posiada ściśle określony szkielet, który zmienia się w zależności od zawartości strony. Pierwszym elementem szkieletu strony jest wpis określający rodzaj wykorzystywanego do jej stworzenia języka (!DOCTYPE HTML). Dzięki tej informacji przeglądarka internetowa wie czego może spodziewać się po naszym kodzie HTML i jak ma go interpretować (rozumieć).
   Element html jest informacją dla przeglądarki internetowej, gdzie rozpoczyna się oraz gdzie kończy się cała zawartość naszego dokumentu HTML a znaczniki html i /html informują, że wszystko co znajduje się między nimi, stanowi dokument HTML. Kolejną rzeczą, jaką musimy umieścić w naszym kodzie HTML jest jeden element head oraz jeden element body. Para znaczników head i /head wyznacza ramy nagłówka, pomiędzy którymi umieszczony jest kod definiujący tytuł strony. Para znaczników body i /body zawiera podstawową część strony, tj. treść, obrazy, hiperzłacza, itd.

   Kolejną rzeczą, jaką musimy umieścić w naszym kodzie HTML jest jeden element title. Element title jest informacją dla przeglądarki internetowej o tytule danego dokumentu HTML, który pojawi się na pasku okna. Dlatego zawartość elementu title nie może być zawartością pustą lub zawartością posiadająca wyłącznie białe znaki.
   Korpus stanowi właściwą część dokumentu HTML. Wpisujemy tu wszystko, co ma być wyświetlone na stronie. W prezentowanym przykładzie fragment kodu "grafika/banner.jpg" jest nagłówkiem strony, a fragment kodu "grafika/okladka.jpg" jest zawartością strony. Z kodu możemy dowiedzieć się, że elementy graficzne pobierane są z folderu o nazwie grafika.

   Tutaj możesz pobrać kod wyświetlanej strony WWW, który będzie do wykorzystania w dalszych etapach ćwiczenia TEST1 »»» 

Sposób wyświetlenia opisanej wyżej strony WWW, zgodnej z udostępnionym kodem "TEST1" pokazuje poniższa grafika.

Elementy graficzne prezentowanej strony to nagłówek strony, którym jest plik banner.jpg wyświetlany jako "WYDZIAŁ HUMANISTYCZNY" oraz zawartość strony, którym jest plik graficzny o nazwie okładka.jpg na stronie wyświetlany jako "TEMAT-DZIENNIKARSTWO". Pliki graficzne wykorzystane do zbudowania nagłówka strony oraz treści strony są do pobrania tutaj.


Zadania do samodzielnego wykonania

   Zbuduj stronę internetową, wykorzystując pobrany wyżej kod strony (TEST1) oraz pobrane elementy graficzne o nazwach banner.jpg oraz okladka.jpg, pamiętając, że pliki graficzne należy umieścić w folderze o nazwie grafika. W następej kolejności postępuj zgodnie treścią zadań opisanymi niżej. Zaleca się stosowanie podczas prac z kodem strony internetowej stosowanie edytora HTML o nazwie kED (dostępny w pracowni ).

Zadanie 1 - testowanie zmian w kodzie

  • Do edytora stron internetowych kED skupiuj kod strony internetowej "TEST1" i dokonaj zmian tylko w wybranych częściach kodu, za każdym razem wyświetlając tworzoną stronę w przeglądarce i analizując uzyskane efekty. Informację w których miejscach należy dokonywać zmian można uzyskać otwierając plik o nazwie kod.pdf, w którym kolorami zaznaczono propozycje zmian. Plik o nazwie kod.pdf możesz pobrać tutaj kod.pdf »»» 

Zadanie 2 - wprowadzanie tekstu na stronę

  • Otwórz kod strony internetowej za pomocą edytora kED, w którym dokonaj zamiany elementu graficznego tekstowym, zgodnie ze wskazówkami z pliku o nazwie kod2.pdf. Plik kod2.pdf jest do pobrania tutaj kod2.pdf »»» 
  • Zmiany, które zostały wprowadzone w kodzie strony zastąpują wyświetlany element graficzny tekstem, który wpisujemy lub wklejamy między znacznikami p.

Tutaj możesz obejrzeć wynik dokonanych zmian. Porównaj z obrazem wyżej.

Zadanie 3 - tworzenie odnośnika do strony, będącej częścią składową serwisu

  • Wyświetl w edytorze kED kod źródłowy strony głównej.
  • W menu utwórz odnośniki do trzech podstron, wykorzystując jako wzór listing z pliku kod3.pdf. Każda pozycja paska menu powinna prowadzić do jednej z utworzonych stron o odpowiedniej tematyce. Nazwy plików stron mogą być dowolne. nformację w których miejscach należy dokonywać zmian można uzyskać otwierając plik o nazwie kod3.pdf, w którym kolorami zaznaczono propozycje i miejsca zmian. Plik o nazwie kod3.pdf możesz pobrać tutaj kod3.pdf »»» 
  • Wynik zmian do obejrzenia tutaj Strona po zmianach »»» 

Zadanie 4 - Opracowanie założeń do praktycznej realizacji własnej strony internetowej

  • Zaprojektuj własną stronę o niewielkiej objętości z 3 podstronami, zgodnie z zadeklarowanym wcześniej tematem.
  • Jedna z podstron ma być galerią obrazów (min. 8 obrazów), pozostałe dwie opisują zagadnienia związane z zadeklarowanym tematem.

Zawartość strony - jeden folder z grafiką dla strony o nazwie "grafika", jeden folder dla galerii o nazwie "galeria", dwa foldery dla pozostałych podstron oraz jeden plik o nazwie index.html (strona główna tworzonej strony internetowej). Uwaga - kod pliku index.html jest zgodny ze zmianami wprowadzonymi w zadaniu 3.

  • Utwórz w folderze galeria plik o nazwie galeria.html oraz dwa foldery o nazwie "małe" i "duze". W folderze o nazwie "male" umieść miniatury 8 zdjęć o wymiarach 168x126 px, natomiast w folderze o nazwie "duze" 8 zdjęć o wymiarach 640x480 px. Kod pliku galeria.html jest do pobrania tutaj GALERIA »»» 

Wynik wprowadzonych zmian na podstronie o nazwie galeria możesz obejrzeć tutaj Galeria »»» .

  • W folderach o nazwach podstrona1 oraz podstrona2 umieść odpowiednio pliki o nazwach podstrona1.html oraz podstrona2.html. Przykładowy kod plików jest do pobrania tutaj Podstrona 1 »»» 

Wynik wprowadzonych zmian na podstronie o nazwie galeria możesz obejrzeć tutaj Podstrona 1 »»» .