Html код вставки изображения. Добавляем изображения на WEB-страницу, а еще видео и аудио

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

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

src="image/primer.jpg" >

Изображения – пожалуй, именно они формируют наше общее представление о всемирной сети. Согласитесь, что графическую информацию человек запоминает в целом намного лучше, чем текстовую. Поэтому изображения являются важной частью любого сайта и любой веб-странички. И поэтому я хочу вам рассказать, как вставить в html картинку.

Вставка картинки в html с помощью тега

Наверняка вы знаете, что все команды в html выполняются с помощью тегов. Вот и для изображений придумали свой тег — . Он одинарный, то есть у него нет закрывающей части.

Самым главным атрибутом img тега является src (source) – путь до картинки. В нем вы записываете адрес, по которому расположено изображение. Его можно записать как абсолютный (сайт/images/images2/image.jpg ) или как относительный (images/images2/image.jpg ).

Оба эти пути ведут к одному и тому же файлу image.jpg , который лежит в папке image2. Та в свою очередь лежит в директории images, а та – в корневой папке. Если записывать все относительно, то при смене доменного имени у вашего сайта все останется работоспособным. Например, редактор wordpress по умолчанию вставляет абсолютные адреса. Но лично я домен менять не собираюсь и меня это устраивает.

Дополнительные атрибуты и оформление через css

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

• width и height – ширина и высота картинки. Ее можно задать в соответствующих атрибутах в теге img
• align – выравнивание картинки по отношению к тексту. По умолчанию выравнивается слева (left). Также можно поставить справа и по центру (right, center)
• alt – альтернативный текст, который выведется если у пользователя отключен показ картинок в браузере. Полезно его заполнять
• title – практически то же самое. Своего рода описание картинки, которое выведется при наведении курсора на нее
• vspace и hspace – вертикальный и горизонтальный отступ картинки от остального контента. Внимание! Атрибуты уже устарели и лучше эти отступы задавать через таблицу стилей
• class – стилевой класс, который привязывается к картинке и накладывает на нее какие-то стили

Вставляем такую милую картинку. Здесь мы повесили класс preview и теперь с css через него можем обратиться к ней и прописать любые стили. Например, такие:

Preview{ padding: 20px; margin: 10px; border: 5px solid orange; transform: skewX(10deg); box-shadow: 0 0 15px 10px purple }

Подведу итог

Итак, для отображения картинки вам всего лишь нужно написать тег img и прописать в нем атрибут src, который задает путь к изображению. Все остальное — это дополнительные возможности — выравнивание, размеры, альтернативный текст, повороты, рамки и т.д.

И наконец, в идеале все это должно прописываться через CSS. То есть не задавать размеры в атрибутах, а повесить на картинку дополнительный стилевой класс, который и будет определять размеры. То же самое с выравниванием, которое в css можно сделать с помощью свойства text-align , а также плавающих блоков float .

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

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

Не награмождай html-страницу картинками, страница должна быть легкой и не отпугивать посетителей. Посетитель всегда должен усваивать главную информацию и не отвлекаться, вставляй картинки в HTML только там, где в этом есть необходимость.

на странице Атрибуты тега BODY я уже говорил, что картинки могут быть фоном html-страницы, а сейчас я вам расскажу, как эти же картинки можно использовать на более высоком уровне, нежели фон.

И так, для того, что вставить картинку в HTML-страницу, тебе понадобится тег , у которого есть самый главный атрибут SRC. Данный атрибут необходим для указания адреса к картинке. Допустим, тебе нужно ставить картинку image.jpg в какое-нибудь место на html-страницу, а наша картинка будет находится в одной папке (каталоге)) со страницей, тогда надо писать вот такой html-код:

Если картинка и html-страница находятся в разных папках или каталогах, то надо написать путь к изображению относительно страницы. Например, наша html-страница находится в папке или каталоге news, в этом же каталоге или папке находится подкаталог (папка) pop, в котором и расположена наша картинка image.jpg, то для ее вставки надо писать так:

Кроме атрибута src у тега есть еще парочка необязательных, но важных атрибутов:

• width — ширина картинки (можно указывать пиксели или проценты);
• height — высота картинки (можно указывать пиксели или проценты).

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

Как я уже написал, размеры картинки можно указывать как в пикселах, так и в процентах. Приведу просто пример:

еще пример html-кода:

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

• left — картинка расположится слева, а текст, который рядом — справа;
• right — картинка расположится справа, а текст, который рядом — слева.

Приведу HTML-код:

Текст, радом с картинкой.

а браузер выведет следующее:

Текст, радом с картинкой.

HTML-код для значения right:

Текст, радом с картинкой.

на html-странице будет так:

Текст, рядом с картинкой.

Для того, чтобы текст не обтекал картинку, можно использовать ранее упомянутый тег BR на странице Форматирование текста в HTML. Кстате, тег BR имеет атрибут clear, со своими значениями значения:

• left — не обтекать текстом, который выровнем по левому краю;
• right — не обтекать текстом, который выровнем по правому краю;
• all — не обтекать текстом, который выровнем по левому и правому краям.

Без атрибута align текст обтекат по умолчанию справа картинки и почти вплотную. Если ты хочешь чтобы текст не обтукал вплотную картинку, можно использовать вот такие атрибуты:

• vspace — делает верхнее и нижнее поля в пикселях;
• hspace — делает боковые поля (слева и справа) в пикселях.

Приведу простой html-код на примере:

Вот такая красивая картинка.

Что получится по данному примеру попробуй посмотреть сам.

Вокруг картинки еще можно сжделать рамку с помощью атрибута border и указывать в пикселях её величину. Чем больше значение, тем больше рамка вокруг изображения. HTML-код будет таким:

на html-странице будет вот так:

Я написал основные теги HTML, необходимые для вставки картинок на html-страницу. Далее я расскажу тебе, как создать ссылки в HTML, а также как сделать картинку ссылкой.