- •Міністерство освіти і науки україни
- •Програмування для internet Посібник до виконання лабораторних робіт
- •Документы html5
- •Структура тела документа
- •Макет страницы
- •Строение тела документа
- •Отображение документа в окне браузера
- •Стили css
- •Стили и стуктура
- •Блочные элементы
- •Основы применения стилей
- •Строчные стили
- •Встроенные стили
- •Внешние файлы
- •Ссылка по любому атрибуту
- •Определение ссылок по псевдоклассам
- •Новые селекторы
- •Контрольные вопросы и задания:
- •Лабораторная работа №3 Традиционная блочная модель
- •Задание: Применить к шаблону документа, созданного в лабораторной работе №1, традиционную блочную модель. Краткие теоретические сведения
- •Универсальный селектор *
- •Новая иерархия заголовков
- •Объявление новых элементов html5
- •Выравнивание тела документа по центру
- •Создание главного блока
- •Заголовок
- •Навигационная полоса
- •Раздел и боковая врезка
- •Нижний колонтитул
- •Принцип работы гибкой блочной модели
- •Свойство display
- •Свойство box-orient
- •Свойство box-direction
- •Свойство box-ordinal-group
- •Сойство box-pack
- •Свойство box-flex
- •Свойство box-align
- •Гибкая блочная модель
- •Свойства css3
- •Свойство border-radius
- •Свойство box-shadow
- •Свойство text-shadow
- •Свойство @font-face
- •Линейный градиент
- •Радиальный градиент
- •Свойство outline
- •Свойство border-image
- •Свойства transform и transition
- •Функция transform: rotate
- •Функция transform: skew
- •Функция transform: translate
- •Одновременное использование всех видов трансформации
- •Динамические трансформации
- •Переходы
- •Лабораторная работа №6
- •Внедрение JavaScript
- •Обработчики событий
- •Воспроизведение видеои аудио с помощью html5
- •Программирование видеопроигрывателя
- •Свойства
- •Выполнение кода
- •Воспроизведение аудио с помощью html5
- •Программирование видеопроигрывателя
- •Контрольные вопросы и задания:
- •Лабораторная работа №8 Новые элементы, типы ввода и атрибуты, расширяющие функциональность форм
- •Задание: использовать новые возможности для создания форм, появившиеся в спецификации html5 и добавить их в разрабатываемый веб-сайт. Краткие теоретические сведения:
- •Атрибут multiple
- •Атрибут autofocus
- •Атрибут pattern
- •Атрибут form
- •Новые элементы форм
- •Контрольные вопросы и задания:
- •Лабораторная работа №9 Установка Apache и php. Конфигурационные файлы
- •Краткие теоретические сведения:
- •Доступ к содержимому массива
- •Использование циклов для доступа к массиву
- •Массивы с различными индексами
- •Операции для работы с массивами
- •Загрузка массивов из файлов
- •Швець н.В. Програмування для internet Посібник до виконання лабораторних робіт
- •65039, Одеса, вул. Канатна, 112
Атрибут multiple
Это еще один атрибут, который можно использовать с некоторыми типами ввода (например, email и file), чтобы разрешеть пользователю вводить в одном поле несколько значений. Для того чтобы введенная информация успешно прошла валидацию. значения необходимо разделить запятой.
Атрибут autofocus
Эту возможность большинство празработчиков раньше реализовывали с помощью метода JavaScript focus(). Такой подход был довольно эффективным. но фокус при этом переключался всегда, даже если пользователь работал с другим элементом. и бороться с этим было невозможно. атрибут autofocus переводит фокус на выбранный элемент с учетом текущей ситуации: фокус не меняется, если пользователь выбрал другой элемент и работает с ним.
<input type="search" name="mysearch" autofocus>
Атрибут pattern
Атрибут pattern предназначен для проверки вводимых данных. Он позволяет настраивать правила валидации добавлением регулярных выражений. Некторые из рассмотренных типов ввода проверяют определенные форматы строк, но, предположим, стоит задача проверить пятизначный почтовый индекс. стандартного типа ввода для данных в таком формате не существует. Атрибут pattern позволяет создавать собственные правила для проверки подобных значений. также можно добавить сообщение об ошибке в атрибут title.
<input pattern="[0-9]{5}" name="pcode" title="insert the 5 numbers of your postal code">
Атрибут form
Атрибут form – это очень удобное нововведение, позволяющее объявлять элементы формы за пределами тегов <form>. До настоящего времени для построения формы приходилось записывать открывающий и закрывающий теги <form> и между ними объявлять все еужные элементы. В HTML5 элементы можно вставлять в любое место документа и привязывать их к форме, ссылаясь на ее название в атрибуте form.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms</title>
</head>
<body>
<nav>
<input type="search" name="mysearch" form="myform">
</nav>
<section id="form">
<form name="myform" id="myform"method="get" >
<input type="text" name="myname" id=="myname">
<input type="submit" value="Send">
</form>
</section>
</body>
</html>
Новые элементы форм
Познакомимся с новыми элементами HTML, появившимися в новой спецификации, улучшающими и расширяющими функциональность форм.
Элиент <datalist>
Этот элемент используется только в формах. Он позволяет заранее построить список пунктов, которые в дальнейшем будут предлагаться в качестве вариантов заполнения полей ввода (для этого нужно добавить атрибут list).
<datalist id="mydata">
<option value="123123123" label="Phone 1">
<option value="456456456" label="Phone 2">
</datalist>
После того как мы объявили элемент <datalist>, остается лишь сослаться на этот список пунктов из элемента <input>, используя атрибут list.
<input type="tel" name="myphone" list="mydata">
В настоящее время элемент <datalist> реализован только в браузерах Opera Firefox.
Элемент <progress>
Этот элемент необязательно использовать только с формами, но поскольку он иллюстрирует прогресс выполнения задачи, а задачи чаще всего инициируются и обрабатываются с помощью форм, его можно включить в группу элементов формы.
Элемент progress принимает два атрибута, устанавливающие его статус и лимиты. Атрибут value указывает, какая доля задачи уже выполнена, а атрибут max содержит значение, достижение которого соответствует завершению задачи.
<progress value="0" max="100">0%</progress><br>
Элемент <meter>
Аналогично элементу <progress>, элемент<meter> используется для отображения шкалы, однако это не шкала выполнения задачи. Данный элемент предназнначен для отображения известного диапазона, например, использования пропускной способности.
С элементом <meter> связаны несколько атрибутов: min и max устанавливают границы диапазона, value определяет измеряемое значение, а low, high и optimum используются для сегментирования диапазона и определения позиции, которая будет соответствовать оптимальному значению.
<meter value="60" min="0" max="100" low="40" high="80" optimum="100">60</meter><br>
Элемент <output>
Этот элемент представляет собой результат вычисления. Обычно он используется для отображения результатов обработки каких-то значений элементами формы. Атрибут for позволяет связать элемент <output> с исходными элементами, участвующими в расчетах, однако чаще всего ссылки на элементы создаются и модифицируются в коде JavaScript. Синтаксис данного элемента таков:
<output> значение </output>