Создание HTML
Теги HTML
Тег HTML состоит из следующих друг за другом в определенном порядке
элементов:
· левой угловой скобки < (такого же, как "меньше чем" символа)
· необязательного слэша /, который означает, что тег является конечным
тегом, закрывающим некоторую структуру. Таким образом в этом контексте
Вы можете читать символ /, как конец...
· имени тега, например TITLE или PRE
· необязательных, если даже тег может иметь их, атрибутов. Тег может
быть без атрибутов или сопровождаться одним или несколькими атрибутами,
например: ALIGN=CENTER
· правой угловой скобки > (такой же, как символа "больше чем").
Примеры:
<H1>
<H1 ALIGN=LEFT>
Элементы HTML
Большинство, но не все теги HTML спарены так, что за открывающим тегом
следует соответствующий закрывающий тег, а между ними содержится текст
или другие теги, например:
<H1>Foreword</H1>
В таких случаях два тега и часть документа, отделенная ими, образуют
блок, называемый HTML элементом. Некоторые теги, например <HR>,
являются элементами HTML сами по себе, и для них соответствующий конечный
тег неверен. Далее мы будем называть теги по их именам, опуская обязательные
угловые скобки.
Атрибуты
Для каждого тега определяется множество возможных атрибутов. Большинство
тегов допускает один или несколько атрибутов, однако атрибутов может
и совсем не быть. Спецификация атрибута состоит из расположенных в следующем
порядке:
· имени атрибута, например 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 последовательности (более официально называемые символьными
объектами), которые начинаются знаком & (например, <)
· URL, так как он может содержать наименования файлов, которые являются
case чувствительными во многих операционных системах (например, в Unix).
Разделение на строки и использование пробелов и символов табуляции
Когда документ выводится на экран, пробелы и пустые линии не сохраняются,
за исключением текста, заключенного в теги PRE (предварительно отформатированный
текст). То есть любая последовательность пробелов, символов табуляции
и пустых линий эквивалентна единственному пробелу в файле HTML. С другой
стороны, пробел в файле HTML может быть представлен с использованием
любого количества пробелов или новыми (пустыми) строками.
=А=
Тег <A> и обязательный парный ему </A>
Тег <A> служит для создания гипертекста (ссылок). Гипертекст позволяет
осуществлять мгновенный переход от одного фрагмента текста к другому.
Сам гипертекст поддается форматированию
Атрибуты
name
Задает имя элемента. Имя используется, например, для создания ссылок
между фреймами
href
Задает URL ресурса, на который должен перейти пользователь, щелкнув
по ссылке. Атрибут может указывать как на внешний документ, так и на
элемент внутри данного документа.
Для создания гиперссылки вызова почтовой программы для написания письма
используется <a href="mailto:your@email">
title
Всплывающая подсказка
Пример
<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
Показывает текст в виде всплывающей подсказки
=BIG=
Тег <BIG> и обязательный парный ему </BIG>
Тег <BIG> выводит более крупный текст
Атрибуты
title
Показывает текст в виде всплывающей подсказки
=BLOCKQUOTE=
Тег <BLOCKQUOTE> и обязательный парный закрывающий тег </BLOCKQUOTE>
Тег <BLOCKQUOTE> предназначен для включения в документ длинных
цитат, 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) вставляет перевод строки
=BUTTON=
Тег <BUTTON> и обязательный парный ему </B>
Тег <BUTTON> создает кнопку с рисунком или с другими встроенными
элементами
Пример:
<button>
<table border=1>
<tr>
<td>Кнопочка
<tr>
<td>в таблице
</table></button>
=CENTER=
Тег <CENTER> и обязательный парный ему </CENTER>
Тег <CENTER> предназначен для горизонтального выравнивания ВСЕХ
элементов посередине окна браузера. CENTER это тег уровня блока, поэтому
им можно центрировать, например, таблицы, тексты
=CITE=
Тег <CITE> и обязательный парный ему </CITE>
Тег <CITE> используется для цитат, названий книг. Обычно наклонный
текст
Атрибуты
title
Всплывающая подсказка
=CODE=
Тег <CODE> и обязательный парный ему </CODE>
Тег <CODE> отмечает текст как небольшой фрагмент программного
кода. Обычно отображается моноширинным шрифтом
Атрибуты
title
Всплывающая подсказка
=DD=
Тег <DD> и необязательный парный ему </DD>
Тег <DD>(Definition Description) является описанием списка определений
Пример
<DL title="это список">
<DT>Это определение
<DD>Описание определения
</DL>
=DEN=
Тег <DFN> и обязательный парный ему </DFN>
Тег <DFN> отмечает текст как определение (DeFeNition). Этим тегом
можно отметить термин, впервые встречающийся в документе
Атрибуты
title
Всплывающая подсказка
=DL=
Тег <DL> и необязательный парный ему </DL>
Тег <DL>(Definition List) служит для создания списка определений.
Списки состоят из двух частей: определения (DT) и описания (DD)
Атрибуты
title
Показывает текст в виде всплывающей подсказки
Пример
<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
=FONT=
Тег <font> и обязательный парный ему </font>
Тег <font> определяет выводимый шрифт
Атрибуты
size
Размер текста в пределах от 1 до 7,где 1 - самый мелкий шрифт. По умолчанию
равен 3
color
Устанавливает цвет текста, используя значение цвета в виде RRGGBB -
пример: FF0000 - красный цвет, либо используя константы цвета,например
для зеленого цвета<font color= "green">
Примечание: Атрибуты можно объединять
=H=
Тег <Hx> и обязательныйпарный ему </Hx>
Тег <Hx> служит для создания заголовка. Всего существует 6 видов
заголовков - от H1 до H6. Тегу <H1> соответствует самый большой
заголовок, тегу <H6> - самый маленький
Атрибуты
align
Выравнивает заголовок в соответствии со следующими значениями
center
По центру
left
По левому краю
right
По правому краю
title
Всплывающая подсказка
=HEAD=
Тег <HEAD> и парный ему </HEAD>
Тег <HEAD> определяет место, где помещается различная информация
не отображаемая в теле документа. Здесь располагается тег названия документа
и теги для поисковых машин
Категория
Теги форматирования документа
=HR=
Тег <HR>. Закрывающий тег не требуется
Тег <HR> добавляет в HTML документ горизонтальную линию. Перед
и после линии помещается пустая строка
Атрибуты
size
Устанавливает высоту(толщину) линии
width
Устанавливает ширину линии в пикселах или процентах
noshade
Создает линию без тени
color
Задает линии определенный цвет
=HTML=
Тег <HTML> и парный ему </HTML>
Тег <HTML> указывает программе просмотра страниц что это HTML
документ
=I=
Тег <i> и обязательный парный ему </i>
Тег <i> создает наклонный текст
Тег <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 наберите: <kbd>win</kbd>
=LI=
Тег <LI> и необязательный парный ему </LI>
Тег <LI>(List Item) служит для обозначения элемента (строки) списка.
Используется в нумерованных(OL) и ненумерованных(UL) списках
Пример
A. Пугачева
B. Орбакайте
C. Киркоров
D. Пресняков
А выглядит код так:
<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 Движение вверх
Пример :
<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="© 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
Всплывающая подсказка
Пример
E. Пугачева
F. Орбакайте
G. Киркоров
H. Пресняков
А выглядит код так:
<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> указывает, что текст должен быть зачеркнут
=SAMP=
Тег <SAMP> и обязательный парный ему </SAMP>
Тег <SAMP> отмечает текст как образец (sample). Используется для
отметки текста, выдаваемого программами. Отображается моноширинным шрифтом
=SMALL=
Тег <SMALL> и обязательный парный ему </SMALL>
Тег <SMALL> выводит более мелкий текст
Атрибуты
title
Показывает текст в виде всплывающей подсказки
=STRONG=
Тег <strong> и обязательный парный ему </strong>
Тег <strong> используется для выделения из текста слова (жирный
текст). Происходит от слова strong emphasis - сильный акцент. Аналогичен
тегу B
=SUB=
Тег <sub> и обязательный парный ему </sub>
Тег <sub> приспускает текст
Пример
Текст с использованием тега <sub>
Формула воды - H2O
=SUP=
Тег <sup> и обязательный парный ему </sup>
Тег <sup> приподнимает текст
=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
Всплывающая подсказка
Пример
<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 - по нижнему краю
Пример
<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> создает текст, имитирующий стиль печатной машинки
=U=
Тег <u> и обязательный парный ему </u>
Тег <u> указывает, что текст должен быть подчеркнут
=UL=
Тег <UL> и обязательный парный ему </OL>
Тег <UL>(Unordered List) служит для создания ненумерованного списка.
Допускается вложение ненумерованного списка в списки другого вида
Атрибуты
type
Тип маркера
disk Закрашенный кружок. По умолчанию
circle Незакрашенный кружок
square Квадратик
title
Всплывающая подсказка
Специальные символы
Некоторые символы не входят в базовую часть таблицы кодов ASCII. К ним
относятся буквы алфавитов части европейских языков, математические и
некоторые другие символы. Некоторые символы, введенные в HTML документ
будут интерпретироваться не так, как задумал автор. Это, например, символы
"<" и ">", используемые для указания тегов.
В этих случаях можно вводить нужные символы с помощью специальных кодов.
Коды начинаются с символа "амперсанд"(&). За ним следует
название символа либо его числовой код в десятичной или шестнадцатеричной
системе. Завершает код символ "точка с запятой"(;).
В спецификации HTML указано большое количество спецсимволов, но только
некоторые из них используются.
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 %}
B {font-weight: bolder;} .b {font-weight: bold;} .size {font-size: 200%;}
font-family Используется для указания шрифта или шрифтового семейства,
которым будет отображаться элемент.P {font-family: Times New Roman,
sans-serif;}
font-weight Определяет степень жирности шрифта с помощью трех параметров:
lighter, bold, bolderB {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться как
в относительной (проценты), так и абсолютной величине (пункты, пикселы,
сантиметры)H1 {font-size: 200%;}H2 {font-size: 150px;}H3 {font-size:
400pt;}
body {scrollbar-3dlight-color: green;scrollbar-arrow-color: red;scrollbar-base-color:
green;scrollbar-darkshadow-color: red;} .SBColor { scrollbar-3dlight-color:blue;scrollbar-arrow-color:
white;scrollbar-base-color:green;scrollbar-face-color:pink;scrollbar-track-color:
aqua;}
CSS: ПОЛОСА ПРОКРУТКИ
Данные настройки применимы ко всем элементам, имеющим полосы прокрутки:
сама страница (элемент BODY), текстовый блок (TEXTAREA) и т.д.
scrollbar-3dlight-color Определяет или устанавливает цвет верха и левой
части ползунка и кнопок со стрелками на полосе прокруткиbody {scrollbar-3dlight-color:
green;}
scrollbar-arrow-color Устанавливает или определяет цвет стрелок на кнопке
со стрелкамиbody {scrollbar-arrow-color: red;}
scrollbar-base-color Устанавливает или определяет цвет основных элементов
ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если
не определены параметры в scrollbar-face-colorbody {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-colorbody {scrollbar-shadow-color:
green;}
scrollbar-track-color Устанавливает или получает цвет дорожки для ползункаbody
{scrollbar-track-color: aqua;}I {color: green;} H4 {background-color:
yellow;}
CSS: ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
color Определяет цвет элементаI {color: green;}
background-color Устанавливает цвет фона для элемента - именно для элемента,
а не для странички. Разные броузеры отображают это свойство по-разному:
Microsoft IE отводит под фон элемента всю доступную ширину страницы,
а Netscape Navigator - лишь ширину, занимаемую этим элементом.H4 {background-color:
yellow;}
Фильтры в DHTML
DropShadow
Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном
направлении, создавая тем самым эффект объекта, расположенного над страницей
и отбрасывающего на неё тень
Синтаксис:
STYLE="filter:dropshadow(Color=значение, OffX=значение,OffY=значение,positive=эначение)"
Параметры
Color
Цвет тени
OffX
Смещеение тени относительно текста по оси X
OffY
Смещеение тени относительно текста по оси Y
positive
Характер освещения (0 или 1)
Пример
<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
Направление тени в градусах
Пример
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:shadow(color=green,direction=45)>Пример фильтра
shadow
</TABLE>
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
Фильтр GLOW добавляет свечение вдоль внешних границ объекта, создавая
эффект "возгорания" границ объекта
Синтаксис:
STYLE="filter:Glow(Strength=значение,Color=значение)" Параметры
Stregth
Сила свечения в диапазоне 0-100
Color
Цвет свечения
Пример
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:glow(strength=5,color=red)>Пример фильтра glow
</TABLE>
Gray
Фильтр Gray удаляет цветовую гамму объекта и отображает его в серых
тонах
Синтаксис:
STYLE="filter:gray"
Пример
<IMG SRC="cat.jpg" STYLE=filter:gray()>
Invert
Фильтр Invert меняет оттенок, насыщение и яркость объекта на противоположные
Синтаксис:
STYLE="filter:invert"
Пример
<IMG SRC="cat.jpg" STYLE=filter:invert()>
Mask
Фильтр Mask отображает текст так, как будто он выделен мышью
Синтаксис:
STYLE="filter:mask(Color=значение)"
Параметры
Color
Цвет, окружающий текст
Пример
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:mask(color=darkblue)>Пример фильтра shadow
</TABLE>
DropShadow
Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном
направлении, создавая тем самым эффект объекта, расположенного над страницей
и отбрасывающего на неё тень
Синтаксис:
STYLE="filter:dropshadow(Color=значение, OffX=значение,OffY=значение,positive=эначение)"
Параметры
Color
Цвет тени
OffX
Смещеение тени относительно текста по оси X
OffY
Смещеение тени относительно текста по оси Y
positive
Характер освещения (0 или 1)
Пример
<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
Направление тени в градусах
Пример
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:shadow(color=green,direction=45)>Пример фильтра
shadow
</TABLE>
Wave
Фильтр Wave производит "синусоидальное" искажение объекта
вдоль вертикальной оси
Синтаксис:
STYLE="filter:Wave(add=оригинал, freq=частота, lightStrength=величина,
phase=начальная фаза, strength=величина)"
Параметры
add
Булево значение, определяющее использование оригинала (0 или 1). По
умолчанию 0
freq
Количество волн
lightStrength
величина подсветки
phase
начальная фаза. По умолчанию - 0, изменяется от 0 до 100
strength
величина смещения
Пример
<TABLE BORDER=1 STYLE=filter:wave(add=0,freq=2,lightstrength=10,phase=1,strength=3)>
<TR>
<TD>Пример фильтра shadow
</TABLE>
|