Введение в HTML5 и CSS3 Основы Web-дизайна. web 1.0 и web 2.0 web 1.0 и web 2.0 - принципы построения веб – сайтов web 1.0web 2.0 DoubleclickGoogle AdSense. - презентация

1 Введение в HTML5 и CSS3 Основы Web-дизайна

2 web 1.0 и web 2.0 web 1.0 и web принципы построения веб – сайтов web 1.0web 2.0 DoubleclickGoogle AdSense OfotoFlickr AkamaiBitTorrent Britannica OnlineWikipedia Персональные сайты Блоги Публикация Соавторство Веб–приложения web 1.0 не предполагают взаимодействия пользователей между собой. Веб–приложения web 2.0 зачастую являются просто посредником для своих пользователей, самостоятельно создающих интересующий их контент.

3 Возможности НТМL5 и CSS3 Примеры сайтов :

4 Язык HTML5 Обратно совместим с тем, что уже есть - поддерживает все элементы HTML 4 Добавляет новые мощные средства в HTML, которые были ранее доступны в Web только с помощью других технологий ( Flash, JavaScript и т.д.). Лучше подходит для написания динамических приложений, чем HTML4 (первоначально HTML был создан для создания статических документов). Дает выигрыш в совместимости для всех браузеров (имеет четко определенный алгоритм синтаксического анализа).

5 Новые свойства HTML5 Новые теги Новые свойства форм Собственная поддержка видео и аудио Рисование на холсте Геолокация Более функциональное клиентское хранилище данных Другое (перетаскиваемые элементы Drag and Drop, сокеты Web, Web workers, автономные приложения web, кэширование данных)

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

7 Новые теги HTML5 - верхний колонтитул сайта. - нижний колонтитул сайта. A history of Pop Will Eat Itself Introducing the legendary Grebo Gurus! Copyright and attribution

8 Новые теги HTML5 - навигационные функции (меню) страницы. - дополнительный блок контента, который связан с основным контентом. Contents Introduction History

9 Новые теги HTML5 - разметка времени и даты. и - рисунок и подпись для рисунка. - выделения частей контента. Скала "Братья", Западный Саян th March 1989 March Скала "Братья", Западный Саян Я считаю, что HTML5 облегчает жизнь веб-разработчиков. HTML5

10 Новые теги HTML5 - автономный фрагмент. - объединяет в группу различные статьи, или помечает различные разделы одной статьи. Introduction History Discography Rock bands Jazz bands Hip hop bands

11 Новые теги HTML5 Как заставить это работать в старых браузерах: В Internet Explorer: article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; } document.createElement('article'); document.createElement('section'); document.createElement('aside'); document.createElement('hgroup'); document.createElement('nav'); document.createElement('header'); document.createElement('footer'); document.createElement('figure'); document.createElement('figcaption');

12 Новые теги HTML5 HTML5 HTML4

13 Новые свойства форм Новые типы input в HTML5 формах: input type= - поле, которые должно содержать адрес. input type=url - поле, которое должно содержать url адрес. input type=tel - поле для ввода телефонного номера. С помощью атрибута pattern устанавливается формат принимаемого телефонного номера (с помощью регулярных выражений). input type=number - поле, которое должно содержать числа. Диапазон принимаемых чисел устанавливается с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step задается шаг допустимых чисел input type=range - поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой. Диапазон принимаемых чисел ограничивается с помощью атрибутов min и max. С помощью атрибута step задается шаг допустимых чисел. input type=search - поле поиска (может использоваться для создания поиска по сайту).

14 Новые свойства форм Новые типы input в HTML5 формах:

15 Новые свойства форм datalist позволяет привязать список к полям формы. Значения списка будут выводится как поисковые подсказки во время ввода информации в поле связанное с ним. keygen позволяет генерировать открытые и закрытые ключи, которые используются для безопасной связи с сервером. output может использоваться для вывода различной информации. С помощью атрибута for можно указать связанные поля. 100

16 Новые свойства форм Новые атрибуты в HTML5 формах : autofocus делает поле активным после загрузки страницы (может использоваться со всеми типами input). form указывает форму, которой принадлежит данное поле (может использоваться со всеми типами input). multiple указывает, что данное поле может принимать несколько значений одновременно (может использоваться с input типов и file). novalidate указывает, что данное поле не должно проверяться перед отправкой (может использоваться с form и input). placeholder отображает текст-подсказку в поле (может использоваться с input следующих типов: text, search, url, tel, и password.). required указывает, что данное поле должно быть обязательно заполнено перед отправкой.

17 Новые свойства форм Выбор даты : date позволяет выбрать дату в формате год-месяц-день_месяца. time позволяет выбрать время. datetime позволяет выбрать дату в формате год-месяц-день_месяцаTвремяZ (отчет ведется по глобальному времени). datetime-local позволяет выбрать дату в формате год-месяц-день_месяцаTвремя (отчет ведется по местному времени). month позволяет выбрать дату в формате год-месяц. week позволяет выбрать дату в формате год-Wнеделя.

18 Перетаскиваемые элементы (Drag and Drop) Перетаскивание События перетаскивания: Событие Описание dragstart Выполнится в начале операции перетаскивания ondrag Выполнится во время перетаскивания элемента ondragenter Выполнится когда перетаскиваемый элемент будет наведен на элемент, который может его принять ondragleave Выполнится когда перетаскиваемый элемент будет выведен за пределы границ элемента, который может его принять ondragover Выполнится когда перетаскиваемый элемент будет перемещаться в пределах границ элемента, который может его принять ondrop Выполнится когда перетаскиваемый элемент будет перемещен в принимающий его элемент ondropend Выполнится в конце операции перетаскивания

19 Вставка аудио и видео HTML 4 : тег - используется для загрузки и отображения объектов (видеофайлов, флэш-роликов, звуковых файлов и т.д.), которые требуют подключения к браузеру специального модуля – плагина, например: align - определяет как объект будет выравниваться на странице и способ его обтекания текстом. height - высота объекта. hidden - указывает, скрыть объект на странице или нет. hspace - горизонтальный отступ от объекта до окружающего контента. pluginspage - Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру. src - путь к файлу. type - MIME-тип объекта. vspace - вертикальный отступ от объекта до окружающего контента. width - ширина объекта. http://www.macromedia.com/go/getflashplayer HTML">

20 Вставка аудио и видео HTML 5 : тег : autoplay - звук начинает играть сразу после загрузки страницы. controls - добавляет панель управления к аудиофайлу. loop - повторяет воспроизведение звука с начала после его завершения. preload - используется для загрузки файла вместе с загрузкой веб- страницы. src - указывает путь к воспроизводимому файлу. HTML Тег audio не поддерживается вашим браузером. Скачайте музыку.

21 Вставка аудио и видео Необходимо конвертировать аудио в различные форматы Полезные ссылки: HTML

22 Вставка аудио и видео HTML 5 : тег : autoplay - видео начинает воспроизводиться автоматически после загрузки страницы. controls - добавляет панель управления к видеоролику. height - задает высоту области для воспроизведения видеоролика. loop - повторяет воспроизведение видео с начала после его завершения. poster - указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится. preload - используется для загрузки видео вместе с загрузкой веб- страницы. src - указывает путь к воспроизводимому видеоролику. width - задает ширину области для воспроизведения видеоролика. HTML

23 Вставка аудио и видео HTML 5 : тег : Также необходимо конвертировать видео в различные форматы HTML Тег video не поддерживается вашим браузером. Скачайте видео.

24 Вставка аудио и видео Размещение на сайте ссылки you-tube: Полезные ссылки: HTML