- •Тема: Разработка сайта Лабораторная работа №7.
- •1. Имена файлов и каталогов
- •2. Структура web-страницы
- •3. Правильное оформление блока заголовка head.
- •4. Правильное оформление блока body
- •4.1. Тэги
- •4.2. Тэги_таблицы
- •Лабораторная работа №8. Размещение главной страницы сайта на сервере провайдера
- •4.3. Резервирование места под сайт
- •4.4. Редактирование сайта
- •Лабораторная работа №9. Форматирование текста
- •Лабораторная работа №10. Ссылки. Раскрутка сайта.
4. Правильное оформление блока body
Блок BODY содержит совокупность тэгов и информации (текст, изображения).
4.1. Тэги
Элемент разметки или оформления, входящий в формат HTML, называется тэг. Любой тэг имеет общий вид <ИМЯ>область действия тэга</ИМЯ> и действует на все, что расположено между угловыми скобками. Почти все тэги (кроме <P>, <BR>, <IMG>) должны закрываться, причем закрытие тэга отличается от открытия только наличием символа '/'. Тэги могут вкладываться друг в друга иерархически, но без пересечений, то есть допустимо вложение вида <ТЭГ1><ТЭГ2></ТЭГ2></ТЭГ1>, но не <ТЭГ1><ТЭГ2></ТЭГ1></ТЭГ2>. Действие вложенных тэгов объединяется, то есть, если внутрь тэга, создающего жирное начертание шрифта, вложен тэг курсива, в результате получится жирный курсив.
Имя тэга желательно писать маленькими буквами.
4.2. Тэги_таблицы
Информацию на странице принято размещать в таблицах.
Таблицы представляют собой особую часть HTML-документа. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблицы является ячейкой. Ячейки могут содержать в себе текст, графику или другую таблицу.
Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.
Теги оформления таблиц
Тег |
Форма записи |
Примечание |
TABLE |
<TABLE>текст</TABLE> |
Объявление таблиц. |
TR |
<TR>текст</TR> |
Объявление строки. |
TD |
<TD>текст</TD> |
Объявление ячейки в строке. |
TH |
<TH>текст</TH> |
Заголовок столбца. Текст, заключенный между тегами <th> </th> , автоматически выделяется полужирным шрифтом и позиционируется по центру ячейки. Применение необязательно. |
Атрибуты (свойства) тега <TABLE>
Атрибут |
Примечание |
BORDER |
Задает рамку вокруг таблицы. |
WIDTH |
Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселей. |
BGCOLOR |
Задает цвет фона таблицы. |
ALIGN |
Устанавливает выравнивание по горизонтали (X=Right, X=Left, X=Center) |
CELLSPACING |
Расстояние между ячейками в пикселях X |
CELLPADDING |
Размер свободного пространства между границами ячейки и ее содержимым в пикселях X |
HSPACE |
Размер свободного пространства слева и справа от таблицы, в пикселях |
VSPACE |
Размер свободного пространства сверху и снизу от таблицы, в пикселях |
BGCOLOR |
Задает цвет фона ячейки. |
BORDERCOLOR |
Цвет рамки таблицы |
BACKGROUND |
Фоновое изображение таблицы |
Атрибуты (свойства) тегов <TD> и <TR>
Атрибут |
Примечание |
ALIGN |
Устанавливает выравнивание по горизонтали (Right, Left, Center) |
VALIGN |
Устанавливает выравнивание по вертикали (Top – по верхнему краю, Middle – по середине, Bottom – по нижнему краю) |
WIDTH |
Задает ширину ячейки (строки) как ХХ% от ширины страницы или как ХХ пикселей. |
BGCOLOR |
Задает цвет фона ячейки (строки). |
BORDERCOLOR |
Цвет рамки ячейки (строки). |
BACKGROUND |
Фоновое изображение ячейки (строки). |
Если нужно задать заголовок всей таблицы, используйте тег <caption>:
< caption align="где" >Текст заглавия</caption>.
Он должен быть внутри тега <table>, но вне описания ячеек. Тег имеет один параметр: align - указывает положение заголовка: он может быть в верхней (top) или нижней (bottom) части таблицы.
Таблицы позволяют эффективно размечать Web-страницы. Принимая толщину рамки равной нулю border="0", можно сделать границу таблицы невидимой.
Простейший пример таблицы:
|
ГОРОД |
СТРАНА |
Иванов |
Москва |
Россия |
Смит |
Техас |
США |
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Имя страницы </title>
<meta name="author" content="Данные об авторе">
<meta name="description" content="Краткое описание страницы (аннотация)">
<meta name="keywords" content="Ключевые слова">
<meta name="owner" content="электронный почтовый адрес владельца">
<style>
table {
border:solid 1px green;
align:center;
width:"70%";
}
tr {align:left}
</style>
</head>
<body>
<table>
<tr>
<th> Фамилия</th><th>ГОРОД</th><th>СТРАНА</th>
</tr>
<tr>
<td>Иванов</td><td>Москва</td><td>Россия</td>
</tr>
<tr>
<td>Смит</td><td>Техас</td><td>США</td>
</tr>
</table>
</body>
</html>
Остальные возможности форматирования таблиц читайте в учебнике по HTML.