Kurs HTML - Obrazek
Ogólny wzór składni na wstawienie obrazka wygląda następująco:
<img src="adres do obrazka" alt="tekst zastępczy" />
Przykładowo gdy użyjemy kodu:
<img src="http://dodatki.net/img/button2.gif" alt="dodatki" />
otrzymamy następujący efekt:
W miejscu, w którym wystąpił tekst zastępczy umieszczamy alternatywną informację dla odwiedzającego, która pojawi się wyłącznie, kiedy obrazek nie zostanie wyświetlony lub zostanie usunięty z serwera.
Należy pamietać, że adres obrazka musi zaczynać się od http:// i kończyć się na rozszerzeniu obrazka, np. .jpg, .gif itp. Nie należy wstawiać jako adres obrazka pliku graficznego, który znajduje się na Twoim komputerze, ponieważ będzie się on wyświetlał wyłącznie Tobie.
Jeśli masz na komputerze obrazek, który chcesz wstawić na bloga/stronę i nie wiesz jak to zrobić, to skorzystaj ze stron, które oferują hosting zdjęć. Wgrywając zdjęcia otrzymasz prawidłowy adres obrazka, który należy wstawić w kodzie. Stron oferujących hosting zdjęć jest bardzo dużo - najpopularniejsze to: imageshack.us, fotosik.pl.
Przejdźmy teraz do dodatkowych funkcji, które pomogą nam odpowiednio umieścić obrazek - zgodnie z naszą wizją.
Za pomocą parametru align="x" definujemy, po której stronie ma zostać wyświetlony obrazek. Jeśli w miejsce x wpiszemy left zostanie on wyświetlony po lewej stronie, natomiast jeśli right - obrazek pojawi się po prawej stronie. Demonstruje to poniższy przykład.
<img src="<div style="width: 150px; border: 1px solid #ccc; color: #fff; font-weight: bold; margin: 0px 0px 0px 0px;">Gdansk Weather
<script src="<div style="width: 150px; border: 1px solid #ccc; color: #fff; font-weight: bold; margin: 0px 0px 0px 0px;">Gdansk Weather
<script src="http://www.weatherforecastmap.com/weather1001.php?zona=poland_gdansk"></script>
</div> " align="right" />
Otrzymany przez nas efekt to umiejscowienie obrazka po prawej stronie.
Kolejną przydatną funkcją jest ustalanie wielkości i szerokości obrazka. Tej funkcji używamy wyłącznie wtedy, gdy chcemy aby wyświetlany obraz nie był takich rozmiarów jak w oryginale. Szerokość definuje parametr width="x", natomiast wysokość height="x". W miejsce x należy wstawić liczbę naturalną, która będzie wyrażać rozmiar obrazka w pikselach. Przykładowo, chcemy powiększyć dwukrotnie nasz obrazek testowy dwukrotnie, który obecnie ma szerokość 80px i wysokość 15px.
<img src="http://dodatki.net/img/button2.gif" alt="dodatki" width="160" height="200" />
Jak łatwo zauważyć gdy powiększamy obraz, ulega on zniekształceniu. Przy pomniejszeniu zniekształcenia są znacznie mniejsze, ale widoczne.
Informację o tym, jak na stronie umieścić obrazek z odnośnikiem do dowolnej strony znajdziesz w naszym Kursie HTML w poddziale Link.