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