2020-06-08
165
Как вставить в html картинку
Для вставки картинки в html используется тег <img>. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.
Практическое задание
1.Саздаем папку
2.В папке создаем файл index.html в Notepad++ (как создать файл смотрим предыдущий урок), сохраняем.
3. Открывает файл index.html с помощью Notepad++ в него записываем следующие примеры, сохраняем.
4. Открываем index.html с помощью браузера и проверяем результат.
Пример 2.1. Использование тега <img>
| index.html |
| <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Вставка картинок</title> </head> <body> <img src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> </body></html> |
Этот код преобразуется на странице в следующее:
В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src="/img/kartinka.jpg", т.е. указывается относительный адрес.
Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.
|
|
|
Пример 2.2. Вывод нескольких картинок в html друг за другом
| index.html |
| <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Вставка картинок</title> </head> <body> <img src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"><img src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> </body></html> |
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.
Пример 2.3. Использование альтернативного текста (alt) в img
Рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img>, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.
| index.html |
| <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Вставка картинок</title> </head> <body> <imgsrc="123.jpg"><img height="50" alt="Примеризображения" src="321.jpg"> </body></html> |
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.
Теперь рассмотрим подробно все атрибуты тега <img>.
3. Атрибуты и свойства тега <img>
1. Свойство align="параметр" — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
- left — выравнивание по левому краю
- middle — выравнивание середины изображения по базовой линии текущей строки
- bottom — выравнивание нижней границы изображения по окружающему тексту
- top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
- right — выравнивание по правому краю
|
|
|
