Co to jest tag obrazu w HTML?

Podczas tworzenia strony internetowej za pomocą HTML znacznik obrazu służy do wstawiania zdjęcia lub grafiki w określonym miejscu na stronie. Istnieje wiele sposobów wykorzystania obrazów na stronach internetowych, od dodawania zainteresowania po używanie ich jako narzędzia nawigacyjnego lub dostarczania informacji. Istnieje również kilka różnych formatów obrazów, których można użyć. Bez względu na to, jak i jaki obraz jest dodawany do strony internetowej, tag obrazu jest zawsze wymagany.

Aby dodać obraz, tag obrazu jest dołączany tam, gdzie ma on pojawiać się na stronie. Na przykład, jeśli obraz zostanie wstawiony po tym akapicie, znacznik obrazu lub <img> zostanie dodany do dokumentu HTML po tym akapicie. Tag <img> definiuje wszystkie obrazy w HTML. Jest określany jako pusty znacznik, ponieważ zawiera atrybuty i nie ma znacznika zamykającego. Atrybuty to opcje dostępne dla określonego znacznika HTML.

Gdyby do dokumentu HTML dodano tylko <img>, nic nie byłoby widoczne, ponieważ atrybuty tagu nie zostały uwzględnione. Najważniejszym atrybutem <img> jest „src”, co oznacza źródło. Atrybut src wskazuje, gdzie plik obrazu faktycznie się znajduje, lub jest to adres pliku obrazu. Ponieważ obraz jest używany na stronie internetowej, jego lokalizacja zostanie podana jako adres URL. W dokumencie HTML obraz wyglądałby następująco: <img src = "URL" />.

W szczególności adres URL wskazuje miejsce przechowywania obrazu. Na przykład, jeśli obraz komputera o nazwie nazwa_komputera.jpg byłby przechowywany w folderze obrazów na stronie www.wisegeek.com, adres URL zostałby zastąpiony przez: <img src = "www.wisegeek.com/images/computer. jpg "/>. Gdy przeglądarka otwiera stronę internetową, wyświetla obraz z dołączonym znacznikiem obrazu.

Tag obrazu ma wiele innych różnych atrybutów. Pozwalają użytkownikowi dostosować wygląd obrazu na stronie. W przypadku tego znacznika powszechnie stosowane są następujące atrybuty: alt, border, size i align.

Atrybut alt oznacza tekst alternatywny i jest wyświetlany, jeśli przeglądarka nie może wyświetlić obrazu. Odczytywany jest również tekst alternatywny dla tych użytkowników, którzy mają problemy wizualne i wybierają wyświetlanie tekstu na obrazach. W powyższym przykładzie alternatywny tekst można podać jako alt = "obraz komputera".

Atrybut obramowania dodaje obramowanie do obrazu o grubości zależnej od podanej liczby pikseli. Może to być szczególnie przydatne, gdy tło obrazu i tło strony internetowej są podobne i pożądane jest wyraźne rozróżnienie. Na przykład border = "10" umieści ramkę o grubości 10 pikseli wokół obrazu.

Ważne są również atrybuty rozmiaru , ponieważ szerokość i wysokość mogą być użyte do określenia dokładnego rozmiaru obrazu. Tych atrybutów należy używać bardzo ostrożnie, ponieważ ich zmiana może wpłynąć na proporcje lub jakość wyświetlanego obrazu. Atrybuty rozmiaru nie zmieniają rzeczywistego pliku, tylko sposób wyświetlania go w przeglądarce.

Wyrównanie atrybutu określa sposób wyrównania obrazu w porównaniu z tekstem na stronie. Istnieje kilka różnych opcji dla tego atrybutu, w tym górny, dolny, środkowy, lewy, prawy, absmiddle, absbottom, podstawowy i tekstowy. Te tagi pomagają również określić, w jaki sposób tekst na stronie wyrównuje się z obrazem.