Prezentacja wyników ankiety on-line w postaci HTML

Powrót do: Teaching -> Informatyka. Edukacja informatyczna

Ćwiczenia

1. Przygotowanie, narzędzia, materiały

W ćwiczeniach proszę wykorzystać program Notepad 2 (najpierw sprawdzić czy jest na komputerze, jeśli nie proszę znaleźć aplikację tutaj: http://sourceforge.net/ np. tu: http://sourceforge.net/projects/notepad2/?source=directory) oraz raport dotyczący Państwa ankiety on-line.

Proszę pobrać materiały: tutaj oraz tutaj (css) i zapisać na dysku z zachowaniem struktury katalogów. W paczce .zip znajdują się: pliki index.html oraz wykresy_imie.html, trzy przykładowe obrazki oraz katalog ze stylami o nazwie ‘css’. Państwa zadaniem w tym bloku jest wprowadzenie zmian do tych plików wg instrukcji jak niżej. Przy wprowadzaniu zmian należy zachować szczególną ostrożność przy zmianach tagów, ich nawiasów itp., każde usunięcie nawiasu (< i/lub >) może powodować duże zmiany w dokumencie. Przy wprowadzaniu zmian w nazwach plików, np. obrazków, należy pamiętać, że wielkość liter ma znaczenie oraz że w nazwach plików lepiej unikać polskich czcionek i spacji (zastąpić je podkreślnikiem).

Ogólne informacje o podstawowych tagach HTML i stylach CSS można znaleźć tutaj oraz w (wielu) poradnikach internetowych, np. http://www.kurshtml.edu.pl/oraz http://www.w3schools.com/html/DEFAULT.asp

2. Zmiany dotyczące pliku index.html

Zmiany dotyczące pliku index.html (czyli “startowym” pliku Państwa strony; pliku strony głównej):

w części nagłówkowej (<head>) należy:

zmienić tytuł strony (zamiast ‘imie’ wpisujemy nasze imię), opis (description) oraz słowa kluczowe (keywords), tak aby pasowały do naszej zawartości;

w części głównej (<body>) należy:

wstawić nasze własne opisy wyników z raportu; można stosować dowolną liczbę paragrafów tekstu (minimum 2). Znaki początku i końca paragrafu to <p></p>. Znak nowej linii to <br>;

zmienić nazwę w odsyłaczu do podstrony (obecna nazwa to wykresy_imie.html , proszę zamiast ‘imie’ wpisać swoje imię);

zmodyfikować adresy w linkach do stron zewnętrznych w Internecie (w tej chwili są tam linki przykładowe). Nowe linki powinny nawiązywać do tematyki ankiety albo wskazywać na stronę/y naszej Uczelni.

 

3. Zmiany dotyczące pliku wykresy_imie.html

Zmiany dotyczące pliku wykresy_imie.html (plik podstrony)

zmienić nazwę pliku (obecna nazwa to wykresy_imie.html , proszę zamiast ‘imie’ wpisać swoje imię, nazwa powinna być pisana identycznie jak w odsyłaczu do podstrony w pliku index.html);

skopiować zmodyfikowaną przez Państwa część nagłówkową (od tagu <head> do </head>) z pliku index.html (oba pliki .html to pliki tej samej strony, dlatego mają tę samą część nagłówkową opisującą metadane dla Państwa strony)

przygotować co najmniej 2 obrazki (jeden z nich powinien być wykresem wyników Państwa ankiety (drugi może być także wykresem lub innym obrazkiem/zdjęciem nawiązującym tematycznie do tematyki ankiety) i zapisać je w katalogu strony

proszę nazwać pliki obrazków tak, aby były one identyczne jak te w wierszach wskazujących na obrazki w pliku .html (można nazwać je tak jak istniejące obrazki, nadpisując tamte lub nadać im nowe nazwy i wówczas zaktualizować odpowiednio nazwy w pliku .html)

 

4. Zmiany w pliku style.css

Zmiany w pliku style.css (plik odpowiadający za wygląd strony: jej kolorystykę, kroje czcionek, obramowania itd., nazywany arkuszem stylów – style sheet):

W pliku css znajdują się elementy, odpowiadające tagom z dokumentów HTML. Zmieniając wartości dla parametrów w nawiasach klamrowych, możemy zmienić wygląd naszych obu dokumentów HTML jednocześnie. Zasada działania stylów jest podobna jak w Open/Libre Office czy innych edytorach tekstu: zmieniamy wartość w stylach i działa ona na wszystkie wystąpienia danego elementów w tekście. Tak samo tutaj – gdy zmienimy wygląd tła (element body, wartość dla ‘background-color’) w pliku ze stylami – zmieni się on we wszystkich naszych podstronach, tych, gdzie wpisaliśmy w nagłówku strony (<head>) linijkę: <link rel=”stylesheet” type=”text/css” href=”css/style.css” />

Państwa zadaniem jest dokonanie modyfikacji w arkuszu stylów, tak aby strona wyglądała inaczej niż po ściągnięciu jej na potrzeby zajęć;

przykładowa lista elementów i wartości mogących występować w arkuszach stylów css jest np. tutaj.

paleta kolorów dla HTML, kolory oznacza się numerami w kodzie szesnastkowym, gdzie każda para cyfr odpowiada wartościom RGB – red, green, blue  (wpisując numery w odpowiednie miejsca dotyczące ustawień kolorów w arkuszu style.css zmieniamy kolory wyświetlane na stronie), np. http://www.w3schools.com/html/html_colors.asp lub http://www.kurshtml.edu.pl/html/wykaz_kolorow,kolory.html

Objaśnienia dla zawartości pliku style.css:

body -informacje dla części głównej okna strony, np. tło, czcionki, marginesy (dotyczy wszystkiego co w plikach HTML ujęte jest w tagi <body></body>)

p – wygląd paragrafu tekstu (dotyczy wszystkiego co w plikach HTML ujęte jest w tagi <p></p>)

h1 – wygląd dla: nagłówek poziomu 1 – największy (dotyczy wszystkiego co w plikach HTML ujęte jest w tagi <h1></h1>)

h2 – wygląd dla: nagłówek poziomu 2 (dotyczy wszystkiego co w plikach HTML ujęte jest w tagi <h2></h2>)

h3 – wygląd dla: nagłówek poziomu 3 (dotyczy wszystkiego co w plikach HTML ujęte jest w tagi <h3></h3>)

a – wygląd dla: odsyłacze/linki (dotyczy wszystkiego co w plikach HTML ujęte jest w tagi <a></a>)

a:hover – wygląd dla:odsyłacz/link, na który nadjedziemy myszką, bez klikania (dotyczy również zawartości ujętej w tagi <a></a>, ale w szczególnych przypadkach)

a:visited – wygląd dla: odsyłacz/link wcześniej odwiedzony – może mieć inny kolor niż standardowe linki  (dotyczy również zawartości ujętej w tagi <a></a>, ale w szczególnych przypadkach)

img – wygląd dla obrazków, ich ramki i marginesy (dotyczy wszystkiego co w plikach HTML ujęte jest w tagi <img></img>)


Zaliczenie bloku

Proszę spakować cały folder z wszystkimi plikami strony i przesłać mailem na adres klessa at amu.edu.pl.

Comments are closed.