Сохранить файл и Обновить странички index . htm , index 1. htm . )

Работа 6-8. Творческое задание

Творческое задание. «Мой сайт». Создать Web-сайт, рассказывающий о вас.

Сайт рекомендуется хранить в отдельной, специально созданной папке Сайт, вложенной в папку Ваша_фамилия. Здесь будут находиться как Web-страницы, так и графические файлы. Начальная страница сайта обычно имеет имя index.htm, в этом случае для начала просмотра сайта, в адресе достаточно указать путь к папке, где он хранится.

Начальная страница «Мой сайт» будет содержит информацию о вас, вашей семье и ваших друзьях. Страницы связаны между собой гиперссылками.

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

Дополнительный справочный материал для самостоятельного изучения.

Работа с таблицами.

Общий вид таблицы:

<TABLE BORDER=3 CELLSPACING=2 CELLPADDING=2 WIDTH="80%"> <CAPTION> ... заголовок таблицы... </CAPTION> <TR><TD> первая ячейка <TD> вторая ячейка <TR>...... </TABLE>

Атрибуты метки TABLE не обязательны. По умолчанию, таблица выводится без рамки. Как правило, размер ячеек таблицы устанавливается автоматически, чтобы наилучшим образом разместить содержимое, однако можно установить ширину таблицы с помощью атрибута WIDTH. Атрибуты BORDER, CELLSPACING и CELLPADDING предоставляют дополнительные возможности для контроля за внешним видом таблицы. Заголовок размещается над или под таблицей в зависимости от значения атрибута ALIGN.

Горизонтальный ряд ячеек определяется элементом TR, закрывающая метка не обязательна. Ячейки таблицы определяются элементами TD (для данных) и TH (для заголовков). Как и TR, эти элементы могут не иметь закрывающей метки. TH и TD могут включать несколько атрибутов: ALIGN и VALIGN для выравнивания содержимого ячейки, ROWSPAN и COLSPAN для указания того, что ячейка занимает более одного горизонтального ряда или колонки. Ячейка таблицы может содержать другие элементы уровня блока и текста, включая формы и другие таблицы.

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

Align

Допустимые значения: LEFT, CENTER и RIGHT. Определяет положение таблицы по отношению к полям документа. По умолчанию установлено выравнивание по левому краю, но это можно изменить путем включения в документ элемента DIV или CENTER.

DIV и CENTER

Элементы DIV можно использовать для разбиения HTML-документа на несколько разделов (англ. division — раздел). Для указания горизонтального выравнивания внутри элемента DIV можно использовать атрибут ALIGN с допустимыми значениями LEFT, CENTER и RIGHT (аналогично принятому для абзацев <P>).

Обратите внимание: элемент DIV по определению закрывает открытый абзац P. За исключением этого случая, браузеры не показывают элемент DIV на экране. Элемент <CENTER> полностью равнозначен <DIV ALIGN=CENTER>. В элементах DIV и CENTER обязательны открывающие и закрывающие метки.

Width

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

Border

Используется для указания ширины внешней окантовки таблицы в пикселах (например, BORDER=4). Значение можно установить равным нулю, в результате чего окантовка не будет видна. В отсутствие этого атрибута окантовка также не должна показываться на экране. Обратите внимание: некоторые браузеры воспринимают метку <TABLE BORDER> точно так же, как BORDER=1.

Cellspacing

В традиционном издательском программном обеспечении расположенные рядом ячейки таблицы имеют общую окантовку. В HTML это не так. Каждая ячейка имеет собственную окантовку. Ширина окантовки ячейки в пикселах устанавливается атрибутом CELLSPACING (например, CELLSPACING=10). Этот атрибут также устанавливает расстояние между окантовкой таблицы и окантовками крайних клеток таблицы.

Cellpadding

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

Элемент CAPTION может иметь один атрибут ALIGN со значением ALIGN=TOP или ALIGN=BOTTOM. Соответственно, заголовок таблицы показывается либо над, либо под таблицей. Большинство браузеров по умолчанию показывают заголовок над таблицей. Открывающая и закрывающая метки обязательны. В заголовках тыблиц не разрешаются элементы уровня блока.

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

Align

Устанавливает горизонтальное выравнивание в ячейках строки. Допустимые значения: LEFT, CENTER и RIGHT. Действие аналогично атрибуту ALIGN у абзацев.

Valign

Устанавливает вертикальное выравнивание в ячейках строки. Допустимые значения: TOP, MIDDLE и BOTTOM; содержимое ячеек при этом выравнивается по верхнему краю, по центру или по нижнему краю.

Существует два элемента, определяющих ячейки таблицы. TH используется для ячеек-заголовков, а TD - для ячеек с данными. Открывающие метки обязательны, закрывающие - нет. Ячейки могут иметь следующие атрибуты:

Nowrap

Этот атрибут запрещает автоматический перевод текста со строки на строку внутри ячейки таблицы (например, <TD NOWRAP>). Эффект применения этого атрибута аналогичен использованию объекта &nbsp; вместо пробела по всему содержимому ячейки.

Rowspan

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

Colspan

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

Align

Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: LEFT, CENTER и RIGHT. Если атрибут ALIGN не указан, принятое по умолчанию выравнивание - по левому краю для <td> и по центру для <th>, однако это можно изменить установкой атрибута ALIGN элемента TR.

Valign

Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: TOP, MIDDLE и BOTTOM. Если атрибут VALIGN не установлен, по умолчанию принято выравнивание по центру, однако это можно изменить установкой атрибута VALIGN элемента TR.

Width

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

Height

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

Таблицы, как правило, показываются на экране "приподнятыми" над поверхностью страницы, а ячейки - "вдавленными" в тело таблицы. Ячейки выделяются окантовкой только если в них есть содержимое. Если содержимое ячейки состоит только из пробелов, ячейка считается пустой, за исключением случаев, когда в ней есть хотя бы один объект &nbsp;.