Добавление рисунка
Для добавления изображения на веб-страницу используется тег , атрибут src которого определяет адрес графического файла. Общий синтаксис добавления изображения будет следующий.
URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample.gif и хранится в папке images корня сайта.
- Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg , мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
- Если перед адресом добавляется упоминание протокола http ( http:// ), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
- Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 10.1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif . Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif .
Рис. 10.1. Пример размещения файлов
- Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif .
Рис. 10.2. Пример размещения файлов
В примере 10.1 показано несколько способов добавления рисунка на веб-страницу.
Пример 10.1. Вставка изображения в документ
Добавление рисунков 
Как правило, в качестве формата графического файла выступает GIF и JPEG.
Картинки в HTML
Поверьте, это совсем не сложно. Для вставки картинок используется непарный тэг с атрибутом src. Выглядит это так . Где «my foto.jpg»> это ваша картинка. Для того чтобы было меньше путаницы, я рекомендую в каталоге, где расположена стартовая страница, создавать папки по назначению. Например, для картинок создайте папку image и складывайте туда все изображения, которые будут использоваться у вас на сайте. Тогда для того, чтобы вставить картинку на страницу, вы должны указать путь к этому изображению. Если у вас оно расположена в папке image то нужно прописать так: . Если папка расположена на уровень вверх, то путь к ней будет выглядеть следующим образом: . Ну, а сейчас выведем изображение чайника.
Тэг также имеет атрибут выравнивания align со значениями left-слева, right-справа. Это означает, что при использовании значения left атрибута align картинка будет прижата к левому краю, а текст будет обтекать картинку справа и, наоборот, при использовании значения right.
Существует еще несколько атрибутов, которые располагают текст в определенную позицию относительно картинки.
Теперь поэкспериментируем с картинками. Возьмем предыдущий пример или создадим новый. Если Вы будете создавать новый документ, не забудьте написать «шапку» из обязательных тэгов. Итак:
.
Проба пера
Футбол — это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, кроме рук . Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию желтой или даже красной карточкой.
.
Теперь добавим в тэг размеры картинки и расстояние от нее до текста.
Футбол — это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, кроме рук . Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию желтой или даже красной карточкой.
Для того, чтобы расположить картинку в центре, используйте тэги выравнивания в тэге , т.к. они действуют не только на текст, но и на изображения.
Чтобы уяснить для себя параметры изображений, поиграйтесь с атрибутами картинки.
Да, чуть не забыл. Картинку можно сделать фоном странички. Для этого используется атрибут background с указанием пути к картинке в тэге . Выглядеть это будет так:
где image/fon.jpg — путь к картинке.
Наряду со вставкой картинки в виде фона используйте атрибут bgcolor=»#хххххх» для задания цвета фона. Если не задавать цвет фона, то по умолчанию фон будет иметь белый цвет. И если Вы используете белый цвет шрифта, а картинку пользователь не захочет загружать, то он не увидит вашего текста. А так, если картинка не будет, по каким-либо причинам, загружена, то текст все равно будет виден.
Ну, я думаю, с картинками мы разобрались. Не бойтесь экспериментировать, закрепляйте свои знания примерами и у Вас все получится.
В следующей главе мы рассмотрим использование ссылок в HTML-документе.
Как указать в img путь картинки?
У меня локальный сайт. Есть страница статьи я в статье среди текста хочу вставить изображение которое находится не в папке проекта а например в папке загрузки или если оно в любой другой папке на компе.
Я сделал так
— Но фото на сайте не отображается. Почему так? как будет правильно?
- Вопрос задан более трёх лет назад
- 18761 просмотр
Комментировать
Решения вопроса 1
протокол file:/// поставь спереди
file:///C:\РАБОЧИЙ СТОЛ\Все папки\фото\Обои рабочий стол\1.jpg
Ответ написан более трёх лет назад
Vakha1 @Vakha1 Автор вопроса
Так тоже не отображается.
Vakha1, значит путь к файлу неправильный. Скопируйте из проводника.
Vakha1, в свойствах файла бывает полный путь к файлу.
Vakha1, только смотрите. Если у вас сайт на локальном хосте, у вас не будет такого доступа к файлам. А если просто .html файл открыли в браузере, то можно.
Vakha1 @Vakha1 Автор вопроса
Да у меня сайт на локальном хостинге. Это значить так указывать пути не как не получится?
Еще вопрос. Вот мне на сайте в статью нужно добавить фото это значить это фото сперва нужно будет загрузить на сервер и потом к нему указывать путь да?
Nikita-Fast @Nikita-Fast
Vakha1, для начала надо путь указать не от диска а от папки на сервере , к примеру мы имеем локальный хост с таким каталогом :
то ваши изображения должны быть не в file:/// а в папке img на локальном хосте и путь будет такой 
Vakha1, да. Файлы должны быть в опубликованной папке. Иначе это была большая дыра. Ты ко мне на сайт заходишь, а я у тебя на сервере копаюсь. По этому это не получится.
Установил путь к рисунку как /images/pic.gif, но рисунок не отображается на веб-странице. Почему?
Слэш (символ /) перед именем файла или папки обозначает, что отсчет ведется от корня сайта. Соответственно, путь /images/pic.gif следует понимать так. В корне сайта находится папка с именем images, а в ней располагается файл pic.gif. Данный способ записи работает под управлением веб-сервера, поэтому на локальном компьютере браузер интерпретирует путь как c:/images/pic.gif , а такой папки и файла, вероятнее всего, нет (пример 1).
Пример 1. Путь к файлу относительно корня сайта
HTML5 IE Cr Op Sa Fx
Путь к файлу Если документ делается исключительно для локального использования, то пути к изображениям следует указывать относительно текущей веб-страницы. Для документов с последующей публикацией на веб-сервере пути относительно корня очень удобны. Они имеют компактную форму, а при переносе файла из одной папки в другую продолжают действовать.
HTML по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?