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

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 зачастую являются просто посредником для своих пользователей, самостоятельно создающих интересующий их контент.

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

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

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

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

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

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

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

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

Новые теги 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');

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

Новые свойства форм Новые типы 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 - поле поиска (может использоваться для создания поиска по сайту).

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

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

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

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

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

Вставка аудио и видео HTML 4 : тег - используется для загрузки и отображения объектов (видеофайлов, флэш-роликов, звуковых файлов и т.д.), которые требуют подключения к браузеру специального модуля – плагина, например: align - определяет как объект будет выравниваться на странице и способ его обтекания текстом. height - высота объекта. hidden - указывает, скрыть объект на странице или нет. hspace - горизонтальный отступ от объекта до окружающего контента. pluginspage - Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру. src - путь к файлу. type - MIME-тип объекта. vspace - вертикальный отступ от объекта до окружающего контента. width - ширина объекта. <embed src="images/mouse.swf" width="400" height="300" type="application/x-shockwave-flash " pluginspage= HTML

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

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

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

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

Вставка аудио и видео Размещение на сайте ссылки you-tube: Полезные ссылки: HTML <iframe width="540" height="335" src=" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen>

Введение в CSS3 CSS3 - это новый стандарт оформления HTML-документов, значительно расширяющий возможности предыдущего стандарта CSS2. CSS3 позволяет: Создавать элементы со сглаженными углами; Создавать линейные и сферические градиенты; Более гибко оформлять фоновую картинку элементов; Добавлять к элементам и тексту элементов тени; Использовать небезопасные шрифты (не боясь при этом, что они будут не поддерживаться браузером пользователя); Создавать анимацию и различные эффекты переходов; Задавать цвета несколькими новыми способами и многое другое. background:-webkit-linear-gradient(top,#E567B1,#84004D); background:-moz-linear-gradient(top,#CB0077,black); background:-o-linear-gradient(top,#CB0077,black); box-shadow:3px 3px 10px 1px #000000;

Введение в CSS3 CSS3 можно устанавливать размер фоновых изображений с помощью свойства background-size: Один элемент может иметь несколько фоновых изображений одновременно: #wrap1 { background-image:url("spider2.gif"); background-size:150px 250px; } #wrap1 { background- image:url(wislink.gif),url(mountimg3.jpg); background-position:bottom right, center; background-size:150px 40px,100% 100%; background-repeat:no-repeat,no-repeat; } #wrap2 { background-image:url("spider2.gif"); background-size:70% 70%; }

Введение в CSS3 сover: масштабирует изображение так, чтобы ее ширина и высота поместились в заданную область; сontain: масштабирует изображение так, чтобы хотя бы одна сторона целиком поместилась в заданную область: Исходное изображение Значение cover Значение contain Значение 100% 100%

Введение в CSS3 В CSS3 цвет может задаваться с помощью HSL (оттенок, насыщенность и яркость) или HSLA (оттенок, насыщенность, яркость и прозрачность) : оттенок цвета указывается в градусах поворота цветового круга (0 градусов - красный, 120 градусов - зеленый, 240 градусов - голубой и т.д.); насыщенность цвета указывается в процентах (по мере понижения процентов цвет будет блекнуть); яркость цвета указывается в процентах (0% - темный, 100% - светлый). прозрачность: 0 - максимальная, 1 – минимальная. #wrap1 { background-color:hsl(0,30%,50%); } #wrap2 { background-color:hsl(120,100%,80%); } #wrap4 { background-color:hsla(0,100%,0%,0.6); } #wrap3 { background-color:hsl(240,100%,50%); }

Введение в CSS3 Задание цвета с помощью RGBA: Данный способ позволяет определять цвет и прозрачность одновременно. Вначале необходимо указать значения RGB, а затем значение прозрачности (0 - максимальная прозрачность, 1 - минимальная прозрачность). Обратите внимание: задание прозрачности с помощью RGBA отличается от действия свойства opacity тем, что opacity делает прозрачным сам элемент и все его элементы потомки, а RGBA делает прозрачным только сам элемент. #wrap1 { background-color:rgba(0,0,0,0.6); }

Введение в CSS3 border-radius позволяет сглаживать углы элементов: #el1 { border-radius:5px; } #el1 { border-top-left-radius:20px; } #el2 { border-top-right-radius:20px; } #el3 { border-bottom-left-radius:20px; } #el4 { border-bottom-right-radius:20px; }

Введение в CSS3 box-shadow позволяет добавлять к элементам страницы тени: Первые два значения свойства box-shadow задают величину смещения тени по горизонтали и вертикали в пикселях, а третье значение задает цвет тени Данное свойство может иметь третье значение, указывающее радиус разброса тени и четвертое значение – размер тени. С помощью значения inset можно указать, что тень должна быть внутренней. #el1 { box-shadow:4px 4px black; } #el2 { box-shadow:6px 6px 6px 2px black; } #el3 { box-shadow:0px 0px 6px 2px black inset; }

Введение в CSS3 border-colors регулирует цвет каждого пикселя границы: #el1 { border:8px solid; -moz-border-top-colors: #FF0000 #EB1010 #D22E2E #B03E3E; -moz-border-right-colors: #FF0000 #EB1010 #D22E2E #B03E3E; -moz-border-bottom-colors: #FF0000 #EB1010 #D22E2E #B03E3E; -moz-border-left-colors: #FF0000 #EB1010 #D22E2E #B03E3E; }

Введение в CSS3 text-shadow позволяет добавлять к тексту тени (может быть добавлено одновременно несколько теней). при задании тени для текста необходимо указать: величину смещения тени от текста по горизонтали и вертикали (может быть отрицательной), радиус размытия и цвет тени. #shadow1 { text-shadow:3px 2px #FFAE00; } #shadow2 { text-shadow:1px 1px 10px #FFAE00; } #shadow3 { text-shadow:2px 2px 2px #FFAE00, 2px 2px 15px #1435AD; }

Введение в CSS3 opacity:x - создание прозрачных элементов (значение x может изменяться от 0.0 (полностью прозрачный элемент) до 1.0); в Internet Explorer используется свойство filter:alpha(opacity=x), где x может изменяться от 0 (полностью прозрачный элемент) до 100 (полностью непрозрачный элемент).

Введение в CSS3 transform позволяет трансформировать элементы:

Введение в CSS3 Функция Описание translate(x,y)Смещает элемент на указанное количество пикселей от изначальной позиции по горизонтали и вертикали. translateX(x)Смещает элемент по горизонтали. translateY(y)Смещает элемент по вертикали. scale(x,y)Растягивает элемент по вертикали и горизонтали. scaleX(x)Растягивает элемент по горизонтали. scaleY(y)Растягивает элемент по вертикали. rotate(градусы)Поворачивает элемент по часовой стрелке на указанное количество градусов. skew(x,y)Скашивает элемент по горизонтали и вертикали на указанное количество градусов. skewX(x)Скашивает элемент по горизонтали. skewY(y)Скашивает элемент по вертикали. matrix(x,x,x,x,x,x)Трансформирует элемент с помощью матрицы из 6 значений.

Введение в CSS3 linear-gradient (значение свойства background) – позволяет задать градиент; Для того, чтобы создать линейный градиент необходимо указать его направление (с помощью ключевых слов или градусов) и цвета перехода: #wrap1 { background:linear-gradient(top,white,black); } #wrap2 { background:linear-gradient(left,white,black); } #wrap3 { background:linear-gradient(0deg,white,black); } #wrap4 { background:linear-gradient(270deg,white,black); } #wrap2 { background:linear-gradient(left,#8F04A8 0%,#7CE700 60%,#FFE %); }

Введение в CSS3 radial-gradient позволяет создавать сферические градиенты; Задаются направление градиента, а также цвета перехода и расстояние, которое они должны занимать: #wrap1 { background:radial-gradient(white 20%,black 40%); } #wrap2 { background:radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%); } #wrap1 { background:repeating-linear-gradient(50deg,white,white 5px,black 5px,black 10px); } #wrap2 { background:repeating-radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%); }

Анимация с помощью CSS3 Эффекты перехода с помощью свойства transition: Для создания переходов необходимо указать какое CSS свойство будет изменятся и скорость выполнения этих изменений в секундах: #wrap1 { width:200px; transition: width 4s; } #wrap1:hover { width:500px; }

Анимация с помощью CSS3 Для того, чтобы добавить эффект перехода к нескольким свойствам, нужно перечислить их названия через запятую: #wrap1 { background-color:#E869AA; color:#000; width:200px; transition: color 4s, width 4s, background-color 4s; } #wrap1:hover { color:#FFFFFF; width:400px; background-color:#880045; }

Анимация с помощью CSS3 Функция Описание transition Позволяет задать значения различных свойств перехода в одном определении. transition-property Позволяет указать имя CSS свойства, к которому будет применен эффект перехода. transition-duration Позволяет указать время выполнения перехода (по умолчанию имеет значение 0). transition-timing-function Позволяет задать функцию смягчения отвечающую за плавность выполнения перехода (по умолчанию имеет значение 'ease'). transition-delay Позволяет задать задержку перед началом выполнения перехода (по умолчанию имеет значение 0).

Анимация с помощью CSS3 Функции смягчения (контролируют плавность выполнения переходов): linear ease (функция смягчения по умолчанию) ease-in ease-out ease-in-out cubic-bezier(x,x,x,x) (поведение функции контролируется переданными параметрами)

Анимация с помощью CSS3 Свойство transition-timing-function указывает скоростную характеристическую функцию эффекта перехода: Функция Описание linear Определяет эффект перехода с одинаковой скоростью от начала до конца (эквивалентно cubic-bezier(0,0,1,1)) ease Определяет эффект перехода, который начинается медленно, затем ускоряется и в конце опять замедляется (эквивалентно cubic-bezier(0.25,0.1,0.25,1)) ease-in Определяет эффект перехода с замедленным началом (эквивалентно cubic-bezier(0.42,0,1,1)) ease-out Определяет эффект перехода с замедленным концом (эквивалентно cubic-bezier(0,0,0.58,1)) ease-in-out Определяет эффект перехода с замедленным началом и концом (эквивалентно cubic-bezier(0.42,0,0.58,1)) cubic-bezier(n,n,n,n)Укажите свои собственные значения в кубической функции Безье. Возможные значения - это числа от 0 до 1

Анимация с помощью CSS3 Функции смягчения (пример): div { width:230px; transition:width 4s; } div:hover { width:600px; } #el1 { transition-timing-function:linear; } #el2 { transition-timing-function:ease; } #el3 { transition-timing-function:ease-in; } #el4 { transition-timing-function:ease-out; } #el5 { transition-timing-function:ease-in-out; } #el6 { transition-timing-function:cubic- bezier(0.6,0.2,0.5,0.6); }

Анимация с помощью CSS3 Для создания анимации в CSS3 используется – контейнер, в который должны помещаться различные свойства оформления: имя Анимации { from {CSS свойства} /* Оформление элемента перед началом анимации */ to {CSS свойства} /* Оформление элемента после завершения анимации */ anim { from {margin-left:3px;} to {margin-left:500px;} }

Анимация с помощью CSS3 к элементу, который анимируется, добавляется свойство animation, в нем указывается: имя анимации; время, в течении которого она будет выполняться; количество повторов анимации: #wrap1 { animation:anim 4s 3; }

Анимация с помощью CSS3 Определять ход выполнения анимации можно не только с помощью anim { 0% {background-color:#7F0055;} 30% {background-color:#7F0055;} 60% {background-color:black;} 100% {background-color:#7F0055;} } #wrap1 { animation:anim 6s 3; }

Анимация с помощью CSS3 свойства CSS3-анимации: Функция Контейнер для определения анимации. animation Позволяет задать все значения для настройки выполнения анимации за одно определение. animation-name Позволяет указать имя анимации. animation-duration Позволяет задать скорость выполнения анимации в секундах (по умолчанию имеет значение 0). animation-timing-function Позволяет задать функцию смягчения отвечающую за плавность выполнения анимации (по умолчанию имеет значение ease). animation-delay Позволяет задать задержку перед началом выполнения анимации (по умолчанию имеет значение 0). animation-iteration-count Позволяет задать количество повторов анимации (по умолчанию имеет значение 1, infinite анимация проигрывается бесконечное количество повторов ). animation-direction При значении alternate в нечетные разы (1,3,5...) анимация будет проигрываться в нормальном, а в четные (2,4,6...) в обратном порядке. По умолчанию данное свойство имеет значение normal, при данном значении анимация всегда проигрывается в нормальном порядке.

Правила применяется для задания кодировки внешнего "windows-1251"; body { font: 11pt Arial, Helvetica, sans-serif; margin: 0; color: #000; } p.new:after { content: " Новье!"; }

позволяет импортировать содержимое CSS-файла в текущую стилевую "/style/main.css" screen; /* Стиль для вывода результата на монитор "/style/palm.css" handheld, print; /* Стиль для печати url("имя файла") [типы "имя файла" [типы носителей]; all Все типы. Это значение используется по умолчанию. aural Речевые синтезаторы, а также программы для воспроизведения текста вслух. braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей. handheld Наладонные компьютеры и аналогичные им аппараты. print Печатающие устройства (принтер). projection Проектор. screen Экран монитора. tv Телевизор.

- загрузка файла { font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ } h1 { font-family: Pompadur, 'Comic Sans MS', cursive; }

Google Web Fonts 1. Через элемент : 2. url(

позволяет указать тип носителя, для которого будет применяться указанный screen { /* Стиль для отображения в браузере на экране*/ h1 { color: #a0522d; } h2 { color: #556b2f; print { /* Стиль для печати */ h1, h2 { color: #000; }

позволяет задать значение полей при печати документа или для страниц, у которых тип носителя задан как print { /* Стиль для печати */ h1, h2, p { color: #000; /* Черный цвет текста */ :first { margin: 1cm; /* Отступы для первой страницы */ :left { margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */ :right { margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */ }

HTML Спасибо за внимание