Автор работы: Пользователь скрыл имя, 21 Октября 2013 в 02:06, реферат
Открывая в браузере любую Web- страницу, мы текст , картинки, кнопки, таблицы и м ногою другое. Для того, чтобы создать Web –страницу , может потребоваться всего лишь текстовый редактор Notepad.
Окройте любую Web- страничку. То, что вы видите в броузере – это ее “лицо”. Чтобы увидеть “изнанку” Web- страницы , выполните команду View \ HTML Code. Откроется текстовый редактор Блокнот, в котором вы увидите “устройство” этой страницы.
1.Назначение HTML. Основные понятия.
2. Структура HTML документа
3. Улучшеная страничка
Форматирование текста
Управление цветом
4. Рисунки на Web - странице.
5. Гиперссылки
6. Таблицы
Создание и форматирование таблиц
Разметка Web- страницы при помощи таблицы
</tr>
<tr>
<td> (3,1) </td>
<td> (3,2) </td>
</tr>
</table>
Атрибуты команды <table>
Атрибут |
Значение |
Описание |
align |
Left, right, |
Выравнивание по горизонтали |
width |
Число,процент |
Ширина таблицы |
cellpadding |
Число |
Расстояние между содержимым ячейки и рамкой |
cellspacing |
Число |
Расстояние между ячейками таблицы |
bgcolor |
Цвет |
Цвет фона таблицы |
background |
Цвет |
Фоновая картинка |
border |
Число |
Толщина рамки |
bordercolor |
Цвет |
Цвет линий рамки |
bordercolordark |
Цвет |
Цвет рамки ( снизу и справа ) |
bordercolorlight |
Цвет |
Цвет рамки (сверху и слева ) |
Атрибут align
Позволяет определить положение таблицы к соседним элементам документа. Если атрибут не задан, таблица выравнивается по левому краю окна, а другие элементы страницы выше или ниже нее (обтекания не происходит ). Выровнять таблицу можно при помощи команды <div>.
<div align=right>
<table border=1>
……
</table>
</div>
Атрибут width
Если атрибут не задан, браузер рисует таблицу минимальных размеров вокруг данных, которые она содержит. Запись width=число заставляет браузер рисовать таблицу шириной в указанное число пикселов.Если реально для таблицы требуется больше места, значение width игнорируется. Если заданный размер уводит таблицу за правую границу окна, браузер добавляет к окну горизонтальную линейку протяжки. Можно задавать ширину таблицы в процентном отношении: width=процент.
<table width=200 border=1>
<table width=90% border=1>
Атрибут cellpadding и cellspacing
Первый атрибут задает расстояние между рамкой таблицы и содержимым ячейки, второй - -между рамками соседних ячеек ( по умолчанию cellpadding=1 и cellspacing=2 . )
Атрибут bgcolor и background
Если атрибуты не заданы, элементы выводятся прямо на фон документа и таблица вы-глядит прозрачной. Атрибут bgcolor задает цвет фона таблицы, а атрибут background - паркетную укладку картинкой.
<table background= /pic/fontab.gif bgcolor=blue border=1>
Атрибут border и bordercolor
Первуй атрибут задает толщину рамки вокруг всей таблицы, второй - ее цвет. Если задано border=0, то рамка, а заодно и прямоугольники клеток , не рисуются.
<table border=0>
Атрибуты команды <tr>
HTML- страница состоит из строк, каждая из которых задается командой
<tr> описание ячеек табличной строки </tr>
Атрибут |
Значение |
Описание |
align |
Left, center, right |
Выравнивание по горизонтали |
valign |
Top, middle, bottom, baseline |
Выравнивание по вертикали |
bgcolor |
цвет |
Цвет фона ячейки |
bordercolor |
цвет |
Цвет линий рамки |
bordercolordark |
цвет |
Темный цвет рамки |
bordercolorlight |
цвет |
Светлый цвет рамки |
Атрибуты команды <td> (<th>)
Каждая табличная строка состоит из ячеек, которые последовательно описываются командами <td>(обычная ячейка) и <th> (ячейка-заголовок).
Атрибут |
Значение |
Описание |
align |
left, center, right |
Выравнивание по горизонтали |
valign |
top, middle, bottom, daseline |
Выравнивание по вертикали |
width |
Число или процент |
Ширина ячейки |
bgcolor |
цвет |
Цвет фона |
background |
файл |
Фоновая картинка |
bordercolor |
цвет |
Цвет линий рамки |
bordercolordark |
цвет |
Темный цвет рамки ( снизу и справа ) |
bordercolorlight |
цвет |
Светлый цвет рамки ( сверху и слева ) |
nowrap |
Выключения автоматического разрыва строк | |
colspan |
число |
Ширина большой ячейки в столбцах |
rowspan |
число |
Высота большой ячейки в столбцах |
Примеры
Атрибут colspan определяет, сколько табличных столбцов займет ячейка в пределах строки.
Атрибут rowspan определяет, сколько табличных строк займет ячейка в пределах столбца.
<table> |
| |||||||||
<tr> |
<td colspan =2> </td> |
</tr> | ||||||||
<tr> |
<td> </td> |
<td> </td> |
</tr> | |||||||
<tr> |
<td> </td> |
<td> </td> |
</tr> | |||||||
</table> | ||||||||||
Пример 5 . doc4.htm |
|
<HTML> <HEAD> < meta http-equiv = “Content-Type” content =”text/html; charset = windows-1251 “> <TITLE> Упражнение 4. </TITLE> </HEAD> <BODY> <h1> Четвертый HTML -- документ </h1> <hr> <table width =100% border=10 cellpadding=10 cellspacing=2 <tr> <td colspan =2> Для этой ячейки задан атрибут colspan=2 </td> </tr> <tr> <td > ( 2, 1 ) </td> <td > ( 2, 2 ) </td> </tr> <tr> <td > ( 3, 1 ) </td> <td > ( 3, 2 ) </td> </tr> </table> <p> Корова похожа на лошадь. А лошадь не похожа на корову. Имеено это сходство мы берем за основу </p>
</BODY> </HTML> |
Начало HTML - документа Начало головной части Информация о документе
Название документа Конец головной части Начало тела документа
Заголовок Горизонтальная линия Таблица
Начало абзаца Абзац
Конец абзаца Конец тела документа Конец HTML - документаа |
Вопросы и упражнения
Опишите таблицы, изображенные на рисунке, на HTML
|
|
|
| |||||||||||||||||||||
Разметка Web - страницы при помощи таблиц
Разметку страницы удобно производить с использованием таблицы. Возможны различные варианты разметки.
Рассмотрим некоторые из них:
Первый вариант. Разметка страницы производится с использованием таблицы шириной на весь экран, независмо от того, каково разрешение экрана ( width = "100%" ). В данном случае удобно создать таблицу , состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web- сайта.
При уменьшении разрешения экрана , текст сползает вниз.
Второй вариант.Разметка страницы производится с использованием таблицы шириной 760 пикселов, выровненной по центру экрана.
Для экрана 800Х600 пикселов – страничка видна во весь экран.
На мониторах , разрешение которых 1024X 768 таблица будет шириной 760 пикселов по центру, а с боков – белые поля. Три строки и 1 столбнц. В 3 строке- вложенная таблица 3Х2.
1/3/2006 8:07:00 AM |
"КИТ" – N.N. ' 7-177- 424, 009 |