Как вставить картинку в HTML

Для того, чтобы добавить картинку на веб-страницу используется тег <img> с обязательным атрибутом src, который указывает путь на то, где лежит картинка. Тег <img> не требует закрывающего тега. Рассмотрим пример. Возьмем любую картинку, например, эту:

Как вставить картинку в HTML

У меня эта картинка называется img.jpg. Сохраним ее в папке, где лежит файл index.html.

Открываем файл index.html в текстовом редакторе notepad++, и запишем в шаблоне следующую строку: <img src="/img.jpg">:

Как вставить картинку в HTML

Открываем страницу в браузере:

Как вставить картинку в HTML

Давайте поместим эту картинку где нибудь в тексте:

Как вставить картинку в HTML

Не забываем сохранять изменения. Обновляем страницу в браузере и смотрим:

Как вставить картинку в HTML

Из рисунка видно, что образовалось пустое пространство справа от картинки, строка текста плотно прилегает к краю картинки. Чтобы этого не было, воспользуемся специальными атрибутами для тега <img>:

  1. align - определяет как рисунок будет выравниваться по краю и способ обтекания текстом. Нам нужно, чтобы справа от картинки вместо пустого пространства был текст. Допишем: <img src="/img.jpg" align="left">
  2. hspace - горизонтальный отступ от изображения до окружающего контента. Сейчас расстояние от текста до картинки равно нулю, давайте сделаем его равным 5 пикселей. Допишем в строке: <img src="/img.jpg" align="left" hspace="5px">. Таким образом мы увеличили расстояние от краев рисунка справа и слева на 5 пикселей.
  3. alt - альтернативный текст для изображения (в случае, если браузер не отображает картинки, то вместо нее будет показываться альтернативный текст). Здесь мы можем указать название картинки: <img src="/img.jpg" align="left" hspace="5px" alt="Мой новый автомобиль">. Для того, чтобы подсказка всплывала в браузерах Chrome, Mozilla, Safari, Opera, допишите атрибут title, который выполняет туже функцию: <img src="/img.jpg" align="left" hspace="5px" alt="Мой новый автомобиль" title="Мой новый автомобиль"> Сохраните изменения. Откройте браузер и наведите курсор мыши на картинку. Появится всплывающий текст:

Ознакомиться со всеми атрибутами для тега <img>, а также c атрибутами для остальных тегов можно на сайте http://htmlbook.ru/html/img А мы двигаемся дальше.

Видеоматериал по этому уроку:

http://youtu.be/DB9ZwQgGISQ

Источник: http://psd-html-css.ru/html/kak-vstavit-kartinku-v-html

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Как вставить картинку в HTML | | 2012-03-19 18:12:00 | | Статьи Web-мастеру | | Для того, чтобы добавить картинку на веб-страницу используется тег с обязательным атрибутом src, который указывает путь на то, где лежит картинка. Тег не требует закрывающего тега. Рассмотрим пример. | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: