docZestaw 3 ()
download 
Reklamacja Transkrypt
Zestaw 3 ()
Tworzenie stron WWW 1 Zajęcia stacjonarne. Podstawy HTML. Przygotowania : Na potrzeby dalszej pracy utworzyć na swoim komputerze (lub pendrivie) katalog WWW-ImieNazwisko . Wyszukać w zasobach kursu Przykłady pomoce: ZnacznikiHTML.pdf, MyFirstSite.html, MyWebPage.html oraz katalog obrazki z grafiką (wolna licencja). Przypomnienie materiału z sesji zdalnej Zadanie 1. (Wizytowka3.html) Za pomocą kED-a utworzyć w HTML-u prostą wizytówkę o nazwie Wizytowka3.html : 1. Imię i nazwisko: Krzysztof Leśniak 2. Hobby: literatura sf 3. Ulubione strony: • http://www.cut-the-knot.org • www.mat.uni.torun.pl/˜much 4. Materiały do pobrania: www.mat.uni.torun.pl/˜much/kursWWW/LaTeX-sklad.pdf (samouczek LaTeX-a) Zadanie 2. (Krój liter) Uzyskać w odpowiednich miejscach wizytówki efekt kursywy oraz pogrubienia stosując (osadzony w znaczniku <span>) styl CSS (jeśli były stosowane. Poprawić krój wybranego przez siebie fragmentu tekstu z domyślnego (typu Times New Roman) na inny np. taki jak Arial, czy Verdana. Podpowiedzi: <span style="font-style: italic;"> tekst italikiem </span> <span style="font-weight: bold;"> tekst wytłuszczony </span> <span style="font-family: Courier;"> tekst </span> Wzbogacenie podstaw o nowe możliwości Zadanie 3. (Kolor liter) Używając (osadzonego w znaczniku <span>) stylu CSS poprawić kolor napisu ”Hobby” na czerwony, a następnie na kolor o kodzie #800040 . Np. <span style="font-color: brown;">Hobby</span> Zadanie 4. (Początki list) Zmienić styl wypunktowania ulubionych stron (na inny znak graficzny). Zmienić styl numeracji z arabskiego na rzymski. Np. <ol style="list-style-type: lower-roman;"> kolejne punkty... </ol> Zadanie 5. (Obrazki) Wstawić plik graficzny w formacie .jpg (lub .png) . Ustawić rozmiar w jakim zostanie wyświetlony obraz oraz jego opis; poeksperymentować. Np. <img src="Obrazek07.jpg" width="130" alt="Nasz rodzimy agent" /> Zadanie 6. (Tło) (a) Ustawić tło strony w kolorze „ jasna kawa”. (b) Ustawić tło strony w postaci mozaiki z wybranym obrazkiem jako płytką. Np. <body style="background-color: silver;"> , <body style="background-image: url(’tlo01.jpg’);"> Zadanie 7. (Tabela) Na stronie Wizytowka3.html umieścić (i wystylizować) tabelę wyników podobną do poniższej: 2 Tworzenie stron WWW Prosiaczek Króliczki Lalki Miś Zajączek 5:6 3:1 za małe 2:2 3:4 <td style=" styl komórki kolor tła background-color: orange; border-color: gold; kolor obramówki grubość obramówki border-width: 5px; border-style: double; linia obramówki "> Zadanie 8. (Odnośniki) (a) Dodać na stronie Wizytowka3.html link do innej strony z tabelą o nazwie MyFirstSite.html . (b) Wstawić link w postaci obrazka. (c) Za pomocą stylu poprawić link obrazkowy tak, żeby nie było obramowania wokół grafiki. (d) Poprawić inne linki tak, aby nie były podkreślone. Np. <img src="pikazzor.png" style="border: 0; width: 90px;" /> , <a href="inna.html" style="text-decoration: none;"> Zadanie 9. (Walidacja i hosting) Sprawdzić poprawność strony za pomocą walidatora. Umieścić stworzoną stronę Wizytowka3.html na swoim koncie kno888 w katalogu public html oraz jej kopię pod nazwą index.html . Koniec. Cały katalog WWW-ImieNazwisko należy sobie zapisać na pendrive. Zadania specjalne Zadanie *. (Mapowanie obrazka) Wybrać jakiś obraz (zdjęcie, mapa geograficzna) i podzielić go na 3 aktywne obszary (lub więcej). Hiperłącza z różnych obszarów mają odsyłać użytkownika do różnych stron. Np. str1.htm str3.htm str2.htm budynek.jpg <img src="budynek.jpg" usemap="#plan" alt="Rozkład sal" /> <map name="plan"> <area shape="circle" coords="80,50,10" href="str3.htm" /> <area shape="rect" coords="85,55,150,100" href="str1.htm" /> <area shape="poly" coords="20,5,60,5,40,75,30,85,10,60,10,20" href="str2.htm" /> </map> Zadanie **. (Obsługa CGI) Opracować zestaw 2 (lub więcej) skryptów CGI obsługujących formularz. Za pomocą jednego skryptu serwer układa losowo test sprawdzający wiadomości (w postaci formularza), a drugi skrypt po opracowaniu nadesłanej odpowiedzi wysyła do klienta wynik testu. Powiedzmy, że przechowujemy w prostej bazie (zwykły podkatalog) pliki z pytaniami i odpowiedziami podzielone na 4 kategorie po 5 pytań (łącznie 20 pytań), a skrypt będzie z tego losował po 2 pytania w 4 kategoriach (łącznie 8 pytań). Otrzymujemy 10000 potencjalnych zestawów. Dodatkowo możemy zadbać o to, aby dane w niektórych pytaniach i proponowane odpowiedzi były w locie generowane przez serwer. Wtedy drugi skrypt, oprócz odesłania klientowi wyniku sprawdzianu, powinien udokumentować pytania z wylosowanymi danymi i prawidłowe odpowiedzi. Zadanie domowe Przygotować stronę Odnosniki.html z zestawem linków do 5 stron dydaktycznych. Utworzyć odsyłacz ze strony Odnosniki.html do strony głównej (index.html lub Wizytowka3.html ) i na odwrót. Nową podstronę podłączyć w public html . much, 27-28 viii, 14 vi 2007
