- •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. Отображение списков.
11.Форматирование данных внутри таблицы.
Каждую отдельную ячейку внутри таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут быть использованы для форматирования текста внутри ячейки. Внутри ячейки допустимо использование всех элементов HTML, которые могут появлятся внутри тела документа <BODY> , в том числе тэги, управляющие расположением текста - <P> ,<BR> , <HR> , коды заголовков <H1>...<H6> , тэги форматирования символов - <B> , <I> , <STRONG> , <BIG> ,<EM> , <FONT> , тэги ставки графических изображений <IMG> , гипертекстовых ссылок <A> и т.д. Сразу же подчёркиваем, что область действия тэгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки независимо от наличия завершающего тэга. Для форматирования данных внутри ячеек таблицы предусмотрены следующие параметры.
Параметры выравнивания содержимого ячеек - align и valign . Могут применяться в кодах <TR> , <TD> и <TH> . Параметр горизонтального выравнивания align может принимать значения left , center и right (по умолчанию left для<TD> и center для <TH> ). Параметр вертикального выравнивания valign может принимать значения top (по верхнему краю), bottom (по нижнему краю), middle (посередине), baseline (по базовой линии). Выравнивание по базовой линии обеспечивает привязку текста отдельной строки во всех ячейках к единой линии. Задание параметров выравнивания на уровне кода <TR> определяет выравнивание для всех ячеек данной строки, при этом вкаждой отдельной ячейке строки может быть определены свои параметры, переопределяющие действие параметров, заданых в <TR> . Приведём пример таблицы, в которой данные в ячейках первого столбца выровнены вправо, второго столбца - по центру, а третьего - влево (значение по умолчанию) :
<html> <head> <title>Выравнивание элементов таблицы</title></head> <BODY> <TABLE border width="100%"> <TR> <TD align="right">Ячейка 1</TD> <TD align="center">Ячейка 2</TD> <TD>Ячейка 3</TD> </TR> <TR> <TD align="right">Ячейка 4</TD> <TD align="center">Ячейка 5</TD> <TD>Ячейка 6</TD> </TR> </TABLE> </body></html>
Параметр nowrap отключает возможность автоматического разбиения текста ячейки на строки. Может применяться в кодах <TR> , <TD> и <TH> .
Параметры width и height могут применяться в кодах <TD> и <TH> . Их синтаксис аналогичен синтаксису этих параметров для тэга <TABLE> . Поскольку таблица представляет собой связную структуру, состоящую из строк и колонок, то задани ширины для какой-либо ячейки влияет на ширину всей колонки, в которой расположена ячейка, а задание высоты влияет на всю строчку. Если в колонке значение ширины указано лишь в одной ячейке, то данное значение становится шириной всей колонки. Если таких указаний несколько, то выбирается максимальное значение. Те же свойства характерны и для строк.
Для сложных таблиц характерна потребность в объединении нескольких смежных ячеек по горизонтали или по вертикали в одну. Данная возможность реализуется с помощью параметров colspan (COLumn SPANning) и rowspan(ROW SPANning), задаваемых в кодах <TD> или <TH> . Форма записи: colspan =num, где num - числовое значение, определяющее, на сколько столбцов следует расширить текущую ячейку по горизонтали. Применение параметраrowspan аналогично, только здесь указывается колличество строк, которые должны захватить текущие ячейки по вертикали. По умолчанию для этих параметров указывается значение, равное единице. Допустимо одновременное значений обоих параметров для одной ячейки. Правильная установка значений этих параметров может оказаться не очень простой задачей.
Пример кода таблицы с объединёнными ячейками :
<html> <head> <title>Использование параметров colspan и rowspan</title> </head> <BODY> <TABLE border width="80%"> <TR> <TD rowspan=2>Ячейка, захватывающая две строки</TD> <TD colspan=2>Ячейка, захватывающая два столбца</TD> </TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> <TR> <TD>Ячейка 5</TD> <TD>Ячейка 6</TD> <TD>Ячейка 7</TD> </TR> </TABLE> </body> </html>
Невнимательное задание значений параметров раздвижки ячеек может привести к их взаимному перекрытию и конфликтам, при которых результат непредсказуем. Характерное применение протяженных ячеек - общий заголовок для нескольких смежных колонок или строк. Параметр bgcolor задаёт цвет подложки всей таблицы, отдельных строк или ячеек. Может встречаться в тэгах<TABLE> , <TR> , <TD> и <TH> . Эта возможность не предусматривается спецификацией HTML, однако поддерживается как Netscape, так и Microsoft Internet Explorer. Форма записи такая же, как и для тэга <BODY> , а именно bgcolor =значение, где в качестве значения задаётся содержание цвета в RGB-формате или его название. Пример: <TD bgcolor=#FF0000> или <TD bgcolor=red> . Есть несколько параметров характерные только для Microsoft Internet Explorer. Задание цвета рамок таблицы - bordercolor , bordercolorlight и bordercolordark . Эти параметры могут задаваться в тэгах <TABLE> , <TR> , <TD> и <TH> . В качестве значения этих параметров может использоваться название цвета или его шестнадцатеричное значение. Параметр bordercolor определяет цвет всех элементов рамок таблицы, а другие два параметра задают цвет отдельных составляющих рамок, переопределяя значения bordercolor . Параметр окрашивает в заданный цвет верхний и левый края всей таблицы и соответственно правый и нижний края каждой ячейки. Второй параметр bordercolordark задаёт цвета противоположных краёв. За счёт сочитания действия этих параметров таблица будет выглядеть несколько приподнятой над поверхностью страницы или углублённой. Всё зависит от выбранного сочетания цветов. Браузер Microsoft Internet Explorer (а также Netscape версии 4.х) разрешают использовать параметр background , определяющий фоновый рисунок для таблицы так, как это может быть сделано для всего HTML-документа. Этот параметр может задаваться в тэгах <TABLE> , <TD> и <TH> .