Теги HTML

A B C D E F G H I J K L M N
O P Q R S T U V W X Y Z

    A
  1. A
  2. ABBR
  3. ACRONYM
  4. ADDRESS
    B
  5. B
  6. BIG
  7. BLOCKQUOTE
  8. BODY
  9. BR
  10. BUTTON
    C
  11. CENTER
  12. CITE
  13. CODE
    D
  14. DD
  15. DFN
  16. DL
  17. DT
    E
  18. EM
    F
  19. FONT
    H
  20. Hx
  21. HEAD
  22. HR
  23. HTML
    I
  24. I
  25. IMG
    K
  26. KBD
    L
  27. LI
    M
  28. MARQUEE
  29. META
    N
  30. NOBR
    O
  31. OL
    P
  32. P
  33. PRE
    S
  34. S
  35. SAMP
  36. SMALL
  37. STRONG
  38. SUB
  39. SUP
    T
  40. TABLE
  41. TD
  42. TITLE
  43. TR
  44. TT
    U
  45. U
  46. UL
    V
  47. VAR


Теги:Введение

Теги HTML

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

  • левой угловой скобки < (такого же, как "меньше чем" символа)
  • необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом в этом контексте Вы можете читать символ /, как конец...
  • имени тега, например TITLE или PRE
  • необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER
  • правой угловой скобки > (такой же, как символа "больше чем").

Примеры:

<H1>

<H1 ALIGN=LEFT>

Элементы HTML

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

<H1>Foreword</H1>

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

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, NOSHADE, NOHREF). Так что лучше использовать минимизированный синтаксис там, где это возможно.

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

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

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

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

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

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


A

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

Тег <A> служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Сам гипертекст поддается форматированию

Атрибуты
name
Задает имя элемента. Имя используется, например, для создания ссылок между фреймами
href
Задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа.
Для создания гиперссылки вызова почтовой программы для написания письма используется <a href="mailto:your@email">
title
Всплывающая подсказка
Пример

Это обычный текст
А это уже гиперссылка на сайт http://changer.newmail.ru
Пишите письма - пример для вызова почтовой программы

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

<a href="http://changer.newmail.ru" title="подсказка">А это уже гиперссылка на сайт http://changer.newmail.ru</a>
Категория
Гиперссылки


ABBR

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

Тег <ABBR> используется для аббревиатуры

Пример

СНГ - Содружество независимых государств

Код для примера
<abbr>СНГ</abbr> - Содружество независимых государств

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


ACRONYM

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

Тег <ACRONYM> идентифицирует акроним

Пример

СНГ - Содружество независимых государств

Код для примера
<ACRONYM>СНГ</ACRONYM> - Содружество независимых государств

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


ADDRESS

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

Тег <ADDRESS> применяется для идентификации автора документа и указания адреса автора. Сюда же обычно помещаются и сведения об авторских правах, а также дата создания и последней модификации документа. Тег применяется обычно вначале или в конце документа. Текст, заключенный между тегами <address></address> обычно отображается курсивом

Пример

Мой адрес - Советский Союз

Код для примера
<address>Мой адрес - Советский Союз</address>

Категория
Другие теги


B

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

Тег <B> создает жирный текст

Атрибуты
title
Показывает текст в виде всплывающей подсказки
Пример

Это обычный текст
А это уже жирный текст с использованием тега <B>

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


BIG

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

Тег <BIG> выводит более крупный текст

Атрибуты
title
Показывает текст в виде всплывающей подсказки
Пример

Это обычный текст
А это уже более крупный текст с использованием тега <BIG>

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


BLOCKQUOTE

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

Тег <BLOCKQUOTE> предназначен для включения в документ длинных цитат, cоздавая отступы с обеих сторон текста и отделяясь от остального текста пустыми строками

Пример

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

А это уже длинный текст c отступами от сторон текста для лучшего восприятия

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


BODY

Тег <BODY> и парный ему </BODY>

Тег <BODY> определяет видимую часть документа.В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).Тег имее ряд необязательных атрибутов

Атрибуты
bgcolor
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета, например для желтого цвета, используемой на данной странице <body bgcolor= "yellow">
background
Указывает на url-адрес изображения - фона документа
text
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет, либо используя константы цвета, например для зеленого цвета, используемой на данной странице <body text= "green">
<body link=?>
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет,либо используя константы цвета,например для красного цвета,используемой на данной странице <body link= "red">
Пример красной ссылки
<body vlink=?>
Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет
<body alink=?>
Устанавливает цвет гиперссылок при нажатии. Например, на этой странице ссылки становятся синими при нажатии мышкой
bgproperties=fixed
Фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон - нет. Данный параметр поддерживается только Internet Explorer
Эти параметры можно объединять, например на этой страничке используется <BODY bgcolor="yellow" text="green" link="red" alink="blue">
Категория
Теги форматирования документа


BR

Тег <BR> не требует парного закрывающего тега

Тег <BR>(BReak line) вставляет перевод строки

Пример

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

А это уже длинный текст, разбитый
на две строки с помощью тега <BR>

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


BUTTON

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

Тег <BUTTON> создает кнопку с рисунком или с другими встроенными элементами

Пример

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

<button>
 <table border=1>
  <tr>
  <td>Кнопочка
  <tr>
  <td>в таблице
  </table></button>
Категория
Элементы управления


CENTER

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

Тег <CENTER> предназначен для горизонтального выравнивания ВСЕХ элементов посередине окна браузера. CENTER это тег уровня блока, поэтому им можно центрировать, например, таблицы, тексты

Пример

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

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

Категория
Другие теги


CITE

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

Тег <CITE> используется для цитат, названий книг. Обычно наклонный текст

Атрибуты
title
Всплывающая подсказка
Пример

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

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


CODE

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

Тег <CODE> отмечает текст как небольшой фрагмент программного кода. Обычно отображается моноширинным шрифтом

Атрибуты
title
Всплывающая подсказка
Пример

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

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


DD

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

Тег <DD>(Definition Description) является описанием списка определений

Пример
Это определение
Описание определения
А выглядит код так:
<DL title="это список">
 <DT>Это определение
 <DD>Описание определения
 </DL>
Категория
Списки


DFN

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

Тег <DFN> отмечает текст как определение (DeFeNition). Этим тегом можно отметить термин, впервые встречающийся в документе

Атрибуты
title
Всплывающая подсказка
Пример

Это обычный текст
Интернет - это...
Вторая строка с использованием тега <DFN>

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


DL

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

Тег <DL>(Definition List) служит для создания списка определений. Списки состоят из двух частей: определения (DT) и описания (DD)

Атрибуты
title
Показывает текст в виде всплывающей подсказки
Пример
HTML
Это язык разметки гипертекста
Браузер
Это программа для просмотра гипертекста в интернете
А выглядит код так:
<DL title="это список">
 <DT>HTML
  <DD>Это язык разметки гипертекста
 <DT>Браузер
  <DD> Это программа для просмотра гипертекста в интернете
</DL>
Категория
Списки


DT

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

Тег <DT>(Definition Term) является определением списка определений

Пример
Это определение
Описание определения
А выглядит код так:
<DL title="это список">
 <DT>Это определение
 <DD>Описание определения
 </DL>
Категория
Списки


EM

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

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

Пример

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

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


FONT

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

Тег <font> определяет выводимый шрифт

Атрибуты
size
Размер текста в пределах от 1 до 7,где 1 - самый мелкий шрифт. По умолчанию равен 3
color
Устанавливает цвет текста, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета,например для зеленого цвета<font color= "green">
Примечание: Атрибуты можно объединять
Пример

Это обычный текст
А это уже текст с использованием тега <font size=1>
Текст с использованием тега <font size=4>
Используем тег <font size=5 color="blue">

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


Hx

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

Тег <Hx> служит для создания заголовка. Всего существует 6 видов заголовков - от H1 до H6. Тегу <H1> соответствует самый большой заголовок, тегу <H6> - самый маленький

Атрибуты
align
Выравнивает заголовок в соответствии со следующими значениями
center
По центру
left
По левому краю
right
По правому краю
title
Всплывающая подсказка
Пример

Очень большой заголовок с тегом <H1>

Заголовок поменьше с тегом <H2 title="я-подсказка!">

Еще меньше с тегом <H3 align=right>

Маленький заголовок с тегом <H4>

Очень маленький заголовок с тегом <H5>
Самый маленький заголовок с тегом <H6 align=center>
Категория
Теги форматирования текста


HEAD

Тег <HEAD> и парный ему </HEAD>

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

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


HR

Тег <HR>. Закрывающий тег не требуется

Тег <HR> добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка

Атрибуты
size
Устанавливает высоту(толщину) линии
width
Устанавливает ширину линии в пикселах или процентах
noshade
Создает линию без тени
color
Задает линии определенный цвет
Пример

Это обычная линия <hr>

Это линия потолще и красная <hr size=3 color=red>
Категория
Теги форматирования текста


HTML

Тег <HTML> и парный ему </HTML>

Тег <HTML> указывает программе просмотра страниц что это HTML документ

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


I

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

Тег <i> создает наклонный текст

Пример

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

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


IMG

Тег <IMG>

Тег <img> служит для внедрения графики на страницы. На данный момент поддерживаются форматы файлов GIF, JPG, JPEG, PNG

Атрибуты
src
Обязательный атрибут, указывающий URL рисунка
align
Выравнивает изображение к одной из сторон документа
left | Выравнивание по левому краю
right | Выравнивание по правому краю
center | Выравнивание по центру
bottom | Выравнивание по нижнему краю
top | Выравнивание по верхнему краю
middle | Выравнивание по середине
alt
Выводит текст к картинке. Полезно, если браузер не отображает графику на странице
border
Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения
ismap
Сообщает, что изображение является картой-изображением на сервере
height
Высота картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером
hspace
Определяет размер свободного места в пикселах слева и справа от изображения, улучшает внешний вид страницы, отделяя изображение от текста
usemap
Сообщает, что изображение является картой-изображением на стороне клиента
vspace
Определяет размер свободного места в пикселах сверху и снизу от изображения, улучшает внешний вид страницы, отделяя изображение от текста
width
Ширина картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером
Пример

Отдыхаем!
Код с использованием тега <img>
<img src="../cat.jpg" alt="Отдыхаем!" vspace=10>

Категория
Графика


KBD

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

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

Пример

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

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

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


LI

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

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

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


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>
Категория
Теги форматирования текста


META

Тег <META>. Закрывающий тег </META> запрещен

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

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

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

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

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

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

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

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

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

Все тэги META не видны при просмотре документа

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


NOBR

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

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

Пример

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


OL

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

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

Атрибуты
type
Тип маркера
A | Заглавные буквы
a | Строчные буквы
I | Заглавные римские цифры
i | Строчные римские цифры
1 | Арабские цифры (по умолчанию)
start
Начальное значение для нумерованного списка при использовании арабских цифр
title
Всплывающая подсказка Пример
  1. Пугачева
  2. Орбакайте
  3. Киркоров
  4. Пресняков
А выглядит код так:
<OL type=A title="нумерованный список">
<LI>Пугачева
<LI>Орбакайте
<LI>Киркоров
<LI>Пресняков
</OL>
Категория
Списки


P

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

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

Параметры
align
Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
left | выравнивание по левому краю. По умолчанию
right | выравнивание по правому краю
center | выравнивание по центру
justify | выравнивание по ширине
title
Всплывающая подсказка
Пример

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

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


PRE

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

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

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


S

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

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

Пример

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

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


SAMP

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

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

Пример

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

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


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

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


TABLE

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

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

Атрибуты
bgcolor
Определяет задний фон таблицы
border
Толщина рамки в пикселах
cellspacing
Задает расстояние между ячейками таблицы
cellpadding
Задает расстояние между содержимым ячейки и ее рамкой
width
Ширина таблицы в процентах или пикселах
Пример

Пример простой таблицы
Заголовок столбца 1 | Заголовок столбца 2
Ячейка столбца 1, ряд 1 | Ячейка столбца 2, ряд 1
Ячейка столбца 1, ряд 2 | Ячейка столбца 2, ряд 2

Код для таблицы
<TABLE BORDER=2 COLS=2 BGCOLOR=yellow>
 <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>
Категория
Таблицы


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 align=right>
  <TD height=70 title="пример">Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд первый</TD>
 </TR>
 <TR align=center>
  <TD>Ячейка столбца первый, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD>
 </TR>
</TABLE>
Категория
Таблицы


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 align=right>
  <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>
Категория
Списки


Теги HTML

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

    Гиперссылки
    Графика
    Таблицы
    Теги форматировния документа
    Теги физического форматирования текста
    Теги логического форматирования текста
    Списки
    Элементы управления
    Другие теги

    Гиперссылки
  • A
    Графика
  • IMG
    Таблицы
  • TABLE
  • TD
  • TR
    Теги форматировния документа
  • 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
  • OL
  • UL
    Элементы управления
  • BUTTON
    Другие теги
  • ADDRESS
  • CENTER


Color

Таблица базовых цветов 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


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

Некоторые символы не входят в базовую часть таблицы кодов 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; | ƒ | знак функции

Греческие буквы
&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; | ω | строчная омега

Стрелки

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

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

&spades;&#9824; ♠знак масти 'пики'
&clubs;&#9827; ♣знак масти 'трефы'
&hearts;&#9829; ♥знак масти 'червы'
&diams;&#9830; ♦знак масти 'бубны'
&circ; | &#710; | ˆ | диакритический знак над гласной
&tilde;&#732;˜тильда
&trade;&#8482;™знак торговой марки

Знаки пунктуации

&bull;&#8226;•маленький черный кружок
&hellip;&#8230;…многоточие ...
&prime;&#8242; ′одиночный штрих - минуты
&Prime;&#8243; ″двойной штрих - секунды
&oline;&#8254; ‾надчеркивание
&frasl;&#8260; ⁄косая дробная черта

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

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


Основы CSS

Что такое CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример:

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

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

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

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

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

Пример:

  .b-с {font-weight: bold; text-align: center}
  – описание стиля для класса b-с

Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).

  <P CLASS="b-с">Текст параграфа</P>
– параграфу присвоен стиль класса b-с.

  <TD CLASS="b-c">текст</TD>
– ячейке таблицы присвоен стиль класса b-c.

Содержащийся в ячейке текст будет отображаться согласно описанию класса.

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

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

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

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

  • СВОЙСТВА ШРИФТА
  • ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
  • СВОЙСТВА ТЕКСТА

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

    px | Пикселы
    cm | Сантиметры
    mm | Миллиметры
    pt | Пункты (типограф.)
    % Проценты

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

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

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

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

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

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

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

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

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


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

text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст

H4 {text-decoration: underline;}
A {text-decoration: none;}
I {text-decoration: line-through;}
B {text-decoration:overline;}
text-align Определяет выравнивание элемента.
P {text-align:justify}
H5 {text-align: center}
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
P {text-indent: 50pt;}
line-height Управляет интервалами между строками текста.
P {line-height: 50 %}

Примеры

Подчеркнутый заголовок (underline)

Это ссылка без подчеркивания (none)
Перечеркнутый курсивный текст (line-through

Текст с подчеркиванием сверху (overline)

Заголовок по центру

Абзац с отступом для лучшего восприятия текстов при оформлении ваших страничек

Текст с уменьшеным интервалом на 50% между строками. Данным метод можно применять в декоративных целях


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

font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P {font-family: Times New Roman, sans-serif;}
font-weight Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}

Примеры

Жирный шрифт bolder
Жирный шрифт bold
Жирный шрифт на 200 %


CSS: ПОЛОСА ПРОКРУТКИ

Данные настройки применимы ко всем элементам, имеющим полосы прокрутки: сама страница (элемент BODY), текстовый блок (TEXTAREA) и т.д.
scrollbar-3dlight-color | Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки body {scrollbar-3dlight-color: green;}
scrollbar-arrow-color | Устанавливает или определяет цвет стрелок на кнопке со стрелками body {scrollbar-arrow-color: red;}
scrollbar-base-color | Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color body {scrollbar-base-color: green;}
scrollbar-darkshadow-color | Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками body {scrollbar-darkshadow-color: red;}
scrollbar-face-color | Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки body {scrollbar-face-color: green;}
scrollbar-highlight-color | Устанавливает или получает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол body {scrollbar-highlight-color: green;}
scrollbar-shadow-color | Схоже с scrollbar-darkshadow-color body {scrollbar-shadow-color: green;}
scrollbar-track-color | Устанавливает или получает цвет дорожки для ползунка body {scrollbar-track-color: aqua;}

Примеры


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

color | Определяет цвет элемента I {color: green;}
background-color | Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Разные броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом. H4 {background-color: yellow;}

Примеры
Курсивный текст зеленым цветом

Заголовок c желтым фоном


Фильтры

Фильтры в 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 | Отображает текст так, как будто он выделен мышью
redirect | Преобразует объект в объект DAImage, к которому можно применить все возможности технологии MS Direct Animation
revealTrans | Показывает или скрывает объекты, используя 23 определённых в фильтре перехода
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;


Фильтры: Shadow

Фильтры в DHTML

DropShadow

Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень

Синтаксис:
STYLE="filter:dropshadow(Color=значение, OffX=значение,OffY=значение,positive=эначение)"

Параметры

Color
Цвет тени
OffX
Смещеение тени относительно текста по оси X
OffY
Смещеение тени относительно текста по оси Y
positive
Характер освещения (0 или 1)
Пример
Пример фильтра dropshadow
Код для примера
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:dropshadow(color=silver,offx=3,offy=3,positive=0)>Пример фильтра shadow
</TABLE>

Shadow

Фильтр Shadow создает эффект тени

Синтаксис:
STYLE="filter:shadow(Color=значение, Direction=значение)"

Параметры

Color
Цвет тени
Direction
Направление тени в градусах
Пример
Пример фильтра shadow
Код для примера
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:shadow(color=green,direction=45)>Пример фильтра shadow
</TABLE>


Фильтры

Фильтры в DHTML

flipH

Фильтр FlipH переворачивает объект горизонтально

Синтаксис:
STYLE="filter:FlipH"
Пример
Образец | Фильтр
Код для примера

<IMG SRC="cat.jpg" STYLE=filter:fliph()>

flipV

Фильтр FlipV переворачивает объект вертикально

Синтаксис:
STYLE="filter:FlipV"
Пример
Образец | Фильтр
Код для примера

<IMG SRC="cat.jpg" STYLE=filter:flipv()>


Фильтры: Glow

Фильтры в DHTML

glow

Фильтр GLOW добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта

Синтаксис:
STYLE="filter:Glow(Strength=значение,Color=значение)" Параметры

Stregth
Сила свечения в диапазоне 0-100
Color
Цвет свечения
Пример
Пример фильтра glow
Код для примера
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:glow(strength=5,color=red)>Пример фильтра glow
</TABLE>


Фильтры: Gray

Фильтры в DHTML

Gray

Фильтр Gray удаляет цветовую гамму объекта и отображает его в серых тонах

Синтаксис:
STYLE="filter:gray"

Пример
Образец | Фильтр
Код для примера
<IMG SRC="cat.jpg" STYLE=filter:gray()>


Фильтры: Invert

Фильтры в DHTML

Invert

Фильтр Invert меняет оттенок, насыщение и яркость объекта на противоположные

Синтаксис:
STYLE="filter:invert"

Пример
Образец | Фильтр
Код для примера
<IMG SRC="cat.jpg" STYLE=filter:invert()>


Фильтры: Mask

Фильтры в DHTML

Mask

Фильтр Mask отображает текст так, как будто он выделен мышью

Синтаксис:
STYLE="filter:mask(Color=значение)"

Параметры

Color
Цвет, окружающий текст
Пример
Пример фильтра Mask
Код для примера
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:mask(color=darkblue)>Пример фильтра shadow
</TABLE>


Фильтры: Wave

Фильтры в DHTML

Wave

Фильтр Wave производит "синусоидальное" искажение объекта вдоль вертикальной оси

Синтаксис:
STYLE="filter:Wave(add=оригинал, freq=частота, lightStrength=величина, phase=начальная фаза, strength=величина)"

Параметры

add
Булево значение, определяющее использование оригинала (0 или 1). По умолчанию 0
freq
Количество волн
lightStrength
величина подсветки
phase
начальная фаза. По умолчанию - 0, изменяется от 0 до 100
strength
величина смещения
Пример
Пример фильтра Wave
Код для примера
<TABLE BORDER=1  STYLE=filter:wave(add=0,freq=2,lightstrength=10,phase=1,strength=3)>
<TR>
<TD>Пример фильтра shadow
</TABLE>


VAR

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

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

Пример

function() - фунция

Код для примера
<var>function()</var> - фунция

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