Karkonoska Państwowa Szkoła Wyższa

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

Ćwiczenia do tematu 4 i 5


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 »»» 
  • Tutaj możesz pobrać kod wyświetlanej strony WWW, który będzie do wykorzystania w dalszych etapach ćwiczenia TEST1 »»» 
  • Pliki graficzne wykorzystane do zbudowania nagłówka strony oraz treści strony są do pobrania tutaj.

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