С другой стороны, как говорит народная мудрость, - по одежке встречают... Другими словами, от оформления тоже многое зависит.
Поэтому, прежде чем говорить о технике программирования, следует немного поговорить о дизайне.
Прежде всего, наиболее важная информация должна быть в начале страницы. Название сайта должно быть на самом видном месте - в левом верхнем углу и присутствовать на каждой странице в виде ссылки на главную страницу.
Страничка не должна быть перегружена графикой и загружаемыми объектами. Для того, чтобы ответ системы воспринимался как мгновенный, предельное значение реагирования системы должно не превышать 0.1 сек. Чтобы восприятие системы не нарушалось и ход мысли клиента не переключался, время реагирования должно не превышать 1 сек. Предельное время, в течение которого пользователь сфокусирован на диалоге не более 10 сек. Эти показатели выработаны Joint Computer Conference в 1968 году и за те несколько лет, которые прошли с момента принятия этих рекомендаций, они стали лишь более актуальными.
Чтобы Web-страничка воспринималась корректно, необходимо использовать для указания размеров элементов страницы не абсолютные, а относительные значения - проценты от общего размера. Более эффективно для каждого разрешения и типа браузера разрабатывать таблицу стилей в файе *.css и в зависимости от той или иной ситуации использовать соответствующие стили.
Разработка дизайна не входит в задачи этого пособия. Это отдельная большая тема, которой посвящены как отдельные издания, как электронные, так и полиграфические (см., например, Нильсен Я. Веб-дизайн. Символ-плюс, СПб, 2002, 512 с.).
Однако совсем уйти от этой темы не возможно, поэтому очень коротко, отметим основные постулаты оформления сайтов.
Правила оформления текстов.
Удобочитаемость.
Если текст не воспринимается, то дизайн и прочее не воспринимаются.
По умолчанию поиск должен проводиться по всему сайту с возможностью поиска на странице. Должна присутствовать возможность выбора числа найденных ссылок. Станица поиска должна быть короткой с возможностью предоставления расширенного поиска. На странице выбора языка каждая ссылка должна быть на своем языке. При этом текущий язык страницы не следует выносить в список.
При выводе изображения атрибут alt должен давать подробное описание изображения.
Для начала достаточно. Теперь перейдем к технике.
HTML (HyperText Markup Language) язык описания структуры страницы, предоставляющий возможность создания ссылок на связанные страницы.
Инструкции форматирования в HTML называются тегами (tags). Иногда теги содержат параметры.
Например,
Протокол://Имя сервера:Номер порта/Имя файла
Протокол в большинстве случаев им является http (HiperText Transfer Protocol)
Тег <META> предоставляет информацию о документе для браузера, поисковых машин и других приложений.
Синтаксис:
Для обновления страницы не из кэша, а с сервера следует использовать конструкцию
<P> не обязательно парный тег ограничивающий параграф. Перед параграфом автоматически ставится пустая строка. Единственным атрибутом является тег выравнивания align.
<A href=http://www.sky.com/><img src=Images/sky.gif alt= "Small sky" width=100 height=100></A>
Наиболее часто используемые символы приведем в таблице:
Первое решение заключается оно в использовании bitmap-a изображения.
Для того, чтобы создать "карту" в языке html существует тег <map>, задающий
разбиение изображения на "горячие" области, т.е. области при нажатии
на которые можно загрузить другой файл html.
Параметр у этого тега только один - это name.
Пример:
Закрывающая скобка должна обязательно присутствовать. Внутри тега <map>...</map>
должны следовать элементы описывающие "горячие" области.
Эти области задает элемент <area>. Он не должен содержать
закрывающей скобки. У него существуют следующие параметры :
Для окружности : coords="Х центра, Y центра, радиус"
Для прямоугольника : coords="лево верх Х, лево верх Y, право низ X, право низ Y"
Для полигонов : coords="Х точки 1, Y точки 1, X точки 2, Y точки 2, ......"
Следование областей может быть произвольным, но если какие-то части областей
пересекаются, то на область пересечения будет реагировать та область, которая идет
в списке первой. Это как раз касается областей с атрибутом nohref, т.е.
чтобы выколоть в области дырку, надо сначала прописать область с nohref,
а затем нормальную.
Пример тега <area>:
Для того, чтобы назначить изображению карту надо использовать атрибут usemap
и в нем указать значение name в теге <map>. Пример:
При указании имени важно учитывать регистр.
Давайте теперь вернемся к нашему "разбиваемому изображению". Чтобы применить
способ карт, создадим вот такой код :
Разрежем картинку на части
и соберем все эти фрагменты в таблицу таким образом, чтобы получился целый рисунок.
Организовывая навигацию по фреймам, следует определить уникальность их имен посредством установки атрибута name тега <FRAME>. После этого перемещаться от фрейма к фрейму можно используя в теге гиперссылок <A> не только атрибут href для указания ссылки, но и атрибут target для определения фрейма, в который будет производиться загрузка документа.
Пример.
<A href="MainFrame.html">Пример. </A>
Синтаксис
Парный тег <DIV> позволяет выделить фрагмент документа (например несколько абзацев вместе с заголовком) и
запрограммировать как единый объект. Использование атрибута style тега <div> управляет стилем этого
документа. Тег <SPAN> делает то же что и тег <DIV>, но для небольших фрагментов.
Для форматирования страницы целиком (размещение текста, шрифты и пр.) используются каскадные таблицы стилей
(Cascading Style Sheet). Использование CSS позволяет реализовать форматирование страницы независимо от ее
заполнения.
Использование CSS можно проводить двумя методами - встраивание CSS в документ и связывание (Linking Style)
форматируемого документа с CCS, хранящейся в отдельном файле (с расширением *.css)
Встроенная таблица стилей обычно размещается в блоке
Тег
Если стиль документа изменяется в процессе работы над документом, то целесообразно таблицу стилей сохранять в отдельном
текстовом файле с расширением *.css. Для связывания таблицы стилей с документом используется тег
Пример
Например инструкция
Пример использования селектора стиля
Пример стилей границ.
Пример бегущей строки
Синтаксис
Blur(add, direction, strength)
Код в этом случае будет иметь вид
Существенным ограничением использования фонового режима является невозможность управления звучанием после загрузки звукового файла.
Использование тега <EMBED> свободно от этого недостатка.
Параметрами тега можно управлять, например, можно скрыть панель проигрывателя.
Подключение объектов ActiveX дает широкие возможности использования мультимедийных приложений.
В этом случае во избежание конфликта устройств необходимо добивить идентификатор класса проигрывателя CLSID
(идентификатор класса объекта ActiveX можно найти в реестре по адресу HKEY_CLASSES_ROOT/CLSID).
Значения параметров можно либо оставлять теми, которые приняты по умолчанию, либо установить требуемые.
Использование объектов ActiveX позволяет свойства и методы этих объектов использовать из сценариев HTML.
При использовании объектов ActiveX полезно использовать атрибут codeBase, содержащий путь к этому объекту.
В случае отсутствия требуемого объекта, пользователь сможет загрузить и установить на свой компьютер, недостающий элемент.
Например, можно управлять элементами WEB-формы объектом Media Player.
Код со списком параметров имеет вид
Существенным ограничением использования тега <IMG> с атрибутом <DYNSRC> является невозможность управления
видео данными после их загрузки.
Использование тега <EMBED> свободно от этого недостатка.
Как и в случае использования звуковых схем, подключение объектов ActiveX дает широкие возможности использования
видео данных.
Заметим, что в этом случае необходимо добавить идентификатор класса проигрывателя CLSID.
HyperText Markup Language
<FONT size=5> Например, </Font>
Большинство тегов представлено в виде пар
<tag>...</tag>
Теги не чувствительны к регистру, но по традиции их принято писать прописными буквами.
Основные теги HTML.
Условно теги можно классифицировать по трем категориям:
Теги комментариев
Текст между парным тегом <COMMENT> или внутри тега <!...> является комментарием и не выводятся в окне браузера.
Парный тег <HTML> замыкает содержимое всей страницы (за исключением, быть может, комментариев).
Теги заголовка
Парный тег <HEAD> позволяет создать название <TITLE>, соотношение между несколькими документами <BASE>, метод посылки сообщений программам поиска <META>.
Парный тег <TITLE> определяет текст названия документа, который отображается в окне браузера.
Тег <BASE> содержит полный URL документа. Этот тег имеет один обязательный атрибут href задающий полный URL документа.
Адреса URL (Uniform Resourse Locators) Web-адрес. Он состоит из четырех частей и имеет вид
Имя сервера имя компьютера или его IP адрес.
Номер порта обычно не используется и равен 80.
Имя файла полное имя файла.
<META
content=description
http-equiv=response
name=text
title= text
url=url
>
Если значение http-equiv равно "refresh", то документ перегружается через значение атрибута content число секунд.
Значение url содержит адрес документа, загружаемого через значение content секунд.
Например, content="2; url= example.html"
Для облегчения работы поиcковой машине можно создать два тега <META>, в первом задать значение
name="keywords", а другого name="descripsion" (краткое описание).
<META
name="keywords"
content="Линия. плоскость">
<META
name="descripsion"
content="Материалы по графике">
<META
http-equiv="expires"
content="0">
Тег тела документа
Сразу после заголовка идет тело документа ограниченное парным тегом <BODY>.
Синтаксис
<BODY
alink=color
background=url
bgcolor=color
bgproperties=fixed
bottomargin=pixels
class=classname
id=value
lang=language
language=javascript | jscript | vbscript
leftmargin=pixals
link=color
rightmargin=pixels
scrool=yes | no
style=properties
text=color
title=string
topmargin=n
vlink=color
event=script
>
Опишем наиболее часто используемые атрибуты.
Таблица базовых цветов BgColor
Black
000000Navy
000080Darkblue
00008BMediumblue
0000CDBlue
0000FF
Darkgreen
006400Green
008000Teal
008080Darkcyan
008B8BDeepskyblue
00BFFF
Darkturquoise
00CED1Mediumspringgreen
00FA9ALime
00FF00Springgreen
00FF7FCyan
00FFFF
Midnightblue
191970Dodgerblue
1E90FFLightseagreen
20B2AAForestgreen
228B22Seagreen
2E8B57
Darkslategray
2F4F4FLimegreen
32CD32Mediumseagreen
3CB371Turquoise
40E0D0Royalblue
4169E1
Steelblue
4682B4Darkslateblue
483D8BMediumturquoise
48D1CCIndigo
4B0082Darkolivegreen
556B2F
Cadetblue
5F9EA0Cornflowerblue
6495EDMediumauqamarine
66CDAAOlivedrab
688E23Dimgray
696969
Slateblue
6A5ACDSlategray
708090Lightslategray
778899Lawngreen
7CFC00Mediumslateblue
7B68EE
Chartreuse
7FFF00Aquamarine
7FFFD4Maroon
800000Purple
800080Olive
808000
Gray
808080Skyblue
87CEEBLightskyblue
87CEFABlueviolet
8A2BE2Darkred
8B0000
Darkmagenta
8B008BSaddlebrown
8B4513Darkseagreen
8FBC8FLightgreen
90EE90Mediumpurple
9370D8
Darkviolet
9400D3Palegreen
98FB98Darkorchid
9932CCYellowGreen
9ACD32Sienna
A0522D
Brown
A52A2ADarkgray
A9A9A9Lightblue
ADD8E6Greenyellow
ADFF2FPaleturquoise
AFEEEE
Lightsteelblue
B0C4DEPowderblue
B0E0E6Firebrick
B22222Darkgoldenrod
B8860BMediumorchid
BA55D3
Rosybrown
BC8F8FDarkkhaki
BDB76BChocolate
D2691EBurlywood
DEB887Mediumvioletred
C71585
Indianred
CD5C5CPeru
CD853FTan
D2B48CLightgrey
D3D3D3Palevioletred
D87093
Thistle
D8BFD8Orchid
DA70D6Goldenrod
DAA520Gainsboro
DCDCDCPlum
DDA0DD
Lightcyan
E0FFFFLavendar
E6E6FADarksalmon
E9967AViolet
EE82EEPalegoldenrod
EEE8AA
Lightcoral
F08080Khaki
F0E68CAliceblue
F0F8FFHoneydew
F0FFF0Azure
F0FFFF
Sandybrown
F4A460Wheat
F5DEB3Beige
F5F5DCWhitesmoke
F5F5F5Mintcream
F5FFFA
Ghostwhite
F8F8FFSalmon
FA8072Antiquewhite
FAEBD7Linen
FAF0E6Lightgoldenrodyellow
FAFAD2
Oldlace
FDF5E6Red
FF0000Magenta
FF00FFdeeppink
FF1493Orangered
FF4500
Tomato
FF6347Hotpink
FF69B4Coral
FF7F50Darkorange
FF8C00Lightsalmon
FFA07A
Orange
FFA500Lightpink
FFB6C1Peachpuff
FFDAB9Gold
FFD700Navajowhite
FFDEAD
Pink
FFC0CBMoccasin
FFE4B5Bisque
FFE4C4Mistyrose
FFE4E1Blanchedalmond
FFEBCD
Papayawhip
FFEFD5Lavenderblush
FFF0F5Seashell
FFF5EELemonchiffon
FFFACDFloralwhite
FFFAF0
Snow
FFFAFAYellow
FFFF00Lightyellow
FFFFE0Ivory
FFFFF0White
FFFFFF Теги форматирования документа
Теги заголовков разного уровня от <H1> до <H6> являются парными тегами со следующими атрибутами
Синтаксис
<H1
align=center | left | right
class=classname
id=value
lang=language
language=javascript | jscript | vbscript
style=properties
title=string
event=script
>
Из них наиболее популярным является тег выравнивания align.
<CENTER> парный тег центрирования.
<BR> конец строки.
<HR> горизонтальная линия.
Синтаксис
<HR
align=center | left | right
color=color
id=value
lang=language
language=javascript | jscript | vbscript
noshade
size=n
style=properties
title=string
width=n
event=script
>
Здесь noshade линия без тени, size толщина линии в пикселах и width длина линии или в пикселах или в процентах по отношению к ширине экрана.
Далее парные теги задающие тип шрифта
<B> - полужирный, <I> -курсив, <U> -подчеркнутый, <STRIKE> -зачеркнутый, <ТТ> - фиксированной ширины. <BIG> и <SMALL> -больший и меньший размеры, <SUB>, <SUP> - верхний и нижний индексы, <CITE> - для выделения цитат, <СODE> и <PRE> для вывода небольших и больших фрагментов кода.
Парный тег <ADDRESS> служит для идентификации автора и последнего обновления страницы. Располагается либо в начале, либо в конце документа.
<ADDRESS>
Created by POVT
Last Modified 01.01.01
</ADDRESS>
Парный тег <FONT> задает шрифт.
<FONT
class=classname
color=color
face=font
id=value
lang=language
language=javascript | jscript | vbscript
size=n
style=properties
title=string
event=script
>
Основные атрибуты size размер шрифта от 1 до 7 (самый большой). Если число используется со знаком + или -,
то это означает относительный размер сравнительно с основным шрифтом определенным тегом <BASEFONT>.
Face имя шрифта, например, "Times New Roman". <BASEFONT> задает стандартный шрифт (список атрибутов тот же).
Например, Текст <B><Font size=5 color=green> Текст </Font></B>
Теги изображений
Для вставки рисунка служит парный тег <IMG>
Синтаксис
<IMG
align=absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top
alt=text
border=n
class=classname
datafld=colname
datasrc=#id
dynsrc=url
height=n
hspace=n
id=value
ismap
lang=language
language=javascript | jscript | vbscript
loop=n
lowscr=url
name=name
src=url
style=properties
title=string
usemap=url
vspace=n
width=n
event=script
>
Опишем наиболее часто используемые атрибуты.
<IMG align=middle alt="Небо" border=0 src=Images/sky.gif>
Теги гиперссылки и закладки
Указателем гиперссылки может быть слово, группа слов, изображение. Указатель гиперссылок создаются при помощи парного тега <A> (anchor-якорь).
Синтаксис
<A
accesskey=key
class=classname
datafld=colname
datasrc=#id
dynsrc=url
href=url
id=value
lang=language
language=javascript | jscript | vbscript
methods=http_methds
name=name
rel="stylesheet"
style=properties
tabindex=n
target=window_name | _blank | _parent | _self | _top
title=string
urn=urn
event=script
>
Опишем наиболее часто используемые атрибуты.
Удобство закладок в том, что можно на каждой странице в начале создать оглавление. Это очень облегчает навигацию и позволяет без прокрутки сразу перейти на нужную строку или заголовок.
Для того чтобы создать эту закладку надо вставить, например, такую вот строчку: <A name=metka>
Для использования этих закладок в ссылке указывается название закладки после значка #(решетки) <A href=#metka>метка</A>
Если закладка располагается в другом файле, можно использовать ссылку <A href=Test.html#metka>Закладка в документе Test</A>
Параметры
В качестве ссылок можно использовать изображения. Для этого внутри <A>...</a> нужно указать
<img src=...>.
В этом случае изображение будет обводится рамкой в 2 пиксела, и если это мешает то следует использовать атрибут border=0 для изображений.
Приведем пример ссылки на электронную почту
<A href="mailto:mail@ukr.net"> ссылки </A>
Специальные символы
В HTML документах допустимо использование всех символов в соответствии с их ASCII кодировкой.
При этом только нужно добавить знак амперсанта (&), знак номера #, номер символа и далее точка с запятой
(© это &#169;). Кроме того, есть несколько символов, значения которых зарезервированы, поэтому для их
вывода используют escape-последовательности, например,
< <, > >, & &, " ",© - ©, ® - ®.
Символ Код Вид Описание
" " " двойная кавычка
& & & амперсанд
< < < знак 'меньше'
> > > знак 'больше'
  неразрывный пробел
¢ ¢ ¢ цент
£ £ £ фунт стерлингов
¤ ¤ ¤ денежная единица
¥ ¥ ¥ иена или юань
§ § § параграф
© © © знак copyright
¬ ¬ ¬ знак отрицания
® ® ® знак зарегистрированной торговой марки
° ° ° градус
± ± ± плюс-минус
· · · точка
¼ ¼ ¼ одна четвертая
½ ½ ½ одна вторая
¾ ¾ ¾ три четвертых
× × × знак умножения
÷ ÷ ÷ знак деления
Ø Ø Ø пустое множество
ø ø ø тоже пустое множество, но поменьше
ƒ ƒ ƒ знак функции
Греческие буквы
Α Α Α заглавная альфа
Β Β Β заглавная бета
Γ Γ Γ заглавная гамма
Δ Δ Δ заглавная дельта
Ε Ε Ε заглавная эпсилон
Ζ Ζ Ζ заглавная дзета
Η Η Η заглавная эта
Θ Θ Θ заглавная тета
Ι Ι Ι заглавная йота
Κ Κ Κ заглавная каппа
Λ Λ Λ заглавная лямбда
Μ Μ Μ заглавная мю
Ν Ν Ν заглавная ню
Ξ Ξ Ξ заглавная кси
Ο Ο Ο заглавная омикрон
Π Π Π заглавная пи
Ρ Ρ Ρ заглавная ро
Σ Σ Σ заглавная сигма
Τ Τ Τ заглавная тау
Υ Υ Υ заглавная ипсилон
Φ Φ Φ заглавная фи
Χ Χ Χ заглавная хи
Ψ Ψ Ψ заглавная пси
Ω Ω Ω заглавная омега
α α α строчная альфа
β β
β строчная бета
γ γ
γ строчная гамма
δ δ
δ строчная дельта
ε ε
ε строчная эпсилон
ζ ζ
ζ строчная дзета
η η
η строчная эта
θ θ
θ строчная тета
ι ι
ι строчная йота
κ κ
κ строчная каппа
λ λ
λ строчная лямбда
μ μ
μ строчная мю
ν ν
ν строчная ню
ξ ξ
ξ строчная кси
ο ο
ο строчная омикрон
π π
π строчная пи
ρ ρ
ρ строчная ро
ς ς
ς строчная сигма(final)
σ σ
σ строчная сигма
τ τ
τ строчная тау
υ υ
υ строчная ипсилон
φ φ
φ строчная фи
χ χ
χ строчная хи
ψ ψ
ψ строчная пси
ω ω
ω строчная омега
Стрелки
← ←
← стрелка влево
↑ ↑
↑ стрелка вверх
→ →
→ стрелка вправо
↓ ↓
↓ стрелка вниз
↔ ↔
↔ стрелка влево-вправо
Прочие символы
♠ ♠
♠ знак масти 'пики'
♣ ♣
♣ знак масти 'трефы'
♥ ♥
♥ знак масти 'червы'
♦ ♦
♦ знак масти 'бубны'
˜ ˜ ˜ тильда
™ ™ ™ знак торговой марки
– – – тире
— — — длинное тире
‘ ‘ ‘ левая одиночная кавычка
’ ’ ’ правая одиночная кавычка
‚ ‚ ‚ нижняя одиночная кавычка
“ “ “ левая двойная кавычка
” ” ” правая двойная кавычка
„ „ „ нижняя двойная кавычка Списки
Списки и таблицы являются очень удобным средством форматирования текста. Рассмотрим вначале списки - маркированный и нумерованный.
Парный тег <LI> (list item) определяет элемент в маркированном и нумерованном списках. Используется вместе с парными тегами <UL> и <OL>.
Синтаксис
<LI
class=classname
id=value
lang=language
language=javascript | jscript | vbscript
style=properties
title=string
type= 1 | A | a | I | i
value=value
event=script
>
Атрибут type задает тип нумерации упорядоченного списка и тип маркера. Допустимые значения
Value - начальный номер.
Текст помещенный между парными тегами <UL>...</UL> образует маркированный список, а между <ОL>...</ОL>- нумерованный. Элементы списка лежат внутри тегов <LI>...</LI>. Синтаксис аналогичен.
<UL>
<LI>Европа
<OL>
<LI type =i> Германия </LI>
<LI type =i> Украина </LI>
</OL>
</LI>
<LI>Азия
<OL>
<LI value=3 type =i> Китай </LI>
<LI type =i> Индия </LI>
</OL>
</LI>
</UL>
Оформление точкой можно изменить задавая другое начертание атрибутом type, который может принимать значение disc, square и circle.
<UL>
<LI type=circle>Европа
<OL>
<LI type =1> Германия </LI>
<LI type =1> Украина </LI>
</OL>
</LI>
<LI type=square>Азия
<OL>
<LI value=3 type =a> Китай </LI>
<LI type =a> Индия </LI>
</OL>
</LI>
</UL>
Списки определений отличаются от предыдущих по структуре.
Парный тег <DL> создает список определений, тег (не обязательно парный) <DT> помечает определенный термин, а тег (тоже не обязательно парный) <DD> помечает определение термина заданного тегом <DT>. Приведем пример.
html код выглядит следующим образом
<DL>
<DT> A
<DL>
<DT> <A>
<DD> Задает гиперссылки
<DT><ADDRESS>
<DD>идентификация автора документа
</DL>
<DT> B
<DL>
<DT> <B>
<DD> полужирный шрифт
<DT><BASE>
<DD>задание базового URL
</DL>
</DL>
В качестве маркера может быть использовано графическое изображение. Для этого достаточно для тега <LI> определить значение свойства list-style-image атрибута style.
Таблицы
Парный тег таблиц называется <TABLE>. Параметрами этого тега задается общий вид таблицы, ее цвет, толщина рамки и многое другое.
Внутри этого тега располагаются следующие парные теги -
<TR> строка таблицы, <TH> ячейка заголовка. В ней выравнен по центру и
выделен полужирным шрифтом, <TD> ячейка, <CAPTION> заголовок таблицы.
Синтаксис
<Table
align= center | left | right
background=url
bgcolor=color
border=n
bordercolor=color
bordercolordark=color
bordercolorlight=color
cellpadding=n
cellspacing=n
class=classname
cols=n
datapagesize=n
datasrc=#id
frame=above | below | border | box | insides | lhs | rhs | void | vsides
height=n
id=value
lang=language
language=javascript | jscript | vbscript
rules = all | cols | groups| none | rows
style=properties
title=string
width = n
event=script
>
Синтаксис
<Caption
align= bottom | center | left | right | top
class=classname
id=value
lang=language
language=javascript | jscript | vbscript
style=properties
title=string
event=script
>
a1,1 a1,2
a2,1 a2,2
<Caption align=bottom>
Пример таблицы:
</Caption>
<table border=1>
<tr><td>a<sub>1,1</sub><td>a<sub>1,2</sub>
<tr><td>a<sub>2,1</sub><td>a<sub>2,2</sub>
</table>
<
Тег <tr> имеет несколько атрибутов.
Ячейки таблицы более богаты своими параметрами.
В них входят все параметры строк таблицы описанные выше, ну и еще парочка:
rowspan объединяет указанное количество ячеек в одну по вертикали и
colspan объединяет ячейки по горизонтали.
Естественно width и height задают рекомендуемые размеры ячейки по горизонтали
и вертикали. Если ячейка пустая, т.е. <td></td>
то она не отображается браузером, хотя для этого надо пользоваться
<td nospan></td>
a b c d e
f g h
i j
z
<Caption align=top>
Пример:
</Caption>
<table border=3>
<tr><td>a<td>b<td>c<td>d<td>e
<tr><td background=images/sky.gif align=middle colspan=2 rowspan=2>f<td colspan=2>g<td width=10% rowspan=2>h
<tr><td>i<td>j
<tr><th bgcolor=navy align=center colspan=5><font color=snow>z</font>
</table>
Отметим, что в ячейке можно сделать вложенную таблицу, а в ней еще одну и т.д.
Атрибут <th> также задает ячейку, но только отличается тем что текст внутри
такой ячейки отображается жирным шрифтом.
Навигация по рисунку
При разработке сайтов содержащих большое количество
графики полезно использовать навигацию по рисунку, то есть элементы
рисунка выполняют функции кнопок. Например,
<map name="time">
.....
</map>
<area shape=rect coords=5,5,15,15 nohref>
<area href=main.html shape=rect coords=0,0,20,20 alt="Main Page">
<img src=Images/time.gif usemap="#time">
<map name="time">
<area href=yesterday.html shape="circle" coords="340,245,20">
<area href=today.html shape="poly"
coords="5,270,5,210,60,210,110,240,110,270,5,270">
<area href=tomorrow.html shape="rect" coords="300,20,360,145">
</map>
<p><img src=Images/time.jpg usemap="#time" alt="Время">
Второе решение использует понятие таблицы. Рисунок разрезается на прямоугольные части,
которые ставятся в ячейки таблицы. Приведем пример.
Фреймы
Фреймы позволяют делить страницу на разные области, каждая из которых представляет собой отдельный html-документ.
Определение фрейма начинается с парного тега <FRAMESET>. В области действия этого тега используя тег <FRAME> определяются другие
фреймы.
Синтаксис
<FRAMESET
border=pixels
bordercolor=color
class=classname
cols=col-width
frameborder= no | yes | 0 | 1
framespacing=spacing
id=value
lang=language
language=javascript | jscript | vbscript
rows=rows-height
title=string
>
cols и rows задают количество частей, на которые разбивается окно браузера по горизонтали и вертикали и их размеры. Может принимать вид списка значений в пикселах, процентах или относительных единицах (в этом случае используется символ *), разделенных запятыми. Например, cols="60%,40%" (или cols="6*,4*" в относительных единицах) разбивает окно по горизонтали на два фрейма, первый из которых составляет 60%, второй 40% окна браузера. Заметим, что в относительных единицах вместо 1* следует использовать *.
border, bordercolor, frameborder определяют толщину, цвет рамки фрейма и ее видимость.
framespacing определяет расстояние между кадрами в пикселах.
Синтаксис
<FRAME
bordercolor=color
class=classname
datafld=colname
datasrc=#id
frameborder= no | yes | 0 | 1
height=n
id=value
lang=language
language=javascript | jscript | vbscript
marginheight=pixels
marginwidth=pixels
name=windows_name | _blank | _parent | _self | _top
noresize=noresize | resize
scrolling = auto | no | yes
src=url
title=string
width=n
event=script
>
marginheight, marginwidth - высота и ширина внутренней границы фрейма в пикселах,
noresize пользователь не может изменить размер фрейма, scrolling - управляет полосой прокрутки.
MainFrame.html
<HTML>
<HEAD>
<TITLE>
Фрейм
</TITLE>
</HEAD>
<FRAMESET cols="*, 4*">
<FRAME frameborder=yes src="LeftFrame.html" name=LeftFrame>
<FRAMESET rows="25%,75%">
<FRAME frameborder=yes src="TopFrame.html" name=TopFrame>
<FRAME frameborder=yes src="CenterFrame.html" name=CenterFrame>
</FRAMESET>
</FRAMESET>
</HTML>
LeftFrame.html
<HTML>
<HEAD>
<TITLE>
Фрейм
</TITLE>
</HEAD>
<BODY bgcolor=gold>
<FONT size=5 color=red>
Левый фрейм
</FONT>
<BODY link= Red vlink=RoyalBlue alink=gray>
Загрузить документ в
<UL>
<LI><A href="Html.html" target =TopFrame> верхний </A> фрейм
<LI><A href="Html.html" target =CenterFrame> центральный </A> фрейм
</BODY>
<p>
<A href=Html.html#Frame target=NeT>Назад</A>
</BODY>
</HTML>
CenterFrame.html
<HTML>
<HEAD>
<TITLE>
Фрейм
</TITLE>
</HEAD>
<BODY bgcolor=cyan>
<FONT size=5 color=coral>
Центральный фрейм
</FONT>
</BODY>
</HTML>
TopFrame.html
<HTML>
<HEAD>
<TITLE>
Фрейм
</TITLE>
</HEAD>
<BODY bgcolor=silvet>
<FONT size=5 color=olive>
Верхний фрейм
</FONT>
</BODY>
</HTML>
Плавающая область
Плавающая область является противоположностью фрейму, который либо разделяет окно либо отдельно отражается на экране. Плавающая область формируется парным тегом <IFRAME>, атрибутом src задается URL документа, который отображается в плавающей области.
Синтаксис
<IFRAME
align= absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top
border =pixels
bordercolor=color
class=classname
datafld=colname
datasrc=#id
frameborder= no | yes | 0 | 1
framespacing=pixels
height=n
hspace= pixels
id=value
lang=language
language=javascript | jscript | vbscript
marginheight=pixels
marginwidth=pixels
name=windows_name | _blank | _parent | _self | _top
noresize=noresize | resize
scrolling = auto | no | yes
src=url
style=properties
title=string
vspace=pixels
width=n
event=script
>
<center>
<IFRAME align=Botton FrameBorder=0 height=200 id=iffrm srolling= yes src="main.html" width=300 border =3>
</IFRAME>
</center>
Стили документа
Задание стиля отдельного документа производится установкой значения атрибута STYLE соответствующего тега.
<tag style="attribute:value; attribute:value;..."></tag>
Изменение стиля внутри атрибута производится установкой значения атрибута style этого тега.
HEAD
и ограничена парными тегами
<STYLE>
. Блок стилей имеет синтаксис
selector{attribute:value;attribute:value;...}
Здесь selector
задает элемент или группу элементов форматируемого документа,
attribute
и value
задают атрибуты стиля и их значения.
<STYLE>
имеет синтаксис
<STYLE
disabled
media= screen | print | all
title=string
type ="text/css"
>
Присваивание атрибуту style
значение "text/css" позволяет браузерам не поддерживающим CSS
их игнорировать.
<LINK>
, который находится в заголовке HEAD
.
<HTML>
<HEAD>
<LINK rel=stylesheet href="NewStyle.css" type="text/css">
</HEAD>
<H1>Новый заголовок</H1>
</HTML>
Файл NewStyle.css
<STYLE>
<!--
BODY{
background:green;
color:red
}
H1{
color=blue;
font-family:arial;
font-size:12px;
}
//-->
</STYLE>
В случае, если один и тот же стиль определяется для нескольких селекторов, то допустимо объединение их
в группу. Разделителем в этом случае является запятая. Например, инструкции
I{color=blue}
B{color=blue}
эквивалентны инструкции
I,B{color=blue}
Допустима группировка атрибутов по их типу- по типам border, background, font, list, margin, padding
.
H1{font-family:arial; font-size:12px; font-weight:bold}
эквивалентна инструкции
H1{font: arial 12px bold}
Если тот или иной стиль используется только в контексте другого, то в селекторе перечисляются селекторы
отдельных стилей, входящих в контекст, разделителем между которыми является пробел.
Например, следующий стиль определяет красный цвет полужирного курсива.
<STYLE>
<!--
B I {color:red}
//-->
</STYLE>
Широкие возможности использования каскадной таблицы стилей предоставляет применение определения различных
классов стилей для одного и того же документа. В следующем примере создаются два класса заголовков H1
border - заголовок обрамляется рамкой и выравниевается по центру и background -заголовок выравнивается по центру
и имеет фон.
Класс border
Класс background
<STYLE>
<!--
H2.border {border-width:1; border: solid; border-color:gray; text-align:center}
H2.background {background-color:gray; text-align:center}
//-->
</STYLE>
<H2 class="border">Класс border </H2>
<H2 class="background">Класс background </H2>
В качестве селектора стиля используется атрибут ID элемента документа. При этом стиль будет применен
только к данному документу. При определении такого стиля перед значением ID ставится символ #.
<STYLE>
<!--
#P {text-indent:10px;font-size:16pt}
#BI {font:bold italic}
//-->
</STYLE>
<P id="P">Пример<SPAN id="BI"> использования </SPAN> селектора стиля </P>
Стиль рамки вокруг элемента создается с помощью свойств width
, color
, style
атрибута border
. Свойство style
может принимать значения solid
, double
, groove
, ridge
, inset
, outset
.
<DIV style="border-style:solid;">Solid </DIV>
<DIV style="border-style:double;">Double</DIV>
<DIV style="border-style:groove;">Groove</DIV>
<DIV style="border-style:ridge;">Ridge</DIV>
<DIV style="border-style:inset;">Inset</DIV>
<DIV style="border-style:outset;">Outset</DIV>
Произвольное размещение элементов в документе
Для того, чтобы использовать возможностью произвольного размещения различных объектов на Web-страничке, следует использовать свойства атрибута style
Пример.
<STYLE>
<!--
#first
{
background-color=yellow; position: relative; color: gray;
left: 0; top: 200; height: 100; width: 100; z-index: 0;
}
#second
{
background-color=red; position: relative; color: navy;
left: 50; top: 50; height: 100; width: 100; z-index: 1;
}
#third
{
background-color=blue; position: relative; color: snow;
left: 90; top: 0; height: 100; width: 100; z-index: 2;
}
-->
</STYLE>
<h3 id="first">First</h3>
<h3 id="second">Second</h3>
<h3 id="third">Third
First
Second
Third
Небо
<h1 style="position:relative;top:-200px;left:400px;z-index:1">
Небо</h1>
<img src=images/sky.gif style="position:relative;top:-300px;left:300px;z-index:0" >
Формы и элементы управления
Web-документ должен обладать возможностью динамического изменения во времени и обратной связью между пользователем и сервером. Одним из средств взаимообмена информацией являются HTML-формы, CGI сценарии (Common Gateway Interface- общий интерфейс шлюзов), JavaScript-сценарии и др. HTML-форма служит для ввода данных и отправки сценария серверу.
Синтаксис
<FORM
action=url
class=classname
enctype=encoding
id=value
lang=language
language=javascript | jscript | vbscript
method= get | post
name=name
style=properties
target=windows_name | _blank | _parent | _self | _top
title=string
event=script
>
Здесь name- имя формы для последующих ссылок на нее, action - метод передачи данных от клиента к серверу. Может принимать значения get - используется по умолчанию и приводит к добавлению содержимого формы к URL и обрабатывается как аргумент командной строки, post - при использовании этого параметра содержимое формы пересылается не как часть URL, а в виде отдельного файла. Затем сервер передает эту информацию в CGI из которого считываются данные по мере необходимости.
Внутри тегов <Form>...</Form> может содержаться любое количество тегов задающих элементы управления -<INPUT>, <SELECT>, <TEXTAREA>.
Тегом <INPUT> создаются элементы управления - поле ввода, кнопка, флажок, переключатель и некоторые другие.
Синтаксис
<INPUT
accesskey=key
align= left | center | right
alt= text
class=classname
disabled
dynsrc=url
id=value
lang=language
language=javascript | jscript | vbscript
lowsrc=url
maxlength=n
name=name
readonly
size=n
style=properties
tabindex=n
title=string
type= button | checkbox | file | hidden | image | password | radio | reset | submit | text
value=value
event=script
>
Опишем подробнее атрибуты.
<center>
<form name formBlank>
<table border=18 bgColor=gray>
<tr>
<td> Ф.И.О.</td>
<td colspan=3><input name=text1 size=40
style="height: 22px;width: 289px"></td>
<td></td>
<td></td>
</tr>
<tr>
<td> Адрес</td>
<td colspan=3><input name=text2 size=40
style="height: 22px;width: 289px"></td>
<td></td>
<td></td>
</tr>
<tr>
<td> Город</td>
<td><input name=text3 size=22></td>
<td>Код</td>
<td><input name=text4 size=8
style="height: 22px;width: 79px"></td>
</tr>
</table>
</form>
</center>
Бегущая строка
Бегущая строка создается из текста расположенного между парными тегами <MARQUEE>
Синтаксис
<MARQUEE>
behavior= alternate | scroll | slide
bgcolor=color
class=classname
datafld=colname
dataformatas =html | text
datasrc=#id
direction= down | left | right | up
height = n
id= value
lang=language
language=javascript | jscript | vbscript
loop=n
scrollamount=n
scrolldelay=milliseconds
style=properties
title=string
truespeed
vspace=n
width=n
event=script
>
Фильтры
Использование фильтров позволяет преобразовывать элементы, у которых атрибут style
обладает свойством filter
- <BODY>, <BUTTON>, <DIV>, <IMG>, <INPUT>, <MARQUEE>, <SPAN>, <TABLE>, <TD>, <TEXTAREA>, <TH>, <THEAD>, <TR>. Для элементов <DIV> и <SPAN> следует указывать либо точное расположение либо их размеры.
{filter:filtername(param1,param2,...)}
Alpha Устанавливает уровень прозрачности элемента.
Blur Создает размытый образ (эффект движения)
Chroma Делает указанный цвет прозрачным
DropShadow Создает тень
FlipH,FlipV Создают горизонтальный и вертикальный зеркальный образ.
Glow Создает ореол
Grayscale Переводит изображение в черно-белое
Invert Инвертирует цвета
Wave Создает волнообразное искажение вдоль оси абсцисс
XRay Создает рентгеновский образ элемента.
Alpha(opacity,finishopacity,style,startX,startY,finishX,finishY)
opacity и finishopacity целые числа от 1 до 100, задающие начальный и конечный уровни прозрачности.
style -градиент непрозрачности. Принимает значения: 0 (равномерный), 1 (линейный), 2 (радиальный), 3 (прямоугольный).
startX,startY,finishX,finishY координаты подобласти, где задается прозрачность. Например,
<IMG src="Images/today.jpg" style="filter: Alpha(opacity =1, finishOpacity=100, style=2)">
add целое число, определяющее отображать ли первичное изображение. Если 0, то не отображается.
direction -направление движения. Целое число кратное 45.
strength- расстояние в пикселах размытия образа при движении.
Chroma(color)
делает цвет color прозрачным.
DropShadow(color, offX, offY, positive)
color -цвет тени
offX, offY-смещение тени относительно первичного изображения.
positive- если значение 1, то тень создается для любого непрозрачного пиксела, если 0, то только для прозрачных пикселов первоначального изображения.
Glow(color,strength)
color -цвет ореола
strength- размер в пикселах ореола.
Например.
Wave(add, freq, lightStrength, Phase, strength)
add целое число определяющее отображать ли первичное изображение. Если 0, то не отображается.
freq-целое число задающее число волн
phase-целое число от 0 до 100 задающее начальную фазу волны.
lightStrength, strength целые числа задающие интенсивность волны.
<IMG src="Images/today.jpg" style="filter: XRay)">
Работа с мультимедиа
Методы воспроизведения звука.
Для использования звуковых схем в HTML-страницах существуют три основных схемы
<BGSOUND src="ding.wav" loop="N"></BGSOUND>
здесь N-число повторов. Если это значение равно "true", то клип загружается "по кругу".
<input type="button" value="Дзвяк" onclick=
"javascript:document.write('<bgsound src=Images/ding.wav loop=1>');history.back();">
<EMBED id="sound" autostart="false" balance="0" src="Images/ding.wav"
hidden="false" height="40" width="300" volume="0" loop="infinite"></EMBED>
<OBJECT id="objWMPlayer" codeBase=
"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.
cab#Version=6,4,5,715" type="application/x-oleobject"
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" VIEWASTEXT>
<PARAM NAME="AudioStream" VALUE="-1">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="AutoStart" VALUE="0">
<PARAM NAME="AnimationAtStart" VALUE="-1">
<PARAM NAME="AllowScan" VALUE="-1">
<PARAM NAME="AllowChangeDisplaySize" VALUE="-1">
<PARAM NAME="AutoRewind" VALUE="0">
<PARAM NAME="Balance" VALUE="0">
<PARAM NAME="BaseURL" VALUE="">
<PARAM NAME="BufferingTime" VALUE="5">
<PARAM NAME="CaptioningID" VALUE="">
<PARAM NAME="ClickToPlay" VALUE="-1">
<PARAM NAME="CursorType" VALUE="0">
<PARAM NAME="CurrentPosition" VALUE="-1">
<PARAM NAME="CurrentMarker" VALUE="0">
<PARAM NAME="DefaultFrame" VALUE="">
<PARAM NAME="DisplayBackColor" VALUE="0">
<PARAM NAME="DisplayForeColor" VALUE="16777215">
<PARAM NAME="DisplayMode" VALUE="0">
<PARAM NAME="DisplaySize" VALUE="0">
<PARAM NAME="Enabled" VALUE="-1">
<PARAM NAME="EnableContextMenu" VALUE="-1">
<PARAM NAME="EnablePositionControls" VALUE="-1">
<PARAM NAME="EnableFullScreenControls" VALUE="0">
<PARAM NAME="EnableTracker" VALUE="-1">
<PARAM NAME="Filename" VALUE="Images/ding.wav">
<PARAM NAME="InvokeURLs" VALUE="-1">
<PARAM NAME="Language" VALUE="-1">
<PARAM NAME="Mute" VALUE="0">
<PARAM NAME="PlayCount" VALUE="1">
<PARAM NAME="PreviewMode" VALUE="0">
<PARAM NAME="Rate" VALUE="1">
<PARAM NAME="SAMILang" VALUE="">
<PARAM NAME="SAMIStyle" VALUE="">
<PARAM NAME="SAMIFileName" VALUE="">
<PARAM NAME="SelectionStart" VALUE="-1">
<PARAM NAME="SelectionEnd" VALUE="-1">
<PARAM NAME="SendOpenStateChangeEvents" VALUE="-1">
<PARAM NAME="SendWarningEvents" VALUE="-1">
<PARAM NAME="SendErrorEvents" VALUE="-1">
<PARAM NAME="SendKeyboardEvents" VALUE="0">
<PARAM NAME="SendMouseClickEvents" VALUE="0">
<PARAM NAME="SendMouseMoveEvents" VALUE="0">
<PARAM NAME="SendPlayStateChangeEvents" VALUE="-1">
<PARAM NAME="ShowCaptioning" VALUE="0">
<PARAM NAME="ShowControls" VALUE="0">
<PARAM NAME="ShowAudioControls" VALUE="-1">
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="ShowGotoBar" VALUE="0">
<PARAM NAME="ShowPositionControls" VALUE="-1">
<PARAM NAME="ShowStatusBar" VALUE="0">
<PARAM NAME="ShowTracker" VALUE="-1">
<PARAM NAME="TransparentAtStart" VALUE="0">
<PARAM NAME="VideoBorderWidth" VALUE="0">
<PARAM NAME="VideoBorderColor" VALUE="0">
<PARAM NAME="VideoBorder3D" VALUE="0">
<PARAM NAME="Volume" VALUE="0">
<PARAM NAME="WindowlessVideo" VALUE="0">
<EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
SRC="Images/ding.wav" name="objWMPlayer" autostart="0" showcontrols="1"> </EMBED>
</OBJECT>
<BR>
<INPUT id="butStart" onclick="objWMPlayer.Play();"
type="button" value="Start" name="butStart">
<INPUT id="butStop" onclick="objWMPlayer.stop()"
type="button" value="Stop" name="butStop">
<INPUT id="butRepeat" onclick="objWMPlayer.PlayCount='2'"
type="button" value="Repeat" name="butRepeat">
<INPUT id="butMute" onclick="objWMPlayer.Mute=!(objWMPlayer.Mute)"
type="button" value="Mute" name="butMute">
Методы воспроизведения видео.
Для воспроизведения видео в HTML-страницах существуют аналогичные три основные схемы
<IMG DYNSRC="clock.avi" >
<EMBED id="video" autostart="false" balance="0" src="Images/clock.avi"
hidden="false" height="40" width="300" volume="0" type="video/avi" loop="true"></EMBED>
<OBJECT id="objWMPlayer2" name="objWMPlayer2" height="240" width="320"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" VIEWASTEXT>
<PARAM NAME="URL" VALUE="Images/clouds.avi">
<PARAM NAME="rate" VALUE="1">
<PARAM NAME="balance" VALUE="0">
<PARAM NAME="currentPosition" VALUE="0">
<PARAM NAME="defaultFrame" VALUE="">
<PARAM NAME="playCount" VALUE="1">
<PARAM NAME="autoStart" VALUE="0">
<PARAM NAME="currentMarker" VALUE="0">
<PARAM NAME="invokeURLs" VALUE="-1">
<PARAM NAME="baseURL" VALUE="">
<PARAM NAME="volume" VALUE="50">
<PARAM NAME="mute" VALUE="0">
<PARAM NAME="uiMode" VALUE="full">
<PARAM NAME="stretchToFit" VALUE="-1">
<PARAM NAME="windowlessVideo" VALUE="0">
<PARAM NAME="enabled" VALUE="-1">
<PARAM NAME="enableContextMenu" VALUE="-1">
<PARAM NAME="fullScreen" VALUE="0">
<PARAM NAME="SAMIStyle" VALUE="">
<PARAM NAME="SAMILang" VALUE="">
<PARAM NAME="SAMIFilename" VALUE="">
<PARAM NAME="captioningID" VALUE="">
</OBJECT>
Назад
Содержание
Вперед