HTML5

Граница вокруг формы

Создайте форму на HTML5, показанную на рис. 1.

Рис. 1

Рис. 1

Из XHTML в HTML5

Переведите следующий код на HTML5. Обязательно используйте новые теги, вроде <nav>, <footer>, <header> и др.

Из XHTML в HTML5

Переведите следующий код на HTML5. Обязательно используйте новые теги, вроде <nav>, <footer>, <header> и др.

Нумерация

Создайте страницу на HTML5 реализующую нумерацию, представленную на рис. 1. Страница должна корректно смотреться в последних версиях Chrome, Safari и Firefox.

Рис. 1

Рис. 1

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

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

Вид формы

Рис. 1. Вид формы

Поле для ввода чисел

Сделайте в браузере Opera ввод чисел, как показано на рис. 1.

Поле для ввода числа

Рис. 1. Поле для ввода числа

Поле для поиска

Создайте поисковое поле для браузеров Chrome и Safari как показано на рисунке ниже, имеющее следующее поведение. Если поле не активно, в нем отображается текст, при получении фокуса текст внутри поля исчезает. При наборе текст отображается красным цветом.

Создание меню с тенью

Создайте меню, показанное на рисунке, на HTML5 с помощью тегов <ul>, <li> и с соблюдением ряда условий.

Меню

Текст для галочки

Создайте страницу, показанную на рис. 1. Текст возле отмеченных галочек должен выделяться фоновым цветом. Код должен корректно работать в последних версиях браузеров Internet Explorer, Firefox, Opera, Safari, Chrome.

Пример страницы

Рис. 1. Пример страницы