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 11 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. 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. Wskazówka: 1) Generator przykładowego tekstu, którym można wypełnić projektowaną stronę można znaleźć np. w Internecie pod adresem: http://lipsum.pl 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