Как вставить изображение в HTML

Добавить изображения на веб-сайт или страницу в социальной сети - замечательный способ украсить страницу. HTML (язык разметки гипертекста) имеет много особенностей для веб-программирования, но код, необходимый для вставления изображений, крайне прост.

Метод 1

Метод 1 из 1:

Вставить изображение в HTML

Загрузить PDF

1
Закачайте изображение на бесплатный хостинг, вроде Photobucket или TinyPic, позволяющий использование ресурсов другими серверами. На некоторых сайтах это запрещено, так как занимает пропускную способность и место на сервере.
- Если у вас есть платный хостинговый аккаунт, закачайте изображение туда. Это надежнее бесплатного сайта.
Откройте новый документ в текстовом редакторе (например, в Notepad), или страницу на сайте, или профиль, где можно менять HTML.
3
Начните с тега img. Тег img одиночный, то есть ему не нужен закрывающий тег, хотя, чтобы добиться соответствия стандартам XHTML, можно добавить пробел и слэш.
- <img />
4
Есть много доступных элементов, но совершенно необходим только:src. Он указывает на местонахождение или URL-адрес изображения.
- <img src="URL изображения" />
5
Далее надо добавить элемент alt. Он отвечает за текст, который будет показан, если изображение по каким-то причинам не загрузится. Этот текст также могут использовать слепые пользователи, использующие программы для чтения экрана.
- Если навести курсор на изображение, то запасной текст будет показан в пояснении действия, но только в Internet Explorer. Кроссбраузерное решение (работает в Firefox и др.) - использовать элемент title в дополнение к alt. Не делайте это, если не хотите поясненить действия.
- Например:<img src="URL изображения" alt="How.com.vn Русский: на всякий случай" title="Пояснение действия"/>
6
Теперь элементами height и width можно задать размеры изображения, а также указать пиксели или проценты. Заметьте, изменив таким образом размер, вы измените размер показываемого изображения, браузер все равно будет загружать исходный размер изображения. Если ваше изображение слишком велико, то измените его размер в программе-редакторе изображений, подойдет PicResize.com
- <img src="URL изображения" alt="How.com.vn Русский: На всякий случай" title="Пояснение действия" height="50%" width="50%" />
- <img src="URL of image" alt="How.com.vn Русский: На всякий случай" title="Пояснение действия" height="25px" width="50px" />
Реклама

Советы

Значение этих элементов указывается либо в пикселях, либо в процентах от 1 до 100.
Картинку или изображение можно поставить куда угодно на веб-странице с элементом top, bottom, middle, right, left и т.д.
Элемент hspace используется для создания пустого пространства по горизонтали от изображения, влево или вправо. Элемент vspace - сверху или снизу.
Не перестарайтесь с изображениями, все будет выглядеть хаотично и непрофессионально.
Для логотипов и мультиков подходят изображения GIF, для сложных изображений вроде высококачественных фотографий лучше использовать JPEG.
- Изображения GIF поддерживают от 8-битного цвета до 256 цветов. Используя этот формат для фотографий, в качестве вы что-то потеряете.
- Изображения GIF поддерживают прозрачность. Может быть один бит прозрачности, то есть один цвет можно сделать прозрачным.
- Чередование также поддерживается, т.е. еще до загрузки пользователь может оценить, как изображение будет выглядеть.
- Формат GIF также поддерживает анимацию.