Контрольная работа
Верстка таблиц в HTML
Тема контрольной работы: создание таблиц средствами языка HTML.
Цель работы: изучение возможностей языка HTML по созданию и управлению внешним видом таблиц.
Основной задачей контрольной работы является изучение возможностей таблиц при создании структуры сайта.
Задание на контрольную работу
Сверстайте с помощью таблиц шаблон сайта. Структура сайта задается с помощью универсального шаблона. Тематика сайта определяется вариантом л.р. №1 или курсового проекта.
Таблица 1. Расположение и размер таблицы
| Вариант | Ширина | Выравнивание | cellpadding | Cellspacing | Граница |
| ФП-100 | - |
Таблица 2. Структура таблицы и свойства ячеек
| № варианта | Задание | № ячеек | |||||||
| Таблица | |||||||||
| Ширина | Ф200, ФП50, Н | ||||||||
| Содержимое | 2хИ, А, Е, МГ-5, ЗП, П, МВ-6 | ||||||||
| Фон | #ABC | #00D | #D00 | #ABC | img | #ABC | img | #ABC |
Таблица 3. Перечень использованных тегов
| Теги | Описание |
| <html></html> | Обозначает начало и конец документа |
| <head></head> | Тег головы документа |
| <title></title> | Тег заголовка документа |
| <meta> | Определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем |
| <link> | Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами |
| <h1></h1> | Тег заголовка первого уровня |
| <font></font> | Используется для изменения цвета, типа, размера шрифта |
| <table></table> | Тег, создающий таблицу |
| <tr></tr> | Тег, создающий строку в таблице |
| <td></td> | Тег, создающий ячейку в строке таблицы |
| <ul></ul> | Тег, создающий ненумерованный список |
| <li></li> | Тег, создающий пункт списка |
| <a></a> | Тег для создания ссылки |
| <img> | Тег для добавления изображения |
| <p></p> | Используется для разметки параграфов |
| <br> | Перенос строки |
| <div></div> | Используется как удобный контейнер для блоков html кода страницы, которым легко динамически манипулировать – перемещать, регулировать отступы, скрывать и т.п. |
Таблица занимает 100% ширины родительского контейнера (ФП-100), Выравнивание ячеек по умолчанию, отступы от границ ячейки cellpadding=5, отступы между ячейками cllspacing=3, ширина границы border=2.
Таблица 4. Универсальный шаблон.
Посмотрим на универсальную таблицу 4 и вычеркнем из нее неиспользуемые ячейки, таблица 5. Ячейка 5 расширяется за счет ячейки 6. Ячейка 7 также расширяется за счет ячейки 8. Ячейки 10, 11, 12, 14 и 15 убираем, расширяя ячейку 13. В результате получаем таблицу 6. Ячейка 2 имеет фиксированную ширину в 200 пикселей (Ф200), ячейка 7 также имеет фиксированную ширину равную 50% от ширины таблицы, ширина остальных ячеек зависит от их содержимого и самой таблицы.
Таблица 5. Неиспользуемые ячейки
Таблица 6. Шаблон согласно заданию
Создадим шаблон страницы согласно заданию. Результат приведен на рис. 1.
Текст html-файла.
html>
<head>
<title>Зеленов контрольная работа</title>
</head>
<body>
<table width="100%" border="2" cellpadding="5" cellspacing="3">
<tr>
<td bgcolor="#AABBCC">1</td>
<td bgcolor="#0000DD" width="200px">2</td>
<td bgcolor="#DD0000">3</td>
</tr>
<tr>
<td bgcolor="#AABBCC">4</td>
<td background="background.jpg" colspan="2">5</td>
</tr>
<tr>
<td bgcolor="#AABBCC" rowspan="2" colspan="2" width="50%">7</td>
<td background="background.jpg" rowspan="2">9</td>
</tr>
<tr>
</tr>
<tr>
<td bgcolor="#AABBCC" colspan="3">13</td>
</tr>
</table>
</body>
</html>
Рисунок 1. Создание шаблона таблицы согласно заданию
Согласно заданию таблица должна содержать 2 изображения, имя автора, e-mail автора, горизонтальное меню из 5 ссылок, заголовок и параграф, параграф, вертикальное меню из 6 ссылок.
В 1 ячейке размещаем вертикальное меню, во 2 – имя автора, в 3 – e-mail автора, в 4 – изображение, в 5 – заголовок и параграф, в 7 – изображение, в 9 – параграф и в 13 – горизонтальное меню.
Для создания горизонтального меню используем файл css.
Полный текст html-файла.
<html>
<head>
<title>Зеленов контрольная работа</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 align="center"> <font color="red" size="4">Контрольная работа вариант №1
</font></h1>
<table width="100%" border="2" cellpadding="5" cellspacing="3">
<tr>
<td bgcolor="#AABBCC"><ul type="none">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
<li><a href="#">Пункт 6</a></li>
</ul>
</td>
<td bgcolor="#0000DD" width="200px"><h1><font color="white" size="4">Автор: Зеленов Ю.В.</font></h1></td>
<td bgcolor="#DD0000"><h1><font size="4"><a href="mailto:tageres@gmail.com">Электронная почта: tageres@gmail</a></font></h1></td>
</tr>
<tr>
<td bgcolor="#AABBCC"><img src="image.gif" width="200px"/></td>
<td background="background.jpg" colspan="2"><h2 align="center"><font color="violet">Краткая информация о цветах</font></h2><br>
<p>Роза — собирательное название видов и сортов представителей рода Шиповник (лат. Rosa), выращиваемых человеком. Большая часть сортов роз получена в результате длительной селекции путём многократных повторных скрещиваний и отбора. Некоторые сорта являются формами дикорастущих видов.
В настоящее время существует несколько тысяч садовых сортов и гибридов роз, происхождение их зачастую теряется в глубине веков. Поэтому в основу современной классификации роз положено разделение на классы и условные группы на основе устойчивых садовых признаков, а не их видового происхождения.
Эта классификация была создана Американским обществом розоводов (ARS) и утверждена в 1976 году Всемирной федерацией обществ розоводов (WFRS).</p></td>
</tr>
<tr>
<td bgcolor="#AABBCC" rowspan="2" colspan="2" width="50%"><img src="image.jpg" width="200px"/></td>
<td background="background.jpg" rowspan="2"><p>Гвоздика (лат. Dianthus) — род многолетних растений семейства Гвоздичные (Caryophyllaceae).
Около 300—350 видов в Европе, Азии, Африке, а отчасти в Северной Америке. Наиболее богато род представлен в Средиземноморье. Многие виды введены в культуру в качестве декоративных растений и иногда натурализуются.
Некоторые виды гвоздик культивируются как летники и зацветают в год посева, а другие — как двулетники, то есть в год посева развивают только розеточные листья и цветут на второй год. В декоративном садоводстве в настоящее время используются многочисленные гибриды. Это растение было особенно популярно в Советском Союзе, где эти цветы стали символом Октябрьской революции, а впоследствии победы в Великой Отечественной войне.</p></td>
</tr>
<tr>
</tr>
<tr>
<td bgcolor="#AABBCC" colspan="3">
<ul id="navbar" type="none">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>