Добавляем изображения на WEB-страницу, а еще видео и аудио! Работа с изображениями в HTML (как вставить картинку, изменить ее размер, сделать картинку ссылкой)

Это делает возможным внутри одной страницы отображать содержимое другой страницы. Например:

Большинство изображений, которые человек видит на сайтах, тоже являются содержимым другой страницы. Вот, в частности, адрес смайлика в формате.gif:

А вот способы добавления картинки на сайт, которые можно выделить, если посмотреть код страницы:

HTML: тег
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif " alt="смайлик" height="30" width="30">
CSS: свойства и

CSS: псевдоэлементы и

HTML: тег векторной графики

CSS: без URL

Как узнать адрес картинки и скопировать его

Скопировать адрес изображения можно несколькими способами:

Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено скопировать URL, щёлкнуть по необходимому пункту.
Рис.1 Если навести на фото и нажать на правую клавишу мышки, то в Mozilla Firefox откроется контекстное меню с таким пунктами
Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено изучить характеристики фотографии, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Информация об изображении»; в Internet Explorer см. пункт «Свойства»), в открывшемся окне выделить адрес рисунка,
- нажать на правую клавишу мышки, в появившемся контекстном меню щёлкнуть по пункту «Копировать».
Рис.2 Если в Mozilla Firefox навести на фото, нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Информация об изображении», то откроется окно, где можно посмотреть список картинок, используемых на странице, их адрес, альтернативный текст (содержимое в атрибуте alt), фактический размер и используемый масштаб
Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Открыть изображение»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью или с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера,
- нажать комбинацию клавиш клавиатуры Ctrl + C .
Рис.3 Так выглядит страница смайлика.
Её URL: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
На сенсорных устройствах (смартфон, планшет) долго без движения держать палец над фото, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (он может называться «Просмотр картинки»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью или с помощью с помощью CSS. Затем долго жать на адрес в адресной строке браузера. После того, как появятся ползунки и весь URL будет выделен (в случае необходимости, ползунки можно раздвинуть на необходимое расстояние), щёлкнуть в появившейся панели кнопку «Копировать».
Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу фонового изображения, щёлкнуть по необходимому пункту. Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера (см. Рис.3),
- нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать».
- нажать комбинацию клавиш клавиатуры Ctrl + C .

Как сохранить изображение

Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено сохранить картинку, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Сохранить изображение как...»), в открывшемся окне выбрать папку на компьютере, куда будет сохранён рисунок.

Если фотография является фоновой картинкой, то нужно предварительно перейти на страницу картинки (см. Рис.3).

Как добавить картинку на веб-страницу

Сначала изображение нужно загрузить с компьютера на хостинг сайта, в социальную сеть (ВКонтакте, Google+ и т.п.), Яндекс.Диск или Гугл.Диск , чтобы у рисунка появился свой адрес в интернете.

Если есть визуальный редактор, то очерёдность действий обычно следующая:

установить курсор мышки в то место, где должна будет появиться фотография,
нажать на иконку, похожую на или на ,
выбрать файл с компьютера,
если есть возможность, заполнить альтернативный текст (он же описание изображения).

Итог: картинка будет вставлена на страницу сайта, а самое главное — загружена на сервер веб-проекта. У неё теперь будет свой адрес в интернете. И теперь можно на вкладке «HTML» поправить предоставленный визуальным редактором код, так как часто визуальный редактор добавляет ненужные теги, да и возможности HTML и CSS несравнимо большие.

Если URL уже есть, но другого малоизвестного сайта, то всё же такую фотографию лучше сохранить на компьютер, а потом загрузить на сервер сайта, если данное действие разрешено владельцем фото, дабы не нарушить авторские права, так как

на некоторых сайтах может быть запрещено использование адреса изображений на других ресурсах (подробнее про запрет хотлинкинга ).
сайты недолговечны и спустя время с удалением веб-проекта, исчезнет и картинка на вашем сайте, оставив вместо себя в лучшем случае только альтернативный текст.

Если нет визуального редактора, то очерёдность действий обычно следующая:

создать папку image ,
создать в папке image файл.htaccess , содержимым которого будет # закрыть доступ к http://сайт.ru/image/ Options -Indexes # закрыть доступ к http://сайт.ru/image/.htaccess order allow,deny deny from all
загрузить в папку image изображение, которое именуется, допустим, plain.gif (в дальнейшим все картинки также загружать в эту папку),
на HTML-странице использовать URL вида http://сайт.ru/image/plain.gif , например, http://сайт.ru/image/plain.gif " alt="смайлик" height="30" width="30">

Далее рассмотрим, как вставить картинку в html документ и настроить ее отображение. Для работы понадобится только вышеупомянутый редактор и браузер .

Если все же у вас нет Notepad++ или проблема с его скачиванием и вас мучает вопрос - как вставить картинку в html в блокноте?

Ответ прост, работа в обычном блокноте отличается лишь тем, что в нем отсутствует подсветка кода разными цветами, для удобочитаемости и разделения кода от самого текста.

Как вставить картинку в HTML страничку

После установки редактора, в контекстном меню, выпадающем по правому клику на любой файл, появится соответствующий пункт.

Теперь для редактирования такого файла достаточно вызвать контекстное меню правым кликом по нему, далее «Edit with Notepad++».

Для наблюдений результатов изменений в коде будет использована тестовая страница.

Чтобывставить картинку в htmlкод используется одиночный строчный тегimg . Основной его атрибут – источник фото.

Это может быть любой файл, на жестком, так и ссылка на существующее в сети изображение. Обрамляется тегами< p>p> .

Для добавления фото, понадобится вписать такую строку:

Вот так она будет выглядеть в редакторе:

А вот так ее наличие отобразится на странице:

Src указывает на источник картинки. Одного названия файла достаточно, если файл с изображением находится в одной с документом html директории.

Если фото находится в другой директории, то понадобится указывать путь к нему, начиная с папки, в которой располагается html-файл.

Совет! Важно учитывать, что в пути к заданному файлу фото не должно быть кириллических символов. К тому же при написании названия файла важен регистр.

В качестве источника можно использовать иллюстрацию из сети. Для этого понадобиться только указать ссылку на него в атрибуте, вместо расположения на винчестере.

Таблица форматирования пути к файлу

Чтобы изменить размер изображения понадобится добавить два атрибута:width иheight . Значение оформляется так же, как и для любого атрибута.

После знака равенства необходимо указать размер в пикселях.

При наличии четко заданных размеров иллюстрации, отображаться на странице она будет следующим образом:

Выравнивание и редактирование картинки

Как вставить фото в html по центру? Для назначения положения картинки на странице служит align , относящий к тегуp .

Для него допустимо несколько значений:center (центр),left (левый край) иright (правый край).

Вот выглядит изображение на странице с прилеганием к центру и правому краю.

Важно! Чтобы назначить расположение фото относительно текста, а не страницы, атрибутalignнужно использовать в тегеimg.Значения такие же, как и у атрибута тегаp.

В зависимости от заданного значения, изображение будет менять свое положение относительно текста.

Чтобы разместить изображение в тексте, достаточно вписать тегimg (со всем обрамлением) в текстовом блоке в .

Для добавления рамки используется атрибут border с числовым значением, которое означает толщину рамки в пикселях.

Чтобы задать вертикальный и горизонтальный отступы, используются vspace иhspace . Их числовое значение означает расстояние от текста до картинки, непосредственно в пикселях.

В примере атрибутуvspace задано значение в 50 пикселей.

Размер горизонтального отступа укажет расстояние, на котором будет находиться текст при обтекании изображения.

Еще два полезных атрибута –alt иtitle . Первый задает альтернативный текст изображению.

С ним, если изображение по каким-то причинам не подгрузится, то вместо него отобразится указанный в значении атрибута текст.

Для того, чтобы испробовать возможности атрибута, можно переместить файл из директории, указанной в коде.

Текст, указанный как значение атрибутаtitle , будет выводить подсказку при непосредственном наведении мыши на картинку. В коде его оформление не отличается от прочих атрибутов.

После обновления страницы результат будет таким:

Таблица атрибутов тегаimg

голос[ов]

	Описание
**src =””**	Указатель источника изображения. Может использоваться как сохраненное на жестком диске, так и размещенное в сети (указывается адрес вместо расположения на жестком диске).
**width =””; height=””**	Указатели высоты и ширины изображения. Если задан только один, то второй автоматически масштабируется, в соответствии с первым. Числовое значение означает количество пикселей.
align= ””	Атрибут расположения изображения относительно текста. Допустимые значения:top, middle, bottom, left, right .
**border =””**	Назначает рамку вокруг изображения. Числовое значение соответствует толщине рамки в пикселях.
**vspace =””; hspace=””**	Указатели отступа от соседних элементов по вертикали и горизонтали. Значение указывает количество пикселей между элементами. При обтекании текстом, атрибут назначает расстояние до текста.
**alt =””**	Назначает альтернативное описание на случай, если картинка почему-то не прогрузилась. Значение произвольное.
**title =””**	Задает текст подсказки при наведении. Значение произвольное.

Как вставить картинку на страницу html

Чтобы вставить на сайт изображение -картинку, (фотографию или любую графику) надо указать путь к источнику (к файлу-картинке) при помощи тега img Тег img - это сокращение от английского imagе (имидж, изображение), Источник - по английски source, сокращенно src
Важно : вес и размер картинки (небольшой), имя файла (без пробелов и только латинские буквы и цифры), формат картинки (расширения. GIF, JPG, JPEG, PNG. Возможно использование анимированных картинок (GIF).
Путь к картинке указывается абсолютный или относительный, в зависимости от того, где картинка находится у вас или в интернете на сторонних ресурсах (тогда надо указать URL)

Туман. Художник Владимир Княгницкий

Код. В коде указан относительный адрес (относительно папки у меня на сервере)

Код. В коде указан абсолютный адрес картинки

Размер изображения и толщина рамки

Реальный размер этой картинки: Ширина (width)="499" Высота (height)="434". Не прибегая в фотошопу можно сделать так, чтоб на экране картинка выглядела больше или меньше своих реальных размеров. Для этого используются атирибуты width и height . Например, чтоб картинка выглядела в 2 раза меньше, указываем ширину (width)="250" и высоту (height)="217" . И добавляем рамку толщиной 4 пикселя(border ="4"). Слева изображение с рамкой, справа, для срвнения, без рамки

Атрибуты тэга IMG

src -Обязательный атрибут, указывающий URL рисунка (его адрес, месторасположение)
IMG SCR= " img/kartinka.gif"

align - Выравнивает изображение к одной из сторон документа
align="left" - Выравнивание по левому краю
align="right" Выравнивание по правому краю
align="bottom"Выравнивание по нижнему краю
align="top" Выравнивание по верхнему краю
align="middle" Выравнивание по середине

alt - Выводит текст к картинке. Альтернатива графике, если она не грузится
border - Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется.

width ширина картинки в пикселях или процентах
height - высота картинки в пикселях или процентах

hspace отступ по горизонтали
vspace отступ по вертикали

Примеры выравнивания картинки с текстом при помощи HTML

Картинка размещена перед текстом без указания каких либо атрибутов. Без форматирования текста. В результате получилось то,что вы видите. Картинка расположена слева от текста про помощи атрибута align со значенем left . align="left" .
Это, конечно, намного лучше предыдущего варианта расположения картинки с текстом. Но не думаю что кому то нравится, когда изображение прижато вплотную к тексту. На картинке бабочка, бабочка, бабочка. И текст, текст, текст про бабочку, бабочку, бабочку. Слишком близко к изображению. Картинка не должна сливаться с текстом, даже если текст написан просто как текст, чтоб наглядно продемонстировать обтекание картинки текстом. Очень важно чтобы на экране картинкал не сливалась с текстом, чтобы не раздражала, чтобы радовала глаз и была на своем месте. Достаточное количество текста нагляднее десонмтрирует пример.
Есть правила верстки в книгоиздательстве, должны быть правила верстки и при сайтостроении. Картинка расположена слева от текста про помощи атрибута align со значением LEFT, отступ от текста - 20 пикслелей по горизонтали.
align="left" hspace=20 Отступы добавляются при помощи атрибутов HSPACE (отступ по горизонтали) и VSPACE (отступ по вертикали) . В данном случае отступ по вертикали равен нулю, чтобы верх картинка был на одном уровне с верхней строкой текста. Если отступ равен нулю, он не указывавется. Ну а отступ по вертикали указан в атрибуте. И хотя в настоящее время вебмастеров убеждают отказаться от атрибутов HTML и полностью перейти на CSS, мне кажется что простота такого метода дает ему право на существование.
КОД Картинка расположена справа от текста про помощи атрибута align о значением RIGHT , добавлены отступы при помощи атрибутов HSPACE (отступ по горизонтали). и VSPACE (отступ по вертикали). В принципе всё то же, что в предыдущем варианте, только вместо лево , указано право и картинка вставлена не перед текстом, а примерно посредине. Форматирование при помощи атрибутов align (линейное выравнивание) и при помощи отступов по горизонтали и вертикали дает вполне нормальный результат. Картинка обтекается текстом слева, сверху, и снизу (если текста достаточно много). Отступ текста от картинки слева, сверху и снизу рвняется 20 пикселям. Все так, как мы указали в коде.
Два вида выравнивая (по левому краю и по правому краю) используются чаще всего, а остальные... Почти все остальные считаются устаревшими. На современных сайтах все изображения (да и вообще весь дизайн) оформлятеся при помощи каскадных таблиц стилей (CSS)

Текст, текст, текст продолжение текста

Картинка расположена про помощи атрибута align со значением middle . Добавлены отступы при помощи атрибутов HSPACE (отступ по горизонтали) и VSPACE . Выглядит это вот так, код записан ниже.. На этом с атрибутами позиционирования картинок заканчиваем

Как использовать атрибуты alt и title.

Атрибуты alt и title содержат название картинки. ALT -это альтернатива изображению, если оно по каким то причинам не загрузилось. Title - это титульная надпись на картинке. Она появляется при наведении мышки на картинку
Если вы делаете сайт только для себя, то можете не применять эти атрибуты. Если сайт предназначен для людей, то эти атрибуты надо заполнить дав четкое точное описание изображения.
Во-первых, это удобно для посетителей, во вторых, необходимо для поисковых машин. Именно текст внутри тега IMG позволяет поисковым роботам индексировать картинки, сортировать их по ключевым словам и выдавать их по запросам пользователя. Кстати, Яндекс даже предупреждает, что если и у картинки отсутствует содержательное описание, она не попадают в поиск. Индексируются картинки только стандартных графических форматов (JPEG, GIF и PNG). Фоновые изображения и картинки, раскрывающиеся при помощи скрипта, не индексируются.

КОД картинки с заполнеными alt и title

Как сделать картинку ссылкой

Любая ссылка делается при помощи тега А и атрибута href (если это гиперссылка) или name если (ссылка на абзац или элемент, расположенный на этой же странице).
Начальный тег Источник картинки закрывающий тег

Добавление изображений на ваш сайт или профиль социальной сети - это отличный способ украсить вашу страницу. HTML (Hypertext Markup Language) отличается большим количеством функций веб-разработки, и при этом код, необходимый для добавления изображений, является довольно простым.

Итак, как вставить картинку в HTML?

Загрузите вашу картинку на сайт бесплатного хостинга изображений, например, Photobucket или TinyPic, которые обеспечивают постоянный доступ к загруженному файлу. После копирования ссылка на изображение появится непосредственно на сайте хостинга. Вместе с тем, если вы оплачиваете премиум-услуги такого сервиса, лучше использовать дополнительные возможности. Это более надежно, поскольку на бесплатных хостингах изображений картинки иногда не открываются по причине перегрузки. После того как вы «залили» картинку на один из онлайн-сервисов, откройте на своем компьютере новый документ в текстовом редакторе (например, в Notepad) или зайдите на панель редактирования нужной страницы вашего сайта (где вы сможете изменить код HTML).

Написание тегов

Продолжая говорить о том, как вставить картинку в HTML, начните с тега IMG. После него вы должны добавить пробел и знак слэш перед закрывающим символом. Таким образом, вы должны набрать следующую комбинацию -< img />. Кроме этого, существует множество доступных атрибутов, но только один из них является абсолютно необходимым. Таковым является адрес или URL вашего изображения. Он указывается следующим образом - < img src ="URL_вашей_картинки" / >.

Альтернативный текст

Далее, пытаясь вставить картинку в HTML, вы должны добавить атрибут Alt. Это определяет альтернативный текст в том случае, если изображение не загружается. Такой текст также предназначен для слабовидящих пользователей, которые используют программы чтения с экрана. Если навести курсор мыши на изображение, альтернативный текст отобразится во всплывающей подсказке, однако эта функция присутствует только в Internet Explorer. Для того чтобы увидеть его в других приложениях, потребуются специальные плагины. Чтобы ввести такую всплывающую подсказку, введите ее в дополнение к Alt. (Вы можете по желанию пропустить этот шаг). Если вы используете эту функцию, ссылка будет выглядеть следующим образом:

< img src ="URL_вашей_картинки" alt ="текст_всплывающей_подсказки" title ="Tooltip" />

Размеры и параметры картинки

Продолжая выполнять инструкцию, как вставить картинку в HTML, вы можете дополнительно указать размер изображения, используя атрибуты высоты и ширины с указанием в пикселях или в процентах. Обратите внимание, что картинка будет отображаться за счет изменения размеров при загрузке. Браузер по-прежнему будет первоначально использовать фактический размер изображения. По этой причине, если ваша картинка слишком большая, лучше изменить ее размер с помощью программ для редактирования фотографий, а не только в адресе ссылки. Теперь ваш код может выглядеть примерно так:

< img src = "URL вашей картинки" alt = "текст всплывающей подсказки " title = "Tooltip" height ="50%" width ="50%" />

< img src ="URL вашей картинки" alt ="текст всплывающей подсказки " title ="Tooltip" height ="25px" width="50px" / >

Прочие атрибуты

Значение для этих атрибутов является либо положительным значением пикселей, либо процентным соотношением с оригиналом (1-100%). Говоря о том, как вставить картинку в HTML, также можно отметить, что она может быть размещена в любом месте веб-страницы с атрибутом выравнивания - верхний, нижний, средний, правый, левый и т.д. Атрибут HSPACE используется для вставки изображений по горизонтали по левой и правой стороне, VSPACE - для загрузки по вертикали между верхней и нижней частью страницы и относительно другого содержимого. Если говорить в общем о HTML - как вставить картинку, и как дополнить контент страницы, главное - не переусердствовать. В противном случае ваш ресурс будет выглядеть неаккуратно и слишком «пестро». Для отображения логотипов или анимации формат GIF будет лучшим решением, а для качественных картинок и фотографий больше подходит формат JPEG.

Д ля вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию (динамические баннеры), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега , закрывающего тега нет.

Атрибут SRC

Посредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image . Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg . Далее мы будем обращаться к ней для обучения.

Ну что, попробуем вставить картинку на страницу? Пишем код (путь - URL, прописывается в зависимости от местонахождения папки с изображениями):

src="image/primer.jpg" >

То, без чего не создать сайт: ∼ ∼