Работа с изображениями в HTML (как вставить картинку, изменить ее размер, сделать картинку ссылкой). Вставляем графический файл на web-страницу

За вставку картинок в HTML-документ отвечает тег и его атрибуты, главным из которых можно считать src , задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.

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

Раньше у тега был ещё один обязательный атрибут - alt , но с приходом HTML 5 он был переведён в разряд желательных. alt устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.

Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width (указывает ширину) и height (определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).

Допустим, нам требуется добавить на страницу изображение image.png с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:

Навигационная карта

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

Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:

- контейнер, внутри которого описывается карта изображения.
- тег внутри , описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов и придётся поставить. Связка - работает точно так же, как связки
1. и
  - , создающие списки.
  - shape - атрибут тега , задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
  - cords - определяющий координаты области атрибут. Также принадлежит тегу . Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника - координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
  - usemap - атрибут тега img , который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.
  Пример карты изображения
  
  Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg . Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.
  
  1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:
  
  2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).
  
  3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:
  
  4. С помощью тегов area определяем активные области:
  
  5. Закрываем карту:
  
  Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:
  
  Навигационная карта
  
  Несмотря на то, что в качестве примера был рассмотрен самый простой случай, который только можно придумать, он наглядно демонстрирует принцип создания навигационных карт. Дальше - дело техники и определения координат, с точки зрения HTML ничего не усложняется.
  
  Как вставить картинку на страницу 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 , как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег и его атрибуты весьма пригодится в современном Интернете. Но главное тут - чувство меры!
  
  П ереизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и используй только там, где это нужно. И будет тебе счастье!
  
  В уроке про я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
  
  § 1. Как вставить картинку
  
  Д ля вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC . Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
  
  src="logo.jpg">
  
  Е сли картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:
  
  images/logo.jpg">
  
  А можно не мучиться и указать полный адрес картинки . Например, так:
  
  http://www..png">
  
  В последнем случае браузер отобразит код так:
  
  Примечание. Если картинка расположена на вашем компьютере , а вставить вы её хотите на страницу в Интернете , то ничего не выйдет. Для этого картинку нужно сначала переместить в какое-нибудь место в Интернете (например, ). И указать в коде страницы полный адрес до этого места с картинкой .
  
  П омимо обязательного атрибута SRC у тега IMG есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.
  
  § 2. Указание размеров картинки
  
  Н ачнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:
  - width - ширина картинки в пикселах или процентах;
  - height - высота картинки в пикселах или процентах.
  Е сли используются эти атрибуты, то сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмёт) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
  
  Ш ирину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
  
  width="50" height="20">
  
  width="10%" height="5%">
  
  § 3. Альтернативный текст
  
  В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута ALT :
  
  В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута ALT :
  
  П овторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.
  
  § 4. Выравнивание картинки
  
  С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
  - left - изображение располагается у левого края страницы, а текст обтекает картинку справа;
  - right - изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.
  Н апример, HTML-код
  
  браузер покажет так
  
  А этот HTML-код:
  
  будет выглядеть вот так:
  
  Д ля прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про ). У тега BR есть атрибут clear , который может принимать три значения:
  - left - прекращение обтекания текстом картинок, выровненных по левому краю;
  - right - прекращение обтекания текстом картинок, выровненных по правому краю;
  - all - прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.
  Всем привет!!! По этой статье вы научитесь вставлять картинку в HTML документ. Это вовсе не сложно. Но вначале я бы хотел вам дать несколько рекомендаций по поводу картинок на веб-странице.
  
  Совет: когда будете размещать картинки на веб-страницу, не увлекайтесь анимированными картинками, так как это отвлекает внимание читателя от самого важного - текста. Лучше используйте обычные картинке без анимации.
  Старайтесь использовать на веб-страничках уникальные картинки. Как сделать уникальную картинку вы можете почитать , а взять красивые картинки вы можете .
  
  Приступим.
  
  Как вставить картинку в html?
  Так, как я говорил - здесь сложного ничего нет, добавьте этот html код.
  
  kartinka - это название картинки
  jpg - это расширение картинки. Расширение может быть gif, png, bmp.
  
  Если картинка размещена в папке images, тогда путь к картинке будет таким:
  
  images - название папки, где лежит картинка "kartinka.jpg ".
  
  Если картинка лежит на другом сайте, тогда код будет таким:
  
  https://www.сайт - это адрес сайта.
  
  Пример :
  Как вставить картинку в html
  
  Для этого просто заключите картинку между ссылочным элементом:
  
  Атрибуты для картинок
  
  ALIGN - этот атрибут предназначен для обтекания или выравнивания картинки по горизонтали.
  left - выравнивание по левому краю, текст будет обтекать справа.
  right - выравнивание по правому краю, текст обтекает слева.
  
  Результат :
  
  выравнивание по правому краю
  
  HSPACE - отступы от картинки по горизонтали (в пикселях).
  VSPACE - отступы от картинки по вертикали (в пикселях).
  
  Результат :
  
  отступы от картинки
  
  HEIGHT - высота изображения (пикселях).
  WIDTH - ширина изображения (пикселях).
  
  Результат :
  
  TITLE - это заголовок картинки. Заголовок будет отображаться, если навести на картинку курсор мышки.
  
  title="Всем привет - сайт!!! ">
  
  Результат :
  
  заголовок картинки
  
  BORDER - этот атрибут отвечает за размер рамки вокруг картинки. Рамки появляются в таких случаях, когда вы картинку сделаете ссылкой. Если установить нулевое значение атрибута BORDER , рамка отображаться не будет.
  
  Результат :
  
  А если поменять значение border на 5:
  
  Результат :
  
  Любую картинку можно сделать фоном. Для этого в теге body пропишите атрибут background .
  
  background="ваш_фон.jpg" >
  
  На картиночном фоне может отображаться текст.
  
  Пример :
  Как вставить ссылку-якорь в html
  Результат :
  
  Картинка как фон
  
  На этой ноте можно было бы и закончить тему "Как вставить картинку в HTML", но знаю, что многих интересует вопрос, а как поставить картинку по центру.
  Чтобы поставить картинку по центру, вам достаточно применить такой фокус:
  
  Вот теперь точно все. Переходим к следующему уроку.
  
  Здравствуйте уважаемые читатели блога! В этой статье вы узнаете все о том как вставить изображение на html страницу . У вас есть несколько изображений, которые вы хотите поместить на свою страничку или вы хотите поместить на свой сайт логотип? Все это легко. Прочитав эту статью, вы сможете без каких-либо трудностей вставлять картинки на свои html страницы. Для этого мы подробно поговорим о теге и его атрибутах, кратко рассмотрим форматы графических файлов, таких как gif, jpeg и png, а также посмотрим новые возможности HTML5, которые упрощают вставку видео и аудио на сайт.
  
  Из-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег . Встретив такой тег с адресом, браузер сначала запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом, а только затем отображает его на Web-странице.
  
  Все графические изображения и вообще любые данные, которые хранятся в отдельных от web-страницы файлах называются внедренными элементами страницы.
  
  Прежде чем вставлять картинки и подробно рассматривать тег , стоит немного узнать о графических форматах.
  
  Форматы графических изображений.
  
  Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.
  
  1. Формат JPEG (Joint Photographic Experts Group ). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными. Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.
  
  2. Формат GIF (Graphics Interchange Format ). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.
  
  3. Формат PNG (Portable Network Graphics ). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.
  
  При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:
  - GIF используется в основном для анимации;
  - PNG — формат для всего остального (иконки, кнопки и др.).
  Вставка картинок в html страницы
  
  Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег . Браузер помещает изображение в том месте веб-страницы, где встретит тег .
  
  Код вставки картинки в html страницу имеет такой вид:
  
  Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src . Что такое я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла .
  
  Приведу еще несколько примеров указания адреса файла с изображением:
  
  — этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.
  
  В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:
  
  Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.
  
  Тег является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега
  — абзац:
  
  Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:
  
  Тогда html-код страницы со вставленной картинкой будет таким:
  
  Сайт об автомобилях.
  
  Сайт об автомобилях.
  
  Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.
  
  Научным языком автомобиль это:
  
  Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.
  
  Классификация автомобилей
  
  Автомобили бывают следующих типов:
  - Легковой;
  - Грузовой;
  - Внедорожник;
  - Багги;
  - Пикап;
  - Спортивный;
  - Гоночный.
  Все права защищены. 2010 год.
  Сайт об автомобилях.
  
  И смотрим результат отображения в браузере:
  
  Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега .
  
  Атрибут alt — как запасной вариант
  
  Поскольку файлы с изображениями хранятся отдельно от веб-страниц, то для их получения браузеру приходится делать отдельные запросы. А что если изображений на странице будет очень много и скорость подключения к сети маленькая, тогда на загрузку дополнительных файлов потребуется значительное время. А еще хуже если изображение было удалено с сервера без вашего ведома.
  
  В этих случаях сама веб-страница будет успешно загружена, только вместо изображений будут отображаться белые прямоугольники. Поэтому, чтобы сообщить пользователю информацию, что представляет из себя изображение применяется . С помощью этого атрибута указывается так называемый текст замены, который будет отображаться в пустом прямоугольнике пока изображение не загрузится:
  
  И примерно так это выглядит:
  
  Задаем размеры изображению
  
  Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width и height . Вы можете использовать их, чтобы указать размеры изображения:
  
  width="300" height="200" >
  
  В обоих атрибутах указывается размер в пикселях . Атрибут width указывает браузеру какой ширины должно быть изображение, а атрибут height какой высоты. Эти два атрибута можно применять вместе и по отдельности. Например, если вы укажите только атрибут width, то браузер подберет высоту автоматически пропорционально указанной ширине и также в случае использования только атрибута height. В случае если вы не укажите эти атрибуты вовсе, то браузер автоматически определить размер изображения перед выводом его на экран. Стоит только заметить, что указывание размеров изображений немного ускорит работу браузера при отображении страницы.
  
  На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт...
  
  Вставляем видео и аудио с помощью HTML 5
  
  В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.
  
  Для вставки аудио HTML5 предоставляет парный тег Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:
  
  Тег
  
  По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге
  
  Для вставки видеоролика на веб-страницу предназначен парный тег . С этим тегом все тоже самое, что и с тегом
  
  Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги:
  - с помощью атрибута alt тега можно задавать текст замены на случай если изображение не загрузится;
  - с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
  - для вставки аудио и видео в html5 есть парные теги
  Если что не понятно, спрашивайте в комментариях и не забудьте подписаться на обновления моего блога . До встречи в следующих постах!