- •1. Структура web-документа. Вставка комментария.
- •2. Текст - логика и физика..
- •3. Форматирование Web-документа
- •Теги физического форматирования текста.
- •Логическая разметка текста.
- •Теги логического форматирования текста.
- •Полезные советы:
- •4. Организация ссылок. Правила записи ссылок Организация ссылок
- •Правила записи ссылок
- •Ссылки на документы различных типов
- •Ссылки на другие ресурсы Интернета
- •5. Списки нумерованные и маркированные. Списки определений Создание списков html страницы
- •Нумерованный список html страницы
- •Маркированный список html страницы
- •Многоуровненвый список html страницы
- •Списки определений html страницы
- •7. Встраивание изображений в web-документ. Выравнивание изображений. Задание размеров выводимого изображения. Отделение изображения от текста. Альтернативный текст
- •Выравнивание изображений.
- •Задание размеров выводимого изображения.
- •Отделение изображений от текста.
- •Рамки вокруг изображений.
- •Альтернативный текст.
- •8. . Использование изображения в качестве ссылки. Баннеры.
- •9. Графические форматы для web-документа
- •10. Таблицы. Создание простейших таблиц. Представление таблиц на странице.
- •11.Форматирование данных внутри таблицы.
- •12. Вложенные таблицы.
- •13. Объединение ячеек таблицы по горизонтали и по вертикали.
- •Объединение ячеек html таблицы по вертикали
- •14. Особенности построения таблицы. Отображение пустых ячеек в таблице. Выравнивание данных в столбцах таблицы Особенности построения html таблиц
- •Выравнивание данных в столбцах html таблицы
- •15. Фреймы. Сферы применения фреймов.
- •Сферы применения фреймов
- •16. Правила описания фреймов.
- •17. Особенности навигации при использовании фреймов. Взаимодействие между фреймами. Различие между фреймами и окнами браузера.
- •Взаимодействие между фреймами в html
- •18. Плавающие фреймы. Варианты их использования.
- •19. Карты-изображения. Графическое представление карты-изображения. Описание конфигурации карты-изображения. Средства создания карты-изображения.
- •20. Каскадные таблицы стилей. Встраивание таблицы стилей в документ.
- •21. Группирование и наследование.
- •22. Селекторы. Селектор class и Селектор id.
- •Пример 2. Использование классов c тегами
- •Пример 3. Использование классов c тегами
- •Теги Span и Div
- •Пример 2. Использование тега div
- •Селекторы id Параметр id задает уникальное имя элемента, которое используется для обращения к нему скриптов. Это позволяет управлять стилем элемента динамически. Синтаксис id селектора следующий.
- •Пример 3. Использование идентификатора id
- •23. Примеры применения контекстных селекторов.
- •24. Псевдоклассы. Псевдоклассы связей.
- •25. Модель форматирования. Блоковые элементы. Встроенные элементы.
- •26. Стилевые свойства форматирования текста.
- •27. Стилевые свойства для цвета и фона.
- •28. Блоки. Визуальное форматирование
- •2 9. Абсолютное, относительное и статическое форматирование.
- •30. Отображение списков.
10. Таблицы. Создание простейших таблиц. Представление таблиц на странице.
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Понятие табличного представления данных не нуждается в дополнительном пояснении. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц, задания взаимного расположения элементов страницы. При просмотре такого документа сразу не видно, что для его построения используется таблица, так как рамки вокруг её ячеек не прорисовываются.
Создание простейших HTML-таблиц.
Рассмотир сначала минимальный набор тэгов и их параметров, необходимый и достаточный для создания не сложных таблиц, а зетем перейдём к их детальному описанию. Описание таблиц должно распологаться внутри раздела документа <BODY> . Документ может содержать произвольное число таблиц, причём допускается и вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE> . Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается тэгом <TR> (Table Row) и завершается тэгом </TR> . Отдельная ячейка в строке обрамляется парой тэгов <TD> и </TD> (Table Data) или <TH> и </TH> (Table Header). Тэг <TH> используется обычно для ячеек-заголовков таблицы, а <TD> - для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячейки типа <TH> отображается полужирном шрифтом (Bold) шрифтом и располагается по центру. Ячейки, определённые тэгом <TD> по умолчанию отображают данные, выровненные влево и посередине в вертикальном направлении. Тэги <TH> и <TD> не могут появляться вне описания строки таблицы <TR> . Завершающие коды </TR> , </TD> и</TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы </TABLE> не может быть опущен. Количество строк в таблице определяется числом открывающих тэгов <TR> , а количество столбцов - максимальным количеством <TD> или <TH> среди всех строк. Часть ячеек могут не содержать никаких данных, такие ячейки описываются парой следующих подряд тэгов <TD> </TD> . Если одна или несколько ячеек, располагающихся в конце какой-либо строки, не содержит данных, то их описание может быть опущено, а браузер автоматически добавит требуемое количество пустых ячеек. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается. Таблица может иметь заголовок, который заключается в пару тэгов <CAPTION> и </CAPTION> . Описание заголовка таблицы должно располагаться внутри тэгов <TABLE> и </TABLE> в любом месте, однако вне области описания любого из тэгов <TR> , <TD> или <TH> . Согласно спецификации языка HTML расположение описания заголовка регламентировано более строго: оно должно располагаться сразу же после тэга <TABLE> и до первого<TR> . Мы рекомендуем придерживаться этого правила. По умолчанию текст заголовка таблицы располагается над ней (align="top") и центрируется в горизонтальном направлении. Перечисленные тэги могут иметь параметры, число и значение которых различны. Однако в простейшем случае тэги используются без параметров, которые принимают значения по умолчанию.
<html> <head> <title>Пример простейшей таблицы</title> </head> <BODY> <TABLE border> <TR> <TD>Ячейка 1 строки 1 <TD>Ячейка 2 строки 1 <TR> <TD>Ячейка 1 строки 2 <TD>Ячейка 2 строки 2 </TABLE> </body> </html>
Рассмотрим назначение различных параметров, которые могут использоваться в тэгах, описывающих таблицы.
Заголовок таблицы <CAPTION> . Согласно спецификации языка HTML, тэг заголовка таблицы <CAPTION> имеет единственный допустимый параметр align , принимающий значения top (заголовок над таблицей) или bottom (заголовок под таблицей). Однако браузер Microsoft Internet Explorer предоставляет дополнительные возможности для выбора расположения заголовка. Параметр align допускает значения left , right и center для горизонтального выравнивания наряду с описаными выше значениями. Отметим, что это один из редких случаев, когда широко распространённый параметр align может использоваться и для горизонтального выравнивания, и для вертикального. Однако двойное использование в одном заголовке параметра align недопустимо. Поэтому дополнительно введён специальный параметр для вертикального выравнивания - valign, принимающий значения top или bottom . Например, для заголовка распологаемого внизу таблицы с выравниванием влево, описание имеет следующий вид:
<CAPTION align="left" valign="bottom"> Заголовок таблицы </caption>
Возможности горизонтального выравнивания заголовка таблицы являются расширением спецификации HTML, не поддерживаются браузером Netscape Navigator, и поэтому ими следует пользоваться только в крайней необходимости.
Параметры тэга <TABLE> . Основным тэгом, применяемым при создании таблиц, является тэг <TABLE> . Он может использоваться с рядом параметров, каждый из которых допустимо опускать. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге <TABLE> могут использоваться следующие параметры: border , cellspacing ,cellpadding , width . Браузеры Netscape и Microsoft Internet Explorer разрешают кроме перечисленных пяти параметров использовать параметры height и bgcolor . Отдельные браузеры также позволяют задавать и другие параметры. рассмотрим назначение общеупотребительных параметров тэга <TABLE> .
Параметр border . Параметр border управляет изображением рамки вокруг каждой ячейки, которые по сути, дают линии сетки таблицы и вокруг всей таблицы. По умолчанию рамки не рисуются, и на экране пользователь увидит лишь ровно расположенный текст ячеек таблицы. Существует немало ситуаций когда, когда использование таблиц без рамок вполне оправданно. Для добавления в таблицу рамок необходимо включить в код <TABLE> параметр border , который может иметь численное значение. Например, <TABLE border> или <TABLE border="10"> . Численное значение параметра определяет толщину рамки в пикселах, рисуемую вокруг всей таблицы, однако на толщину рамок вокруг каждой ячейки это значение не влияет. При отсутствии численного значения обычно оно приравнивается минимальному значению (1), хотя для различных браузеров стиль показа рамки может отличаться. Возможность независимого управления отображением рамки вокруг всей таблицы и рамками вокруг ячеек отсутствует.
Параметр cellspacing . Форма записи параметра: cellspacing=" num " , где num - численное значение параметра в пикселах, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Заметим, при задании cellspacing=" 0 " рамки смежных ячеек сольются и создадут впечатление единой сетки таблицы.
Параметр cellpadding . Форма записи параметра аналонична cellspacing . Величина num определяет размер свободного пространства (отступа) между рамкой ячейки иданными внутри ячейки. По умолчанию значение принимается равным единице. Установка параметра cellpadding равным нулюможет привести к тому, что некоторые части текста ячейки могут касаться её рамки, что выглядет не очень эстетично. Все три параметра - border , cellspacing и cellpadding действуют независимо друг от друга, если какой-либо из них опущен, то берётся его значение, принятое по умолчанию. Наиболее компактная таблица будет получена заданием следующего описания: <TABLE border="0" cellspacing="0" cellpadding="0" >
Только в таком варианте ячейки будут расположены вплотную друг к другу. Примером использования может служить таблица, все ячейки которой содержат рисунки одинакового размера, которые необходимо расположить рядом друг с другом.
Параметры width и height
При отображении таблиц их ширина и высота автоматически отображается браузером, при этом расчёт размеров таблиц выполняется автоматически и делается попытка представить таблицу в наиболее удобном виде - расположить таблицу так, чтобы она помещалась в окне просмотра. Бывает необхлдимо принудительно указывать ширину или высоту таблицы. Для этой цели используют параметрwidth (ширина таблицы) или height (высота таблицы) тэга <TABLE> . Форма записи: width="num" или width="num%", где num - численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна. Заметим, что допутимо задавать значения больние 100%, хотя трудно представить себе случай когда это необходимо. Аналогичные параметры могут задаваться и для отдельных ячеек. Заметим, что задание конкретного параметра, например width=" 200 " , не означает, что таблица в любом случае будет иметь указанную ширину, а лишь определяет рекомендуемую ширину, которая будет выдержана по возможности.