2.5. Таблицы
Таблица – это набор строк и столбцов. Ячейки таблицы могут содержать любые элементы.
Таблица: <table>…</table>
Строка таблицы: <tr>…</tr>
Ячейка таблицы: <td>…</td>
Заголовок таблицы: <th>…</th>
Подпись таблицы: <caption>…</caption>
(версия браузера IE 6.0 позволяет не указывать закрывающих тегов ячеек, строк).
Атрибуты таблицы:
Ширина, высота таблицы, ячейки: width, height
Рамка вокруг таблицы: border
Выравнивание текста: align
Объединение ячеек по горизонтали: colspan=n, где n – количество объединяемых ячеек
Объединение ячеек по вертикали: rowspan=n, где n – количество объединяемых ячеек
Расстояние между ячейками: cellspacing
Расстояние от границы ячейки до текста: cellpadding.
Например:
|
Среднее значение |
|
Рост |
Вес |
|
Мужчины |
174 |
78 |
Женщины |
156 |
56 |
<table border=3>
<tr><td rowspan=2><th colspan=2 align=center>Среднее значение
<tr align=center ><th>Рост<th >Вес
<tr ><td>Мужчины<td align=center >174
<td align=center>78
<tr ><td>Женщины<td align=center >156<td align=center>56
</table>
2.6. Гиперссылки
Страничка может состоять из нескольких документов. Ссылкой на различные документы может быть текст, картинка.
Пусть есть файл zadanie2.html на диске R:
<a href=”R:\zadanie2.html” title=”Моя ссылка”> ссылка на документ zadanie2.html </a>
Параметр title определяет подсказку, возникающую при наведении мышки на ссылку.
<a href="http://www.melody.ru/"> музыкальный сайт </a>
Это означает, что в указанном каталоге есть файл вроде index.html, который загрузится по умолчанию.
<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>
Рисунок small.jpg является ссылкой на файл big.jpg, причем target="_blank" - указывает на то, что документ, на который ведет ссылка, откроется в новом окне браузера.
<a href="mailto:mybox@tut.by/"> мой почтовый ящик </a>
Организация ссылки с вызовом почтовой программы. Адрес почтового ящика будет прописан в адресной строке.
Ссылка на точку внутри документа:
Текст, который является ссылкой на другое место (маркер) в документе, должен находиться между тегами:
<a href=”#metka”>текст>/a>
Маркер раздела, на который происходит ссылка, должен обозначаться тегом:
<a name=”metka”> Раздел 1
2.7. Фреймы (кадры)
Фреймы позволяют разбивать Web-страницы на множественные скроллируемые подокна, (т.е. имеющие полосу прокрутки). Каждое подокно может иметь свойства:
URL, позволяющий загружать его независимо от других фреймов;
name – собственное имя, позволяющее переходить к нему из другого фрейма;
Размер фрейма может быть изменен пользователем прямо на экране.
Формат документа, использующего фреймы:
<HTML><HEAD>....</HEAD>
<FRAMESET COLS=N|ROWS=N>
<FRAME SRC=”url1”>
<FRAME SRC=”url2”>
.........
</FRAMESET></HTML>
ROWS|COLS – взаимоисключающие параметры, определяющие список горизонтальных (ROWS) / вертикальных (COLS) подокон. Величина N может задаваться фиксированным числовым значением, либо в процентах от 1 до 100.
Например, <FRAMESET COLS=100,200,*> – описывает разбивку окна на три вертикальных фрейма, первый шириной 100 точек, второй шириной 200 точек, третий – оставшееся пространство.
<FRAME SRC=”URL1” [NAME=”FRAME_NAME”] [MARGINWIDTH=”NW”] [MARGINHEIGHT=”NH”] [SCROLLING=YES|NO|AUTO] [NORESIZE]>
SRC – описывает полный путь файла, который будет отображен внутри данного фрейма. Если отсутствует – будет отображен пустой фрейм.
NAME – описывает имя фрейма. Обязательно должно начинаться с символа. Содержимое поименованных фреймов может быть задействовано из других документов при помощи специального атрибута TARGET.
Например, <A HREF=”MYDOC.HTML” TARGET=”win1”> позволит открыть файл MYDOC.HTML в окне с именем win1.
MARGINWIDTH – задает величину разделительных полос между фреймами сбоку. Задается в пикселях.
MARGINHEIGHT – задает величину нижних и верхних разделительных полос.
SCROLLING – позволяет задавать наличие полос прокрутки у фрейма.
NORESIZE – создание фрейма без возможности изменения размеров.
Пример: создать следующий вариант расположения документов:
<html><head><title>Контрольная работа</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html" name=”window1”>
<frame src="menu.html">
</frameset> </head></html>