Лабораторная работа №1 Знакомство с таблицами
Задачи:
Освоить технологию создания таблиц средствами HTML;
Разработать домашнюю страницу сайта.
Примерная структура и содержание домашней страницы приведены на рис. 4.
|
АГЕНТСТВО-ГОСТИНИЦА Собачье счастье |
||||
Услуги |
Об агентстве |
Новости |
Сведения о породах |
Фотогалерея |
|
В праздничные дни у нас предусмотрены скидки на все виды услуг |
|||||
Наши координаты: Екатеринбург, Ул. Машиностроителей, 11 Тел. 31-67-78
Директор: Кучин Станислав Леонидович, 31-09-08
Диспетчер: Мухина Нина Ивановна, 31-09-07
Ветеринар: Бойцов Игорь Олегович, 31-09-06
Кинолог: Ураева Кира Муратовна, 31-09-05
Парикмахер: Власов Сергей Яковлевич: 31-09-04 |
Добро пожаловать на сайт гостиницы для животных.
В нашей гостинице проживают животные, оставшиеся по разным причинам без хозяина. Если Вы потеряли своего любимца, то, возможно, мы поможем Вам его найти. Вы потеряли? Если у Вас возникло желание обзавестись кошкой или собакой, то Вы можете взять их у нас. В этом разделе сайта Вы найдете полную информацию о живущих в нашей гостинице питомцах, которых можно «усыновить». Вы хотите взять лохматого друга? Если Вы случайно нашли бездомное животное и не можете его приютить, приводите (приносите) его к нам. Мы окажем ему необходимую помощь и поселим в нашей гостинице. Приводите, приносите!
У нас приветливые и компетентные диспетчеры. Они ответят на все Ваши вопросы. Мы работаем круглосуточно. Все услуги агентства ‑ платные |
||||
Рис. 4. Пример домашней страницы сайта
Чтобы реализовать предложенный вариант домашней страницы, необходимо:
Уметь создавать и форматировать таблицы в HTML;
Уметь оформлять и форматировать гипертекст;
Уметь организовать гиперссылку (в предложенном примере домашней страницы все подчеркнутые и выделенные жирным шрифтом фрагменты текста являются гиперссылками).
В этой работе Вы займетесь решением первой из перечисленных задач: освоением технологии создания и форматирования таблиц на примере домашней страницы Вашего будущего сайта.
Формирование таблиц
С помощью таблиц можно различным образом компоновать текст и графику на странице, поэтому таблицы для Web-страницы служат одним из основных элементов дизайна.
Основные теги <TABLE> и </TABLE> - начало и конец таблицы.
Теги <TR> и </TR>. Эти теги окружают каждую строку таблицы. Два набора тегов <TR> ‑ две строки, восемь наборов ‑ восемь строк.
Теги <TD> и </TD>. Эти теги определяют отдельную ячейку строки. В них содержатся собственно данные таблицы. Число ячеек в строках таблицы не обязательно должно быть постоянным. В одной строке может быть пять ячеек, в другой три.
Теги <TH> и </TH>. Этот тег используется для задания заголовков столбцов и строк таблицы. Текст, заключенный между этими тегами, автоматически записывается жирным шрифтом и располагается посередине ячейки.
Теги <CAPTION> и </CAPTION> ‑ создают заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<CAPTION ALIGN=TOP>), либо под (<CAPTION ALIGN=BOTTOM>) таблицей. Заголовок может состоять из любого текста и изображения.
Пример HTML-кода таблицы и вид этой таблицы в броузере приведены на рис.5.
<html> <body> <table border=1> <caption>Заголовок</caption> <tr> <td>ячейка 1</td> <td>ячейка 2</td> </tr> <tr> <td>ячейка 3</td> <td>ячейка 4</td> </tr> </table> </body> </html> |
|
Рис. 5. Код HTML-таблицы и ее вид в броузере
Действие всех перечисленных тегов можно уточнить с помощью атрибутов.
Атрибуты табличных тегов определяют способ выравнивания таблицы по горизонтали, фон таблицы, цвет и ширину рамок таблицы, ширину самой таблицы. Кроме того, можно задать параметры строк и отдельных ячеек таблицы: выравнивание элементов, фоновый цвет, цвет рамки и пр.
Рекомендации по выполнению лабораторной работы
При выполнении лабораторной работы Вам могут понадобиться следующие разделы справочника по HTML (“Sprav_html.doc”):
Заголовок документа;
Тело документа;
Таблицы в HTML.
При подборе фона таблицы и фона отдельных ее компонентов Вам понадобится таблица цветов для Web, которая находится в файле “color.htm” на компакт-диске.
Задание 1
Откройте файл справочника Sprav_html.doc на компакт-диске. Найдите раздел «Таблицы». Ознакомьтесь с атрибутами всех тегов, необходимых для создания таблицы. Сделайте конспект тех атрибутов, которые понадобятся Вам для разработки структуры домашней страницы. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
Задание 2
На компакт-диске в папке Таблицы откройте файл primer.doc. Разберите приведенный в примере код.
Создайте Web-страницу, содержащую таблицу с расписанием занятий на четную и нечетную недели. Структура, содержание и вид таблицы в броузере приведены на рис.6.
Рис.6. Расписание занятий
При создании таблицы:
Для заголовка нечетной недели задать красный фон, для четной – синий;
Рамку таблицы сделать цветной;
В заголовок таблицы включить рисунок;
Растянуть последнюю строку таблицы на все ячейки соответствующей недели.
Измените код программы так, чтобы ячейка, содержащая текст «В расписании возможны изменения» была общей для обеих недель.
Если возникли вопросы, пригласите преподавателя.
Задание 3
Разработайте табличную структуру домашней страницы Вашего будущего сайта.
Обязательное требование – разработанная таблица должна позволять разместить все указанные в примере (рис. 4) функциональные элементы: логотип, заголовок, навигационную панель, бегущую строку и т. д.
Не стоит помещать на домашнюю страницу реальное содержание, поскольку Вы пока не умеете оформлять текст. Рекомендуется использовать имитацию текста.
Примечание: созданную Web-страницу сохраните в отдельном каталоге (например, “Table”). Сюда же Вы будете помещать все остальные Web-страницы этого варианта сайта.
Итоговое задание
Откройте файл “Зачетные задания.doc”, который находится в папке “Таблицы” на компакт-диске. Выполните итоговое задание. Номер Вашего варианта задания совпадает с номером Вашей машины. Если Вы работаете без преподавателя, выбирайте любой вариант.
Контрольные вопросы
Какие основные функции выполняет домашняя страница?
Можно ли создать заголовки строк и столбцов таблицы без использования тега <TH> и </TH>? Как?
Если не задан атрибут WIDTH тега <TABLE> и </TABLE>, то какова будет ширина таблицы?
Если значения атрибута BGCOLOR для HTML-документа, таблицы, строки таблицы различны, то какой фоновый цвет будет иметь таблица? Строка таблицы?
Можно ли добиться расположения элементов на Web-странице, отличного от линейного, не используя таблицы? Как?
Нарисуйте таблицу, код создания которой имеет следующий вид:
<html>
<body>
<table border=”1”>
<tr>
<td rowspan=”2”>ячейка 1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ячейка 3</td>
</tr>
</table>
</body>
</html>
Нарисуйте таблицу, код создания которой имеет следующий вид:
<html>
<body>
<table border=”1”>
<tr>
<td>одна ячейка в строке 1</td>
<td rowspan=”2”>одна ячейка в две строки</td>
</tr>
<tr>
<td>одна ячейка в строке 2</td>
</tr>
</table>
</body>
</html>
Нарисуйте таблицу, код создания которой имеет следующий вид:
<html>
<body>
<table border=”1”>
<tr>
<td colspan=”2”>одна ячейка в 2 столбца</td>
</tr>
<tr>
<td>одна ячейка в строке 2</td>
<td>вторая ячейка в строке 2</td>
</tr>
</table>
</body>
</html>
Нарисуйте таблицу, код создания которой имеет следующий вид:
<html>
<body>
<table border=”1”>
<tr>
<td >одна ячейка в строке 1</td>
<td>вторая ячейка в строке 1</td>
</tr>
<tr>
<td colspan=”2”>одна ячейка в два столбца</td>
</tr>
</table>
</body>
</html>
На рисунке приведен вид таблицы в броузере и HTML-код программы создания таблицы. Найдите несоответствия рисунка таблицы и кода программы.
|
<html> <body> <table border=”1”> <tr> <td>ячейка</td> <td rowspan=”2”>ячейка</td> </tr> <tr> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> </tr> </table> </body> </html> |
