- •Введение
- •Глава 1. Основы
- •1.1. Браузеры
- •Преодоление различий браузеров
- •1.2. Программирование
- •1.3. Дизайн при неизвестном разрешении монитора
- •Гибкая раскладка
- •Дизайн с фиксированной шириной
- •1.4. Знакомство с серверами
- •Корневая директория для Web
- •Java-сервлеты и jsp
- •Абсолютная и относительная адресация
- •Соглашения об именах файлов
- •Выбор кодировки
- •Глава 2. Html и xhtml
- •2.1. Роль html
- •2.2. Отделение представления от структуры документа
- •2.3. Атрибуты
- •Вложенные элементы
- •Информация, которую браузеры игнорируют
- •2.4. Введение в xhtml
- •Три разновидности html 4.01 и xhtml 1.0
- •Хорошо сформированный xhtml
- •Атрибуты id и name
- •2.5. Элементарная структура документа
- •2.6. Тело документа
- •2.7. Текстовые элементы
- •Блочные элементы
- •Внутристрочные элементы логического форматирования
- •Перенос строки
- •Горизонтальные линейки
- •Стилевые элементы
- •Практика
- •Как сделать хороший html – документ
- •2.8. Создание гиперссылок
- •Организация ссылок на область документа
- •Практика
- •2.9. Таблицы
- •Описательные элементы
- •Группы строк
- •Столбцы и группы столбцов
- •2.10. Фреймы
- •Преимущества использования фреймов
- •Недостатки
- •Базовая структура набора фреймов
- •Нестандартные атрибуты
- •Нестандартные атрибуты
- •Создание строк и столбцов
- •2.11. Формы
- •Элементы форм
- •Поле для ввода текста
- •Поле для ввода пароля
- •Переключатель
- •Выбор файла
- •Многострочные текстовые поля
- •Создание меню при помощи элементов select
- •Группы вариантов
- •Надписи
- •Атрибуты accesskey и tabindex
- •Практика
- •Глава 3. Стили css
- •3.1. Преимущества css
- •Определение – задают свойства селектора.
- •3.2. Способы добавления таблиц стилей на Web-страницы
- •Href – позволяет задать url-адрес таблицы стилей.
- •Наследование
- •3.3. Конфликтующие правила стилей: каскад
- •3.4. Контекстные селекторы
- •3.5. Использование классов
- •3.6. Группировка
- •3.7. Псевдоселекторы
- •3.8. Другие псевдоклассы css 2.1
- •Псевдоэлементы
- •3.9. Единицы измерения, используемые в каскадных таблицах стилей
- •3.10. Свойства css для управления цветом
- •Практика Задание 1
- •Задание 2
- •Задание 3
- •3.11. Оформление таблиц с помощью css
- •Заголовки таблиц
- •Порядок наложения элементов
- •Границы
- •Расчет размеров таблицы (ширина, высота)
- •Алгоритм с фиксированной шириной
- •Алгоритм с автоматически определяемой шириной
- •3.12. Оформление таблиц
- •Практика
- •3.13. Блочные и внутристрочные элементы
- •3.14. Введение в блоковую модель
- •3.15. Нормальный поток
- •Свободное размещение
- •3.16. Пропуск размещаемых элементов
- •3.17. Позиционирование: основы
- •3.18. Охватывающий блок
- •3.19. Задание положения
- •3.20. Обработка переполнения
- •3.21. Расчет позиции элемента
- •3.22. Фиксированное позиционирование
- •3.23. Относительное позиционирование
- •Практика
- •3.24. Css свойства
- •3.25. Методики css
- •Центрирование страницы
- •Раскладка в 2 столбца
- •Раскладка в 3 столбца
- •Раскладка в 3 столбца c абсолютным позиционированием
- •Позиционирование трех столбцов
- •Центрирование с рамками и полями
- •Ложные столбцы
- •Заключение
- •Список литературы
- •Оглавление
- •Глава 1. Основы 4
- •Глава 2. Html и xhtml 15
- •Глава 3. Стили css 56
2.5. Элементарная структура документа
В данном примере показана элементарная структура XHTML-документа, как она определяется в рекомендации XHTML 1.0. Она образует необходимый контекст для будущего обсуждения глобальной структуры документа.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Название документа</title>
</head>
<body><р>Содержание документа...</р> </body>
</html>
Данный пример начинается с объявления XML, в котором указываются версия XML и кодировка символов документа. Объявление XML рекомендуется использовать для XHTML-документов. Однако оно не обязательно, если кодировка документа – UTF-8, как показано в приведенном примере.
Объявление типа документа (DOCTYPE) говорит браузеру, какой DTD следует использовать для анализа документа. В данном примере указан DTD XHTML Strict. Если бы данный пример был HTML-документом, то можно было бы использовать только DTD для HTML.
html – это корневой элемент для всех документов HTML и XHTML.
Элемент head, или заголовок, содержит информацию о документе, которая не считается частью самого документа. Заголовок должен включать описательный тег title, иначе документ не будет признан допустимым.
Элемент body содержит все материалы документа, т. е. ту часть, которая отображается в окне браузера. Помещаемый сюда материал зависит от дизайнера.
Чтобы (Х)НТМL-документ был признан допустимым (valid), он должен начинаться с объявления типа документа, в котором указывается, какая версия – HTML или XHTML – используется в документе. Делается это при помощи объявления DOCTYPE, в котором указывается определение типа документа (document type definition, DTD). DTD представляет собой текстовый документ, в котором перечислены все элементы, атрибуты и правила использования конкретного языка разметки.
При отсутствии объявления DOCTYPE нет набора правил, по которому можно было бы проводить проверку. В годы, когда разработка HTML была быстрой и свободной, объявления DOCTYPE обычно опускались. Однако теперь, когда обеспечение соответствия стандартам стало одной из приоритетных задач в сообществе Web-разработчиков, а также поскольку существует множество вариантов DTD, авторам настоятельно рекомендуется использовать объявление DOCTYPE и проводить проверку документов на допустимость.
Заголовок – это место, где можно указать информацию о документе, важную для пользователей, браузеров и поисковых систем. Сюда также часто помещают скрипты и встроенные таблицы стилей.
<head>...</head>
Каждый элемент head должен включать элемент title, а также может включать любой из следующих элементов в любом порядке: script, style, meta, link, object, isindex и base. Элемент head служит просто контейнером для этих элементов и не имеет своего собственного содержимого.
Рекомендуется, чтобы HTML-документы (и XHTML-документы без объявления XML) также содержали элемент meta, в котором указываются тип содержания и кодировка символов документа, хотя этот элемент и не является обязательным.
Наиболее важным (и единственным обязательным) элементом заголовка является название документа (title), который содержит описание материалов на странице.
<title>...</title>
Начиная с HTML 4.01, элемент title является обязательным, а это означает, что любой HTML-документ должен иметь осмысленное название в заголовке. Название отображается в строке заголовка браузера, вне обычного окна.
Название – это то, что отображается в списке «Избранное» или «Закладки пользователя». Поисковые системы также используют названия документов. По этой причине важно создавать продуманные и описательные названия для всех документов и избегать неопределенных названий, таких, как «Welcome» или «MyPage».
К другим полезным HTML-элементам, помещаемым в элемент head документа, относятся:
base
Этот элемент определяет базовое местоположение документа, которое служит ссылкой для всех путей и ссылок документа.
isindex
Устарел. Этот элемент когда-то использовался для добавления на страницу простой поисковой функции. Он был объявлен устаревшим в HTML 4.01 с заменой на элементы ввода для форм.
link
Этот элемент определяет взаимосвязь между текущим документом и другим документом. Наиболее часто он используется для связывания документа с внешней таблицей стилей.
script
С помощью этого элемента в заголовок документа можно добавить код JavaScript или VBScript.
style
Еще одним методом связывания таблицы стилей с HTML-документом является встраивание его в заголовок документа при помощи элемента style.
meta
Элемент meta используется для указания информации о документе, например такой, как ключевые слова или описания, которые помогают поисковым системам. Элемент meta имеет много областей применения, но главным образом он используется для включения информации о документе, такой как кодировка символов, дата создания, автор и копирайт.
<meta />
Атрибуты: id="text" (только XHTML)
content="text" (обязательный)
http-equiv="text"
name="text"
scheme="text"
Данные, включаемые в элемент meta, могут использовать серверы, Web-браузеры и поисковые системы, но для читателя они невидимы.
В документе может использоваться несколько элементов meta. Существует два типа элементов meta, в которых используется либо элемент name, либо элемент http-equiv. В любом случае необходим атрибут content, в котором указывается значение (или значения) именованной информации или функции.
<meta http-equiv="name" content="content" />
<meta name="name" content="content" />
Информация, указанная в атрибуте http-equiv, обрабатывается так, как если бы она пришла в заголовке HTTP-ответа. Заголовки HTTP содержат информацию, которую сервер передает браузеру непосредственно перед отправкой HTML-документа, например информацию о типе данных (media type), и другие значения, влияющие на работу браузера
Существует большое число готовых типов http-equiv.
Атрибут name используется для вставки скрытой информации о документе, которая не соответствует HTTP-заголовкам. Например:
<meta name="author" content="Kuznetsov Vadim" /> <meta name="copyright" content="2009 SGTU" />
Рекомендуется (хотя и не является обязательным), чтобы тип информации и кодировка символов указывались внутри документов (X)HTML.
Делается это при помощи элемента metа:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
В кодировках символов описывается реальный набор глифов или форм символов, используемый в документе. Наборы символов стандартизованы: вы можете обращаться к ним при помощи стандартных номеров.
Клиентской догрузкой (client-pull) называется способность браузера (клиента) автоматически запрашивать (загружать) новый документ с сервера. Для пользователя это будет выглядеть так: страница отображается, а через определенный промежуток времени происходит ее обновление для дополнения новой информацией или замена на совершенно новую страницу. Эту методику можно использовать для автоматического перенаправления пользователей на новый URL (например, если старый URL был выведен из употребления).
Замечание:W3C настоятельно не рекомендует использовать данный метод для автоматического перенаправления, а рекомендует использовать перенаправление, выполняемое на серверной стороне (из соображений обеспечения доступности).
При клиентской догрузке используется значение атрибута refresh, который был впервые введен Netscape. Этот атрибут заставляет браузер выждать указанное число секунд (обозначенное целочисленным значением атрибута content), а затем загрузить новую страницу. Если страница не указана, браузер просто перезагружает текущую страницу. В следующем примере браузер получает задание перезагрузить страницу через 15 секунд:
<meta http-equiv="refresh" content="15" />
Чтобы выполнить перезагрузку другого файла, укажите URL документа в атрибуте content:
<meta http-equiv="refresh" content="l; url=http://doc2.html" />
Обратите внимание, что значение атрибута content заключено в один набор кавычек. Хотя URL обычно требует своего дополнительного набора кавычек, в атрибуте content они опускаются.
Вот еще несколько областей применения атрибута http-equiv:
expires
Указываются дата и время, по истечении которых документ будет считаться устаревшим. Web-роботы могут использовать эту информацию для удаления устаревших документов из индексов поисковых систем.
<meta http-equiv="expires" content="Wed 12 Jun 2001 10:52:00 EST" />
content-language
Это значение может использоваться для указания языка, на котором написан документ. В примере для браузера указывается, что естественным языком документа является французский:
<meta http-equiv="content-language" content="fr" />
description
Указывается краткое описание содержимого Web-страницы. Поисковые системы, которые распознают такие описания, могут помещать их на странице результатов поиска. Некоторые поисковые системы используют только первые 20 слов описания.
<meta name="description" content="Vadim Kuznetsov resume and web design samples" />
keywords
Вы можете указать название и описание документа со списком ключевых слов, разделяемых запятыми. Это будет полезно для индексирования документа. Обратите внимание: поисковые системы в основном отбрасывают ключевые слова в элементе meta из-за большого количества спама и ухудшения качества этой информации. Существует все большая тенденция к отходу от невидимых метаданных к видимой информации в самих материалах Web-страниц.
<meta name="keywords" content="designer, web design, branding, logo design" />
author
Указывается автор Web-страницы.
<meta name="author" content="Sitnik Irina" />
copyright
Указывается информация по защите авторских прав на документ.
<meta name="copyright" content="2009, SGTU" />
robots
Это значение было создано как альтернатива текстовому файлу robots.txt, и оба эти варианта используются для предотвращения индексирования вашей страницы поисковыми системами. Это значение поддерживается не так хорошо, как файл robots, txt, но некоторые все равно предпочитают использовать его. Атрибут content может принимать следующие значения: index (по умолчанию), noindex (предотвращает индексирование), no follow (не дает поисковым системам переходить по ссылкам на странице) и none (то же, что «noindex, nofollow»). Преимущество использования данного атрибута вместо файла robots.txt состоит в том, что его можно применять к каждой странице, в то время как файл robot.txt, если он находится в корневой директории, применяется ко всему сайту.
<meta name="robots" content="noindex, nofollow" />