Lekcja informatyki – wielkość obrazków

Lekcja informatyki dla młodzieży klas 5/6 szkoły podstawowej. Pamiętaj, że aby zrozumieć omawiane zagadnienia, musisz posiadać wiadomości i umiejętności z naszych poprzednich lekcji informatyki online.

Wielkość Obrazków

Na poprzedniej lekcji poznaliśmy kod HTML “wstaw obrazek“. Dziś o sterowani jego wielkością.

Jak wiecie grafika internetowa to najczęściej prostokąty, które mają określoną szerokość i wysokość. Nawet poniższy obrazek typu png nie wyglądający na prostokąt , jest nim w rzeczywistości. Myli nas tylko brak tła.

=

jestem prostokątem

Standardowy prostokąt ma 2 wymiary bazowe – SZEROKOŚĆ I WYSOKOŚĆ

Aby określać wielkość obrazka w kodzie HTML, musimy użyć tych wielkości w języku HTML

Szczególnie parametr ” width ” – czyli szerokość jest dla nas istotny, tak więc zapamiętajmy to nowe słowo! Podając w kodzie wyłącznie szerokość obrazka (width) , jego wysokość (height) będzie się proporcjonalnie dopasowywać – zobaczmy z resztą sami.

parametr width

w kodzie html ma on postać

width=”liczba”

gdzie liczba to wielkość w pikselach (lekcja – obraz w komputerze)

EXPERYMENT

• Otwórzmy/ edytujmy plik “lekcja.html” (z poprzednich zajęć)
• W naszym kodzie <img src=”http://www.elmot.pl/images/obrazek.jpg”/> wstawmy na końcu (po znaku cudzysłowia) parametr width, określmy jego wielkość na 400 (rozmiar oryginalny obrazka)
• Otrzymaliśmy <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ />
• Zapisujemy i uruchamiamy nasz plik “lekcja.html”
• Następnie ponownie edytujemy plik, wpisując w miejsce rozmiaru wielkość np………..”1″
• Otrzymaliśmy <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”1″ />   – nasz ledwo widoczny obraz ma wielkość…………..1 piksela
• Następnie ponownie edytujemy plik, wpisując w miejsce rozmiaru wielkości “10″,oglądamy efekt,  następnie zmieniamy parametr na “100″, i no może…”1000″

Kilka prób i już umiesz sterować wielkością obrazka !

parametr height

w kodzie html ma on postać

height=”liczba”

najczęściej występuje obok parametru width=”liczba”

przykład: <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ height=”300″/>

czyli = pokaż obrazek o adresie      http://www.elmot.pl/images/obrazek.jpg     , szerokości 400 pikseli, wysokości 300 pikseli

EXPERYMENT

• edytujmy nasz plik “lekcja.html”
• wklejmy kod <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ height=”300″/> sprawdźmy efekt
• wklejmy kod <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ height=”600″/> sprawdźmy efekt
• wklejmy kod <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ height=”100″/> sprawdźmy efekt
• wklejmy kod <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”dowolna liczba” height=”dowolna liczba”/> sprawdźmy efekt

Wniosek – umiesz już sterować wielkością obrazka, możesz również nieproporcjonalnie zmieniać jego wymiary.

Następna lekcja będzie poświęcona linkowaniu – poleceniu “wejdź na stronę WWW”