Edukacja

Jak dodać zdjęcie do strony HTML? Podstawowa instrukcja z przykładem

Autor Lila Krajewska
Lila Krajewska23.09.20234 min.
Jak dodać zdjęcie do strony HTML? Podstawowa instrukcja z przykładem

Dodanie zdjęcia do strony internetowej stworzonej w HTML może znacząco wzbogacić jej wygląd i treść. Prawidłowe osadzenie grafiki wymaga jednak znajomości odpowiednich tagów i atrybutów. Poniższy artykuł wyjaśnia krok po kroku, jak wstawić zdjęcie do kodu HTML.

Aby dodać zdjęcie do strony HTML, należy użyć tagu img. Tag ten nie posiada zamykającego znacznika końcowego, ponieważ służy jedynie do osadzania grafiki. Podstawowa składnia wygląda następująco:

Jak dodać zdjęcie do strony HTML? Podstawowa instrukcja z przykładem

W atrybucie src podajemy ścieżkę do pliku graficznego. Może to być ścieżka względna np. "zdjecia/grafika.jpg" lub bezwzględna zaczynająca się od protokołu http lub https. Wartość atrybutu alt to tekst alternatywny wyświetlany w przypadku, gdy grafika nie może zostać załadowana. Powinien on krótko opisywać, co przedstawia zdjęcie.

Najpopularniejsze formaty graficzne obsługiwane przez przeglądarki internetowe to JPEG, PNG oraz GIF. Pliki te powinny mieć odpowiednio rozszerzenia: .jpg, .png oraz .gif. Starsze przeglądarki mogą nie obsługiwać plików w formacie WEBP o rozszerzeniu .webp.

Tag img służy wyłącznie do osadzania obrazów. Nie można umieszczać w nim żadnych innych elementów HTML ani tekstu. Jeśli chcemy opatrzyć grafikę dodatkowym opisem, musimy umieścić ją wewnątrz akapitu

lub innego kontenera i dodać tekst obok niej.

Przykład:

Jak dodać zdjęcie do strony HTML? Podstawowa instrukcja z przykładem

Powyżej znajduje się zdjęcie przedstawiające...

W tagu img możemy określić szerokość i wysokość wczytywanego obrazka za pomocą atrybutów width i height. Pozwoli to przeglądarce wcześniej zarezerwować odpowiedni obszar na stronie.

Przykład ustawienia wymiarów na 200 x 100 pikseli:

Jak dodać zdjęcie do strony HTML? Podstawowa instrukcja z przykładem

Atrybut alt służy do dodania krótkiego opisu zdjęcia. Jest on wyświetlany, gdy obraz nie może zostać załadowany lub gdy użytkownik najedzie na niego kursorem myszy. Powinien w zwięzły sposób informować o zawartości grafiki.

Przykład alternatywnego tekstu:

Jak dodać zdjęcie do strony HTML? Podstawowa instrukcja z przykładem

Styl obramowania i odstępów od krawędzi obrazka można zdefiniować w CSS. W tym celu należy nadać zdjęciu identyfikator lub klasę i ustawić odpowiednie właściwości, takie jak border, margin czy padding.

Przykład stylu CSS:

Za pomocą kaskadowych arkuszy stylów CSS można dowolnie formatować wygląd zdjęcia na stronie. Oprócz wspomnianych wcześniej właściwości obramowania i odstępów, warto wymienić m.in. możliwość określenia zaokrąglenia narożników (border-radius), cienia (box-shadow) czy przejścia najechania kursorem (transition).

Bardzo ważne przed dodaniem zdjęć do strony internetowej jest ich optymalizacja. Obejmuje ona m.in.: - zmniejszenie rozmiaru pliku przy zachowaniu jakości, - zamiana na format JPEG dla zdjęć lub PNG dla grafiki wektorowej, - ustawienie poprawnej rozdzielczości, - kompresja i redukcja metadanych.

Pozwoli to przyspieszyć ładowanie strony oraz zmniejszyć koszty transferu danych.

Podsumowanie

Dodanie zdjęć do strony HTML nie jest skomplikowane, wymaga jednak znajomości kilku podstawowych zasad. Należy prawidłowo dobrać format pliku graficznego, zoptymalizować jego rozmiar i jakość a następnie umieścić w kodzie za pomocą tagu img. Warto zadbać o alternatywny tekst i w razie potrzeby dostosować styl obramowania i wygląd obrazka. Zdjęcia mogą znacząco wzbogacić treść i wygląd witryny internetowej.

Najczęstsze pytania

Najpopularniejsze to JPEG, PNG oraz GIF. Starsze przeglądarki mogą nie obsługiwać WebP.

Zdjęcie powinno mieć rozmiar dostosowany do szerokości kontenera w którym się znajduje. Zbyt duże grafiki bez skalowania wydłużają czas ładowania strony.

Należy ustawić szerokość obrazka na 100% szerokości rodzica i wysokość na auto. Pozwoli to zachować proporcje przy skalowaniu na różnych urządzeniach.

Najlepiej w sekcji <head> lub w osobnym pliku .css podłączonym do dokumentu HTML.

Można to zrobić w właściwościach pliku w systemie operacyjnym albo za pomocą darmowych programów graficznych.

Oceń artykuł

rating-outline
rating-outline
rating-outline
rating-outline
rating-outline
Ocena: 0.00 Liczba głosów: 0

5 Podobnych Artykułów:

  1. Maple Wyrażenia algebraiczne - Podstawy i zastosowania
  2. Luton: Polka ciężko poparzona kawą powraca do zdrowia
  3. Powyski tata w zawieszeniu czeka na przeszczep serca
  4. Tajemnicze odkrycie w Biłgoraju zszokowało archeologów
  5. Meble z drewna mango - komody, szafki, stoły i krzesła z egzotycznego drewna
Autor Lila Krajewska
Lila Krajewska

Hej, jestem Lila i moja miłość do nauki jest jak iskra, która pali się we mnie każdego dnia. Na tym blogu o edukacji i nauce zapraszam Cię do wspólnej podróży przez świat wiedzy. Dzielę się ciekawymi artykułami, które pomogą Ci zrozumieć skomplikowane tematy w prosty sposób. Bez względu na to, czy interesuje Cię astronomia, biologia czy historia sztuki, znajdziesz tu treści dopasowane do Twoich zainteresowań. Razem będziemy się rozwijać i poznawać tajniki naukowego świata.

Udostępnij post

Napisz komentarz

Polecane artykuły

Jak sprzedawać na Amazon: wyjaśnienie krok po kroku
EdukacjaJak sprzedawać na Amazon: wyjaśnienie krok po kroku

W dzisiejszych czasach poszukiwanie dodatkowych źródeł dochodu online stało się powszechne. Od wypełniania ankiet po grę w kasynie, istnieje wiele opcji. Przed zanurzeniem się w grę warto dokładnie poznać jej niuanse. Oceniając e-kasyno, możesz uzyskać niezbędne informacje. Natomiast jeśli interesuje Cię handel na Amazon, ten artykuł podpowie Ci, jak zacząć.