Обучение языку HTML

Автор работы: Пользователь скрыл имя, 26 Февраля 2012 в 15:48, научная работа

Описание

Язык HTML в своем развитии прошел несколько версий. Заметим, что после версий 1.0 и 2.0 в марте 1995 года был подготовлен черновой вариант версии 3.0, в которой по сравнению с версией 2.0 было много добавлений. Не углубляясь пока в детали, отметим, что основные производители навигаторов (фирмы Netscape и Microsoft) разработали свои расширения языка HTML, которые оказались несовместимыми между собой. В настоящее время ситуация осталась прежней, хотя совместимость навигаторов Netscape Navigator версии 3.0 и Microsoft Internet Explorer версии 3.0 несколько улучшилась.

Скачать (533.41 Кб) Сколько стоит заказать работу?
Работа состоит из  1 файл

введение.docx

— 552.75 Кб (Скачать документ)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. ТАБЛИЦЫ В ДОКУМЕНТАХ HTML

Очень часто приходится размещать  в документе HTML табличные данные. Это можно сделать двумя способами.

Первый способ заключается  в том, что вы оформляете текст  таблицы шрифтом с фиксированной  шириной символов, а для выравнивания колонок используете символы  пробела. Этот способ будет работать, однако он едва ли позволит вам создать  таблицу, которая будет выглядеть  красиво.

Второй способ предполагает использование операторов языка HTML, специально предназначенных для  создания таблиц. Эти операторы открывают  перед вами широкие возможности: вы можете использовать рамки вокруг всех или только некоторых ячеек  и строк таблицы, создавать таблицы, имеющие заголовки и подписи, размещать в ячейках таблицы  не только текст, но и графику или  произвольные объекты, использовать в  качестве фона для ячеек растровые  графические изображения.

Заметим, что таблицы можно  использовать в документах HTML не только для отображения табличных данных, но и для решения других задач, например, для размещения различных  объектов. Например, в ячейках таблицы  могут располагаться графические  изображения, ссылки и так далее.

Для ячейки таблицы можно  указать цветовой фон и отступ, что позволяет изображать текст  на цветном фоне с отбивкой. Этот прием часто используется в Internet, так как значительно улучшает внешний вид страницы.

2.1  Простейшая таблица

Прежде чем мы перейдем к подробному изучению возможностей языка HTML по созданию таблиц, покажем, как можно создать простейшую таблицу.

В тексте документа HTML таблица  определяется между командами <TABLE> и </TABLE>. В простейшем случае строки таблицы ограничиваются командами <TR> и </TR>, а столбцы - командами <TD…> и </TD>, например:

<TABLE>

  <TR>

    <TD>000</TD><TD>001</TD><TD>002</TD>

  </TR>

  <TR>

    <TD>010</TD><TD>011</TD><TD>012</TD>

  </TR>

  <TR>

    <TD>100</TD><TD>101</TD><TD>102</TD>

  </TR>

</TABLE>

Первая строка, ограниченная операторами <TR> и </TR>, состоит  из трех ячеек, в которых находятся  строки “000”, “001” и “002”. Каждая такая строка ограничена операторами <TD> и </TD>.

Команды, которые мы использовали в этом примере, допускают использование  параметров, которые мы рассмотрим позже. Эти параметры влияют на внешний  вид таблицы.

В листинге 21. мы привели исходный текст документа HTML, в котором определены две таблицы. Первая из них состоит из трех строк и не имеет никакого дополнительного оформления. Вторая таблица отцентрирована, имеет рамку шириной 2 пиксела и ширину, составляющую 60 процентов от ширины окна просмотра навигатора.

Листинг 21. Файл chap3\table.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

  <HEAD>

    <TITLE>Таблицы</TITLE>

  </HEAD>

  <BODY BGCOLOR=#FFFFFF>

 

    <TABLE>

      <TR>

        <TD>000</TD><TD>001</TD><TD>002</TD>

      </TR>

      <TR>

        <TD>010</TD><TD>011</TD><TD>012</TD>

      </TR>

      <TR>

        <TD>100</TD><TD>101</TD><TD>102</TD>

      </TR>

    </TABLE>

 

    <TABLE ALIGN=JUSTIFY BORDER=2 WIDTH=60%>

      <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>

      <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>

      <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>

    </TABLE>

</BODY>

</HTML>

Внешний вид полученных таблиц показан на рис.17.

                           

                     Рис. 17. Простейшая таблица и таблица с рамкой

 

2.2  Как изменить внешний вид таблицы

В этом разделе мы кратко рассмотрим наиболее важные операторы  языка HTML и их параметры, предназначенные  для создания таблиц. Применяя эти  параметры, вы можете создавать самые  разные таблицы.

Прежде всего, мы рассмотрим параметры оператора <TABLE>, определяющие внешний вид таблицы в целом. Затем займемся операторами <TR> и <TD>, определяющими внешний вид  строк и столбцов таблицы.

Параметры оператора <TABLE>

Для оператора <TABLE>, которым  отмечается начало таблицы, вы можете указать многочисленные параметры, определяющие внешний вид таблицы  в целом. Ниже мы привели наиболее важные из них:

Параметр Описание

ALIGN

Этот параметр определяет выравнивание таблицы. Допустимо указывать  следующие значения:

LEFT таблица выравнивается по левому краю окна просмотра;

CENTER центрирование таблицы;

RIGHT  выравнивание по правому краю;

JUSTIFY выравнивание по левому и правому краю

BACKGROUND

Растровое графическое изображение, которое используется в качестве фона для отображения содержимого  таблицы. Об использовании растровых  изображений в документах HTML мы расскажем  в следующей главе

BGCOLOR

Цвет фона для таблицы

BORDER

Установка толщины рамки  в пикселах

BORDERCOLOR

Установка цвета рамки. Этот параметр используется вместе с параметром BORDER

BORDERCOLORDARK

Темный цвет, который используется для трехмерного выделения рамки

BORDERCOLORLIGHT

Светлый цвет, который используется для трехмерного выделения рамки

CELLPADDING

Расстояние между краями ячейки таблицы и содержимым этой ячейки

CELLSPACING

Расстояние между рамкой таблицы и ячейками этой таблицы

CLEAR

Форматирование текста, расположенного в документе HTML после таблицы

NO текст размещается сразу после таблицы;

LEFT текст размещается на первой строке после таблицы. Эта строка выравнивается по левой границе

RIGHT текст размещается на первой строке после таблицы. Эта строка выравнивается по правой границе

COLS

Количество столбцов в  таблице

FRAME

Этот параметр определяет внешний вид рамки, расположенной  вокруг таблицы. Возможны следующие  значения:

BORDER рамка отображается со всех сторон таблицы (используется по умолчанию);

VOID рамка вокруг таблицы (внешняя) не отображается;

ABOVE отображается верхняя рамка

BELOW отображается нижняя рамка

HSIDES отображается верхняя и нижняя рамка

LHS отображается левая рамка

RHS отображается правая рамка

VSIDES рамка отображается с левой и правой стороны таблицы

BOX рамка отображается только с внешней стороны таблицы

NOWRAP

Если строки таблицы не помещаются по горизонтали в окне просмотра навигатора, они не переносятся  на следующую строку, то есть не сворачиваются

RULES

Параметр определяет внешний  вид линий, которыми разделяются  между собой ячейки таблицы. Он может  принимать следующие значения:

NONE разделительные линии между ячейками таблицы не отображаются;

GROUPS  отображаются горизонтальные разделительные линии между всеми группами таблиц, определенными операторами THEAD, TBODY, TFOOT и COLGROUP ;

ROWS отображаются горизонтальные разделительные линии между всеми строками таблицы;

COLS отображаются вертикальные разделительные линии между столбцами таблицы;

ALL отображаются разделительные линии между всеми столбцами и строками таблицы

VALIGN

Параметр определяет выравнивание таблицы по вертикали. Допустимы  следующие значения;

TOP выравнивание по верхней границе;

MIDDLE выравнивание по середине окна;

BOTTOM выравнивание по нижней границе;

BASELINE выравнивание по базовой линии текста

WIDTH

Ширина таблицы в пикселах или в процентах от ширины окна просмотра навигатора

Параметры оператора <TR>

Оператор <TR> предназначен для создания строк таблицы. Для  него вы можете указать ряд параметров, определяющих внешний вид строки:

Параметр Описание

ALIGN

Этот параметр определяет выравнивание текста в ячейках таблицы. Допустимо указывать следующие  значения:

LEFT текст выравнивается по левому краю;

CENTER центрирование (используется по умолчанию);

RIGHT  выравнивание по правому краю;

JUSTIFY выравнивание по левому и правому краю

BORDERCOLOR

Установка цвета рамки. Этот параметр используется вместе с параметром BORDER оператора <TABLE>

BORDERCOLORDARK

Темный цвет, который используется для трехмерного выделения рамки  строки

BORDERCOLORLIGHT

Светлый цвет, который используется для трехмерного выделения рамки  строки

NOWRAP

Если текст в строке не помещаются по горизонтали в окне просмотра навигатора, он не переносятся  на следующую строку, то есть не сворачиваются

VALIGN

Параметр определяет выравнивание текста в строке по вертикали. Допустимы  следующие значения;

TOP выравнивание по верхней границе ячейки;

MIDDLE выравнивание по центру ячейки;

BOTTOM выравнивание по нижней границе ячейки;

BASELINE выравнивание по базовой линии текста

Параметры оператора <TD>

При помощи оператора <TD> определяются ячейки таблицы. Для него вы можете указать следующие значения:

Параметр Описание

ALIGN

Этот параметр определяет выравнивание текста в ячейках таблицы. Допустимо указывать следующие  значения:

LEFT текст выравнивается по левому краю;

CENTER центрирование (используется по умолчанию);

RIGHT  выравнивание по правому краю;

JUSTIFY выравнивание по левому и правому краю

BORDERCOLOR

Установка цвета рамки. Этот параметр используется вместе с параметром BORDER оператора <TABLE>

BACKGROUND

Растровое графическое изображение, которое используется в качестве фона для отображения содержимого  ячейки

BGCOLOR

Цвет фона для ячейки

BORDERCOLORDARK

Темный цвет, который используется для трехмерного выделения рамки  вокруг ячейки

BORDERCOLORLIGHT

Светлый цвет, который используется для трехмерного выделения рамки  вокруг ячейки

COLSPAN

С помощью этого параметра  можно указать, что элемент занимает несколько соседних ячеек, расположенных  справа или слева в той же колонке. Значение параметра определяет количество объединяемых ячеек

HEIGHT

Высота ячейки в пикселах

NOWRAP

Если текст в ячейке не помещаются по горизонтали в окне просмотра навигатора, он не переносятся  на следующую строку, то есть не сворачиваются

ROWSPAN

Аналогично COLSPAN, но для строк  таблицы

VALIGN

Параметр определяет выравнивание текста в ячейке по вертикали. Допустимы  следующие значения;

TOP выравнивание по верхней границе ячейки;

MIDDLE выравнивание по центру ячейки;

BOTTOM выравнивание по нижней границе ячейки;

BASELINE выравнивание по базовой линии текста

WIDTH

Ширина ячейки в пикселах

Между операторами <TD> и </TD> вы можете разместить текстовую строку или любой другой объект, например, ссылку на графическое изображение.

Для того чтобы создать  пустую ячейку с рамкой, запишите в  нее символ непрерывающего пробела:

<TD>&nbsp;</TD>

Этот же символ можно использовать для размещения по вертикали внутри ячейки таблицы элементов списка:

<P>&nbsp;<BR>

Параметры оператора <TH>

Обычно первая строка таблицы  используется для размещения заголовков столбцов. С помощью оператора <TH> вы можете создать такую строку заголовка.

Параметры этого оператора  аналогичны только что рассмотренным  параметрам оператора <TD>, поэтому  мы не будем их приводить отдельно.

Оператор <CAPTION>

С помощью оператора <CAPTION> вы можете снабдить таблицу подписью, расположенной сверху над таблицей или снизу под таблицей.

Для оператора <CAPTION> в  стандарте языка HTML версии 3.2 определен  параметр ALIGN. Этот параметр может иметь  значения TOP или BOTTOM. В первом случае подпись будет расположена над  таблицей, а во втором - под таблицей.

Ниже мы привели пример использования оператора <CAPTION>:

<TABLE BORDER WIDTH=100%>

  <CAPTION ALIGN=BOTTOM>Табл. 1. Таблица значений</CAPTION>

  <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>

  <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>

  <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>

</TABLE>

Навигатор Microsoft Internet Explorer использует иную систему определения расположения подписи таблицы. Дополнительно  к параметру ALIGN здесь используется параметр VALIGN.

С помощью параметра VALIGN, который может иметь значения TOP или BOTTOM, вы можете изменять расположение подписи по вертикали - над или  под таблицей.

Параметр ALIGN в трактовке  навигатора Microsoft Internet Explorer может принимать  значения LEFT или RIGHT и определяет выравнивание подписи по горизонтали.

Например, в следующем  фрагменте исходного текста документа HTML создается таблица с подписью, которая расположена над таблицей и выровнена по правой границе:

<TABLE BORDER WIDTH=100%>

  <CAPTION VALIGN=TOP ALIGN=RIGHT>Табл. 2. Таблица значений</CAPTION>

  <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>

  <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>

  <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>

</TABLE>

Способ оформления подписей таблиц, предлагаемый фирмой Microsoft, имеет  больше возможностей, однако этот способ несовместим с навигатором Netscape Navigator. Это ограничивает его применение.

2.3  Примеры оформления таблиц

Как видно из предыдущих разделов, многочисленные параметры  операторов, предназначенных для  оформления таблиц, позволяют вам  создавать самые разные таблицы  на все случаи жизни. Для наглядности  мы приведем несколько примеров оформления таблиц.

Таблицы с заголовком

В листинге 22. вы найдете исходный текст документа HTML, содержащего таблицу со строкой заголовка, расположенной сверху. Для создания заголовка здесь использован оператор <TH>.

Листинг 22. Файл chap3\tableh.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

  <HEAD>

    <TITLE>Таблицы с заголовком</TITLE>

  </HEAD>

  <BODY BGCOLOR=#FFFFFF>

    <TABLE BORDER>

      <TR>

        <TH>Столбец 1</TH><TH>Столбец 2</TH><TH>Столбец 3</TH>

Информация о работе Обучение языку HTML