Generator wstawiania obrazków HTML

Podaj adres URL lub ścieżkę pliku

np: "nazwapliku.png" lub "https://webporady.pl/assets/img/nazwapliku.png"

Podaj tekst alternatywny

Na czym polega wstawianie obrazka w HTML?

Chcąc po prostu wstawić obrazek lub zdjęcie na stronę HTML tak naprawdę na samym początku wystarczy uzupełnić tag <img> o atrybut "src" z konkretną ścieżką pliku graficznego lub jego adresem URL.

Do tego zadania można użyć chociażby zamieszczonego wyżej generatora lub napisać to samodzielnie, podobnie jak w tym przykładzie:

<img src="ściezka_do_pliku_lub_adres_url">

Ścieżka zdjęcia czyli "src" nie jest jedynym możliwym atrybutem tagu <img>. Można nadać mu też tekst alternatywny za pomocą atrybutu "alt", zdefiniować szerokość za pomocą "width", lub wysokość za pomocą "height". Tego rodzaju możliwych do zastosowania atrybutów jest jeszcze więcej, ale schemat pozostaje niezmiennie prosty. Do otwartego tagu dopisujemy po prostu nazwa_atrybutu="wartość", czyli np.: alt="opis obrazka".

Jak poprawnie określić ścieżkę pliku?

Jeżeli nie chcemy podawać całego adresu URL do obrazka lub zdjęcia, możemy po prostu określić jego ścieżkę. Jeżeli plik znajduje się w tym samym katalogu, w którym znajduje się konkretna podstrona HTML, wystarczy po prostu wprowadzić jego nazwę i rozszerzenie, jak np: <img src="nazwapliku.png"> Jeżeli mielibyśmy do czynienia z sytuacją, w której w katalogu, do którego należy podstrona znajdowałby się np. folder o nazwie assets, a w nim znajdowałby się folder o nazwie images i dopiero w tym miejscu przebywałby nasz plik graficzny, wówczas moglibyśmy się do niego odwołać w następujący sposób: <img src="assets/images/nazwapliku.png"> Analogicznie, jeżeli to plik HTML byłby umieszczony np. w katalogu subpages/admin a zdjęcie znajdowałoby się głównym folderze pod nimi, musielibyśmy się niejako do niego "cofnąć" poprzez wykorzystanie ../. Przykładowo: <img src="../../nazwapliku.png">