Неотъемлемой частью работы с html кодом является умение правильно вставлять изображения в html страницу. Вставка изображения html происходит путём использования простого тега <img>.
Но перед тем как мы займёмся непосредственно самой вставкой изображения в html, я рекомендую вам заранее заготовить какую нибудь картинку для этих целей, а так же создать рядом с нашим файлом index.html специальную папку в которой будут находиться все изображения для нашего учебного сайта, саму эту папку можно назвать также img. Теперь помещаете в эту папку своё заготовленное изображение, я например его назвал kashok.jpg, ну хороше, теперь идём дальше.
Отлично, теперь после того как вся подготовительная работа сделана, мы будем вставлять в наш тестовый сайт специально заготовленное для этого изображение, которое находиться в папке img.
<img src="img/kashok.jpg" width="640" height="480" alt="Это Я!" align="left" hspace="10" vspace="10" title="Это Я!">
Выше я уже говорил что изображения вставляются в html документ при помощи тега <img>, это сокращенный вариант английского слова "картинка", этот тег одинарный, его закрывать уже не надо в отличий от того же тега <p> например.
Но сам этот тег <img>, в свою очередь браузеру пока что не о чём не говорит, для того чтобы этот тег стал работать, ему нужно придать некоторые обязательные атрибуты, и первый атрибут это src, он является сокращённым вариантом английского слова "источник". В общем этому атрибуту нужно указать полный путь до того изображения, которое мы хотим вставить на сайт.
Мы прописали в этом атрибуте следующий адрес: src="img/kashok.jpg", это говорит браузеру что нужно зайти в папку img и найти в ней изображение с названием kashok.jpg. Но это еще не всё что нужно сделать для благополучного появления картинки на нашем сайте.
Дальше в теге img, желательно еще и указать размеры нашего изображения по ширине и высоте. Конечно это можно и не указывать, но тогда браузер будет дольше эту картинку загружать прежде чем она появиться в html документе, это происходит потому что ему с начало надо будет загрузить эту картинку, затем самому высчитать её размеры и уже потом отображать её на сайте.
По этому давайте привыкать указывать в теге img еще и размеры изображения, а делается это так: В начале нужно узнать эти размеры изображения, для этого просто выделите его курсором мыши и не отводите его от картинки, теперь просто подождите, через некоторое время появиться всплывающее окошко, в котором будет указана ширина и высота данного изображения.
Как мы видим, ширина нашей картинки 640px, а высота 480px. Теперь эти значения нам и нужно прописать в специальные для этого атрибуты.
Первый атрибут, это width, в нём мы указываем ширину: width="640".
Следующий атрибут height, в этом атрибуте мы уже указываем высоту: height="480".
После всего этого, так же не помешало бы и прописать нашему изображению альтернативное название, это нужно в случае того если у посетителя вашего сайта будут отключена функция показа изображений в браузере, тогда у этого пользователя заместо самого изображения и подставиться это альтернативное название.
Прописывается оно в обычном атрибуте alt: alt="Это Я!"
Выше мы изучили обязательные атрибуты, это источник src, ширина width, высота height и альтернативный текст alt. Но есть еще и другие атрибуты которые тоже не помешало бы знать для вставки изображения html.
Если вы вставите изображение на сайт, то заметите то что браузер отводит под это изображение всё свободное пространство, хотя само оно шириной всего в 500 пикселей, а весь текст уже идёт ниже этого изображения:
И это мы можем исправить если применим уже знакомый нам атрибут align. Этот атрибут может нам помочь сделать картинку как бы обтекаемой как слева так и справа. Чтобы текст обтекал картинку с правой стороны, то достаточно прописать: align="left", тогда вид в браузере уже будет таким:
А можно сделать и так чтобы текст обтекал картинку и с левой стороны, для этого прописываем уже align="right".
Но тут перед нами возникает уже другая проблема, текст прилегает к картинке в плотную и между ними ни остаётся ни какого расстояния, а это смотрится как то не очень. Но эта проблема тоже исправляется через применение атрибутов.
Чтобы отодвинуть текст от картинки по горизонтали на 10 пикселов, нужно прописать: hspace="10".
А для того чтобы сделать расстояние от картинки по вертикали, прописываем следующее: vspace="10".
И последний маленький атрибутик который заслуживает своего внимания это title, он даёт возможность придавать картинке всплывающий комментарий, когда курсор мыши будет на неё наведён.
Комментариев нет:
Отправить комментарий