Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Назначение форм

Формы

Фреймы

Таблицы

Цветовая гамма

Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <body>:

bgcolor Определяет цвет фона документа.
text Определяет цвет текста документа.
link Определяет цвет непросмотренной гипертекстовой ссылки.
vlink Определяет цвет просмотренной гипертекстовой ссылки
alink Определяет цвет гиперссылки в момент, когда на нее указывает курсор мыши и нажата кнопка, то есть непосредственно перед переходом по ссылке.

Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Примеры:

bgcolor=#FFFFFF

Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатиричное представление числа 255). Результат — белый цвет.

text=#000000

Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат — черный цвет.

link=#FF0000

Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.

Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы.

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

Описание таблиц должно располагаться внутри раздела документа <body>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <table> и завершаться тэгом </table>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Каждая строка начинается тэгом <tr> (Table Row) и завершается тэгом </tr>. Отдельная ячейка в строке обрамляется парой тэгов <td> и </td> (Table Data) или <th> и </th> (Table Header). Тэг <th> используется обычно для ячеек-заголовков таблицы, а <td> — для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <th> отображается полужирным шрифтом и располагается по центру (align=”center”, valign=”middle”). Ячейки, определенные тэгом <td> по умолчанию отображают данные, выровненные влево (align=”left”) и посередине (valign=”middle”) в вертикальном направлении.

 

Пример:

<html>

<body>

<h1>Простейшая таблица </h1>

<table border="1">

<caption>Заголовок таблицы</caption>

<tr>

<td> Первая строка, первая колонка </td>

<td> Первая строка, вторая колонка </td>

</tr>

<tr>

<td> Вторая строка, первая колонка </td>

<td> Вторая строка, вторая колонка </td>

</tr>

</table>

</body>

</html>

 

Тэг <table> может включать несколько атрибутов (Таблица 5).

Таблица 5. Атрибуты тэга <table>

align Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=”left”, align=”center”, align=”right”.
width Ширина таблицы. Ее можно задать в пикселах (например, width=”400”) или в процентах от ширины страницы (например, width=”80%”).
border Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, border=”4”). Если атрибут не установлен, таблица показывается без рамки.
cellspacing Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, cellspacing=”2”).
cellpadding Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, cellpadding=”10”).

Таблица может иметь заголовок (<caption>... </caption>), хотя заголовок не является обязательным. Тэг <caption> может включать атрибут align.

Каждая строка таблицы начинается с метки <tr> и заканчивается меткой </tr>. Метка <tr> может включать следующие атрибуты (Таблица 6).

Таблица 6. Атрибуты тэга <tr>

align Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=”left”, align=”center”, align=”right”.
valign Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valign=”top”, valign=”middle”, valign=”bottom”.

Каждая ячейка таблицы начинается с тэга <td> и заканчивается меткой </td>. Тэг <td> может включать следующие атрибуты (Таблица 7).

Таблица 7. Атрибуты тэга <td>

nowrap Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
colspan Устанавливает размер ячейки по горизонтали. Например, colspan=”3” означает, что ячейка простирается на три колонки.
rowspan Устанавливает размер ячейки по вертикали. Например, rowspan=”2” означает, что ячейка занимает две строки.
align Устанавливает выравнивание текста в ячейке. Допустимые значения: align=”left”, align=”center”, align=”right”.
valign Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: valign=”top”, valign=”middle”, valign=”bottom”.
width Устанавливает ширину ячейки в пикселах (например, width=”200”).
heigth Устанавливает высоту ячейки в пикселах (например, heigth=”40”).

При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде — расположить таблицу так, чтобы она помещалась в окне просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются параметры width (ширина таблицы) и height (высота таблицы) тэга <table>. Аналогичные параметры могут задаваться и для отдельных ячеек.

Одной из особенностей представления таблиц различными браузерами является отображение пустых ячеек. Согласно описанию языка все браузеры должны дополнять строки пустыми ячейками, если в какой-либо строке их количество задано меньшим, чем в остальных строках. Кроме того, в любом месте таблицы могут находиться ячейки, не содержащие данных. Существует различие между пустыми ячейками и ячейками, содержащими невидимые данные. В пустых ячейках внутри пары тэгов <td> и </td> не содержится никакой информации или один или более пробелов, которые не трактуются как данные. Ячейки, содержащие невидимые данные, к примеру, могут содержать код &nbsp; или код перевода строки <br>, или любой текст, цвет которого совпадает с цветом фона ячейки. Если ячейки, содержащие данные (пусть даже невидимые), отображаются всеми браузерами одинаково, то пустые ячейки будут показаны по-разному.

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект &nbsp; (non-breaking space — неразрывающий пробел).

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

Фреймы могут быть использованы в следующих случаях:

  1. при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;
  2. для расположения в определенном месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана;
  3. для представления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.

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

Пример:

<frameset rows="80%,20%">

<frameset cols="15%, 85%">

<frame src="LIST.htm">

<frame scrolling=auto src="empty.htm" name="pages">

</frameset>

<frame src = "toolbar.html" scrolling=noresize>

</frameset>

Фреймы определяются в структуре, называемой frameset, которая используется для страниц, содержащих фреймы, вместо раздела body обычного документа. Контейнер из тэгов <frameset> и </frameset> обрамляет каждый блок определений фрейма. Внутри контейнера <frameset> могут содержаться только тэги <frame> и вложенные тэги <frameset>. Тэг <frame> определяет одиночный фрейм и не является контейнером. Необходимо записать столько тэгов <frame>, сколько отдельных фреймов определено при задании тэга <frameset>.

Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этой цели используется параметр target тэга <a>. Данный параметр определяет имя фрейма (задаваемого в параметре name тэга frame) или окна браузера, в которое будет загружаться документ, на который указывает данная ссылка. По умолчанию при отсутствии параметра target документ загружается в текущий фрейм.

<a href="test.htm" target="pages">

Поддержка фреймов имеется только в стандарте HTML 4.0, однако большинство современных браузеров распознавали фреймы и до появления HTML 4.0. В XHTML поддержка фреймов отсутствует.

 

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

<== предыдущая лекция | следующая лекция ==>
Изображения | MIME-типы
Поделиться с друзьями:


Дата добавления: 2014-01-20; Просмотров: 639; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.018 сек.