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 o: http://www.w3.org/, http://www.w3schools.com/, http://www.kurshtml.edu.pl 1
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" " http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 t r a n s i t i o n a l. dtd " > <html xmlns=" http : / /www. w3. org /1999/ xhtml" xml : lang=" pl " lang=" pl "> <head> <meta http equiv="content Type" content=" t e x t /html ; c h a r s e t=i s o 8859 2" /> <meta name=" D e s c r i p t i o n " content="tu wpisz o p i s z a w a r t o ± c i strony " /> <meta name="keywords" content="tu wpisz wyrazy kluczowe r o z d z i e l o n e przecinkami " /> <t i t l e>tu wpisz t y t u ª strony</ t i t l e> </head> <body> Tu wpisz t r e ± strony... </html> Znaczniki <body>... oraz <meta /> 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 <body> - zaraz po nagªówku strony (<head>...</head>). 2
Natomiast znacznik <meta /> 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 <meta /> - ka»dy dotyczy innej wiadomo±ci - wszystkie powinny znajdowa si wewn trz nagªówka strony (<head>...</head>). 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.: <b>. 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 mniejszo±ci) oraz ">" (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.: <b>) oraz zamykaj ce (np.: </b>). 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.: <b>ten t e k s t z o s t a n i e pogrubiony.</b> 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
<b>...</b> t e k s t pogrubiony <i>...</ i> t e k s t pochylony <u>...</u> t e k s t podkre±lony <br/> znak ko«ca l i n i i <p>...</p> akapit <font s i z e="n">...</ font> w i e l k o ± c z c i o n k i <p align=" l e f t ">...</p> lub <p>...</p> & wyrównanie do l e w e j ( domy±lnie ) <p align=" r i g h t ">...</p> wyrównanie do prawej <p align=" c e n t e r ">...</p> wy±rodkowanie <p align=" j u s t i f y ">...</p> justowanie <em>...</em> wyró»nienie dowolnego t e k s t u ( tzw. emfaza ) <strong>...</ strong> wyró»nienie dowolnego t e k s t u Poni»ej zamieszczono przykªadowe wykorzystanie wybranych znaczników: <p><b>this t e x t i s bold</b></p> <p><strong>this t e x t i s strong</ strong></p> <p><i>this t e x t i s i t a l i c</ i></p> <p><em>this t e x t i s emphasized</em></p> <p><code>this i s computer output</ code></p> <p>this i s<sub> s u b s c r i p t</sub> and <sup>s u p e r s c r i p t</sup></p> <p>do not f o r g e t t o buy <mark>milk</mark> today.</ p> <p>this t e x t c o n t a i n s <sub>s u b s c r i p t</sub> t e x t.</p> <p>my f a v o r i t e c o l o r i s <del>blue</ del> <ins>red</ ins>!</p> <p>the <abbr t i t l e="world Health Organization ">WHO</ abbr> was founded in 1948.</p> 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
<a href=" wzgl dna ± c i e» k a dost pu ">o p i s</ a> g d z i e jako " wzgl dna ± c i e» k a dost pu " nale»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 p r z e n i e ±. W m i e j s c e wyrazu " o p i s " wpisywany j e s t k r ó t k i tekst, który pojawi s i na e k r a n i e i po k l i k n i c i u którego n a s t p i uruchomienie odsyªacza ( ± c i e» k a dost pu pojawia s i j e d y n i e na pasku s t a t u s u p r z e g l d a r k i ). 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. <a href=" http : / / adres strony ">o p i s</ a> W m i e j s c e " adres strony " nale»y poda peªny adres internetowy strony, do k t ó r e j chcemy s i p r z e n i e ± ( np. : www. onet. pl ). Adres strony i n t e r n e t o w e j zawsze musi rozpoczyna 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. <a href=" mailto : adres e mail ">o p i s</a> g d z i e jako " adres e mail " nale»y poda adres poczty 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 href="... "> a </a>) \\ w miejscu "a" mo»na umieszcza równie» inne z n a c z n i k i m. in. odpowiadaj ce za zmian wygl du t e k s t u ( pogrubienie, p o c h y l e n i e i t d. ), czy t e» wstawienie obrazka. 5
Podstawowy odsyªacz obrazkowy: <a href=" adres "><img src=" ± c i e» k a dost pu do obrazka " a l t=" t e k s t alternatywny " /></a> g d z i e jako " ± c i e» k a dost pu " nale»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 obrazek. 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 <table>...</table> jest znacznikiem tabeli, <tr>...</tr> jest znacznikiem wiersza a <td>...</td> 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 <td>...</td>) lub wierszy (znaczniki <tr>...</tr>). Nale»y przy tym zauwa»y,»e komórki tabeli (<td>...</td>) znajduj si wewn trz znacznków wierszy (<tr>...</tr>). Liczba komórek w ka»dym wierszu powinna by taka sama. <table> <tr> </ tr> <tr> </ tr> </ table> <td>komórka1</ td> <td>komórka3</ td> <td>komórka2</ td> <td>komórka4</ td> Dodatkowe formatowanie wykonywane jest z wprowadzeniem dodatkowych atrybutów znaczników: <table border="x">...</ table> & g d z i e "x" oznacza grubo± zewn trznej ramki t a b e l i (w p i k s e l a c h ), <table border="1" cellpadding="x">...</ table> & g d z i e "x" oznacza s z e r o k o ± marginesu (w p i k s e l a c h ), <table align=" r o d z a j ">...</ table> & g d z i e jako " r o d z a j " nale»y wpisa : " l e f t " wyrównanie t a b e l i do l e w e j strony wzgl dem o t a c z a j c e g o tekstu, " r i g h t " wyrównanie t a b e l i do prawej strony wzgl dem o t a c z a j c e g o t e k s t u lub " 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
Podziaª na sekcje realizowany jest równie» przez u»ycie znaczników <div>...</div>, 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> <html> <body> <p>tu mo»esz wpisa j a k i ± t e k s t przed s e k c j.</p> <div style=" c o l o r :#0000FF"> <h3>to j e s t nagªówek s e k c j i.</h3> <p>tu mo»esz wpisa wªasny t e k s t w s e k c j i.</p> </ div> <p>tu mo»esz wpisa j a k i ± t e k s t po s e k c j i.</p> </html> 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). <body bgcolor=" k o l o r t ª a " text=" k o l o r t e k s t u "> Tu j e s t wªa±ciwa t r e ± strony np. <body bgcolor="#e6e6fa">tu j e s t wªa±ciwa t r e ± strony 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. <body background=" ± c i e» k a dost pu do obrazka ">... lub <body background=" ± c i e» k a dost pu do obrazka " b g p r o p e r t i e s=" f i x e d ">... ( 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 jako " ± c i e» k a dost pu do obrazka " nale»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, który 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
6.2 Obrazy W celu wstawienia na stron WWW obrazka mo»na skorzysta z nast puj - cego kodu: <img src=" ± c i e» k a dost pu " a l t=" Tekst alternatywny " /> g d z i e jako " ± c i e» k a dost pu " nale»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 obrazek. Natomiast w m i e j s c e " Tekst alternatywny " wpisuje s i krótk informacj, która pojawi s i w przypadku, kiedy obrazek n i e z o s t a n i e wy±wietlony ( np. j e ± l i u»ytkownik wyª czy w y ± w i e t l a n i e g r a f i k i w s w o j e j p r z e g l d a r c e i n t e r n e t o w e j ). Bardzo cz sto zachodzi konieczno± modykacji rozmiarów obrazka. Mo»- na to uczyni stosuj c poni»szy kod: O okre±lonych rozmiarach : <img src=" ± c i e» k a dost pu " height=" y" /> lub <img src=" ± c i e» k a dost pu " height="y%"/> a l t=" Tekst alternatywny " width="x" a l t=" Tekst alternatywny " width="x%" g d z i e jako "x" oraz "y" nale»y wpisa odpowiednio : dªugo± i wysoko± obrazka w p i k s e l a c h. Natomiast jako "x%" oraz "y%" nale»y wpisa odpowiednio : dªugo± i wysoko± obrazka w procentach 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 <embed> np.: <embed src=" c i r c l e. svg " type="image/ svg+xml" /> z wykorzystaniem tag-u <object> <object data=" c i r c l e. svg " type="image/ svg+xml"></ object> z wykorzystaniem tag-u <iframe> <iframe src=" c i r c l e. svg "></ iframe> 8
bezpo±rednio z kodu HTML. Przykªadowa implementacja tworz ca koªo o promieniu 40, na pozycji x=100 oraz y=50: <html> <body> <svg xmlns=" http : / /www. w3. org /2000/ svg " v e r s i o n=" 1. 1 "> < c i r c l e cx="100 " cy="50" r="40" s t r o k e=" black " stroke width="2" f i l l =" red "/> </ svg> </html> 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 <rect> Circle <circle> Ellipse <ellipse> Line <line> Polyline <polyline> Polygon <polygon> Path <path> Przykªad naªo»enia na siebie trzech okr gów eliptycznych: <svg xmlns=" http : / /www. w3. org /2000/ svg " v e r s i o n=" 1. 1 "> < e l l i p s e cx="240 " cy="100 " rx="220 " ry="30" style=" f i l l : purple " /> < e l l i p s e cx="220 " cy="70" rx="190 " ry="20" style=" f i l l : lime "/> < e l l i p s e cx="210 " cy="45" rx="170 " ry="15" style=" f i l l : yellow "/ > </ svg> Mo»liwe jest równie» wykorzystywanie znacznika <text> do modykacji (np. obrotów, dostosowania do ±cie»ek) napisów: <!DOCTYPE html> <html> <body> <svg xmlns=" http : / /www. w3. org /2000/ svg " v e r s i o n=" 1. 1 "> <text x="0" y="15" f i l l =" red " transform=" r o t a t e (30 20,40) ">I l o v e SVG</ text> </ svg> </html> 9
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> <html> <body> <svg xmlns=" http : / /www. w3. org /2000/ svg " v e r s i o n=" 1. 1 "> <d e f s> <l i n e a r G r a d i e n t id=" grad1 " x1="0%" y1="0%" x2="100%" y2="0%"> <stop o f f s e t="0%" style=" stop c o l o r : rgb ( 2 5 5, 2 5 5, 0 ) ; stop o p a c i t y : 1 " /> <stop o f f s e t="100%" style=" stop c o l o r : rgb ( 2 5 5, 0, 0 ) ; stop o p a c i t y : 1 " /> </ l i n e a r G r a d i e n t> </ d e f s> < e l l i p s e cx="200 " cy="70" rx="85" ry="55" f i l l =" u r l (#grad1 ) " /> <text f i l l ="# f f f f f f " font s i z e="45" font f a m i l y="verdana" x=" 150 " y=" 86">SVG</ text> </ svg> </html> 10
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