Do wstawienia obrazka na stronę internetową służy znacznik <img>.
Nie trzeba go zamykać. Musi zawierać minimum te 2 atrybuty: src oraz alt.
Podstawowa konstrukcja wygląda następująco:
<img src="lokalizacja pliku graficznego" alt="opis grafiki">grafika z internetu
Jeśli chcesz na stronie umieścić grafikę, która została znaleziona w Internecie, upewnij się najpierw, że możesz jej legalnie użyć. Skorzystaj z baz darmowych obrazów (np. Pixabay, Pexels), lub skorzystaj z wyszukiwarki materiałów na licencjach Creative Commons.
Po odnalezieniu obrazka kliknij go prawym przyciskiem myszy. Jeśli używasz przeglądarki Google Chrome lub Opera, wybierz opcję „kopiuj adres obrazu”. Jeśli używasz Microsoft Edge, wybierz „kopiuj link obrazu”. Skopiowany link wklej jako wartość atrybutu src. Jako wartość atrybutu alt wpisz krótki opis tego, co przedstawia grafika.
<img src="zastąp ten tekst skopiowanym linkiem" alt="krótki opis grafiki">grafika z pliku
Na stronie dobrze (i bezpiecznie) jest używać zdjęć zrobionych samodzielnie. Jeśli widać na nich inne osoby, przed opublikowaniem zdjęcia gdziekolwiek w Internecie uzyskaj ich zgodę!
Najlepiej zacząć od utworzenia osobnego folderu, w którym znajdą się pliki graficzne. Dobrym pomysłem jest struktura pokazana na obrazku:
Konstrukcja znacznika img jest identyczna, jak poprzednio. Jednak tym razem jako wartość atrybutu src należy podać ścieżkę dostępu do pliku graficznego, jego nazwę i rozszerzenie. By sprawdzić, jakiego typu jest plik graficzny, warto kliknąć go prawym przyciskiem myszy i wybrać opcję właściwości:
Gotowy kod różni się od poprzedniej sytuacji jedynie wartością atrybutu src.
<img src="ścieżka dostępu" alt="krótki opis grafiki">przykłady kodu
obraz z Internetu:
obraz z pliku:
Szerokość i wysokość obrazka
Atrybuty src i alt są obowiązkowe, znacznik img musi je posiadać. Można również używać dodatkowych. Czasem, aby łatwo zapanować nad obrazkiem, używa się atrybutów:
width– do określenia szerokości grafikiheight– do określenia wysokości grafiki
Wymiary podajemy w pikselach. Atrybuty wpisujemy wewnątrz znacznika img. Uwaga: łatwo w ten sposób zepsuć proporcje grafiki. Podanie atrybutów nie zastąpi także odpowiedniej optymalizacji obrazów na potrzeby stron internetowych.
