Федеральное государственное образовательное учреждение Высшего профессионального образования «Южный федеральный университет» анна ивановна таранухина основы web-дизайна (учебное пособие)
| Вид материала | Учебное пособие |
- Основная образовательная программа высшего профессионального образования Направление, 838.93kb.
- Методические указания к выполнению контрольной работы по курсу: «Политическая экономия», 48.57kb.
- Федеральное агентство воздушного транспорта федеральное государственное образовательное, 204.23kb.
- Правила приема в Федеральное государственное образовательное учреждение высшего профессионального, 799.39kb.
- Вступление, 255.19kb.
- Сибирский федеральный университет, 1020.21kb.
- Учебное пособие «конкурентоспособность в маркетинге» г. Тюмень, 200, 1324.86kb.
- Федеральное государственное образовательное учреждение высшего профессионального образования, 702.43kb.
- Формирование профессиональных компетенций выпускников колледжа (на примере студентов-технологов), 345.55kb.
- Учебное пособие Санкт-Петербург 2007 удк алексеева С. Ф., Большаков В. И. Информационные, 1372.56kb.
—. Как правило, текст определяемого термина должен располагаться в одной строке. Текст, содержащий определение термина, выводится, начиная со следующей строки (или через строку для некоторых браузеров) после определения термина с отступом вправо. В информации, помещенной после тэга , могут располагаться элементы уровня блока. Отсюда следует, что списки определений могут быть вложенными.
Пример HTML-документа, в котором использован список определений (рис. 1.3.4):
Пример списка определений
- Москва
- Население 10 400 000
...
- Санкт-Петербург
- Население 4 600 000
...
- Ростов-на-Дону
- Население 1 100 000
...
Рис. 1.3.4. Список определений
1.4 Таблицы
Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом и завершаться тэгом
. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается тэгом (Table Row) и завершается тэгом . Отдельная ячейка в строке обрамляется парой тэгов и (Table Data) или и ( Table Header). Тэг используется обычно для ячеек-заголовков таблицы, а — для ячеек-данных. Различие в использовании заключается в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек отображается полужирным шрифтом и располагается по центру (align=center, valign=middle). Ячейки, определенные тэгом по умолчанию отображают данные, выровненные влево (align=left) и посередине (valign=middle) в вертикальном направлении.
Тэги и не могут появляться вне описания строки таблицы . Завершающие коды , и могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы обязательный.
Количество строк в таблице определяется числом открывающих тэгов , а количество столбцов — максимальным количеством или среди всех строк. Часть ячеек могут не содержать никаких данных, такие ячейки описываются парой следующих подряд тэгов — , . Если одна или несколько ячеек, располагающихся в конце какой-либо строки, не содержат данных, то их описание может быть опущено, а браузер автоматически добавит требуемое количество пустых ячеек. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается.
Заголовок таблицы можно сформировать с помощью тэга-контейнера , располагаемом в любом месте внутри тэгов и
. По умолчанию текст заголовка таблицы располагается над ней (align=top) и центрируется в горизонтальном направлении.
Параметр align может принимать значения bottom, left, center и right. Для возможности одновременного выравнивания по горизонтали и вертикали введен параметр valign, принимающий значения top и bottom. Например (рис. 1.4.1):
Пример таблицы с заголовком
Население городов
Город Население
Москва 10 400 000
Санкт-Петербург 4 600 000
Ростов-на-Дону 1 100 000
Рис. 1.4.1. Горизонтальное
и вертикальное выравнивание
заголовка таблицы
Тэг имеет следующие параметры:
1) border – определяет ширину рамки вокруг таблицы в пикселях. Наличие этого параметра задает рамки вокруг каждой ячейки таблицы. По умолчанию рамки ячеек отсутствуют;
2) cellspacing – указывает расстояние между смежными рамками ячеек в пикселях. По умолчанию значение данного параметра равно 2;
3) cellpadding – определяет интервал между рамкой и данными ячейки в пикселя. По умолчанию значение параметра равно 1;
4) width – указывает ширину таблицы в пикселях или процентах от размера окна. По умолчанию ширина таблицы автоматически вычисляется браузером;
5) height – определяет высоту таблицы в пикселях или процентах от размера окна. По умолчанию высота таблицы автоматически вычисляется браузером;
6) align – задает горизонтальное расположение таблицы в окне браузера. Значение параметра left определяет выравнивание таблицы по левому краю окна, величина right – по правому краю, center – по центру окна. По умолчанию таблица выровнена по левому краю окна;
7) summary – предоставляет краткую информацию о назначении и структуре таблицы;
8) bgcolor – устанавливает цвет фона ячеек таблицы;
9) frame – показывает, какая часть внешней рамки будет видимой. Параметр имеет допустимые значения: box или border — рамка рисуется со всех четырех сторон, above — только с верхней стороны, below — только с нижней стороны, hsides — рисуется нижняя и верхняя сторона, vsides — рисуется левая и правая сторона, lhs — только с левой стороны, rhs — только с правой стороны, void — таблица без внешних рамок;
10) rules управляет прорисовкой внутренних линий сетки таблицы и может принимать следующие значения: all — рисуются все внутренние линии, groups — рисуются только линии, разделяющие группы, rows — рисуются линии, разделяющие строки, cols — рисуются линии, разделяющие столбцы, none — внутренние линии не рисуются.
Тэг имеет следующие параметры:
1) align – задает горизонтальное расположение данных в строке таблицы. Значение параметра left определяет выравнивание данных по левому краю ячеек, величина right – по правому краю, center – по центру, justify – по обоим краям;
2) valign – указывает вертикальное расположение данных в строке таблицы. Значение параметра top определяет выравнивание данных по верхнему краю ячеек, величина bottom – по нижнему краю, middle – по вертикальному центру, baseline – по базовой линии. По умолчанию данные выровнены по вертикальному центру;
3) nowrap – отключает возможность автоматического разбиения текста на строки в ячейках;
4) bgcolor – устанавливает цвет фона ячеек строки таблицы.
Тэги и имеют следующие параметры:
1) align – задает горизонтальное расположение данных ячейки таблицы. Значение параметра left определяет выравнивание данных по левому краю ячейки, величина right – по правому краю, center – по центру, justify – по обоим краям. По умолчанию содержимое ячейки выровнено по левому краю;
2) valign – указывает вертикальное расположение данных ячейки таблицы. Значение параметра top определяет выравнивание данных по верхнему краю ячейки, величина bottom – по нижнему краю, middle – по вертикальному центру, baseline – по базовой линии. По умолчанию содержимое ячейки выровнено по вертикальному центру;
3) nowrap – отключает возможность автоматического разбиения текста на строки в ячейке;
4) bgcolor – устанавливает цвет фона ячейки таблицы;
5) width – указывает рекомендуемую ширину ячейки таблицы в пикселях;
6) height – определяет рекомендуемую высоту ячейки таблицы в пикселях;
7) colspan – указывает число столбцов, на которые нужно расширить ячейку;
8) rowspan – определяет число строк, на которые необходимо расширить ячейку;
9) headers – указывает список ячеек заголовков, предоставляющих заголовочную информацию для текущей ячейки;
10) scope – определяет набор ячеек данных, для которых заголовочная информация задается текущим заголовком. Значения: row – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в строке, col – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в столбце, rowgroup – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в группе строк, colgroup – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в группе столбцов;
11) abbr – указывает сокращенную форму содержимого ячейки.
Пример использования параметров border, width, align, summary тэга (рис. 1.4.2):
HEAD>
Table: border, width, align, summary
summary="This table contains information about people population in cities.">
Город Население
Москва 8 400 000
Санкт-Петербург 4 600.000
Ростов-на-Дону 4 600.000
Пример HTML-документа, в котором использован список определений (рис. 1.3.4):
- Москва
- Население 10 400 000
...
- Санкт-Петербург
- Население 4 600 000
...
- Ростов-на-Дону
- Население 1 100 000
...
Рис. 1.3.4. Список определений
1.4 Таблицы
Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом
Каждая строка начинается тэгом
Тэги
Количество строк в таблице определяется числом открывающих тэгов
Заголовок таблицы можно сформировать с помощью тэга-контейнера
Параметр align может принимать значения bottom, left, center и right. Для возможности одновременного выравнивания по горизонтали и вертикали введен параметр valign, принимающий значения top и bottom. Например (рис. 1.4.1):
| Город | Население |
|---|---|
| Москва | 10 400 000 |
| Санкт-Петербург | 4 600 000 |
| Ростов-на-Дону | 1 100 000 |
Рис. 1.4.1. Горизонтальное
и вертикальное выравнивание
заголовка таблицы
Тэг
| и | имеют следующие параметры: 1) align – задает горизонтальное расположение данных ячейки таблицы. Значение параметра left определяет выравнивание данных по левому краю ячейки, величина right – по правому краю, center – по центру, justify – по обоим краям. По умолчанию содержимое ячейки выровнено по левому краю; 2) valign – указывает вертикальное расположение данных ячейки таблицы. Значение параметра top определяет выравнивание данных по верхнему краю ячейки, величина bottom – по нижнему краю, middle – по вертикальному центру, baseline – по базовой линии. По умолчанию содержимое ячейки выровнено по вертикальному центру; 3) nowrap – отключает возможность автоматического разбиения текста на строки в ячейке; 4) bgcolor – устанавливает цвет фона ячейки таблицы; 5) width – указывает рекомендуемую ширину ячейки таблицы в пикселях; 6) height – определяет рекомендуемую высоту ячейки таблицы в пикселях; 7) colspan – указывает число столбцов, на которые нужно расширить ячейку; 8) rowspan – определяет число строк, на которые необходимо расширить ячейку; 9) headers – указывает список ячеек заголовков, предоставляющих заголовочную информацию для текущей ячейки; 10) scope – определяет набор ячеек данных, для которых заголовочная информация задается текущим заголовком. Значения: row – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в строке, col – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в столбце, rowgroup – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в группе строк, colgroup – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в группе столбцов; 11) abbr – указывает сокращенную форму содержимого ячейки. Пример использования параметров border, width, align, summary тэга summary="This table contains information about people population in cities."> Город | Население | Москва | 8 400 000 | Санкт-Петербург | 4 600.000 | Ростов-на-Дону | 4 600.000 | |
|---|