Przeglądając strony internetowe, dłużej zatrzymujemy się przy tych ciekawszych graficznie, z obrazkami, gifami itp., które sprawiają, że przyjemniej przegląda się ich zawartość. Warto więc, projektując swoją www, zatroszczyć się o to, aby była interesująca dla odbiorcy, i wstawić na nią kilka obrazków.
Jeżeli projektujesz swoją www w HTML, przeczytaj poniższą poradę, a dowiesz się, jak wstawić na nią obrazek.
Wstawianie obrazka w HTML
Aby wstawić obrazek w HTML, należy wykorzystać znacznik <img />. Znacznik ten nie posiada znacznika zamykającego, o czym warto pamiętać, aby uniknąć w przyszłości niepotrzebnego przeszukiwania całego kodu w znalezieniu odpowiedzi na pytanie „Dlaczego obrazek nie wyświetla mi się tak, jak powinien?”.
W HTML przy użyciu znacznika IMG możemy wstawić obrazek o rozszerzeniu jpg, gif albo png. Konieczne jest także wpisanie adresu URL obrazka przy użyciu atrybutu src.
Ścieżka dostępu powinna wyglądać w następujący sposób:
<img src=”http://adres.naszego-serwera.pl/katalog-z-obrazkami/obrazek.png” />
Jeżeli nie mamy możliwości umieszczenia obrazka czy zdjęcia na serwerze, możemy skorzystać z serwisu, który umożliwia bezpłatny hosting obrazków, np. Tinypic, Imageshack itp. Korzystając z formularza pojawiającego się na głównej stronie, wysyłamy plik na serwer i otrzymujemy kilka adresów URL do obrazka. Do naszych potrzeb wybieramy „Direct Link for Layouts” i wstawiamy go w atrybucie src. Adres URL obrazka z serwisu hostingowego Tinypic będzie wyglądał tak:
<img src=”http://i48.tinypic.com/27y28hx.jpg” />
Jak wstawić obrazek w html? – porady video
Jak dodać obrazek w HTML, a także czym jest adresowanie względne i bezwzględne, dowiesz się, oglądając poniższy film.
Jak wstawić obrazek w HTML ?
Aby wstawić obrazek w kodzie HTML, użyj elementu <img> i atrybutu src (source), który wskazuje ścieżkę do pliku graficznego. Oto prosty przykład:
<!DOCTYPE html>
<html>
<head>
<title>Przykład obrazka w HTML</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>Tutaj znajduje się obrazek:</p>
<img src="nazwa_pliku_obrazka.jpg" alt="Opis obrazka">
</body>
</html>W powyższym przykładzie należy zmienić nazwa_pliku_obrazka.jpg na nazwę pliku graficznego, który chcesz wyświetlić. Możesz użyć lokalnej ścieżki do pliku lub bezpośredniego adresu URL do obrazka dostępnego w Internecie.
Dodatkowo, warto użyć atrybutu alt (alternative text), który zawiera krótki opis obrazka. Tekst ten będzie wyświetlany, gdy obrazek nie może zostać załadowany, a także jest używany przez czytniki ekranowe dla osób niedowidzących.
Możesz również dostosować rozmiar obrazka, dodając atrybuty width (szerokość) i height (wysokość) z wartościami w pikselach:
<img src="nazwa_pliku_obrazka.jpg" alt="Opis obrazka" width="300" height="200">W powyższym przykładzie obrazek zostanie przeskalowany do szerokości 300 pikseli i wysokości 200 pikseli. Aby zachować proporcje obrazka, możesz ustawić tylko jedną z wartości (szerokość lub wysokość) – przeglądarka automatycznie dostosuje drugą wartość, aby zachować proporcje.
