Obraz nie jest wstawiany bezpośrednio do tekstu. Przeglądarce podaje się jej nazwę oraz instruuje się, gdzie i jak umieścić ją na ekranie. Aby to zrobić, użyj pojedynczego tagu HTML img. Określa lokalizację obiektu graficznego na stronie internetowej.
Jeśli wiele atrybutów jest opcjonalnych dla tagów, to tag img musi mieć co najmniej jeden parametr - adres obrazu. Ten atrybut nazywa się src:
- - to wyświetli plik goat-j.webp" />
- - z tym parametrem tagu img przeglądarka załaduje obraz umieszczony w Internecie na stronie megasellmag.ru.
Atrybuty wyrównania
Aby pozycjonować obrazy na stronie za pomocą HTML, używany jest tag img, którego atrybuty są odpowiedzialne za umieszczenie obrazu na stronie i charakter jego zawijania tekstu.
Domyślnie przeglądarka umieszcza obraz na środku ekranu, a tekst nie zawija się wokół niego. Tag img pozwoli Ci wyrazić swoją niezgodę z przeglądarką za pomocą atrybutu align (alignment).
- obrazek zostanie umieszczony przy lewej krawędzi strony, a tekst obejmie go po prawej.
Zachowanie tekstu będzie podobne, jeśli obraz zostanie umieszczony po prawej stronie (align=right), pośrodku (align=middle), u góry (align=top), u dołu(align=bottom) i center (center).
Ustawienia i rozmiary
Aby zapobiec wnikaniu tekstu do obrazów, tag img uzyskał specjalne atrybuty -hspace (marginesy poziome/poziome) i vspace (marginesy pionowe/pionowe), które określają ilość wcięć tekstu od krawędzi obrazów w piksele.
Obrazek nie tylko posłusznie odsunie się od tekstu o określoną wartość, ale także odejdzie od krawędzi strony, więc najlepiej unikać dużych wcięć.
Bardzo ważne są wymiary geometryczne obrazów, które są nie tylko pożądane, ale czasami wręcz konieczne do określenia prawidłowego wyświetlania obrazu. W tym celu używane są atrybuty szerokość (szerokość) i wysokość (wysokość), których wartość jest ustalana w pikselach lub procentach.
Jeśli określisz tylko szerokość, wysokość zostanie wybrana automatycznie z oryginalnymi proporcjami. Rozmiary procentowe pozwalają na umieszczenie obrazu w prawej części strony, niezależnie od wielkości okna przeglądarki, a taka potrzeba często się pojawia.
Inne opcje
Atrybut border otacza obraz w ramce o określonej grubości, czego przeglądarka domyślnie nie robi.
Obramowanie może również mieć pozornie bezsensowną szerokość zerową (granica='0'), ale dzieje się tak, dopóki obrazek nie stanie się linkiem, kiedy przeglądarka automatycznie okrąży go niebieskim obramowaniem, nie czekając na instrukcje.
Niektórzy niecierpliwi użytkownicy, wściekli na niską prędkość Internetu, po prostu wyłączają wyświetlanie zdjęć. W takich przypadkach podawany jest parametr alt, który umożliwia wprowadzenietekst alternatywny, który użytkownik zobaczy w polu, w którym obraz spieszy się do załadowania.
Jeśli nie podobają Ci się możliwości parametru alt, tag img może oferować atrybut longdesc, którego wartością jest adres URL dokumentu z bardziej szczegółowym opisem.
Atrybuty usemap i ismap informują przeglądarkę, że obraz będzie obrazem, w którym hiperłącza są oddzielnymi obszarami (mapa linków), tylko parametr usemap określa mapę nawigacyjną na serwerze, a ismap - mapa na po stronie klienta.
Opis łącza 1 na poniższym rysunku:
Egzotyczne przedmioty
Atrybut lowsrc instruuje przeglądarkę, aby najpierw pobrała kopię (lub inną alternatywę) oryginalnego obrazu o niższej jakości, a zatem „lżejszej”. Ta sztuczka jest zapewniona w przypadku niskiej prędkości Internetu dla użytkownika. Oryginalny obraz po przesłaniu zastępuje „fałszywy”.
Rzadziej używany atrybut galleryimg znacznika img wywołuje panel sterowania obrazem (po najechaniu na niego), umożliwiając otwarcie domyślnego folderu Moje obrazy i wydrukowanie, zapisanie lub wysłanie obrazu pocztą e-mail. Możesz wyłączyć panel, ustawiając parametr galleryimg na no/false i włączyć go, ustawiając yes/true.
W nowej specyfikacji HTML5 niektóre tagi mają przestarzałe niektóre parametry. Na przykład atrybuty img lowsrc, border, longdesc i name zostały wycofane.
