Язык разметки HTML

1.     Язык разметки гипертекста HTML. История, развитие и перспективы HTML.

2.     Структура HTML-документа, основные теги. Конструкции SGML, используемые в HTML.

Раздел документа HEAD

Раздел документа BODY

Основные теги HTML

3.     Основные типы данных HTML (информация о символах, цветах, длинах, URI, типах содержимого и т.д.).

Основные типы SGML

Текстовые строки, URI, цвета, длины

Типы содержимого (типы MIME), типы ссылок, дескрипторы носителей

4.     Стиль в документах HTML. Внешние таблицы стилей. Каскады таблиц стилей.

Спецификации CSS

Основные принципы CSS

Синтаксис CSS.

Подключение стиля к станице

5.     Фреймы.

6.     Формы.

7.     Скрипты.

 

1.    Язык разметки гипертекста HTML. История, развитие и перспективы HTML.

HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») — это стандартный язык разметки документов во Всемирной паутине. Практически все веб-страницы создаются при помощи языка HTML или его последователя — XHTML.

Формально, HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

И HTML и XML произошли от SGML. HTML это некоторое приложение SGML, а XML это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. Другими приложениями SGML является SGML Docbook (документирование), и «Z Format» (типографика и документирование).

Язык HTML позволяет размечать в тексте:

 

 

2.    Структура HTML-документа, основные теги. Конструкции SGML, используемые в HTML.

Первым тегом с которого следует начинать описание HTML-документа, является тег <html></html>. Эти теги обозначают что находящиеся между ними строки представляют единый HTML-документ. Сам по себе документ представляется обыкновенным ASCII-файлом. Без этих тегов браузер или другая программа просмотра, возможно будет не в состоянии идентифицировать формат документа и правильно его интерпретировать. Чаще всего тег <html> используется без параметров (в версии HTML 4.0).

В стандарте HTML 4.01 перед тегом <html> необходимо указывать специальный тег DOCTYPE. Браузеры используют doctype для того, чтобы оценить как рассматривать разметку документа text/html. Этот метод основан на определении объявления типа документа (или его отсутствия) в начале HTML документа. Он бывает нескольких видов:

·        Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated). Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

·        Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

·         С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 

Раздел документа HEAD

Раздел документа HEAD определяет его заголовок и не является обязательным тегом, однако хорошо составленный заголовок может быть весьма полезен. Задачей заголовка является предоставление необходимой информации для программы, интерпретирующей документ. Теги, находящиеся внутри раздела HEAD (кроме названия документа, описываемого с помощью тега <title>) не отображаются на экране.

Раздел заголовка открывается тегом <head> и закрывается тегом </head>. Между упомянутыми тегами располагаются остальные теги раздела заголовка.

Тег-контейнер <title> является единственным обязательным тегом заголовка и служит для того, чтобы дать документу название. Оно обычно отображается в заголовке окна браузера. По умолчанию текст названия документа используется при создании закладки для документа.

 

Тег <base> служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер. Тег имеет один обязательный атрибут href, после которого указывается полный URL-адрес документа (<base href=”www.myhost.ru/docs”>).

 

Тег <link> указывает на связь документа, содержащего данный тег и другого документа или объекта. Заголовок документа может содержать любое количество тегов <link>. Например:

<link rel="stylesheet" type="text/css" media="print" href="/skins-1.5/common/commonPrint.css" />

Атрибут rel определяет отношение между текущим и другим документом (в данном примере это документ таблицы стилей). Атрибут type указывает тип и параметры присоединенной таблицы стилей. Атрибут media конкретизирует способ отображения страницы (те какая таблица стилей будет применяться), в данном случае страница выводится для печати. Href отвечает за ссылку на присоединяемый файл. Также используются некоторые другие атрибуты.

 

Тег <meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <HEAD>. Как правило, параметры любого метатега сводятся к парам «имя=значение», которые определяются аргументами content, name или http-equiv.

·        content – Устанавливает значение параметра, заданного с помощью name или http-equiv.

·        http-equiv – Предназначен для конвертирования метатега в заголовок HTTP.

·        name – Имя метатега, также косвенно устанавливает его предназначение.

Приведем несколько примеров использования тега <meta>:

<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html;m charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

 

В разделе заголовка документа могут присутствовать еще два тега – <style> и <script>. Их назначение связанно с использованием таблиц стилей в документе и записью скриптов.

 

Раздел документа BODY

   Элемент <BODY> предназначен для хранения содержания веб-странице (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег <BODY> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство параметров до сих пор поддерживается разными браузерами.

Часто тег <BODY> используется для размещения обработчика событий, например, onLoad, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги <BODY> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа. [4]

Основные теги HTML

Ниже, в таблице перечислены наиболее часто используемые теги HTML.

Таблица №2: Основные теги HTML

Синтаксис

Описание действия тега

<a href="URL">

...

</a>

<a name="indent">

...

</a>

 

Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь. Где indent – идентификатор

<img src="URL">

Тег <IMG> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с изображением.

<p>Текст

<p>Текст</p>

Определяет текстовый параграф. Тег <P> является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком.

<ul>

<li>элемент списка</li>

</ul>

<ol>

<li>элемент списка</li>

</ol>

Тег <LI> определяет отдельный элемент списка. Внешний тег <UL> или <OL> устанавливает тип списка — маркированный или нумерованный.

<div>

...

</div>

Элемент <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега <DIV> всегда начинается с новой строки. После него, также, добавляется перенос строки.

 

 

 

<h1>

Заголовок 1 уровня

</h1>

………

<h6>

Заголовок 6 уровня

</h6>

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <H1> представляет собой наиболее важный заголовок первого уровня, а тег <H6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <H1>:<H6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей.

<map name=...>

  <area ...>

</map>

Тег <MAP> служит контейнером для элементов <AREA>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега <MAP> — в связывании тега <IMG> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге <IMG>, задаваемого параметром usemap, так и в теге <MAP>, устанавливаемого атрибутом name.

<span>

  ...

</span>

Тег <SPAN> предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри параграфа (тега <P>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <SPAN> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.

Текст <br> текст

Тег <BR> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <P>, использование тега BR не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью параметра clear тега <BR> можно сделать так, чтобы следующая строка начиналась ниже элемента.

 

<iframe>

...

</iframe>

Тег <IFRAME> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы. Тег <IFRAME> является контейнером, содержание которого игнорируется браузерами, не поддерживающих данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <IFRAME> и </IFRAME>.

 

3.    Основные типы данных HTML (информация о символах, цветах, длинах, URI, типах содержимого и т.д.).

Значения атрибутов в языке HTML могут иметь различные типы данных. Основными типами данных являются следующие.

Основные типы SGML

В определении типа документа определяется синтаксис содержимого элемента HTML и значений атрибутов с использованием меток SGML. Вот обобщенная информация о ключах:

CDATA - это последовательность символов из набора символов документа, она может включать character entities (сущности). Агенты пользователей (браузеры) должны интерпретировать значения атрибутов следующим образом:

·        Заменять сущности на символы,

·        Игнорировать перевод строки,

·        Заменять каждый возврат каретки или табуляцию на один пробел.

 

Агенты пользователей могут игнорировать пробелы в начале и в конце значений атрибута CDATA (например, "   text   " интерпретируется как "text"). Авторы не должны объявлять значения атрибутов с пробелами в начала или в конце.

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

Значения типа IDREF и IDREFS указывают на идентификаторы, т. е. на значения атрибута id других элементов. Значение типа IDREF - это единственный идентификатор, а значение типа IDREFS - это список идентификаторов, разделенных пробелами. IDREF и IDREFS зависят от регистра.

Метки NUMBER должны содержать по крайней мере одну цифру ([0-9]).

Текстовые строки, URI, цвета, длины

Ряд атрибутов принимают текст, который предназначается для чтения людьми. Это текстовые стороки.

Значения атрибутов типа URI - это унифицированные идентификаторы ресурсов (полные или относительные), синтаксис которых должен соответствовать синтаксису URI.

Значение атрибута типа "color"  относится к определениям цветов. Значение цвета может быть шестнадцатеричным числом системы RGB (которому предшествует знак диеза #) или одним из шестнадцати стандартных названий цветов. Названия цветов учитывают регистр.

К примеру, значения "#800080" и "Purple" оба означают пурпурный цвет.

 

HTML определяет три типа значений длины для атрибутов:

·        Пиксели  – это целое, представляющее число пикселей (на экране, на бумаге). Таким образом, значение "50" означает пятьдесят пикселей.

·        Длина – доля вертикального или горизонтального расстояния в процентах. Таким образом, значение "50%" означает половину доступного пространства.

·        Кратный размер – это либо целое число, задающее количество пикселей, либо доля в процентах от размера по горизонтали или вертикали, либо относительный размер вида , где  – целое число. При распределении пространства обозреватель сначала выделяет место для размеров, заданных в числах и процентах, а затем разделяет оставшееся пространство между элементами с относительными размерами. Элементу размером 3 будет выделено пространство в три раза большее, чем элементу размером 1. Значение * эквивалентно 1* и часто означает "заполнить оставшееся пространство".

Типы содержимого (типы MIME), типы ссылок, дескрипторы носителей

 

Примеры типов содержимого включают "text/html", "image/png", "image/gif", "video/mpeg", "audio/basic", "text/tcl", "text/javascript" и "text/vbscript".

Авторы могут использовать распознаваемые типы ссылок, указанные в таблице вместе с условными интерпретациями. Символы пробелов в типах ссылок не допускаются.

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

Авторы могут определить дополнительные типы ссылок, не описанные в этой спецификации. При этом они должны использовать профиль для указания соглашений, используемых для определения типов ссылок.

 

Таблица №6: Типы ссылок

Тип

Описание

Alternate

Обозначает альтернативные версии документа, в котором находится ссылка. Вместе с атрибутом lang означает переведенную версию документа. Вместе с атрибутом media означает версию, созданную для другого носителя.

Stylesheet

Обозначает внешнюю таблицу стилей. Подробнее см. раздел о внешних таблицах стилей. Используется вместе с типом ссылки "Alternate" для таблиц стилей, выбираемых пользователем.

Start

Обозначает первый документ в наборе. Этот тип ссылки сообщает поисковым машинам о том, какой документ автор считает началом набора.

Next

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

Prev

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

Contents

Обозначает документ, служащий содержанием. Некоторые агенты пользователей также поддерживают синоним ToC (из "Table of Contents").

Index

Обозначает документ, являющийся указателем текущего документа.

Glossary

Обозначает документ - глоссарий терминов, относящихся к текущему документу.

Copyright

Обозначает замечание об авторском праве для текущего документа.

Chapter

Обозначает документ, являющийся главой в наборе документов.

Section

Обозначает документ, являющийся разделом в наборе документов.

Subsection

Обозначает документ, являющийся подразделом в наборе документов.

Appendix

Обозначает документ, являющийся приложением в наборе документов.

Help

Обозначает документ, содержащий справку (более подробная информация, ссылки на другие информационные ресурсы и т.д.)

Bookmark

Обозначает закладку. Закладка - это ссылка на ключевую точку в расширенном документе. Атрибут title может использоваться, например, для пометки закладки. Необходимо учесть, что в каждом документе можно определить несколько закладок.

Alternate

Обозначает альтернативные версии документа, в котором находится ссылка. Вместе с атрибутом lang означает переведенную версию документа. Вместе с атрибутом media означает версию, созданную для другого носителя.

 

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

 

Таблица №7: Типы дескрипторов

Название

Описание дескриптора

screen

Предназначен для экранов компьютеров, не разделенных на страницы.

tty

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

tv

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

projection

Предназначен для проекторов.

handheld

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

print

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

braille

Предназначен для тактильных устройств с алфавитом Бройля.

aural

Предназначен для синтезаторов речи.

all

Для всех устройств.

 

4.    Стиль в документах HTML. Внешние таблицы стилей. Каскады таблиц стилей.

CSS (Cascading Style Sheetsкаскадные таблицы стилей) — технология оформления веб-страниц, элемент концепции DHTML. Таблицы (точнее — списки) CSS служат для оформления преимущественно HTML- и XHTML-документов, но иногда используются и для других документов, структурированных с помощью XML (например, в браузере «Mozilla» для оформления элементов графического интерфейса, XUL).

Спецификации CSS

Уровень 1 (CSS1)

Данная рекомендация W3C принята 17 декабря 1996, откорректирована 11 января 1999. Среди наиболее важных возможностей, предоставляемых этой рекомендацией, были:

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

·        Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.

·        Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (т.е. межстрочные отступы)

·        Выравнивание для текста, изображений, таблиц и других элементов.

·        Свойства блоков, такие как высоту, ширину, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

Уровень 2 (CSS2)

Данная рекомендация W3C принята 12 мая 1998. Построена на CSS1 с сохранением обратной совместимости.

Добавление к функциональности:

·        Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки

·        Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, монитор, принтер, КПК)

·        Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например, для слепых посетителей сайта)

·        Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати

·        Расширенный механизм селекторов

·        Курсоры

·        Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента

Уровень 2.1 (CSS2.1)

Рабочая версия W3C от 6 ноября 2006. Построена на CSS2, содержит исправления ошибок.

Уровень 3 (CSS3)

Рабочая версия.

Основные принципы CSS

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

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

Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу <H1>. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.

Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.

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

·        использование различных расширений HTML;

·        применение изображений вместо текста;

·        использование рисунков для контроля пустого пространства, так называемые распорки;

·        использование таблиц для верстки веб-страниц;

·        написание программных скриптов вместо использования HTML.

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

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

Синтаксис CSS.

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

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

Схематически это можно показать так:

Селектор, селектор

{

Свойство: значение;

Свойство: значение;

Свойство: значение;

}

Подключение стиля к станице

 

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

·        При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>

·        При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <style>

·        Внутренний стиль – является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей

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

 

5.    Фреймы.

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

Тег <frameset> обрамляет текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тега <frameset> только два возможных атрибута: row, задающий число строк, и cols задающий число столбцов. Между тегами <frameset> не требуется указания тега <body>, но его можно поместить между тегами <noframe> в конце фреймовой структуры. Между тегами <frameset> не должно быть никаких тегов или атрибутов, которые обычно используются между тегами <body>. Единственными тегами, которые могут находиться между ними, являются теги <frame>, <frameset> и <noframe>.

Приведем пример использования фреймов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>

<frameset cols="200,*">

<frame src="menuframe.html" name="MENU">

<frame src="information.html" name="INFORMATION">

</frameset>

</html>

6.    Формы.

Формы предназначены для обмена данными между пользователем и сервером.

Для указания браузеру где начинается и заканчивается форма, используется тег <form>. Между открывающим и закрывающим тегами <form> и </form> можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. Документ HTML может содержать несколько форм, но они не должны быть вложены одна в другую.

Любая форма содержит несколько параметров:

·        Элементы формы, которые представляют собой стандартные поля для ввода информации.

·        Кнопку отправки данных формы на сервер.

·        Адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы.

Чтобы указать браузеру куда и как отправлять данные формы используется два параметра:

·        action — адрес CGI-программы, которая принимает данные формы.

·        method — метод пересылки данных, содержащихся в форме, от браузера к веб-серверу. Может принимать два значения: GET и POST.

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

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

Привидем пример простой HTML-формы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 

<html>

<head>

 <title>Форма</title>

</head>

<body>

<form action="script.php" method="post">

<input type="text" name="" value="">

<input type="submit" value="Добавить">

</form>

 

</body>

</html>

7.    Скрипты.

Скриптовый язык (scripting language, также называют язык сценариев) — язык программирования, разработанный для записи «сценариев», последовательностей операций, которые пользователь может выполнять на компьютере. Простые скриптовые языки раньше часто называли языками пакетной обработки (batch languages или job control languages). Сценарии обычно интерпретируются, а не компилируются.

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

В веб-программировании скриптом называют программу, которая загружается вместе с текстом документа на компьютер пользователя и выполняется программой-браузером. С помощью скриптов реализуются самые разнообразные функции веб-сайтов. Например, с помощью сценария можно организовать проверку отправляемых пользователем на сервер данных (к примеру, через форму). Если информация не верна (вместо численных данных посланы текстовые и тп), то пользователь увидит предупреждение, выданное скриптом. Данная функция снимает нагрузку с сервера.

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

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

<script> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Параметр Language устанавливает язык программирования на котором написан скрипт (language="JavaScript | JScript | VBS | VBScript").

·        JavaScript – язык программирования JavaScript. К этому параметру часто еще присоединяют номер версии, например — JavaScript1.3.

·        JScript – разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.

·        VBS, VBScript – язык программирования VBScript основанный на Visual Basic. Является детищем Microsoft и поддерживается преимущественно браузером Internet Explorer.

Наиболее распространенным языком программирования скриптов является JavaScript.

Приведем пример HTML-страницы, с встроенным скриптом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<body>

 

<p>

<script language="JavaScript">

for (i=1; i<6; i++)

{

document.writeln("<p>");

document.writeln("Абзац"+i);

document.writeln("</p>");

}

</script></p>

 

</body>

</html>

 

 

Hosted by uCoz