- •2. Создание web-страниц и web-сайтов
- •2.1 Общие сведения о создании Web-страниц
- •2.2 Html-тэги и их атрибуты
- •2.3 Создание и оформление Web-страниц
- •2.4 Форматирование текста в html
- •2.5 Вставка иллюстраций
- •2.6 Создание списков
- •2.7 Создание форм
- •2.8 Вставка гипертекстовых ссылок
- •2.9 Создание таблиц
- •2.10 Создание фреймов
- •2.11 Анимация на Web-страницах
- •2.12 Мета теги
- •2.13 Контрольные вопросы к раздела 2.1-2.13
- •2.14 Размещение Web-страниц в Интернете
- •2.15 Регистрация в поисковых системах и каталогах
- •Контрольные вопросы к разделам 2.14-2.15
2.9 Создание таблиц
До сих пор мы создавали документы, в которых текст располагался в одной колонке. На практике часто бывает необходимо расположить текст в двух или трех колонках. Помочь в этом может таблица.
Кроме того, таблица, состоящая из одной ячейки, может эффектно выделить фрагмент текста, на который вы хотите обратить внимание посетителей сайта. Удобно чередовать в ячейках таблицы рисунки и текст. Также таблица нужна для отображения информации, представленной в табличном виде. Таблица часто используется в качестве меню.
Создадим в новом файле таблицу, состоящую из одной колонки. В её ячейки, как в меню, поместим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Сайт может содержать десятки страниц, поэтому важно иметь возможность быстро выбирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана так, чтобы оно постоянно оставалось в поле зрения пользователя.
Создадим новый текстовый файл, выбрав в меню Файл программы Блокнот команду Создать.
Введём основные тэги, создающие структуру документа. В заголовке документа укажите Меню. Цвет фона и текста документа выберем такими, чтобы ссылки были хорошо видны:
<html>
<head>
<title>Meню</title>
</head>
<body bgcolor=silver>
</body>
</html>
Сохраним этот документ в папке Lab под именем menu.html.
Каждая таблица начинается тэгом <table>, а заканчивается тэгом </table>. Строки таблицы образуются парой тэгов <tr>..</tr>, между которыми располагаются пары тэгов <td>..</td>. Каждая пара этих тэгов образует один столбец. Между открывающим <td> и закрывающим </td> тэгами помещается текст или любое другое содержимое ячейки.
Код HTML нашей страницы с таблицей, состоящей из одного столбца и содержащей пункты меню с названиями страниц сайта, будет иметь следующий вид:
<html>
<head>
<title>Meню</title>
</head>
<body bgcolor=silver>
<table>
<tr><td>Главная страница</td></tr>
<tr><td>Чем мы занимаемся?</td></tr>
<tr><td>О нашей лаборатории</td></tr>
<tr><td>Новости</td></tr>
<tr><td>Наши разработки</td></tr>
<tr><td>Как связаться с нами</td></tr>
</table>
</body>
</html>
Созданная нами таблица располагается у левого края экрана. Это положение можно изменить, если использовать в открывающем тэге <table> атрибут align=center для выравнивания таблицы по центру или атрибут align=right - для выравнивания по правому краю окна браузера.
Существуют и другие атрибуты, позволяющие оформить таблицу нужным образом:
align – выполняет выравнивание по горизонтали.
valign – выполняет вертикальное выравнивание содержимого таблицы
border – задает внешнюю рамку таблицы: 1 – рамка есть, 0 – рамки нет.
cellpadding – расстояние между границей каждой отдельной ячейки и ее содержимым.
cellspacing – расстояние между границами близлежащих ячеек.
width – ширина таблицы. Задается в абсолютном значении (пиксели) или в относительном (проценты).
height – высота таблицы, задается аналогично width.
bgcolor – задает цвет фона для таблицы.
background – используется для установки изображения в качестве фона таблицы.
Пункты меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Для того, чтобы включить их отображение, следует в тэге <table> использовать атрибут border, указав в качестве его значения толщину рамки в пикселях, например: <table border=1>. Устанавливается толщина рамки в 1 пиксель.
Размер таблицы обычно устанавливается браузером автоматически так, чтобы отображалось все ее содержимое. Однако с помощью атрибута width можно установить фиксированную ширину таблицы в пикселях, например: <table border=1 width=140>. Устанавливается ширина таблицы в 140 пикселей.
В окне браузера ширина таблицы уменьшится так, что в большинстве ячеек текст будет отображаться в двух строках.
При использовании для формирования столбцов таблицы тэгов <td>..</td> данные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, например, заголовки столбцов или строк таблицы, то вместо тэгов <td>..</td> удобно использовать тэги <th>..</th>. Текст в элементах <th>..</th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек.
Наше меню будет выглядеть лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Поэтому заменим в HTML-коде элементы <td></td> элементами <th></th>.
Отредактируем файл menu.html, заменив тэги <td> и </td> соответственно тэгами <th> и </th>. Код HTML страницы сайта примет следующий вид:
<html>
<head>
<title>Меню</title>
</head>
<body bgcolor=silver>
<table border=1 width=140>
<tr><th>Главная страница</th></tr>
<tr><th>Чем мы занимаемся?</th></tr>
<tr><th>О нашей лаборатории</th></tr>
<tr><th>Новости</th></tr>
<tr><th>Наши разработки</th></tr>
<tr><th>Как связаться с нами</th></tr>
</table>
</body>
</html>
В тэгах <td> и <th> можно использовать следующие атрибуты:
align – для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;
width – для указания ширины ячейки в пикселах;
height – для определения высоты ячейки;
valign – для вертикального выравнивания данных в ячейке по верхнему (top) краю, нижнему (bottom) краю и середине (middle) ячейки; по умолчанию valign=middle.
Можно также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут bgcolor соответственно в тэг <th>, <tr> или <table>.
Нам осталось теперь создать ссылки двух первых пунктов меню на уже созданные страницы нашего сайта lab1.html и lab2.html. Поскольку остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тэгами <а>..</а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню – Главная страница следует указать файл lab1.html, а для второго – Чем мы занимаемся? – файл lab2.html.
Обычно при переходе по ссылке новый документ отображается в том же окне, что и исходный, в котором была ссылка. Для того, чтобы отобразить его в другом окне, необходимо в открывающем тэге <а> использовать атрибут target, параметром которого должно быть имя того окна, в которое будет загружен документ. Укажем это имя как значение атрибута target в ссылке: target="frame". Web-страница будет загружаться в то же окно браузера, в котором находится ссылка. Атрибут target позволяет загружать документ в другое окно.
С учетом всего, сказанного выше, HTML-код, содержащийся в файле menu.html примет следующий вид:
<html>
<head>
<title>Меню<title>
</head>
<body>
<table border=1 width=140>
<tr><th><a href="lab1.html" target="frame">Главная страница
</а></th></tr>
<tr><th><a href=" lab2.html" target="frame">Чем мы занимаемся?
</а></th></tr>
<tr><th>О нашей лаборатории</th></tr>
<tr><th>Новости</th></tr>
<tr><th>наши разработки</th></tr>
<tr><th>Как связаться с нами</th></tr>
</table>
</body>
</html>
Сохраните документ в папке Lab под именем menu.html, выбрав из меню Файл программы Блокнот команду Сохранить.