Вставка объектов в HTML-документ

by anastasia ноября 24, 2019 0 комментариев Аудиофайлы Видеофайлы Изображения Ссылки

Дорогие читатели! В этом уроке мы рассмотрим способы добавления в HTML-документ различные объекты — от ссылок до изображений и видео.

Ссылки

Ссылки устанавливают связь между каким-либо сервисом и текущим документом. Для этого используются парные теги <a>...</a>, <area>...</area> и <link>...</link>.

Тег <a>

В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что́ является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL); для атрибута name значением является идентификатор.

Синтаксис тега выглядит следующим образом:

• <a href="URL">...</a>,
• <a name="идентификатор">...</a>.

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

Чтобы сделать кликабельное изображение, необходимо поместить элемент <img> внутрь тега <a>...</a>. Чтобы ссылка открывалась в другом окне, нужно добавить атрибут target="_blank" для ссылки:

<a href="https://ru.wikipedia.org/wiki/Латвия" target="_blank"><img src="https://www.latvia.travel/sites/default/files/editor/Riga/rozdestvenskie-rynki-riga-latvia-travel.jpg" alt="Латвия"></a>

Вот что получится:

Изображения

Изображения добавляются на веб-страницы с помощью тега <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов <map> и <area> можно создавать карты-изображения с активными областями.

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате .gif, .jpeg или .png. Адрес файла с картинкой задаётся через атрибут src. Также можно задать резервный контент, который добавляется с помощью атрибута alt.

Синтаксис тега выглядит так:

<img src="URL" [alt="альтернативный текст"]>.

Например:

<img src="https://newdohod.ru/images/WEB/html/html.jpg" alt="HTML">

Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.

Видеофайлы

С помощью тега <video>...</video> в документ можно добавить видеофайлы.

Синтаксис выглядит следующим образом:

<video controls>
    <source src="URL">
</video>

Элемент <source> используется для добавления нескольких медиа-ресурсов для <video>. Указывает на альтернативные видеофайлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека. Элемент <track> используется в качестве дочернего элемента и <video>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения медиа-ресурса.

Аудиофайлы

Точно так же добавляются на веб-страницу аудиофайлы. Для этого используется парный тег <audio>...</audio>.

<audio controls>
    <source src="URL">
</audio>

Элемент <source> используется для добавления нескольких медиа-ресурсов для <audio>. Указывает на альтернативные видеофайлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека. Элемент <track> используется в качестве дочернего элемента и <audio>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения медиа-ресурса.