Новые элементы HTML5
В данной главе перечисляются все новые элементы HTML5 с описанием, для чего они используются.
Новые семантические/структурные элементы
HTML5 предлагает новые элементы для лучшего структурирования документа:
| Тег | Описание |
|---|---|
| Определяет статью в документе | |
| Определяет контент, находящийся в стороне от основного контента страницы | |
| Изолирует текст от изменения направления вывода | |
| Определяет дополнительную информацию, которую пользователь может открывать или закрывать | |
| Определяет диалоговое окно | |
| Определяет подпись к элементу | |
| Используется для группирования различных самодостаточных элементов | |
| Определяет «подвал» документа или раздела | |
| Определяет «шапку» документа или раздела | |
| Определяет основной контент документа | |
| Определяет маркированный/выделенный текст | |
| Определяет команду/пункт всплывающего меню | |
| Определяет оценочный индикатор | |
| Определяет набор ссылок навигации | |
| Определяет индикатор прогресса выполнения задачи | |
| Определяет текст для вывода в браузерах, не поддерживающих элемент | |
| Определяет объяснение/произношение символов (для азиатской типографии) | |
| Предназначен для добавления небольшой аннотации (для азиатской типографии) | |
| Определяет раздел в документе | |
| Определяет видимый заголовок для элемента | |
| Определяет дату/время | |
| Определяет место для переноса строки в тексте |
Новые элементы форм
| Тег | Описание |
|---|---|
| Определяет список предопределенных вариантов значений для элемента | |
| Определяет поле-генератор ключей | |
| Определяет результаты вычислений |
Новые типы поля ввода (элемент )
В HTML5 были добавлены новые значения для атрибута type элемента :
| Значение | Описание |
|---|---|
| color | Виджет для выбора цвета |
| date | Поле выбора календарной даты |
| datetime | Указание даты и времени |
| datetime-local | Указание местной даты и времени |
| Ввод адресов электронной почты | |
| month | Выбор месяца |
| number | Ввод чисел |
| range | Ползунок для выбора чисел в указанном диапазоне |
| search | Поле поиска |
| tel | Поле ввода телефонных номеров |
| time | Выбор времени |
| url | Поле ввода веб-адресов |
| week | Выбор недели |
Новые атрибуты поля ввода (элемент )
В HTML5 были добавлены новые атрибуты для элемента :
| Атрибут | Описание |
|---|---|
| autocomplete | Включает/отключает автозаполнение элемента |
| autofocus | Автоматически передает фокус элементу |
| form | Определяет к какой форме относится элемент ввода |
| formaction | Определяет, куда будут отправлены данные формы |
| formenctype | Определяет способ кодировки отправляемых на сервер данных формы |
| formmethod | Определяет метод отправки на сервер данных формы |
| formnovalidate | Отключает встроенную проверку корректности введенных данных формы |
| formtarget | Определяет, куда загружать ответ сервера после отправки данных формы |
| height | Определяет высоту элемента ввода |
| width | Определяет ширину элемента ввода |
| list | Ссылается на элемент со списком предопределенных значений |
| min | Определяет минимально допустимое для ввода значение |
| max | Определяет максимально допустимое для ввода значение |
| multiple | Позволяет вводить больше одного значения |
| pattern | Определяет регулярное выражение, по которому проверяются вводимые данные |
| placeholder | Определяет «заполнитель» для текстового поля |
| required | Определяет поле формы, как обязательное для заполнения |
| step | Определяет шаг изменения числа для элемента ввода |
Подробнее о атрибутах элемента см. в справочнике по HTML тегу .
Новый синтаксис атрибутов
HTML5 допускает использование четырех различных видов синтаксиса определения атрибутов элементов.
В следующей таблице приведены примеры разного синтаксиса определения атрибутов тега :
| Тип | Пример |
|---|---|
| Пустой | |
| Без кавычек | |
| С двойными кавычками | |
| С одинарными кавычками |
В HTML5 в зависимости от требований атрибута, можно использовать все четыре вида синтаксиса.
Графика в HTML5
| Тег | Описание |
|---|---|
| Определяет область, в которой можно рисовать при помощи скриптов (обычно JavaScript) | |
| Рисует масштабируемую векторную графику |
Новые медиа элементы
| Тег | Описание |
|---|---|
| Определяет аудио контент | |
| Определяет контейнер для внешнего (не HTML) приложения | |
| Определяет медиа ресурс для медиа элементов ( и ) | |
| Определяет текстовую дорожку для медиа элементов ( и ) | |
| Определяет видео контент |
Семантические элементы HTML5
В HTML5 появились новые семантические элементы для структурирования, группировки контента и разметки текстового содержимого. Они четко описывают, какой контент содержат (было , стало).
Рассмотрим подробнее семантические элементы и их значения.
Элемент
Пример
html> html> head> style> lidisplay:inline-block;margin-right:10px;color:#778899> style> head> body> header> nav> ul> li>Главная li> li>О нас li> ul> nav> h1>Добро пожаловать на наш сайт h1> hr> header> article> header> h2>Заголовок раздела h2> p>Абзац текста. p> header> article> body> html>Результат
Элемент
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> header> h1>Курсы программирования h1> header> nav> a href="/uchebnik-html.html">HTML a> | a href="/learn-css.html">CSS a> | a href="/learn-javascript.html">JavaScript a> | a href="/learn-php.html">PHP a> | nav> h2>Добро пожаловать на сайт W3Docs! h2> body> html>Результат
Элемент
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> article> h1>Заголовок статьи h1> p>Текст статьи p> article> body> html>Результат
Элемент
Пример
html> html> head> title>Использование тега section title> head> body> section> h1>Язык гипертекстовой разметки HTML h1> p>Стандартизированный язык разметки документов во Всемирной паутине. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. p> section> section> h1>CSS h1> p>Формальный язык, который используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL. p> section> body> html>Результат
Элемент
Пример
html> html> body> p>Я люблю смотреть Игру Престолов. p> aside> h4>Игра Престолов h4> p>Американский телесериал в жанре фэнтези, основанный на цикле романов «Песнь Льда и Огня» Джорджа Р. Р. Мартина. p> aside> body> html>Как создать фавиконку и подключить ее к сайту
Favicon (сокращение от Favorites Icon) — иконка с логотипом или первой буквой названия сайта, которая отображается на вкладках браузера, в списке закладок и в интерфейсе некоторых поисковых систем.
Этот мини-логотип, по сути, олицетворяет сайт и помогает пользователям быстрее отыскать его среди сохраненных страниц или в бесконечном списке открытых вкладок. Чтобы облегчить потенциальному посетителю эту задачу, каждому веб-ресурсу, от мелкого блога на WordPress до интернет-магазина с огромной аудиторией, нужны наглядные и узнаваемые Фавиконки.
Так Favicon выглядят на вкладках в браузере Safari:
А вот так в поисковой выдаче Яндекса:
Такие значки должны опираться на стилистику бренда, поэтому важно, чтобы они были с ним тесно связаны.
Вот, как это реализовано у Apple и Яндекса:
Далее разберемся, как сделать иконку сайта и подключить ее к нему.
Характеристики значков
Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.
Формат
Тут есть из чего выбирать:
- .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
- .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.
- .svg — перспективный векторный формат с вариативным разрешением под нужды конкретной страницы. Настраивается через CSS.
.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах
У .png поддержка заметно шире
Можно использовать и другие форматы. Какой-нибудь .jpeg или .gif. Проблема может возникнуть лишь в поддержке со стороны программного обеспечения клиента.
Из-за особенностей браузеров в разных ОС я бы рекомендовал выбрать .ico. Самый каноничный формат, с которым точно не ошибешься.
Размер
Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:
- 16 на 16 точек
- 32 на 32
- 192 на 192
- 512 на 512
При желании можно использовать несколько вариантов, чтобы адаптировать фавиконку под требования нескольких платформ.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Как сделать иконку для сайта HTML?
В лучшем случае вам все нарисует грамотный дизайнер, но если под рукой такого не нашлось, можно и самому склепать значок.
Рисуем Favicon в Sketch или Photoshop
Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:
- Открываем редактор и рисуем иконку.
- Потом выделяем нарисованный элемент и меняем разрешение в боковом меню.
- Затем одновременно нажимаем клавиши Shift + Cmd + E.
- После этого нажимаем на кнопку Export Selected…
То же самое можно сделать в Photoshop или условном Pixelmator, разве что интерфейсы настройки изображений и экспорта будут отличаться.
Большинство редакторов не умеют экспортировать в .ico по умолчанию. Придется скачать сторонний плагин для Фотошопа или шаблон для Sketch.
Преобразуем готовое изображение в фавиконку
Если уже есть рабочий вариант дизайна в неподходящем формате (.jpeg, .gif), можно конвертировать его в .png. Для этого сойдет любой базовый редактор изображений.
- Открываем будущую иконку.
- Меняем размер.
- Указываем нужный размер и формат. Сохраняем.
- Открываем меню «Файл» и нажимаем на пункт «Экспортировать…».
- Указываем расширение .png.
Рисуем значок в браузере
Если нет Фотошопа или просто не нужен какой-то сложный дизайн, то можно на скорую руку нарисовать себе лого на сайте Favicon.cc. В этом случае все запредельно просто:
- Рисуем любую картинку во встроенном редакторе.
- А потом нажимаем на кнопку Download внизу.
Тут же можно посмотреть, как нарисованная иконка выглядит в адресной строке браузера.
В Favicon.cc можно сохранять рисунки только в расширении .ico. Имейте это в виду.
Конвертируем текст или эмоджи в значок
Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.
Здесь же есть и конвертер .png в .ico. Можно загрузить в сервис готовый логотип и получить обратно несколько иконок в разных форматах для нужд всех ходовых операционных систем.
Но я попробую скачать иконку с эмоджи:
- Нажимаю на соответствующий конвертер.
- Кликаю по названию понравившегося смайлика.
- А потом жму на кнопку Download.
Как подключить Favicon к сайту?
Теперь, когда у меня есть фавиконка (неважно откуда), надо ее подключить. Для этого надо вставить в html-код основной страницы строчку, в который будут указаны тип ресурса, адрес и тип данных.
АТРИБУТ
ЗНАЧЕНИЕ
icon указывает на тип используемого ресурса.
Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.
Тут указывается тип изображения. Например, image/png для картинок в формате .png, image/svg для .svg. или image/x-icon для .ico
Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.
Например, я скачал себе .ico с сайта. Затем делаю следующее:
- Кидаю картинку в корневой каталог ресурса (туда же, где лежит index.html).
- Потом открываю index.html и прописываю в head строчку .
Это самый простой способ. Естественно, файл со значком может называться как угодно и располагаться на внешнем сервере. Главное, корректно оформить код на сайте.
Теперь вы знаете, как сделать иконку сайта на вкладке HTML. Рисуем картинку в .ico или .svg, кидаем ее в любое удобное место, а затем прописываем адрес с форматом в head.
Шаблон №2
Главное назначение блочной модели — обеспечивать механизм разбиения оконного пространства на отдельные блоки и создания строк и столбцов, которые и составляют основу дизайна обычной веб-страницы. Однако традиционная блочная модель, используемая еще со времен первой версии CSS и широко распространенная по сей день, не слишком хорошо справляется с этой задачей. Например, в этой модели невозможно определить расположение блоков и задать их ширину и высоту, не прибегая к помощи разнообразных трюков или сложных наборов правил, которые придумал башковитый парень откуда-то с другого континента.
Сложность создания популярных дизайнерских эффектов (таких, как увеличение ширины столбцов в зависимости от размера свободного пространства, выравнивание содержимого по вертикали, вытягивание столбцов по вертикали независимо от содержимого) заставила разработчиков задуматься о возможности применения к документам каких-то новых моделей. Было разработано несколько образцов, но ни один из них не сумел привлечь к себе столько внимания, как гибкая блочная модель.
Гибкая блочная модель элегантно решает проблемы предыдущей модели. Благодаря новой реализации у нас наконец-то появились блоки, представляющие виртуальные строки и столбцы, которые в действительности больше всего и нужны дизайнерам и пользователям. Теперь мы получили полный контроль над макетом, позициями и размером блоков, распределением блоков внутри других блоков и размещением их в общем оконном пространстве. Код раз и навсегда принял форму, удовлетворяющую требованиям дизайнеров.
Несмотря на то что гибкая блочная модель обладает массой преимуществ по сравнению с предыдущей моделью, она все еще находится на экспериментальной стадии разработки.
Еще по меньшей мере несколько лет придется ждать полного внедрения ее в браузеры и процессы создания веб-сайтов и приложений. В настоящее время существует две спецификации, и только одну поддерживают браузеры на базе WebKit и Gecko, такие как Firefox и Google Chrome. Вот почему мы также подробно рассмотрели применение традиционной блочной модели.
В этом разделе мы познакомимся с работой гибкой блочной модели, узнаем, как применить ее к нашему шаблону, а также изучим предоставляемые этой моделью новые возможности.
Одна из главных особенностей данной модели заключается в том, что некоторые возможности (например, ориентация — вертикальная или горизонтальная) объявляются в родительских блоках. Из этого следует, что для правильной организации блоков необходимо одни блоки вставлять в другие. В новой модели у каждого набора блоков обязательно должен быть родительский блок.
Если вы взглянете на шаблон, с которым мы до сих пор работали, то увидите, что несколько родительских блоков там уже определены. Элемент и обертку можно с успехом превратить в родительские блоки. Однако родительский блок требуется и для еще одной составляющей структуры. Мы добавим новый элемент для обрамления поднабора блоков, представляющего два столбца в середине страницы (в коде документа они определяются элементами и ).
Вот как наш шаблон будет выглядеть после добавления новой обертки.
Листинг 2.37. Добавление родительского блока для обрамления и