Download
1 / 17
180 likes | 345 Views
Projektowanie stron WWW. Opracowano na potrzeby zajęć z Zastosowania Informatyki w Nauczaniu (Podyplomowe Studium Informatyki UAM). HTML. Na potrzeby naszych zajęć zajmiemy się tylko i wyłącznie tworzeniem stron WWW w HTML-u.
E N D
Projektowanie stron WWW Opracowano na potrzeby zajęć z Zastosowania Informatyki w Nauczaniu (Podyplomowe Studium Informatyki UAM)
HTML Na potrzeby naszych zajęć zajmiemy się tylko i wyłącznie tworzeniem stron WWW w HTML-u. HTML to język zrozumiały dla przeglądarek internetowych! Język ten składa się z poleceń zwanych „znacznikami” bądź „tagami”. Być może wiele osób sądzi, że strona w języku HTML jest jakimś tajemnym dokumentem, o specjalnym formacie, do tworzenia której potrzebne są specjalistyczne narzędzia i daleko idąca wiedza. Nic z tych rzeczy! Do utworzenia takiej strony nie jest potrzebne nic więcej niż... zwykły edytor tekstów. Może to być, przynajmniej teoretycznie, najprostszy edytor dla DOS, który potrafi zapisywać dokument w postaci tekstowej, choćby Norton Editor, PC Write czy cokolwiek równie prostego.
Do tworzenia stron WWW w języku HTML służyć mogą (tak jak już to wspomniano) proste edytory tekstu, jednak napisanie całej strony w takim edytorze może okazać się czasochłonne lub wręcz nudzące. Istnieją programy dzięki którym nie musimy ręcznie wpisywać wszystkich znaczników, wystarczy np. nacisnąć Alt-p, aby wstawić otwierający i zamykający znacznik akapitu, albo Ctrl-b, aby wprowadzić znacznik pogrubienia czcionki (choć nie każdy edytor na to pozwala). Bardziej zaawansowane produkty wspomagają tworzenie wyspecjalizowanych elementów, jak tabele, odsyłacze, ramki czy formularze. Takim programem ułatwiającym tworzenie strony WWW w HTML-u jest Front Page dostępny w produktach Microsoftu np.: Office97, Office2000, OfficeXP. Zanim jednak przejdę do prezentacji Front Page’a kilka słów o strukturze dokumentu w HTML-u i kilku znacznikach.
Przykładowa strona WWW widok w przeglądarce Internet Eksplorer oraz źródło w HTML-u Rys. 1. Przykładowa strona WWW
Źródło strony WWW z rysunku pierwszego <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <meta name="Author" content="Joanna Kulczak"> <meta name="Description" content="Oficjalna strona biura podróży GLOBTUR: strona zawiera podstawowe informacje dotyczące działalności biura oraz najnowsze oferty podróży."> <meta name="Keywords" content="globtur, podróż, biuro podróży, wycieczki, wczasy, wypoczynek"> <meta name="Language" content="pl"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <title>Oficjalna strona biura podróży "GLOBTUR"</title> </head> <body bgcolor="#F3BD4B" text="#000000" link="#0000FF" vlink="#000080" alink="#FFFF00"> <div align="center"><center> <table border="0" cellpadding="7" cellspacing="1" width="640"> <tr> <td align="center"><img src="glob.gif" alt="GOLBTUR - logo" width="71" height="52"></td> <td align="center"><h1><font size="7"><strong>Biuro podróży<br> GLOBTUR</strong></font></h1> <p><font size="3"><b>ul. Św. Wojciecha 8, 00-620 WARSZAWA</b><br> <b>tel.: 48/22/572-16-39; fax.: 48/22/575-16-00<br> e-mail: </b></font><a href="mailto:globtur@topnet.pl"><font size="3"><b>globtur@topnet.pl</b></font></a></p> </td> </tr> <tr> <td><a href="wycieczki.htm"><font size="4"><strong>Wycieczki</strong></font></a><p><a href="wczasy.htm"><font size="4"><strong>Wczasy</strong></font></a></p> <p><a href="last.htm"><font size="4"><strong>Last minute</strong></font></a></p> </td> <td><p align="right"><font size="4" face="System"><em>"Lato, gdy przyjdzie, co z nim czynić?"<br> - pytał Mikołaj Rej</em></font></p> <p align="center"><font size="4">Już od 10 lat zajmujemy się organizowaniem wypoczynku dla Ciebie i Twojej Rodziny. W naszej ofercie znajdziesz wiele interesujących wycieczek, pozwalających dogłębnie poznać wybrany kraj. Zapewniamy komfortowy przelot samolotem oraz przejazd w autokarach najwyższej klasy. Gwarantujemy noclegi w dogodnie położonych hotelach. Posiadamy koncesję nr 0639 wydaną przez Urząd Kultury Fizycznej i Turystyki w Warszawie. Firma posiada ubezpieczenie "</font><a href="http://www.warta.com.pl" target="_blank"><font size="4">WARTY</font></a><font size="4">".</font></p> <p align="center"><font size="5" face="MS Sans Serif"><strong>Zapraszamy do korzystania z naszej oferty</strong></font></p> </td> </tr> </table> </center></div> <p align="center"> </p> </body> </html>
Analizując wcześniejsze źródło strony WWW możemy stwierdzić, że dokument HTML, aby odpowiadał przyjętemu standardowi, powinien zawierać trzy elementy (choć często spotyka się w Internecie dokumenty nie zawierające wszystkich poleceń, należy unikać tej maniery): • <HTML> </HTML> - jest to otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce; • <HEAD> </HEAD> - znacznik ten jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa; • <BODY> </BODY> - jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu.
Zajmijmy się nagłówkiem strony, czyli częścią zawartą pomiędzy znacznikami <HEAD></HEAD>. W naszym przykładzie wygląda to tak: <head> <meta http-equiv="Content-Type„ content="text/html; charset=iso-8859-2"> <meta name="Author" content="Joanna Kulczak"> <meta name="Description„ content="Oficjalna strona biura podróży GLOBTUR: strona zawiera podstawowe informacje dotyczące działalności biura oraz najnowsze oferty podróży."> <meta name="Keywords" content="globtur, podróż, biuro podróży, wycieczki, wczasy, wypoczynek"> <meta name="Language" content="pl"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <title>Oficjalna strona biura podróży "GLOBTUR"</title> </head> META jest poleceniem opcjonalnym, nie wymaganym dla poprawności dokumentu, używanie go jest zalecane, gdyż usprawnia funkcjonowanie witryny w Sieci. Polecenie <meta http-equiv="Content-Type„ content="text/html; charset=iso-8859-2"> jest bardzo ważne, gdyż określa standard kodowania polskich liter. Należy zawsze używać kodowania ISO-8859-2, gdyż zalecane jest przez polską normę.
Kolejne polecenia które warto używać to: • <meta name="Description„ content="Oficjalna strona biura podróży GLOBTUR: strona zawiera podstawowe informacje dotyczące działalności biura oraz najnowsze oferty podróży."> • <meta name="Keywords„ content="globtur, podróż, biuro podróży, wycieczki, wczasy, wypoczynek"> • Pierwsze polecenie opisuje zawartość strony. Dzięki niemu ułatwiamy pracę osobom korzystającym z wyszukiwarki. Przykładowo, gdy posłużymy się Infoseekiem, szukając np. stron poświęconym biurom podróży, łatwo dostrzeżemy funkcjonalność poleceń TITLE i Description. To, co umieściliśmy w ramach TITLE, zostanie wyświetlone jako tytuł znalezionej strony. Z kolei zawartość Description zostanie wyświetlona niżej, jako opis naszej strony. • Drugie polecenie informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość Keywords: globtur, podróż. Warto stosować wyrazy kluczowe, gdyż ułatwia to pracę sieciowym programom indeksująco-wyszukiwawczym i zwiększa szansę znalezienia strony przez innych użytkowników. To my właśnie decydujemy tutaj, jakie są istotne elementy strony. Jeśli nasza strona zawiera opis jakiegoś produktu, moglibyśmy podać wyrazy kluczowe "marmolada śliwkowa, przemysł, spółdzielnia Lepsze Jutro, żywność". Poszczególne wyrazy kluczowe są oddzielane przecinkami.
Najważniejszym elementem nagłówka jest tytuł strony, który ukazuje się w belce tytułowej przeglądarki (rys. 2): <title>Oficjalna strona biura podróży "GLOBTUR"</title>, (koniecznie go używaj!). Rys. 2. Widok belki tytułowej przeglądarki Internet Explorer
Microsoft Front Page Front Page jest narzędziem do tworzenia i zarządzania witrynami sieci Web, program Microsoft FrontPage 2000, udostępnia wszystko, czego potrzebujesz, aby utworzyći zarządzać witryną według swoich potrzeb, niezależnie czy będzie to osobista strona sieci Web, czy też korporacyjna witryna w sieci Internet. A ponieważ jest on podobny do innych aplikacji pakietu Microsoft Office, program FrontPage 2000 jest łatwy do nauczenia i wykorzystania. Rys. 3. Okno programu Microsoft Front Page
Okno Front Page przypomina okno Worda. Łatwo można wstawiać tekst, tabeli i obrazy. Kolor strony, tekstu i linków (odsyłaczy) oraz marginesy i wszystkie inne polecenia nagłówka definiujemy w oknie Properties... z menu File (rys. 4). Rys. 4. Okno Properties, zakładka General.W oknie Title wpisujemy tytuł strony
Rys. 5. Okno Properties, zakładka Background.W oknie tym ustawiamy kolor tła (background), tekstu (text),linków (hyperlink), odwiedzonych linków (visited hyperlink),aktywny link (active hyperlink)
Rys. 6. Okno Properties, zakładka Margins.W oknie tym możemy ustalić wielkość marginesów
Rys. 7. Okno Properties, zakładka Custom.W oknie tym możemy wpisać wcześniej opisane polecenia META
Rys. 8. Okno Properties, zakładka Language.W oknie tym ustalamy standard kodowania ISO 8859-2oraz język strony
Linki tworzymy w oknie Create Hyperlink wcześniej zaznaczając fragment tekstu lub rysunek. Rys. 9. Okno Create Hyperlink. Linki mogą odnosić się do istniejącej strony WWW, do podstrony lub też do adresu poczty internetowej. Służą do tego przyciski znajdujące się obok okienka URLZmieniając wartości Target frame definiujemy gdzie otworzy się link np. ustalając wartość Target... na New Window link otworzy się w nowym oknie
Tworząc niniejsze opracowanie wykorzystano kurs HTML-a autorstwa Pawła Wimmera dostępny w internecie pod adresem: • http://republika.pl/wimmer/html/ • z dnia 7 stycznia 2002 roku • Adresy internetowe pod którymi znaleźć można kursy HTML: • http://www.shtml.hg.pl/ • http://www.kurshtml.hg.pl/ • http://www.html-zone.prv.pl/ • http://cezim.fm.interia.pl/ • Zaglądając na stronę http://www.scrypty.com/ można darmowo pobrać gotowe skrypty stworzone w html, dhtm, java itp.
