Web сервере - Томский политехнический университет

Кафедра «ОСУ»
Весенний семестр 2009/2010 уч. года
Уч. группы: 8561 и 8562
Проектирование Интернет
приложений
Лекция 1 -2
Основные Интернет технологии
План лекции
• Описание дисциплины
• Стандарты Web сети
– HTTP протокол
– HTML, CSS
– DHTML, JavaScript, VBScript
– ASP, PHP, JSP
• Технологии программирования
– Клиентские
– Серверные
Цель преподавания данной
дисциплины
• дать основы проектирования и разработки webприложений с использованием технологии ASP.Net
и выполнения приложений Microsoft.Net и языка
программирования C#,
• сформировать у студентов понимание создания и
развертывания программного обеспечения,
работающего в компьютерных сетях
использованием Интернет технологий.
• на лабораторных занятиях студенты разрабатывают
web приложения с помощью системы
программирования Microsoft Visual Studio.Net.
Основными задачами изучения и
изложения дисциплины являются
• изучение основ программирования ASP.Net для web-сети
Интернет;
• изучение основ разработки графического интерфейса – web
страниц;
• изучение методов поддержки состояния web приложения;
• изучение методов перехода (навигации) между разными
элементами web приложения;
• изучение методов обеспечения безопасности работы
приложения в сети Интернет;
• изучение методов взаимодействия web приложений с базами
данных;
• приобретение практических навыков создания, отладки и
развертывания web приложений с помощью системы
программирования Microsoft Visual Studio.Net. (язык
программирования C#).
Лектор:
• Тузовский Анатолий Федорович –
профессор каф. ОСУ
• Рабочее место к. 316 КЦ ТПУ
• Консультация: Четверг с 17-18
Лабораторные занятия:
 Губин Максим Юрьевич, ассистент каф. ОСУ
Курсы учебного плана, связанные с Интернет
технологиями
1.
Вычислительные системы, сети и телекоммуникации – 5
семестр (46 часов лекций, 36 часов лаб. раб.)
2. Мировые информационные ресурсы – 6 семестр (34 часа
лекций, 34 часа лаб. раб.)
3. Проектирование Интернет приложений – 8 семестр (26 часов
лекций, 26 часов лаб. раб.)
4. Сетевая экономика – 9 семестр (18 часов лекция, 18 часов
практических)
5. Информационные технологии в электронной коммерции – 9
семестр (28 часов лекций, 28 часов лаб. раб.)
----------------------------------------------------------------------Итого: Лекций – 152 часа;
Лаб.работы – 72 часа;
Практич. занятия – 18 часов.
Распределение учебного времени
• Лекции
– 26 часов
• Лабораторные работы – 26 часов
• Самостоятельная работа – 52 часа
• Всего
– 112 часов
----------------------------------------------------------• Экзамен
Материалы курса
• Материалы по курсу будут расположены в
локальной сети по адресу
\\Exilim\Info\Дисциплина - Проектирование
Интернет Приложений (8561, 8562)
Литература
• в электронном формате
\\Exilim\Info\Дисциплина - Проектирование Интернет
Приложений (8561, 8562)/Библиотека
– на русском
– на английском
• книги по технологии ASP.Net
– в библиотеке НТБ
– в магазинах
Основные этапы развития web
технологий
• Создание HTTP протокола и HTML языка.
• Добавление CSS и скриптов на стороне
клиента (а также встраиваемых компонент
Java и COM).
• Появление XML и скриптов на стороне
сервера.
• Web сервисы.
• Облачные вычисления (cloud computing).
Кодирование документов на
компьютере
• Для обработки документов компьютерами (отображении,
обмене) потребовалось описывать их эффективным способом.
• Наиболее распространенным методом кодирования
документов являлся формат ASCII (American Standard Code for
Information Interchange), который использует для хранения
символов 1 байт (7 бит для символа и 1 бит для исправления
ошибок).
– Всего с помощью 7 бит можно задать 128 значений, которых было
достаточно для английского языка (для больших и маленьких букв,
знаков препинания и чисел).
– Первые 31 значения использовались для обозначения
управляющих кодов (таких, как начало/окончание передачи
данных, переход на новую строку и т.п.).
– Пробел кодируется числом 32.
– Буквы алфавита начинаются с числа 65 (65 = A, 66 = B, …).
Разметка (murkup)
•
•
•
•
•
•
•
Кодировка ASCII работала хорошо для не форматированного текста (например, такого, как
программный код), но не достаточен для описания документов, которые имеют типографскую
(печатную) информацию. Для отображения на экране компьютера статьи из газеты или
журнала требуется знать, как расположен текст, размеры букв, внешний вид букв (шрифт),
расположение строк и колонок и т.п.
Для решения этой проблемы были созданы языки разметки (murkup languages), которые
включали в текст специальные инструкции.
С их помощью в текст документа вставлялись дополнительные коды, которые не
отображались при показе документа. Эти коды также записывались с помощью ASCII
формата, но программы обрабатывал их не так, как содержание документа.
Например, в ранних процессорах текста, пользователь должен был иметь набор
«управляющих кодов» для задания того, как должен выглядеть текст. Эти коды расширяли
уже существующий набор кодов.
В языке разметки целые слова являлись инструкциями для компьютера. Чтобы отличать эти
инструкции от самого текста документа было предложено заключать их в квадратные скобки
([], brackets). Такие слова назывались тегами (tags).
Некоторые теги имели атрибуты – передаваемые им дополнительные значения. Например,
тег для шрифта (font) обычно имел тег для описания типа шрифта и для задания размера.
Описание документов является очень сложным делом – разные пользователи требовали свои
собственные специальные функции. В связи с этим с 60-х годов появилось множество
электронных систем разметки, которые были сильно не совместимыми между собой.
Язык SGML
•
•
•
•
•
•
В конце 60-х годов Charles Goldfarb, который возглавлял группу специалистов
IBM, исследовал системы электронных документов и создал полный язык,
который описывал форматирование и разметку текста. Этот язык получил
название GML (Generalized Markup Language, а также инициалы его
создателей: Goldfarb, Mosher и Lorie).
В связи с доминирующим положением фирмы IBM на рынке, GML широко
использовался и рассматривался в качестве хорошей основы для построения
более стандартных языков описания документов.
Первый рабочий вариант нового языка Standard Generalized Markup Language
(SGML) был разработан в 1980 году и окончательно был утвержден
стандартом ISO в 1986.
SGML это метаязык, т.е. язык, который используется для описания структуры
других языков. В связи с этим, SGML не является в действительности языком
описания документов, а должен рассматриваться как независимая от
платформы основа для построения используемых языков разметки, имеющих
общую структуру.
Все языки разметки, которые используются сейчас, по существу являются
подмножествами языка SGML.
SGML структурирован таким образом, что базовая грамматика всех SGML
языком должна быть одной и той же, меняется только смысл конкретных
тегов.
Описание типа документа
(Document Type Definition, DTD)
•
•
•
•
Важным в SGML являлось то, что он позволяет разрабатывать описания
типов документов (Document Type Definition, DTD), которые используются для
описания того, как разметка выражает содержание и структуру текстового
документа.
Когда специалисты создают новый язык с помощью SGML, то они
разрабатывали DTD, который пояснял, что должен делать каждый тег. С их
помощью, программа, которая поддерживает SGML, могла отличать любое
новое подмножество языка SGML, если оно ссылается на правильное DTD.
Более того, так как SGML правила являются очень общими и
предназначенными для описания данных и структур, то становится не важно,
для чего документ просматривается. SGML документ может описывать
данные, которые будут выводиться на печать, показываться на экране
дисплея, пересылаться между компьютерами и никогда не просматриваться
человеком. Таким образом SGML может использоваться в самых разных
областях.
Недостатком таких больших возможностей является то, что SGML не
предназначался для использования в персональных компьютерах. Он имеет
очень большое описание (спецификацию), разрабатываемую в течении
десятилетия, и имеет особенности не подходящие для большинства
пользователей.
Появление идей гипертекста
•
•
•
•
•
В 1945 году один из ведущих ученых США Vannevar Bush написал статью «Как мы можем
думать»(«As we may think»). В этом небольшом документе он изложил его идеи о том, как
может выглядеть будущая мировая система поиска информации, называемая «Memex». Bush
предполагал, что такая система позволит человеку, удобно расположившемуся за своим
рабочим столом, получить электронный доступ к мировым библиотекам и легко выполнять
переходы от одного документа к другому документу.
Bush был одним из ранних сторонников электронных компьютеров и понимал, что может
быть возможным в будущем, но для обычного читателя этой статьи идея небольшой
электронной системы поиска информации казалась полностью из области научной
фантастики.
Намного позже (в 60-х годах) идеи описанные в статье «As we may think» оказало влияние на
новое поколение специалистов, в частности на Douglas Englebart и Ted Nelson, которые
помогли создать компьютерные системы, используемые в настоящее время.
Douglas Englebart разрабатывал системы поиска информации и среди прочего, он изобрел
первую компьютерную мышь и оконную систему – графический интерфейс пользователей
(GUI), которые он показал в 1968 году.
Ted Nelson был ярым сторонником персональных вычислений и простого интерфейса
пользователей. Он предложил термин «гипертекст» (hypertext)/ Гипертекстовая система это
система в которой (как и в Memex) документы обширно связаны между собой и пользователь
может легко выполнять переходы между ними.
Появление Web сети
•
•
•
•
•
•
Для больших гипертекстовых систем компьютерам требовались возможности
аналогичные тем, которые были разработаны Englebart, но такие технологии
стали доступными для обычных пользователей только в середине 80-х годов.
(Apple Macintosh, Arari ST, Amiga, а позже стандарт Microsoft/Intel/IBM).
В 1989 году исследователь, работающий в Европейской исследовательской
организации физики частиц CERN, Tim Berners-Lee создал первую
гипертекстовую систему для выполнения переходов между документами.
Первая система Enquire , которую разработал Tim Berners-Lee, скоро
развилась до прототипа того, что сейчас называется World Wide Web. (WWW,
Web сеть)
Сеть WWW использовала подмножество языка SGML, которое назвали HTML
(HyperText Murkup Language).
Web сеть стала частью сети Internet, с которой наиболее знаком обычный
пользователь. Электронные документы просматриваются с помощью
программы браузер (browser – просмотрщик, проистыватель). И каждый
документ имеет набор (коллекцию) гиперссылок, которые связывают его с
другими документами, страницами.
Расположение страниц описывается с помощью специального адреса – URL
(Uniform Resource Locator).
Современные Web стандарты
•
•
•
•
XHTML 1.0 и выше
CSS Level 1 & CSS Level 2
DOM Level 1 & DOM Level 2
ECMAScript 262 (текущий JavaScript)
XHTML это будущее
•
•
•
•
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.1
XHTML 2.0 (W3C Working Draft)
No more development of HTML!
Что такое Интернет приложение?
• Программа, использующая в своей работе
сеть Интернет
– Обмен сообщениями
– Получение обновлений
• Web приложение – программа запускаемая
на сервере с использованием технологий
WWW
• В данном курсе будет использоваться
второе определение – Web приложение
Web приложения
• Web приложение или webapp это приложение, с которым можно
работать с помощью web браузера по сети Internet или intranet.
• Это также компьютерная прикладная программа, пользовательский
интерфейс (UI) которой кодируется на языках понятных браузерам
(например, HTML, CSS, JavaScript и пр.) и которая доверяет обычному
браузеру возможность работы с ней.
• Web приложения стали очень популярными по следующим причинам:
– браузеры стали доступными во всех операционных системах;
– браузеры удобно использовать в качестве клиентов (иногда называемых
«тонкими»);
– возможности обновлять и поддерживать web приложения без без
обновления ПО у пользователя;
– возможность поддерживать разные компьютерные платформы (Intel, Sun,
Apple …);
• К распространенным web приложениям относятся:
–
–
–
–
–
Почта (gmail.com)
Розничная торговля (ozon.ru)
Аукционы,
Открытые энциклопедии (wiki).
…
Web приложение
• Первоначально Web приложение рассматривалось, как
реализация цикла запрос/ответ (request/response):
– клиент (браузер) отправляет запроса Web серверу с любыми
данными на текущей странице;
– наличие кода на сервере, который формирует новую страницу;
– отправка новой страницы назад клиенту и (наконец) браузер
отображает всю новую страницу пользователю;
– далее цикл запрос – ответ повторяется.
• Современное понимание Web приложений:
– клиент также отправляет запрос на новую страницу;
– но после формирования новой страницы, получения ее
браузером и отображения пользователю, все последующие
взаимодействия между страницей и сервером выполняется с
использованием JavaScript и Web Сервисом (по крайней мере,
до тех пор, пока пользователь не перейдет к новой странице.
World Wide Web
(WWW)
WWW = URL + HTTP + HTML
ПО WWW = Браузер + Сервер
Основные этапы развития Web сети
• 1989 – Тим Бернерс Ли предложил
использовать гипертекст
• 1990 появилась первая программа для
работы с гипертекстом
 WWW Consortium - организация по разработке и
поддержке стандартов сети Интернет
Основа архитектуры Web
PC/Mac/Unix/...
+ Browser
Клиент
Запрос (Request):
http://www.digimon.com/default.asp
Сеть
HTTP, TCP/IP
Ответ (Response):
<html>….</html>
Сервер
Web Server
Web клиент - браузер
• Веб-бозрева́тель или бра́узер (browser) —
это программное обеспечение для запроса вебстраниц,
для их обработки, вывода и перехода от одной страницы
к другой.
• Обычно поддерживает разные протоколы (HTTP, FTP)
• Отображение разных видов ресурсов
– основной - HTML документ
– графика
– мультимедиа документы
• Обрабатывает скрипты (обычно JavaScript)
• Реализует пользовательский интерфейс – формы (Form)
Web – сервер
(HTTP сервер )
1.
•
Компьютерная программа, отвечающая за принятие HTTP запросов от
клиента (например, web browsers), и отправляющая им HTTP ответ
некоторым набором данных, которые обычно являются HTML документами
или связанными с ними объектами (images, и т.п.).
В HTTP запросе содержится указание на ресурс
1.
2.
3.
4.
5.
6.
•
HTML страница
Текстовый файл (txt, doc, pdf)
Графический файл
Мультимедиа файл (звук, видео)
Выполняемый файл (exe или dll)
Файл со скриптами (asp, aspx, php, jsp, …)
Действия сервера
–
–
–
Отправка файла (для 1-4),
Запуск на выполнение exe программы или dll модуля и отправка полученного
результата клиенту
Передача на обработку файла со криптами программам обработки скриптов на
сервере (server-side script engine) и отправка клиенту полученного результата
Действия web-сервера
• Когда web-сервер получает запрос, он определяет,
что делать:
– отправить клиенту запрашиваемый файл;
– запустить на выполнение программу:
• CGI программу (обычно на языке С);
• ISAPI расширение (вызвать функции из dll библиотеки);
• вызвать ISAPI расширение, которое обрабатывает страницы со
скриптом (ASP);
• вызвать ISAPI расширение, которое создает рабочий процесс
ASP.NET и вызывает версию CLR для выполнения Webприложений, для каждого приложения создается свой
Application domen, запускается ApplicationHost, которое
создает web-page объекты и инициирует вызов обработчиков
событий (ASP.Net);
• ASP.MVC ???
Запрос статических файлов
file.mp3
file.gif
File.gif
file.htm
Клиент
Сервер
File.exe
File.htm
File.mp3
File.asp
Get file.htm
Get file.gif
Get file.mp3
Сеть интернет
Рабочий каталог сервера
Запрос исполняемых модулей
(CGI технология)
Выполнение
File.exe
file.htm
file.htm
Клиент
Сервер
File.htm
File.asp
Get file.exe
Рабочий каталог сервера
Сеть интернет
Запрос динамических страниц
Рабочий каталог сервера
File.exe
file.htm
Клиент
File.htm
Сервер
File.asp
Get file.asp
запуск на
обработку
file.htm
Сеть интернет
Server-side
Server-side
scrip
engine
Server-side
scrip engine
scrip engine
File.php
Протокол HTTP
HTTP протокол
•
•
•
•
•
Протокол HyperText Transfer Protocol (HTTP) является прикладным протоколом
взаимодействия клиента с сервером, который определяет стандартный формат
для точного описания запроса на получение ресурсов в сети Web. Это базовым
компонентом, на котором основывается Web сеть. Надстройка над TCP/IP
протоколом.
HTTP был разработан в начале 1990-х годов с целью создания распределенных
гипермедиа систем, которые предоставляют доступ к взаимосвязанным
мультимедиа документам, хранящимся на компьютерах-серверах.
Взаимодействие между клиентами и серверами выполняется с использованием
протокола TCP/IP.
С помощью протокола HTTP пользователь, использующий клиентское
приложения (например, браузер) может сделать запрос на получение ресурсов
доступных на удаленном сервере (Web сервере).
Обычно с помощью HTTP протокола запрашиваются и передаются HTML
страницы, т.е. мультимедиа документы, включающие гипертекстовые ссылки
на другие HTML документа.
C помощью HTTP может быть выполнен запрос на получение файла любого
формата, который хранится на Web сервере или вызов на выполнение
(invocation) программы, которая может быть выполнена на стороне сервера.
HTTP протокол
• Протокол обмена сообщениями в web сети
• HTTP протокол не поддерживает состояние сеанса связи
(последовательности запросов к серверу) (stateless).
• После того, как HTTP запрос обработан, web сервер
разрывает связь с браузером
• Браузер и сервер не хранят состояние сеанса связи, они
знают только о поступивших запросах или документах.
• При выполнении следующего запроса к серверу браузер
не рассчитывает, что он сохранил какую-то информацию
из предыдущих запросов.
Универсальный Определитель местоположения
Ресурса (Uniform Resource Locator )
•
•
Так как такие ресурсы распределены по сети Internet, то требуется способ идентификации для
того, чтобы определить местоположение ресурсов и получить доступ к ним.
Идентификатор для ссылки на ресурсы является строкой, которая называется Uniform
Resource Locator (URL, Универсальный Определитель местоположения Ресурса), который
указывает:
–
–
–
–
•
•
•
используемый протокол для передачи данного ресурса (например, HTTP для обмена Web
страницами или другие протоколы, такие, как FTP, которые поддерживаются браузерами);
наименование IP адреса компьютера, который хранит данный ресурс;
(может быть) номер порта, указывающий доступ к конкретному сетевому порту сервера;
название документа и его расположение в файловой системе Web сервера.
Например, URL :
http://osu.cctpu.edu.ru/resorces/index.html
обозначает файл с именем «index.html» , который хранится в каталоге (директории) с именем
«resources/» в файловой системе, которая управляется Web сервером установленным на host
с именем «osu.cctpu.edu.ru».
Кроме этого, за URL адресом могут следовать параметры (так называемая «строка запроса»),
например, для того, чтобы передавать инструкции или просто данные, предоставленные
пользователем с помощью форм (forms).
Например:
http://osu.cctpu.edu.ru/resorces/search.htm ? q=“Иванов” & p = 25
Структура URL
Как работает HTTP
•
•
•
Когда пользователь набирает URL адрес в адресной строке или когда пользователь щелкает ссылку на Web
странице, которая представляет URL некоторого ресурса, программа браузер передает HTTP запрос (request).
В строке заголовка HTTP запроса указывается: (1) HTTP метод, (2) URL запрашиваемого ресурса и
(3)используемая версия протокола.
Наиболее важными методами протокола HTTP являются GET и POST.
–
–
•
•
•
метод GET передает Web серверу простой запрос на получение ресурса и позволяет пользователю передать простые
входные данные, включая их в строку запроса (query string).
метод POST передает запрос, который позволяет пользователю передать сложные входные данные (например, длинный
текст или файл) для их обработки на сервере. При использовании метода POST, данные пользователя упаковываются в
виде приложения к запросу и составляют так называемое тело запроса (request body).
После получения HTTP запроса сервер ищет ресурс и отправляет ответ клиенту.
В HTTP ответе (response message) включается строка состояния, которая содержит информацию о версии
протокола и числовой код результата обработки запроса (numeric status code) с поясняющим сообщением
(например, HTTP/1.1 404 Not found). В основной части сообщения (message body) записывается содержание
запрашиваемого ресурса.
Чтобы дать возможность обмениваться дополнительной информацией, к запросы и ответу могут быть
добавлены дополнительные поля (называемые заголовками).
HTTP запрос
Метод URI HTTP/Версия
HTTP/Версия КодСостояния Пояснение
Host: example.org
Accept: */*
User-Agent: Mozilla/4.0 (compatible; MSIE 5.0; Windows 98)
Referer: http://example.org/
стартовая строка
заголовок
тело
HTTP протокол
Пример HTTP запроса на получение страницы
GET /hello.htm HTTP/1.1
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
If-Modified-Since: Wed, 24 Oct 2001 14:12:36 GMT
If-None-Match: "50b0d3ee955cc11:a78"
User-Agent: Mozilla/4.0.(compatible; MSIE.6.0; Windows NT 5.1)
Host: room214.osu.cctpu.edu.ru
Connection: Keep-Alive
[blank line]
Пример HTTP ответа сервера
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
Date: Wed, 24 Oct 2001 14:12:37 GMT
Content-Type: text/html
Accept-Ranges: bytes
Last-Modified: Wed, 24 Oct 2001 14:00:53 GMT
ETag: "d02acf81975cc11:a78"
Content-Length: 46
[blank line]
<html>
<body>
Hello, world
</body>
</html>
Язык HTML
•
•
Язык гипертекстовой разметки(«HyperText Markup Language», HTML) используется для
описания содержания (контента) Web страницы и ее визуального форматирования. Язык
HTML является языком «разметки» ("markup").
HTML страница состоит из смеси текста и изображений (рисунков) (содержания, которое
показывается браузером), а также специальных элементов, называемых тегами (tags),
которые разделяют содержание на части, чтобы пояснить браузеру, как эти части должны
показываться или определяют связи элементов содержания с другими Web страницами.
• Описание Web страницы обрабатывается
специальным компонентом, встроенным в Web
браузер (processor), который на входе получает
размеченное содержание, анализирует теги
страницы и формирует документ, который
показывается на экране.
• HTML теги являются строками заключенными в
угловые скобки. Большинство тегов
используется парами, которые отмечают начало
и конец части содержания страницы.
История языка HTML/XHTML
•
Версии языка HTML
–
–
–
–
–
•
1992 – HTML first defined
1994 – HTML 2.0
1996 – HTML 3.2, compromise version
1997 – HTML 4.0, separates content from presentation
HTML 4.1
Вместо дальнейшего развития языка HTML было решено
создать новый язык xHTML (переопределение языка
HTML на языке XML)
–
–
–
1998 – XML standard for writing Web languages
2000 – XHTML 1.0, XML совместимый с HTML
2002 – XHTML 1.1
•
•
•
•
•
•
•
XHTML 1.0 Переходный (Transitional): предназначен для лёгкой миграции из
HTML 3.2 и для тех, кто использует инлайн-фрэймы.
XHTML 1.0 Строгий (Strict): полностью отделяет содержание документа от
оформления (которое теперь задаётся только через CSS), многие атрибуты
(такие как, например, bgcolor и align) более не поддерживаются, их
поведение можно задавать только через таблицу стилей.
XHTML 1.0 Фрэймовый (Frameset): используется, если необходимо разделить
окно браузера на несколько фрэймов.
XHTML 1.1 Модульный (Module-based): авторы могут импортировать
дополнительные свойства в их разметку.
XHTML Основной (Basic): специальная облегчённая версия XHTML для
устройств, которые не могут использовать полный набор элементов XHTML —
в основном используется в миниатюрных устройствах, таких как мобильные
телефоны. Подразумевается, что он заменит WML и C-HTML.
XHTML мобильного профиля (Mobile Profile): основанный на XHTML Basic,
добавляет специфические элементы для мобильных телефонов.
XHTML 2.0. Пока в разработке. Синтаксис еще больше приближен к синтаксису
XML. Также является модульным языком.
Зачем нужен xHTML вместо HTML
• It can make our page size smaller and our code clearer to
read.
• Our code can be used with all XML-aware processors (from
authoring tools and validators through to XSLT, DOM, and
SAX processors).
• It addresses issues regarding creating web pages so that
they can be viewed on all the new devices that can now
access the Internet, from phones to fridges, without each
type of device requiring its own different language.
• XHTML processors can require less memory and power
(which is essential for smaller devices).
• Some new browsers and devices are being written to only
support XHTML.
Различия между XHTML и HTML
•
•
•
•
•
•
Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега
(например, <img> или <br>) должны иметь на конце / (например, <br />).
Булевы атрибуты записываются в развёрнутой форме. Например, следует писать
<option selected="selected"> или <td nowrap="nowrap">.
Имена тегов и атрибутов должны быть записаны строчными буквами (например,
<img alt="" /> вместо <IMG ALT="" />).
XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL,
должны замещаться < и & соответственно. По рекомендации W3C
браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать
документ. Для HTML браузеры старались понять, что хотел сказать автор.
Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по
умолчанию является ISO 8859-1).
Для XHTML страниц рекомендуется задавать MIME-тип — application/xhtml+xml,
но это не является обязательным, более того — браузер Internet Explorer 8 и
младшие версии, не смогут обрабатывать страницу, поэтому с XHTML 1.0
традиционно используется MIME-тип для HTML — text/html.
•
•
Также стандарт рекомендует указание
<?xml version="1.0" encoding="utf-8"?>
перед DTD, но это не обязательно, более того — браузер Internet Explorer
воспринимает такое указание (как и любой другой текст перед <!DOCTYPE>),
как признак того, что данную страницу необходимо отображать в режиме
обратной совместимости, а не согласно стандарту.
Существует три типа документов XHTML:
– strict,
– transitional и
– frameset.
•
•
Наиболее употребительной и универсальной из версий XHTML является
переходная (англ. transitional), поскольку она позволяет использовать iframe
(включение содержимого одной веб-страницы в другую) и атрибут target у
ссылок (для указания того, например, что ссылке необходимо открываться в
новом окне).
Фреймовая версия (англ. frameset) представляет собой расширенный вариант
transitional, добавляя к нему, как следует из названия, возможность установки
frameset вместо body. DTD строгой версии XHTML (англ. strict) не содержит
многих тегов и атрибутов, описанных в DTD transitional, и признанных
устаревшими.
Достоинства и недостатки языков
•
Достоинства
– SGML является полным и мощным языком.
– HTML является простым и общепризнанным языком (более 100 млн. пользователей).
•
Недостатки
– SGML – обладает сложностью, которая является избыточной для обычных приложений.
– HTML недостает средств описания данных (расширяемости), которые требуются для
обработки данных.
•
•
•
В связи с этим W3C организовал работу по созданию стандарта языков
разметки, который был бы удобен для работы в сети Internet. Разработка
основывалась на упрощенной версии SGML.
Начальные концепции языка появились в 1996, а в 1998 году был принят
официальный стандарт XML 1.0.
Сам XML описывает структуру данных (как и SGML), но имеются набор
связанных с ним технологий, которые описывают, как документ должен
выглядеть (XSL) и даже как он должен связываться (hyperlink) с другими XML
документами.
Отображение XML документа в
браузерах
Opera
Internet Explorer
Простой XHTML файл
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Моя домашняя страница
</title>
</head>
<body>
<h1> Моя домашняя страница </h1>
<p>
Добро пожаловать на мою домашнюю страницу!
</p>
</body>
</html>
Объявление DOCTYPE
• Указывает на то, какая конкретная версия языка HTML
или XHTML использовалась на данной странице.
• Используется браузером для того, чтобы определить,
как обрабатывать эту страницу.
• Три типа
– Transitional - снисходительный
– Strict – требует строгого следования стандартам
– Frameset – используется, если страница имеет фреймы
• Всегда должна быть первой в файле
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Структура HTML разметки состоит из
• В общем случае HTML разметка состоит из:
1. Открывающего тега (open tag), отмечающего начало элемента страницы;
2. Набора атрибутов, являющиеся парами «имя=значение», которые
описывают желаемое поведение или значение дополнительных свойств.
•
Например, в теге <FONT> описываются атрибуты face (для задания типа шрифта) и
size (для задания размера текста, содержащегося в теге).
3. Некоторого содержания (текста).
•
Например, содержанием заголовка <H1>, может быть строка “A simple HTML page”.
4. Закрывающего (close tag), который имеет такое же имя, как и начальный
тег, но перед ним стоит специальный символ "/". Этот тег является не
обязательным для некоторых элементов. Например, существуют
некоторые пустые элементы, которые не имеет внутреннего содержания
и поэтому не требует конечного тега, но должен завершаться символами
"/>".
•
Например, тег <IMG> используется для задания в атрибуте имени файла с
изображением и не требует .
• Например:
<p> ….. </p>
Структура HTML документа
• Любой HTML документ заключен в тег <HTML>
и состоит из двух разделов (sections):
– Заголовок (header), выделен тегом <HEAD>,
включает общую информацию о документе,
например, the document title (delimited by the
<TITLE> tag), or the keywords used by search engines
for document indexing (delimited by the <META> tag).
– Тело (body), выделено тегом <BODY>, включает
реальное содержание (content) и разметку,
описывающую свойства его отображения.
Теги ссылок и изображений
• Кроме тегов, которые форматируют текст,
наиболее часто используемыми являются
– теги для описания ссылки на другой ресурс;
– тег для включения изображения для создания
гипертекстовых мультимедийных документов в
Web:
Включение в HTML страницу ссылок
на другие страницы
• Тег закладки <A> определяет начальную точку (т.е., закладку,
привязку, anchor) гипертекстовой ссылки (с содержанием, например
«Перейти к новой странице - Click here").
• Адрес URL нового ресурса, который является целью гипертекстовой
ссылки, задается в атрибуте href.
<a href=http://tpu.ru>
Томский политехнический университет
</a>
• Текст заданный в теге показывается браузером специальным
способом (например, подчеркнутым или выделенный цветом);
щелчок мышки над этим текстом вызывает формирование HTTP
запроса (request) для получения указанного ресурса и его
отображения.
Включение в HTML страницу
изображений
• Тег <IMG> описывает вставку в документ изображения
(рисунка), чей URL адрес задается с помощью атрибута src.
• Когда браузер показывает HTML страницу и встречает <IMG>
тег, то тогда он посылает дополнительный HTTP запрос Web
серверу для получения файла, адрес которого задан в атрибуте
src.
• После того, как изображение будет получено, браузер
показывает его в HTML странице.
<img src=tpu.gif>
Пример HTML
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Русская народная сказка о козлике</title>
</head>
<body>
Жил были у <b>бабуси</b>
<UL>
<LI> <i>серенький козлик</i>.
<LI> три веселых гуся.
</UL>
<A href=“osu.cctpu.edu.ru”>Кафедра ОСУ ТПУ.</A>
</body>
<! -- Toмский политехнический университет -->
<A HREF=http://tpu.ru><IMG SRC=tpu.gif></A>
</html>
Часто используемые теги
• Блоковые элементы: используются для описания структуры
документа. Примерами таких тегов являются:
• Списочные элементы: поддерживают описание списков.
• Табличные элементы: поддерживают описание таблиц для
многомерных данных, упорядоченных по строкам и столбцам.
• Элементы формы: используются для описания форм, с помощью
которых можно выполнять сбор данных, вводимых пользователями
или взаимодействие с Web страницей. Элемент <FORM> обычно
содержит некоторые вложенные элементы, которые описывают
Элементы Управления (controls) формы. Например, такие, как:
• Стоит отметить, что для повышения возможностей HTML для
создания сложных и интерактивных Web страниц, не рекомендуется
использовать теги для задания свойств, описывающих графическое
представление и форматирование (таких, как <FONT> или <TABLE>),
которые были введены в начальных версиях языка HTML.
Блоковые элементы
• Блоковые элементы: используются для описания
структуры документа. Примерами таких тегов
являются:
– Тег для выделения абзаца (параграфа) <P>
– Тег для выделения заголовков различных уровней
(например, тег <H1> для выделения заголовка самого
верхнего уровня).
– Тег <div> - контейнер для участка HTML документа.
– Тег <span> - - контейнер для участка текста.
• Примеры
• …
Тэг div
• Для позиционирования любого элемента HTML, необходимо
использовать <div> и </div> тэги.
<html><head><title>Divide and Conquer</title></head>
<body>
<h1>Divide and Conquer</h1>
This text is not inside a div.
<p>
<div id = "myFirstDiv">
But this text is.<br>
And so is this text.<br>
</div>
</p>
<p>
But this text is not.
</p>
</body>
</html>
Списочные элементы
•Нумерованный:
тег <ol></ol> - ввод списка
тег <li>текст</li>- пункты списка
Пример:
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
•Ненумерованный:
тег <ul></ul> - ввод списка
тег <li>текст</li>- пункты списка
Пример:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Copyright Baltazar and Mirron corp
Табличные элементы
• Табличные элементы: поддерживают описание
таблиц для многомерных данных,
упорядоченных по строкам и столбцам.
– В разделе тега <TABLE> включается множество
элементов для описания сложной структуры таблицы.
– Элемент <TBODY> группирует строки таблицы.
– Тег <TR> используется для описания конкретной
строки; каждый тег <TR> содержит элементы <TH> и
<TD> для описания заголовков ячеек данных и самих
данных ячейки, соответственно.
– Другие не обязательные элементы позволяют
описывать название таблицы<CAPTION>, а также
начальные (header) и конечные (footer) строки
(<THEAD> и <TFOOT>).
Атрибуты тега table
Тег <tablе>:
• Width=“число” – ширина
• Height =“число” – длина
• Border=“число” – толщина границ
• Bordercolor=“#цвет”- цвет границ
• Bgcolor=“#цвет” – фон
• Cellspacing=“число”- расстояние между ячейками
• Align=“значение”- центровка
Copyright Baltazar and Mirron corp
Атрибуты строк и ячеек таблицы
• Вставка строки – тег <tr></tr>
• Вставка ячейки – тег <td></td>:
•
•
•
•
•
•
Width=“число” – ширина
Height =“число” – длина
Border=“число” – толщина границ
Bordercolor=“#цвет”- цвет границ
Bgcolor=“#цвет” – фон
Colspan=“число”- кол-во столбцов, которое занимает ячейка.
Copyright Baltazar and Mirron corp
Пример описания таблицы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> <title> Пример таблицы на языке HTML </title> </head>
<body>
<table border cellspacing="5" cellpadding="10">
<caption>Состав команды</caption>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td>Иванов А.П.</td>
<td>программист</td>
</tr>
<tr>
<td>Петров В.А.</td>
<td>проектировщик</td>
</tr>
</table>
</body>
</html>
Пример
<table width=100% border=5 bordercolor=#000000 bgcolor=“#FFF000”
cellspacing=0>
<tr>
<td colspan=3>text</td>
</tr>
<tr>
<td width=30%>text</td>
<td width=40%>text</td>
<td width=30%>text</td>
</tr>
<tr>
<td colspan=2 width=70%>text</td>
<td>text</td>
</tr>
</table>
Copyright Baltazar and Mirron corp
Разметка на основе таблиц
Формы web страницы
• Используются для описания частей страницы в которой
пользователь может просматривать имеющиеся,
корректировать и вводить новые данные
• Т.е. с помощью форм выполняется сбор данных, вводимых
пользователями для взаимодействия Web приложением.
• Элемент <FORM> обычно включает набор элементов
управления (controls) формы. Например, такие, как:
– Элемент <INPUT> для ввода пользователем данных;
– Элемент <SELECT> для задания возможности выбора из списка
альтернатив,
– Элемент <TEXTAREA> для ввода многострочного текста,
– Элемент <BUTTON> для создания кнопок submit (передать на
сервер), reset (очистить поля формы) или простой кнопки)
Формы HTML
• Для передачи данных полученных
браузером от пользователя на web сервер
используются HTML формы.
• На форме содержатся специальные
элементы типа Summit при нажатии на
которые выполняется вызов некоторой web
страницы
Описание формы в HTML документе
• Все формы начинаются тэгом <FORM> и завершаются тэгом </FORM>.
<form method="get | post" action="URL">
Элементы_формы_и_другие_элементы_HTML
</form>
• Основные Атрибуты
– METHOD - метод посылки сообщения с данными из формы. В
зависимости от используемого метода вы можете посылать результаты
ввода данных в форму двумя путями:
• GET: Информация из формы добавляется в конец URL, который был указан в
описании заголовка формы в виде URL?парам1=знач1&парам2=знач2?....
• POST: Данный метод передает всю информацию о форме немедленно после
обращения к указанному URL.
– ACTION - описывает URL, который будет вызываться для обработки
формы. Данный URL почти всегда указывает на CGI-программу или ASP
страницу.
Формы в HTML документах
• При обработке (интерпретации) формы браузером, создается
специальные элементы управления GUI, такие, как
–
–
–
–
–
–
поля ввода,
checkboxes,
radiobuttons,
выпадающие меню,
скроллируемые списки,
кнопки и т.д.
• Когда пользователь заполняет форму и нажимает кнопку типа (тег
<input type=“submit”> - специальный тип кнопки, который задается
при описании документа), информация, введенная пользователем в
форму, посылается HTTP-серверу для обработки и передаче другим
программам, работающим под сервером.
Управляющие элементы
• Пользователи взаимодействуют с формами с помощью
именованных управляющих элементов.
• Каждый управляющий элемент имеет начальное и текущее значение,
оба они являются символьными строками.
• Типы управляющих элементов <input>
Поля ввода (type=“text”)
Кнопки (type=“button”)
Переключатели (type=“radio”)
Флаги (type=“checkbox”)
Кнопки-картинки (type=“image”)





Передать (type=“submit”)
Очистить (type=“reset”)
Скрытый (type=“hidden”)
Пароли (type=“password”)
Списки (Select)
Формы в HTML
<form name=“xxx”>
<input type=“text” name=“yyy” value=“zzzz”>
<input type=“label” name=“yyy” value=“zzzz”>
<input type=“button” name=“yyy” value=“zzzz”>
<input type=“submit” name=“yyy” value=“zzzz”>
<\form>
Выпадающие списки.
Выпадающий список:
<select>
<option>текст</option> <- элемент списка.
…
<option>текст</option> <- элемент списка.
</select>:
Создание выпадающего списка:
<select>
<option value=“1.htm”>1</option>
<option value=“2.htm”>2</option>
<option value=“3.htm”>3</option>
<option value=“4.htm”>4</option>
<option value=“5.htm”>5</option>
</select>
Пример формы
<html>
<body>
<form>
<input type="text" name="op1" />
+
<input type="text" name="op2" />
<input type="submit" value=" = " />
</form>
</body>
</html>
Отправка данных формы на сервер
• Если атрибута Method нет или задано "method=“get”"
GET /calc.html?op1=2&op2=2 HTTP/1.1
...
Connection: Keep-Alive
[blank line]
• если тэг <form> включает атрибут "method=“post”"
POST /calc.html HTTP/1.1
. . .
Content-Type: application/x-www-form-urlencoded
Content-Length: 11
[blank line]
op1=2&op2=2
Пример HTML формы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>HTML to Nowhere</title>
</head>
<body>
<form>
Please enter your name:<br/>
<input type="text" name="username"/>
<p/>
Press the button to receive all of your hopes and dreams:<br/>
<input type="submit" value="Dream Button" />
</form>
</body>
</html>
Замечание по обработке
HTML форм
• При нажатии кнопки «submit» данные
формы передаются на сервер – по адресу
указанному в атрибуте ACTION="URL"; если
атрибута нет, то передаются той же
странице, в которой записана форма.
• Необходимо создать способ сохранения и
обработки данных передаваемых на
сервер. ASP.NET как раз предлагает такой
механизм.
Каскадные таблицы стилей
Cascading Style Sheets, CSS
Каскадные таблицы стилей
(Cascading Style Sheets, CSS)
•
•
•
•
Особенностью версии языка HTML 4 является разделение содержания (контента) и способа ее отображения
(представления) с помощью использования Каскадных таблиц стилей (Cascading Style Sheets, CSS).
CSS дают возможность дизайнерам описать то, как будет выглядеть страница в браузере пользователя
(наглядность и восприятие) отдельно от разметки и содержания HTML страницы.
Таблица стилей (style sheet) это набор правил, который сообщают браузеру, как выполнять отображение
документа.
Каждое такое правило состоит из двух частей:
–
–
•
селектора (selector), который указывает HTML тег, к которому данное правило должно применяться;
описателя стиля (style declaration), которое описывает свойства того стиля, который должны присоединяться к указанному в
селекторе HTML тегу.
Например, следующий фрагмент кода описывает цвет и размер шрифта для тега<H1>:
<HEAD>
<TITLE> CSS Example </TITLE>
<STYLE type="text/css“> H1 { font-size: 20pt; color: red } </STYLE>
</HEAD>
•
Правила стилей могут использоваться двумя спсобами
–
–
•
Встраиваться в HTML документ, для которого они используются, с помощью тега <STYLE>
Записываться в отдельный файл (расширение *.css), ссылка на который включается в HTML документом, с которым он
используется.
Тег <LINK> например, может записываться в разделе заголовка HTML документа , и задавать ссылку на таблицу
стилей named style.css:
<HEAD>
<TITLE>CSS Example</TITLE>
<LINK rel="StyleSheet" href="style.css" type="text/css">
</HEAD>
• Каскадные таблицы стилей (CSS, Cascading Style Sheets) позволили
совершенно по новому взглянуть на проектирование и разработку
Web страниц.
• С помощью CSS можно полностью разделить текст, содержащийся в
Web странице (который создается с помощью HTML кода) и
информации, которая описывает, как показывать этот текст в окне
браузера (которая описывается с помощью CSS).
• CSS был разработан для управления представлением содержания web
страниц и для сокращения времени, которое требуется для
выполнения этой работы. При этом CSS дает разработчику больше
возможностей для управления отображением (оформлением)
страницы.
• Например: некоторые Web страницы выделяют ссылки специальным
способом. Ссылки используют цвет, который отличает их от другого
текста, но если вы помещаете курсор мыши над ними, то они меняют
цвет и становятся подчеркнутыми. Это делается без участия HTML
кода, а с помощью задания их стиля.
•
•
•
•
•
Уже в первых версиях язык HTML поддерживал разные отображения текста с помощью таких
тегов, как FONT, B (bold) или I (italic). Эти теги имеются в HTML и сегодня, но их возможности
значительно меньше, чем те которые должна иметь Web страницы.
CSS позволяет разработчику отделить оформление и порядок расположения Web страницы от
ее содержания. Это является важным, так как часто может требоваться менять содержание
страницы (например, страница с описаниями новостей), но не менять их оформление
(структуру), или наоборот, менять оформление (структуру) для одного и того же содержания
(например, для отображения одного и того же содержания на разных устройствах).
CSS является стандартом World Wide Web Consortium (W3C). Практически все оформление
стиля и структуры (схемы) web сайта может быть сохранено в CSS файлах, которые хранятся
отдельно от HTML файлов, которые содержат данные и текст web сайта.
При показе страницы в баузере, HTML код отвечает на вопрос «Что показывать?", а CSS код
отвечает на вопрос «Как показывать?". При использовании CSS, разработчик описывает как
показывать каждый элемент страницы. Например, можно задать, что весь текст в DIV
элементах должен показываться голубым цветом все ссылки должны показываться
курсивом (italic) и жирным шрифтом (bold), и т.п.
С помощью CSS можно описать классы, которые сообщают браузеру, как отображать все
элементы данного класса.
Например
body
{
font-family: Verdana;
font-size: 9pt;
text-align: right;
}
div
{
font-family: Georgia;
}
.important
{
background-color: #ffffde;
border: thin black ridge;
font-family: Franklin Gothic Book;
}
<html>
...
<body>
Body text goes here. Lorem ipsum dolor sit amet.
<div>Div text goes here. This text is written in a different font.</div>
Body text continued.
<div class="important">This is very important!</div>
Body text continued. Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</body>
</html>
Каскадные таблицы стилей
(Cascading Style Sheets)
• Первый шаг к созданию согласованного, единообразного
web приложения заключается в создании согласованного
визуального представления web страниц (шрифты, форма
кнопок, и т.п.).
• Основным инструментом согласования деталей
оформления страниц являются CSS (каскадные таблицы
стилей).
• Каскадные таблицы стилей (Cascading Style Sheets, CSS)
— это средство хранения и упорядочения сведений о
форматировании HTML-элементов, составляющих Webформы. Благодаря централизованному хранению этих
сведений использование таблиц стилей облегчает
изменение облика Web-приложений.
• в Web-приложениях форматирование применяется на
трех уровнях.
Уровень
Где определяется
На что действует
Глобальный
(global)
В файле таблицы
стилей
Все страницы,
ссылающиеся на эту
таблицу стилей
Страничный (page)
В страничном элементе Все элементы текущей
head
страницы
Локальный (inline)
Внутри HTML-элемента Только текущий элемент
Иерархия этих уровней напоминает иерархию уровней области видимости.
Формат, определенный внутри элемента (локально), имеет приоритет перед
форматом, заданным на уровне страницы, а тот — перед форматом,
определенным глобально (в таблице стилей).
Эти правила и дали имя таблицам стилей, которые называются каскадными.
Правила описания стиля
1. Каждое CSS определение (правило) должно иметь definition has to have a имя (selector) и
объявление (declaration). Объявление (declaration) записывается в фигурных скобках после
имени (селектора, selector).
2. Объявление состоит из одного или нескольких свойств (property), разделенных точкой с
запятой.
3. Каждое свойство (property) состоит из имени, двоеточия и значения.
4. Свойство (property) может иметь много значений, разделенных запятой (например, "Verdana,
Arial, Franklin Gothic Book").
5. Вместе со значение может быть задана единица изменения (например, "9pt", где "pt" стоит
вместо points). Не допускается помещать пробелы между значением (value) и единицей
измерения (например, записывать “9 pt”).
6. При записи CSS кода можно использовать пробелы и переходы на новые строки так, чтобы код
был более читабельным.
Правила таблицы стилей
•
•
•
•
•
•
Таблица стилей состоит из правил (rules). Каждое
правило определяет, как будет форматироваться один
элемент web приложения.
Например, для задания формата заголовка нужно
начать определять правила с именем heading1.
.heading1
{
}
Каждое правило имеет две части. Часть до точки
указывает HTML элемент, к которому это правило
применяется. В этом примере ничего не задано перед
точкой, что означает, что это правило может
применяться к любому тэгу.
Часть после точки это уникальное имя (имя CSS класса),
которое задается для идентификации правила (не
чувствительно к регистру).
В правиле можно задать подходящую информацию по
форматированию. Например, для задания large, bold
текста с зеленым foreground цветом. Выбран шрифт
Verdana (если доступен), Arial (если нет) или sans-serif
(если ни Verdana ни Arial не установлены).
.heading1
{
font-weight: bold;
font-size: large;
color: lime;
font-family: Verdana, Arial,
Sans-Serif;
}
Можно задать правила, которые применяются к HTML
тэгам автоматически. Например, для описания всех
заголовков второго уровня (<h2> тэгов) на странице,
которая использует данный stylesheet создаем правило:
h2
{
...
}
Формирование стилей
• Обычная таблица стилей (stylesheet) описывает множество правил.
Фактически таблица стилей часто используются для формального
описания формата всех элементов интерфейса пользователя web
приложения
• Например, следующий stylesheet описывает пять правил. Первое
правило описывает элемент <body>. Другие правила являются CSS
классами и их нужно явно применить к тому элементу, с которым они
будут использоваться.
body
{
font-family: Verdana,Arial, Sans-Serif;
font-size: small;
}
.heading1
{
font-weight: bold;
font-size: large;
color: lime;
}
.heading2
{
font-weight: bold;
font-size: medium;
font-style: italic;
color: #C0BA72;
}
.blockText
{
padding: 10px;
background-color: #FFFFD9;
border-style: solid;
border-width: thin;
}
Применение правил стилей
• Для использования правила на web странице нужно связать страницу
с нужной таблицей с помощью элемента <link> в разделе <head>
• Например:
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
• Статический HTML элемент можно связать с правилом с помощью
атрибута class.
• Например:
<div class="blockText" id="paragraph" >
<p>This paragraph uses the blockText style.</p>
</div>
Пример использования стилей
<НТМL>
<HEAD> <title>WebForm</title>
<!- (1) Ссылка на таблицу стилей. ->
<LINK REL="stylesheet" TYPE="text/css" HREF="Styles.css">
<!- (2) Определение стиля на уровне страницы. ->
<style>
Р{
font-family: 'Comic Sans MS', Lucida Sans, sans-serif;
font-size: medium:
}
</style>
</HEAD>
<body>
<p>The alignment is from the style sheet. </p>
<p>The font is from the style in the page's head element,
<!- (3) Определение стиля, встроенное в элемент ->
<р style="FONT-SIZE: large; FONT-STYLE: italic">The italic is from the inline style. </p>
</body>
</HTML>
•
•
Описание CSS не обязательно помещать в отдельный файл. Стили CSS можно вставить и в
HTML страницу.
В этом случае, все определения должны помещаться в элемент STYLE. Такой подход может
использоваться для описания внешнего вида элементов, которые являются специфичными
для некоторой страницы и не будут использоваться в других страницах.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
.important
<head>
{
<title>My title</title>
background-color: #ffffde;
<style type="text/css"> body
border: thin black ridge;
{
font-family: Franklin Gothic Book;
font-family: Verdana;
}
font-size: 9pt; text-align: right;
</style>
}
</head>
div
<body>
{
<div class="important">My content</div>
font-family: Georgia;
</body>
}
</html>
• Третий способ описания CSS стиля заключается в
задании атрибута style в HTML элементе.
• Например:
<span style="font-family: Tahoma; font-size: 12pt;">
My text
</span>
Использование контейнера <div>
• Для позиционирования любого элемента HTML, необходимо
использовать <div> и </div> тэги.
<html><head><title>Divide and Conquer</title></head>
<body>
<h1>Divide and Conquer</h1>
This text is not inside a div.
<p>
<div id = "myFirstDiv">
But this text is.<br>
And so is this text.<br>
</div>
<p>
But this text is not.
</body>
</html>
Позиционирование контейнера div
• Содержание тэга div можно позиционировать, используя атрибут style.
• Если дописать в тэге div этот атрибут
<div id = "myFirstDiv" style="position:absolute; top:150; left:100;">
• Скрытие
<div id = "myFirstDiv" style="position:absolute; top:150; left:100;
visibility:hidden">
• Слои
<div id="whiteSquare" style="position:absolute; top:100; left:100;
z−index:2">
<img src="white.gif">
</div>
<div id="blackSquare" style="position:absolute; top:0; left:0; z−index:1">
<img src="black.gif">
</div>
Пример
•
Например: для создания CSS объявления, которое будет помещать фиксированное и не
повторяемое фоновое изображение в правую верхнюю часть страницы, нужно создать
следующее объявление
body
{
background-image: url(logo.gif); background-color: white; background-attachment: fixed;
background-position: right top; background-repeat: no-repeat;
}
• you can use a simple background property and put all
those values in it. Look at the previous example written only
using the background property.
body
{
background: white url(logo.gif) no-repeat fixed right top;
}
• This will save you from writing large blocks of code and will
make your CSS much more readable.
• Although we've explained backgrounds using the BODY
element, the logic is completely the same for any other
element, whether it is a DIV, a TABLE or any other type of
element.
• Позиционирование:
– гибкое «потоковое» позиционирование и
– абсолютное позиционирование
• Задаются в атрибуте элемента style элемента страницы:
<p id="cmd" style="POSITION: absolute; left: 100px; top: 50px;" >
...
<\p>
• <div> контейнер для других элементов HTML страницы. Фактически
это плавающая прямоугольная часть экрана.
<div style="POSITION: absolute; left: 100px; top: 50px; width:200px">
...
<div/>
Использование CSS позиционирования
• Например, для разделения страницы на три
колонки, из которых две крайние имеют
фиксированный размер, а средняя колонка
занимает оставшееся место.
• Для это можно использовать простую таблицу
стилей, которая описывает две 150пиксельные панели и одну панель
переменного размера.
• Пример использования CSS
<div class="leftPanel">
...
</div>
<div class="centerPanel">
...
</div>
<div class="rightPanel">
...
</div>
Таблица стилей:
.leftPanel
{
position: absolute;
top: 70px;
left: 10px;
width: 150px;
}
.rightPanel
{
position: absolute;
top: 70px;
right: 10px;
width: 150px;
}
.centerPanel
{
margin-left: 151px;
margin-right: 151px;
padding-left: 12px;
padding-right: 12px;
}
Форматирование web-страниц с
использованием таблиц и CSS
• Для задания структуры полей в странице шаблона
используются
– HTML таблицы
– CSS позиционирование
• Использование HTML таблицы
– С помощью HTML таблицы вся площадь страницы делится на
колонки и строки.
– Затем можно добавить отображаемые элементы в некоторую
ячейку.
• Использования CSS позиционирования
– Содержание страницы делиться с помощью тэгов <div> на части.
– С помощью CSS задается положение этих <div> тэгов с
применением абсолютных координат или прикрепляя их к одной
из сторон страницы.
– В тэги <div> помещается содержание.
Разметка на основе таблиц
New Structures
<div <header>
id="header">
<div class="article">
<article>
<div
<nav>
id="nav">
<div <section>
id="content">
<div <footer>
id="footer">
<div
<aside>
id="right">
Другой метод описания схемы
страницы
•
•
•
Теги DIV могут быть альтернативой тегам <table>
Разделы DIV являются контейнерами, аналогичными ячейкам таблицы
С помощью CSS можно позиционировать (задать взаимное расположение)
разделов DIV
•
Например, раздел:
<div id="article">xxx</div>
Можно описать с помощью следующего правила CSS:
#article
{
•
width:250px;
padding:5px;
float:right;
}
Описание страницы с помощью
элементов DIV
•
Нужно использовать теги <div> для создания структуры своей страницы.
– В этих XHTML разделах не должно быть информации о специфическом форматировании
(цвет, размер, положение).
– Цель: отделить информацию страницы от способа ее отображения (расположение,
оформление).
– Расположение частей информации должен полностью контролироваться с помощью CSS.
•
Нужно выявить основные разделы страницы:
–
–
–
–
–
•
•
Главный заголовок (Masthead: Logo и Title)
Меню (Menu)
Содержание (Content)
Поиск (Search)
Нижняя часть – подвал (Footer).
Не нужно излишне детально разделять содержание с помощью тегов <div> .
Не следует беспокоиться о позиционировании разделов XHTML!
Заключение по CSS
• Использование таблиц стилей позволяет решить две задачи
– Во первых, быстро стандартизировать стиль элементов страниц,
уменьшив количество ошибок и пропуск задания стилей.
– Во-вторых, выделить информацию о форматировании, так чтобы ее
совсем не было на web страницах, что позволяет изменять ее без
изменения каждой страницы и перекомпиляции кода.
Скриптовые языки
Скриптовые языки
• Скриптовый язык (scripting language, язык сценариев) это язык
программирования, который не преобразуется в машинные
инструкции, а сразу выполняется специальной программой
– интерпритатор;
– script engine.
• Программный код записанный на скриптовом языке называется
скриптом (сценарием).
• Существуют разные скриптовые языки:
–
–
–
–
–
–
JavaScript
VBScript
Shell script
Perl
Python
Ruby
Скрипты в web-приложениях
• В web-приложениях скрипты могут
выполняться и на компьютере клиента
(браузером) и на компьютере сервере
(server-side scrip engine).
Скрипты браузера
•
•
•
•
•
Скрипт браузера это выполняемая на стороне клиента программа, которая
загружается вместе с документом HTML;
В состав программы – браузер входит компонент выполнения скриптов – scrip
engine.
C помощью данного компонента скрипт выполняется на клиентской машине
при загрузке документа или в другое время, когда возникнут некоторые
события, например, если активируется гиперссылка.
Скрипты позволяют расширить возможности документов HTML
Скрипты могу запускаться событиями, происходящими в документе:
–
–
–
–
•
•
загрузка документа,
выгрузка,
передача фокуса элементу управления,
движение мыши и т.д.
Скрипты могут быть связаны с ЭУ (напр., кнопками) для создания
графического интерфейса пользователя.
Скрипты языком HTML могут быть записаны на разных языках:
– JavaScript
– VBScript
Выполняемый браузером код
(script)
<script language=“JavaScript”> (VBScript)
function aaa()
{
…
}
<\script>
Язык JavaScript
• синтаксис языка;
• объектные модели (BOM и DOM);
• события и обработчики событий.
Пример скрипта браузера
<html>
<script language="JavaScript">
function MySum()
{
//получаем объект
frm = document.myForm;
a = parseInt(frm.op1.value);
b = parseInt(frm.op2.value);
frm.sum.value = (a + b);
}
</script>
<body>
<form name=myForm>
<input type="text" name= "op1" value="2" /> +
<input type="text" name= "op2" value="3" />
<input type="button" value=" = " onclick = MySum() />
<input type="text" name=sum />
</form>
</body>
</html>
Динамический HTML
•
•
•
•
•
•
•
Скриптовые языки на стороне клиентов позволили создать динамический HTML язык.
Скриптовые языки представляют собой активную часть динамического HTML, в то время, как сам
язык разметки HTML является статической частью, которые являются субъектом для
динамической модификации с помощью скриптовой логики.
Изменения или доступ к HTML документу выполняются с помощью Объектной Модели
Документов (Document Object Model, DOM). DOM это объектная модель, независимая от
платформы и языка, для представления HTML или XML документов.
Модель DOM является интерфейсом, который предоставляет методы и свойства, с помощью
которых скрипты могут получить динамический доступ и обновлять содержание, структуру и стиль
документов.
Точнее говоря, DOM предоставляет стандартный набор объектов для представления HTML и XML
документов, стандартную модель того, как эти объекты могут объединяться и стандартный
интерфейс для получения доступа к ним и манипулирования ими.
Web браузеру не требуется DOM для отображения (показа) HTML документа. Однако, DOM
требуется скриптам для динамической проверки или изменения Web страницы. Другими
словами, модель DOM является способом для скриптов видеть состояние страницы, в которой
они содержатся, и сотояние браузера.
Объединение скриптов на стороне клиента, языка HTML и модели DOM предоставляет мощное
решение для реализации динамического поведения (например, интерактивных возможностей и
возможностей быстро реагировать на действия пользователей) браузера.
Dynamic HTML (DHTML)
• DHTML – термин, который используется для
описания:
– языки HTML и CSS
– Cкрипты
– DOM – объектная модель документа
которые позволяют изменять документ
• Dynamic HTML основывается на объектной модели
документа (которую должен создавать браузер)
• Объектная модель документа – множество
объектов, которые создает браузер при получении
HTML документа, с которыми можно работать в
скриптах.
Объектная модель DHTML
• The DHTML Document Object Model (DOM)
window
event
navigator
history
document
location
screen
frames
all
location
children
forms
selection
body
links
radio
button
text
password
file
checkbox
submit
reset
textarea
select
option
Пример скрипта, включенного в раздел head
HTML страницы
• На данном рисунке показана страница в которой функция JavaScript открывает
окно предупреждения (alert box) показывающее сообщение "HELLO WORLD",
когда пользователь щелкает по кнопке "Display message".
• HTML код страницы описывает
кнопку (button) в блоке <FORM>.
С событием кнопки onClick связан
вызов функции hello_message();
в результате этого при нажатии
кнопки инициируется событие
onClick, которое в свою очередь
вызывает JavaScript функцию
hello_message, описанную в теге
<SCRIPT>, который помещен в
разделе заголовка (head section)
данного документа. Данная функция
показывает окно предупреждения.
Пример формы
<html>
<body>
<form>
<input type="text" name="op1" />
+
<input type="text" name="op2" />
<input type="submit" value=" = " />
</form>
</body>
</html>
Использование формы и обработки
события
<html>
<script language="JavaScript">
function MySum()
{
//получаем объект
frm = document.myForm;
a = parseInt(frm.op1.value);
b = parseInt(frm.op2.value);
frm.sum.value = (a + b);
}
</script>
<body>
<form name=myForm>
<input type="text" name= "op1" value="2" /> +
<input type="text" name= "op2" value="3" />
<input type="button" value=" = " onclick = MySum() />
<input type="text" name=sum />
</form>
</body>
</html>
Пример содержания HTML страницы
<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>
В DOM таблица представляется следующим
образом
Dynamic HTML (DHTML)
•
•
Страница переданная от сервера браузеру вначале анализируется и создается ее
объектная модель. В это модели каждому элементу HTML страницы в соответствие
ставится объект некоторого класса.
Объектами верхнего уровня являются:
–
–
–
–
–
•
•
•
window – объект высшего уровня в DHTML. Содержит ссылки на другие объекты.
window.document или просто document – объект соответствующий HTML странице.
location – объект соответствующий URL страницы.
screen – объект, содержащий информацию об экране.
…
К этим объектам есть доступ в программном коде страницы – скрипте.
Для описания обработки с помощью объектов DHTML может быть создан
«скрипт», который встраивается в HTML страницу с помощью тэгов <script>.
Для составления скриптов можно использовать такие языки, как:
– JavaScript (ECMAScript, JScript) для широкого использования
– VBScript (поддерживается в Internet Explorer).
Доступ к элементам страницы с
помощью DOM
• Получение ссылки на элемент документа с
помощью значения атрибута id:
var s = document.getElementById()
• Получение ссылки на элемент документа с
помощью имени тега:
document.getElementsByTagName()
• Получение ссылки на элемент документа с
помощью имени их класса:
getElementsByClassName()
• Сценарий, содержащиеся в элементе Script, могут выполняться
– в ходе анализа страницы;
– в результате событий.
• Скрипт может содержать код для обработки возникающих в браузере
событий. События – это уведомления, которые возникают, когда
пользователь взаимодействует со страницей или когда изменяется
состояние документа, например, когда документ загружается или
пользователь сделал щелчок над элементом управления.
• При работе пользователя с браузером инициируется множество
событий.
• Элементы HTML документа становится объектами, которые могут
имеет события (например, onClick). При описании этих элементов
можно указать, какие функции скрипта будут вызываться на
выполнение.
• Например: onClick = <метод>
Объект document
• Объект document создается браузером для каждой новой,
просматриваемой HTML страницы (документа). В результате этого с
помощью JavaScript предоставляется доступ к множеству свойств и
методов, которые могут изменять документ различными способами.
• Document Object Model (DOM) позволяет скрипту на языке JavaScript
(и на других языках) получить доступ к структуре документа в
браузере.
• Каждый документ состоит из взаимосвязанных вершин (structured
nodes) (например, тег body, представляется в виде вершины, а все
элементы в элементе body будут представлены дочерними
вершинами элемента body).
• При наличии такой структуры, скриптовый язык может получить
доступ к элементам данного документа разными способами, что
позволяет выполнять изменение этих элементов в документе.
Пример объектной модели
документа
<body>
<h1>My Page</h1>
<img src="myimage.jpg" alt="My Picture" />
</body>
body
h1
(дочерняя вершина body)
My page
(дочерняя вершина h1)
img
(дочерняя вершина body)
src="myiage.jpg" alt="My Picture"
(атрибутные вершины img)