- •1. Web-приложение. Механизмы cgi и FastCgi.
- •2. Web-приложение. Lamp-стек.
- •Установка на Ubuntu
- •Особенности и достоинства ос Линукс
- •3. Web-приложение. Шаблон проектирования «Модель-Представление-Контроллер».
- •4. Web-приложение. Шаблонизатор.
- •Достоинства:
- •О достоинствах
- •5. Web-приложение. Реляционные базы данных.
- •6. Web-приложение. NoSql.
- •7. Web-приложение. Возможности JavaScript.
- •8. Web-приложение. Среда исполнения. Web-сервер установка и настройка.
- •Среда исполнения
- •9. Развитие Web-технологий. Web 1.0, Web 2.0.
- •10. Развитие Web-технологий. Web 3.0, cемантическая паутина.
- •11. Развитие Web-технологий. Web-сервисы.
- •Использование rest для построения Web-сервисов.
- •12. Протокол http. Структура гипертекстового документа. Основные стандарты.
- •Структура гипертекстового документа.
- •Синтаксис
- •Параметры
- •13. Протокол http. Формы и обработка пользовательских данных.
- •14. Протокол http. Объектная модель документа (dom).
- •15. Протокол http. Пользовательские сеансы.
- •16. Протокол http. Технология ajax.
- •17. Протокол http. Структура сообщений. Заголовки. Коды состояния.
- •18. Облачные технологии. IaaS, PaaS, SaaS.
- •19. Облачные технологии. Google App Engine.
- •Ограничения
- •20. Облачные технологии. Google App Engine. Хранение данных.
Структура гипертекстового документа.
Под гипертекстовым документом понимают текст, содержащий специальные элементы, при обращении к которым осуществляется переход к другому документу. Эти элементы называются гиперссылками и могут выполняться в виде фрагмента текста, кнопки, рисунка и тому подобное. Ссылки могут использоваться и для перехода в различные разделы одного и того же документа (в этом случае ссылка называется анкером или якорем).
Начнем со структуры HTML документа. В простом виде можно записать ее в следующем виде:
<html> <head> <!-- Заголовок документа --> </head> <body> <!-- тело документа --> </body>
</html>
Сохраняем документ под именем index.html и открываем его в браузере. Что мы видим? Ничего - пустая страница. Разберем этот пример и начнем ее заполнение.
Элементы HTML представляют собой теги. Теги - это ключевые слова, заключенные в угловые скобки. Теги могут быть одинарными (например, горизонтальная черта <hr>) или парными. Во втором случае элемент состоит из открывающегося тега (например, <html>) и закрывающегося тега (</html>). Действие элемента распространяется на область между открывающимся и закрывающимся тегом.
Весь гипертекстовый документ заключается внутри элемента html (т.е. между <html> и </html>). Внутри этого элемента содержится еще два элемента - заголовок документа (элемент head), который содержит служебную информацию о документе и тело документа (элемент <body>), которое содержит информацию отображаемую в окне браузера.
Приведенной структуры достаточно для создания простых HTML документов для личных целей, но она не удовлетворяет стандарту. Главная ошибка заключается в том, что не указан в каком стандарте представлен документ. Стандарт прописывается первой строкой до тега <html>. Посмотрим какие основные стандарты существуют.
Для HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Для XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Для XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Strict, Transitional, Frameset - означают строгую (верстка не должна содержать отклонений от стандарта) спецификацию, переходную (ошибки игнорируются, для чайников) и для сайтов использующих фреймы (а такие еще есть?). Указание типа документа чувствительно к регистру, поэтому лучше ее копировать из приведенных здесь примеров для избежания ошибок.
Существуют и другие стандарты, для создания шаблона остановимся на первой из списка (мы легко сможете модифицировать шаблон под свой тип документа).
Перейдем к разделу заголовка. В нем указывается заголовок страницы (элемент title), META-данные и другая служебная информация. Здесь мы остановимся только на заголовке, остальные элементы рассмотрим в соответствующих темах (отметим только два элемента, отвечающих за кодировку и CSS).
Добавим внутри элемента head строку <title>Структура документа</title> и откроем страницу в браузере. В верхней верхней строке браузера мы видет то, что указали внутри элемента title. Кроме того, эта информация используется браузером для обозначения ссылок, когда вы добавляете страницу в закладки.
Для правильного отображения страницы мы должны задать в какой кодировке написан наш документ. Для этого добавляет строку
<meta http-equiv="content-type" content="text/html;charset=windows-1251" />
Здесь мы указываем стандартную виндоуз-кодировку windows-1251. Конечно, указать это мало, необходимо, чтобы сам документ был набран в этой кодировке. Также стандартной является кодировка utf-8 (уникод, поддерживает расширенный набор символов).
Так же укажем формат для каскадных таблиц стилей с помощью строки
<meta http-equiv="Content-Style-Type" content="text/css" />
Тело документа (элемент body) содержит визуальную информацию, т.е. ту, что будет непосредственно отображаться в окне браузера. Добавим строчку "Код документа содержит правильную структуру".
Итак, окончательный строгий вариант (который мы можем использовать в качестве шаблона для других документов) следующий:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Заголовок документа -->
<title>Структура документа</title>
<meta http-equiv="content-type"
content="text/html;charset=windows-1251" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<!-- тело документа -->
Код документа содержит правильную структуру
</body>
</html>
В итоге мы получили шаблон документа для выбранного нами стандарта.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML5: Для всех документов.
HTML 4.01: Строгий синтаксис HTML. Переходный синтаксис HTML. В HTML-документе применяются фреймы.
XHTML 1.0: Строгий синтаксис XHTML. Переходный синтаксис XHTML. Документ написан на XHTML и содержит фреймы. XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов.
XHTML 1.1: Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.
Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы. В табл. 1. приведены основные типы документов с их описанием.
|
Табл. 1. Допустимые DTD | |
|
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 и содержит фреймы. |
|
XHTML 1.1 | |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. |