Вставьте url медиаконтента что это значит
Все об URL: понятие, структура, виды и рекомендации по созданию
Английская аббревиатура URL расшифровывается как Uniform Resource Locator, что в переводе на русский означает «унифицированный указатель ресурса». Впервые URL стал применяться в 1990 году. Слава его изобретения принадлежит создателю Всемирной паутины — Тиму Бернерсу-Ли.
Что такое URL
Изначально УРЛ применялся для обозначения размещения файлов в Интернете, но в настоящее время используется для указания расположения почти всех веб-ресурсов. URL может обозначать путь как к веб-сайту, так и к какому-то определенному документу или изображению. Чтобы перейти к нужному сайту или файлу, пользователю нужно написать в адресной строке браузера соответствующий УРЛ. Например, URL https://timeweb.com/ru/community открывает стартовую страницу сайта хостингового сообщества «Timeweb Community».
Определить URL-адрес веб-страницы просто — он показан в адресной строке браузера. Оттуда его можно скопировать, кликнув по адресной строке правой кнопкой мыши (при этом адрес выделяется) и в контекстном меню выбрав команду «Копировать».
Чтобы скопировать адрес отдельного изображения на странице, нужно кликнуть правой кнопкой мыши по картинке и выбрать пункт «Копировать адрес изображения» или «Копировать URL картинки» (в разных браузерах название команды может отличаться).
Для копирования адреса документа в контекстном меню ведущей к нему ссылки следует выбрать команду «Копировать адрес ссылки».
Во всех случаях URL окажется в буфера обмена, откуда его можно вставить в адресную строку браузера, переслать в сообщении либо вставить в текстовый документ.
Структура URL адреса
URL-адрес, который мы видим в адресной строке браузера, состоит из нескольких частей:
В начале адреса (1) всегда указан протокол (в некоторых браузерах по умолчанию он может быть скрыт и становится виден при щелчке по адресной строке). Если мы просматриваем веб-страницу, это будет протокол передачи данных «http» или его форма «https» с поддержкой шифрования для установки безопасного соединения. Однако URL может начинаться с других обозначений, например:
После протокола (2) следует доменное имя сайта (хост) или в редких случаях его IP-адрес. Также в некоторых случаях URL-адрес может содержать номер порта, например, его можно увидеть в сетевых приложениях (выглядит это так: //example.com:8080).
Затем указывается путь к странице (3), состоящий из каталогов и подкаталогов, который, в свою очередь, включает в себя ее название.
URL также может включать параметры, которые указываются после знака «?» и разделяются символом «&». Пример адреса страницы с результатами поиска по слову «url» в поисковой системе Google:
Конечный компонент URL, который пользователь может увидеть в документах большого объема, состоящих из нескольких разделов, — это якорь, которому предшествует знак решетки «#». Часть адреса после этого знака ссылается на определенный абзац внутри страницы сайта. Пример: если на странице Википедии со статьей «URL» перейти по ссылке «Структура URL» в блоке «Содержание», унифицированный указатель ресурса в адресной строке браузера примет такой вид:
Виды URL
URL-адреса веб-страниц бывают статические и динамические.
С точки зрения SEO предпочтительнее статические ссылки, так как динамические URL имеют ряд недостатков:
Форматы URL
Транслитерация
Для обозначения названий статей обычно используют транслитерацию. Такие адреса легко читаются и понятны для восприятия пользователей.
По такому адресу сразу можно судить, какое содержимое вы увидите на странице. Поисковые системы легко распознают в подобных адресах ключевые слова, что также оказывает положительное влияние на SEO. Если в URL используется транслитерация, становится четко видна структура сайта и, чтобы попасть в нужный раздел, пользователь просто может стереть в адресной строке часть адреса.
Латиница
Латинские URL представляют собой адреса, переведенные на английский язык. Например, вместо «/novosti/» в адресе будет значиться «/news/».
Такой формат УРЛ часто используется для обозначения веб-страниц категорий и рубрик. Этот вариант считается универсальным, так как легко воспринимается пользователями и без труда обрабатывается поисковыми роботами.
Кириллические URL
Такой формат URL чаще всего применяют в кириллических доменах или когда часть адреса не очень длинная.
К их преимуществам относятся:
Однако кириллические URL имеют существенный недостаток: при копировании такого адреса и вставки его в сообщение для отправки кому-либо или вставки в текстовый редактор, вы получите непонятный набор знаков, наподобие:
Это объясняется тем, что запись URL-адресов возможна только определенными символами из разрешенного набора, а символы кириллицы в него не входят. Поэтому адрес, в котором используется кириллица, шифруется, хотя при этом ссылка все равно будет работать.
К минусам кириллических УРЛов можно отнести и трудность для восприятия зарубежными пользователями, привыкшими к латинским символам, а также сложности при чтении адресов этого формата поисковыми роботами (такие URL приходится переводить в понятный для робота вид).
Человекопонятные URL
Поисковые системы рекомендуют создавать дружественные адреса веб-страниц, по которым и пользователи, и поисковые роботы смогут судить, какая информация на этой странице находится. Например, по URL-адресу вида: www.yoursite.net/viewpage.php?page_id=23 понять это невозможно, а адрес www.yoursite.net/contact/ сразу дает представление о содержании страницы. Такие УРЛы называют человекопонятными (ЧПУ).
Кроме того, что они позволяют понять содержание веб-страницы еще до перехода по ссылке, подобные адреса имеют и другие преимущества:
При формировании ЧПУ на своем сайте следует придерживаться определенных правил:
Рекомендации по созданию URL
Соблюдайте указанные выше рекомендации, формируйте человекопонятные URL, чтобы при прочих равных условиях получить преимущество над другими сайтами.
URL адрес документа: что это, виды и форматы указателей, советы по созданию
URL (url адрес) — это аббревиатура, которая расшифровывается как Uniform Resource Locator, или «унифицированный указатель ресурса», т.е. адрес сайта размещенного в сети Интернет.
Что такое URL
Изначально унифицированный указатель использовался для того, чтобы показать путь размещения файлов в вебе, а сейчас применяется для обозначения любого интернет-ресурса:
Для перехода к искомому файлу или сайту пользователь должен ввести в адресную строку браузера нужный адрес. Если вы введете адрес страницы блога Kokoc.com (https://kokoc.com/blog), откроется следующее окно:
URL — та самая ссылка, которая показывается в адресной строке браузера. Его можно получить, если выделить ссылку (она автоматически выделяется при установке курсора в адресную строку), нажать правую кнопку мыши и выбрать из выпадающего меню пункт «Копировать».
Если вам нужно копировать адрес картинки, нужно нажать на нее правой кнопкой мыши и в выпадающем меню выбрать пункт «Копировать адрес изображения» (как минимум, так он называется в «Яндекс.Браузере»).
Если вам нужно получить адрес файла, снова вызываем выпадающее меню и выбираем пункт «Копировать адрес ссылки».
В каждом описанном случае ссылка копируется в оперативную память компьютера и уже из нее ссылку можно вставить в мессенджер, окно сообщений социальной сети, документ или другой браузер.
Из чего состоит URL-адрес
Начало адреса (1) — это протокол — http или https. В «Яндекс.Браузере» и Google Chrome они по умолчанию не видны и появляются только по клику левой кнопки мыши в адресной строке. Между тем указатель может начинаться не с протоколов передачи гипертекста, а со следующих:
Следующей частью URL является доменное имя сайта (2), реже — его IP.
Завершает адрес путь к странице (3), где будут папки и подпапки и который содержит название этой страницы.
Кроме того, URL может иметь в своем составе параметры, идущие после знака «?» и разделяющиеся символом «&» (знаки выделены желтым). Так выглядит адрес страницы с результатами поиска в Google по запросу “купить книгу”:
Виды URL
Статический URL
Это неизменный адрес, который остается тем же самым в течение всего времени существования вплоть до момента внесения изменения со стороны вебмастера или владельца сайта. Адрес не несет в своем составе никаких дополнительных параметров:
Динамический URL
Такой указатель формируется в результате пользовательского запроса и имеет в составе разделители типа “&”, “=”, “?”, после которых идут дополнительные параметры конкретной страницы. Они генерируются, когда пользователь интернет-магазина применяет фильтры товаров, сортирует их по рейтингу или цене, ищет по сайту. Если я введу на сайте «Читай-города» название книги «Увеличение продаж с SEO», искомая страница будет иметь адрес:
С позиций поисковой оптимизации лучше использовать статические урлы, потому что у динамических есть ряд объективных минусов:
Форматы URL
Транслитерированные URL
Так как мы работаем в Рунете, но соблюдаем мировые стандарты, повсеместно используем транслитерацию. Любой человек прочитает такой адрес и поймет, какое содержимое будет у соответствующей страницы.
И «Яндекс», и Google определяют в этих урлах ключевые фразы, а это позитивно влияет на поисковое продвижение. Кроме того, транслитерация структурирует сайт: мы можем легко попасть на главную страницу блога, просто стерев часть с названием статьи.
Латинские URL
Латинские урлы — это адреса с переводом на английский язык. Вместо «/работы/» будет «/works/» или «/portfolio/», вместо «/услуги/» — «/services/».
В основном латиница используется, чтобы показывать урлы категорий товаров или рубрик блога. Этот формат указателей без проблем опознается пользователями и хорошо индексируется роботами поисковых систем.
Кириллические URL
Логично, что такие указатели используются в кириллических доменах и в коротких адресах.
Из их плюсов можно выделить:
Но не все так гладко. У кириллических указателей есть большой минус. Когда вы копируете такой адрес, чтобы вставить его в окно текстового редактора или мессенджера, получится следующее (та же статья про Гоголя):
https://ru.wikipedia.org/wiki/%D0%93%D0%BE%D0%B3%D0%BE%D0%BB%D1%8C,_ %D0%9D%D0%B8%D0%BA%D0%BE%D0%BB%D0%B0%D0%B9_ %D0%92%D0%B0%D1%81%D0%B8%D0%BB%D1%8C%D0%B5%D0%B2%D0%B8%D1%87
Увы, но запись URL-адресов содержит фиксированный набор символов, куда кириллические не включены. В связи с этим все кириллические адреса шифруются, но ссылка остается работоспособной.
Также из недостатков таких урлов можно назвать трудность понимания и запоминания со стороны зарубежных пользователей. Реально, какой иностранец с первого раза прочитает и выговорит «Васильевич»! Кириллические также тяжело воспринимаются роботами поисковых систем, и их обязательно нужно переводить в удобочитаемый вид.
Человекопонятные URL (ЧПУ)
В рекомендациях Google и «Яндекса» есть указание на то, что на сайтах нужно использовать понятные для пользователей адреса, чтобы и люди, и машины понимали, что содержит в себе та или иная страница.
Например, по адресу https://site.ru/viewpage.php?category_id=13 мало что понятно, зато https://site.ru/portfolio сразу же говорит нам о том, что на странице находятся примеры работ компании или частного специалиста.
Пользователи могут оценить контент страницы еще ДО перехода по ссылке, а также:
Есть ряд правил построения ЧПУ на своем сайте:
Как сделать хороший URL
И конечно же, нужно всегда настраивать ЧПУ, потому что вы делаете сайты прежде всего для людей — ваших подписчиков, читателей, покупателей и даже почитателей таланта.
Что такое и из чего состоит url адрес, а также в чем разница между https и http. Что такое относительная, абсолютная, зеркальная или хэш ссылка
Каждый веб пользователь хотя бы раз в жизни сталкивался с понятием URL адреса, но вряд ли задавался вопросом, что это такое. Действительно, зачем обычному пользователю знать его прямое назначение и составные части?
Вопреки сложившемуся мнению, URL адрес необходим не только программистам и бек разработчикам. Знакомство с принципами создания ссылок, как абсолютных, так и относительных, будет полезно даже для обыкновенного пользователя сети интернет.
Что такое URL и из чего состоит УРЛ адрес
Разберемся, для начала, что же такое URL адрес. УРЛ – это уникальный адрес ресурса в сети интернет. Абсолютно любая страница в Сети имеет свой URL, указывающий полный путь до интересующего нас файла. Примерная форма стандартного УРЛ адреса выглядит так «http://www.». Далее должны быть представлены каталоги и папки, содержащие наш файл, однако для каждой страницы эти данные индивидуальны.
Любой URL представляет собой строго специфическую последовательность символов:
Каждый элемент строки направляет пользователя к определенному файлу.
Протокол https и в чем разница между https и http
HTTPS – это безопасный протокол передачи данных, использующий криптографическое шифрование. Сайты, применяющие данный вид протокола, имеют сертификацию и грант доверия для поисковых систем.
Основные различия между https и http:
Благодаря преимуществам использования безопасного пути передачи личных данных, сейчас проводится массовый переход на сайты с поддержкой https.
Что такое относительная и абсолютная ссылка
Итак, мы уже разобрались, что ссылка – это прямой адрес до расположения нужного файла. Но что это за понятия «абсолютная» и «относительная» ссылки, и в чем основные различия.
Относительная ссылка – это укороченная версия веб адреса. Чтобы разобраться, придется вспомнить модель URL и его составные части. В относительной будет отсутствовать протокол и имя сервера. Такие виды адресов могут начинаться со слэша или со специальных символов (например, для указания пути к жесткому диску). При чтении браузер автоматически меняет относительную ссылку на её развернутую версию. Очень часто они применяются при вёрстке html документов и на веб-страницах для осуществления перехода по внутреннему содержимому страницы.
Абсолютная ссылка, в отличие от относительной, содержит все элементы URL: протокол, доменную часть адреса, имена каталогов на сервере и непосредственные имена файлов. Единственное отличие такого вида адреса – его полное содержание. При вёрстке html документа стараются не использовать абсолютные ссылки, так как из-за них код становится весьма объемным.
Посмотрим, зачем нужны абсолютные ссылки:
Для каждого вида ссылок существует свой список назначений, поэтому нельзя сказать, что относительная ссылка имеет преимущество перед абсолютной, или наоборот.
Что такое зеркальная ссылка и как понять, что она зеркальная
Зеркальная ссылка – это альтернативный адрес, расположенный на другом сервере. Поисковые системы предлагают пользователям воспользоваться данной альтернативой, если пройти по главной ссылке не удается по различным причинам.
Чтобы понять, является ли ссылка зеркальной, можно воспользоваться услугами Яндекс Вебмастер, который автоматически добавляет все главные и вспомогательные зеркала. Чаще всего, на практике, зеркальные ссылки отличаются от основных незначительными деталями: например, отсутствием доменного имени «www» или порядком написания имени каталога
Что такое УРЛ сайта, видео, файла, страницы, канала, изображения
URL абсолютно любого медиа файла: видео, изображения, канала или сайта – это уникальный адрес к интересующему нас контенту. URL необходим, чтобы перейти на ресурс, скопировать адрес сайта или страницы, просмотреть информацию на сайте.
Кроме того, зная внешний вид абсолютной или относительной ссылки, составных элементов URL, вы можете свободно ориентироваться по веб странице.
Что такое хэш (hash) ссылки
Иногда в структуре УРЛ можно встретить ещё одну составляющую: хэш ссылку. Располагается данный элемент после значка # и называется якорь. Основное назначение якоря:
Таким образом, якорь позволяет быстро ориентироваться по документу, как пользователю, так и веб дизайнеру.
Какие символы можно и нельзя использовать в URL
Для записи URL допустимы не все символы. Список символов, использование которых разрешено при прописи пути к файлу:
Остальные символы не разрешены к использованию в прописке адреса, но они имеют свою кодировку в UTF-8, где на каждый введенный символ выделено 2 байта. В дальнейшем каждый байт преобразуется в шестнадцатеричной системе счисления.
Маркетолог, вебмастер, блогер с 2011 года. Люблю WordPress, Email маркетинг, Camtasia Studio, партнерские программы)) Создаю сайты и лендинги под ключ НЕДОРОГО. Обучаю созданию и продвижению (SEO) сайтов в поисковых системах.
Добавление медиа-контента
Мы просматриваем Интернет в поисках интересной и познавательной информации, которую обычно находим в виде простого текста. Для его сопровождения HTML предлагает способы внедрить мультимедиа в виде изображений, аудио и видео, а также включить контент с другой веб-страницы в виде встроенного фрейма.
Возможность включать изображения, звук, видео и встроенные фреймы на сайты существует уже некоторое время. Браузеры поддерживают изображения и встроенные фреймы в целом очень хорошо. И хотя добавлять звук и видео на сайт можно уже много лет, этот процесс был довольно громоздким. К счастью, он совершенствуется и стал гораздо проще с прямой поддержкой из HTML.
Сегодня мы можем свободно использовать изображения, аудио, видео и встроенные фреймы, зная что они поддерживаются всеми основными браузерами.
Добавление изображений
Наряду с атрибутом src должен быть применён атрибут alt (альтернативный текст), который описывает содержимое изображения. Значение атрибута alt собирают поисковые системы и вспомогательные технологии, это помогает им донести назначение изображения. Альтернативный текст будет отображаться вместо изображения, если по какой-то причине изображение не доступно.
Демонстрация добавления изображения
Рис. 9.01. Альтернативный текст показан на месте отсутствующего изображения
Поддерживаемые форматы изображений
Изображения поступают в разных форматах файлов и каждый браузер может поддерживать (или не поддерживать) различные форматы. По большому счёту, наиболее типовые поддерживаемые форматы изображений в Интернете — это gif, jpg и png. Из них наиболее широко используемыми сегодня форматами являются jpg и png. Формат jpg обеспечивает качество изображения с высоким количеством цветов, сохраняя скромный размер файла, идеально подходящего для быстрой загрузки. Формате png отлично подходит для изображений с прозрачностью или малым числом цветов. Мы обычно видим что изображения в jpg используются для фотографий, а изображения в png — для иконок или фоновых узоров.
Размеры изображений
Важно определить размер изображения, чтобы сказать браузеру, насколько большой должна быть картинка до загрузки страницы. Таким образом браузер может зарезервировать место для изображения и отображать страницы быстрее. Есть несколько разных способов задать размер изображений, которые хорошо работают на странице. Одним из способов является использование атрибутов width и height непосредственно в теге в HTML.
Кроме того, для указания размеров изображения могут быть использованы свойства width и height в CSS. Когда одновременно применяются свойства CSS и атрибуты HTML, то свойства CSS будут иметь приоритет над атрибутами HTML.
Указание только ширины или высоты настроит другой размер автоматически, чтобы сохранить пропорции изображения. В качестве примера, если мы хотим, чтобы изображение было 200 пикселей в высоту, но ширина нас не особо беспокоит, то мы можем установить height как 200 пикселей, а ширина изображения подстроится соответственно. Одновременная установка width и height также будет работать, однако это может нарушить пропорции изображения, в результате чего появятся искажения.
Демонстрация размеров изображения
Хотя с помощью атрибутов width и height непосредственно в HTML сохраняется некоторое смысловое значение в виде исходного размера изображения, может быть трудно управлять множеством изображений одинакового размера. В таком случае обычной практикой будет использование CSS для изменения размеров изображений.
Позиционирование изображений
Строчное позиционирование изображений
Элемент является по умолчанию строчно-блочным. Добавление изображения на страницу без каких-либо стилей будет позиционировать его на той же строке, что и содержимое вокруг изображения. Кроме того, изменится высота строки, в которой появляется изображение, чтобы соответствовать высоте изображения и это может создать большие вертикальные зазоры в строке.
Демонстрация строчного изображения
Оставлять изображения позиционированными по умолчанию приходится редко. Чаще изображения отображаются как блочные или обтекаемые по одной стороне элементы.
Блочное позиционирование изображений
Добавив свойство display к изображению и установив его значение как block мы заставим изображение быть блочным элементом. Это отображает изображение на отдельной строке, что позволяет окружающему содержимому располагаться выше и ниже изображения.
Демонстрация блочного изображения
Позиционирование изображений слева или справа
Возвращаясь обратно к уроку 5, «Позиционирование содержимого», напомним, что свойство float первоначально предназначалось для размещения изображений слева или справа в содержащем их элементе. Теперь мы используем его для этой изначальной цели.
Демонстрация обтекаемого изображения
Когда использовать изображения вместо фоновой картинки
Есть два основных способа добавления изображения на веб-страницу. Описанный здесь способ — это использование элемента в HTML. Другой способ заключается в применении свойства background или background-image в CSS и назначении фонового изображения для элемента. Оба варианта выполняют свою работу, но у каждого есть свои конкретные области применения.
Элемент в HTML является предпочтительным вариантом, когда изображение должно сохранять смысловое значение и имеет отношение к содержанию страницы.
Свойство background или background-image в CSS является предпочтительным вариантом, когда изображение используется как часть дизайна или интерфейса на странице. Как таковое, оно напрямую не связано с содержанием страницы.
Элемент является довольно популярным и когда был первоначально добавлен в спецификацию HTML, то навсегда изменил путь создания сайтов.
На практике
Теперь, когда мы знаем как добавить и позиционировать изображения на странице, давайте взглянем на наш сайт Styles Conference и посмотрим, куда мы можем вставить несколько изображений.
Начнём с добавления нескольких изображений на нашу главную страницу. В частности, мы добавим изображение в каждый раздел с тизером, продвигающих некоторые наши страницы.
Прежде, чем мы перепрыгнем к коду, давайте создадим новую папку с названием images в нашей папке assets. Затем, в папке images создадим другую папку с названием home специально для изображений нашей главной страницы. В папку home мы добавим три изображения: speakers.jpg, schedule.jpg и venue.jpg (для справки, эти изображения можно скачать из zip-файла).
. Переместим элемент
HTML для нашего первого тизера со спикерами будет выглядеть следующим образом:
Продолжим этот шаблон также для тизеров расписания и места проведения.
Теперь, когда мы добавили несколько изображений на нашу страницу, нам нужно немного очистить их стили и убедиться, что они правильно вписываются в макет нашей страницы.
Так как изображения по умолчанию являются строчно-блочными элементами, давайте изменим изображения в разделе с тизерами на блочные элементы. Также установим их максимальную ширину как 100%, чтобы гарантировать, что они не превышают ширину соответствующих им колонок. Изменение значения этой ширины важно, поскольку она позволяет нашим изображения подстраиваться под ширину колонок по мере необходимости.
Наконец, давайте немного скруглим углы изображений и применим к ним нижний margin 22 пикселя, обеспечивая небольшую свободу.
После того, как мы добавим эти новые стили к нашим существующим стилям для главной страницы (с помощью класса teaser в качестве отборочного селектора для элементов ), наш CSS будет выглядеть следующим образом:
Затем добавим изображения всех спикеров на странице Спикеры. Мы начнём с создания папки speakers в нашей папке images и поместим в неё изображения всех выступающих.
В файле speakers.html добавим элемент внутрь каждого элемента с информацией о спикере. Разместим каждый элемент внутри элемента
Значение атрибута src каждого изображения будет соответствовать папке speakers, которую мы создали и имени спикера; значением атрибута alt будет имя спикера.
Этот же шаблон добавления изображения следует применить ко всем другим спикерам.
Как мы делали с изображениями на нашей главной странице, так же мы хотим применить некоторые стили для изображений на странице Спикеры.
Начнём с применения свойства border-radius со значением 50%, превращая наши изображения в круги. Отсюда установим фиксированную высоту 130 пикселей для каждой картинки и зададим вертикальное выравнивание по верху строки, в которой они находятся.
После этого применим к изображениям вертикальные отступы. Используя отрицательный margin сверху в 66 пикселей мы вытянем немного изображения из элемента и выровняем по центру верхней границы элемента
После того, как мы добавим эти новые стили к нашим существующим стилям страницы Спикеры (с помощью класса speaker-info в качестве отборочного селектора для элементов ), наш CSS будет выглядеть следующим образом:
Поскольку мы используем агрессивный негативный margin для элемента внутри элемента
Ранее мы использовали свойство padding со значением 22px 0, таким образом указали 22 пикселя padding сверху и снизу и 0 пикселей padding слева и справа у элемента
Новый набор правил для класса speaker-info выглядит следующим образом:
Теперь главная страница и страница Спикеры выглядят весьма круто.
Рис. 9.02. Главная страница Styles Conference после добавления изображений в каждый раздел с тизером
Рис. 9.03. Страница Спикеры после добавления изображения для каждого спикера
Добавление аудио
АтрибутыДемонстрация добавления аудио
Альтернатива аудио и несколько источников
Добавление видео
Поскольку видео занимает место на странице, будет полезно определить его размеры, которые чаще всего делаются через свойства width и height в CSS. Это гарантирует, что видео не окажется слишком большим и останется в пределах макета страницы. Кроме того, задание размера как и с изображениями помогает браузеру отображать видео быстрее и позволяет выделить надлежащее место, необходимое для показа видео.
Настройка управления аудио и видео
Кроме того, если модифицированный плеер использует элемент в качестве управления, значение атрибута alt должно явно утверждать, что изображение предназначено для управления и требуется необходимое взаимодействие для работы.
Атрибут poster
Альтернатива видео
Дополнительным запасным вариантом, который может быть использован вместо обычного текста, является встроенное видео YouTube или Vimeo. Эти сайты видеохостинга позволяют загрузить наши видео, предоставляют стандартный видеоплеер и возможность внедрить видео на страницу с помощью встроенного фрейма.
Форматы аудио и видеофайлов в HTML5
Существует несколько инструментов, которые помогают преобразовать аудио или видеофайл в другие форматы и быстрый поиск даёт изобилие вариантов.
Добавление встроенных фреймов
Многие страницы используют элемент для внедрения медиа-контента на страницу с внешнего сайта, вроде Google Maps, YouTube и др.
Демонстрация добавления встроенного фрейма
Атрибут seamless
Атрибут seamless является новым атрибутом представленным в HTML5. Хотя поддержка браузеров для этого атрибута растёт, он не будет работать в старых браузерах. Рекомендуем проверить атрибут seamless перед его использованием.
На практике
Встроенные фреймы предлагают отличный способ добавления динамического содержимого на страницу. Позволим им выстрелить и обновим нашу страницу «Место проведения» некоторыми картами.
Непосредственно внутри этого элемента добавим элемент
Пока главный раздел нашего файла venue.html выглядит следующим образом:
Наш HTML должен выглядеть так:
Новый раздел в файле main.css выглядит следующим образом:
Подразумевая, что колонки, сделанные элементами
В целом, наш HTML для колонок выглядит следующим образом:
В каждый из элементов
, затем два элемента
включим адрес места проведения, а во втором элемента включим их сайт (со ссылкой) и номер телефона.
Внутри каждого абзаца используем элемент перевода строки
, чтобы разместить разрывы в адресе и между сайтом и номером телефона.
Для элемента с классом venue-theatre HTML выглядит следующим образом:
Этот же шаблон показанный здесь для театра следует также применять к гостинице (с использованием, конечно же, соответствующего адреса, веб-сайта и номера телефона).
HTML для элемента с классом venue-theatre теперь выглядит следующим образом:
Набор правил для класса venue-map выглядит так:
Теперь у нас есть страница с местом проведения, в комплекте с картами для разных мест нашей конференции.
Рис. 9.04. Наша страница «Место проведения» теперь включает встроенные фреймы
Демонстрация и исходный код
Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Семантическое определение figure и figcaption
Блочный элемент применяется для идентификации и охватывания независимого содержимого, часто в виде медиа-контента. Он может окружать изображения, аудиоклипы, видео, блоки кода, диаграммы, рисунки или другой самостоятельный медиа-контент. Внутри одновременно может содержаться более одного независимого содержимого, вроде нескольких изображений и видео. Если элемент перемещается из основной части страницы в другое место (например, вниз страницы), это не должно нарушать содержимое или удобочитаемость страницы.
Демонстрация
Демонстрация
Резюме
Наряду с текстом, медиа-контент является огромной частью Интернета. Применение изображений, аудио и видео только выросло за последние годы и это, вероятно, не замедлится. Теперь мы знаем как включить эти виды медиа-контента в наши проекты и как мы можем использовать их, чтобы обогатить содержание наших сайтов.
В этом уроке мы рассмотрели следующее:
Мы выходим на финишную прямую в изучении HTML и CSS, осталось только представить несколько компонент. Следующими по списку идут формы.