trochę grafiki na stronie

Strony www mogą zawierać oprócz tekstu także elementy graficzne. Najczęściej wykorzystujemy pliki graficzne w formatach .jpg (fotografie, rysunki o dużej liczbie szczegółów i kolorów) oraz .gif ( zwykle niewielkie i proste obrazki o małej liczbie kolorów) i .png (format zapisu plików graficznych zbliżony do .gif, ale dający lepszą jakość przy podobnych rozmiarach. Do umieszczania obrazków na stronie służy znacznik

<img src="nazwa_obrazka.rozszerzenie">

(od image source - dosłownie: źródło obrazu.

Ćwiczenie

Uruchom teraz jakiś program graficzny ( ale raczej nie MSPainta... ) i przygotuj jakiś prosty obrazek. Zapisz go z nazwą obrazek1.jpg w katalogu, w którym znajduje się już plik index.html
Otwórz teraz edytor tekstu, a w nim swój plik index.html i w dowolnym miejscu pomiędzy znacznikami <body> i </body> dopisz:

<img src="obrazek1.jpg">

Zwróć uwagę na wielkość liter. Zapisz dokument i otwórz go w przeglądarce internetowej. Jeżeli wszystko poszło dobrze, wypróbuj teraz, co się stanie jeżeli w tym znaczniku dopiszemy:

<img src="obrazek1.jpg" width=100>

lub

<img src="obrazek1.jpg" height=600>

albo jedno i drugie:

<img src="obrazek1.jpg" width=100 height= 400>

... ale to już chyba nie wygląda najlepiej. Nie zapominaj o zapisywaniu pliku i odświeżeniu widoku w przeglądarce!

Ćwiczenie

Jeżeli masz do dyspozycji skaner, przynieś swoje zdjęcie, na którym dobrze wyglądasz i zeskanuj je. Zapisz je do swojego katalogu z nazwą obrazek1.jpg (jeśli chcesz zachować obrazek, który wcześniej przygotowałeś, musisz najpierw zmienić jego nazwę).

informacje dla nauczyciela i administratora pracowni

komentarz metodyczny:

dobierając program graficzny do tej lekcji unikajmy MSPainta i innych programów w których zapisywanie plików z kompresją (np. jpg) nie jest oczywiste. Zwróćmy uwagę na rozsądne rozmiary obrazka - 200x300 pikseli lub podobne powinny być wystarczające. Wyjaśnijmy uczniom (jeżeli wcześniej nie było o tym mowy) dlaczego istotne jest, aby rozmiary pliku z grafiką nie były zbyt duże. Jeżeli tylko jest to wykonalne (np. klasa z podziałem na grupy lub niezbyt liczna) zachęćmy uczniów do ćwiczenia ze skanerem - nic nie będzie wyglądało na ich stronach tak efektownie jak ich własne zdjęcie - a przy okazji zapoznamy ich z jeszcze jednym urządzeniem peryferyjnym. Należy jednak wtedy przewidzieć osobną lekcję na ćwiczenia w skanowaniu fotografii.

co przygotować:

edytor tekstu, przeglądarka internetowa, program graficzny z możliwością zapisu plików w formacie .jpg (polecam GIMPA), ew. program do obsługi skanera. Jeżeli planujemy ten temat na jedną jednostkę lekcyjną, można zamiast tego przygotować pewną ilość niezbyt dużych obrazków w formacie .jpg - np. 200x300 pikseli. Można je wyszukać korzystając np. z zakładki grafika w wyszukiwarce www.google.com.pl

co uczniowie powinni umieć wcześniej:

uruchomić edytor tekstu i przeglądarkę;
przełączać się pomiędzy otwartymi oknami programów;
zapisać plik w edytorze tekstu;
odróżniać i poprawnie pisać znaczniki html;
posługiwać się programem graficznym, tzn. narysować prosty rysunek i zapisać go;
ew. posługiwać się skanerem.

najczęściej popełniane błędy:

pisanie nazw plików graficznych bez rozszerzenia .jpg lub z niewłaściwym rozszerzeniem;
niewłaściwie użyte wielkie/małe litery w nazwie pliku;
nieprawidłowa nazwa pliku lub plik znajduje się w innym katalogu niż dokument html; w tym przypadku w przeglądarce zamiast grafiki widoczny jest mały prostokąt z czerwonym iksem wewnątrz;
niedomykanie cudzysłowów po nazwie pliku
użycie w nazwie pliku liter specyficznych dla języka polskiego lub spacji ( niektóre przeglądarki wyświetlą to poprawnie, ale po przeniesieniu plików na serwer i tak będzie katastrofa...

czego należy oczekiwać od uczniów:

Po wykonaniu ćwiczenia uczeń będzie umiał wstawić grafikę na stronę www i manipulować jej rozmiarami. Indywidualne prace uczniów powinny zostać wzbogacone o elementy graficzne.