Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

Podstawy HTML

1

1 HTML HTML - inaczej hipertekstowy j¦zyk znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych. Pozwala on opisa¢ struktur¦ informacji zawartych wewn¡trz strony internetowej, nadaj¡c znaczenie poszczególnym fragmentom tekstu np.: formuj¡c hiperª¡cza, akapity, nagªówki, listy, tabele. Pozwala równie» na osadzane w tek±cie dokumentu obiektów plikowych. HTML umo»liwia okre±lenie wygl¡du dokumentu w przegl¡darce internetowej. Do szczegóªowego opisu formatowania akapitów, nagªówków, u»ytych czcionek i kolorów, zalecane jest wykorzystywanie kaskadowych arkuszy stylów (w skrócie CSS).

2 Publikowanie HTML-a za pomoc¡ HTTP Istotn¡ cech¡ HTML-u, która przyczyniªa si¦ do popularno±ci systemu WWW oraz Internetu, jest niezale»no±¢ od systemu operacyjnego i wykorzystywanego sprz¦tu komputerowego. Sie¢ WWW skªada si¦ gªównie z dokumentów HTML przekazywanych z serwerów WWW do przegl¡darek internetowych za pomoc¡ protokoªu HTTP. Aby umo»liwi¢ przegl¡darce rozpoznanie pliku jako dokumentu HTML, musi by¢ on specjalnie oznaczony. Sªu»¡ do tego metadane oraz standard kodowania znaków. Celem przegl¡darki internetowej (jak np. Google Chrome, Internet Explorer, Firefox, Safari) jest odczytanie (przetªumaczenie) dokumentu HTML i wy±wietlenie jego zawarto±ci. Przegl¡darka nie wy±wietla znaczników HTML, ale wykorzystuje tagi do okre±lenia jak zawarto±¢ strony powinna wygl¡da¢ i w jaki sposób zosta¢ wy±wietlona u»ytkownikowi.

3 Tworzenie dokumentu HTML Najpopularniejszym rozszerzeniem plików zawieraj¡cych kod HTML jest plik.html oraz plik.htm. Obie formy rozszerze« s¡ obsªugiwane przez wi¦kszo±¢ przegl¡darek. Dokumenty HTML mo»na tworzy¢ i edytowa¢ mi¦dzy innymi za pomoc¡ prostych edytorów tekstowych np. Emacs, vim, Notatnik lub te» mo»na wykorzystywa¢, specjalnie do tego przystosowany edytor HTML. Strony HTML-a mo»na tworzy¢ na wiele sposobów. Obecnie wi¦kszo±¢ stron HTML jest tworzona dynamicznie przez skrypty w ró»nych j¦zykach programowania (PHP, Perl, Java, ASP) i wiele innych. Jakkolwiek, dla nauki HTML, polecana jest najprostsza forma tworzenia pliku HTML czyli z wykorzystaniem prostego narz¦dzia Notatnik. Algorytm post¦powania zamyka si¦ w kilku podstawowych krokach: 1 Materiaª

w oparciu http://www.kurshtml.edu.pl

o:

http://www.w3.org/,

1

http://www.w3schools.com/,

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

1. aby go uruchomi¢ (w ±rodowisku Windows) nale»y wybra¢ Menu Start -> Programy -> Akcesoria -> Notatnik, 2. nale»y umie±ci¢ kod w notatniku, 3. zapisa¢ plik z wybraniem opcji: Zapisz jako w Menu Plik (nada¢ plikowi rozszerzenie .html (lub .htm)), 4. uruchomi¢ stworzony plik HTML w przegl¡darce internetowej, mo»na uczyni¢ to na kilka sposobów: (a) klikn¡¢ prawym przyciskiem na stworzony plik i wybra¢ opcj¦ "Otwórz za pomoc¡" -> wybra¢ przegl¡dark¦ internetow¡, (b) wybra¢ w opcjach przegl¡darki (je±li s¡ dost¦pne) -> Menu -> Otwórz -> wybra¢ zapisany plik, (c) wpisa¢ w okienku paska przegl¡darki adresu pliku na dysku, np: C:/Users/LocalA/Desktop/helloWorld.html

4 HTML budowa dokumentu Poni»szy kod obrazuje przykªad strony WWW w HTML-u z ustawieniem j¦zyka polskiego. Jest to przykªadowa prezentacja ram ka»dego dokumentu w formacie HTML (istniej¡ równie» inne podobne szablony): < !DOCTYPE html PUBLIC " −//W3C//DTD XHTML 1 . 0 T r a n s i t i o n a l //EN" " h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1 − t r a n s i t i o n a l . dtd " > < t i t l e >Tu w p i s z t y t u ª s t r o n y Tu w p i s z t r e ± ¢ s t r o n y . . .

Znaczniki ... oraz okre±laj¡ pewne informacje na temat strony jako caªo±ci. Polecenie BODY powinno wchodzi¢ w skªad ka»dego dokumentu HTML. Stanowi ono wªa±ciw¡ tre±¢, czyli tzw. ciaªo, w którym zawieraj¡ si¦ wszystkie inne znaczniki, dotycz¡ce formatowania, a tak»e zwykªy tekst. W jednym dokumencie pownien znajdowa¢ si¦ tylko jeden znacznik - zaraz po nagªówku strony (...).

2

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

Natomiast znacznik stanowi tzw. metainformacj¦, pozwalaj¡c¡ okre±li¢ pewne ogólne wiadomo±ci, dotycz¡ce dokumentu, m.in. sposób kodowania znaków, opis zawarto±ci strony, jej Autora czy j¦zyk, w którym zostaªa napisana. Metainformacje nie wpªywaj¡ bezpo±rednio na wygl¡d dokumentu, lecz cechy które podaj¡, s¡ równie istotne. Pomimo i», nie s¡ one wymagane, warto je stosowa¢, poniewa» mo»e to np. pomóc w odszukaniu strony przez wyszukiwarki sieciowe. Ka»dy dokument powinien zawiera¢ obowi¡zkowo przynajmniej deklaracj¦ strony kodowej, bez której polskie litery na stronie mog¡ zosta¢ bª¦dnie wy±wietlone. W pojedynczym dokumencie znajduje si¦ zwykle kilka znaczników - ka»dy dotyczy innej wiadomo±ci - wszystkie powinny znajdowa¢ si¦ wewn¡trz nagªówka strony (...).

5 Elementy j¦zyka HTML 5.1

Znaczniki

Poza zwykªym tekstem, na stronie umieszczane s¡ znaczniki (tzw. tagi). Znacznik jest to specjalny tekst, umieszczony w nawiasach ostrych, np.: . Jest on cz¦±ci¡ skªadni j¦zyka HTML i pozwala sterowa¢ wygl¡dem strony. Dzi¦ki niemu mo»na np. ustali¢ kolor tªa, rodzaj formatowania tekstu, wstawi¢ obrazek czy tabel¦ itd. Znacznik nie jest widoczny na ekranie, widoczne s¡ tylko efekty jego dziaªania (np. wstawienie obrazka). Poniewa» znaki: "" (znak wi¦kszo±ci) s¡ zarezerwowane dla znaczników, nie powinny si¦ one pojawi¢ w normalnej tre±ci strony. Je»eli istnieje potrzeba ich u»ycia, nale»y wpisywa¢ zamiast nich odpowiednio: "<"; oraz ">";. Ponadto znak "&" (ampersand - angielskie "and") nale»y zast¦powa¢ przez: "&"; Istniej¡ znaczniki otwieraj¡ce (np.: ) oraz zamykaj¡ce (np.: ). Nale»y zauwa»y¢, »e znacznik zamykaj¡cy rozpoczyna si¦ uko±nikiem (czyli znakiem: "/") i ma tak¡ sam¡ nazw¦ jak otwieraj¡cy. Pomi¦dzy znacznikami otwieraj¡cym i zamykaj¡cym mo»e znale¹¢ si¦ jaki± tekst, który mo»na np. podda¢ formatowaniu (w tym przypadku b¦dzie to wytªuszczenie tekstu), np.: Ten t e k s t z o s t a n i e pogrubiony .

5.2

Tekst

Korzystanie ze znaczników umo»liwia np. formatowanie tekstu oraz podstawowe operacje na tek±cie. Przykªadowe implementacje umieszczone zostaªy poni»ej:

3

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

. . . t e k s t pogrubiony < i> . . . t e k s t pochylony . . . t e k s t p o d k r e ± l o n y
znak ko«ca l i n i i . . . a k a p i t . . . w i e l k o ± ¢ c z c i o n k i . . . l u b . . . & wyrównanie do l e w e j ( domy±lnie ) . . . wyrównanie do prawej . . . wy±rodkowanie . . . j u s t o w a n i e . . . w y r ó » n i e n i e dowolnego t e k s t u ( tzw . emfaza ) . . . w y r ó » n i e n i e dowolnego t e k s t u

Poni»ej zamieszczono przykªadowe wykorzystanie wybranych znaczników: This t e x t i s b o l d This t e x t i s s t r o n g < i>This t e x t i s i t a l i c This t e x t i s emphasized This i s computer output This i s s u b s c r i p t and s u p e r s c r i p t Do not f o r g e t t o buy milk today . This t e x t c o n t a i n s s u b s c r i p t t e x t . My f a v o r i t e c o l o r i s b l u e < ins>r e d ! The WHO was founded i n 1 9 4 8 .

5.3

Odsyªacze

Odsyªacze, czyli inaczej okre±lane hiperª¡cza, odno±niki hipertekstowe, linki - stanowi¡ istot¦ Internetu. Bez nich byªby on jedynie wielk¡ sieci¡ do pobierania "suchych" danych, a dokumenty znajduj¡ce si¦ w niej, nie byªyby w »aden sposób ze sob¡ powi¡zane. Praktycznie na ka»dej stronie WWW spotykane s¡ odsyªacze. Najcz¦±ciej stanowi je specjalnie wyró»niony krótki tekst (lub obrazek), po klikni¦ciu którego, nast¦puje przeniesienie do innej strony. Przy czym strona taka mo»e wchodzi¢ w skªad tego samego serwisu, ale równie dobrze mo»e znajdowa¢ si¦ na drugim ko«cu ±wiata. Przegl¡darki internetowe wy±wietlaj¡ odsyªacze najcz¦±ciej w innym kolorze oraz podkre±laj¡ je - w ten sposób s¡ one lepiej widoczne i odró»niaj¡ si¦ od zwykªego tekstu. 5.3.1

Odsyªacze do podstrony

Tak jak ka»da ksi¡»ka skªada si¦ z rozdziaªów, tak samo serwisy internetowe skªadaj¡ si¦ zwykle z podstron. Ka»da podstrona jest osobnym plikiem HTML i zawiera tre±¢, która do±¢ znacznie ró»ni si¦ tematycznie od pozostaªych. Taka organizacja uªatwia u»ytkownikowi nawigacj¦ oraz zapobiega niepotrzebnemu wczytywaniu caªego serwisu od razu (co trwaªoby prawdopodobnie bardzo dªugo). 4

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

o p i s g d z i e j a k o " wzgl¦dna ± c i e » k a d o s t ¦ p u " n a l e » y poda¢ l o k a l i z a c j ¦ na dysku , g d z i e z n a j d u j e s i ¦ podstrona , do k t ó r e j chcemy s i ¦ przenie±¢ . W m i e j s c e wyrazu " o p i s " wpisywany j e s t k r ó t k i t e k s t , k t ó r y p o j a w i s i ¦ na e k r a n i e i po k l i k n i ¦ c i u k t ó r e g o n a s t ¡ p i u r u c h o m i e n i e o d s y ª a c z a ( ± c i e » k a d o s t ¦ p u p o j a w i a s i ¦ j e d y n i e na pasku statusu przegl¡darki ) .

5.3.2

Odsyªacz do innego adresu internetowego

Odsyªacz taki jest przydatny, je±li jest potrzeba umie±ci¢ w swoim serwisie tzw. linki do dowolnych stron w obr¦bie caªego Internetu. Adres »¡danej strony mo»na skopiowa¢ (z paska adresu przegl¡darki) i umie±ci¢ w odsyªaczu. Dzi¦ki temu wszyscy u»ytkownicy odwiedzaj¡cy witryn¦, b¦d¡ mogli przenie±¢ si¦ bezpo±rednio do wskazanej strony, bez potrzeby wpisywania jej adresu. o p i s

W m i e j s c e " a d r e s s t r o n y " n a l e » y poda¢ peªny a d r e s i n t e r n e t o w y s t r o n y , do k t ó r e j chcemy s i ¦ p r z e n i e ± ¢ ( np . : www. o n e t . p l ) . Adres s t r o n y i n t e r n e t o w e j zawsze musi r o z p o c z y n a ¢ s i ¦ od " http :// "

5.3.3

Odsyªacz pocztowy (e-mail)

Dzi¦ki temu odsyªaczowi, u»ytkownicy ogl¡daj¡cy stron¦, b¦d¡ mogli wysªa¢ list e-mail pod adres podany w poleceniu. Po klikni¦ciu takiego odno±nika, list nie zostanie wysªany natychmiastowo, lecz nast¡pi otwarcie domy±lnego programu pocztowego u»ytkownika (np. Outlook Express), w którym b¦dzie on mógª wpisa¢ tre±¢ listu, a potem go wysªa¢ do wskazanego adresata, którego e-mail pojawi si¦ automatycznie. Wykorzystanie tej funkcjonalno±ci przyczyni si¦ do bycia w staªym kontakcie z u»ytkownikami odwiedzaj¡cymi serwis. o p i s g d z i e j a k o " a d r e s e−m a i l " n a l e » y poda¢ a d r e s p o c z t y e l e k t r o n i c z n e j osoby , do k t ó r e j ma z o s t a ¢ wysªany l i s t ( np . : jan_kowalski@example . com ) .

5.3.4

Odsyªacz obrazkowy

Na wi¦kszo±ci stron internetowych mo»na spotka¢ "aktywne" obrazki, symuluj¡ce przyciski. Po klikni¦ciu, zachowuj¡ si¦ one jak zwykªy odsyªacz (w istocie s¡ one odsyªaczami). a ) \\ w m i e j s c u " a " mo»na u m i e s z c z a ¢ r ó w n i e » i n n e z n a c z n i k i − m. i n . o d p o w i a d a j ¡ c e za zmian¦ wygl¡du t e k s t u ( p o g r u b i e n i e , p o c h y l e n i e i t d . ) , czy t e » w s t a w i e n i e obrazka .

5

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

Podstawowy odsyªacz obrazkowy: g d z i e j a k o " ± c i e » k a d o s t ¦ p u " n a l e » y poda¢ l o k a l i z a c j ¦ na dysku , g d z i e z n a j d u j e s i ¦ »¡dany o b r a z e k .

5.4

Tabele

Bardzo cz¦sto istnieje potrzeba umieszczania danych na stronie WWW w tabeli. J¦zyk HTML posiada znacznik, który umo»liwia personalizacj¦ (formatowanie) tabeli. Tag ... jest znacznikiem tabeli, ... jest znacznikiem wiersza a ... jest znacznikiem pojedynczej komórki. W miejsce kropek nale»y wpisa¢ tre±¢ poszczególnych komórek tabeli. Mo»liwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników ...) lub wierszy (znaczniki ...). Nale»y przy tym zauwa»y¢, »e komórki tabeli (...) znajduj¡ si¦ wewn¡trz znacznków wierszy (...). Liczba komórek w ka»dym wierszu powinna by¢ taka sama. < tr>

komórka1

komórka2

komórka3

komórka4

< tr>

Dodatkowe formatowanie wykonywane jest z wprowadzeniem dodatkowych atrybutów znaczników: . . . & g d z i e "x" o z n a c z a g r u b o ± ¢ z e w n ¦ t r z n e j ramki t a b e l i (w p i k s e l a c h ) , . . . & g d z i e "x" o z n a c z a s z e r o k o ± ¢ marginesu (w p i k s e l a c h ) , . . . & g d z i e j a k o " r o d z a j " n a l e » y w p i s a ¢ : " l e f t " − wyrównanie t a b e l i do l e w e j s t r o n y wzgl¦dem o t a c z a j ¡ c e g o t e k s t u , " r i g h t " − wyrównanie t a b e l i do prawej s t r o n y wzgl¦dem o t a c z a j ¡ c e g o t e k s t u l u b " c e n t e r " − wy±rodkowanie t a b e l i .

5.4.1

Zagnie»d»anie tabel

Dzi¦ki konstrukcji zagnie»d»ania tabel, mo»liwe jest zbudowanie wielu tabel "jedna w drugiej". Tabele wewn¦trzne znajduj¡ si¦ w komórkach tabeli zewn¦trznej. Praktycznym wykorzystaniem takich tabel, jest stworzenie wªasnego ukªadu strony. Ka»da komórka w takim przypadku b¦dzie odpowiada¢ innej sekcji strony.

6

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

Podziaª na sekcje realizowany jest równie» przez u»ycie znaczników ..., których celem jest odseprowanie fragmentu kodu w celu innego go formatowania. Poni»szy przykªad prezentuje podstawowe mo»liwo±ci podziaªu na sekcje (tzw. "div-y"). < !DOCTYPE html> Tu mo»esz w p i s a ¢ j a k i ± t e k s t p r z e d s e k c j ¡ . To j e s t nagªówek s e k c j i . Tu mo»esz w p i s a ¢ wªasny t e k s t w s e k c j i . Tu mo»esz w p i s a ¢ j a k i ± t e k s t po s e k c j i .

6 Graka 6.1

Tªo strony

W celu nadania koloru stronie internetowej mo»na wykorzysta¢ poni»szy kod. Kolory zwykle podawane s¡ w zapisie heksadecymalnym, gdzie ka»de dwie cyfry oznaczaj¡ nasycenie ka»dej z barw (RGB). Tu j e s t w ª a ± c i w a t r e ± ¢ s t r o n y np . Tu j e s t w ª a ± c i w a t r e ± ¢ s t r o n y

6.1.1

Tªo obrazkowe

Mo»na umie±ci¢ w tle strony dowolny obrazek. Drugie z poni»szych polece« pozwala zdeniowa¢ tªo obrazkowe, które jest nieruchome, tzn. nie przesuwa si¦ wraz z tekstem, gdy przewijamy zawarto±¢ okna. . . . lub . . . ( t ª o nieruchome − znak wodny − n i e o b s ª u g u j e F i r e f o x ! ) g d z i e j a k o " ± c i e » k a d o s t ¦ p u do obrazka " n a l e » y poda¢ l o k a l i z a c j ¦ , g d z i e z n a j d u j e s i ¦ obrazek , k t ó r y chcemy u m i e ± c i ¢ w t l e .

Nale»y jednak pami¦ta¢, i» graka o du»ych rozmiarach spowalnia wczytywanie strony. Dlatego je±li istnieje konieczno±¢, poleca si¦ si¦ u»ywa¢ pliki (np. w formacie *.jpg (dla zdj¦¢ wielokolorowych) lub *.gif (dla rysunków)) skompresowane, zajmuj¡ce du»o mniej miejsca ni» zwykªe mapy bitowe *.bmp. Trzeba równie» pami¦ta¢, aby obrazek w tle nie byª zbyt jaskrawy - spowoduje to tylko zaciemnienie zawarto±ci strony i utrudni czytanie. 7

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014 6.2

copyright: KGiIS WGGiO± AGH

Obrazy

W celu wstawienia na stron¦ WWW obrazka mo»na skorzysta¢ z nast¦puj¡cego kodu: g d z i e j a k o " ± c i e » k a d o s t ¦ p u " n a l e » y poda¢ l o k a l i z a c j ¦ na dysku , g d z i e z n a j d u j e s i ¦ »¡dany o b r a z e k . Natomiast w m i e j s c e " Tekst a l t e r n a t y w n y " w p i s u j e s i ¦ k r ó t k ¡ i n f o r m a c j ¦ , k t ó r a p o j a w i s i ¦ w przypadku , k i e d y o b r a z e k n i e z o s t a n i e w y ± w i e t l o n y ( np . j e ± l i u»ytkownik wyª¡czy wy±wietlanie g r a f i k i w swojej przegl¡darce internetowej ) .

Bardzo cz¦sto zachodzi konieczno±¢ modykacji rozmiarów obrazka. Mo»na to uczyni¢ stosuj¡c poni»szy kod: O okre±lonych rozmiarach : lub g d z i e j a k o "x" o r a z "y" n a l e » y w p i s a ¢ odpowiednio : d ª u g o ± ¢ i wysoko±¢ obrazka w p i k s e l a c h . Natomiast j a k o "x%" o r a z "y%" n a l e » y w p i s a ¢ odpowiednio : d ª u g o ± ¢ i wysoko±¢ obrazka w p r o c e n t a c h ekranu .

6.3

SVG

SVG (ang. Scalable Vector Graphics) jest to uniwersalny format dwuwymiarowej graki wektorowej, nieobwarowany licencjami i patentami. Format SVG powstaª z my±l¡ o zastosowaniu na stronach WWW. U»ywany jest równie» jako niezale»ny od platformy systemowej format graki wektorowej. SVG nale»y do rodziny j¦zyków XML, wi¦c mo»e by¢ integrowany z innymi j¦zykami, jak na przykªad HTML. Istnieje kilka mo»liwo±ci osadzania graki w formacie svg na stron¦ www:  z wykorzystaniem tag-u np.:

 z wykorzystaniem tag-u

 z wykorzystaniem tag-u

8

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

 bezpo±rednio z kodu HTML. Przykªadowa implementacja tworz¡ca koªo o promieniu 40, na pozycji x=100 oraz y=50: < c i r c l e cx=" 100 " cy=" 50 " r=" 40 " s t r o k e=" b l a c k " s t r o k e −width="2 " f i l l =" r e d " />

SVG posiada kilka zdeniownych ksztaªtów, które mog¡ by¢ wykorzystywane przez programist¦ do tworzenia bardziej skomplikowanych grak (przesuwania, rotacji, nakªadania na siebie) - s¡ to np.:  Rectangle  Circle  Ellipse  Line  Polyline  Polygon  Path Przykªad naªo»enia na siebie trzech okr¦gów eliptycznych: < e l l i p s e cx=" 240 " cy=" 100 " rx=" 220 " ry=" 30 " /> < e l l i p s e cx=" 220 " cy=" 70 " rx=" 190 " ry=" 20 " /> < e l l i p s e cx=" 210 " cy=" 45 " rx=" 170 " ry=" 15 " / >

Mo»liwe jest równie» wykorzystywanie znacznika do modykacji (np. obrotów, dostosowania do ±cie»ek) napisów: < !DOCTYPE html> I l o v e SVG

9

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

SVG w HTML oferuje równie» mo»liwo±¢ tworzenia wypeªnie« gradientowych - np radialnych lub liniowych. Ich wykorzystanie obrazuje poni»szy przykªad: < !DOCTYPE html> < e l l i p s e cx=" 200 " cy=" 70 " rx=" 85 " ry=" 55 " f i l l =" u r l (#grad1 ) " /> SVG

10

Techniki Informatyczne Ir In»ynieria ‘rodowiska 2013/2014

copyright: KGiIS WGGiO± AGH

7 Zadania 1. Prosz¦ przygotowa¢ autorsk¡ stron¦ internetow¡ dotycz¡c¡ wybranej tematyki. Strona powinna zawiera¢ min. 3 odno±niki do podstron (np. dot. zainteresowa«) oraz innych stron w Internecie (odno±niki tekstowe i obrazkowe) oraz odno±niki do pliku na dysku (do pobrania przez Odwiedzaj¡cego). Dodatkowo strona powinna zawiera¢ odpowiednio dobrane graki i tabele. Prosz¦ wykona¢ zakªadk¦ "Kontakt", gdzie umieszczone zostan¡ dane kontaktowe Autora (z odno±nikiem e-mail). Prosz¦ pami¦ta¢, i» strona internetowa jest wizytówk¡ Autora. Stron¦ prosz¦ umie±ci¢ na uczelnianym serwerze "AGH-Geolog". W tym celu nale»y:  uruchomi¢ program WinSCP, zalogowa¢ si¦: w polu "Hostname" wpisa¢: geolog.geol.agh.edu.pl, w polu "Username" poda¢ nazw¦ u»ytkownika np. s123456 (sNumerIndeksu), "Password": hasªo do konta, "PortNumber": 22,  po zalogowaniu: umie±ci¢ w folderze "www" plik gªównej strony internetowej - "index.html" (istotna jest tu konwencja nazew - sªowo index.html tªumaczone jest przez serwer jako domy±lna strona startowa), pliki innych podstron (np. kontakt.html) oraz inne elementy wykorzystywane do stworzenia strony (graki itp.),  wej±¢ na stron¦: www.geol.agh.edu.pl/~s123456 -> (sNumerIndeksu) strona gªówna powinna wy±wietli¢ si¦ automatycznie. 2. Prosz¦ stworzy¢ podstron¦ o nazwie "SVG" i umie±ci¢ na niej wyrysowane:  logo igrzysk olimpijskich z zachowaniem kolorów i ksztaªtu,  kostk¦ sze±cienn¡ wyrysowan¡ liniami w kolorach: linie pod k¡tem prostym (w ukªadzie x,y) - kolorem czerwonym a pozostaªe (wzdªu» osi z) kolorem zielonym. 3. Prosz¦ stworzy¢ podstron¦ o nazwie "ZALUDNIENIE" i umie±ci¢ na niej map¦ Polski oraz poda¢ w tabeli liczb¦ ludno±¢i wybranych najwi¦kszych miast Polski - z podziaªem na województwo i powiat (min. dwa miasta na województwo). Zamie±ci¢ tam równie» informacj¦ o liczbie ludno±ci przypadaj¡cej na 1 kilometr kwadratowy powierzchni wybranych dwóch miast Polski (jednostk¦ opisa¢ z u»yciem indeksu górnego). Caªo±¢ powinna zosta¢ wykonana estetycznie i schludnie.

11