Otwórz plik HTML strony sieci Web, do której chcesz dodać obraz, w edytorze tekstu, takim jak Notatnik lub oprogramowanie do tworzenia sieci Web.
Dodaj tag do pliku. Umieść znacznik za elementem, pod którym ma być wyświetlany obraz, gdy plik HTML jest otwierany w przeglądarce. Znacznik nie ma osobnego znacznika zamykającego. W tagu musisz określić źródło obrazu, który chcesz wyświetlić, wpisując lokalizację obrazu w Internecie za pomocą src atrybut. Jeśli obraz jest przechowywany w tym samym folderze co plik HTML, wpisz nazwę i rozszerzenie obrazu. Jeśli obraz jest przechowywany w innym miejscu, wpisz pełny adres URL obrazu.
Dodaj Alt atrybut do tagu. W HTML5 atrybut alt jest wymagany. Użyj tego atrybutu, aby opisać obraz na wypadek, gdyby nie można go było załadować. Jeśli obraz nie może się wczytać, przeglądarka wyświetla tekst wprowadzony po atrybucie alt. Ponadto atrybut alt jest ważny w przypadku oprogramowania czytnika ekranu używanego przez osoby z niepełnosprawnością wzroku. Oprogramowanie odczytuje tekst w atrybucie alt, aby osoba z niepełnosprawnością wzroku przeglądająca Twoją witrynę mogła usłyszeć, co jest na zdjęciu, mimo że tego nie widzi.
Określ wymiary obrazu w pikselach za pomocą wzrost oraz szerokość atrybuty. Jeśli nie określisz wymiarów, przeglądarka nie będzie wiedziała, ile miejsca pozostawić na obraz podczas wczytywania strony. Powoduje to, że strona ładuje się nierówno, ponieważ tekst ładuje się jako pierwszy, pozostawiając niewielką przestrzeń na obraz, a następnie rozskakuje się, gdy obraz się ładuje i powoduje rozszerzenie przestrzeni. Przy określonych wymiarach przeglądarka pozostawia dokładnie taką ilość miejsca między innymi elementami na stronie, aby obraz został wypełniony po zakończeniu ładowania.
Przetestuj swój kod, aby upewnić się, że obraz wyświetla się we właściwej lokalizacji, otwierając plik HTML w przeglądarce.
Użyj CSS, aby przenieść obraz na lewą lub prawą stronę ekranu lub owiń go tekstem. Na przykład możesz użyć style="float: left;" lub style="float: prawo;" w obrębie tagu.
Jeśli nie znasz zarówno wysokości, jak i szerokości obrazka, możesz użyć samego atrybutu wysokości lub szerokości. Możesz także użyć CSS do określenia wysokości i szerokości; na przykład w przypadku obrazu o wymiarach 100 na 100 pikseli użyj atrybutu stylu: style="height: 100px; szerokość: 100px."
Przekształć obraz w klikalny link, umieszczając tag w parze tagów „a href”. Na przykład, jeśli chcesz, aby obraz łączył się z Facebookiem, wpisz następujące polecenie.
Nie używaj atrybutu alt, aby poprawić SEO swojej strony. Wyszukiwarki od dawna wiedzą, że niektórzy projektanci stron internetowych próbują wypchać atrybut alt dodatkowymi słowami kluczowymi i dlatego ignorują tekst w atrybucie alt.
