Witaj! Jeśli interesujesz się tworzeniem stron internetowych, na pewno spotkasz się z potrzebą umieszczenia zdjęć na stronie. W tym artykule dowiesz się, jak wstawić zdjęcie w HTML i jak dostosować je do swoich potrzeb. Niezależnie od tego, czy chcesz umieścić zdjęcie na stronie internetowej, blogu czy w innym projekcie online, HTML jest podstawowym językiem, który umożliwia wyświetlanie obrazów na stronie.
Tag ![]()
Do wstawiania zdjęć w HTML używamy tagu . Tag ten jest jednym z najważniejszych elementów, gdy chodzi o wyświetlanie grafiki na stronach internetowych. Oto jak wygląda przykład użycia tagu
do wstawienia zdjęcia:
W powyższym przykładzie użyliśmy atrybutu src, który określa ścieżkę do obrazka. Atrybut alt służy do dostarczenia alternatywnego tekstu dla obrazka, który jest wyświetlany, gdy obrazek nie może być wczytany lub dla użytkowników korzystających z czytników ekranu.
Ścieżka do obrazka
Aby poprawnie wstawić zdjęcie w HTML, musisz podać prawidłową ścieżkę do obrazka. Istnieją dwie główne metody określania ścieżki:
Ścieżka bezwzględna
Ścieżka bezwzględna wskazuje pełną lokalizację obrazka na serwerze internetowym. Wygląda to mniej więcej tak:
<img src="https://www.example.com/sciezka_do_obrazka.jpg" alt="Opis obrazka">
W przypadku korzystania ze ścieżki bezwzględnej, musisz podać pełny adres URL obrazka, włącznie z protokołem (np. http lub https).
Ścieżka względna
Ścieżka względna wskazuje lokalizację obrazka względem pliku HTML. Jest to bardziej praktyczne rozwiązanie, szczególnie jeśli obrazek znajduje się w tym samym folderze co plik HTML.
Przykład ścieżki względnej:
<img src="obrazki/sciezka_do_obrazka.jpg" alt="Opis obrazka">
W przypadku korzystania ze ścieżki względnej, podajemy tylko nazwę folderu i nazwę pliku obrazka. W przykładzie powyżej obrazek znajduje się w folderze „obrazki” w tym samym miejscu co plik HTML, więc możemy użyć takiej ścieżki.
Dopasowanie i stylowanie obrazka
HTML oferuje wiele możliwości dostosowania i stylizacji wstawionego obrazka. Oto niektóre z nich:
Wymiary obrazka
Możesz określić szerokość i wysokość obrazka za pomocą atrybutów width i height. Na przykład:
<img src="sciezka_do_obrazka.jpg" alt="Opis obrazka" width="500" height="300">
Pamiętaj, że podanie wartości szerokości i wysokości może wpływać na proporcje obrazka. Dlatego warto zachować ostrożność przy zmienianiu tych wartości, aby obrazek nie stracił na jakości.
Wyrównanie obrazka
Możesz również wyrównać obrazek na stronie przy użyciu atrybutu align. Oto przykład:
<img src="sciezka_do_obrazka.jpg" alt="Opis obrazka" align="left">
W powyższym przykładzie obrazek zostanie wyrównany do lewej strony, a tekst będzie zawijany wokół niego.
Stylowanie obrazka
Aby dostosować styl obrazka, można użyć CSS. Na przykład:
<img src="sciezka_do_obrazka.jpg" alt="Opis obrazka" style="border: 1px solid black;">
W powyższym przykładzie dodaliśmy ramkę do obrazka za pomocą CSS.
Podsumowanie
Wstawianie zdjęcia w HTML jest łatwe i dostępne dla każdego, kto tworzy strony internetowe. Tag jest podstawowym elementem do wyświetlania obrazów, a odpowiednie użycie atrybutów i stylizacji pozwala na pełne dostosowanie wyglądu obrazka.
Jak zmienić rozmiar obrazka w HTML?
Aby zmienić rozmiar obrazka w HTML, użyj atrybutów width i height w tagu . Określ odpowiednie wartości w pikselach lub procentach, na przykład:
<img src="sciezka_do_obrazka.jpg" alt="Opis obrazka" width="300" height="200">
Jak wyrównać obrazek na stronie?
Aby wyrównać obrazek na stronie, możesz użyć atrybutu align w tagu . Możliwe wartości to „left” (lewo), „right” (prawo) lub „center” (środek). Na przykład:
<img src="sciezka_do_obrazka.jpg" alt="Opis obrazka" align="left">
Czy mogę dodać link do obrazka w HTML?
Tak, możesz dodać link do obrazka w HTML, otaczając tag tagiem . Na przykład:
<a href="strona_docelowa.html"><img src="sciezka_do_obrazka.jpg" alt="Opis obrazka"></a>
Jak dodać podpis (caption) do obrazka w HTML?
Tag w HTML nie obsługuje bezpośrednio podpisów do obrazków. Jednak można osiągnąć ten efekt, umieszczając obrazek wewnątrz elementu
<figure>
<img src="sciezka_do_obrazka.jpg" alt="Opis obrazka">
<figcaption>Podpis obrazka</figcaption>
</figure>
Zobacz także:
