- •Санкт – Петербургский Государственный Университет Аэрокосмического приборостроения
- •Тема 10. Карта сайта. 41
- •Тема 11. Таблицы стилей. 45
- •Введение.
- •Тема 1. СтруктураHtml-документов.
- •1.1. Границы документа.
- •1.2. Заголовок документа.
- •1.3. Тело документа.
- •Тема 2. ФорматированиеHtml-документов.
- •2.4. Предварительно отформатированный текст.
- •Тема 3. Форматирование текстаHtml-документов.
- •3.1. Логическое форматирование.
- •3.2. Физическое форматирование.
- •Тема 4. Использование графики вHtml-документах.
- •4.1. Выбор формата графического файла.
- •4.2. Вставка изображения в документ.
- •Тема 5. Ссылки вHtml-документах.
- •5.1. Гипертекст и гипермедиа.
- •5.2. Создание ссылок на документы и файлы.
- •5.3. Ссылки внутри документа.
- •Тема 6. Списки в html-документах.
- •6.6. Дополнительные возможности форматирования списков.
- •Тема 7. Таблицы вHtml-документах.
- •7.1. Основы построения таблиц.
- •7.2. Создание сложной таблицы.
- •7.3. Альтернативные способы представления табличных данных.
- •Тема 8. Кадры (фреймы) вHtml-документах.
- •8.1.Основы создания кадров.
- •8.2. Модификация внешнего вида кадров.
- •8.3. Организация ссылок в кадрах.
- •Тема 9. Формы вHtml-документах.
- •9.1. Что такое формы.
- •9.1.1. Типы управляющих элементов
- •9.2. Работа с формами.
- •9.3. Разработка форм.
- •9.3.1. Элемент input.
- •9.3.2. ЭлементButton.
- •9.3.3. Элементы select, optgroup и option
- •9.3.4. Заранее выбранные варианты
- •9.3.5. ЭлементTextarea
- •9.3.6. Метки.
- •9.3.6.1. Элемент label.
- •9.3.7. Переход фокуса на элемент.
- •9.3.7.1.Переход с помощью клавиши Tab.
- •9.3.7.2. Клавиши доступа.
- •9.3.8.Отправка формы.
- •9.3.8.1. Метод отправки формы.
- •9.3.8.2. Успешные управляющие элементы.
- •9.3.9.Обработка данных формы.
- •Тема 10. Карта сайта.
- •Тема 11. Таблицы стилей.
- •11.1. Псевдоклассы и псевдоэлементы:
- •11.2. Краткое описание языка css.
- •11.3. Некоторые хитрости управления стилями.
- •Приложение 1.Цвета.
Тема 1. СтруктураHtml-документов.
1.1. Границы документа.
<HTML> – открывающий тэг.
</HTML> – закрывающий тэг.
Между этими тэгами и располагается весь HTML-документ.
1.2. Заголовок документа.
<HEAD> – открывающий тэг.
</HEAD> – закрывающий тэг.
Элементы заголовка нужны, чтобы:
дать документу название;
определить отношения между несколькими документами;
дать указание браузеру создать форму для поиска;
определить метод посылки специальных сообщений определенному браузеру или другой программе просмотра.
Название документа.
<TITLE> – открывающий тэг.
</TITLE> – закрывающий тэг.
Единственный обязательный тэг заголовка. Необходим для того, чтобы дать документу название.
Необязательно, но элемент HEAD может содержать следующие элементы в добавление к элементу TITLE:
элемент BASE, задающий точный базовый адрес ссылок на URL ;
элемент META, дающий различную метаинформацию;
элемент LINK, который также задает метаинформацию, но уже о связях документа с другими документами
элемент STYLE, определяющий таблицы стилей;
элемент SCRIPT, который описывает используемые в теле документа скрипты (программы, выполненные на языках программирования под Internet).
Указание метаданных (элемент META).
HTML позволяет авторам указывать метаданные – информацию о документе вместо содержимого документа - множеством способов.
Например, чтобыуказать автора документа, можно использовать элементMETAследующим образом:
<META name="Author" content="Nemo">
Элемент METAзадаетсвойство(здесь "Author (Автор)") и назначает ему значение -content(здесь - "Nemo").
Значение свойства и набор допустимых значений этого свойства должны определяться в относительном словаре, называемом профилем. Например, профиль, разработанный для помощи в индексировании документов для поисковых машин может определять такие свойства как "author", "copyright", "keywords" и т.д.
В общем случае задание метаданных состоит из двух шагов:
Объявление свойства и его значения.
Сославшись на профиль,в котором определяются свойства и их допустимые значения. Для назначения профиля используйте атрибутprofileэлементаHEAD.
Возможные атрибуты элемента META.
|
имя атрибута |
возможные значения |
смысл |
примечания |
|
NAME |
имя |
имя отдельного элемента метаинформации |
альтернатива атрибуту HTTP-EQUIV |
|
HTTP-EQUIV |
имя |
имя отдельного элемента метаинформации |
альтернатива атрибуту NAME |
|
CONTENT |
строка |
содержимое метаинформации |
обязательныйатрибут элемента META |
Помните, что поскольку профиль определяется для элемента HEAD, этот профиль применяется ко всем элементам META в заголовке документа.
1.3. Тело документа.
<BODY> – открывающий тэг.
</BODY> – закрывающий тэг.
Составной тэг, имеющий свои атрибуты, которые позволяют задать цвета фона, ссылок, текста и т.п.
Возможные атрибуты.
|
Имя атрибута |
Возможные значения |
Смысл |
|
BGCOLOR |
цветовая спецификация1 |
фоновый цвет документа |
|
TEXT |
цветовая спецификация |
цвет для текста документа |
|
LINK |
цветовая спецификация |
цвет для непосещеннойгипертекстовойсвязи |
|
VLINK |
цветовая спецификация |
цвет для посещеннойгипертекстовойсвязи |
|
ALINK |
цветовая спецификация |
цвет для активной гипертекстовойсвязи; используется для выделения текста связи на момент, когда пользователь нажал на связь |
|
BACKGROUND |
URL |
URL фонового образа |