- •Санкт – Петербургский Государственный Университет Аэрокосмического приборостроения
- •Тема 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.Цвета.
8.2. Модификация внешнего вида кадров.
Для определения содержимого и внешнего вида одного фрейма используется элемент FRAME.
Атрибуты тэга FRAME:
name = имя кадра
Назначает имя текущему фрейму. Это имя может использоваться в качестве цели в последующих ссылках.
src = адрес
Определяет местонахождение начального содержимого фрейма.
noresize
Если этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя.
scrolling = auto|yes|no
Этот атрибут задает информацию о прокрутке фрейма. Возможные значения:
auto: При необходимости предоставлять возможности прокрутки. Это значение используется по умолчанию.
yes: Всегда предоставлять возможности прокрутки.
no: Не предоставлять возможности прокрутки.
frameborder = 1|0
Этот атрибут предоставляет агенту пользователя информацию о границе фрейма. Возможные значения:
1: Агент пользователя должен изобразить разделитель между этим фреймам и всеми прилежащими фреймами. Это значение используется по умолчанию.
0: Агент пользователя не должен отображать разделитель. Обратите внимание, что разделители могут все равно отображаться, если они заданы в других фреймах.
marginwidth = размер
Этот атрибут задает пространство, оставляемое во фрейме в качестве левого и правого полей. Значение должно превышать один пиксел. Значение по умолчанию зависит от агента пользователя.
marginheight = размер
Этот атрибут определяет верхнее и нижнее поля в фрейме. Значение должно превышать один пиксель. Значение по умолчанию зависит от агента пользователя.
8.3. Организация ссылок в кадрах.
Атрибут target задает имя фрейма, в котором должен открываться документ.
Назначая фрейму имя с помощью атрибута name, авторы могут ссылаться на него как на "target" для ссылок, определяемый другими элементами. Атрибут может устанавливаться для элементов, создающих ссылки (A, LINK), навигационных карт (AREA) и форм (FORM).
В этом примере показано, как цели обеспечивают динамическое изменение содержимого фрейма. Сначала определим набор фреймов в показанном здесь документе frameset.html:
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
<FRAME name="fixed" src="frame1.html">
<FRAME name="dynamic" src="frame2.html">
</FRAMESET>
</HTML>
Затем в файле dynamic.html мы будем ссылаться на фрейм с именем "dynamic".
<HTML>
<HEAD>
<TITLE>Документ со ссылками на фрейм.</TITLE>
</HEAD>
<BODY>
...начало документа...
<P>Теперь можно перейти к
<A href="slide2.html" target="dynamic">слайду 2.</A>
...продолжение документа...
<P>Все отлично. Переходим к
<A href="slide3.html" target="dynamic">слайду 3.</A>
</BODY>
</HTML>
Активизация любой из ссылок приведет к открытию нового документа в фрейме с именем "dynamic", в то время как в другом фрейме, "fixed", сохраняется исходное содержимое.
Тема 9. Формы вHtml-документах.
Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML создает только внешний интерфейс формы.
9.1. Что такое формы.
Форма HTML - это раздел документа, в котором содержатся обычная информация, разметка и специальные элементы, называемые управляющими элементами (флажки, кнопки с зависимой фиксацией, меню и т.д.), а также метки этих управляющих элементов. Обычно пользователи "заполняют" форму, модифицируя управляющие элементы (вводя текст, выбирая пункты меню и т.д.) перед тем, как предоставить форму агенту пользователя для обработки (например, на Web-сервер, на почтовый сервер и т.д.)
<form>…</form> Создает формы (input, select and textarea)
Вот простая форма, включающая метки, кнопки с зависимой фиксацией и кнопки (очистка формы или отправка):
<FORM action="http://mysite.com/prog/form" method="post">
<P>
<LABEL for="firstname">Имя: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Фамилия: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">Адрес электронной почты: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Мужской<BR>
<INPUT type="radio" name="sex" value="Female"> Женский<BR>
<INPUT type="submit" value="Отправить"> <INPUT type="reset">
</P>
</FORM>