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

         

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

Close

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">

<script language="vbscript"> sub Loading() alert "Если Вы видите это сообщение, значит страница загрузилась" end sub </script> </body>



OnUnload


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

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

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

Пример

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

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

<script language="vbscript"> sub UnLoading() alert "Если Вы видите это сообщение, значит сработало событие OnUnLoad" end sub </script> </body>



Open


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

toolbarbooleanПанель инструментов
locationbooleanАдресная строка
directoriesbooleanСсылки
statusbooleanСтрока состояния
menubarbooleanМеню
scrollbarsbooleanПолосы прокрутки, если документ больше окна
resizablebooleanВозможность изменения размеров окна
widthintegerШирина окна в пикселах
heightintegerВысота окна в пикселах
topintegerВерхняя позиция окна в пикселах
leftintegerЛевая позиция окна в пикселах

Пример

Откроем новое окно без панели инструментов, с меню и высотой окна в 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

Cookie

fgColor

fileCreatedDate

fileSize

lastModified

LinkColor

mimeType

referrer

Title

URL

VLinkColor



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


hash

host

hostname

href

pathname

port

protocol

search



Свойства объекта 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 последовательности (более официально называемые символьными объектами), которые начинаются знаком & (например, &lt;)

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: имя_фильтра([параметры]);

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

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

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

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

<IMG ID=img1 SRC="пример1.gif" STYLE="filter: blur(strength=50) fliph()>

В данном примере к графическому изображению применяются два фильтра: первый (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;


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

&Alpha;&#913;Αзаглавная альфа
&Beta;&#914;Βзаглавная бета
&Gamma;&#915;Γзаглавная гамма
&Delta;&#916;Δзаглавная дельта
&Epsilon;&#917;Εзаглавная эпсилон
&Zeta;&#918;Ζзаглавная дзета
&Eta;&#919;Ηзаглавная эта
&Theta;&#920;Θзаглавная тета
&Iota;&#921;Ιзаглавная иота
&Kappa;&#922;Κзаглавная каппа
&Lambda;&#923;Λзаглавная лямбда
&Mu;&#924;Μзаглавная мю
&Nu;&#925;Νзаглавная ню
&Xi;&#926;Ξзаглавная кси
&Omicron;&#927;Οзаглавная омикрон
&Pi;&#928;Πзаглавная пи
&Rho;&#929;Ρзаглавная ро
&Sigma;&#931;Σзаглавная сигма
&Tau;&#932;Τзаглавная тау
&Upsilon;&#933;Υзаглавная ипсилон
&Phi;&#934;Φзаглавная фи
&Chi;&#935;Χзаглавная хи
&Psi;&#936;Ψзаглавная пси
&Omega;&#937;Ωзаглавная омега
&alpha;&#945;αстрочная альфа
&beta;&#946; βстрочная бета
&gamma;&#947; γстрочная гамма
&delta;&#948; δстрочная дельта
&epsilon;&#949; εстрочная эпсилон
&zeta;&#950; ζстрочная дзета
&eta;&#951; ηстрочная эта
&theta;&#952; θстрочная тета
&iota;&#953; ιстрочная иота
&kappa;&#954; κстрочная каппа
&lambda;&#955; λстрочная лямбда
&mu;&#956; μстрочная мю
&nu;&#957; νстрочная ню
&xi;&#958; ξстрочная кси
&omicron;&#959; οстрочная омикрон
&pi;&#960; πстрочная пи
&rho;&#961; ρстрочная ро
&sigmaf;&#962; ςстрочная сигма (final)
&sigma;&#963; σстрочная сигма
&tau;&#964; τстрочная тау
&upsilon;&#965; υстрочная ипсилон
&phi;&#966; φстрочная фи
&chi;&#967; χстрочная хи
&psi;&#968; ψстрочная пси
&omega;&#969; ωстрочная омега


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


Правила каскадных таблиц состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы 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">
<!--
#myID {letter-spacing: 1em; }
H1#form3 (color:red; background-color: blue}
-->
</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 соответствующего тега применять разные правила форматирования. Например, можно определить два класса для отображения заголовка первого уровня:

<STYLE TYPE="text/css">
<!--
H1.red {color: red; }
H1.blue (color:red; background-color: blue}
-->
</STYLE>

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

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

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

<STYLE TYPE="text/css">
<!--
.red {color: red; }
.blue (color:red; background-color: blue}
-->
</STYLE>

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

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

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



Масти

&spades;&#9824; знак масти 'пики'
&clubs;&#9827; знак масти 'трефы'
&hearts;&#9829; знак масти 'червы'
&diams;&#9830; знак масти 'бубны'


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


В 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, или на белом фоне, если файл недоступен.



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

&ndash;&#8211;тире
&mdash;&#8212;длинное тире
&lsquo;&#8216;левая одиночная кавычка
&rsquo;&#8217;правая одиночная кавычка
&sbquo;&#8218;нижняя одиночная кавычка
&ldquo;&#8220;левая двойная кавычка
&rdquo;&#8221;правая двойная кавычка
&bdquo;&#8222;нижняя двойная кавычка


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


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

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

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



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

&#8224&#8224латинский крест
&#8225&#8225двойной крест
&bull;&#8226;маленький черный кружок
&hellip;&#8230;многоточие ...
&#8240;знак промилле (процент с дополнительным ноликом)
&prime;&#8242; одиночный штрих - минуты
&Prime;&#8243; двойной штрих - секунды
&oline;&#8254; надчеркивание
&frasl;&#8260; косая дробная черта
&#8364;евро
&#8470;знак номера
&trade;&#8482;знак торговой марки


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


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

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

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

Пример:

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

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



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


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



Селекторы


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

< STYLE TYPE="text/css">
<!--
A {text-decoration:none; }
-->
</--STYLE>



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

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


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


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

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

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

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

&quot;&#34;"двойная кавычка
&amp;&#38;&амперсанд
&lt;&#60;<знак 'меньше'
&gt;&#62;>знак 'больше'
&nbsp;&#160;неразрывный пробел
&iexcl;&#161;¡перевернутый восклицательный знак
&cent;&#162;?цент
&pound;&#163;£фунт стерлингов
&curren;&#164;¤денежная единица
&yen;&#165;¥иена или юань
&brvbar;&#166;¦разорванная вертикальная черта
&sect;&#167;§параграф
&uml;&#168;¨умляут
&copy;&#169;©знак copyright
&ordf;&#170;ªженский порядковый числитель
&laquo;&#171;«левая двойная угловая скобка
&not;&#172;¬знак отрицания
&shy;&#173;­место возможного переноса
&reg;&#174;®знак зарегистрированной торговой марки
&macr;&#175;¯верхняя горизонтальная черта
&deg;&#176;°градус
&plusmn;&#177;±плюс-минус
&sup2;&#178;²"в квадрате"
&sup3;&#179;³"в кубе"
&acute;&#180;´знак ударения
&micro;&#181;µмикро
&para;&#182;символ параграфа
&middot;&#183;·точка
&cedil;&#184;¸седиль (орфографический знак)
&sup1;&#185;¹верхний индекс 'один'
&ordm;&#186;ºмужской порядковый числитель
&raquo;&#187;»правая двойная угловая скобка
&frac14;&#188;¼одна четвертая
&frac12;&#189;½одна вторая
&frac34;&#190;¾три четвертых
&iquest;&#191;¿перевернутый вопросительный знак
&Agrave;&#192;Àлатинская заглавная А с тупым ударением
&Aacute;&#193;Áлатинская заглавная А с острым ударением
&Acirc;&#194;Âлатинская заглавная А с диакритическим знаком над гласной
&Atilde;&#195;Ãлатинская заглавная А с тильдой
&Auml;&#196;Äлатинская заглавная А с двумя точками
&Aring;&#197;Åлатинская заглавная А с верхним кружком
&AElig;&#198;Æлатинские заглавные символы AE вместе
&Ccedil;&#199;Çлатинская заглавная C с седилем
&Egrave;&#200;Èлатинская заглавная E с тупым ударением
&Eacute;&#201;Éлатинская заглавная E с острым ударением
&Ecirc;&#202;Êлатинская заглавная E с диакритическим знаком над гласной
&Euml;&#203;Ëлатинская заглавная E с двумя точками
&Igrave;&#204;Ìлатинская заглавная I с тупым ударением
&Iacute;&#205;Íлатинская заглавная I с острым ударением
&Icirc;&#206;Îлатинская заглавная I с диакритическим знаком над гласной
&Iuml;&#207;Ïлатинская заглавная I с двумя точками
&ETH;&#208;Ðлатинская заглавная D с черточкой
&Ntilde;&#209;Ñлатинская заглавная N с тильдой
&Ograve;&#210;Òлатинская заглавная O с тупым ударением
&Oacute;&#211;Óлатинская заглавная O с острым ударением
&Ocirc;&#212;Ôлатинская заглавная O с диакритическим знаком над гласной
&Otilde;&#213;Õлатинская заглавная O с тильдой
&Ouml;&#214;Öлатинская заглавная O с двумя точками
&times;&#215;×знак умножения
&Oslash;&#216;Øлатинская заглавная O со штрихом
&Ugrave;&#217;Ùлатинская заглавная U с тупым ударением
&Uacute;&#218;Úлатинская заглавная U с острым ударением
&Ucirc;&#219;Ûлатинская заглавная U с диакритическим знаком
&Uuml;&#220;Üлатинская заглавная U с двумя точками
&Yacute;&#221;Ýлатинская заглавная Y с острым ударением
&THORN;&#222;Þлатинская заглавная THORN
&agrave;&#224;àлатинская строчная a с тупым ударением
&aacute;&##225;áлатинская строчная a с острым ударением
&acirc;&##226;âлатинская строчная a с диакритическим знаком
&atilde;&#227;ãлатинская строчная a с тильдой
&auml;&#228;äлатинская строчная a с двумя точками
&aring;&#229;åлатинская строчная a с верхним кружком
&aelig;&#230;æлатинская строчные буквы ae
&ccedil;&#231;ç латинская строчная c с седилем
&egrave;&#232;èлатинская строчная e с тупым ударением
&eacute;&#233;éлатинская строчная e с острым ударением
&ecirc;&#234;êлатинская строчная e с диакритическим знаком
&euml;&#235;ëлатинская строчная e с двумя точками
&igrave;&#236;ìлатинская строчная I с тупым ударением
&iacute;&#237;íлатинская строчная I с острым ударением
&icirc;&#238;îлатинская строчная I с диакритическим знаком
&iuml;&#239;ïлатинская строчная I с двумя точками
&eth;&#240;ðлатинская строчные символы eth
&ntilde;&#241;ñлатинская строчная N с тильдой
&ograve;&#242;òлатинская строчная O с тупым ударением
&oacute;&#243;óлатинская строчная O с острым ударением
&ocirc;&#244;ôлатинская строчная O с диакритическим знаком
&otilde;&#245;õлатинская строчная I с тильдой
&ouml;&#246;öлатинская строчная I с двумя точками
&divide;&#247;÷знак деления
&oslash;&#248;øлатинская строчная O со штрихом
&ugrave;&#249;ùлатинская строчная U с тупым ударением
&uacute;&#250;úлатинская строчная U с острым ударением
&ucirc;&#251;ûлатинская строчная U с диакритическим знаком
&uuml;&#252;üлатинская строчная U с двумя точками
&yacute;&#253;ýлатинская строчная Y с острым ударением
&thorn;&#254;þлатинская строчная thorn
&yuml;&#255;ÿлатинская строчная Y с двумя точками
&fnof;&#402;?знак функции



Стрелки

&larr;&#8592; стрелка влево
&uarr;&#8593; стрелка вверх
&rarr;&#8594; стрелка вправо
&darr;&#8595; стрелка вниз
&harr;&#8596; стрелка влево-вправо



Связывание


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

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

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



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


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

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

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

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

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

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

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

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

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

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

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

<HEAD> <STYLE type="text/css"> <!-- описания стилей -- > </STYLE> </HEAD>

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

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

Еще один из интересных вариантов применения 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>

<H1 ALIGN=LEFT>



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


Гиперссылки

Графика

Таблицы

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

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

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

Списки

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

Фреймы

Звук

Другие теги


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


Графика
IMG


Таблицы
CAPTION

TABLE

TH

TD

TR


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

HEAD

HTML

META

TITLE


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

BLOCKQUOTE

BR

FONT

Hx

HR

I

MARQUEE

NOBR

P

PRE

S

SMALL

SUB

SUP

TT

U


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

CITE

CODE

DFN

EM

KBD

SAMP

STRONG

VAR


Списки DD DL

DT

LI

MENU

OL

UL


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

INPUT

OPTGROUP

OPTION

SELECT

TEXTAREA


Фреймы IFRAME


Звук
BGSOUND


Другие теги
!-- !DOCTYPE

ADDRESS

APPLET

AREA

CENTER

FORM

LEGEND

LINK

MAP

SCRIPT

SPAN



Внедрение


Второй вариант, при котором описание стилей располагается в коде 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

<LINK REL="Stylesheet" HREF="default.css" TYPE="text/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">

<img src="../cat.jpg" width=200 height=130 border="0" usemap="#test">

Категория

Другие теги



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> запрещен

<META HTTP-EQUIV="Expires" CONTENT="Mon, 25 Sep 2002 00:02:01 GMT">

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

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">

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

<META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://winchanger.narod.ru/">

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

<META name="author" content="Arni Schwarz">

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

<META name="copyright" content="&copy; 2001 SOFT BANANAS">

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

<META http-equiv="PICS-Label" content=' (PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1)) '>

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


<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 символов и в семь строк

Код

<textarea cols=11 rows=7 readonly>

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

Категория


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



Тег <TH>


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

Атрибуты

bgcolorЦвет фона bordercolorЦвет рамки для элемента 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>

Категория


Таблицы



Тег <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> - фунция

Категория

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