1. Темы лекции: Основы разработки веб-приложений.
Практическое задание: Основы разработки веб-приложений.
Тренер: Игорь Шкулипа, к.т.н.
Разработка Веб-приложений на платформе
Microsoft .NET Framework.
Занятие 1
3. http://www.slideshare.net/IgorShkulipa 3
Программа курса. Модуль 2. WCF
• Сервис-ориентированная архитектура. WCF.
• Сервисы. Веб-сервисы
• Общие сведения о WCF.
• Принципы работы сервисно-ориентированного приложения.
Конечные точки. Обмен данными. Каналы коммуникации.
Протоколы.
• Адреса, привязки, контракты.
• Контракты данных. Контракты о службе. Контракты о данных.
Контракты о сообщениях.
• Привязки Tcp, Http, DualHttp и др.
• Слой доступа к данным.
• Общие сведения об ORM-моделях.
• Платформа Entity Framework
• Модель EDM. Язык CSDL. Средства моделирования
• Сопоставление объектов и данных
• Доступ к данным и изменение
• Взаимодействие с данными. Подходы Database First, Code First,
Model First. Code-First к существующей базе данных
• Связи «один ко многим», «многие ко многим»
4. http://www.slideshare.net/IgorShkulipa 4
Программа курса. Модуль 3. ASP.NET. Web Forms
• ASP.NET. Web Forms
• Обзор ASP.NET. История.
• Веб-проекты в Visual Studio. Редактор кода. Проектирование веб-
страницы
• Веб-формы. Модель ASP.NET. Структура страницы. Класс Page
• Конфигурации приложений ASP.NET
• Серверные элементы управления
• Работа с данными и кэширование.
• Привязка данных
• Элементы управления данными SqlDataSource, ObjectDataSource,
GridView, ListView, DetailsView, FormView
• Кэширование данных
• Зависимости кэша
• Управление состоянем приложения. Сессия. Состояние. Cookie
• Навигация и валидаторы
• Проверка форм. Использование валидаторов.
• Локализация приложения. Обеспечение переключения языков
приложения.
• Membership API. Аутентификация и авторизация пользователей
• Ознакомление с элементами управления библиотеки AJAX Toolkit
5. http://www.slideshare.net/IgorShkulipa 5
Программа курса. Модуль 4. ASP.NET MVC
• ASP.NET MVC.
• Введение в ASP.NET MVC. Архитектура. Контроллеры, представления, модели.
• Контроллеры. Методы. Получение данных. Объект Request. Результаты, ActionResult и
наследники. Контекст запроса. Cookie
• Представления. Строго типизированные представления. Движок представлений Razor. Layout-
страницы. Частичные представления (Partial View). HTML-хелперы
• Модели. Использование Entity Framework. Шаблонизированные методы. Метаданные модели.
Привязка модели и валидация. DefaultModelBinder. Явная привязка модели. Поставщики
значений
• Маршрутизация. Определение маршрутов. Работа с маршрутами. Создание ограничений для
маршрутов. Генерация исходящих адресов URL. Области (Areas)
• Фильтры. Фильтры авторизации. Фильтры исключений. Фильтры действий и результатов.
Глобальные фильтры. Дополнительные встроенные фильтры
• Авторизация и аутентификация. Аутентификация Windows. Аутентификация форм. Авторизация
в MVC 4 и SimpleMembershipProvider. Использование универсальных провайдеров. Web Site
Administration Tool. Создание своих провайдеров членства и ролей. OAuth-аутентификация
• Web API. Создание и тестирование приложения Web API. Создание представления для Web API.
• Мобильные приложения на ASP.NET MVC 4. Разработка мобильных приложений. Метатег
Viewport. Применение CSS в мобильных приложениях. Создание мобильного приложения на
ASP.NET MVC 4. Режимы отображения DisplayMode
• Локализация. Мультиязычные сайты. Ресурсы. Логика мультиязычного сайта. Фильтр
локализации
• Использование JavaScript/jQuery. Краткий обзор jQuery
• Введение в AJAX. Ajax-Формы. Параметры объекта AjaxOptions. AJAX-ссылки. Формат JSON.
• AJAX-запросы с помощью jQuery
• Работа с jQuery UI
• Создание мобильного приложения на ASP.NET MVC 4
• Метатег Viewport
• Режимы отображения DisplayMode
• Применение CSS в мобильных приложениях
• Использование эмуляторов для разработки мобильных приложений
6. http://www.slideshare.net/IgorShkulipa 6
Программа курса. Модуль 5. Дополнительные темы
• Средства совместной работы и публикация приложения
• Обзор средств совместной разработки/контроля версий TFS, SVN,
GitHub и др.
• Публикация приложения на веб-сервере IIS
• Публикация приложения на хостинге
• Обзор JavaScript-фреймворков.
• Angular
• Knockout
• Ember
• Backbone.
• Работа с Microsoft OneDrive.
• LiveConnectClient.
• Работа с папками и файлами Microsoft OneDrive.
• Разработка приложений для Windows 8 Metro.
• Использование XAML.
• Использование HTML, CSS, JavaScript
7. http://www.slideshare.net/IgorShkulipa 7
Концепция разработки web-приложений
Web-приложение – это прикладное программное обеспечение, логика
которого распределена между сервером и клиентом, а обмен
информацией происходит по сети. Клиентская часть реализует
пользовательский интерфейс, а серверная – получает и обрабатывает
запросы от клиента, выполняет вычисления, формирует веб-страницу
и отправляет её клиенту согласно протоколу HTTP.
Данный вид приложений имеет ряд особенностей:
• выполняются независимо от операционной системы клиента.
При этом на него налагается требование кроссбраузерности,
вытекающее из различной реализации браузерами стандартов
HTML, CSS и DOM.
• представляют собой распределенную информационную
систему и должны выдерживать максимальное число клиентских
обращений.
• в процессе разработки открыты для тестирования с удаленных
компьютеров, что оптимально для применения гибкой методологии
разработки.
8. http://www.slideshare.net/IgorShkulipa 8
Протокол HTTP
HTTP (HyperText Transfer Protocol, протокол передачи гипертекста) – это
протокол прикладного уровня, разработанный для обмена
гипертекстовой информацией в Internet.
HTTP предоставляет набор методов для указания целей запроса,
отправляемого серверу. Эти методы основаны на дисциплине ссылок,
где для указания ресурса, к которому должен быть применен данный
метод, используется универсальный идентификатор ресурсов
(Universal Resource Identifier, URI) в виде местонахождения ресурса
(Universal Resource Locator, URL) или в виде его универсального
имени (Universal Resource Name, URN).
9. http://www.slideshare.net/IgorShkulipa 9
Протокол HTTP
HTTP используется для коммуникаций между различными пользовательскими
программами и программами-шлюзами, предоставляющими доступ к
существующим Internet-протоколам.
Сообщения по сети при использовании протокола HTTP передаются в формате,
схожем с форматом почтового сообщения Internet (RFC-822) или с
форматом сообщений MIME (Multiperposal Internet Mail Exchange).
Протокол реализует принцип запрос/ответ. Клиент инициирует взаимодействие
сервером и посылает запрос, содержащий:
• метод доступа;
• адрес URI;
• версию протокола;
• сообщение с информацией о типе передаваемых данных, информацией
о клиенте, пославшем запрос, и, возможно, с телом сообщения.
Ответ сервера содержит:
• строку состояния, в которую входит версия протокола и код возврата
(успех или ошибка);
• сообщение, в которое входит информация сервера, метаинформация
(т.е. информация о содержании сообщения) и тело сообщения.
10. http://www.slideshare.net/IgorShkulipa 10
Форма запроса
Клиент отсылает серверу запрос в одной из двух форм: в полной или
сокращенной. Запрос в первой форме называется соответственно
полным запросом, а во второй форме – простым запросом.
В качестве метода могут быть указаны GET, POST, HEAD, PUT, DELETE и
другие.
В качестве запрашиваемого URI чаще всего используется URL-адрес
ресурса.
Пример простого запроса:
GET http://somewebsite.com/
Здесь GET – это метод доступа, т.е. метод, который должен быть
применен к запрашиваемому ресурсу, а http://somewebsite.com/ – это
URL-адрес запрашиваемого ресурса.
Полный запрос содержит строку состояния, несколько заголовков
(заголовок запроса, общий заголовок или заголовок содержания) и,
возможно, тело запроса.
11. http://www.slideshare.net/IgorShkulipa 11
Методы
Любой запрос клиента к серверу должен начинаться с указания метода.
Метод сообщает о цели запроса клиента. Протокол HTTP
поддерживает достаточно много методов, но реально используются
только три: POST, GET и HEAD.
Метод GET позволяет получить любые данные, идентифицированные с
помощью URI в запросе ресурса. Если URI указывает на программу, то
возвращается результат работы программы, а не ее текст (если,
конечно, текст не есть результат ее работы). Дополнительная
информация, необходимая для обработки запроса, встраивается в сам
запрос (в строку статуса).
При использовании метода GET в поле тела ресурса возвращается
собственно затребованная информация (текст HTML-документа,
например).
Существует разновидность метода GET – условный GET. Этот метод
сообщает серверу о том, что на запрос нужно ответить, только если
выполнено условие, содержащееся в поле if-Modified-Since заголовка
запроса. Если говорить более точно, то тело ресурса передается в
ответ на запрос, если этот ресурс изменялся после даты, указанной в
if-Modified-Since.
12. http://www.slideshare.net/IgorShkulipa 12
Методы HEAD и POST
Метод HEAD аналогичен методу GET, только не возвращает тело ресурса
и не имеет условного аналога. Метод HEAD используют для получения
информации о ресурсе. Это может пригодиться, например, при
решении задачи тестирования гипертекстовых ссылок.
Метод POST разработан для передачи на сервер такой информации, как
аннотации ресурсов, новостные и почтовые сообщения, данные для
добавления в базу данных, т.е. для передачи информации большого
объема и достаточно важной. В отличие от методов GET и HEAD, в
POST передается тело ресурса, которое и является информацией,
получаемой из полей форм или других источников ввода.
13. http://www.slideshare.net/IgorShkulipa 13
Другие методы HTTP-запросов
Метод Описание
PUT Сохранить веб-страницу
DELETE Удалить веб-страницу
TRACE Отослать назад запрос
CONNECT Рассчитан на работу с HTTPS протоколом
OPTIONS Отобразить параметры
14. http://www.slideshare.net/IgorShkulipa 14
Кэширование
Суть кэширования, заключается в хранении HTML-страниц, изображений и прочих
файлов в промежуточном буфере (кэше) с целью ускорения повторного доступа
к ним и экономии трафика. Кэшем обладают как браузер пользователя, так и
промежуточные прокси-серверы и шлюзы, через которые происходит общение
клиента с сервером-источником.
Прежде чем отправить запрос по какому-либо URL, браузер проверяет наличие
требуемого объекта в собственном кэше, и если таковой имеется, используется
он. В противном случае запрос отправляется до следующего сервера, где так же
проверяется кэш. Если ни на одном из промежуточных серверов соответствия
запросу не найдено, то в конце концов он достигает сервера-источника и отклик
приходит оттуда. Стоит заметить, что прокси и шлюзы используются множеством
пользователей, и потому их кэш называется публичным, или разделяемым.
15. http://www.slideshare.net/IgorShkulipa 15
Трехуровневая архитектура
Многоуровневая архитектура клиент-сервер (Multitier architecture) –
разновидность архитектуры клиент-сервер, в которой функция
обработки данных вынесена на один или несколько отдельных
серверов. Это позволяет разделить функции хранения, обработки и
представления данных для более эффективного использования
возможностей серверов и клиентов.
Среди многоуровневой архитектуры клиент-сервер наиболее
распространена трехуровневая архитектура:
• клиентское приложение (тонкий клиент)
• сервер приложений
• сервер базы данных
16. http://www.slideshare.net/IgorShkulipa 16
Трехуровневая архитектура. Клиент
Клиент – это интерфейсный компонент, который представляет первый
уровень, собственно приложение для конечного пользователя.
Первый уровень не должен:
• иметь прямых связей с базой данных (по требованиям
безопасности)
• быть нагруженным основной бизнес-логикой (по требованиям
масштабируемости)
• хранить состояние приложения (по требованиям надежности)
На первый уровень может быть вынесена и обычно выносится простейшая
бизнес-логика: интерфейс авторизации, алгоритмы шифрования,
проверка вводимых значений на допустимость и соответствие
формату, несложные операции (сортировка, группировка, подсчет
значений) с данными, уже загруженными на клиент.
17. http://www.slideshare.net/IgorShkulipa 17
Трехуровневая архитектура. Сервер
Сервер приложений располагается на втором уровне. На втором уровне
сосредоточена большая часть бизнес-логики. Вне его остаются
фрагменты, экспортируемые на клиенты, а также погруженные в
третий уровень хранимые процедуры и триггеры.
Сервер базы данных обеспечивает хранение данных и выносится на
третий уровень. Обычно это стандартная реляционная или объектно-
ориентированная СУБД. Если третий уровень представляет собой базу
данных вместе с хранимыми процедурами, триггерами и схемой,
описывающей приложение в терминах реляционной модели, то второй
уровень строится как программный интерфейс, связывающий
клиентские компоненты с прикладной логикой базы данных.
В простейшей конфигурации физически сервер приложений может быть
совмещен с сервером базы данных на одном компьютере, к которому
по сети подключается один или несколько клиентов.
В "правильной" (с точки зрения безопасности, надежности,
масштабирования) конфигурации сервер базы данных находится на
выделенном компьютере (или кластере), к которому по сети
подключены один или несколько серверов приложений, к которым, в
свою очередь, по сети подключаются терминалы.
20. http://www.slideshare.net/IgorShkulipa 20
Поколения WEB
WEB 0.1 - это эпоха, когда веб только зарождался. В этот период интернетом
пользовались только корпорации высоких технологий, научно-
исследовательские институты и им подобные. Собственно изначально для них
эта сеть и предназначалась. Интернет в то время имел вид некой
совокупности документов, связанных между собой гиперссылками, по сути не
более чем огромная компьютерная сеть.
WEB 1.0 сформировалось в 90-е годы во многом хаотично и имело главный
качественный скачок – переход от простого размещения документов виде
файлов к созданию сайтов на основе программного обеспечения (движка и
шаблонов показа) и баз данных. В этом поколении содержание интернет-
ресурсов формирует сравнительно небольшая группа профессионалов.
Понятие Web 1.0 можно рассматривать как "Интернет только для чтения".
Web 2.0 сайты – это интерактивные многопользовательские системы, контент
которых наполняется самими участниками сети. Это сообщества
пользователей Интернета, имеющих доступ к сети в зависимости от интересов
или географической привязки. Это социальная структура, состоящая из групп
узлов, в которой используется народная классификация и практика
совместной категоризации информации. При этом в создание контента
(содержания сети) активно включаются пользователи сети. Были развиты
различные пользовательские интерфейсы, которые позволяли пользователям
уже управлять содержимым сети Интернет и связаться друг с другом.
21. http://www.slideshare.net/IgorShkulipa 21
Принципы WEB 2.0
1. Разделение содержимого,
представления и поведения Web-
страницы. Здесь содержимое — это
информация, которая выводится на Web-
странице, представление описывает формат
вывода этой информации, а поведение —
реакцию Web-страницы или отдельных ее
элементов на действия посетителя.
2. Подгружаемое содержимое. Вместо того
чтобы обновлять всю Web-страницу в ответ на
щелчок на гиперссылке, мы можем подгружать
только ее часть, содержащую необходимую
информацию.
3. Генерируемое содержимое. Какая-то
часть Web-страницы может не загружаться по
сети, а генерироваться прямо на месте, в Web-
обозревателе.
4. Семантическая разметка данных. Она
позволяет связать выводимые на Web-страницу
данные согласно каким-либо правилам.
22. http://www.slideshare.net/IgorShkulipa 22
Базовые веб-технологии
• HTML (HyperText Markup Language) - стандартный язык разметки документов в
Internet. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML
интерпретируется браузерами и отображается в виде документа в удобной для
человека форме.
• DHTML (Dynamic HTML) – это способ создания интерактивного веб-сайта,
использующий сочетание статичного языка разметки HTML, встраиваемого (и
выполняемого на стороне клиента) скриптового языка JavaScript
• XHTML (Extensible Hypertext Markup Language) — расширяемый язык разметки
гипертекста
• CSS (Cascading Style Sheets) — каскадные таблицы стилей — формальный язык
описания внешнего вида документа, написанного с использованием языка разметки.
• JavaScript - прототипно-ориентированный сценарный язык программирования.
Обычно используется как встраиваемый язык для программного доступа к объектам
приложений
• Ajax (Asynchronous Javascript and XML) - подход к построению интерактивных
пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене
данными браузера с веб-сервером
• PHP (Hypertext Preprocessor) - скриптовый язык программирования общего
назначения, применяемый для разработки веб-приложений
• ASP (Active Server Pages) - первая технология компании Microsoft, позволяющая
динамически создавать веб-страницы на стороне сервера. ASP работает на
операционных системах линейки Windows NT и на веб-сервере Microsoft IIS.
• ASP.NET - технология создания веб-приложений и веб-сервисов от компании
Майкрософт. Она является составной частью платформы Microsoft .NET и развитием
более старой технологии Microsoft ASP
23. http://www.slideshare.net/IgorShkulipa 23
HTML
HTML – это язык разметки гипертекста, что означает использование кода,
который может быть прочитан человеком и не нуждается в компиляции. По
сути, веб-страницы размечены таким кодом для того, чтобы «объяснить»
браузеру, как отображать содержимое.
Когда Вы используете HTML, то пишете с помощью HTML-тегов, которые
состоят из:
• знака «меньше» <;
• буквы или слова;
• далее может идти любое количество HTML-атрибутов в виде пары
«имя=значение»;
• и в конце идет знак «больше» >.
Закрывающий тег отличается от открывающего наличием косой черты "/".
Обычно понятия «элемент HTML» и «HTML тег» взаимозаменяемы. Но в
соответствии со спецификацией W3C элемент – это тег со всем его
содержимым, включая открывающий и закрывающий теги. У некоторых
элементов нет закрывающего тега, такие элементы называются одиночными
или пустыми, но несмотря на то, что они не могут содержать в себе
никакого контента, они все равно считаются полноценными элементами.
24. http://www.slideshare.net/IgorShkulipa 24
Общий вид HTML-файла
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
</HEAD>
<BODY>
Hello, World!!!
</BODY>
</HTML>
Первый тег <!DOCTYPE> - это идентификатор применяемого
стандарта HTML.
В данном примере использована версия HTML 4.01. Она имеет
три стандарта синтаксиса: строгий, переходный и с
применением фреймов.
В приведенном примере задано соответствие строгому
синтаксису стандарта 4.01, принятому организацией W3C
(атрибут "-//W3C//DTD HTML 4.01//EN").
Инструкции по данному стандарту находятся на
"http://www.w3.org/TR/html4/strict.dtd".
25. http://www.slideshare.net/IgorShkulipa 25
<!DOCTYPE>. Стандарты HTML.
DOCTYPE Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
В HTML-документе применяются
фреймы.
HTML 5
<!DOCTYPE html> Для всех документов.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Документ написан на XHTML и
содержит фреймы.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
XHTML мобильного профиля,
добавляет специфические
элементы для мобильных
телефонов.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Синтаксис один и подчиняется
четким правилам.
26. http://www.slideshare.net/IgorShkulipa 26
Стандарты HTML и XHTML
Требования XHTML Нельзя Можно
Все теги должны быть закрыты. <br> <br />
Все теги, атрибуты и CSS-
свойства должны быть набраны
в нижнем регистре.
<IMG SRC="" ALT="" /> <img src="" alt="" />
Все значения атрибутов тегов
должны быть заключены в
кавычки.
<a href=http://facebook.com> <a href="http://facebook.com">
Должна строго выполняться
иерархия: первый тег
закрывается последним.
<em><u>...</em></u> <em><u>...</u></em>
Блочный тег не может быть
вложен в строчный. (После
блочного элемента дальнейший
вывод на странице
осуществляется с новой строки.
Строчный элемент перевода
строки не делает.)
<span><div>...</div></span> <div><span>...</span></div>
Булевы атрибуты записываются
в развёрнутой форме.
<option selected> <option selected="selected">
У изображений обязательно
должно быть указано описание
<img src=«im.gif" /> <img src=“im.gif" alt=«Рисунок" />
27. http://www.slideshare.net/IgorShkulipa 27
Строгий и переходный синтаксис
Переходные синтаксисы существуют для того, чтобы облегчить
переход на новый стандарт. Они пропустят многое из того, что строгий
синтаксис посчитает ошибками.
Соответствие HTML-кода объявленному стандарту называют
валидностью, а проверку на это соответствие - валидацией.
Маленькие недочеты верстки браузеры часто исправляют автоматически,
и сайт работает абсолютно нормально. Но эти мелкие, практические
незаметные ошибки тем не менее замечают поисковые системы. Даже
один отсутствующий тег </p> - это минус на оценке качества сайта.
Именно из-за способности поисковых систем замечать любые недочеты
HТML-кода и рекомендуется соблюдать валидность верстки.
Кроме того, проверяя код на валидность, можно обнаружить наряду с
мелкими недочетами еще и серьезные ошибки, которые были не
замечены ранее.
28. http://www.slideshare.net/IgorShkulipa 28
Фреймы
Фреймы – это прямоугольные области экрана, каждая из которых
содержит свой собственный HTML-документ. Фреймы прекрасно
подходят для оформления следующих документов:
• Оглавление. Если вы поместите на Web-страницу оглавление в
виде вертикального столбца, то пользователь сможет обратиться к
нему в любой момент, и ему не нужно будет постоянно щелкать на
кнопке возврата к предыдущей странице. Поскольку, находясь во
фрейме, оглавление всегда будет под рукой, пользователю нужно
будет просто выбрать другой его пункт и сразу же получить
нужную информацию.
• Неподвижные элементы интерфейса. Можно зафиксировать
на экране какое-то графическое изображение, например, логотип
фирмы, в то время как остальная часть страницы будет
прокручиваться в другом фрейме.
• Формы и результаты. Можно создать форму в одном фрейме, а в
другом отобразить результаты запроса.
29. http://www.slideshare.net/IgorShkulipa 29
Теги HTML
Для обозначения начала и конца элемента применяются теги.
Внутри тегов могут быть атрибуты со своими значениями,
расширяющими возможности тегов, а также содержимое
Закрывающий тег похож на открывающий, но содержит слэш (/)
внутри угловых скобок.
Пустые элементы не имеют закрывающего тега и содержимого
31. http://www.slideshare.net/IgorShkulipa 31
Комментарии
Некоторый текст можно спрятать от показа в браузере, сделав его
комментарием. Хотя такой текст пользователь не увидит, он все
равно будет передаваться в документе, так что, посмотрев исходный
код, можно обнаружить скрытые заметки.
Комментарии нужны для внесения в код своих записей, не влияющих на
вид страницы. Начинаются они тегом <!-- и заканчиваются тегом -->.
Все, что находится между этими тегами отображаться на веб-странице
не будет.
32. http://www.slideshare.net/IgorShkulipa 32
Необязательные теги
Если какой-то тег не указан, это не означает, что он не представлен
вообще. Существуют определённые правила, позволяющие не писать
некоторые теги.
Тег Условие
<html>
</html>
<head> Если внутри имеются другие элементы.
</head>
<body> Если пустой, а также содержит что-то кроме пробела или
комментария.
</body>
</li> Если после элемента следует <li> или он последний у родителя.
</dt> Если после элемента следует <dt> или <dd>.
</dd> Если после элемента следует <dd>, <dt> или он последний у
родителя.
</p>
Если после элемента следует <address>, <article>, <aside>,
<blockquote>, <dir>, <div>, <dl>, <fieldset>, <footer>, <form>,
<h1>,...,<h6>, <header>, <hgroup>, <hr>, <menu>, <nav>,
<ol>, <p>, <pre>, <section>, <table>, <ul>.
33. http://www.slideshare.net/IgorShkulipa 33
Необязательные теги
</rt> Если после элемента следует <rt> или <rp>.
</rp> Если после элемента следует <rt> или <rp>.
</optgroup> Если после элемента следует <optgroup> или он последний у
родителя.
</option> Если после элемента следует <option>, <optgroup> или он
последний у родителя.
<colgroup> Если первым внутри идёт <col> и не следует перед другим
элементом <colgroup>.
</colgroup>
</thead> Если после элемента следует <tbody> или <tfoot>.
<tbody> Если первым внутри идёт <tr> и не следует перед <tbody>,
<thead> или <tfoot> у которых опущен закрывающий тег.
</tbody> Если после элемента следует <tbody> или <tfoot> или он
последний у родителя.
</tfoot> Если после элемента следует <tbody> или он последний у
родителя.
</tr> Если после элемента следует <tr> или он последний у родителя.
</td> Если после элемента следует <td> или <th> или он последний у
родителя.
</th> Если после элемента следует <td> или <th> или он последний у
родителя.
34. http://www.slideshare.net/IgorShkulipa 34
Атрибуты тегов
Любые атрибуты не чувствительны к регистру и пишутся внутри
открывающего тега и содержат имя и значение. В именах нельзя
использовать пробелы, кавычки ("), апострофы (‘), знак больше (>),
слэш (/) и равно (=), а также любые символы не определенные в
Юникоде.
Различают четыре разных способа написания атрибутов и их значений.
1. Пустой атрибут (логический, булев).
Этот атрибут не имеет значения, поведение тега определяет наличие
этого атрибута.
<input required>
Вместо пустого атрибута допускается писать значение, совпадающее с
названием атрибута.
<input required=required>
Однако такая форма не обязательна и может применяться только по
желанию.
35. http://www.slideshare.net/IgorShkulipa 35
Атрибуты тегов
2. Значения без кавычек
Значение пишется непосредственно после знака равно идущим вслед за именем
атрибута. До и после знака равно можно вставлять любое количество пробелов
или обойтись без них.
<img src=link.html>
3. Использование двойных кавычек
Значение берётся в двойные кавычки, обычно такая форма указывается для текста.
<input type="checkbox">
4. Использование одинарных кавычек
Вместо двойных кавычек также допустимо использовать одинарные.
<input type='checkbox'>
Значения атрибутов разделяются между собой пробелом, поэтому если у вас в
качестве значения указывается предложение, обязательно берите его в
одинарные или двойные кавычки.
36. http://www.slideshare.net/IgorShkulipa 36
Глобальные атрибуты HTML5
Глобальные атрибуты поддерживаются всеми HTML элементами (за исключением
нескольких тегов). Глобальные атрибуты позволяют задать дополнительные
параметры для тегов.
Атрибут Значение Описание
accesskey символ Определяет сочетание клавиш для доступа к
элементу.
class имя_класса
Определяет имя класса, указанного в таблице
стилей (позволяет связать тег с определенным
стилем).
contenteditable
true
false
inherit
Указывает, может ли пользователь
редактировать содержимое данного элемента
или нет.
contextmenu menu_id
Определяет контекстное меню для элемента.
Значение должно быть идентификатором для
элемента <menu>.
dir
ltr
rtl
auto
Определяет направление текста в элементе
(слева направо или справа налево).
draggable
true
false
auto
Определяет, может ли пользователь перемещать
элемент или нет.
37. http://www.slideshare.net/IgorShkulipa 37
Глобальные атрибуты HTML5
dropzone
copy
move
link
Определяет, что происходит при перетаскивании
элемента.
hidden hidden Указывает, что данный элемент должен быть
скрытым от просмотра.
id id Определяет уникальный идентификатор для
элемента.
lang код_языка
Определяет язык содержимого в элементе
(используется для правильного отображения
некоторых национальных символов).
spellcheck
true
false
Указывает браузеру проверять или нет данный
элемент на правописание и грамматику в тексте.
style свойства Задает встроенный стиль для элемента.
tabindex число Указывает порядок перехода между элементами
(при использовании клавиши "tab").
title текст
Указывает дополнительную информацию об
элементе (отображается браузерами в виде
всплывающей подсказки).
45. http://www.slideshare.net/IgorShkulipa 45
DHTML
DHTML (динамический HTML) – это набор средств, которые позволяют
создавать более интерактивные Web-страницы без увеличения
загрузки сервера. Другими словами, определенные действия
посетителя ведут к изменениям внешнего вида и содержания страницы
без обращения к серверу.
DHTML построен на объектной модели документа (Document Object Model,
DOM), которая расширяет традиционный статический HTML-документ.
DOM обеспечивает динамический доступ к содержимому документа,
его структуре и стилям. В DOM каждый элемент Web-страницы
является объектом, который можно изменять. DOM не определяет
новых тэгов и атрибутов, а просто обеспечивает возможность
программного управления всеми тэгами, атрибутами и каскадными
листами стилей (CSS).
46. http://www.slideshare.net/IgorShkulipa 46
События DHTML
На WEB-страницах можно обеспечить реакцию на определенные действия
посетителя или изменения состояния документа или окна, которые
вызывают определенные события.
Посетитель генерирует события при передвижении мыши, нажатии
кнопок мыши и клавиатуры. Изменения состояния документа
генерируют события при загрузке документа, изображений или
объектов, при появлении ошибки на странице или переходе фокуса от
одного элемента к другому.
Модель событий DHTML связана с определенной иерархией HTML-
контейнеров и основана на всплывании событий и действии по
умолчанию.
Всплывание событий заключается в том, что на событие может быть
получена реакция не только от элемента-источника события, но также
и от всех его родительских элементов вплоть до тела документа и
самого документа. Событие может быть обработано на любом уровне.
47. http://www.slideshare.net/IgorShkulipa 47
События мыши
• OnMouseOver. Перемещение указателя мыши на элемент.
• OnMouseOut. Перемещение указателя мыши за пределы элемента.
• OnMouseDown. Нажатие любой кнопки мыши. Внутри обработчика event.button
указывает, какая кнопка нажата: 1 = левая, 2 = правая, 4 = средняя.
• OnMouseUp. Отпускание любой кнопки мыши.
• OnMouseMove. Перемещение указателя мыши. Внутри обработчика event.x и
event.y - текущие координаты курсора на экране.
• OnClick. Щелчок левой кнопкой мыши на элементе или нажатие <Enter> при
каком-то элементе в фокусе.
• OnDblClick. Двойной щелчок левой кнопкой мыши на элементе.
• OnDragStart. Запуск операции перетаскивания. Цель – запретить операцию
перетаскивания путем возвращения значения false.
• OnSelectStart. Запуск операции выделения элемента. Цель – запретить
выделение области документа. Важно учесть, что отменяется лишь
инициализация выделения, т.е. если выделение начато за пределами данной
области, а на ней лишь продолжается, то помешать выделению нельзя. Событие
• OnSelectStart всплывающее, поэтому можно перехватить его и вернуть
значение false. Это лишит посетителя возможности выделять текст на странице.
• OnSelect. Выделение элемента. Следует за OnSelectStart и возникает много
раз по мере того, как посетитель расширяет или сужает выделение. Событие
OnSelect не всплывает. Оно возникает лишь в том разделе документа, где
происходит выделение.
48. http://www.slideshare.net/IgorShkulipa 48
События клавиатуры
• OnKeyPress. Нажатие и отпускание клавиши. Событие возникает
много раз, если клавиша удерживается.
• OnKeyDown. Нажатие клавиши. Событие возникает один раз, даже
если клавиша продолжает удерживаться.
• OnKeyUp. Отпускание клавиши.
Событие прокручивания
• OnScroll. Использование полосы прокрутки или прокручивание
элемента неявно посредством другого действия Не может отменить
прокручивания, так как возникает после завершения прокручивания.
Не всплывает.
События фокуса
• OnFocus. Возникает, когда элемент активизируется после щелчка по
нему мышью или с помощью клавиатуры. Фокус могут получить только
элементы пользовательского ввода и тело документа, а не элементы
содержания документа.
• OnBlur. Возникает, когда элемент теряет фокус. Используется для
контроля корректности ввода.
49. http://www.slideshare.net/IgorShkulipa 49
События формы
• OnChange. Возникает при любых изменениях в форме. Для текстового поля это
ввод или удаление. Для списка – выбор нового элемента. Так же, как и OnBlur
используется для контроля корректности ввода.
• OnSubmit. Возникает перед отправкой содержимого формы на сервер. Основное
назначение – проверка корректности введенных данных. Отмена передачи
данных происходит при возвращении значения false.
• OnReset. Возникает после щелчка на кнопке Reset. Назначение – вывод
предупреждения о сбросе.
События документа
• OnLoad. Возникает после считывания, но до отображения страницы.
Используется для отображения заставки, проверки права доступа и других
однократных действий при инициализации страницы.
• OnUnload. Возникает при выгрузке страницы. Используется для освобождения
каких-либо ресурсов и вывода дополнительных сообщений.
• OnAbort. Возникает при срыве загрузки графического объекта.
• OnError. Возникает лишь при неудачной загрузке графического элемента или
всей WEB-страницы.
Событие помощи
• OnHelp. Запрос файла справки с использованием клавиши <F1>. Не возникает
при выборе пункта Help из меню Help.
50. http://www.slideshare.net/IgorShkulipa 50
Связывание событий
Установление связи между определенным событием и сценарием
называется связыванием событий. События можно связать с помощью
специальных атрибутов любого элемента или с помощью тэга
SCRIPT.
Связывание событий с атрибутами удобно, но требует расширения языка
HTML каждый раз при изобретении нового события. А так как HTML
развивается медленно, данный подход используется только для
небольшого набора встроенных событий. Как атрибуты любого
элемента в DHTML представлены события мыши и клавиатуры.
53. http://www.slideshare.net/IgorShkulipa 53
Использование SCRIPT
Использование тэга SCRIPT является более общим механизмом
связывания события со сценарием. При этом можно использовать
новые атрибуты такие, как FOR и EVENT:
• FOR указывает имя или идентификатор (ID) элемента, для
которого описывается событие;
• EVENT указывает событие и все параметры, которые ему могут
быть переданы.
<script language="javascript" for="name1" event="onMouseOver()">
this.size="50";
</script>
<script language="javascript" for="name1" event="onMouseOut()" >
this.size="10";
</script>
54. http://www.slideshare.net/IgorShkulipa 54
Объект event
Объект event служит для получения информации о событии. Свойства объекта
event:
• srcElement. Элемент, который первым сгенерировал событие. Имя тэга
этого элемента можно определить с помощью свойства tagName.
• cancelBubble. Используется для прекращения всплывания события вверх
по иерархии контейнеров. По умолчанию равно false и событие всплывает.
Установка значения true останавливает всплывание текущего события.
• returnValue. Используется для отмены действия по умолчанию. Для этого
нужно установить значение false. Ключевое слово return в JavaScript
обновляет значение event.returnValue при возвращении управления
браузеру.
• type. Определение события. Имя события возвращается в нижнем регистре
без префикса on.
• button. Состояния кнопок мыши во время события.
• clientX, clientY. Координаты указателя мыши относительно клиентской
области окна.
• offsetX, offsetY. Координаты указателя мыши относительно контекста
воспроизведения.
• screenX, screenY. Координаты указателя мыши относительно экрана.
• altKey. Состояние клавиши «Alt»(true/false).
• ctrlKey. Состояние клавиши «Ctrl»(true/false).
• shiftKey. Состояние клавиши «Shift» (true/false).
• keyCode. ASCII-код нажатой клавиши.
55. http://www.slideshare.net/IgorShkulipa 55
Состояния кнопок мыши во время события
Свойство event.button принимает следующие значения:
0 Кнопки не нажаты
1 Нажатие левой кнопки
2 Нажатие правой кнопки
3 Нажатие левой и правой кнопок
4 Нажатие средней кнопки
56. http://www.slideshare.net/IgorShkulipa 56
Динамическое содержание
Содержание HTML-документа можно менять после загрузки страницы.
Свойства динамического содержания:
• innerText. Содержащийся внутри элемента текст без тэгов. При
установке нового значения все HTML-тэги выводятся как текст.
• innerHTML. Содержащийся внутри элемента текст вместе с
внутренними тэгами. При установке нового значения все HTML-
тэги интерпретируются браузером.
• outerText. Содержащийся внутри элемента текст без тэгов. При
установке нового значения меняется весь элемент, включая
внешние тэги.
• outerHTML. Весь элемент, включая внешние тэги. При установке
нового значения все HTML-тэги интерпретируются браузером.
Данные свойства динамического содержания могут обращаться к
элементу или его содержанию только как к целому. Если, например,
требуется изменить лишь один символ в параграфе, то придется
заново переписать весь параграф.
58. http://www.slideshare.net/IgorShkulipa 58
Методы Adjacent
Есть еще два метода для вставки содержания:
• insertAdjacentText. Вставка текста.
• insertAdjacentHTML. Вставка HTML.
Оба метода Adjacent имеют по два аргумента:
• место вставки и
• содержание.
Место вставки определяется ключами:
beforeBegin
До открывающего внешнего
тэга элемента
afterBegin
После открывающего тэга до
содержимого элемента
beforeEnd
До закрывающего тэга после
содержимого элемента
afterEnd
После закрывающего тэга
элемента
<p
onmousedown="insertAdjacentHTML('
beforeBegin','<br/>beforeBegin');
">beforeBegin</p>
<p
onmousedown="insertAdjacentHTML('
afterBegin','<br/>afterBegin');">
afterBegin</p>
<p
onmousedown="insertAdjacentHTML('
beforeEnd','<br/>beforeEnd');">be
foreEnd</p>
<p
onmousedown="insertAdjacentHTML('
afterEnd','<br/>afterEnd');">afte
rEnd</p>
59. http://www.slideshare.net/IgorShkulipa 59
CSS
CSS расшифровывается Cascading Style Sheets (Каскадные Таблицы Стилей).
С помощью CSS можно оформлять HTML документы.
CSS были представлено вместе с HTML 4.0 и создавались для разрешения проблем с
оформлением, возникающих в предыдущих версиях HTML.
Таблицы стилей состоят из набора правил(1). Каждое правило состоит из одного или
нескольких селекторов(3) и блока определения(2) выделяющегося фигурными
скобками.
Блок определения может содержать одно или несколько свойств(4) отделенных
точкой с запятой (;) (после последнего свойства точка с запятой необязательна).
Каждое свойство должно иметь значение(5) отделенное двоеточием (:).
60. http://www.slideshare.net/IgorShkulipa 60
Селекторы
С помощью селекторов выбираются элементы на странице, которые
необходимо оформить.
В CSS существуют следующие виды селекторов:
• Селекторы тэгов. Можно выбирать элементы на странице для
оформления по названию тэга.
Пример.
p {
color:green;
}
h2 {
color:red;
}
• Селектор id. Используется, когда необходимо выбрать только
один определенный элемент на странице, с предварительно
заданным идентификатором. Для того, чтобы оформить элемент
необходимо обратиться к идентификатору в таблицах стилей
добавив перед ним символ “#”
Пример.
#test1 {
color:green;
font-family:verdana;
font-size:1.2em;
}
61. http://www.slideshare.net/IgorShkulipa 61
Селекторы
• Селектор class. Данный вид селекторов позволяет выбирать для
оформления не единственный элемент, а группу элементов. С
помощью атрибута class можно задать, что элемент относится к
группе. Для того, чтобы затем оформить эту группу необходимо в
таблицах стилей обратиться к имени группы добавив перед ней
символ ".".
Пример.
.test1 {
color:green;
font-family:verdana;
font-size:1.2em;
}
• Селекторы атрибутов. Элементы на странице могут быть
выбраны по их атрибутам.
Пример. Оформление всех элементов с атрибутом “src”.
[src]
{
border:solid green 3px;
}
62. http://www.slideshare.net/IgorShkulipa 62
Комбинирование селекторов
Для более точного выбора элементов в CSS может использоваться
комбинирование селекторов.
• Следующее оформление будет применено только к тем элементам
с class="test1", которые являются заголовками.
h2.test1
{
color:green;
font-family:verdana;
}
• Следующее оформление будет применено только к тем элементам
p, которые находятся внутри элементов div
div p
{
color:green;
font-family:verdana;
}
• Символ "+" позволяет выбирать элементы, которые идут сразу
после указанного.
div+p
{
color:green;
font-family:verdana;
}
63. http://www.slideshare.net/IgorShkulipa 63
Группировка селекторов
63
Часто при оформлении HTML документов с помощью CSS приходится
применять одинаковые свойства для разных селекторов.
Для того, чтобы сократить размер кода, можно группировать селекторы с
одинаковыми свойствами разделяя их запятой.
h1,h2,p
{
font-family:verdana;
color:green;
}
64. http://www.slideshare.net/IgorShkulipa 64
Пример CSS
<html>
<head>
<style type='text/css'>
/* Правила оформления должны располагаться здесь */
</style>
</head>
<body>
<h3>Покрасьте меня в розовый цвет (color:pink).</h3>
<p>Данный элемент должен остаться неоформленным.</p>
<p id='greycol'>Покрасьте меня в серый цвет (color:grey).</p>
<div>Данный элемент должен остаться неоформленным.</div>
<div><p>Покрасьте меня в красный цвет (color:red).</p></div>
<h4>Данный элемент должен остаться неоформленным.</h4>
<p>Покрасьте меня в зеленый цвет (color:green).</p>
<p class='yellowcol'>Покрасьте меня в желтый цвет (color:yellow).</p>
</body>
</html>
66. http://www.slideshare.net/IgorShkulipa 66
Псевдо-классы CSS
• :first-child позволяет выбрать элемент, который является первым потомком в
его родительском элементе. Пример. Будет оформлен только первый абзац.
p:first-child {
color:red;
}
• :first-letter позволяет оформить первую букву указанного элемента.
p:first-letter {
color:red;
}
• :focus позволяет выбрать активные input элементы формы.
:focus {
background-color:yellow;
}
• :first-line позволяет оформить первую строчку указанного элемента.
p:first-line {
color:red;
}
• С помощью псевдо-классов :before и :after можно вставлять произвольное
содержимое до и после указанных элементов.
p:before {
content:"CSS";
font-weight:bold;
}
p:after {
content:"/CSS";
}
68. http://www.slideshare.net/IgorShkulipa 68
Основы верстки веб-страниц
Вёрстка веб-страниц — процесс формирования веб-страниц,
следующий за этапом веб-дизайна.
Методы верстки:
• Табличная верстка раньше была основной. Преимущество верстки с
помощью таблиц заключается в ее простом исполнении и практически
одинаковом отображении в разных браузерах. Недостатки – сложная и
объемная структура, которая в разы увеличивает количество кода ( по
сравнению с блочной). Чтобы изменить табличную верстку нужно
затратить большое количество времени и усилий, долго вникать в уже
существующую структуру. На сегодняшний день табличную
верстку рекомендуют использовать только для отображения
таблиц.
• Блочная верстка является основной в среде веб-разработчиков. В
блочной верстке каркас документа состоит из тегов <div>. Главным ее
преимуществом является концепция семантической верстки, т. е.
разделение содержимого и оформления.
72. http://www.slideshare.net/IgorShkulipa 72
Пример блочной верстки
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Блочная верстка</title>
</head>
<body>
<div id="header">Заголовок</div>
<div id="wrapper">
<div id="content" style="float:left">Содержание</div>
<div id="menu">Меню</div>
</div>
<div id="footer">Футер</div>
</body>
</html>
По умолчанию, каждый новый блок располагается с новой строки. Для того,
чтобы расположить блок слева или справа от другого используется свойство
float. По умолчанию оно имеет значение «none», но можно также
выставлять значения «left» и «right».
73. http://www.slideshare.net/IgorShkulipa 73
float и clear
Важно учитывать, что в некоторых браузерах свойство float
распространяется не только на сам блок, в котором оно прописано, но
и на последующий элемент, который будет идти за этим блоком. То
есть если мы к вышеописанным двум блокам добавим еще один блок,
не указывая ему никаких свойств, то он расположится не с новой
строки, а начнется справа от второго блока.
Для того, чтобы избежать этого, блочная верстка div использует
свойство clear, которое должно быть задано для того блока, который
мы хотим расположить с новой строки. Чаще всего для этого ему
задается значение «both», но можно также задать значения «left»
или «right», если мы хотим не просто расположить блок на новой
строке, но и задать ему выравнивание.
