Jak wstawić obrazek?

Z pewnością każdy pragnął kiedyś wstawić na swoją stronę internetową zdjęcie przedstawiające ulubione zwierzę czyli jaka. Na popularnych blogach i forach wystarczy kliknąć przycisk 'wstaw obrazek' i gotowe. Jeżeli tworzymy stronę bez pomocy takich 'automagicznych ułatwień' to powinniśmy wykorzystywać html-owy znacznik IMG.

Co jest potrzebne aby umieścić obrazek na stronie internetowej?

Potrzebny jest obrazek, strona internetowa oraz tag IMG. Obrazek niech będzie plikiem graficznym o rozszerzeniu jpg, gif lub png. Aby strona internetowa wiedziała jaki obrazek wyświetlić, musimy powiedzieć jej (wykorzystując tag IMG i atrybut SRC) gdzie może go znaleźć. Musimy w atrybucie SRC wpisać URL obrazka.

<img src="http://adres.serwera.pl/katalog-obrazkow/obrazek.gif" />

Co to jest URL? - więcej na temat adresów URL napisałem tutaj.

Jak wstawić obrazek na bloga? Nie mam miejsca na serwerze.

Jeżeli chcemy umieścić obrazek na blogu, lub innej stronie internetowej, która nie ma ochoty przechowywać naszego obrazka na serwerze możemy skorzystać z serwisów udostępniających bezpłatny hosting obrazków.
Jednym z takich serwisów jest tinypic w języku polskim, na którym bez rejestracji możemy umieścić nasz obrazek. Za pomocą formularza na stronie głównej wysyłamy nasz plik na serwer i otrzymujemy URL obrazka.
Mój URL obrazka z serwisu TinyPic

<img src="http://i33.tinypic.com/2qa73oi.jpg" />

Jak zmienić wielkość obrazka? Zmniejszyć lub zwiększyć?

Jeżeli nasz obrazek pokazał się już na stronie, ale okazuje się, że jest zbyt mały lub zbyt duży to możemy zmienić wymiary obrazka. Najkorzystniejsze dla naszej strony jest zmniejszenie obrazka w programie do obróbki grafiki (np GIMP lub chociażby Paint), zagwarantuje nam to dobrą jakość obrazka/zdjęcia, a dodatkowo mniejszy obrazek szybciej się otworzy w przeglądarce internetowej. Ale możemy również wykorzystać atrybuty height i width znacznika img:

przykład ustawienia wysokości na 200 pikseli
<img src="http://i33.tinypic.com/2qa73oi.jpg" height="200"/>

przykład ustawienia szerokości na 400 pikseli
<img src="http://i33.tinypic.com/2qa73oi.jpg" width="400"/>

Jeżeli ustawimy tylko wysokość (height) lub tylko szerokość (width) wówczas przeglądarka automatycznie ustawi długość drugiego bok obrazka zachowując jego proporcje. Możemy jednocześnie ustawić długość wysokości i szerokości obrazka zniekształcając tym samym obrazek:

przykład ustawienia wysokości na 200 pikseli i szerokości na 105 piseli
<img src="http://i33.tinypic.com/2qa73oi.jpg" height="200" width="105" />