Jak wstawić zdjęcie w HTML?

Jeśli tworzysz witrynę i chcesz ją utworzyćnaprawdę ciekawe, żywe i wizualne, z pewnością będziesz musiał dodawać zdjęcia do swoich stron. W tym artykule przyjrzymy się, jak wstawić obraz do html i xhtml.

Tagi obrazów

Tag odpowiedzialny za wyświetlanie obrazu na stronie jest uniwersalny dla wszystkich wersji html. To jest znacznik <img>. Może to przybrać trochę inną formę, ale esencja pozostaje taka sama.

Na przykład w html możesz po prostu użyć pojedynczego tagu <img>. W XHTML wszystkie znaczniki muszą być prywatne. Dlatego na końcu tagu musisz umieścić właściwy ukośnik: <img />.

Atrybuty tagów graficznych

Podczas wstawiania obrazów jest używanych kilka atrybutów. Rozważmy je konsekwentnie.

Kluczowym atrybutem jest src. Określa adres obrazu, który chcesz przesłać na stronę internetową. Przykład HTML będzie wyglądać następująco: <img src = "http://mysite.ru/picture.png"> Przykład XHTML będzie wyglądać następująco: <img src = "http://mysite.ru/picture.png" />
Dwa kolejne atrybuty odnoszą się do rozmiarów obrazu. Mianowicie, atrybut width sugeruje określenie szerokości i wysokości odpowiednio wysokości obrazu. Przykład dla html: <img src = "/ images / picture.png" width = "300" height = "100"> Dla xhtml: <img src = "picture.png" width = "300" height = "100" / > Należy przypisać dalsze atrybuty dla pojedynczego języka programowania, ponieważ wszędzie istnieje wyraźna analogia.
Atrybut alt musi zawierać krótki opiszdjęcia. Tekst ten pojawia się, gdy obraz nie jest załadowany, lub jeśli użytkownik wyszuka hasło informacji poprzez wyszukiwarki w „Pictures”. Przykładem linia kodu: <img src = "/ images / Picture.png" alt = "ciekawych zdjęć">
Tytuł podaje tytuł obrazu. Jest to również ważne przy wyszukiwaniu niezbędnych informacji przez użytkownika. <img src = "/ images / picture.png" title = "Picture">
Atrybut vspace określa pionowe wcięcie pomiędzy obrazem i innymi elementami znacznika (na przykład tekst). Wartość jest mierzona w pikselach.
Atrybut hspace określa to samo wcięcie, ale w poziomie. Wartość jest również mierzona w pikselach. Przykładem ostatnich dwóch atrybutów <IMG src = "/ zdjęcia / Picture.png" vspace = "5" hspace = "5">
Używając atrybutu border, obraz jest obramowany ramką. Jeśli wartość nie jest specjalnie ustawiona, domyślną wartością jest 0. Przykład: <img src = "/ images / picture.png" border = "1">

Dodatkowe funkcje dla obrazów

Obraz można wstawić nie tylko do tekstustronę internetową, ale także tworzą tło. Obraz-tło jest atrybutem body tag lub stylu css. Więcej informacji na temat wstawiania obrazu w tle witryny dowiesz się w artykule Jak zrobić tło w html.

Możesz wstawić obraz do tabeli. Wtedy zdjęcie nie będzie tłem dla całej strony, ale tylko dla określonego obszaru. W ten sposób miejsce obrazu zostanie naprawione, niezależnie od otaczającego tekstu. Aby to zrobić, musisz utworzyć tabelę HTML. Przypomnijmy, że znacznikiem tabeli jest tabela, znacznikiem łańcuchowym jest tr (string), znacznikiem kolumny jest td.

Zdjęcie wstawiane jest po tagu td. Oto, jak to będzie wyglądać: