- •Санкт – Петербургский Государственный Университет Аэрокосмического приборостроения
- •Тема 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.Цвета.
Тема 7. Таблицы вHtml-документах.
7.1. Основы построения таблиц.
<TABLE>…</TABLE> - тэг – контейнер, в котором размещается содержимое таблицы.
<TR> - обозначает строку;
<TH> - обозначает заголовки столбцов (строк);
<TD> - обозначает данные в ячейках.
Пример:
<HTML>
<HEAD>
<TITLE>Пример составления таблицы</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TH>№п/п</TH> <TH>Ф.И.О.</TH> <TH>Телефон</TH>
<TR>
<TD>1.</TD> <TD>Иванов И.И.</TD> <TD>312-9012</TD>
</TR>
<TR>
<TD>2.</TD> <TD>Семенов И.И.</TD> <TD>315-8901</TD>
</TR>
<TR>
<TD>3.</TD> <TD>Киров И.И.</TD> <TD>162-1925</TD>
</TR>
<TR>
<TD>4.</TD> <TD>Дубинин И.И.</TD> <TD>234-0753</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибуты тэга <TABLE>.
|
Значение |
Описание |
|
BORDER |
Определяет толщину границы в пикселях (если 0, то рамки нет). |
|
ALIGN |
Определяет вид горизонтального выравнивания (LEFT, RIGHT, CENTER) |
|
VALIGN |
Определяет вид вертикального выравнивания (TOP, MIDDLE, BOTTOM, BASELINE) |
7.2. Создание сложной таблицы.
Объединение ячеек:
Атрибуты тэга <TD>ROWSPAN=N– для объединения смежных ячеек в одном столбце иCOLSPAN=N– для объединения двух смежных ячеек в одной строке.
Пустые ячейки:
<td></td> - ячейка без данных;
<td> </td> - ячейка с пустыми данными;
Логически одинаково, но некоторые программы просмотра выводят по-разному (например, IEне выводит границу ячеек, если использованы просто пустые ячейки).
Новые атрибуты таблиц.
|
Значение |
Описание |
|
WIDTH |
Определяет ширину всей таблицы в пикселях, либо в процентах от окна браузера. Может использоваться для отдельной ячейки. |
|
HEIGHT |
Определяет высоту всей таблицы в пикселях, либо в процентах от окна браузера. Может использоваться для отдельной ячейки. |
|
CELLPADDING |
Добавляет свободное пространство между данными внутри ячейки и ее границами. |
|
CELLSPACING |
Добавляет свободное пространство между ячейками внутри всей таблицы. |
|
BGCOLOR |
Определяет цвет фона таблицы или отдельных ячеек. |
|
BORDERCOLOR |
Определяет цвет рамки таблицы. |
Пример использования атрибутов таблицы:
<head>
<title>Primer</title>
</head>
<body>
<table bgcolor="GRAY" bordercolor="WHITE" border=5 cellpadding=10 cellspacing=1 width=100%>
<tr>
<td>Slovo</td>
<td>Slovo</td>
</tr>
<tr>
<td> <table border=5 cellpadding=5 cellspacing=5 width=75%>
<tr>
<td>Slovo</td>
<td>Slovo</td>
</tr>
</table>
</td>
<td>Slovo</td>
</tr>
</table>
</body>
</html>
7.3. Альтернативные способы представления табличных данных.
Некоторые виды браузеров не могут правильно отображать табличные данные. Тогда можно попытаться отобразить табличные данные альтернативным способом.
В виде списка;
В виде изображения;
В виде предварительно отформатированного теста.
Тема 8. Кадры (фреймы) вHtml-документах.
8.1.Основы создания кадров.
Фреймы в HTML позволяют авторам представлять документы в нескольких разделах, которые могут быть независимыми или вложенными окнами. Это обеспечивает дизайнерам способ оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется. Например, в одном окне в одном фрейме может отображаться статический баннер, во втором навигационное меню, а в третьем - сам документ, который можно прокручивать или переходить к другому с помощью навигации во втором фрейме.
Вот простой документ с использованием фреймов:
<HTML>
<HEAD>
<TITLE>Простой документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="frame1.html">
<FRAME src="frame2.html">
</FRAMESET>
<FRAME src="frame3.html">
<NOFRAMES>
<P>В этом документе содержится:
<UL>
<LI><A href="frame1.html">Миленький текстик</A>
<LI><A href="frame2.html">Симпатичная картинка</A>
<LI><A href="frame3.html">Еще славный текстик</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
это может привести примерно к следующей структуре экрана:
---------------------------------------
| | |
| | |
| Фрейм 1 | |
| | |
| | |
|---------| |
| | Фрейм 3 |
| | |
| | |
| | |
| Фрейм 2 | |
| | |
| | |
| | |
| | |
---------------------------------------
Если агент пользователя не может представлять фреймы или сконфигурирован так, чтобы не делать этого, он должен генерировать содержимое элемента NOFRAMES.
Элемент NOFRAMES задает содержимое, которое должно отображаться, только если не отображаются фреймы. Агенты пользователей, поддерживающие фреймы, должны отображать содержимое объявления NOFRAMES, только если они сконфигурированы так, чтобы не отображать фреймы. Агенты пользователей, не поддерживающие фреймы, должны отображать содержимое элемента NOFRAMES в любом случае.
Элемент FRAMESET определяет макет основного окна пользователя в виде прямоугольных пространств.
Атрибуты тэга FRAMESET:
rows = значение
Этот атрибут определяет расположение горизонтальных фреймов. Это разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означат одну строку.
сols = значение
Этот атрибут определяет расположение вертикальных фреймов. Это разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означат один столбец.
Установка атрибута rows определяет число горизонтальных отрезков пространства в наборе фреймов. Установка атрибута cols определяет число вертикальных отрезков. Для создания сетки можно установить оба атрибута одновременно.
Если атрибут rows не установлен, каждый столбец занимает всю длину страницы. Если атрибут cols не установлен, каждая строка занимает всю ширину страницы. Если не установлен ни один из этих атрибутов, фрейм занимает всю страницу.
Фреймы создаются в направлении слева направо для столбцов и сверху вниз для строк. Если указаны оба атрибута, разделы окон создаются слева направо в верхней строке, слева направо во второй строке и т.д.