Lekcja informatyki – obrazki

Lekcja informatyki dla młodzieży klas 5/6 szkoły podstawowej.

Witam! Dziś o obrazkach w internecie.

Każdy z Was wielokrotnie przeglądając internet zauważył zapewne, że oprócz tekstów najczęstszym elementem stron WWW jest obrazek (grafika). Najpopularniejszą formą grafiki internetowej są ZDJĘCIA, RYSUNKI(motywy) , IKONY, TŁA itp.

rysunek

tło

ikona

zdjęcie

Te wszędobylskie PLIKI GRAFICZNE mają różne ROZSZERZENIA (lekcja “rodzaje plików”). Do najpopularniejszych rozszerzeń plików , które oglądacie w internecie należą *.jpg,  *.gif,  *.bmp,  *.png

(przypominam, że gwiazdka to umowny znak dowolnej nazwy pliku, a pliki mogą się jak pamiętacie nazywać jak sobie życzycie, ale bez stosowania polskich znaków – przykładowo zdjęcie róży bezpieczniej jest nazwać np. roza.jpg )

Poniżej zamieściłęm dla porównania trzy obrazki – pierwszy to plik bmp (bitmapa) – obrazek.bmp, drugi to format jpg – obrazek.jpg, a trzeci png – obrazek.png

obrazek.bmp

obrazek.jpg

Na pierwszy rzut oka obrazki niczym się nie różnią. Okazuje się jednak, że pierwszy obrazek (bmp) ma 120 KB (lekcja – jednostki informacji), a drugi (jpg) 30 KB. Stąd wniosek, że KOMPRESJA – zmniejszanie wielkości pliku bez widocznej (słyszalnej) utraty jego jakości (lekcja – kompresja plików) z formatu bmp na jpg dała czterokrotne zmniejszenie jego rozmiaru. Zapamiętaj – zdjęcia i inne pliki graficzne przeznaczone do publikacji na łamach internetu powinny być skompresowane – w formacie *.jpg. Powód – mniejsze pliki szybciej się ładują w przeglądarce WWW (lekcja – przeglądarki internetowe ).

Trzeci obrazek – plik png – to w naszym przypadku grafika bez tła – na pierwszy rzut oka nie na naszej białej stronie WWW tego nie widać, ale zobaczcie jak wygląda nasz bohater na kolorowym tle.

_

Zauważcie że w pierwszym rysunku (jpg) tło jest białe, a w drugim (png) tła nie ma. To właśnie wielka zaleta formatu png (ang. Portable Network Graphics) – następcy formatu *.gif -systemu bezstratnej kompresji danych graficznych. Pamiętajmy jednak, że wraz z jakością zwiększa się objętość pliku(obrazek png ma ponad 100KB!) O plikach *.gif powiem tylko tyle, że najpopularniejszą ich formą są “animowane gify” – oto przykład:

_

O tym formacie graficznym porozmawiamy jeszcze na lekcji (lekcja – tworzenie animacji)

Zadanie: stwórz na pulpicie swojego komputera plik, który będzie pokazywał obrazek.

Wszystkie obrazki w internecie są umiejscowione na serwerach (komputerach stale włączonych, które dzięki specjalnemu oprogramowaniu pozwalają innym użytkownikom internetu na korzystanie z ich zasobów – zbiorach różnych plików – w tym naszych obrazków). Każdy taki serwer ma swój adres internetowy. Przykładowo nasza lekcja to artykuł na serwerze elmot.pl. Aby zachować porządek na dysku/serwerze – wskazane jest, aby obrazki/grafikę “trzymać” w jednym konkretnym folderze/katalogu (lekcja – system operacyjny, foldery i podfoldery). Jego nazwa jest jak już wiecie dowolna. W przypadku serwera domeny elmot.pl nasz folder nazywa się “images”. Stąd adres obrazków z tego serwera zaczyna się od http:// (informacja dla komputera, że plik jest z internetu) www.elmot.pl (adres strony internetowej)/images(katalog/folder w którym są obrazki)/obrazek.jpg (nazwa pliku i jego rozszerzenie).

Reasumując – adres naszego obrazka to http://www.elmot.pl/images/obrazek.jpg

Skopiuj ten adres(zaznacz i ctrl+c) i wklej(ctrl+v) (lekcja skróty klawiszowe) w pole adres przeglądarki – sprawdź czy obrazek naprawdę się tam znajduje (powinien wyświetlić się w oknie przeglądarki). Działa ?

W ramach ćwiczenia przejdź na naszą szkolną stronę WWW , i kliknij PKM (skrót od “prawy klawisz myszki”) np. na obrazek EDUGRY (ten z Mario – link do naszego szkolnego serwisu edugry). Ukaże ci się MENU, z którego wybierz “POKAŻ OBRAZEK”. Co widzisz – w oknie przeglądarki nasz mały plik graficzny o adresie http://www.sp7knurow.eu/rysunki/edugry.jpg

Analizując otrzymany adres – obrazek ma nazwę edugry.jpg, znajduje się w folderze rysunki na serwerze szkolnym o adresie http://www.sp7.knurow.eu

Przystąpmy zatem do tworzenia pliku, który będzie pokazywał dowolny obrazek z internetu.

• otwórz program “notatnik” (menu start/akcesoria/notatnik)
• wpisz w nim polecenie : “pokaż mi taki obrazek = http://www.elmot.pl/images/obrazek.jpg”
• zapisz plik na pulpicie jako “lekcja.txt”
• kliknij na ten plik

I co? NIC! Otworzył się nasz “notatnik” ukazując wpisane przed chwilą zdanie ;(   Dlaczego nie działa ? Dlatego, że komputerek nie rozumie zwykłego języka – polecenie “pokaż mi obrazek” musimy napisać w języku zrozumiałym dla komputera – języku programowania HTML. Polecenia w HTML-u wyglądają trochę inaczej – stosuje się tu różne znaczniki, symbole itp. Na początku wygląda to trochę przerażająco, ale w końcu znasz już dobrze język polski, nieźle język angielski, to nauczmy się również języka komputerowego . Poprawmy zatem nasz plik “lekcja.txt”

• kliknij na plik “lekcja.txt”

• usuń starą zawartość i zastąp ją KODEM HTML

• kody umieszcza się w “znacznikach <kod>, aby komputerek i przeglądarka internetowa wiedziały, że to ich język

• polecenie pokaż obrazek to po html-owemu img src

• wpisz w notatniku <img src=”http://www.elmot.pl/images/obrazek.jpg”/>

• Zauważ, że w kodzie html panują pewne reguły – adresy WWW są podawane w cudzysłowiach   “adres“ , kod zaczyna się znacznikiem   < , a kończy   /> itp.

• Kliknij w menu PLIK i wybierz “zapisz jako”, zaznacz w oknie “zapisz jako typ” -”wszystkie pliki” , wpisz nazwę pliku “lekcja.html”

• Gotowe. Kliknij na utworzony plik. Zauważ, że stworzyłeś plik z rozszerzeniem HTML – czyli taki, który otwierają przeglądarki WWW.

Całe ćwiczenie powinieneś powtórzyć na innym, dowolnym obrazku z internetu (wybierz jakiś, a następnie skopiuj jego adres. Pamiętaj że adres obrazka zaczyna się od      http:// a kończy na  .jpg lub innym rozszerzeniu.

Na następnej lekcji nauczymy się, jak określać wielkość naszego obrazka i jak tworzyć LINKI do innych stron WWW.

Witek Kozaczkiewicz MSP 7 Knurów