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.