Разработка web сайта на основе HTML с использованием JavaScript

Атрибут border = n

Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов.

При отсутствии атрибута, или  при значении n=0 рамка не рисуется.

Ниже расположены ссылки на испытательные стенды. На них  можно проверить работу атрибутов src, alt, width, height, border, как по отдельности, так и в совокупности.

Атрибут align

Этот атрибут позволяет  определять положение иллюстрации  по отношению к соседним элементам  документа. Можно использовать следующие  значения атрибута:

align=top		вертикальное выравнивание по верхнему краю
align=middle		вертикальное выравнивание по центру
align=bottom		вертикальное выравнивание по нижнему  краю
align=left		горизонтальное выравнивание по левому краю
align=right		горизонтальное выравнивание по правому  краю

Давайте зададим небольшой  текстовый абзац и разместим  внутри него картинку:

<P>  Посмотрите на картинку. <IMG src=./pic/4.jpg align=middle>  Красивая птичка! </P>

Теперь можно заглянуть  в испытательный уголок и посмотреть, что происходит с изображением при  разных значениях атрибута align.

Картинка как ссылка

 

Очень легко заставить  работать картинку как гиперссылку. Достаточно вложить команду IMG внутрь команды A:

<A href=переход><IMG src=файл></A>

Картинка ведет себя так же, как текст. Курсор при попадании  на картинку-ссылку меняет свою форму. Мышиный щелчок по картинке заставляет браузер выполнять переход. Отличие  только в том, что картинка-ссылка не подчеркивается, как текст, и не выделяется цветом, а обрамляется  в рамочку. Ниже приведен пример графической  ссылки. Щелкните по ней мышкой и  увидите команду, которая эту  ссылку задает.

Для картинки с часами не задан атрибут border. Тем не менее, мы видим рамку. Эта рамка появляется потому, что картинка является гиперссылкой.

Часто рамка вокруг картинки нежелательна, даже когда она означает ссылку. Ведь о ссылке однозначно говорит  изменение формы курсора, а если картинка -- прозрачный GIF -- рамка смотрится  некрасиво. Избавиться от рамки, даже когда  картинка -- ссылка, можно явным заданием border=0.

Эти ссылки заданы так:

<A href=05ex0401.htm><IMG src=./pic/auto.gif border=0 width=200 height=68 alt="Попробуй, догони!"></A>   <A href=05ex0401.htm><IMG src=./pic/auto.gif  width=200 height=68 alt="Эх, не догнать... Посадили  в клетку!"></A>

 

Построение таблиц.

 

В практическом HTML-программировании таблицы совершенно незаменимы для... 
создания левых и правых полей страницы, выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга. И, наконец, для отображения на экране табличного материала, но это -- в последнюю очередь. В 90% случаях таблицы используются, как ни парадоксально это звучит, не для отображения таблиц.

Но обо всем по порядку.

Что такое  таблица

 

Всем хорошо известна таблица  умножения. Она представляет собой  прямоугольник, расчерченный на клетки. Вертикальные ряды клеток образуют столбцы, горизонтальные -- строки. Каждая строка и столбец в таблице может  иметь свой заголовок. Заголовки  записываются в первой строке и первом столбце.

Заголовками строк и столбцов в  таблице умножения служат цифры  от одного до девяти. Пользоваться таблицей очень просто. Если требуется узнать, например, результат умножения числа 6 на число 8, то нужно прочитать ответ  в клетке на пересечении столбца  с заголовком "6" и строки с  заголовком "8". Или в клетке на пересечении строки с заголовком "6" и столбца с заголовком "8". Это все равно, потому что 6·8 = 8·6. В обеих этих клетках написано число 48.

В общем случае таблицы  используют для хранения информации с двумя характерными признаками. Значения одного признака расписано  в заголовках строк, другого -- в заголовках столбцов. А в каждую клетку таблицы  заносят значение, одновременно обладающее признаком строки и столбца, на пересечении  которых она расположена.

Для таблицы умножения  признаками служат значения сомножителей. Первый признак -- это значение первого  сомножителя, второй -- значение второго.

Как задать таблицу

 

Таблица задается командой <TABLE> ... </TABLE>.

Внутри этих тэгов задаются строки командами <TR> ... </TR>.

Наконец, внутри строк задаются клетки (ячейки) командами <TD> ... </TD>.

Таким образом, по строкам, описывается вся структура таблицы.

Рассмотрим следующий  пример.

Программа	Таблица на экране
<TABLE border=1> <TR> <!-- Первая строка --> <TD>(1,1)</TD> <!-- Первая ячейка --> <TD>(1,2)</TD> <!-- Вторая ячейка --> </TR> <TR> <!-- Вторая строка --> <TD>(2,1)</TD> <!-- Первая ячейка --> <TD>(2,2)</TD> <!-- Вторая ячейка --> </TR> <TR> <!-- Третья строка --> <TD>(3,1)</TD> <!-- Первая ячейка --> <TD>(3,2)</TD> <!-- Вторая ячейка --> </TR> </TABLE>	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)

Атрибуты  команды TABLE

 

Атрибут	Значение	Описание
align	left, right	Выравнивание по горизонтали
width	число или процент	Ширина таблицы
cellpadding	число	Расстояние между содержимым ячейки и рамкой
cellspacing	число	Расстояние между ячейками таблицы
bgcolor	цвет	Цвет фона таблицы
background	файл	Фоновая картинка
border	число	Ширина линий рамки
bordercolor	цвет	Цвет линий рамки
bordercolordark	цвет	Цвет рамки (снизу и справа)
bordercolorlight	цвет	Светлый цвет рамки (сверху и слева)

В приведенных ниже испытателях  приводится более подробное описание действий атрибутов, а главное, на стендах  можно пощелкать переключателями, подергать за "веревочки" и  сразу увидеть, что из этого получилось.

Атрибуты  команды TR

 

HTML-таблица состоит из  строк, каждая из которых задается  командой 

<TR>описание ячеек табличной строки</TR>

Варьируя атрибутами команды TR, можно установить те или иные свойства одновременно для всех ячеек строки.

Атрибут	Значения	Описание
align	left, center, right	Выравнивание по горизонтали
valign	top, center,bottom, baseline	Выравнивание по вертикали
bgcolor	цвет	Цвет фона
bordercolor	цвет	Цвет линий рамки
bordercolordark	цвет	Цвет рамки (снизу и справа)
bordercolorlight	цвет	Светлый цвет рамки (сверху и слева)

Атрибуты  команды TD (TH)

 

Каждая табличная строка состоит из ячеек, которые последовательно  описываются командами TD (обычная ячейка) и (или) TH (ячейка-заголовок):

<TH>описание содержимого ячейки</TH>   <TD>описание содержимого ячейки</TD>

Содержимое обычной ячейки по умолчанию горизонтально выравнивается  по левому краю, а ячейки-заголовка -- по центру. Кроме того, текст в  ячейке-заголовке выделяется полужирным шрифтом.

Команды TD и TH имеют следующие атрибуты:

Атрибут	Значения	Описание
align	left, center, right	Выравнивание по горизонтали
valign	top, center, bottom, baseline	Выравнивание по вертикали
width	число или процент	Ширина ячейки
bgcolor	цвет	Цвет фона
background	файл	Фоновая картинка
bordercolor	цвет	Цвет линий рамки
bordercolordark	цвет	Цвет рамки (снизу и справа)
bordercolorlight	цвет	Светлый цвет рамки (сверху и слева)
nowrap		Выключение автоматического разрыва  строк
colspan	число	Ширина большой ячейки (в столбцах)
rowspan	число	Высота большой ячейки (в строках)

Многоликие  таблицы

 

Как уже говорилось, использование  таблиц в практике HTML-программирования очень неожиданное. Вероятно, авторы языка и не предполагали, что таблицы  будут использоваться проектировщиками гипертекстовых страниц как элемент  дизайна.

Страничные  отступы

 

В обычных книгах текст  не начинается с самого края -- страничные поля выделяют информационные блоки  и, следовательно, помогают глазам более  комфортно воспринимать материал.

В гипертекстовом документе  можно создать поля, если размещать  информацию внутри таблицы, состоящей  всего из одной клетки с невидимыми границами. При изменении значения атрибута cellpadding, меняется ширина полей.

Обычное размещение	Размещение в таблице
Малютку сына - баю-бай! -  Прижми покрепче к сердцу  И никогда не забывай  Задать ребенку перцу! "Алиса в стране  Чудес"	Малютку сына - баю-бай! -  Прижми покрепче к сердцу  И никогда не забывай  Задать ребенку перцу! "Алиса в стране  Чудес"

 

Можно задать поля и при  помощи пустых столбцов:

 

Размещение в таблице	Здесь border=1
Баюкай сына своего  Хорошею дубиной -  Увидишь, будет у него  Характер голубиный! "Алиса в стране  Чудес"	Баюкай сына своего  Хорошею дубиной -  Увидишь, будет у него  Характер голубиный! "Алиса в стране  Чудес"

 

Обычной практикой является комбинирование этих двух способов:

 

Размещение в таблице	Здесь border=1
Баюкай сына своего  Хорошею дубиной -  Увидишь, будет у него  Характер голубиный! "Алиса в стране  Чудес"	Баюкай сына своего  Хорошею дубиной -  Увидишь, будет у него  Характер голубиный! "Алиса в стране  Чудес"