HTML – jak wstawić zdjęcie za jego pomocą?

1 rok temu

Ostatnia aktualizacja 23 marca, 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 dzięki 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.

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żeli 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żeli 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

Jak wstawić zdjęcie – HTML

Aby wstawić zdjęcie w HTML, możesz użyć tagu “img”. Oto przykład:

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.