Назад Содержание Вперед

Введение

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

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

Поэтому, прежде чем говорить о технике программирования, следует немного поговорить о дизайне.

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

Страничка не должна быть перегружена графикой и загружаемыми объектами. Для того, чтобы ответ системы воспринимался как мгновенный, предельное значение реагирования системы должно не превышать 0.1 сек. Чтобы восприятие системы не нарушалось и ход мысли клиента не переключался, время реагирования должно не превышать 1 сек. Предельное время, в течение которого пользователь сфокусирован на диалоге не более 10 сек. Эти показатели выработаны Joint Computer Conference в 1968 году и за те несколько лет, которые прошли с момента принятия этих рекомендаций, они стали лишь более актуальными.

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

Разработка дизайна не входит в задачи этого пособия. Это отдельная большая тема, которой посвящены как отдельные издания, как электронные, так и полиграфические (см., например, Нильсен Я. Веб-дизайн. Символ-плюс, СПб, 2002, 512 с.).

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

Правила оформления текстов.

Удобочитаемость.

Если текст не воспринимается, то дизайн и прочее не воспринимаются.

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

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

При выводе изображения атрибут alt должен давать подробное описание изображения.

Для начала достаточно. Теперь перейдем к технике.

HyperText Markup Language

HTML (HyperText Markup Language) язык описания структуры страницы, предоставляющий возможность создания ссылок на связанные страницы. Инструкции форматирования в HTML называются тегами (tags). Иногда теги содержат параметры. Например,

<FONT size=5> Например,  </Font>
Большинство тегов представлено в виде пар
<tag>...</tag>
Теги не чувствительны к регистру, но по традиции их принято писать прописными буквами.

Основные теги HTML.

Условно теги можно классифицировать по трем категориям:
  • теги комментариев, а также теги объявления, информирующие браузер о том, что документ является HTML документ.
  • теги заголовков
  • теги тела HTML документа.

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

Текст между парным тегом <COMMENT> или внутри тега <!...> является комментарием и не выводятся в окне браузера.
Парный тег <HTML> замыкает содержимое всей страницы (за исключением, быть может, комментариев).

Теги заголовка

Парный тег <HEAD> позволяет создать название <TITLE>, соотношение между несколькими документами <BASE>, метод посылки сообщений программам поиска <META>.
Парный тег <TITLE> определяет текст названия документа, который отображается в окне браузера.
Тег <BASE> содержит полный URL документа. Этот тег имеет один обязательный атрибут href задающий полный URL документа. Адреса URL (Uniform Resourse Locators) Web-адрес. Он состоит из четырех частей и имеет вид

Протокол://Имя сервера:Номер порта/Имя файла

Протокол в большинстве случаев им является http (HiperText Transfer Protocol)
Имя сервера имя компьютера или его IP адрес.
Номер порта обычно не используется и равен 80.
Имя файла полное имя файла.

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

<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
000000
Navy
000080
Darkblue
00008B
Mediumblue
0000CD
Blue
0000FF
Darkgreen
006400
Green
008000
Teal
008080
Darkcyan
008B8B
Deepskyblue
00BFFF
Darkturquoise
00CED1
Mediumspringgreen
00FA9A
Lime
00FF00
Springgreen
00FF7F
Cyan
00FFFF
Midnightblue
191970
Dodgerblue
1E90FF
Lightseagreen
20B2AA
Forestgreen
228B22
Seagreen
2E8B57
Darkslategray
2F4F4F
Limegreen
32CD32
Mediumseagreen
3CB371
Turquoise
40E0D0
Royalblue
4169E1
Steelblue
4682B4
Darkslateblue
483D8B
Mediumturquoise
48D1CC
Indigo
4B0082
Darkolivegreen
556B2F
Cadetblue
5F9EA0
Cornflowerblue
6495ED
Mediumauqamarine
66CDAA
Olivedrab
688E23
Dimgray
696969
Slateblue
6A5ACD
Slategray
708090
Lightslategray
778899
Lawngreen
7CFC00
Mediumslateblue
7B68EE
Chartreuse
7FFF00
Aquamarine
7FFFD4
Maroon
800000
Purple
800080
Olive
808000
Gray
808080
Skyblue
87CEEB
Lightskyblue
87CEFA
Blueviolet
8A2BE2
Darkred
8B0000
Darkmagenta
8B008B
Saddlebrown
8B4513
Darkseagreen
8FBC8F
Lightgreen
90EE90
Mediumpurple
9370D8
Darkviolet
9400D3
Palegreen
98FB98
Darkorchid
9932CC
YellowGreen
9ACD32
Sienna
A0522D
Brown
A52A2A
Darkgray
A9A9A9
Lightblue
ADD8E6
Greenyellow
ADFF2F
Paleturquoise
AFEEEE
Lightsteelblue
B0C4DE
Powderblue
B0E0E6
Firebrick
B22222
Darkgoldenrod
B8860B
Mediumorchid
BA55D3
Rosybrown
BC8F8F
Darkkhaki
BDB76B
Chocolate
D2691E
Burlywood
DEB887
Mediumvioletred
C71585
Indianred
CD5C5C
Peru
CD853F
Tan
D2B48C
Lightgrey
D3D3D3
Palevioletred
D87093
Thistle
D8BFD8
Orchid
DA70D6
Goldenrod
DAA520
Gainsboro
DCDCDC
Plum
DDA0DD
Lightcyan
E0FFFF
Lavendar
E6E6FA
Darksalmon
E9967A
Violet
EE82EE
Palegoldenrod
EEE8AA
Lightcoral
F08080
Khaki
F0E68C
Aliceblue
F0F8FF
Honeydew
F0FFF0
Azure
F0FFFF
Sandybrown
F4A460
Wheat
F5DEB3
Beige
F5F5DC
Whitesmoke
F5F5F5
Mintcream
F5FFFA
Ghostwhite
F8F8FF
Salmon
FA8072
Antiquewhite
FAEBD7
Linen
FAF0E6
Lightgoldenrodyellow
FAFAD2
Oldlace
FDF5E6
Red
FF0000
Magenta
FF00FF
deeppink
FF1493
Orangered
FF4500
Tomato
FF6347
Hotpink
FF69B4
Coral
FF7F50
Darkorange
FF8C00
Lightsalmon
FFA07A
Orange
FFA500
Lightpink
FFB6C1
Peachpuff
FFDAB9
Gold
FFD700
Navajowhite
FFDEAD
Pink
FFC0CB
Moccasin
FFE4B5
Bisque
FFE4C4
Mistyrose
FFE4E1
Blanchedalmond
FFEBCD
Papayawhip
FFEFD5
Lavenderblush
FFF0F5
Seashell
FFF5EE
Lemonchiffon
FFFACD
Floralwhite
FFFAF0
Snow
FFFAFA
Yellow
FFFF00
Lightyellow
FFFFE0
Ivory
FFFFF0
White
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.

<P> не обязательно парный тег ограничивающий параграф. Перед параграфом автоматически ставится пустая строка. Единственным атрибутом является тег выравнивания 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 длина линии или в пикселах или в процентах по отношению к ширине экрана.


<HR align=center color=green size=3 width=50%>

Далее парные теги задающие тип шрифта <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=...>.

Small sky

<A href=http://www.sky.com/><img src=Images/sky.gif alt= "Small sky" width=100 height=100></A>
В этом случае изображение будет обводится рамкой в 2 пиксела, и если это мешает то следует использовать атрибут border=0 для изображений.
Приведем пример ссылки на электронную почту <A href="mailto:mail@ukr.net"> ссылки </A>

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

В HTML документах допустимо использование всех символов в соответствии с их ASCII кодировкой. При этом только нужно добавить знак амперсанта (&), знак номера #, номер символа и далее точка с запятой (© это &#169;). Кроме того, есть несколько символов, значения которых зарезервированы, поэтому для их вывода используют escape-последовательности, например, < &lt, > &gt, & &amp, " &quot,© - &copy, ® - &reg.

Наиболее часто используемые символы приведем в таблице:

СимволКодВидОписание
&quot;&#34;"двойная кавычка
&amp;&#38;&амперсанд
&lt;&#60;<знак 'меньше'
&gt;&#62;>знак 'больше'
&nbsp;&#160; неразрывный пробел
&cent;&#162;¢цент
&pound;&#163;£фунт стерлингов
&curren;&#164;¤денежная единица
&yen;&#165;¥иена или юань
&sect;&#167;§параграф
&copy;&#169;©знак copyright
&not;&#172;¬знак отрицания
&reg;&#174;®знак зарегистрированной торговой марки
&deg;&#176;°градус
&plusmn;&#177;±плюс-минус
&middot;&#183;·точка
&frac14;&#188;¼одна четвертая
&frac12;&#189;½одна вторая
&frac34;&#190;¾три четвертых
&times;&#215;×знак умножения
&divide;&#247;÷знак деления
&Oslash;&#216;Øпустое множество
&oslash;&#248;øтоже пустое множество, но поменьше
&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; знак масти 'бубны'
&tilde;&#732;˜тильда
&trade;&#8482;знак торговой марки
&ndash;&#8211;тире
&mdash;&#8212;длинное тире
&lsquo;&#8216;левая одиночная кавычка
&rsquo;&#8217;правая одиночная кавычка
&sbquo;&#8218;нижняя одиночная кавычка
&ldquo;&#8220;левая двойная кавычка
&rdquo;&#8221;правая двойная кавычка
&bdquo;&#8222;нижняя двойная кавычка

Списки

Списки и таблицы являются очень удобным средством форматирования текста. Рассмотрим вначале списки - маркированный и нумерованный.
Парный тег <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>. Приведем пример.
A
<A>
Задает гиперссылки
<ADDRESS>
идентификация автора документа
B
<B>
полужирный шрифт
<BASE>
задание базового URL

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
>