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

1. Разработать макет статической HTML-страницы, содержащую теги HTML, HEAD, BODY, в текстовом редакторе «Блокнот». В заголовке документа указать свою Фамилию и инициалы.

2. Сохранить файл под именем index с расширением *.html в папке WWW, которая будет находится в папке «Мои документы».

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

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

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

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

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

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

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

Практическая работа № 2 «Создание и форматирование таблиц в html - документе»

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

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

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

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

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

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

Пример 1:

<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.

Пример 2:

<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>