Politechnika Gdańska

Wydział Elektrotechniki i Automatyki

Katedra Inżynierii Systemów Sterowania

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE

Temat: Prosty serwis internetowy oparty o zestaw powiązanych

ze sobą stron WWW opracowanych w języku (X)HTML

Ćwiczenia Laboratoryjne nr 4

Opracowanie:

Rutkowski Tomasz, dr inż.

Tarnawski Jarosław, dr inż.

Gdańsk, kwiecień 2011

Wprowadzenie

Celem ćwiczeń realizowanych w trakcie laboratorium jest wykorzystanie podstawowych

znaczników (tagów) języka (X)HTML do opracowania prostego i funkcjonalnego serwisu

internetowego składającego się z kilku powiązanych ze sobą stron WWW (dokumentów

html).

Do tworzenia poszczególnych stron składowych serwisu internetowego można

wykorzystać systemowy notatnik lub „proste” narzędzie wspierające budowę strony w

języku (X)HTML w postaci prostego edytora (X)HTML z funkcją kolorowania składni

dokumentu.

W trakcie zajęć nie można wykorzystywać narzędzi wspierających budowę strony w

sposób graficzny, czyli aplikacji WYSIWYG ( ang. What You See Is What You Get).

Poszczególne pliki (dokumenty html) stanowiące strukturę opracowywanego w trakcie

zajęć serwisu internetowego należy zapisywać w odpowiednim katalogu użytkownika.

Do przeglądania utworzonych dokumentów html należy wykorzystać przeglądarki

internetowe (Internet Explorer lub Firefox) zainstalowane na każdym z komputerów

znajdujących się w laboratorium.

Wskazówka: W przypadku korzystania z Internet Explorer należy z menu wybrać:

„Plik” -> „Otwórz…” -> „Przeglądaj…”

Natomiast w przypadku korzystania z Firefoxa należy z menu wybrać:

„Plik” -> „Otwórz plik…”

Lub wykorzystując Eksploratora Windows kliknąć dwukrotnie na wybranym

pliku

2

Ćwiczenie 1

Wykorzystując dokument html (plik: serwis_www_str_tabeli.html) dołączony do

ćwiczenia w postaci materiału pomocniczego:

1. przedyskutować strukturę typowego dokumentu html

2. zapoznać się z wykorzystanymi w dokumencie znacznikami

3. przeanalizować strukturę wykorzystanej tabeli:

a. ile jest w niej wierszy?

b. ile jest w niej kolumn?

c. czy w każdym wierszu jest tyle samo kolumn?

4. Wykorzystując dodatkowe materiały pomocnicze przeanalizować atrybuty

wybranych znaczników (głównie atrybuty związane ze znacznikami służącymi do

prezentacji struktury tabeli)

Wskazówka: 1) W celu omówienia struktury dokumentu html, można skorzystać z materiału pomocniczego w postaci Wykładu 8 pt. „Wprowadzenie do (X)HTML ”, który znajduje się na stronie internetowej przedmiotu.

2) W celu zapoznania się z wybranymi znacznikami czy atrybutami wybranych znaczników, można skorzystać z materiału wspomnianego w punkcie 1) lub jednego z wielu kursów html dostępnych on-line w Internecie (przykładowe linki znajdują się w dziale „Literatura” na internetowej stronie przedmiotu).

3

Ćwiczenie 2

Zmienić nazwę dokumentu serwis_www_str_tabeli.html na index.html i zapisać go w katalogu docelowym gdzie będą tworzone poszczególne elementy składowe

budowanego serwisu internetowego.

Wykorzystując znaczniki odsyłaczy zbudować główne menu serwisu, które powinno

składać się co najmniej z pięciu elementów, np.:

• Strona Głowna – O nas

• News

• Nasza Oferta

• Nasi Kontrahenci

• Kontakt

Wskazówka: 1) Menu główne serwisu powinno znajdować się w części dokumentu html

która nosi roboczą nazwę „MENU”.

2) Z każdym elementem menu powinien być powiązany inny dokument html

o tej samej strukturze co plik index.html ale o innej nazwie i zawartości w części dokumentu, która nosi roboczą nazwę „CZĘŚĆ GŁÓWNA STRONY”.

Ćwiczenie 3

Utworzone w ramach Ćwiczenia 2 dokumenty html, należy wzbogacić o proste

różnorodne treści ( najlepiej losowe ciągi znaków – warstwa tekowa pełni jedynie

drugoplanowa rolę).

Przy edytowaniu treści należy wykorzystać różne „ozdobniki” tekstu np.: pogrubienia,

pochylenia, podkreślenia, indeksy górne i dolne, przejście do nowego wiersza, linie

poziome, akapity, listy uporządkowane i nieuporządkowane itp.

4

Ćwiczenie 4

W utworzonych w ramach Ćwiczenia 3 dokumentach html osadzić kilka przykładowych

obrazków.

Szczególną uwagę należy przywiązać do logo, które powinno zostać umieszczone w tym

samym miejscu każdego z dokumentów html ( w części dokumentu html która nosi

roboczą nazwę „NAGŁÓWEK” ), stanowiących strukturę serwisu internetowego.

Wskazówka: Odpowiednie obrazki można stworzyć za pomocą systemowego programu

graficznego - Paint. Należy pamiętać o tym by utworzone obrazki zapisać w katalogu w którym zapisane są pliki projektowanego serwisu

internetowego.

Ćwiczenie 5

W utworzonych w ramach Ćwiczenia 4 dokumentach umieścić przykładowe wpisy/wpis

w tej części dokumentu html która nosi roboczą nazwę „STOPKA”.

5