Разработка электронного портала (2011), страница 6

Втеге INPUT необязательно указывать атрибут text, он используется по умолчанию, если неуказаны другие атрибутыПример: E-mail <INPUT TYPE=text NAME=”email” VALUE=addr@addr.ru SIZE=15MAXLENGHT=25>.Рисунок 5.2.Атрибут PASSWORD позволяет создавать поля вода, где введенные символы будутотображаться жирными точками или другими символами.Пример:Логин<INPUTTYPE=textNAME=”login”>Пароль<INPUTTYPE=password NAME=”pass”>.Рисунок 5.3.Скрытые поля (атрибут hidden) предназначены для передачи данных, которыепользователь не может изменить. Чаще всего это необходимо, когда используетсянесколько форм подряд.

В данном случае у тега INPUT необходимо указывать еще дваатрибута – NAME и VALUE.Пример: <INPUT TYPE=hidden NAME=”id” VALUE=”12345”>.В языке HTML предусмотрено два вида переключателей – зависимые инезависимые.Независимые переключатели используются для предоставления возможностимножественного выбора, для его создания необходим атрибут checkbox. В данном случаеобязательно наличие атрибутов NAME и VALUE. Это необходимо для того, чтобывпоследствии обрабатывать данные.Пример: Принимаю условия акции <INPUT TYPE=checkbox NAME=agreementVALUE=”yes”>.Рисунок 5.4.Чтобы по умолчанию галочка стояла, необходимо добавить атрибут CHECKED.Зависимые переключатели служат для создания группы вариантов, из которыхможно выбрать только один, для его использования необходим атрибут RADIO. В данномслучае также необходимо использовать еще два атрибута – NAME и VALUE.

АтрибутNAME у всех значений должен быть одинаковым, а VALUE будет содержать значение,которое будет передано на обработку, при выборе данной кнопки.Пример: Да <INPUT TYPE=radio NAME=”agreement” VALUE=”yes”> Нет <INPUTTYPE=radio NAME=”agreement” VALUE=”no”>.Рисунок 5.5.Аналогично независимым переключателям, можно установить значение поумолчанию для одного из элементов посредством того же атрибута CHECKED.Атрибуты submit и reset позволяют создавать кнопки для отправки или очисткиформы соответственно. Для обоих случаев атрибут VALUE будет использоваться длясоздания надписей на кнопках.Пример:<INPUTTYPE=submitVALUE=Готово><INPUTTYPE=resetVALUE=Заново>.Рисунок 5.6.Для ввода большого количества текста бывает недостаточно тега INPUT, поэтомубыл предусмотрен тег TEXTAREA, который позволяет организовать ввод текста внесколько строк при помощи трех атрибутов COLS, ROWS и NAME.Атрибут COLS указывает количество символов, которые определяют ширинутекстовой области.

Атрибут ROWS задает количество строк поля, а атрибут NAMEопределяет названия поля. Внутри тега-контейнера TEXTAREA можно указать некоторыйтекст, который будет выводиться по умолчанию.Пример: <TEXTAREA NAME=message COLS=40 ROWS=5> Текст по умолчанию</TEXTAREA>.Рисунок 5.7.Последним рассмотренным элементом формы являются списки.

Они бывают сединственным возможным выбором и с выбором нескольких альтернатив. В обоихслучаях список создается при помощи тега SELECT. Если указан атрибут MULTIPLE, тосписок с множественным выбором, в противном случае можно выбрать только одинвариант. Варианты выбора задаются тегом OPTION. При отправке будет переданозначение VALUE выбранного или выбранных элементов.

Если атрибут VALUE не указан,то будет передаваться значение, заключенное в тег OPTION. Атрибут NAMEсоответственно определяет название элемента. Существует еще необязательный параметрSIZE ,если он равен 1, то список выпадающий, если он не указан, то список занимаетнекоторое количество строк и оснащен полосой прокрутки. Здесь также можно указатьзначение по умолчанию – для этого необходимо добавить атрибут SELECTED в тегOPTION.Пример:<SELECT NAME=day SIZE=1><OPTION VALUE=1 selected>Понедельник</OPTION><OPTION VALUE=2>Вторник</OPTION><OPTION VALUE=3>Среда</OPTION><OPTION VALUE=4>Четверг</OPTION><OPTION VALUE=5>Пятница</OPTION><OPTION VALUE=6>Суббота</OPTION><OPTION VALUE=7>Воскресенье</OPTION></SELECT>Рисунок 5.8.<SELECT NAME=day SIZE=1 multiple><OPTION VALUE=1>Россия</OPTION><OPTION VALUE=2>Белоруссия</OPTION><OPTION VALUE=3>Грузия</OPTION><OPTION VALUE=4>Казахстан</OPTION><OPTION VALUE=5>Украина</OPTION></SELECT>Рисунок 5.9.Тема 7.

ФреймыИспользование фреймов – это способ разделения веб-страницы на несколько окон.При этом в каждом окне будет отображаться своя страница, но допускаются ссылки изодного окна в соседнее. Обычно такая технология используется для отображения меню,которое постоянно должно находиться на экране.Для создания страниц с фреймами используется два типа страниц – страницысодержания и страницы настройки фреймов. Страница содержания (content page)содержит весь необходимый контент страницы – текст, графику и т.д. Страницанастройки (frameset page) служит для разделения окна браузера на подокна и определяет,какая именно страница будет в этом подокне. На таких страницах не содержится никакойграфики и текста, кроме «служебной» информации. Все «лишние» теги браузерпроигнорирует.Для построения страницы настройки используются два типа тегов - <FRAMESET>и <FRAME>.

Внутри тега-контейнера <FRAMESET> вставляется по одному тегу<FRAME> для каждого фрейма. Т.е. для разбивки окна на два фрейма используетсяследующий код:<HTML><HEAD><TITLE> </TITLE></HEAD><FRAMESET><FRAME><FRAME></FRAMESET></HTML>Обратите внимание, чтоб при создании страниц настройки не используется тег<BODY>, в то время как теги <HTML> и <HEAD> используются в прежнем значении.Чтобыуказатьбраузерувертикальноилигоризонтальноразбитьэкраниспользуется один из атрибутов тега <FRAMESET> COLS и ROWS соответственно.Значения этих атрибутов задается в пикселях или процентах, и определяют какая доляэкрана будет занята каждым из фреймов.Пример:<HTML><HEAD><TITLE> </TITLE></HEAD><FRAMESET ROWS=35%,65%><FRAME><FRAME></FRAMESET></HTML>Комментарий: пробелы между значениями атрибута ROWS не допускаются.Рисунок 6.1.Если вы используете абсолютные значения атрибутов, то можно задавать размертолько первого фрейма, а второй будет занимать все остальное пространство.

Для этого вкачестве второго значения вводится звездочка.Пример: <FRAMESET ROWS=200,*>Чтобы наполнить фреймы страницами содержания используется атрибут SRC втеге <FRAME>, где значением будет URL страницы, которую необходимо показать вофрейме.Например:<HTML><HEAD><TITLE> </TITLE></HEAD><FRAMESET ROWS=35%,65%><FRAME SRC=up.html><FRAME SRC=down.html></FRAMESET></HTML>Рисунок 6.2.Если в одном или нескольких фреймов содержится ссылка, то появляетсянеобходимость указать, в каком из фреймов должна открыться новая страница.

Для этогонеобходимо указать имя для каждого из фреймов при помощи атрибута NAME тега<FRAME>.Пример:<HTML><HEAD><TITLE> </TITLE></HEAD><FRAMESET ROWS=35%,65%><FRAME SRC=up.html NAME=up><FRAME SRC=down.html NAME=down></FRAMESET></HTML>После этого можно загружать новую страницу в любой из фреймов, указав в теге<A> атрибут TARGET, где значением будет имя фрейма.Пример: <A HREF=link.html TARGET=down>Link</A>.У атрибута TARGET уже есть готовые значения: _self (загружает новую страницу втот же фрейм, в котором находится ссылка), _top (загружает новую страницу в целоеокно), _blank (загружает новую страницу в новом окне).Чтобы использовать одинаковое значение TARGET для всех ссылок используетсятег <BASE TARGET=”имя фрейма или значение”>, который указывается в контейнере<HEAD>.Кроме вышеперечисленных атрибутов тег <FRAME> может использовать иследующие: NORESIZE, SCROLLING и BORDER (или FRAMEBORDER).

Все они служатдля украшения фреймов.NORESIZE используется для того, чтобы пользователь не мог изменить размерфреймов; атрибут SCROLLING имеет два значения yes и no, которые соответственноопределяют, будет во фрейме полоса прокрутки или нет; BORDER (для Netscape) иFRAMEBORDER (для Internet Explorer) при значении равном нулю не показывает границумежду фреймами.Если браузер не поддерживает работу с фреймами, необходимо использовать тег<NOFRAMES>, в котором может быть размещен контент, который будет отображатьсябраузером в случае, если он не может показать фреймы.<HTML><HEAD><TITLE> </TITLE></HEAD><FRAMESET ROWS=35%,65%><FRAME SRC=up.html NAME=up><FRAME SRC=down.html NAME=down><NOFRAMES><A HREF=noframes.html>Ссылка на страницу без фреймов</A>.</NOFRAMES></FRAMESET></HTML>Если же необходимо использовать разделение экрана по вертикали и погоризонтали, то используйте следующую схему:<HTML><HEAD><TITLE> </TITLE></HEAD><FRAMESET ROWS=35%,65%><FRAME SRC=up.html NAME=up><FRAMESET COLS=50%,50%><FRAME SRC=right.html NAME=right><FRAME SRC=left.html NAME=left></FRAMESET></FRAMESET></HTML>Рисунок 6.3.Тема 8.

Таблицы стилейОсновы CSSCSS (англ. Cascading Style Sheets - каскадные таблицы стилей) – это язык,встраиваемый в HTML, имеющий свой собственный синтаксис, ориентированный наописание формы представления элементов WEB-страницы, существенно расширяющийвозможности HTML. CSS - это способ полностью определять и контролировать формупредставления элементов HTML, такие как размер и очертание графических элементов,цвет и шрифт текста, выравнивание, которые могут применяться не ко всему документу, ак конкретному блоку.При помощи таблицы стилей можно заранее предопределить, как будет выглядетькакой-либо из элементов разметки, и в последующем избежать многочисленныхисправлений.Рассмотрим небольшой пример из предыдущей главы:<HTML><HEAD><TITLE>Пример заголовков</TITLE></HEAD><BODY><H1>Учебное пособие</H1></BODY></HTML>Предположим, что нам нужно изменить размер шрифта в заголовке <H1>.

Этоможно сделать следующим способом:<FONT SIZE=3>Учебное пособие</FONT>Но если таких заголовков несколько, то придется прописывать тег <FONT> длякаждого из них. В этом случае удобнее воспользоваться таблицей стилей. Наш примербудет выглядеть следующим образом:<HTML><HEAD><TITLE>Пример заголовков</TITLE><STYLE>H1{font-size:28pt}</STYLE></HEAD><BODY><H1>Учебное пособие</H1></BODY></HTML>Данный пример демонстрирует нам одну из немногих возможностей таблицстилей.