History

Объект History обеспечивает доступ к списку ранее загружавшихся страниц

Host

Свойство host позволяет узнать или установить часть адреса (a href="hostname.html">host) и номер порта

Hostname

Свойство hostname позволяет узнать или установить часть адреса документа. Если это имя недоступно, то свойство возвращает пустую строку

Href

Свойство href позволяет узнать или установить полный адрес документа

JavaEnabled

Свойство javaEnabled позволяет узнать, поддерживает ли браузер Java. Свойство только для чтения. Может принимать два значения - Истина (True) или Ложь (False)

LastModified

Свойство lastModified позволяет узнать дату последней модификации документа. Широко используется веб-мастерами на своих страничках. Используя скрипт вам не придется вручную изменять дату изменения странички.

Length

Свойство length возвращает число записей в списке History

LinkColor

Свойство LinkColor позволяет узнать или устанавить текущий цвет ссылки. Задавать цвет можно как в формате RGB (напр."#008000"), так в символьном виде (напр. "green")

Методы объекта Window

Alert

Confirm

moveTo

Navigate

Open

Prompt

resizeTo

scrollBy

scrollTo

SetInterval

SetTimeOut

MimeType

Свойство mimeType возвращает тип MIME (Multipurpose Internet Mail Extension) объекта. Свойство только для чтения

MoveTo

Метод moveTo перемещает верхний левый угол окна на экране в заданную позицию

Синтаксис

window.moveTo(iX, iY)

Параметры

iXТребуется. Координата, определяющая смещение окна по горизонтали iYТребуется. Координата, определяющая смещение окна по вертикали

Пример

Переместим окно (верхний левый угол) центр экрана

Перемещаемся

function MoveMe() { window.moveTo (screen.width/2,screen.height/2); }

Примечание: Если вы проверяете пример в окне справочника, то для восстановления окна жмите кнопку Восстановить (или Развернуть) в верхнем углу справочника

Name

Свойство Name возвращает имя текущего окна

Пример

Показать имя

sub showname() 'Присвоим окну имя name="Мое окно" alert name end sub

Код для примера <script language="vbscript"> sub showname() 'Присвоим окну имя name="Мое окно" alert name

end sub </script>

Navigate

Метод Navigate позволяет переместиться на заданную страницу

Пример

Метод Navigate

sub NavigateShow() window.Navigate "close.html" end sub

Код для примера <script language="vbscript"> sub NavigateShow() window.Navigate "close.html" end sub </script>

Navigator

Объект Navigator обеспечивает информацией об используемом браузере

Объектная модель Internet Explorer

Объектная модель Internet Explorer представляет собой иерархию различных объектов, доступных через скрипты. В основном, объектная модель Internet Explorer совместима с объектными моделями других браузеров (напр., Netscape Navigator). Но надо помнить, что каждая новая версия Internet Explorer добавляет в эту модель новые объекты. Поэтому, если некоторые примеры у вас не заработают, значит ваш браузер не поддерживает эти объекты

Объектная модель Internet Explorer состоит из нескольких объектов, каждый из которых имеет свою область

Window

Document

Navigator

History

Location

Screen

Onload

Событие Onload возникает при загрузке данного HTML-документа. В обработке этого события вы можете поместить какой-нибудь код. Одним из способов создания обработчика события Onload является использование атрибута тега BODY. Ниже приводится пример обработчика события Onload, в котором вызывается процедура Loading

Пример

sub Loading() alert "Если Вы видите это сообщение, значит страница загрузилась" end sub

Код для примера <body language="vbscript" OnLoad="Loading">

OnUnload

Событие OnUnload возникает перед выгрузкой данного HTML-документа. В обработке этого события вы можете поместить какой-нибудь код. Одним из способов создания обработчика события OnUnload является использование атрибута тега BODY. Ниже приводится пример обработчика события OnUnload, в котором вызывается процедура UnLoading

Данное событие возникает при

закрытии окна переходе на другую страницу при вводе нового адреса или с использованием папки Избранное нажатии кнопок Вперед, Назад, Обновить, Домой использовании метода Close

Пример

sub UnLoading() alert "Если Вы видите это сообщение, значит сработало событие OnUnLoad" end sub

Код для примера <body language="vbscript" OnUnLoad="UnLoading">

Open

Метод Open открывает новое окно браузера с указанным адресом. Кроме указанного адреса, вы должны указать имя окна, а также можете использовать необязательные параметры для настройки внешнего вида открываемого окна

toolbar	boolean	Панель инструментов
location	boolean	Адресная строка
directories	boolean	Ссылки
status	boolean	Строка состояния
menubar	boolean	Меню
scrollbars	boolean	Полосы прокрутки, если документ больше окна
resizable	boolean	Возможность изменения размеров окна
width	integer	Ширина окна в пикселах
height	integer	Высота окна в пикселах
top	integer	Верхняя позиция окна в пикселах
left	integer	Левая позиция окна в пикселах

Пример

Откроем новое окно без панели инструментов, с меню и высотой окна в 100 пикселов

Метод Open

sub OpenShow() window.Open "close.htm", "myTest", "toolbar=no, menubar=yes height=100" end sub

Код для примера <script language="vbscript"> sub OpenShow() window.Open "close.htm", "myTest", "toolbar=no, menubar=yes height=100" end sub </script>

определяющая или устанавливающая имя хоста

sHostnameСтрока, определяющая или устанавливающая имя хоста и домена или IP-адрес

sURLСтрока, определяющая или устанавливающая адрес страницы

sURLОбязательный параметр - строка, определяющая новый адрес загружаемого документа

Parent

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

Пример

Показать родителя окна

sub showparent() 'Присвоим окну имя alert window.parent end sub

Нажми на кнопку для изменения

Просто ссылка в никуда

Нажми на кнопку для изменения цвета активной ссылки на зеленый

Изменить цвет активной ссылки
Какой цвет у активной ссылки?
sub NewLinkColor() 'Изменяем цвет ссылки document.alinkColor="green" end sub
sub WhatColor() 'получаем цвет ссылки alert document.alinkColor end sub

Узнаем имя приложения
Имя приложения
sub WhatName() ' получим имя alert navigator.appCodeName end sub

Узнаем имя приложения
Имя приложения
sub WhatName() ' получим имя alert navigator.appName end sub

Узнаем версию приложения
Версия приложения
sub WhatName() ' получим версию alert navigator.appVersion end sub

Узнаем размеры рабочей области экрана
Размеры экрана
sub SizeScreen() ' получим размеры экрана alert "Размеры экрана: "&screen.availWidth&"x"&screen.availHeight end sub

Изменить цвет фона
Sub NewBGColor()
Dim mycolor mycolor=prompt ("Какой цвет желаете?", "blue") ' Устанавливаем выбранный цвет document.bgColor=mycolor
End Sub

Нажми на кнопку для получения кодировки
Кодировка документа
function getchar() { alert (document.charset); }

Узнаем разрешение экрана
Разрешение экрана
sub WhatDepth() ' получим разрешение экрана alert screen.colorDepth end sub

Установим cookie для данной страницы
Установить Cookie
Получить Cookie
sub SetCookie() 'Установим cookie document.cookie="CHANGER" end sub
sub GetCookie() 'получим cookie alert document.cookie end sub

Cookie
sub IsCookie() alert navigator. cookieEnabled end sub

Нажми на кнопку для получения кодировки
Кодировка документа
function getchar() { alert (document.defaultCharset); }

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

Рекомендую попробовать white :-)

Изменить цвет текста
Sub NewFGColor()
Dim mycolor mycolor=prompt ("Какой цвет желаете?", "blue") ' Устанавливаем выбранный цвет document.fgColor=mycolor
End Sub

Примечание: Внутри справочника не работает. Создайте html-страничку и там проверяйте

Нажми на кнопку для получения даты создания файла
Когда создан файл?
sub WhenCreate() ' узнаем дату создания файла alert "Файл создан: " & document.filecreatedDate end sub

Примечание: Внутри справочника не работает. Создайте html-страничку и там проверяйте

Нажми на кнопку для получения размера файла
Какой размер файла в байтах?
sub WhatSize() ' узнаем размер файла alert "Размер файла: " & document.fileSize &" байт" end sub

Узнаем размеры экрана
Размеры экрана
sub SizeScreen() ' получим размеры экрана alert "Размеры экрана: "&screen.width&"x"&screen.height end sub

Узнаем host текущей страницы
host текущей страницы
function getHost()
alert document.location.host
end function

Показать хост
sub ShowHostName() ' Присвоим окну имя alert location.hostname end sub

Переходим на страницу, выбранную пользователем
Моя домашняя страница
Справочник по реестру
HTML в примерах

Java
sub IsJava() alert navigator. javaEnabled end sub

document.write " Данный документ был изменен " document.write document.lastmodified

Нажми на кнопку для получения количества записей
Количество записей
sub HowMany() 'получаем число записей alert history.length end sub

Просто ссылка в никуда

Нажми на кнопку для изменения цвета ссылки на зеленый

Изменить цвет ссылки
Какой цвет у ссылки?
sub NewLinkColor() 'Изменяем цвет ссылки document.linkColor="green" end sub
sub WhatColor() 'получаем цвет ссылки alert document.linkColor end sub

<script>
function getchar() { alert (document. mimeType); }
</script>

Нажми на кнопку для получения ссылающего документа
Referrer
function getref() { alert (document.referrer); }

Заменить
sub replace()
location.replace="ieobjmodel. html" end sub

Нажми на кнопку для получения заголовка формы
Какой заголовок у формы?
sub WhatTitle() 'получаем заголовок формы alert "Заголовок у формы " & vbcrlf & document.title end sub

Нажми на кнопку для получения даты создания файла
URL документа
function getURL() { alert (document.URL); }

User Agent
sub UsAgent() alert navigator. UserAgent end sub

Ссылка на ALinkColor
Сходи по ссылке - вернись назад,

и ты увидишь результат!
'Изменяем цвет ссылки document.vlinkColor="yellow"

Prompt

Метод Prompt выводит на экран диалоговое окно со строкой для ввода. Имеет два параметра. В первом обязательном параметре вы задаете текст запроса. Во втором необязательном параметре вы можете установить текст, выводимый в текстовом поле. Если вы не установили текст, то там выводится <undefined>

Пример

Метод Prompt

sub PromptShow() Dim retval retval = prompt ("Как тебя зовут?","заяц") alert "Ну, " & retval & ", погоди!" end sub

Код для примера <script language="vbscript"> sub PromptShow() Dim retval retval = prompt ("Как тебя зовут?","заяц") alert "Ну, " & retval & ", погоди!" end sub </script>

Referrer

Свойство referrer позволяет узнать адрес страницы, которая привела пользователя на текущую страницу. Свойство только для чтения. Свойство возвращает значение, если пользователь пришел на текущую страницу по ссылке с предыдущей страницы. В других случаях возвращается пустая строка. Также возвращается пустая строка при ссылки с защищенных узлов. Например, если страница PageA.htm имеет ссылку на PageB.htm, и пользователь щелкнул на ссылке, то document.referrer на PageB.htm вернет "PageA.htm". Но если пользователь находясь на странице PageA.htm, напечатает PageB.htm в адресной строке или использует Файл-Открыть в меню, чтобы попасть на PageB.htm, то document.referrer возвращает пустую строку.

Replace

Метод replace заменяет текущий документ, загружая другой документ с заданным URL. При этом заменяемый документ удаляется из объекта history

ResizeTo

Метод resizeTo устанавливает размер окна до заданных величин

Синтаксис

window.resizeTo(iWidth, iHeight)

Параметры

iWidthТребуется. Величина в пикселах, определяющая ширину окна iHeighТребуется. Величина в пикселах, определяющая высоту окна

Пример

Установим размер окна в половину экрана

Меняем размер

function MoveMe() { window.resizeTo (screen.width/2,screen.height/2); }

Screen

Объект Screen обеспечивает информацией об используемом экране пользователя

ScrollBy

Метод scrollBy производит скроллинг окна на экране на заданную величину относительно текущей позиции ползунка

Синтаксис

window.scrollBy(iX, iY)

Параметры

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

Пример

Прокрутим страницу вверх на 10 пикселов

Вверх

<a href="" onClick="scrollBy(0,-10); return false;">Вверх</a>

ScrollTo

Метод scrollTo производит скроллинг окна на экране на заданную величину

Синтаксис

window.scrollTo(iX, iY)

Параметры

iXТребуется. Координата, определяющая горизонтальный скроллинг в пикселах iYТребуется. Координата, определяющая вертикальный скроллинг в пикселах

Пример

Вернемся в начало страницы

Hаверх страницы

SetInterval

Метод SetInterval повторяет заданную операцию через заданное число миллисекунд

Пример

HTML-часы

Пример HTML-часов

sub PauseSec() ID = Window.setinterval("TimerFunc",1000,"vbscript") end sub

sub TimerFunc() mysample.innerText=time end sub

Код для примера <script language="vbscript"> sub PauseSec() ID = Window.setinterval("TimerFunc",1000, "vbscript") end sub

sub TimerFunc() mysample.innerText=time end sub </script>

SetTimeOut

Метод SetTimeOut включает таймер для вызова определенной функции через заданное число миллисекунд

Пример

Изменить текст

Данный текст изменится через 3 секунды после нажатия на кнопку

sub PauseSec() ID = Window.setTimeout("TimerFunc",3000, "vbscript") end sub

sub TimerFunc() mysample.innerText="Изменим Окна к лучшему" end sub

Код для примера <script language="vbscript"> sub PauseSec() ID = Window.setTimeout("TimerFunc",3000, "vbscript") end sub

sub TimerFunc() mysample.innerText="Изменим Окна к лучшему" end sub </script>

ShowBrowserUI

Метод ShowBrowserUI выводит заданное диалоговое окно

Синтаксис

vReturn = external.ShowBrowserUI(sUI, null)

Параметры

sUIТребуется. Строка, определяющая вид диалогового окна. Может иметь два значения:

LanguageDialog	Открывает окно Выбор языка
OrganizeFavorites	Открывает окно Упорядочить избранное

nullТребуется. Нулевое значение

Пример

Примечание: Внутри справочника не работает. Создайте html-страничку и там проверяйте

Выбор языка

Упорядочить избранное

Status

Свойство Status устанавливает текст в строке состояния (в нижней части страницы)

Пример

Изменить текст

sub NewStatusText() 'Изменяем текст status="Изменим Окна к лучшему!" end sub

Код для примера <script language="vbscript"> sub NewStatusText() 'Присвоим окну имя status="Изменим Окна к лучшему!" end sub </script>

Свойства объекта Document

ALinkColor

bgColor

charset

fgColor

fileCreatedDate

fileSize

lastModified

LinkColor

mimeType

referrer

Title

URL

VLinkColor

Свойства объекта Location

hash

host

hostname

href

pathname

port

protocol

Свойства объекта Navigator

appCodeName

appName

appVersion

cookieEnabled

javaEnabled

userAgent

Свойства объекта Screen

availHeight

availWidth

colordepth

height

width

Свойства объекта Window

name

parent

self top defaultstatus status

cleartimeout

Title

Свойство Title позволяет узнать заголовок окна. Только для чтения

URL

Свойство URL позволяет узнать или получить полный адрес для текущего документа. Аналогичен href объекта Location

UserAgent

Свойство userAgent возвращает строку, эквивалентную HTTP-заголовку user-agent. Свойство только для чтения. Не имеет свойства по умолчанию

VLinkColor

Свойство VLinkColor позволяет узнать или установить цвет ранее посещавшейся ссылки. Задавать цвет можно как в формате RGB (напр."#008000"), так в символьном виде (напр. "green")

Width

Свойство width позволяет узнать ширину экрана в пикселах

Window

На вершине объектной модели располагается Internet Explorer объект Window, который представляет собой окно текущего экземпляра Internet Explorer, в котором загружен HTML-документ. Свойства этого объекта обеспечивают доступ к другим объектам в объектной модели Internet Explorer

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

Пример

Показать имя

sub showname() 'Присвоим окну имя name="Мое окно" alert name end sub

Код для примера <script language="vbscript"> sub showname() 'Присвоим окну имя name="Мое окно" alert name end sub </script>

Aтрибуты

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

имени атрибута, например WIDTH

знак равенства (=)

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

Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя. Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. Предпочтительно использование двойных кавычек, так как для глаза человека бывает трудно отличить одинарные кавычки от символов, подобных символам акцентирования.

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

символов английского алфавита (A - Z, a - z)

цифр (0 - 9)

промежутков времени

дефисов (-)

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER". Ссылка на URL, например, HREF=foo.htm, допустима, однако, когда URL используется с атрибутами, он должен быть заковычен, например HREF="http://www.hut.fi/". Существуют некоторые броузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако, такую практику лучше не применять.

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

Если значение атрибута такое же, как его имя, может быть использован минимальный синтаксис атрибута. То есть <UL COMPACT="COMPACT"> можно сократить до <UL COMPACT>. Некоторые агенты пользователей (программы просмотра пользователя, броузеры) даже требуют минимизации для некоторых атрибутов (COMPACT, ISMAP, CHECKED, NOWRAP, , NOHREF). Так что лучше использовать минимизированный синтаксис там, где это возможно.

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

Что такое CSS

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

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

Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.

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

Чувствительность к регистру

Что касается имен тегов, атрибутов и большинства значений атрибутов, HTML нечувствителен к регистру. Вы можете, например, написать TITLE, или Title, или title, или даже tItLE, если Вам нравится.Но существуют и чувствительные к регистру конструкции языка, а именно:

escape последовательности (более официально называемые символьными объектами), которые начинаются знаком & (например, <)

URL, так как он может содержать наименования файлов, которые являются case чувствительными во многих операционных системах (например, в Unix).

Фильтры в DHTML

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

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

Таблица 1. Элементы к которым применяются фильтры

BODY	Всегда
BUTTON	Всегда
DIV	Если заданы ширина (свойство width), высота (свойство height) или элемент абсолютно позицирован
IMG	Всегда
INPUT	Всегда
MARQUEE	Всегда
SPAN	Если заданы ширина (свойство width), высота (свойство height) или элемент абсолютно позицирован
TABLE	Всегда
TD	Всегда
TEXTAREA	Всегда
TH	Всегда

Фильтры не применяются к следующим элементам HTML-страницы: апплеты, Java, IFRAME, SELECT, OPTION, P, EM, STRONG и ко всем заголовкам H1, H2 и т.д.

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

filter: имя_фильтра([параметры]);

а параметры фильтра, если они присутствуют, задаются с использованием синтаксиса именованных параметров функции:

имя_параметра=значение_параметра

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

К элементу можно применить несколько фильтров одновременно. В этом случае они задаются в виде списка с пробелом в качестве разделителя:

В данном примере к графическому изображению применяются два фильтра: первый (blur) размазывает изображение на глубину в 50 пикселов, а второй (fliph) просто зеркально его отображает в горизонтальном направлении.

В Internet Explorer'e реализовано большое число разнообразных фильтров. В таблице 2 представлены все фильтры с кратким описанием их воздействия на визуализацию элементов.

Таблица Фильтры и их краткие описания

alpha	Устанавливает уровень непрозрачности объекта
blur	Создаёт эффект размытия изображения
chroma

< Делает прозрачными пикселы заданного цвета

dropshadow	Рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень
flipH	Переворачивает объект горизонтально
flipV	Переворачивает объект вертикально
glow	Добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта
gray	Удаляет цветовую гамму объекта и отображает его в серых тонах
invert	Меняет оттенок, насыщение и яркость объекта на противоположные
light	Подсвечивает объект
mask	Отображает текст так, как будто он выделен мышью
shadow	Рисует силует объекта вдоль одной из его границ в заданном направлении, создавая эффект тени
wave	Синусоидальное искривление объекта в вертикальном направлении, создавая эффект волнообразной поверхности
xray	Изменяет глубину цвета объекта и после этого отображает его в чёрно-белых тонах, имитируя рентгеновский снимок объекта

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

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

Определить, какие фильтры применены к элементу, можно с помощью набора filters соответсвующего объекта. В нём хранятся ссылки на все применяемые к элементу фильтры: <IMG ID=picture SRC="picture.gif" STYLE="filter:wave(strength=100) gray() fliph()>

...........

<SCRIPT>

strengthWave=picture.filters.wave.strength;

if( picture.filters['gray'].enabled&&strengthWave>= 100){

picture.filters.wave.strength += 50

}

</SCRIPT>

В приведённом примере объект picture сценария соответствует элементу <IMG> HTML-страницы. Переменная strengthWave хранит значение параметра strength фильтра wave. Оператор условия проверяет, не отключался ли фильтр gray объекта picture ранее в каком-либо сценарии (значение свойства enabled фильтров равно true, если разрешено его примененние к элементу). Если этот фильтр продолжает применяться, и параметр strength фильтра wave больше или равен 100, то этот параметр увеличивается на 50.

Можно ссылаться на фильтры объекта и с помощью числового индекса набора filters. Каждому фильтру, заданному в параметре или теге STYLE, соответствует определённый числовой индекс этого набора. Все фильтры индексируются в порядке их перечисления в свойстве filter каскадных таблиц стилей, начиная с нуля. Так, в привидённом примере фильтру wave соответствует индекс 0, фильтру gray - 1 и фильтру fliph - 2. Поэтому получить значение параметра strenth фильтра wave можно было бы и так:

strengthWave=picture.filters[0].strength;

Греческие буквы

Α	Α	Α	заглавная альфа
Β	Β	Β	заглавная бета
Γ	Γ	Γ	заглавная гамма
Δ	Δ	Δ	заглавная дельта
Ε	Ε	Ε	заглавная эпсилон
Ζ	Ζ	Ζ	заглавная дзета
Η	Η	Η	заглавная эта
Θ	Θ	Θ	заглавная тета
Ι	Ι	Ι	заглавная иота
Κ	Κ	Κ	заглавная каппа
Λ	Λ	Λ	заглавная лямбда
Μ	Μ	Μ	заглавная мю
Ν	Ν	Ν	заглавная ню
Ξ	Ξ	Ξ	заглавная кси
Ο	Ο	Ο	заглавная омикрон
Π	Π	Π	заглавная пи
Ρ	Ρ	Ρ	заглавная ро
Σ	Σ	Σ	заглавная сигма
Τ	Τ	Τ	заглавная тау
Υ	Υ	Υ	заглавная ипсилон
Φ	Φ	Φ	заглавная фи
Χ	Χ	Χ	заглавная хи
Ψ	Ψ	Ψ	заглавная пси
Ω	Ω	Ω	заглавная омега
α	α	α	строчная альфа
β	β	β	строчная бета
γ	γ	γ	строчная гамма
δ	δ	δ	строчная дельта
ε	ε	ε	строчная эпсилон
ζ	ζ	ζ	строчная дзета
η	η	η	строчная эта
θ	θ	θ	строчная тета
ι	ι	ι	строчная иота
κ	κ	κ	строчная каппа
λ	λ	λ	строчная лямбда
μ	μ	μ	строчная мю
ν	ν	ν	строчная ню
ξ	ξ	ξ	строчная кси
ο	ο	ο	строчная омикрон
π	π	π	строчная пи
ρ	ρ	ρ	строчная ро
&sigmaf;	ς	ς	строчная сигма (final)
σ	σ	σ	строчная сигма
τ	τ	τ	строчная тау
υ	υ	υ	строчная ипсилон
φ	φ	φ	строчная фи
χ	χ	χ	строчная хи
ψ	ψ	ψ	строчная пси
ω	ω	ω	строчная омега

Группирование

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

H1 {font-family: Verdana}

H2 {font-family: Verdana}
можно сгруппировать и задать в виде одного правила со списком селекторов

H1, H2 {font-family: Verdana}

Аналогично группируются определения, только в списке они разделяются точками с запятой. Следующие правила форматирования заголовка первого уровня

H2 {font-weight: bold}

H2 {font-size: 14pt}

H2 {font-family: Verdana}

можно сгруппировать в виде одного правила, сгруппировав определения:

H2 (font-weight: bold; font-size: 14pt; font-family: Verdana;}

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

H2 {font: bold 14pt Verdana}

При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения её размеров.

Идентификаторы

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

Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #: <STYLE TYPE="text/css">

</STYLE>
<BODY>
<P ID=myID> Разрежённые слова в абзаце</P>
<H1 ID=form2>Чёрный заголовок</P>

В этом примере абзац идентифицирован именем myID в параметре ID, поэтому к нему применимо правило с селектором #myID. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.

Импортирование

В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значение свойства @import является URL файла таблицы стилей.

Элементы HTML

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

<H1>Foreword</H1>

В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом. Некоторые теги, например <HR>, являются элементами HTML сами по себе, и для них соответствующий конечный тег неверен. Далее мы будем называть теги по их именам, опуская обязательные угловые скобки.

Классы

А что делать, если нужно некоторые ссылки отобразить по-другому? CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.

Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования. Например, можно определить два класса для отображения заголовка первого уровня:

В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:

<H1 CLASS="red">Красный шрифт</H1>
<H1 CLASS="blue">Красный шрифт на синем фоне</H1>

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

Теперь два класса red и blue можно применять к любым элементам документа:

<P CLASS="red">Красный шрифт</P>
<P CLASS="blue">Красный шрифт на синем фоне</P>

Первый абзац отразится красным шрифтом, а второй - красным шрифтом на синем фоне.

Масти

&spades;	♠	♠	знак масти 'пики'
&clubs;	♣	♣	знак масти 'трефы'
&hearts;	♥	♥	знак масти 'червы'
&diams;	♦	♦	знак масти 'бубны'

Наследование

В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет? Например, пусть цвет шрифта абзаца определён как синий(P {color: blue}). Как будет отображаться выделенный элемент текста, задаваемый тэгом <em>, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом. Другие свойства ведут себя аналогично свойству color, например font-family, font-size.

Некоторые свойства не наследуются вложенными элементами от своих родителей, например свойство background, но по умолчанию вложенные элементы будут отображаться с фоном родительского элемента.

Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тегом BODY:

BODY {color: black;
font-family: "Times New Roman";
background: url(picture.gif) white;
}

Приведённые правила задают форматирование документа по умолчанию: чёрным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом picture.gif, или на белом фоне, если файл недоступен.

Общая пунктуация

–	–	–	тире
—	—	—	длинное тире
‘	‘	‘	левая одиночная кавычка
’	’	’	правая одиночная кавычка
&sbquo;	‚	‚	нижняя одиночная кавычка
“	“	“	левая двойная кавычка
”	”	”	правая двойная кавычка
&bdquo;	„	„	нижняя двойная кавычка

Практическое освоение CSS

Существует целых четыре способа связывания документа и таблицы стилей:

Связывание - позволяет использовать одну таблицу стилей для форматирования многих страниц HTML Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе Встраивание в теги документа - позволяет изменять форматирование конкретных элементов страницы Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере

Остановимся на каждом из этих способов более подробно.

Прочие символы

	&#8224	&#8224	латинский крест
	&#8225	&#8225	двойной крест
•	•	•	маленький черный кружок
…	…	…	многоточие ...
	‰	‰	знак промилле (процент с дополнительным ноликом)
′	′	′	одиночный штрих - минуты
″	″	″	двойной штрих - секунды
&oline;	‾	‾	надчеркивание
&frasl;	⁄	⁄	косая дробная черта
	€	€	евро
	№	№	знак номера
™	™	™	знак торговой марки

Простейший пример

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

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},

Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML-тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений.

Пример:

H1 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

Разделение на строки и использование пробелов и символов табуляции

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

Селекторы

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

< STYLE TYPE="text/css">

</--STYLE>

Символы для букв

&circ;	ˆ	ˆ	диакритический знак над гласной
&tilde;	˜	˜	тильда

Специальные символы

Некоторые символы не входят в базовую часть таблицы кодов ASCII. К ним относятся буквы алфавитов части европейских языков, математические и некоторые другие символы. Некоторые символы, введенные в HTML документ будут интерпретироваться не так, как задумал автор. Это, например, символы "<" и ">", используемые для указания тегов.

В этих случаях можно вводить нужные символы с помощью специальных кодов. Коды начинаются с символа "амперсанд"(&). За ним следует название символа либо его числовой код в десятичной или шестнадцатеричной системе. Завершает код символ "точка с запятой"(;).

В спецификации HTML указано большое количество спецсимволов, но только некоторые из них используются. Наиболее часто используемые спецсимволы приведены в таблице:

ИмяКодВидОписание

"	"	"	двойная кавычка
&	&	&	амперсанд
<	<	<	знак 'меньше'
>	>	>	знак 'больше'
			неразрывный пробел
¡	¡	¡	перевернутый восклицательный знак
¢	¢	?	цент
£	£	£	фунт стерлингов
¤	¤	¤	денежная единица
¥	¥	¥	иена или юань
¦	¦	¦	разорванная вертикальная черта
§	§	§	параграф
¨	¨	¨	умляут
©	©	©	знак copyright
ª	ª	ª	женский порядковый числитель
«	«	«	левая двойная угловая скобка
¬	¬	¬	знак отрицания
			место возможного переноса
®	®	®	знак зарегистрированной торговой марки
¯	¯	¯	верхняя горизонтальная черта
°	°	°	градус
±	±	±	плюс-минус
²	²	²	"в квадрате"
³	³	³	"в кубе"
´	´	´	знак ударения
µ	µ	µ	микро
¶	¶	¶	символ параграфа
·	·	·	точка
¸	¸	¸	седиль (орфографический знак)
¹	¹	¹	верхний индекс 'один'
º	º	º	мужской порядковый числитель
»	»	»	правая двойная угловая скобка
¼	¼	¼	одна четвертая
½	½	½	одна вторая
¾	¾	¾	три четвертых
¿	¿	¿	перевернутый вопросительный знак
À	À	À	латинская заглавная А с тупым ударением
Á	Á	Á	латинская заглавная А с острым ударением
Â	Â	Â	латинская заглавная А с диакритическим знаком над гласной
Ã	Ã	Ã	латинская заглавная А с тильдой
Ä	Ä	Ä	латинская заглавная А с двумя точками
Å	Å	Å	латинская заглавная А с верхним кружком
Æ	Æ	Æ	латинские заглавные символы AE вместе
Ç	Ç	Ç	латинская заглавная C с седилем
È	È	È	латинская заглавная E с тупым ударением
É	É	É	латинская заглавная E с острым ударением
Ê	Ê	Ê	латинская заглавная E с диакритическим знаком над гласной
Ë	Ë	Ë	латинская заглавная E с двумя точками
Ì	Ì	Ì	латинская заглавная I с тупым ударением
Í	Í	Í	латинская заглавная I с острым ударением
Î	Î	Î	латинская заглавная I с диакритическим знаком над гласной
Ï	Ï	Ï	латинская заглавная I с двумя точками
Ð	Ð	Ð	латинская заглавная D с черточкой
Ñ	Ñ	Ñ	латинская заглавная N с тильдой
Ò	Ò	Ò	латинская заглавная O с тупым ударением
Ó	Ó	Ó	латинская заглавная O с острым ударением
Ô	Ô	Ô	латинская заглавная O с диакритическим знаком над гласной
Õ	Õ	Õ	латинская заглавная O с тильдой
Ö	Ö	Ö	латинская заглавная O с двумя точками
×	×	×	знак умножения
Ø	Ø	Ø	латинская заглавная O со штрихом
Ù	Ù	Ù	латинская заглавная U с тупым ударением
Ú	Ú	Ú	латинская заглавная U с острым ударением
Û	Û	Û	латинская заглавная U с диакритическим знаком
Ü	Ü	Ü	латинская заглавная U с двумя точками
Ý	Ý	Ý	латинская заглавная Y с острым ударением
Þ	Þ	Þ	латинская заглавная THORN
à	à	à	латинская строчная a с тупым ударением
á	&##225;	á	латинская строчная a с острым ударением
â	&##226;	â	латинская строчная a с диакритическим знаком
ã	ã	ã	латинская строчная a с тильдой
ä	ä	ä	латинская строчная a с двумя точками
å	å	å	латинская строчная a с верхним кружком
æ	æ	æ	латинская строчные буквы ae
ç	ç	ç	латинская строчная c с седилем
è	è	è	латинская строчная e с тупым ударением
é	é	é	латинская строчная e с острым ударением
ê	ê	ê	латинская строчная e с диакритическим знаком
ë	ë	ë	латинская строчная e с двумя точками
ì	ì	ì	латинская строчная I с тупым ударением
í	í	í	латинская строчная I с острым ударением
î	î	î	латинская строчная I с диакритическим знаком
ï	ï	ï	латинская строчная I с двумя точками
ð	ð	ð	латинская строчные символы eth
ñ	ñ	ñ	латинская строчная N с тильдой
ò	ò	ò	латинская строчная O с тупым ударением
ó	ó	ó	латинская строчная O с острым ударением
ô	ô	ô	латинская строчная O с диакритическим знаком
õ	õ	õ	латинская строчная I с тильдой
ö	ö	ö	латинская строчная I с двумя точками
÷	÷	÷	знак деления
ø	ø	ø	латинская строчная O со штрихом
ù	ù	ù	латинская строчная U с тупым ударением
ú	ú	ú	латинская строчная U с острым ударением
û	û	û	латинская строчная U с диакритическим знаком
ü	ü	ü	латинская строчная U с двумя точками
ý	ý	ý	латинская строчная Y с острым ударением
þ	þ	þ	латинская строчная thorn
ÿ	ÿ	ÿ	латинская строчная Y с двумя точками
&fnof;	ƒ	?	знак функции

Стрелки

←	←	←	стрелка влево
↑	↑	↑	стрелка вверх
→	→	→	стрелка вправо
↓	↓	↓	стрелка вниз
↔	↔	↔	стрелка влево-вправо

Связывание

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

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://...») в случае, если файл стилей находится на другом сервере.

Свойства элементов, управляемых с помощью CSS

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

СВОЙСТВА ШРИФТА

ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА

СВОЙСТВА ТЕКСТА

РАЗМЕРЫ ЭЛЕМЕНТА

СВОЙСТВА ТАБЛИЦЫ

ЕДИНИЦЫ ИЗМЕРЕНИЯ

Итак, перейдем к изучению элементов CSS. Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием.

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

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

Есть еще одна небольшая, но очень полезная хитрость – это способ скрыть от устаревших броузеров описания стилей, располагающихся в теге <STYLE>, внутри раздела<HEAD>. Поскольку броузер был написан несколько лет назад, когда никакого CSS еще и в планах не было, он просто не поймет, что это такое написано внутри <STYLE>…</STYLE>, и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.

где <!-- – тег, открывающий комментарий, а > – закрывающий.

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

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

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

Таблица базовых цветов BgColor

Aliceblue

F0F8FF

Antiquewhite

FAEBD7

Aqua

00FFFF

Aquamarine

7FFFD4

Azure

F0FFFF

Beige

F5F5DC

Bisque

FFE4C4

Black

000000

Blanchedalmond

FFEBCD

Blue

0000FF

Blueviolet

8A2BE2

Brown

A52A2A

Burlywood

DEB887

Cadetblue

5F9EA0

Chartreuse

7FFF00

Chocolate

D2691E

Coral

FF7F50

Cornflowerblue

6495ED

Cornsilk

FFF8DC

Crimson

DC143C

Cyan

00FFFF

Darkblue

00008B

Darkcyan

008B8B

Darkgoldenrod

B8860B

Darkgray

A9A9A9

Darkgreen

006400

Darkkhaki

BDB76B

Darkmagenta

8B008B

Darkolivegreen

556B2F

Darkorange

FF8C00

Darkorchid

9932CC

Darkred

8B0000

Darksalmon

E9967A

Darkseagreen

8FBC8F

Darkslateblue

483D8B

Darkslategray

2F4F4F

Darkturquoise

00CED1

Darkviolet

9400D3

deeppink

FF1493

Deepskyblue

00BFFF

Dimgray

696969

Dodgerblue

1E90FF

Firebrick

B22222

Floralwhite

FFFAF0

Forestgreen

228B22

Fuchsia

FF00FF

Gainsboro

DCDCDC

Ghostwhite

F8F8FF

Gold

FFD700

Goldenrod

DAA520

Gray

808080

Green

008000

Greenyellow

ADFF2F

Honeydew

F0FFF0

Hotpink

FF69B4

Indianred

CD5C5C

Indigo

4B0082

Ivory

FFFFF0

Khaki

F0E68C

Lavendar

E6E6FA

Lavenderblush

FFF0F5

Lawngreen

7CFC00

Lemonchiffon

FFFACD

Lightblue

ADD8E6

Lightcoral

F08080

Lightcyan

E0FFFF

Lightgoldenrodyellow

FAFAD2

Lightgreen

90EE90

Lightgrey

D3D3D3

Lightpink

FFB6C1

Lightsalmon

FFA07A

Lightseagreen

20B2AA

Lightskyblue

87CEFA

Lightslategray

778899

Lightsteelblue

B0C4DE

Lightyellow

FFFFE0

Lime

00FF00

Limegreen

32CD32

Linen

FAF0E6

Magenta

FF00FF

Maroon

800000

Mediumauqamarine

66CDAA

Mediumblue

0000CD

Mediumorchid

BA55D3

Mediumpurple

9370D8

Mediumseagreen

3CB371

Mediumslateblue

7B68EE

Mediumspringgreen

00FA9A

Mediumturquoise

48D1CC

Mediumvioletred

C71585

Midnightblue

191970

Mintcream

F5FFFA

Mistyrose

FFE4E1

Moccasin

FFE4B5

Navajowhite

FFDEAD

Navy

000080

Oldlace

FDF5E6

Olive

808000

Olivedrab

688E23

Orange

FFA500

Orangered

FF4500

Orchid

DA70D6

Palegoldenrod

EEE8AA

Palegreen

98FB98

Paleturquoise

AFEEEE

Palevioletred

D87093

Papayawhip

FFEFD5

Peachpuff

FFDAB9

Peru

CD853F

Pink

FFC0CB

Plum

DDA0DD

Powderblue

B0E0E6

Purple

800080

Red

FF0000

Rosybrown

BC8F8F

Royalblue

4169E1

Saddlebrown

8B4513

Salmon

FA8072

Sandybrown

F4A460

Seagreen

2E8B57

Seashell

FFF5EE

Sienna

A0522D

Silver

C0C0C0

Skyblue

87CEEB

Slateblue

6A5ACD

Slategray

708090

Snow

FFFAFA

Springgreen

00FF7F

Steelblue

4682B4

Tan

D2B48C

Teal

008080

Thistle

D8BFD8

Tomato

FF6347

Turquoise

40E0D0

Violet

EE82EE

Wheat

F5DEB3

White

FFFFFF

Whitesmoke

F5F5F5

Yellow

FFFF00

YellowGreen

9ACD32

Теги HTML

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

левой угловой скобки < (такого же, как "меньше чем" символа)

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

имени тега, например TITLE или PRE

необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER

правой угловой скобки > (такой же, как символа "больше чем").

Примеры:

<H1>

Теги по категориям

Гиперссылки

Графика

Таблицы

Теги форматировния документа

Теги физического форматирования текста

Теги логического форматирования текста

Списки

Элементы управления

Фреймы

Звук

Другие теги

Гиперссылки A

Графика IMG

Таблицы CAPTION

TABLE

Теги форматировния документа BASE BODY

HEAD

HTML

Внедрение

Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега HEAD, в теге <STYLE type="text/css">... </STYLE>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания броузеру использовать CSS.

Встраивание в теги документа

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

Kbd

Тег <KBD> и обязательный парный ему </KBD>

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

Пример

Для запуска Windows наберите: win.

Код для примера

Для запуска Windows наберите: <kbd>win</kbd>

Категория

Теги логического форматирования текста

Li

Тег <LI> и необязательный парный ему </LI>

Тег <LI>(List Item) служит для обозначения элемента (строки) списка. Используется в нумерованных(OL) и ненумерованных(UL) списках

Пример

Пугачева Орбакайте Киркоров Пресняков

А выглядит код так: <OL type=A title="нумерованный список"> <LI>Пугачева <LI>Орбакайте <LI>Киркоров <LI>Пресняков </OL>

Категория

Списки

Тег <LEGEND>

Тег <LEGEND> выводит надпись для тега FIELDSET и должен быть в нем первым элементом. Закрывающий тег требуется

Атрибуты

Примеры

Группа кнопочек

Два текстовых поля

Категория

Другие теги

Тег LINK

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

Пример

Смотри информацию на CSS

Категория

Другие теги

Атрибуты

titleВсплывающая подсказка disabledЕсли установить равным 1, то текст будет выведен серым цветом

Map

Тег <MAP> и обязательный закрывающий </MAP>

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

Пример

А выглядит код так: <MAP NAME="test">  <AREA HREF="1.html" ALT="первая область" SHAPE="rect" COORDS="0,0,100,130">

</MAP> <AREA HREF="2.html" ALT="вторая область" SHAPE="circle" COORDS="150,65,65">

Категория

Другие теги

Marquee

Тег <MARQUEE> и обязательный закрывающий </MARQUEE>

Этот элемент является ответом Microsoft на BLINK. MARQUEE заставляет текст не мигать, а прокручиваться, либо перемещаться из стороны в сторону

Атрибуты

BEHAVIOR=ALTERNATE | SCROLL | SLIDE Определяет вид скроллинга

ALTERNATE	Колебательные движения налево и направо
SCROLL	Перемещение текста в направлении, указанном в DIRECTION. Достигнув края экрана, надпись появляется снова с противоположной стороны
SLIDE	Схоже с SCROLL, но текст перемещается только один раз и останавливается

DIRECTION=DOWN | LEFT | RIGHT | UP Определяет направление скроллинга

DOWN	Движение вниз
LEFT	Движение справа налево. По умолчанию
RIGHT	Движение слева направо
UP	Движение вверх

Пример

ALTERNATE

SCROLL

SLIDE

А выглядит код так: <MARQUEE BEHAVIOR=ALTERNATE DIRECTION="right">Здесь ваш текст</MARQUEE>

Категория

Теги форматирования текста

А выглядит код так:

Первый элемент меню Второй элемент меню
А выглядит код так: <menu disabled=1 title="я - меню!">
<LI>Первый элемент меню <LI>Второй элемент меню </menu>
Категория

Списки

Группа особых метатегов, позволяющих использовать особые эффекты при заходе или уходе пользователя со странички или сайта
<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при заходе на страницу) (или Site-Enter)
<META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при уходе со страницы) (или Site-Exit),
где Duration задает время в секундах, а Transition - номер эффекта

Список эффектов

0 - Box in (в поле) 1 - Box out (из поля) 2 - Circle in (в круг) 3 - Circle out (из круга) 4 - Wipe up (стирание вверх) 5 - Wipe down (вниз) 6 - Wipe right (вправо) 7 - Wipe left (влево) 8 - Vertical blinds (вертикальные жалюзи) 9 - Horizontal blinds (горизонтальные жалюзи) 10 - Checkboard across (в шахматном порядке поперечно) 11 - Checkboard down (вниз) 12 - Random dissolve (случайный наплыв) 13 - Split vertical in 14 - Split vertical out 15 - Split horizontal in 16 - Split horizontal out 17 - Strips left down 18 - Strips left up 19 - Strips right down 20 - Strips right up 21 - Random bars horizontal (случайные горизонтальные линии) 22 - Random bars vertical 23 - Random (случайный эффект)

Тег <MENU>

Тег MENU служит для создания ненумерованного списка. Данный тег является устаревшим и оставлен для совместимости со старыми браузерами. Закрывающий тег требуется

Тег META

Специальная группа инструкций <META>, предназначена в основном для описания и индексирования документа поисковыми машинами. Все тэги META не видны при просмотре документа. Команды <META> вносятся в "шапку" гипертекстового документа - внутри блока <HEAD>...</HEAD&gt. Закрывающий тег </META> запрещен

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

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

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

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

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

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

<META name="keywords" content="META, HTML, WWW, Web, паутина, поиск, определение, рекомендации, примеры использования, учебник, руководство, информация, справка, Netscape, Microsoft Internet Explorer">

Список терминов и ключевых слов это то, что является самым главным при индексировании Вашего сайта поисковой машиной! Длина содержимого тегов МЕТА "keywords" не должна превышать 1000 символов

<META name="description" content="The best homepage">

Краткое описание Вашего сайта, используемое поисковым сервером для индексирования, и, как правило, вставляемое в текст страницы найденных совпадений в качестве описания Вашего сайта. Длина содержимого тегов МЕТА "description" не должна превышать 200 символов

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

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

<META HTTP-EQUIV="MSThemeCompatible" Content="No">

Поддержка интефейса, используемого в Windows XP. Если вы пользуетесть Windows XP, то Internet Explorer 6 использует новый внешний вид некоторых элементов (кнопки, полосы прокрутки), как в Windows XP. Вы может отключить эту поддержку

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

<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при заходе на страницу)

<META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при уходе со страницы)

<META HTTP-EQUIV="Site-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при заходе на сайт)

<META HTTP-EQUIV="Site-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при уходе с сайта),
где Duration задает время в секундах, а Transition - номер эффекта
Посмотреть примеры

Категория

Теги форматирования документа

Nobr

Тег <NOBR> и обязательный парный закрывающий тег </NOBR>

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

Пример

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

Код для примера

<nobr>Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку</nobr> Категория

Теги форматирования текста

Атрибуты

labelЗадает имя для заданной группы

Пример

Кошки

Собаки

Мышки

Попугай

Ворона

Сорока

Категория

Элементы управления

Ol

Тег <OL> и обязательный парный ему </OL>

Тег <OL>(Ordered List) служит для создания нумерованного списка. Допускается вложение нумерованного списка в списки другого вида

Атрибуты

type Тип маркера

A	Заглавные буквы
a	Строчные буквы
I	Заглавные римские цифры
i	Строчные римские цифры
1	Арабские цифры (по умолчанию)

startНачальное значение для нумерованного списка при использовании арабских цифр titleВсплывающая подсказка

Пример

Пугачева Орбакайте Киркоров Пресняков

А выглядит код так: <OL type=A title="нумерованный список"> <LI>Пугачева <LI>Орбакайте <LI>Киркоров <LI>Пресняков </OL>

Категория

Списки

Option

Тег <option> и необязательный парный ему </option>

Каждый элемент SELECT должен содержать хотя бы один или более элементов OPTION, с помощью которого создаются строки списков

Атрибуты

selectedИндикатор, что данная строка является выбранной по умолчанию. Если данный индикатор отсутствует, то такой строкой является первый элемент

Пример

Это список с прокруткой Вторая строка Третья строка Четвертая строка

Код для примера <select size=3> <option>Это список с прокруткой <option>Вторая строка <option>Третья строка <option selected>Четвертая строка</select>

Категория

Элементы управления

Нажмите на кнопку для получения

Нажмите на кнопку для получения ширины документа в браузере. Можете изменять размеры окна
Размер документа в браузере

iHeight является числовым значением ширины

[ iHeight = ] object.offsetHeight

iHeight является числовым значением ширины в пикселах

[ iWidth = ] object.offsetWidth

iWidth является числовым значением ширины в пикселах

Свойство offsetHeight

Свойство offsetHeight возвращает высоту объекта относительно родительского объекта. Например, можно использовать для определения истинного размера окна, если браузер открыт не в максимизированном окне, если в браузере применяются боковые панели, если страничка открыта во фрейме и т.п.

Свойство offsetWidth

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

Тег OPTGROUP

Тег OPTGROUP позволяет группировать элементы в SELECT в логические группы. Требуется закрывающий тег

p

Тег <P> и необязательный парный ему </P>

Тег <P> создает новый параграф. Два или более тега <P>, идущих подряд, заменяются одним

Параметры

alignВыравнивает параграф относительно одной из сторон документа, значения: left, right, или center

left	выравнивание по левому краю. По умолчанию
right	выравнивание по правому краю
center	выравнивание по центру
justify	выравнивание по ширине

titleВсплывающая подсказка

Пример

Выравниваем параграф по правому краю с помощью соответствующего атрибута <p align="right">

Категория

Теги форматирования текста

Pre

Тег <PRE> и обязательный парный ему </PRE>

Тег <PRE> обрамляет предварительно отформатированный текст. Преформатированный текст отображается моношириным шрифтом. Получается как бы текстовая вставка в html

Пример

Буря мглою небо кроет, ... То завоет как дитя

Категория

Теги форматирования текста

Q

Тег <Q> предназначен для включения в документ короткой цитаты без создания отступов (сравни с BLOCKQUOTE). Закрывающий тег обязателен

Атрибуты

contentEditableВозможность редактирования titleВсплывающая подсказка

Пример

Он сказал: "Поехали!"

Категория

Теги форматирования текста

Не побоялись нажать на

Sub clickme() Alert "Молодец! Не побоялись нажать на меня!" End Sub
Нажми меня!
А выглядит код так: <script language="VBScript"> Sub clickme() Alert "Молодец! Не побоялись нажать на меня!" End Sub </script> <button onclick="clickme()">Нажми меня!</button>
Категория

Другие теги

Строка содержит одно слово красного цвета. Причем это слово нельзя выделить.
А выглядит код так: <P&gtСтрока содержит одно слово &ltSPAN STYLE="color:red">красного</SPAN> цвета.
Категория

Другие теги

s

Тег <s> и обязательный парный ему </s>

Тег <s> указывает, что текст должен быть зачеркнут

Пример

Это обычный текст

А это уже текст с использованием тега <s>

Категория

Теги физического форматирования текста

Samp

Тег <SAMP> и обязательный парный ему </SAMP>

Тег <SAMP> отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом

Пример

Это обычный текст

А это уже текст с использованием тега <samp>

Категория

Теги логического форматирования текста

Select

Тег <select> и обязательный парный ему </select>

Тег <select> создает список или выпадающий список. Каждый элемент списка описывается тегом Option

Атрибуты

sizeЧисло отображаемых элементов. Если равно 1 или не указано, то выводится одна строчка. Если значение больше 1, то выводится список с прокруткой

Пример

Это список с прокруткой Вторая строка Третья строка Четвертая строка

Это выпадающий список Вторая строка Третья строка Четвертая строка

Приведем пример подобия pull-down меню для навигации по сайту

Выбор раздела

1 страница

2 страница

3 страница

4 страница

5 страница

Вот код:

<SELECT NAME="navSelect"

ONCHANGE="top.location.href =

this.options[this.selectedIndex].value">

<OPTION>Выбор раздела</OPTION>

<OPTION VALUE="1.html">1 страница</OPTION>

<OPTION VALUE="2.html">2 страница</OPTION>

<OPTION VALUE="3.html">3 страница</OPTION>

<OPTION VALUE="4.html">4 страница</OPTION>

<OPTION VALUE="5.html">5 страница</OPTION>

</SELECT>

Основную работу выполняет обработчик события ONCHANGE. top ссылается на окно браузера, активное в данный момент. top.location.href - URL документа, отображаемого этим окном. Одним из свойств объекта SELECT является коллекция options, которая содержит параметры элементов выбора. Например navSelect.option[1].value содержит значение "index.html". Свойство элемента SELECT selectedIndex - номер выбранного пункта. Элемент this внутри элемента ссылается именно на этот элемент. Вместо него можно было использовать (в Internet Explorer) ссылку document.all.navSelect, но this гораздо короче и работает в обоих браузерах. Я советую вам всегда использовать элемент this, когда это возможно.

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

1 страница

2 страница

3 страница

Вот код:

<FORM>

SELECT NAME="navSelect"<>

<OPTION>Выбор раздела</OPTION>

<OPTION VALUE="1.html">1 страница</OPTION>

<OPTION VALUE="2.html">2 страница</OPTION>

<OPTION VALUE="3.html">3 страница</OPTION>

</SELECT><BR>

<INPUT TYPE=BUTTON NAME="go" VALUE="Go!"

ONCLICK="top.location.href =

this.form.navSelect.options[this.form.navSelect.selectedIndex].value">

</FORM>

Здесь необходимо пояснить, что каждый элемент формы имеет свойство form, которое содержит ссылку на его родительскую форму. Таким образом можно сослаться на любой элемент формы из любого другого элемента, чем мы здесь и воспользовались: this.form.navSelect ссылается именно на элемент выбора.

Категория

Элементы управления

Small

Тег <SMALL> и обязательный парный ему </SMALL>

Тег <SMALL> выводит более мелкий текст

Атрибуты

titleПоказывает текст в виде всплывающей подсказки

Пример

Это обычный текст

А это уже более мелкий текст с использованием тега <SMALL>

Категория

Теги физического форматирования текста

Strong

Тег <strong> и обязательный парный ему </strong>

Тег <strong> используется для выделения из текста слова (жирный текст). Происходит от слова strong emphasis - сильный акцент. Аналогичен тегу B

Пример

Это обычный текст

А это уже текст с использованием тега <strong>

Категория

Теги логического форматирования текста

Sub

Тег <sub> и обязательный парный ему </sub>

Тег <sub> приспускает текст

Пример

Текст с использованием тега <sub>
Формула воды - H2O

Категория

Теги физического форматирования текста

Sup

Тег <sup> и обязательный парный ему </sup>

Тег <sup> приподнимает текст

Пример

Текст с использованием тега <sup>

42 = 16

Категория

Теги физического форматирования текста

Тег <SCRIPT>

Элемент SCRIPT используется для включения небольших программ - скриптов (JavaScript, VBScript). При помощи скриптов можно достаточно легко создавать интерактивные страницы. Если броузер не поддерживает сценарии, то содержимое контейнера SCRIPT может быть выведено на экран. Чтобы этого не случилось, весь текст программы вкладывают в комментарий, а поясняющий текст помещают внутрь контейнера NOSCRIPT. Обратите также внимание на то, что закрывающему тегу комментария предшествует комментарий на языке JavaScript (//). Это делается для того, чтобы интерпретатор JavaScript не выдал ошибки, дойдя до символов «чужеродной» конструкции HTML. Закрывающий тег: требуется

Атрибуты

languageОпределяет язык скрипта. Может иметь следующие значения: JScript, javascript, vbs, vbscript, XML srcСодержит ссылку на внешний файл, содержащий скрипт

Тег <SPAN>

Элемент SPAN определяет контейнер для внутреннего текста. Данный элемент предназначен для использования в CSS. Закрывающий тег: требуется

Атрибуты

UNSELECTABLEЗапрещает или разрешает выделять текст в данном элементе (on - запрещает, off - разрешает)

Справочник тегов

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

Если вы хотите сделать свою страничку стартовой, то необходимо использовать следующий код (Для IE 5 и выше)

<a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://winchanger.narod.ru/'); return false;">Сделать стартовой страницей</a>

При клике на ссылке появится диалоговое окно с запросом

Td

Тег <TD> и необязательный парный ему </TR>

Тег <TD> определяет отдельную ячейку в таблице

Атрибуты

heightУказывает высоту элемента в процентах или пикселях alignВыравнивает текст в ячейке

left - по левому краю (по умолчанию) rigth - по правому краю center - по центру

valignВыравнивает текст в ячейке по вертикали

top - по верхнему краю middle - по центру bottom - по нижнему краю

colspanУказывает кол-во столбцев которое объединено в одной ячейке (по умолчанию=1) rowspanУказывает кол-во строк которое объединено в одной ячейке (по умолчанию=1) titleВсплывающая подсказка

Пример

Пример простой таблицы

Заголовок столбца 1

Заголовок столбца 2

Ячейка столбца 1, ряд 1	Ячейка столбца 2, ряд первый
Ячейка столбца 1, ряд второй	Ячейка столбца 2, ряд 2

Код для таблицы

<TABLE BORDER=2 COLS=2> <TR> <TH>Заголовок столбца 1</TH><TH>Заголовок столбца 2</TH> </TR> <TR > <TD height=70 title="пример">Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд первый</TD> </TR> <TR align=center> <TD>Ячейка столбца первый, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD> </TR> </TABLE>

Категория

Таблицы

Тег <TABLE>

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

Атрибуты

align=Выравнивание таблицы относительно документа. Возможные значения: center, left, right backgroundСтрока, определяющая рисунок для заднего фона bgcolorОпределяет задний фон таблицы borderТолщина рамки в пикселах. Если атрибут не указан, то таблица выводится без видимой рамки bordercolorЦвет рамки cellspacingЗадает расстояние между ячейками таблицы cellpaddingЗадает расстояние между содержимым ячейки и ее рамкой rulesОписывает рамки вокруг таблицы. Может принимать следующие значения

all	Отображает все части рамки внутри таблицы
cols	Отображает все вертикальные рамки внутри таблицы
groups	Отображает горизонтальные части рамки между группами таблицы THEAD, TBODY, TFOOT
none	Удаляет все рамки вокруг таблицы
rows	Отображает все горизонтальные рамки внутри таблицы

summaryОписание таблицы для удобства людей, использующих браузеры, поддерживающие азбуку Бройля или речевой вывод titleВсплывающая подсказка widthШирина таблицы в процентах или пикселах

Пример

Пример простой таблицы

Заголовок столбца 1Заголовок столбца 2

Ячейка столбца 1, ряд 1	Ячейка столбца 2, ряд 1
Ячейка столбца 1, ряд 2	Ячейка столбца 2, ряд 2

Код для таблицы

<TABLE BORDER=2 COLS=2 BGCOLOR=yellow align=center> <TR> <TH>Заголовок столбца 1</TH><TH>Заголовок столбца 2</TH> </TR> <TR> <TD>Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд 1</TD> </TR> <TR> <TD>Ячейка столбца 1, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD> </TR> </TABLE>

Категория

Таблицы

Тег <TEXTAREA>

Тег TEXTAREA создает многострочное текстовое поле для ввода информации. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк. Выводимый текст находится между тегами. Требуется закрывающий тег.

Атрибуты

cols=Определяет ширину поля в символах disabledДелает элемент недоступным readonlyТекст только для чтения. Нельзя изменять, вставлять и т.д. rows=Определяет число строк title=Всплывающая подсказка

Пример

Текстовое поле шириной в 11 символов и в семь строк

Код

Текстовое поле шириной в 11 символов и в семь строк <textarea/>

Категория

Элементы управления

Тег <TH>

Тег <TH> определяет заголовок для столбца в таблице. Обычно, выделяются жирным шрифтом. Закрывающий тег обязателен

Атрибуты

bgcolorЦвет фона bordercolorЦвет рамки для элемента heightУказывает высоту элемента в процентах или пикселях alignВыравнивает текст в ячейке

left - по левому краю (по умолчанию) rigth - по правому краю center - по центру

valignВыравнивает текст в ячейке по вертикали

top - по верхнему краю middle - по центру bottom - по нижнему краю

Пример

Пример простой таблицы

Заголовок столбца 1

Заголовок столбца 2

Ячейка столбца 1, ряд 1	Ячейка столбца 2, ряд первый
Ячейка столбца 1, ряд второй	Ячейка столбца 2, ряд 2

Код для таблицы

Категория

Таблицы

Тег <THEAD>

Тег THEAD определяет заголовок таблицы, содержащий информацию о столбцах таблицы. В таблице может быть только один THEAD. Внутри заголовка допустимо использовать теги TR, TH, TD. Закрывающий тег необязателен

Атрибуты

titleВсплывающая подсказка

Пример

Текст для заголовка таблицы

Текст для тела таблицы

Категория

Таблицы

Title

Тег <TITLE> и обязательный парный ему </TITLE>

Элемент TITLE не является частью отображаемого текста. Он может отображаться, например, как заголовок страницы или название окна. Только один TITLE может быть в документе. Элемент TITLE должен использоваться для идентификации содержимого документа. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять осмысленные заголовки. Таким образом, вместо такого заголовка, как "Введение", который не даёт достаточно информации о документе, авторы должны записать, например, так: "Введение в HTML". Название должно быть не более 40 символов, т.к. название, привышающее размер в 40 символов непомещается в строку заголовка окна браузера.

Категория

Теги форматирования документа

Tr

Тег <TR> и необязательный парный ему </TR>

Тег <TR> определяет строку в таблице

Атрибуты

alignВыравнивает текст в ячейке

left - по левому краю rigth - по правому краю center - по центру

valignВыравнивает текст в ячейке по вертикали

top - по верхнему краю middle - по центру bottom - по нижнему краю

Пример

Пример простой таблицы

Заголовок столбца 1Заголовок столбца 2

Ячейка столбца 1, ряд 1	Ячейка столбца 2, ряд первый
Ячейка столбца 1, ряд второй	Ячейка столбца 2, ряд 2

Код для таблицы

<TABLE BORDER=2 COLS=2> <TR> <TH>Заголовок столбца 1</TH><TH>Заголовок столбца 2</TH> </TR> <TR > <TD>Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд первый</TD> </TR> <TR align=center> <TD>Ячейка столбца первый, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD> </TR> </TABLE>

Категория

Таблицы

Tt

Тег <tt> и обязательный парный ему </tt>

Тег <tt> создает текст, имитирующий стиль печатной машинки

Пример

Это обычный текст

А это уже текст с использованием тега <tt>,имитирующий стиль печатной машинки

Категория

Теги физического форматирования текста

u

Тег <u> и обязательный парный ему </u>

Тег <u> указывает, что текст должен быть подчеркнут

Пример

Это обычный текст

А это уже текст с использованием тега <u>

Категория

Теги физического форматирования текста

Ul

Тег <UL> и обязательный парный ему </OL>

Тег <UL>(Unordered List) служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида

Атрибуты

typeТип маркера

disk	Закрашенный кружок. По умолчанию
circle	Незакрашенный кружок
square	Квадратик

titleВсплывающая подсказка

Пример

Пугачева Орбакайте Киркоров Пресняков

А выглядит код так: <UL type=square title="Ненумерованный список"> <LI>Пугачева <LI>Орбакайте <LI>Киркоров <LI>Пресняков </UL>

Категория

Списки

Var

Тег <VAR> и обязательный парный ему </VAR>

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

Пример

function() - фунция

Код для примера

<var>function()</var> - фунция

Категория

Теги логического форматирования текста