Форматирование символов

Элемент <EM> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <EM> Текст </EM> Пример: Текст выделенный тэгами <EM> и </EM>

Элемент <CODE> используется с целью дополнительного выделения фрагментов программного кода. По умолчанию он отображается телетайпным шрифтом. Данный элемент предпочтительнее, чем элемент <TT> (телетайпный шрифт). Поскольку расположение пробелов существенно для чтения программного кода, элемент <CODE> целесообразно употреблять в сочетании с элементом <PRE>. Синтаксис: <CODE> листинг кода </CODE>

Пример: Текст выделенный тэгами <CODE> и </CODE>

Элемент <KBD> используется с целью выделения диалога пользователя с компьютером . Синтаксис: <KBD> Ввод с клавиатуры </KBD>

Пример: Текст выделенный тэгами <KBD> и </KBD>

Элемент <VAR> используется с целью дополнительного выделения переменных в коде совместно с элементом <CODE>. Синтаксис: <VAR> Переменная </VAR>

Пример: Текст выделенный тэгами <VAR> и </VAR>

Элемент <SAMP> используется с целью выделения диалога пользователя с компьютером. Синтаксис: <SAMP> Системное сообщение компьютера </SAMP>

Пример: Текст выделенный тэгами <SAMP> и </SAMP>

Элемент <DFN> используется с целью обозначения терминов и определений по типу словарей или глоссариев. Синтаксис: <DFN> Текст </DFN>

Пример: Текст выделенный тэгами <DFN> и </DFN>

Элемент <CITE> используется с целью обозначения источника информации ,из которого взята цитата. Синтаксис: <CITE> Текст </CITE>

Пример: Текст выделенный тэгами <CITE> и </CITE>

Элемент <STRONG> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <STRONG> Текст </STRONG>

Пример: Текст выделенный тэгами <STRONG> и </STRONG>

Элемент <I> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <I> Текст </I> Пример: Текст выделенный тэгами <I> и </I>

Элемент <B> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <B> Текст </B> Пример: Текст выделенный тэгами <B> и </B>

Элемент <U> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <U> Текст </U> Пример: Текст выделенный тэгами <U> и </U>

Элемент <STRIKE> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <STRIKE> Текст </STRIKE>

Пример: Текст выделенный тэгами <STRIKE> и </STRIKE>

Элемент <TT> используется с целью выделения особым телетайпным шрифтом слова или текста. Синтаксис: <TT> Текст </TT> Пример: Текст выделенный тэгами <TT> и </TT>

Элемент <SUP> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <SUP> Текст </SUP> Пример: Текст ^{выделенный тэгами} <SUP> и </SUP>

Элемент <SUB> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <SUB> Текст </SUB> Пример: Текст _{выделенный тэгами} <SUB> и </SUB>

Элемент <BIG> используется с целью выделения особым шрифтом слова или текста относительно основного текста. Синтаксис: <BIG> Текст </BIG>

Пример: Текст выделенный тэгами <BIG> и </BIG>

Элемент <SMALL> используется с целью выделения особым шрифтом слова или текста относительно основного текста. Синтаксис: <SMALL> Текст </SMALL>

Пример: Текст выделенный тэгами <SMALL> и </SMALL>

Элемент <BLINK> используется с целью выделения особым шрифтом слова или текста относительно основного текста. Синтаксис: <BLINK> Текст </BLINK>

Пример: Текст выделенный тэгами <BLINK> и </BLINK>

Элемент <FONT> используется с целью выделения особым шрифтом слова или текста. С ним применяются два атрибута size и color. Некоторые браузеры поддерживают атрибут face, позволяющий задать любой из перечня шрифтов, если браузер не находит заданный шрифт - то используется шрифт, заданный по умолчанию.

Синтаксис: <FONT size=n color="цвет"> Текст </FONT> или

<FONT face=имя color="цвет"> Текст </FONT>

Элемент <BASEFONT> используется как альтернатива атрибуту size элемента <FONT>, он позволяет задать базовый размер шрифта во всем документе и не имеет конечного тега. По умолчанию значение его задается равным 3 ,значение size может выражаться так же и относительным размером, например, размер -1 означает размер на один меньший, чем по умолчанию. Синтаксис: <BASEFONT size=n>

Элемент <ABBR> используется с целью логического выделения слова, обозначающего аббревиатуру, например ФСБ, FBI , HTML , WWW, MTV Синтаксис: <ABBR>ФСБ</ABBR>

Элемент <ACRONYM> используется с целью логического выделения слова, обозначающего акроним, например GmBH, Ltd., и т.д., и т.п.,

Синтаксис: <ACRONYM>Ltd.</ACRONYM>

Элемент <INS> используется с целью выделения особым шрифтом слова или текста, когда требуется показать явно, что текст был вставлен после опубликования документа.

Синтаксис: <INS>текст</INS> Пример: Текст выделенный тэгами <INS> и </INS>

Элемент <DEL> используется с целью выделения особым шрифтом слова или текста, когда требуется показать явно, что текст был удален после опубликования документа.

Синтаксис: <DEL>текст</DEL> Пример: Текст <DEL> и </DEL>

Элемент <Q> используется с целью логического выделения краткой цитаты, встроенной в текст. Поддерживает атрибут lang и в зависимости от особенностей языка соответственно помечает цитату. Синтаксис: <Q lang="ru">текст</Q>

 

Создание таблиц

 

Элемент <TABLE> используется с целью внедрения таблиц в Web страницу. Они удобны тем, что браузер сам прорисовывает рамку таблицы. Размер рамки может задаваться, как фиксировано, так и автоматически согласовываться с размерами окна просмотра браузера и с размерами, находящегося в ячейках текста и рисунков. Кроме того таблицы позволяют решать чисто дизайнерские задачи: выравнивать части таблицы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на колонки и т.д.

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

По правде говоря само по себе использование таблиц для визуального форматирования есть нарушение того принципа, которого рекомендует придерживаться W3C - таблицы должны использоваться только для внедрения таблиц, а позиционировать элементы необходимо при помощи слоев. При создании таблиц используется принцип вложения: между тэгами <TABLE> и </TABLE> задается заголовок вне рамки таблицы <CAPTION>, создается ряд элементов <TR>, определяющих начало строки, а внутри этих элементов размещаются элементы <TD>, описывающие ячейки и <TH>, описывающие заглавные ячейки.

Элемент <TABLE> может иметь атрибуты:Этот атрибут задает фоновый цвет ячейкам, которые не обладают собственным атрибутом bgcolor или background. <TABLE bgcolor=цвет>Этот атрибут задает фоновый рисунок ячейкам, которые не обладают собственным атрибутом bgcolor или background.

<TABLE background=URL файла изображения>

bordercolor Этот атрибут задает цвет рамки, используется только с атрибутом border. <TABLЕ border=число bordercolor=цвет >Этот атрибут задает цвет рамки, используется только с атрибутом border. <TABLE border=число bordercolorlight=цвет>Этот атрибут задает цвет рамки, используется только с атрибутом border. <TABLE border=число bordercolordark=цвет>Этот атрибут задает режим горизонтального выравнивания таблицы на странице, он может принимать значения left, center и right . <TABLE align= способ >Этот атрибут задает ширину таблицы в пикселях или процентах от всего окна. <TABLE или %>Этот атрибут задает ширину внешнего обрамления таблицы в пикселях. <TABLE border=число >Этот атрибут задает ширину внутреннего обрамления в пикселях. <TABLE сellspacing=число >

сellpadding Этот атрибут задает отступ между содержимым ячейки и обрамлением таблицы в пикселях. <TABLE сellpadding=число >Этот необязательный атрибут задает краткое описание таблицы для некоторых браузеров. <TABLE summary=описание >Этот атрибут задает линии между ячейками. <TABLE rules=all >Нет линий, значение используется по умолчанию.Линии отображаются только между группами строк THEAD, TFOOT, и TBODY или группами столбцов COLGROUP и COL.Линии отображаются только между строками.Линии отображаются только между столбцами.Линии отображаются между строками и столбцами.Этот атрибут указывает, какие стороны кадра, окружающего таблицу, будут видимы. <TABLE frame=void> Возможные значения:Сторон нет. Это значение используется по умолчанию.Только верхняя часть.Только нижняя часть.Только верхняя и нижняя часть.Только левая и правая части.Только левая часть.Только права часть.Все четыре части.Все четыре части.Этот атрибут задает имя для ссылки. <TABLE id=имя>

Элемент <COL> используется с целью задания колонок таблицы, может иметь атрибуты:Этот атрибут задает ширину ячеек в колонке. <COL атрибут задает цвет фона ячеек. <СOL bgcolor= цвет >Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right . <СOL align= способ >Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху. <СOL атрибут задает имя для ссылки. <COL id=имя>

Элемент <COLGROUP> используется с целью задания групп колонок таблицы, может иметь атрибуты:Этот атрибут задает цвет фона ячеек. <COLGROUP bgcolor= цвет >Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right . <COLGROUP align= способ >Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху. <COLGROUP атрибут задает количество колонок в группе. <COLGROUP span=число>Этот атрибут задает ширину ячеек в колонках. <COLGROUP атрибут задает имя для ссылки. <COLGROUP id=имя>

Элемент <THEAD> используется с целью логического задания групп строк для верхней "шапки". <THEAD ><TR ><TD >...<TD >...</THEAD>Этот атрибут задает цвет фона ячеек. <THEAD bgcolor= цвет >Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right . <THEAD align= способ >Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху. <THEAD атрибут задает имя для ссылки. <THEAD id=имя>

Элемент <TBODY> используется с целью логического задания групп строк "тела" таблицы. <TBODY ><TR ><TD >...<TD >...</TBODY>Этот атрибут задает цвет фона ячеек. <TBODY bgcolor= цвет >Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right . <TBODY align= способ >Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху. <TBODY атрибут задает имя для ссылки. <TBODY id=имя>

Элемент <TFOOT> используется с целью логического задания групп строк для нижней "шапки". <TFOOT ><TR ><TD >...<TD >...</THEAD>

bgcolor Этот атрибут задает цвет фона ячеек.<TFOOT bgcolor= цвет >Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .<TFOOT align= способ >Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху. <TFOOT атрибут задает имя для ссылки. <TFOOT id=имя>

Элемент <TR> открывает строку определений ячеек и не требует конечного тэга, хотя такой элемент можно использовать для наглядности обозначения каждой строки, поддерживает атрибуты, которые задают стиль оформления всех ячеек в строке. Отдельные ячейки могут быть отформатированы иначе.Этот атрибут задает цвет фона ячеек. <TR bgcolor= цвет >Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right . <TR align= способ >Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху. <TR атрибут задает имя для ссылки. <TR id=имя>

Элемент <CAPTION> задает заголовок вне рамки таблицы, имеет атрибут align, который может принимать значения top и bottom, left и right, а также id - имя для ссылки. <CAPTION> текст </CAPTION>

Элемент <TH> задает ячейку, которая содержит заголовок, поддерживает атрибут id - имя для ссылки. <TH атрибуты > текст заголовка

Элемент <TD> определяет ячейку с даннымиЭтот атрибут задает цвет фона ячейки. <TD bgcolor= цвет >Этот атрибут задает ширину ячейки в пикселях или %. <TD width= число или % >Этот атрибут задает высоту ячейки в пикселях. <TD height=значение>Этот атрибут задает объединение соседних ячеек столбца в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство. <TD rowspan=количество строк >Этот атрибут задает объединение соседних ячеек строки в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство. <TD colspan=количество колонок >Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right . <TD align= способ >Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху. <TD атрибут блокирует автоматический перенос по словам в пределах ячейки в зависимости от других параметров таблицы. Аналогичного результата можно достичь при помощи замены обычных пробелов на неразрывный мнемонический объект &ampnbsp;Этот атрибут задает имя для ссылки. <TD id=имя>

Создание форм HTML

 

Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <FORM></FORM>:

Элемент <FORM> является необходимым условием для всех форм. Он может иметь следующие атрибуты:Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.

Синтаксис формы для сценария:

<FORM method="get" или "post" action="URL сценария" ></FORM>

Синтаксис формы для почты:<FORM method="get" или "post" action="mailto:адрес" ></FORM>

Элемент <INPUT> является базовым для всех элементов формы. Он используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:Однострочное текстовое поле, используется для ввода информации, которую нельзя ввести ни в одном из остальных элементов формы. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. Элемент может иметь атрибуты:. Задаёт максимально допустимую длину вписываемого значения в символах.. Задаёт максимально допустимую длину поля в символах.. Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Shopping">

-   PASSWORD Однострочное поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:. Задаёт максимально допустимую длину вписываемого значения в символах.. Задаёт максимально допустимую длину поля в символах.. Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20">

-   HIDDENЕще один тип скрытого ввода информации. Позволяет пересылать сценариям информацию, которая не может быть изменена пользователем. Некоторые программы CGI используют скрытые поля для передачи информации из одной страницы в другую, например, имя или номер. Такой подход существенно облегчает работу пользователя, избавляя его от необходимости повторного ввода данных. Например, для пересылки файла с исходным кодом HTML используется следующая конструкция: <INPUT type="HIDDEN" name="file" value="anyfile.html">

    CHECKBOXФлажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:. Задаёт начальный статус флажка по умолчанию.. Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="checkbox" name="send_mail" value="yes" checked>

-   RADIO Переключатели во многом напоминают флажки, отличаясь лишь более широкими функциональными возможностями выбора. В группе переключателей может быть выбран лишь один. Для каждого переключателя указывается отдельный элемент INPUT.

    SUBMIT Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе <FORM>. C помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значения. Синтаксис:

<FORM method="get" или "post" action="mailto:[email protected]"> <INPUT type="submit" value="послать"></FORM>

-   RESET Кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value.

Синтаксис: <INPUT type="reset" value="очистка">

-   IMAGE Во многом похож на кнопку SUBMIT, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:. Задаёт URL файла с изображением.. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.. Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.

Синтаксис: <INPUT type="image" src="knopka.gif">

-   BUTTON Создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.

Синтаксис: <INPUT type="button"value="кнопка">

-   FILE Создает управляющий элемент выбор файла. Синтаксис: <INPUT type="file">

    ACCESSKEY Задает кнопку, при нажатии которой происходит обработка поля. Синтаксис: <INPUT accesskey="a">

    ID Задает имя для ссылки. Синтаксис: <INPUT id="имя">

    SIZE Задает ширину элемента в пикселях. Синтаксис: <INPUT size="число">

    DISABLED Отключает возможность изменять содержимое поля или положение кнопки. Синтаксис: <INPUT disabled">

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

Синтаксис:

<FORM><H3>Введи текст <TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста </TEXTAREA></H3><INPUT type="reset" value="очистка"></FORM>

Элемент <SELECT> может принимать форму раскрывающегося списка или меню элементов. Имеет вложенный тэг <OPTION> и атрибуты:. Задаёт имя.. Задаёт максимальное количество элементов списка, одновременно отображаемых на экране.. Задаёт возможность одновременного выбора нескольких значений.

Элемент же <OPTIONS> задает возможные варианты выбора меню <SELECT> Синтаксис: <OPTION value="n" selected>значение

Имеет атрибуты:. Задаёт изначально выбранное слово.. Задаёт значение выбранного слова для сценария.

Элемент <OPTGROUP> применяется для логической группировки элементов <OPTION> внутри тэга <SELECT> имеет атрибут label:

Синтаксис:

 

<SELECT size=1>

<OPTGROUP label="Первая группа">

<OPTION selected value=1>Выберите:</OPTION>

<OPTION value=2> Первый</OPTION>

<OPTION value=3> Второй</OPTION>

</OPTGROUP><OPTGROUP label="Вторая группа">

<OPTION value=4>Третий</OPTION> <OPTION value=5> Четвертый</OPTION></OPTGROUP>

</SELECT>

 

Элемент <ISINDEX>Это самый простой элемент, позволяющий создать подобие формы и ввода строки, содержащей текст и генерации запроса.

Пример: <ISINDEX prompt=" строка для ввода критерия поиска"> Допустим что на текущей странице задан базовый URL при помощи элемента <BASE href="URL поискового средства в Internet"> тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет запрос для поисковой машины сервера в виде: http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков ? и +,поиск будет осуществлен.

Элемент <BUTTON> является альтернативой элементу <INPUT> с более богатыми возможностями - например, с заданием альтернативного текста. Синтаксис: <BUTTON ><IMG src=...></BUTTON>задает имя элементу.задает значение элементу.при использовании в качестве кнопки принимает значения: button, submit и reset.делает недоступным данный элементопределяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.задает клавишу доступа.задает имя для ссылки.

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

Элемент <FIELDSET> позволяет логически группировать элементы формы. Синтаксис: <FIELDSET> имя</FIELDSET>

Элемент <LEGEND> позволяет давать наименования логическим группам элементов формы. Синтаксис: <LEGEND> имя</LEGEND>

 

 

Основы DYNAMIC HTML

- это набор нововведений в Microsoft Internet Explorer 4.0, которые позволяют автору страницы динамически менять стили, содержание и оформление страницы, создавать интерактивные документы, реагирующие с пользователем в реальном масштабе времени. Короче, DHTML - это красота в Web страницах.

 

Динамические стили

 

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

Каждый объект HTML имеет набор свойств, определяющих его внешний вид. Все они объединены в подмножестве Style. Доступ к этим свойствам можно получить двумя путями: через язык HTML - общепринятый набор описаний для HTML документа, или через несколько других Web-языков - JavaScript, JScript или VBScript. Если учесть, что перые два - практически одно и тоже, то остается, что выбор не так уж и велик. Поскольку язык JScrript является (на мой вкус) самымы легким, а также самым распространенным, далее в этом документе будет употреблен именно он. При этом, так как мы не собираемся вдаваться в дебри программирования на новом незнакомом языке, его изучению здесь не будет придано очень пристального внимания, а только приведены самые элементарные примеры его использования. Итак, с помощью динамических стилей вы можете менять любое визуальное свойство объекта - цвет, размер, видимость и многое другое. Производить эти операции легко с помощью Script языков, в нашем случае это будет JScript.