Wstawianie obrazka w HTML

Dodawanie obrazków w HTML jest jednym z podstawowych elementów, które każdy początkujący programista powinien opanować, dlatego w tej lekcji omówimy wstawianie obrazka w HTML. Obrazy mogą znacznie uatrakcyjnić wygląd strony internetowej, a także przekazać istotne informacje wizualne. W tym artykule omówimy, jak wstawiać zdjęcia na stronę oraz przedstawimy różne techniki i najlepsze praktyki z tym związane.

Sprawdźmy jak wstawić obrazek na stronę

Aby wstawić obraz w HTML, używamy elementu <img>. Jest to element pusty, co oznacza, że nie ma znacznika zamykającego. Podstawowy kod wygląda następująco:

<img src="ścieżka_do _obrazka" alt="Opis obrazka" title="Tytuł obrazka">

Atrybuty elementu `<img>`

src (source) – określa ścieżkę do pliku obrazka.
alt (alternative text) – tekst alternatywny, który opisuje obraz. Jest on wyświetlany, jeśli obraz nie może zostać załadowany, oraz pomaga w dostępności dla osób niewidomych korzystających z czytników ekranowych.
title (title text) – title wyświetli tytuł po najechaniu kursorem na obrazek. Należy pamiętać, że opis powinien być zgodny z obrazkiem.

Przykład

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykład wstawiania obrazka</title>
</head>
<body>
    <h1>Przykładowy obrazek</h1>
    <img src="../images/logo.png" alt="Logotyp" title="html/css">
</body>
</html>

Ścieżki do obrazów

Ścieżka względna

Ścieżki względne odwołują się do lokalizacji pliku względem bieżącego dokumentu HTML. Przykłady:

src="images/logo.png" – jeśli obraz znajduje się w folderze images w katalogu bieżącym.
src="../logo.png" – jeśli obraz znajduje się o jeden poziom wyżej względem katalogu bieżącego.

Ścieżka bezwzględna

Ścieżki bezwzględne to pełne adresy URL do plików obrazów. Przykład:

<img src="https://kurshtmlcss.pl/wp-content/uploads/2022/09/logo.svg" alt="Logotyp">

Rozmiar i wymiary obrazków

Element <img> pozwala na ustawienie szerokości i wysokości obrazka za pomocą atrybutów width i height.

W przypadku jeśli obrazek jest zbyt duży, możemy zmniejszyć jego rozmiary.

<img src="../images/logo.png" width="100" height="25" />

Odsyłacz obrazkowy

<a href="miejsce_w_sieci_do_ktorego_linkujemy"><img src="ścieżka_do _obrazka" /></a>

W poniższym przykładzie kliknięcie na obrazek przeniesie nas na górę strony.

Dodatkowe style i zarządzanie obrazami

Obrazy można również stylizować za pomocą CSS. Przykładowo, możemy dodać obramowanie, zmienić rozmiar za pomocą procentów, ustawić marginesy i inne właściwości.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Stylizowanie obrazków</title>
    <style>
        .styled-img {
            border: 2px solid #000;
            width: 50%;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Stylizowany obrazek</h1>
    <img src="logo.png" alt="Logotyp" class="styled-img">
</body>
</html>

W powyższym przykładzie, obrazek ma dodane obramowanie, szerokość ustawioną na 50% szerokości elementu nadrzędnego oraz margines 10 pikseli dookoła.

Responsywne obrazy

W nowoczesnych stronach internetowych często używa się responsywnych obrazów, które dostosowują się do różnych rozmiarów ekranu. Możemy to osiągnąć za pomocą CSS lub atrybutu srcset.

Przykład z CSS

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Responsywny obrazek</title>
    <style>
        .responsive-img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Responsywny obrazek</h1>
    <img src="logo.jpg" alt="Logotyp" class="responsive-img">
</body>
</html>

Przykład z srcset

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Obrazek ze srcset</title>
</head>
<body>
    <h1>Obrazek z atrybutem srcset</h1>
    <img src="logo.jpg" srcset="logo_small.jpg 500w, logo_medium.jpg 1000w, logo_large.jpg 2000w" alt="Logotyp">
</body>
</html>

W powyższym przykładzie, przeglądarka wybierze odpowiednią wersję obrazka w zależności od rozdzielczości ekranu.

Wstawienie obrazka do tekstu

Dodanie obrazka w dowolnej części tekstu w zależności od tego, w którym miejscu chcemy, aby się pojawił obliguje do zastosowania opływania (float):

<img src="../images/logo.png" style="float: left; margin-right: 20px;" />
<p>To jest tekst, który będzie opływał obrazek z prawej strony.</p>

Przykład

To jest tekst, który będzie opływał obrazek z prawej strony.