Ostatnia aktualizacja 27 listopada, 2023
W tym tekście przedstawimy sposoby na to, jak wstawić zdjęcie – HTML umożliwia nie tylko podstawowe zamieszczenie obrazu, ale też ustawienie jego atrybutów. Poniższe wskazówki przydadzą się osobom stawiającym pierwsze kroki we frontendzie, ale też wszystkim, którzy w swojej pracy wykorzystują CMS-y lub narzędzia do newsletterów. Ich funkcje pozwalają na edycję bez użycia kodu, natomiast warto czasami przełączyć na ten widok, aby poprawić szczegóły wyświetlania za pomocą odpowiednich ustawień.
- Znajomość HTML-a i CSS-a zwiększa atrakcyjność kandydata pod kątem różnych specjalizacji, np. marketingowych, ale też w SEO i UX/UI Designie;
- Warto uczyć się języka znaczników razem CSS-em, aby pełniej wykorzystywać możliwości;
- Hipertekstowy język znaczników jest stosunkowo łatwy do samodzielnej nauki.
Sprawdź: Jak zrobić stronę internetową w HTML-u?
HTML – dlaczego warto znać język znaczników?
Znajomość HTML-a i CSS-a umożliwi samodzielność w wykonywaniu różnych zadań niekoniecznie związanych z samym programowaniem. Jeśli pracujesz w szeroko pojętym IT, ale odpowiadasz np. za marketing, znajomość HTML-a będzie nieoceniona w kontekście samodzielnego tworzenia landing pages pod kampanie. Jako specjalista SEO wiedzę o HTML-u wykorzystasz do optymalizowania strony. A jeśli jesteś UX/UI Designerem, HTML może być pomocny w rozumieniu możliwości implementacji niektórych rozwiązań, a także w codziennej komunikacji z programistami.
Atrybuty i tagi – jak wstawić zdjęcie HTML?
Tagi to znaczniki używane w HTML-u do określania konkretnych elementów, które chcemy zamieścić na stronie. Atrybuty zaś określają cechy elementów. Które atrybuty i tagi będziemy stosować w kontekście wstawiania zdjęć?
Tagi
- <img> – tag używany do umieszczenia obrazu na stronie internetowej
- <figure> – tag używany do grupowania obrazów z odpowiadającym im tekstem, np. podpisem
- <figcaption> – tag, który umożliwia dodanie opisu do obrazu w tagu <figure>
- <picture> – tag, który umożliwia dostarczenie różnych wersji obrazu w zależności od rozmiaru ekranu i formatu pliku
- <source> – tag, który umożliwia określenie różnych wersji obrazu w tagu <picture>, np. dla różnych formatów obrazów
Atrybuty
- src – atrybut używany do określenia źródła obrazu (np. adres URL pliku graficznego)
- alt – atrybut używany do określenia alternatywnego tekstu dla obrazu, który jest wyświetlany, gdy obraz nie może być wyświetlony. Na przykład, gdy przeglądarka nie może załadować obrazu lub dla osób korzystających z czytników ekranowych
- title – atrybut używany do określenia tytułu obrazu, który jest wyświetlany, gdy użytkownik najedzie na obraz myszą
- width i height – atrybuty używane do określenia szerokości i wysokości obrazu
- srcset – atrybut tagu <img> lub <source>, który umożliwia określanie różnych wersji obrazu w zależności od rozmiaru ekranu i rozdzielczości
- loading – atrybut tagu <img> lub <source>, który określa zachowanie strony podczas ładowania obrazu
Zobacz: Kolory HTML
Jak wstawić zdjęcie – HTML
Aby wstawić zdjęcie w HTML, możesz użyć tagu “img”. Oto przykład:
<img src="ścieżka/do/zdjęcia/nazwa_zdjęcia.jpg" alt="Opis zdjęcia">W powyższym przykładzie należy podać ścieżkę do zdjęcia w atrybucie “src” oraz opis zdjęcia w atrybucie “alt”. Ten opis będzie wyświetlany, gdy zdjęcie nie zostanie załadowane, ale jest to również istotne z punktu widzenia SEO. Można również dodać dodatkowe atrybuty, takie jak “width” i “height”, aby określić rozmiar zdjęcia.
Ustawianie rozmiaru obrazu
Za pomocą atrybutów “width” i “height” można zmienić rozmiar wyświetlanego obrazu. Na przykład:
<img src="moj_obraz.jpg" alt="Mój obraz" width="500" height="300">Dodawanie stylów CSS
Można ostylować obraz za pomocą arkuszy stylów CSS. Na przykład:
<img src="moj_obraz.jpg" alt="Mój obraz" style="border: 1px solid black; margin: 10px;">W tym przykładzie, “style” to atrybut, który zawiera deklaracje stylów CSS, takie jak obramowanie i margines.
Dodawanie linku do obrazu
Za pomocą atrybutu “href” i tagu “a” można dodać link do strony, która otworzy się po kliknięciu na obraz. Na przykład:
<a href="http://www.przykladowastrona.pl"><img src="moj_obraz.jpg" alt="Mój obraz"></a>W tym przykładzie “a” to tag linku, a “href” to atrybut, który określa adres docelowy linku.
