ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.09.2024
Просмотров: 58
Скачиваний: 0
<TH>3аголовок столбца 3</ТН>
<ТН>Заголовок столбца 3</ТН>
</TR>
<TR>
<TD>Текст ячейки 1:1</TD>
<TD>Текст ячейки 1:2</TD>
<TD>ТЕCT ячейки 1:3</TD>
</TR>
<TR>
<TD>Текст ячейки 2:1</TD>
<ТD>Текст ячейки 2:2</TD>
<TD>ТЕКСТ ячейки 2:3</ТD>
</TR>
</TABLE>
Приведенный выше HTML-код представляет собой пример таблицы размером 3х3 ячейки. Каждая из строк таблицы представлена парой тегов <TR>...</TR>. Первая строка содержит заголовки столбцов, для представления которых используются парные теги <ТН>...</ТН>. Остальные две строки содержат обычные ячейки, предназначенные для размещения основных данных таблицы. Каждой из ячеек соответствует пара тегов <TD>.. .</TD> HTML>
А теперь как выглядит программа в HTML-коде
<HEAD>
<TITLE> Welcome to my home page </TITLE>
</HEAD>
<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >
<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички
<font color="#FF0000">Поместив</font><font color="#CF2CD4">текст </font><font color="#0000FF">между</font><font color="silver">тегами </font><font color="green" size="4">...</font><IMG SRC="064.gif" ALT=""Стрелочка" width="147" height="147" >
<HR ALIGN=center SIZE=10 Width = 525 NOSHADE>
<UL ALIGN=center justify TYPE=dlske>
<LI ALIGN=center justify TYPE=disk|>ТЕКCT элемента списка</LI>
<LI> Это вторая строка списка</LI>
<LI> Это третьяя строка списка</LI>
</UL>
<TABLE ALIGN=center WIDТН=300 BORDER= 2 CELLSPACING=10 CELLPADDING=5>
<TR>
<TD>Заголовок столбца 1</TD>
<TD>3аголовок столбца 2</TD>
<TD>Заголовок столбца 3</TD>
</TR>
<TR>
<TD>Текст ячейки 1:1</TD>
<TD>Текст ячейки 1:2</TD>
<TD>ТЕCT ячейки 1:3</TD>
</TR>
<TR>
<TD>Текст ячейки 2:1</TD>
<TD>Текст ячейки 2:2</TD>
<TD>ТЕКСТ ячейки 2:3</TD>
</TR> </TABLE> </BODY>.</HTML>
Шаг9
Формы
Формы являются основным элементом Web-страниц, позволяющим осуществлять взаимодействие с пользователем. Используя элементы форм, пользователь может передавать автору страницы определенные сведения, передавать данные программам, работающим на сервере, осуществлять переход к определенным страницам Web-сайта и выполнять другие операции, делающие Web действительно интерактивной средой.
Таблица 10.3. Типы элементов форм
|
Тип |
Элемент формы |
Описание |
|
Text |
. Поле ввода текста |
Используется для ввода произвольных данных |
|
Password |
Поле ввода пароля |
Используется для ввода пароля. Отличается от поля ввода текста тем, что вместо всех вводимых в это поле символов отображаются символы звездочки (*) |
|
Checkbox |
Флажок |
Используется для выбора одного из двух вариантов типа <да-нет> |
|
Radio |
Переключатель |
Используется для выбора одного из нескольких взаимоисключающих вариантов |
|
submit |
Кнопка передачи данных |
Используется для передачи данных формы программе-обработчику |
|
reset |
Кнопка очистки формы |
Используется для очистки формы. При щелчке на этой кнопке все введенные пользователем данные заменяются на принятые по умолчанию |
Параметр VALUE может быть указан для полей ввода текста и пароля, а также для кнопок передачи данных и очистки формы. При указании для полей ввода этот параметр определяет значение поля формы по умолчанию (текст, отображаемый в поле на момент загрузки формы). В случае кнопок параметр VALUE имеет совершенно иное назначение - он определяет текст, отображаемый на кнопке.
Параметр CHECKED используется совместно с флажками и переключателями. Этот параметр указывается в том случае, когда флажок или переключатель должен быть установлен по умолчанию.
Параметр SIZE определяет ширину полей ввода, а параметр MAXLENGTH - максимально допустимую длину строки, которую можно ввести в это поле.
Параметр ALIGN используется для указания режима выравнивания элемента формы. Элементы формы выравниваются аналогично графическим объектам.
Многострочные текстовые поля
Многострочные текстовые поля форм позволяют вводить крупные текстовые фрагменты. Для определения многострочного текстового поля используется тег <TEXTAREA>...</TEXTAREA>, имеющий следующий формат:
<TEXTAREA NAME="Имя поля" ROWS="Количество строк"COLS="Количество столбцов">Текст по умолчанию</ТЕХТАRЕA>
Параметр NAME используется для указания имени, служащего для идентификации текстового поля. Значения параметров ROWS и COLS определяют высоту и ширину текстового поля в строках и столбцах символов соответственно.
Используя предыдущие механизмы формы создайте самостоятельно.
Поля списков
Формы могут включать в себя поля многострочных и раскрывающихся списков. Такие списки применяются для выбора одного или нескольких вариантов из предопределенного набора. Для определения этих полей используется тег <SELECT>... </SELECT>, имеющий следующий формат:
<SELECT NАМЕ="Имя поля" SIZE=Размерep списка MULTIPLE ALIGN=top|middle|bottom|left|right>
<OPTION SELECTED VALUE="Зачение">Символы</ОРТION>
</SELECT>
Параметр NAME используется для указания имени поля.
Значение параметра SIZE определяет высоту поля в строках. По умолчанию создается раскрывающийся список. Для создания обычного списка следует указать значение параметра SIZE не менее 2.
Параметр MULTIPLE позволяет выделять в списке несколько различных вариантов. Если этот параметр не указан, пользователь сможет выбирать только один из содержащихся в списке вариантов. И наконец, параметр ALIGN определяет режим выравнивания поля списка.
Каждый из представленных в списке вариантов определяется тегом <OPTION>... </OPTION>. Этот тег допускает задание двух параметров. Параметр SLELECTED указывает на то, что соответствующий вариант выбирается по умолчанию. Параметр VALUE определяет значение, передаваемое программе-обработчику данных формы при выборе соответствующего варианта.
Списки могут включать в себя любое число вариантов, поэтому их рекомендуется использовать в тех случаях, когда количество возможных вариантов выбора слишком велико для их представления переключателями.
Шаг10
Фреймы
Фреймы являются средством отображения нескольких документов в одном окне броузера. При использовании фреймов рабочая область окна броузера разбивается на несколько более мелких областей, в которых отображаются различные HTML-страницы. Фреймы полезны в тех случаях, когда необходимо, чтобы определенная область присутствовала в окне броузера постоянно, в то время как другая область обеспечивала возможность загрузки различных документов. Так, представление панели навигации, которая должна быть доступной при просмотре любой из страниц сайта, в виде отдельного фрейма может сэкономить разработчику массу времени, поскольку без использования фреймов код панели навигации пришлось бы помещать на каждую из страниц сайта вручную. Однако это еще не самое сложное: в конце концов, HTML-код панели навигации можно создать один раз, а затем скопировать его на все остальные страницы сайта. Представьте себе ситуацию, когда на Web-сайте, насчитывающем несколько десятков, а может быть, и сотен HTML-страниц, требуется внести изменения в панель навигации. Без фреймов на эту операцию мог бы уйти не один день. В то время как если панель навигации вынесена в отдельный фрейм, достаточно внести требуемые изменения всего лишь однажды: в HTML-документе, содержащем собственно панель навигации.
С
ледует
отметить, что какой-либо русский аналог
английского термина frames нельзяназвать
безусловно устоявшимся. В то время как
в Microsoft Word 2000 применяется термин <рамки>,
в Microsoft Internet Explorer 5 можно встретить
вариант перевода этого термина <кадры>.
На наш взгляд, оба эти перевода нельзя
назвать удачными. С другой стороны, в
русскоязычной литературе нередко
употребляется термин <фреймы>, который
попросту взят из английского языка. В
нашей книге будет употребляться именно
этот вариант.
HTML-страница с фреймами состоит из нескольких компонентов: страницы, содержащей набор фреймов, и страниц, предназначенных для отображения в каждом из фреймов этого набора. Набор фреймов можно представить себе как своеобразные ячейки, предназначенные для загрузки HTML-документов. Для определения набора фреймов в языке HTML имеется тег <FRAMESET>...</FRAMESET>. Этот тег имеет следующий формат:
<FRAMESET ROWS="Вертикальная структура фрейма" COLS="Горизонтальная структура фрейма">
<FRAME SRC="URL исходной страницы фрейма" NAME="Имя фрейма" MARGINWIDTH="Paзмep левого и правого полей" МАRGINHEIGHT="Размер верхнего и нижнего полей" SCROLLING=yes|no|auto NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY> Код страницы для отображения в броузерах, не поддерживающих фреймы
</BODY>
</NOFRAMES>
Параметры ROWS и COLS тега <FRAMESET> используются для определения структуры набора фреймов по вертикали и горизонтали. Допустим, необходимо создать набор из двух фреймов, расположенных горизонтально, в верхнем из которых необходимо отображать логотип Web-сайта и ссылки на основные страницы (панель навигации), а нижний предназначен для отображения информационных страниц. Верхний фрейм должен иметь высоту 60 пикселов, а нижний - занимать всю оставшуюся часть рабочей области окна броузера. Для создания такого набора будет использоваться следующий тег:
<FRAMESET ROWS="60,*">
Символ звездочки (*) в данном случае означает, что второй (нижний) фрейм набора занимает по высоте всю рабочую область экрана, не используемую для отображения других фреймов (в данном случае такой фрейм один).
Аналогично, если требуется создать набор, в левом фрейме которого располагается вертикальная панель навигации шириной 100 пикселов, а всю оставшуюся часть справа занимает область для отображения основных страниц сайта, тег <FRAMESET> будет иметь следующий вид:
<FRAMESET COLS="100, *">
</FRAMESET>
После определения общей структуры набора фреймов необходимо описать каждый из фреймов, входящих в набор. Для этой цели служит тег <FRAME>. Этот тег является непарным.
Параметр SRC позволяет указать URL страницы, отображаемой во фрейме непосредственно после загрузки набора (или исходной страницы фрейма).
Параметр NAME определяет имя фрейма. Указание имени фрейма позволяет загружать в него документы по щелчку на гиперссылках, расположенных в других фреймах. Чтобы обеспечить открытие целевого документа гиперссылки в определенном фрейме, имя этого фрейма должно быть указано в качестве значения параметра TARGET этой гиперссылки. Например, при щелчке на гиперссылке, определенной с использованием представленного ниже тега, содержащийся в документе prices, html прейскурант продукции будет отображен с именем information:
<А HREF="prices.html" TARGET="information">Товары и цены</А>
По умолчанию целевой документ гиперссылки отображается в том же фрейме, что и документ, содержащий эту гиперссылку.
Параметры MARGINWIDTH и MARGINHEIGHT определяют размеры полей фрейма.
Для установки режима отображения полос прокрутки во фрейме используется параметр SCROLLING. Если значение этого параметра равно yes, во фрейме отображаются полосы прокрутки. Если значение параметра равно по, полосы прокрутки не отображаются. При указании значения auto (а также если этот параметр не указан) полосы прокрутки отображаются только в том случае, если вся информация документа не умещается в пределах видимой области фрейма, и для просмотра этой ин4юрмации необходима полоса прокрутки.
Указание параметра NO RESIZE запрещает изменение размеров фрейма в ходе просмотра.
Обратите внимание, что тег <FRAMESET> замещает собой тег <BODY>, используемый на всех HTML-страницах, но не в наборах фреймов. Дело в том, что набор фреймов сам по себе не является Web-страницей. Он лишь определяет структуру, в пределах которой будут отображаться другие Web-cтраницы. Таким образом, наборы фреймов не допускают указания каких бы то ни было отображаемых элементов Web-страниц, будь то текст, рисунки, гиперссылки или другие элементы.
Тем не менее в настоящее время по-прежнему используются броузеры, не поддерживающие фреймы. Чтобы в таких броузерах просматривать страницы, содержащие фреймы, язык разметки HTML предоставляет тег <NOFRAMES>.. .</NOFRAMES>. Этот тег должен также включать в себя тег <BODY>...</BODY>, ограничивающий текст и объекты отображения страницы в броузерах, не поддерживающих фреймы.