Вставьте url медиаконтента где взять
Перейти к содержимому

Вставьте url медиаконтента где взять

  • автор:

Добавление медиа-контента

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

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

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

Добавление изображений

Чтобы добавить изображения на страницу мы используем строчный элемент . Элемент относится к самостоятельным или к пустым элементам; это означает, что он не содержит какого-либо контента и существует в виде единственного тега. Для работы должен быть включен атрибут src со значением, указывающим исходник изображения. Значение атрибута src это URL, обычно относительно сервера, на котором размещён сайт.

Наряду с атрибутом 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 для изменения размеров изображений.

Позиционирование изображений

Мы можем использовать ряд разных подходов для позиционирования изображений на веб-странице. По умолчанию изображения позиционируются как строчно-блочные элементы, однако их положение может быть изменено с помощью CSS, в частности, float , display и свойств блочной модели, включая padding , border и margin .

Строчное позиционирование изображений

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

Гэтсби — чёрно-бело-коричневая дворняга, которая любит вой пожарных машин и когда ему чешут пузо. Чёрно-бело-коричневая собака с надетым на неё платкомНесмотря на то, что он большую часть времени спит, он очень быстро гоняется за любыми птицами, которых видит во сне.

Демонстрация строчного изображения

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

Блочное позиционирование изображений

Добавив свойство display к изображению и установив его значение как block мы заставим изображение быть блочным элементом. Это отображает изображение на отдельной строке, что позволяет окружающему содержимому располагаться выше и ниже изображения.

Демонстрация блочного изображения

Позиционирование изображений слева или справа

Иногда вывод изображения как строчного, блочного или, возможно, даже строчно-блочного элемента не является идеальным. Мы можем сделать так, чтобы изображение появилось на левой или правой стороне содержащего его элемента, в то время как другое содержимое обтекало вокруг изображения при необходимости. Чтобы сделать это, мы используем свойство float со значением left или right .

Возвращаясь обратно к уроку 5, «Позиционирование содержимого», напомним, что свойство float первоначально предназначалось для размещения изображений слева или справа в содержащем их элементе. Теперь мы используем его для этой изначальной цели.

Обтекание изображения это начало, всё остальное содержимое будет выравниваться непосредственно напротив. Для обеспечения пространства вокруг изображения мы воспользуемся свойством margin . Дополнительно мы можем применить свойства padding , border и background чтобы создать рамку вокруг изображения по желанию.

Демонстрация обтекаемого изображения

Когда использовать изображения вместо фоновой картинки

Есть два основных способа добавления изображения на веб-страницу. Описанный здесь способ — это использование элемента в 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-файла). Далее, в нашем файле index.html, каждый раздел с тизером содержит элемент , который одновременно обёртывает элементы и . Переместим элемент выше элемента и заменим его элементом . Значение атрибута src для каждого элемента будет соответствовать структуре папок и имени созданного файла, а значение атрибута alt будет описывать содержание каждого изображения. HTML для нашего первого тизера со спикерами будет выглядеть следующим образом:

 
Спикеры
Профессиональные спикеры

Спикеры мирового класса

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

Продолжим этот шаблон также для тизеров расписания и места проведения.
Теперь, когда мы добавили несколько изображений на нашу страницу, нам нужно немного очистить их стили и убедиться, что они правильно вписываются в макет нашей страницы. Так как изображения по умолчанию являются строчно-блочными элементами, давайте изменим изображения в разделе с тизерами на блочные элементы. Также установим их максимальную ширину как 100%, чтобы гарантировать, что они не превышают ширину соответствующих им колонок. Изменение значения этой ширины важно, поскольку она позволяет нашим изображения подстраиваться под ширину колонок по мере необходимости. Наконец, давайте немного скруглим углы изображений и применим к ним нижний margin 22 пикселя, обеспечивая небольшую свободу. После того, как мы добавим эти новые стили к нашим существующим стилям для главной страницы (с помощью класса teaser в качестве отборочного селектора для элементов ), наш CSS будет выглядеть следующим образом:

.teaser img

Затем добавим изображения всех спикеров на странице Спикеры. Мы начнём с создания папки speakers в нашей папке images и поместим в неё изображения всех выступающих. В файле speakers.html добавим элемент внутрь каждого элемента с информацией о спикере. Разместим каждый элемент внутри элемента со значением speaker-info у атрибута class , чуть выше элемента

    . Значение атрибута src каждого изображения будет соответствовать папке speakers, которую мы создали и имени спикера; значением атрибута alt будет имя спикера. Элемент для меня как спикера будет выглядеть следующим образом:

Этот же шаблон добавления изображения следует применить ко всем другим спикерам.
Как мы делали с изображениями на нашей главной странице, так же мы хотим применить некоторые стили для изображений на странице Спикеры. Начнём с применения свойства border-radius со значением 50%, превращая наши изображения в круги. Отсюда установим фиксированную высоту 130 пикселей для каждой картинки и зададим вертикальное выравнивание по верху строки, в которой они находятся. После этого применим к изображениям вертикальные отступы. Используя отрицательный margin сверху в 66 пикселей мы вытянем немного изображения из элемента и выровняем по центру верхней границы элемента с классом speaker-info . Далее, применение margin как 22 пикселя к нижней части изображения обеспечивает пространство между изображением и элементом

    ниже него. После того, как мы добавим эти новые стили к нашим существующим стилям страницы Спикеры (с помощью класса speaker-info в качестве отборочного селектора для элементов ), наш CSS будет выглядеть следующим образом:

.speaker-info img

Поскольку мы используем агрессивный негативный margin для элемента внутри элемента с классом speaker-info , мы должны убрать padding сверху у этого элемента . Ранее мы использовали свойство padding со значением 22px 0, таким образом указали 22 пикселя padding сверху и снизу и 0 пикселей padding слева и справа у элемента . Давайте заменим это свойство и значение на свойство padding-bottom , так как нам нужно определить только этот padding и используем значение 22 пикселя. Новый набор правил для класса speaker-info выглядит следующим образом:

.speaker-info

Теперь главная страница и страница Спикеры выглядят весьма круто.

Главная страница Styles Conference после добавления изображений в каждый раздел с тизером

Рис. 9.02. Главная страница Styles Conference после добавления изображений в каждый раздел с тизером

Страница Спикеры после добавления изображения для каждого спикера

Рис. 9.03. Страница Спикеры после добавления изображения для каждого спикера

Добавление аудио

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

Атрибуты

Несколько других атрибутов могут сопровождать атрибут src для элемента , наиболее популярные это autoplay , controls , loop и preload .

Атрибуты autoplay , controls и loop — логические атрибуты и не требуют наличия значения. Вместо этого, когда каждый присутствует в элементе , значение атрибута будет установлено истинным и элемент будет вести себя соответственно.

По умолчанию, элемент не отображается на странице. Если присутствует логический атрибут autoplay , на странице ничего не появится, но аудиофайл начнёт воспроизводиться автоматически после загрузки.

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

Демонстрация добавления аудио

При наличии логического атрибута loop для элемента аудиофайл будет повторяться постоянно, с начала и до конца.

Наконец, атрибут preload для элемента помогает определить, какая информация об аудиофайле, если она есть, должна быть загружена до воспроизведения клипа. Он принимает три значения: none , auto и metadata . Значение none не загружает никакой информации об аудиофайле, в то время как значение auto загрузит всю информацию об аудиофайле. Значение metadata располагается между значениями none и auto и загрузит все доступные сведения об аудиофайле, например, длину клипа, но не всю информацию.

Если атрибут preload не представлен в элементе , вся информация об аудиофайле будет загружена, словно значение было установлено как auto . По этой причине использование атрибута preload со значением metadata или none — хорошая идея, когда аудиофайл не является необходимым для страницы. Это поможет не загружать канал и позволит странице загружаться быстрее.

Альтернатива аудио и несколько источников

В настоящее время разные браузеры поддерживают различные форматы аудиофайлов, тремя наиболее популярными из которых являются ogg, mp3 и wav. Для лучшей поддержки браузерами нам нужно использовать несколько аудиофайлов, которые будут включены внутри открывающего и закрывающего тегов элемента .

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

Используя элемент и атрибут src для каждого формата файла, мы можем перечислить один аудиофайл за другим. Мы будем использовать атрибут type , который поможет браузеру быстро определить, какие типы аудио доступны. Когда браузер распознает формат аудиофайла, он загрузит файл и проигнорирует остальные.

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

  

Рассмотрим предыдущий код. Элемент включает логический атрибут controls , что гарантирует отображение аудиоплеера в браузерах, которые поддерживают этот элемент. не включает атрибут src , а вместо этого содержит три разных элемента . Каждый элемент включает в себя атрибут src указывающий на разный формат аудиофайла и атрибут type , который определяет формат аудиофайла. Последняя строка дана в качестве резерва — если браузер не распознает ни один из форматов аудиофайлов, будет показана ссылка на скачивание.

В дополнение к элементу , HTML5 также представил элемент , у которого есть довольно много сходства с .

Добавление видео

Добавление видео в HTML5 очень похоже на добавление аудио. Мы используем элемент на месте элемента . Все те же атрибуты ( src , autoplay , controls , loop и preload ) и альтернативы применимы и здесь.

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

Поскольку видео занимает место на странице, будет полезно определить его размеры, которые чаще всего делаются через свойства width и height в CSS. Это гарантирует, что видео не окажется слишком большим и останется в пределах макета страницы. Кроме того, задание размера как и с изображениями помогает браузеру отображать видео быстрее и позволяет выделить надлежащее место, необходимое для показа видео.

Настройка управления аудио и видео

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

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

Атрибут poster

Для элемента доступен дополнительный атрибут poster . Этот атрибут позволяет задать изображение в виде URL, которое будет показано до воспроизведения видео. В приведённом ниже примере скриншот из видео используется в качестве постера для видео Земли.

Альтернатива видео

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

  

Дополнительным запасным вариантом, который может быть использован вместо обычного текста, является встроенное видео YouTube или Vimeo. Эти сайты видеохостинга позволяют загрузить наши видео, предоставляют стандартный видеоплеер и возможность внедрить видео на страницу с помощью встроенного фрейма.

Форматы аудио и видеофайлов в HTML5

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

Существует несколько инструментов, которые помогают преобразовать аудио или видеофайл в другие форматы и быстрый поиск даёт изобилие вариантов.

Добавление встроенных фреймов

Ещё один способ добавления содержимого на страницу — это внедрить другую HTML-страницу в текущую. Это делается с помощью встроенного фрейма или элемента . Данный элемент принимает URL другой HTML-страницы в значении атрибута src — это вызывает содержимое из внедрённой HTML-страницы для отображения на текущей странице. Значение атрибута src может быть URL относительно страницы, где появляется элемент или абсолютным адресом для исключительно внешней страницы.

Многие страницы используют элемент для внедрения медиа-контента на страницу с внешнего сайта, вроде Google Maps, YouTube и др.

Демонстрация добавления встроенного фрейма

Элемент содержит несколько стилей по умолчанию, в том числе border , width и height . Эти стили можно регулировать с помощью атрибутов в HTML frameborder , width и height или с помощью CSS-свойств border , width и height .

Атрибут seamless

Страницы, на которые ссылается атрибут src элемента играют по своим правилам — так, они не наследуют любые стили или поведение со страницы, на которую указывают. Любые стили применяемые к странице с элементом не наследуются страницей внутри элемента . Кроме того, ссылки внутри страницы в элементе откроются внутри фрейма, оставляя страницу, которая содержит элемент , без изменений.

У нас будет время, когда мы захотим изменить подобное поведение и логический атрибут seamless позволит нам это сделать. Когда атрибут seamless присутствует в элементе это разрешает стилям для страницы с элементом наследоваться странице внутри элемента . Кроме того, атрибут seamless позволяет ссылкам, нажатым на странице внутри , открываться в том же окне, что и исходная страницы, содержащая элемент .

Атрибут seamless является новым атрибутом представленным в HTML5. Хотя поддержка браузеров для этого атрибута растёт, он не будет работать в старых браузерах. Рекомендуем проверить атрибут seamless перед его использованием.

На практике

Встроенные фреймы предлагают отличный способ добавления динамического содержимого на страницу. Позволим им выстрелить и обновим нашу страницу «Место проведения» некоторыми картами.

    Перед добавлением любых карт или встроенных фреймов давайте сначала подготовим нашу страницу для сетки из двух колонок. Ниже раздела со вступлением мы добавим элемент с классом row , чтобы определить новый раздел страницы и включить некоторые общие стили, такие как белый фон и вертикальный padding . Непосредственно внутри этого элемента добавим элемент с классом grid . Класс grid выравнивает наш контент по центру страницы и готовится сопровождать колонки 1/3 и 2/3. Пока главный раздел нашего файла venue.html выглядит следующим образом:

/* ======================================== Место проведения ======================================== */ .venue-theatre < margin-bottom: 66px; >.venue-hotel
Chicago Theatre

175 N State St
Chicago, IL 60601

thechicagotheatre.com
(312) 462-6300

Chicago Theatre

175 N State St
Chicago, IL 60601

thechicagotheatre.com
(312) 462-6300

Chicago Theatre

175 N State St
Chicago, IL 60601

thechicagotheatre.com
(312) 462-6300

После того, как класс venue-map применяется к каждому элементу

.venue-map

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

Наша страница «Место проведения» теперь включает встроенные фреймы

Рис. 9.04. Наша страница «Место проведения» теперь включает встроенные фреймы

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Семантическое определение figure и figcaption

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

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

Демонстрация

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

Кроме того, может заменить атрибут alt элемента , если содержимое элемента предлагает полезное описание визуального содержания изображения.

 
Красивая чёрно-бело-коричневая дворняга с надетым на неё платком.

Демонстрация

Не всякий тип медиа-контента должен быть включён в элемент или включать . Только тот, который является независимым и относится к одной группе.

Резюме

Наряду с текстом, медиа-контент является огромной частью Интернета. Применение изображений, аудио и видео только выросло за последние годы и это, вероятно, не замедлится. Теперь мы знаем как включить эти виды медиа-контента в наши проекты и как мы можем использовать их, чтобы обогатить содержание наших сайтов.

В этом уроке мы рассмотрели следующее:

Мы выходим на финишную прямую в изучении HTML и CSS, осталось только представить несколько компонент. Следующими по списку идут формы.

Ресурсы и ссылки

См. также

Абсолютные и относительные ссылки

Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Абсолютные ссылки

Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.

https://htmlacademy.ru https://htmlacademy.ru/blog/boost/tools/chrome-devtools-2 

Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.

Относительные ссылки

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

Предположим, мы загрузили страницу по такому адресу:

https://htmlacademy.ru/blog/frontend/html/index.html 

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

Ссылка на файл в той же папке

1.html https://htmlacademy.ru/blog/frontend/html/1.html 

Файл расположен в той же папке, где и текущая страница. Пишется без дополнительных знаков.

Ссылка на файл в папке ниже текущей

directory/3.html https://htmlacademy.ru/blog/frontend/html/directory/3.html 

Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.

dir1/dir2/5.html https://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html 

Страница находится на две папки ниже текущей.

Ссылка относительно корня сайта

/2.html https://htmlacademy.ru/2.html 

Файл расположен в корневой папке сайта. Для ссылки относительно корня используется / . Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.

/dir1/dir2/4.png https://htmlacademy.ru/dir1/dir2/4.png 

Файл на два уровня ниже корня сайта.

Ссылка на папку выше текущей

../6.html https://htmlacademy.ru/blog/frontend/6.html 

На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../ .

../../7.html https://htmlacademy.ru/blog/7.html 

На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.

Комбинированная ссылка

../../../dir1/dir2/8.html https://htmlacademy.ru/dir1/dir2/8.html 

На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2 .

Все приведённые примеры одной картинкой:

id-ссылки (якорные ссылки)

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

Содержание первой главы

Ставим якорную ссылку на той же странице:

Ставим якорную ссылку на другую страницу:

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

Что будет, если ошибиться

Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.

Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/ .

Обратите внимание на текст ссылки

Сейчас, конечно, такого никто в больших компаниях не допустит — но если вы сначала делаете страничку на своём компьютере, могут быть нюансы. Поэтому пользуйтесь нашей шпаргалкой, чтобы избежать ошибок.

Ссылки — сила:

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Осмысленный alt-текст: 6 правил

Осмысленный alt-текст: 6 правил

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Что такое Lazy Loading и как её включить на сайте

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Знакомство с HTML

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Специальные символы в HTML

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Зачем нужен метатег viewport

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

В чём отличия цитат

В чём отличия цитат

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Растровая и векторная графика

Растровая и векторная графика

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Как отличить h1, h2 и h3

Как отличить h1, h2 и h3

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

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

Как правильно вставлять SVG

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ 

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

Внедрение премиального медиа-контента с HTML5

Коммерческая медиа-индустрия проходит через большую трансформацию по мере того, как контент-провайдеры отходят от модели доставки контента с использованием закрытых веб-плагинов (таких, как Flash или Silverlight) и заменяют их едиными бесплагинными видео-плеерами, базирующимися на спецификациях HTML5 и возможностях проигрывания коммерческого контента. Браузеры также двигаются в сторону от использования плагинов, так Chrome отказывается от NPAPI и Microsoft Edge от ActiveX в пользу более защищенных моделей расширения.

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