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

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

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

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

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

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

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

Из рисунка видно, что образовалось пустое пространство справа от картинки, строка текста плотно прилегает к краю картинки. Чтобы этого не было, воспользуемся специальными атрибутами для тега <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

У меня картинка почемуто не появляется.

Вы правильно указали путь?

точное название картинки напиши, или проверь всю ли правильно написал

Картинка не появилась; появилась пустая рамка, Делаю все так, как показываете. До этого не смогла вставить фоновое изображение. Бьюсь 2 дня, но не могу понять, в чем дело.

Путь правильно указали? Название картинки на английском? Расширение правильно указали?

У меня проблема: картинку что-то блокирует. поэтому она не появляется. что это может быть?

Проверьте правильно ли вы прописали к ней путь? Название картинки указано латинскими буквами? В некоторых случаях изображения могут блокироваться, если установлен плагин блокирования рекламы.

Оставить комментарий