3.2. Подготовка к работе

Для выполнения лабораторной работы студенты должны знать правила оформления простых HTML-документов.

3.3. Порядок выполнения работы

1. Разработать макет HTML-страницы. Содержание страницы определяется преподавателем.

2. Создать текстовый файл с расширением *.htm для ввода HTML-страницы.

3. Создать минимальную HTML-страницу, содержащую теги HTML, HEAD, BODY. Ввести заголовок страницы.

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

5. Ввести заголовки для разделов текста. Заголовки должны различаться типом шрифта и способом выравнивания. Способы выравнивания заголовка и следующего за ним параграфа должны совпадать.

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

7. Ввести раздел, содержащий информацию об авторе страницы и контакте с ним.

8. Ввести ненумерованный список, оформленный в виде двух столбцов, каждый элемент которого имеет свой тип символа "•".

9. Ввести 3 нумерованных списка. Нумерация второго списка продолжает стиль и нумерацию первого списка. Нумерация третьего списка меняет стиль и начинается сначала.

10. Продемонстрировать результат работы преподавателю, загрузив созданный HTML-файл в окно просмотра Netscape.

3.4. Содержание отчета

Отчет по лабораторной работе должен включать полный протокол выполнения работы с пояснениями.

Лабораторная работа 4

Таблицы в html-документе

Цель работы: ознакомление с основами языка HTML, получение практических навыков по созданию таблиц в HTML-документе.

4.1. Общие сведения

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

Начало таблицы определяется тегом <TABLE>, а конец - </TABLE>.

Если необходимо озаглавить таблицу, то используются теги <CAPTION> и </CAPTION> или <TC> и </TC>. Заголовки размещаются в верхней или нижней части таблицы в зависимости от значения атрибута ALIGN (ALIGN=TOP или ALIGN=BOTTOM). Чаще всего заголовок размещают над таблицей.

Тег <TR> определяет строку в таблице. Строка состоит из одной или более ячеек. В первой строке тегами <TH> и </TH> определяются заголовки столбцов. Остальные строки таблицы содержат данные, определяемые тегами <TD> и </TD>. Пример таблицы:

<TABLE>

<CAPTION>заголовок таблицы</CAPTION>

<TR><ТН>заголовок столбца 1<TH>заголовок столбца 2

<TR><TD>1-я ячейка 1-го столбца<TD>1-я ячейка 2-го столбца

<TR><TD>2-я ячейка 1-го столбца<TD>2-я ячейка 2-го столбца

.......

<TR><TD>N-я ячейка 1-го столбца<TD>N-я ячейка 2-го столбца</TABLE>

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

Атрибуты BORDER, WIDTH, CELLSPACING и CELLPADDING принадлежат тегу <TABLE> и обеспечивают контроль над визуальным представлением таблицы.

Атрибут BORDER позволяет создавать рамку вокруг таблицы и между ее ячейками. Ширина рамки определяется цифровым значением. В отсутствии этого атрибута рамка не будет отображаться.

Атрибут WIDTH позволяет точно установить ширину таблицы. При отсутствии этого атрибута ширина таблицы автоматически определяется в зависимости от содержания последней. Значением атрибута может быть целое значение ширины таблицы в пикселях (WIDTH=212) или процент от величины расстояния между левым и правым полями документа (WIDTH=80%).

Атрибут CELLSPACING определяет расстояние между ячейками таблицы.

Атрибут CELLPADDING определяет расстояние между рамкой и со- держимым ячейки таблицы.

Ячейки таблицы, определяемые тегами <TH> и <TD>, могут иметь размер стандартной ячейки или распространяться по строке или столбцу в зависимости от значения атрибутов ROWSPAN и COLSPAN. Атрибут ROWSPAN определяет целое число строк таблицы, входящих в эту ячейку. По умолчанию оно равно 1. Атрибут COLSPAN определяет целое число столбцов таблицы, заполненных одной этой ячейкой. По умолчанию оно равно 1.

Пример таблицы:

<TABLE BORDER=1>

<CAPTION ALIGN=center>тестовый пример</CAPTION>

<TR><TD COLSPAN=2>ячейка 1<TD> ячейка 2

<TR><TD>ячейка 3<TD>ячейка 4<TD ROWSPAN=2>ячейка 5

<TR><TD>ячейка 6<TD>ячейка 7

</TABLE>

Теги <TR>, <TH> и <TD> имеют два атрибута для выравнивания данных внутри ячеек по горизонтали и вертикали. Атрибут ALIGN используется для выравнивания данных в ячейке влево, по центру или вправо (LEFT, CENTER или RIGHT). Атрибут VALIGN определяет вертикальное выравнивание по отношению к верху, середине или низу (TOP, MIDDLE или BOTTOM) ячейки.

Пример недопустимой таблицы (ячейки 6 и 7 перекрываются):

<TABLE BORDER=1>

<TR><TD ROWSPAN=2>1<TD>2<TD>3<TD>4<TD>5

<TR><TD ROWSPAN=2>6

<TR><TD COLSPAN=2>7<TD>8

</TABLE>