Мы продолжаем изучение HTML, и в этом уроке пойдет речь о том, как вставить изображение в HTML документ. Для этого существует специальный тег, который называется <img>. Тег <img> это сокращение от английского image, что обозначает изображение. У этого тега НЕТ парного закрывающегося тега, тег <img> является одинарным тегом.
При создании любого сайта, для изображений создается отдельная папка, из которой потом картинка и выводятся. Поэтому давайте создадим эту папку. Заходим в ранее созданную общую папку HTML, в ней уже находится файл index.html, рядом создаем папку с название images. И так папку создали, теперь в нее скопируйте какую-то картинку, не большого размера формата jpg или png.
Если Вы проделали все что написано выше то тогда идем дальше. Возвращаемся к нашему редактору как выбрать редактор можно узнать тут, а в коде создадим заголовок потом создадим параграф, а между ними вставим ту самую картинку, что лежит в паке images.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
Заголовок для вставки изображения.
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
</body>
</html>
Одного тега <img> для результата мало, поэтому должен быть указан самый главный, основной атрибут src, сокращение от английского - source, что переводится как – источник. С помощью этого атрибута мы указываем адрес, где расположено наше изображение. В нашем же случае это images/Название картинки.jpg. Не которые зададут вопрос: почему путь к картинки задается с папки images, а не, например с HTML? – Путь к изображению записывается относительно нашего документа index.html, т.е. относительно главной страницы сайта или, как еще говорят, корня сайта.
Так же, в нашем теге <img> нужно указать высоту и ширину картинки, чтобы браузер точно знал какие размеры отводить под данное изображение. Если же не указывать, то браузер все отобразит правильно, но у него на это уйдет больше времени, так как браузер сначала загрузит картинку, а потом только определит ее размеры. Прежде чем указать размеры изображения нам их надо узнать самим. Как это делается? Нажимаем правый клик мыши на картинке и выбираем пункт свойства, в открывшемся окне выбираем вкладку Подробно. У Вас должен получиться результат, как показан ниже.
И так, размеры узнали теперь приступим к нашим атрибутам и что бы указать ширину используется атрибут width="", для высоты атрибут height="".
Также, является обязательным атрибут alt ="", так как: первое - без него Ваш код не пройдет валидацию по коду, а второе - если у кого-то в браузере картинки отключены или по какой-то причине картинка не загрузилась, то в место нее выведется альтернативный текст который и указывается в внутри атрибута alt ="", в примере выше это слово images.
Вот мы и рассмотрели основные четыре атрибута которые желательно всегда указывать для каждой картинки это источник картинки, ширина картинки, высота картинки и альтернативный текст.
Ниже кратко расскажу о других существующих атрибутах, они уже устарели и в HTML не используются, но нужно знать, что такое есть.
И первый такой атрибут это align="". Если мы посмотрим на результат работы кода выше, то увидим, что картинка расположилась слева, а справа осталось пустое место. Иногда нужно чтобы там не было пустого места, а текст заполнил его. Для этого и используется атрибут выравнивания. Можно выровнять по левому краю - left и правому краю - right. Если атрибут указан align="left", то картинка будет находиться с лева, а текст ее будет обтекать с правой стороны и наоборот, если указать align="right".
Ели мы посмотрим на результат, то текст очень близко прилегает к изображению. Эти отступы увеличивается с помощью атрибутов, они, повторюсь, уже устарели и все это сейчас делается через CSS. Это атрибуты hspace="" - отступ по горизонтали и vspace="" - отступ по вертикали. В результате наш тег <img> с атрибутами получил такой вид:
Все значения, что отмечены в атрибутах считаются в пикселах - px. Вот так, с помощью HTML вставляется изображения в документ, рекомендую поиграться со значениями в атрибутах, чтобы лучше понять, как оно работает, а на этом все, жду в следующем уроке.
CSS