|
||||||||||||
Меню сайта
Реклама на сайте:
|
Как вставить картинку на сайт в HTMLСтатья № 2 Существует достаточно много оснований, чтобы добавить на веб-страницу какое-либо изображение.
Этим изображением может быть, например, логотип, фотография, иллюстрация, схема или диаграмма. Для добавления изображений на страницу вы также можете воспользоваться свойством каскадных таблиц стилей (CSS)Использование сопутствующих изображений в тексте значительно улучшает восприятие предоставляемой вами информации читателями. В HTML для вставки изображений на страницу существует соответствующий тег <img>. И сегодня мы подробно рассмотрим то, как использовать этот тег, какие атрибуты он поддерживает, и ответим на несколько частых вопросов, которыми задаются начинающие вебмастера.
Вставка изображения (картинки) на страницу в HTMLОбратите внимание, что данный тег является одиночным и не требует закрывающего тега </img>. src – содержит ссылку до изображения, может быть как абсолютной (ссылка до файла, который находится на другом сайте), так и относительной (ссылка до файла, который находится на вашем сайте). Допустимые форматы: JPEG (JPG), PNG, GIF, BMP, ICO, APNG, SVG и Base64. Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем. align – задает выравнивание изображения относительно рядом находящегося текста (создание обтекания изображения текстом). <img src="/img/logo.png" align="right" /> Как вставить изображение (картинку) в таблицуБез разницы куда вы хотите вставить изображение на сайте, например это может быть таблица или, блок div. Во всех случаях вставка осуществляется все по тому же принципу: <table> <tr> <td>Картинка</td> <td> <img src="/img/logo.png" alt="картинка"> </td> </tr> </table> Картинка ссылка в HTMLОчень часто возникает вопрос у молодых вебмастеров, как сделать картинку ссылкой?
На самом деле все очень просто. Для этого достаточно обрамить тег <img >тегом <a >(ссылкой). <a href="/about_us" title="Главная"> <img src="/img/logo.png" alt="Логотип"> </a> Использование альтернативного текста (alt) в imgМногие не раз слышали что, рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img>, чтобы застраховать себя от случая, что картинка не доступна. В первом варианте мы не задавали размеры картинки. Во втором варианте мы задаем размеры картинки. На примере видно использование альтернативного текста. 1.<img src="pictures.jpg"> 2.<img width="400" height="50" alt="Пример изображения" src="321.jpg">
|