Хедер и футер. Теги header и footer

Хедер и футер. Теги header и footer

В этом вводном курсе мы познакомимся с новыми возможностями HTML5. Основной упор сделаем на новые теги, но коснёмся и других нововведений.

Мы будем пошагово собирать блог известного вам веб-разработчика, используя появившиеся в HTML5 теги и применяя другие новшества. Но сначала несколько важных фактов об HTML5:

· HTML5 обратно совместим с HTML4.

· HTML5 не цельная спецификация, а набор модулей разной степени готовности.

· Многие модули HTML5 имеют хорошую поддержку во всех текущих браузерах.

· HTML5 с нами надолго.

Это означает, что HTML5 можно использовать уже сейчас. Для этого достаточно задать такой тип документа:

<!DOCTYPE html>

Что вы уже давным-давно делаете в наших курсах.

А теперь пара новых тегов:

· <header> — хедер сайта или раздела;

· <footer> — футер сайта или раздела.

Да-да, это те самые хедер и футер, которые обычно верстались дивами с классами headerили footer. Они были настолько распространены, что для них было решено создать собственные теги.

Основное содержание. Тег main

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

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

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

А раз теги неуникальные, то и стилизовать их лучше с помощью классов, как мы и сделали.

Если вы не хотите использовать классы для шапки и подвала сайта, то можете использовать селекторы body > header и body > footer. Эти селекторы не повлияют на хедеры и футеры, вложенные более глубоко.

Другое дело новый тег <main>, который обозначает основное содержание сайта и по спецификации может использоваться на странице только один раз. Для его стилизации никакие классы не нужны.

Кстати, загляните в CSS и посмотрите, как сделаны фоны для основных блоков. В хедере и футере мы использовали линейные градиенты, которые детально разберём в более позднем курсе. А фоновую картинку для основного содержания мы задали с помощью так называемого data:URI, закодировав изображение прямо в CSS-коде. Это одна из продвинутых техник оптимизации вёрстки.

Код в программе:

html,

body {

margin: 0;

padding: 0;

color: white;

background-color: #2c3e50;

}

/* Header */

header.page-header {

position: relative;

z-index: 5;

min-height: 20px;

padding: 20px;

color: white;

background-image:

linear-gradient(45deg, #34495e 25%, transparent 25%),

linear-gradient(-45deg, #34495e 25%, transparent 25%),

linear-gradient(135deg, #34495e 25%, transparent 25%),

linear-gradient(-135deg, #34495e 25%, transparent 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 20px 20px;

box-shadow: 0 0 5px 0 #333333;

}

/* Main */

main {

min-height: 200px;

padding-top: 50px;

color: black;

background-color: white;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");

}

/* Footer */

footer.page-footer {

min-height: 50px;

padding: 20px;

font-size: 14px;

color: black;

background-color: #f1c40f;

background-image:

linear-gradient(45deg, transparent 50%, white 50%),

linear-gradient(-45deg, transparent 50%, white 50%),

linear-gradient(135deg, transparent 50%, #2c3e50 50%),

linear-gradient(-135deg, transparent 50%, #2c3e50 50%);

background-repeat: repeat-x;

background-position: 0 0, 0 0, 0 100%, 0 100%;

background-size: 12px 12px;

}

Изображения в формате SVG

Мы разметили базовые разделы нашей страницы. Теперь поработаем над каждым из них и начнём с шапки сайта.

Давайте добавим нашему сайту логотип. Для этого добавим в хедер <div>, а внутри него разместим привычное изображение. Используем картинку в векторном формате SVG, который уже достаточно хорошо поддерживается браузерами. Векторные изображения можно уменьшать и увеличивать без потери качества, в этом вы убедитесь в задании.

Кстати, обратите внимание на полупрозрачный фон в блоке «Обо мне». Он сделан с помощью нового формата записи цветов в CSS — rgba.

Навигация. Тег nav

Теперь давайте добавим в шапку главное меню.

В HTML5 добавили специальный элемент для навигационных блоков — тег <nav>. Так что теперь меню и блоки ссылок лучше оборачивать не в дивы, а в навы.

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

Завершаем футер

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

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

Видео. Тег video

В HTML с самого начала было очень просто вставлять изображения, но очень сложно видео и аудио. В HTML5 эту проблему попытались решить, добавив специальные теги.

Для вставки видео предназначен тег <video>. Его основные атрибуты:

width иheight	задают ширину и высоту видео
controls	пустой атрибут, при наличии которого отображается панель управления видео
preload	задаёт режим предзагрузки видео, имеет 3 возможных значения: · none — не загружать ничего; · metadata — загрузить служебную мета-информацию (длительность, первый кадр и так далее); · auto — можно загрузить всё видео. значение по умолчанию зависит от браузера
src	задаёт адрес видеофайла
autoplay	пустой атрибут, при наличии которого воспроизведение видео начинается автоматически
poster	задаёт адрес картинки-обложки, которая отображается, когда видео ещё не загрузилось или не воспроизводится

Форматы и источники видео

У тега <video> есть атрибут src, в котором можно указать адрес видеофайла, но мы почему-то его не использовали.

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

· MPEG-4/H.264

· OGG/Theora

· WebM

Поэтому мы должны в видео указывать адреса файлов во всех этих форматах (и конвертировать исходное видео в эти форматы, конечно). Делается это с помощью тегов <source>:

В атрибуте src указывается адрес видеофайла, а в атрибуте type его тип (также там могут указываться и кодеки). Браузер из списка видеофайлов выбирает первый, который может проиграть и загружает его.

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

Аудио. Тег audio

Работа с аудио в HTML5 очень похожа на работу с видео, только у тега для аудио чуть меньше параметров.

Для вставки звука предназначен тег <audio>. Его основные атрибуты:

controls	пустой атрибут, при наличии которого отображается панель управления проигрывателем
preload	задаёт режим предзагрузки аудио, имеет 3 возможных значения: · none — не загружать ничего; · metadata — загрузить служебную мета-информацию; · auto — можно загрузить весь файл. значение по умолчанию зависит от браузера
src	задаёт адрес аудиофайла
autoplay	пустой атрибут, при наличии которого воспроизведение звука начинается автоматически

Форматы и источники звука

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

Для охвата большинства современных браузеров, достаточно использовать всего два формата:

· MP3

· OGG

И снова мы не можем указать только один файл в атрибуте src у тега <audio>. Мы должны так же, как и в случае с видео, перечислить адреса звуковых файлов в разных форматах с помощью тегов <source>:

Теги <source> в аудио работают так же, как и в видео.

Формы и HTML5

Первая форма

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

Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются поля формы. У тега <form> есть два важных атрибута:

· action задаёт адрес, URL, отправки формы;

· method задаёт метод отправки формы.

Пример:

<form action="https://echo.htmlacademy.ru" method="get"> поля формы</form>

Для отправки формы обычно используют методы get или post. Если не указать атрибут method, то будет использован get.

Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Например:

https://www.google.com/search?q=htmlacademy

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.

Текстовое поле ввода

Большинство полей форм создаётся с помощью одиночного тега <input>. У этого тега два обязательных атрибута:

· type задаёт тип поля;

· name задаёт имя поля.

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

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

Подпись для поля ввода

Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово:

Подпись <input type="text" name="username">

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

Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.

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

Создавать подписи к полям с помощью <label> — хороший приём. Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label>, вот так:

<label> Подпись <input type="text" name="username"></label>

Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

Добавим ещё одно поле

Пришло время добавить в форму ещё одно поле.

Сделайте это по всем правилам хорошего тона: помимо имени задайте полю идентификатор, добавьте подпись к полю и свяжите их.

Мы могли бы связать поле и подпись, просто обернув их в тег <label>. Но в этом задании мы тренируем более сложный вариант — с использованием id и for.

Поле для ввода пароля

Мы создаём простую форму входа. Уже есть два поля и связанные с ними подписи. Одно из полей предназначено для ввода пароля, но сейчас оно является простым текстовым полем.

Чтобы сделать его настоящим полем для ввода пароля, в котором текст будет отображаться «звёздочками», нужно просто изменить значение атрибута type на password.

Кнопка отправки формы

Форма практически готова. Осталось добавить кнопку для отправки формы. Такая кнопка создаётся с помощью тега <input> c типом submit.

Надпись на кнопке можно задать с помощью атрибута value. Для кнопки отправки формы задавать имя необязательно. Но если имя задано, то на сервер будут отправляться имя и значение кнопки.

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

Многострочное поле ввода

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

Многострочное текстовое поле создаётся с помощью парного тега <textarea>. У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.

Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».

Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. Текст, расположенный между открывающим и закрывающим тегом <textarea>и является значением по умолчанию. Вот так:

<textarea>Значение по умолчанию</textarea>

Чекбокс или «галочка»

Поле-галочка — это тег <input> с типом checkbox.

Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Таким образом, атрибут value не является обязательным.

Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. Вот так:

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

Группа переключателей

Теперь добавим ещё один вариант ответа в наш переключатель. Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.

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

Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.

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

Поле для загрузки файлов

Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.

Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.

Кстати, внешний вид таких полей очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.

Скрытое поле

И ещё одно невидимое и очень полезное поле. Это скрытое поле. Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.

Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег <input> с типом hidden.

Сброс введенных значений

Сначала разберёмся с возможностями кнопок, не рассмотренными в базовом курсе про формы.

Экспериментировать будем над формой логина в котопрофайл.

В HTML-формах есть специальная кнопка, которая сбрасывает введённые значения и возвращает изначально установленные. Это поле ввода с типом reset.

Пример использования:

Обратите внимание, что кнопка не обнуляет значения, а возвращает те, которые были установлены в полях формы по умолчанию.

Простая кнопка

Помимо кнопок отправки формы или сброса введенных значений, существуют и «просто кнопки». При нажатии на такую кнопку никаких действий не происходит, а все необходимые действия обычно задаются при помощи JavaScript.

Пример записи:

Кнопка-изображение

В качестве кнопки отправки формы можно использовать изображение.

Для этого у тега input нужно указать тип image.

Аналогично обычным изображениям на сайте у кнопки-изображения есть еще два атрибута:

src	адрес изображения
alt	альтернативный текст, отображаемый в том случае, если изображение не загружено

Кнопка-изображение работает аналогично кнопке submit, но на сервер дополнительно передаются координаты точки, по которой был произведен щелчок.

Альтернативный способ задания кнопок

Помимо тега <input> для добавления кнопок можно использовать тег <button>. Он расширяет возможности создания кнопок.

Внутри тега <button> можно размещать любые HTML-элементы, в том числе изображения. Например:

<button>Календарь <img src="calend.png" alt=""></button>

В данном случае кнопка будет выглядеть примерно вот так:

Если в атрибуте type тега <button> указать значение submit или reset, то кнопка будет отправлять данные на сервер или сбрасывать введенные значения.

По умолчанию значение атрибута type — submit.

То есть внутри формы кнопка <button> по нажатию отправит форму на сервер.

Значениями атрибута type также могут быть button и reset.

Кнопка button со значением type="reset" аналогично input type="reset" сбрасывает значения полей формы к изначальным.

А вот значение type="button" избавит кнопку от всей изначальной фунциональности. То есть кнопка просто будет выглядеть как кнопка, но ничего по умолчанию не делать. Это удобно, если вы хотите сами добавить кнопке дополнительное действие с помощью JavaScript.

Обязательные поля

Ура, товарищи! Мы успешно разобрались с возможностями кнопок в формах и залогинились в профайл Кексика.

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

Итак, начнём...

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

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

При попытке отправить форму с незаполнеными обязательными полями браузер выведет всплывающее предупреждение, которое в Chrome и Firefox выглядит вот так:

Эта проверка работает на клиентской части и упрощает валидацию форм.
Но всегда нужно проверять отправленные данные и на стороне сервера.

Поле выбора даты

Поля для задания даты и времени уже поддерживаются в этих браузерах.

В форму заказа важно включить поле даты доставки. А для выбора даты из календаря существует новый тип поля ввода — date. При клике на данное поле в форме всплывает календарик.

Пример записи:

Поле выбора времени

Поля для задания даты и времени уже поддерживаются в этих браузерах.

В предыдущем задании мы рассмотрели использование тега <input> с типом date. Но иногда нужно указывать дату в других форматах, и для этого существуют дополнительные «временные» типы полей, например, time для выбора времени.

Используем поле выбора времени в нашей форме:

В Chrome это выглядит так:

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

Список возможных значений

Списки возможных значений уже поддерживаются в этих браузерах.

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

Пример использования:

Связывание текстового поля и списка осуществляется при помощи атрибута list у тега input — значение list должно быть таким же, как значение атрибута id у списка.

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

Поле поиска

Отлично! Мы справились с формой заказа и можем смело двигать дальше.

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

И тут без вашей помощи никак не обойтись.

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

Пример записи:

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

Автофокус уже поддерживается в этих браузерах.

При загрузке страницы можно сообщить браузеру в какое поле установить курсор по умолчанию. Для этого используется пустой атрибут autofocus.

Пример записи:

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

Обратите внимание, что такой атрибут должен быть только один на странице.

Другие поля для ввода дат

Поля для задания даты и времени уже поддерживаются в этих браузерах.

В предыдущих заданиях мы уже использовали поля с типами date и time, но существуют и другие типы полей для ввода дат:

datetime	выбор даты с указанием времени (c учетом временной зоны)
datetime-local	выбор даты с указанием времени (без учета временной зоны)
week	выбор порядкового номера недели в году и года
month	выбор месяца и года

Используем поле для выбора месяца в нашей форме. А для выбора числа используем уже знакомый тип number.

Если браузер не поддерживает поле для ввода месяца, то вместо него отображается обычное текстовое поле.

Выбор из диапазона

Поле для выбора из диапазона значений уже поддерживаются в этих браузерах

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

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

Пример записи:

Атрибуты min и max устанавливают нижнюю и верхнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.

Группировка полей формы

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

Пример:

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

Также для каждой группы можно добавить её заголовок. Для этого внутрь тега fieldsetнадо поместить тег legend:

<fieldset> <legend>Заголовок группы</legend> <input type="text"></fieldset>

Паттерны значений полей

Паттерны значений полей уже поддерживаются в этих браузерах.

Итак, у нас готова форма бронирования отеля, но чтобы отправиться в Норвегию, Кексику нужно получить визу.

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

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

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

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

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

Поле ввода телефона

Для получения визы нужно сообщить и номер телефона Кексика, поэтому добавим в форму ещё одно поле с типом tel.

Новый тип поля tel появился в HTML5 и отвечает за ввод телефонных номеров.

Также воспользуемся атрибутом pattern, чтобы исключить ошибки при заполнении формы.

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

Поле выбора цвета

Поля для выбора цвета уже поддерживаются в этих браузерах

Нельзя упускать из виду важный параметр кота — окрас. Его также нужно ввести в нашей форме.

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

Пример записи:

Запрет редактирования полей

Иногда возникают ситуации, когда какие-то поля требуется сделать недоступными для редактирования.

Есть два способа: использование атрибута readonly и использование атрибута disabled

Пример записи:

В чем же отличие между ними?

Атрибут readonly не дает пользователю изменять поле (вводить новый текст, модифицировать существующий). Введенное значение можно выделить и скопировать. Данные из этого поля отправляются на сервер.

Атрибут disabled не дает пользователю изменять поле (вводить новый текст, модифицировать существующий). Нельзя поставить фокус в это поле, введенное значение нельзя выделять и копировать. Данные из этого поля НЕ отправляются на сервер.

Переключение между полями

При нажатии клавиши Tab браузер передает управление (фокус) от одного элемента к другому в том порядке, в котором они были объявлены на странице. Этим порядком можно управлять при помощи атрибута tabindex.

Пример записи:

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

Если представлено отрицательное значение — элемент может быть выделен, однако не учавствует в последовательной навигации

Если представлен 0 — элемент может быть выделен и достигнут с помощью последовательной навигации, однако порядок навигации определён платформой

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

LocalStorage

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

Как справиться с этой довольно часто встречающейся проблемой, когда введённые в форму данные теряются?

Для этого можно использовать одну из новинок HTML5 — localStorage. Эта технология относится к JavaScript, а не к HTML или CSS, но промолчать о ней мы не можем.

Суть localStorage или «локального хранилища» заключается в том, что в него можно записывать данные, которые будут сохраняться в браузере. Эти данные не исчезнут даже если вы закроете браузер и откроете его снова или уйдете со страницы и потом вернётесь на неё.

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

Давайте проверим работу localStorage. Это просто. Мы уже всё подготовили, вам осталось только раскомментировать один тег.

Хедер и футер. Теги header и footer

· HTML5 обратно совместим с HTML4.

· HTML5 не цельная спецификация, а набор модулей разной степени готовности.

· Многие модули HTML5 имеют хорошую поддержку во всех текущих браузерах.

· HTML5 с нами надолго.

Это означает, что HTML5 можно использовать уже сейчас. Для этого достаточно задать такой тип документа:

<!DOCTYPE html>

Что вы уже давным-давно делаете в наших курсах.

А теперь пара новых тегов:

· <header> — хедер сайта или раздела;

· <footer> — футер сайта или раздела.

Основное содержание. Тег main

А раз теги неуникальные, то и стилизовать их лучше с помощью классов, как мы и сделали.

Код в программе:

html,

body {

margin: 0;

padding: 0;

color: white;

background-color: #2c3e50;

}

/* Header */

header.page-header {

position: relative;

z-index: 5;

min-height: 20px;

padding: 20px;

color: white;

background-image:

linear-gradient(45deg, #34495e 25%, transparent 25%),

linear-gradient(-45deg, #34495e 25%, transparent 25%),

linear-gradient(135deg, #34495e 25%, transparent 25%),

linear-gradient(-135deg, #34495e 25%, transparent 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 20px 20px;

box-shadow: 0 0 5px 0 #333333;

}

/* Main */

main {

min-height: 200px;

padding-top: 50px;

color: black;

background-color: white;

}

/* Footer */

footer.page-footer {

min-height: 50px;

padding: 20px;

font-size: 14px;

color: black;

background-color: #f1c40f;

background-image:

linear-gradient(45deg, transparent 50%, white 50%),

linear-gradient(-45deg, transparent 50%, white 50%),

linear-gradient(135deg, transparent 50%, #2c3e50 50%),

linear-gradient(-135deg, transparent 50%, #2c3e50 50%);

background-repeat: repeat-x;

background-position: 0 0, 0 0, 0 100%, 0 100%;

background-size: 12px 12px;

}

12 3 4 5 6 7 Следующая ⇒

Последнее изменение этой страницы: 2019-03-20; Просмотров: 172; Нарушение авторского права страницы