2020-06-08
178
| index.html |
| <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Вставка картинок</title> </head> <body> <img align="right" src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> </body></html> |
2. Свойство alt="текст" — подсказка/описание картинки. Выполняет сразу две важные функции:
- Выдает подсказку при наведении
- Если в браузере отключены изображения, то выводится этот текст
Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.
3. Свойство border="ЧИСЛО" — задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border
Пример 3.2. Вывод картинки в html с рамкой (границей)
| index.html |
| <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Вставка картинок</title> </head> <body> <img border="5" src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> </body></html> |
Преобразуется на странице в следующее:
4. Свойство bordercolor="цвет" — задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.
Пример 3.3. Вывод картинки в html с цветной рамкой
| index.html |
| <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Вставка картинок</title> </head> <body> <img border="5" bordercolor="#000" src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> </body></html> |
Справка
- Используйте элемент HTML <img> для определения изображения
- Используйте атрибут HTML src для определения URL-адреса изображения
- Используйте атрибут HTML alt для определения альтернативного текста для изображения, если он не может быть отображен
- Используйте атрибуты HTML width и height для определения размера изображения
