Основы web дизайна Методика проектирования2021

И. А. Нагаева, А. Б.
Фролов,
И. А. Кузнецов
Основы web-дизайна.
Методика проектирования
Учебное пособие
Москва
Берлин
2021
УДК 004.738.5(075)
ББК 16.263.432я7
Н16
Нагаева, И. А.
Н16 Основы web-дизайна. Методика проектирования : учебное
пособие / И. А. Нагаева, А. Б. Фролов, И. А. Кузнецов. — Москва ;
Берлин : Директ-Медиа, 2021. — 236 с.
ISBN 978-5-4499-1957-1
Основная цель учебного пособия — изучение основ создания
Web-документов, средств и методов их разработки и продвижения.
Процесс изучения курса направлен на формирование следующих
компетенций: способность владеть основными методами, способами и
средствами получения, хранения, переработки информации, иметь
навыки работы с компьютером как средством управления информа-
цией; способность разрабатывать Web-документы и создавать прото-
типы различных Web-решений.
Учебное пособие предназначено для студентов среднего профес-
сионального образования и бакалавриата.
УДК 004.738.5(075)
ББК 16.263.432я7
ISBN 978-5-4499-1957-1 © Нагаева И. А., Фролов А. Б., Кузнецов И. А., текст, 2021
© Издательство «Директ-Медиа», оформление, 2021
https://t.me/it_boooks
Оглавление
Введение ........................................................................................................................ 3
Глава 1. Язык гипертекстовой разметки HTML ....................................10
1.1. Гипертекст....................................................................................................10
1.2. Основные понятия языка HTML ......................................................10
1.2.1. Создание HTML документов ..........................................................11
1.2.2. Основные положения .........................................................................11
1.2.3. Структура документа .........................................................................12
1.2.4. Тэг, описывающий общие свойства документа
и его атрибуты ....................................................................................................14
1.3. Форматирование текста .......................................................................16
1.3.1. Разделение текста на абзацы........................................................16
1.3.2. Перевод строки.......................................................................................17
1.3.3. Заголовки ...................................................................................................19
1.3.4. «Бегущая» строка ..................................................................................20
1.3.5. Горизонтальные линии ....................................................................22
1.3.6. Логическое форматирование........................................................23
1.3.7. Физическое форматирование.......................................................24
1.3.8. Шрифты .......................................................................................................25
1.3.9. Специальные символы ......................................................................27
1.4. Списки .............................................................................................................28
1.4.1. Упорядоченный (нумерованный) список ............................28
1.4.2. Неупорядоченный (маркированный) список ....................31
1.4.3. Меню ..............................................................................................................33
1.4.4. Список определений ...........................................................................33
1.4.5. Комбинирование списков ...............................................................34
1.5. Использование графики .......................................................................35
1.5.1. Выбор формата графического файла ......................................36
1.5.2. Вставка изображения в документ..............................................37
1.5.3. Выравнивание текста по краю изображения ....................37
1.5.4. Позиционирование изображения на странице ................38
1.5.5. Прерывание текста при обтекании изображения ..........39
1.5.6. Указание размеров выводимого изображения.................40
1.5.7. Альтернативное описание изображения..............................41
1.5.8. Помещение изображения в рамку .............................................42
1.5.9. Отделение изображения от текста ...........................................42
1.6. Ссылки ............................................................................................................43
1.6.1. Что такое ссылка ...................................................................................44
1.6.2. Создание ссылок на документы и файлы .............................44
1.6.3. Внутренние ссылки ............................................................................. 46
1.6.4. Файлы и другие встраиваемые объекты .............................. 48
1.6.5. Карты и ссылки ...................................................................................... 49
1.7. Таблицы .........................................................................................................52
1.7.1. Основы построения таблиц ........................................................... 52
1.7.2. Основные тэги таблиц....................................................................... 52
1.7.3. Таблицы c рамками ............................................................................. 53
1.7.4. Размещение данных внутри ячеек ........................................... 54
1.7.5. Объединение ячеек ............................................................................. 56
1.7.6. Пустые ячейки ........................................................................................ 58
1.7.7. Дополнительные атрибуты таблиц ......................................... 59
1.7.8. Использование цвета и изображений..................................... 60
1.7.9. Вложенные таблицы .......................................................................... 63
1.8. Тест ...................................................................................................................65
1.9. Задания для самостоятельной работы ........................................69
Глава 2. Основы технологии CSS ....................................................................74
2.1. Синтаксис и принцип работы CSS ...................................................74
2.2. Способы подключения CSS к HTML–документу .....................75
2.2.1. Внешняя таблица стилей ................................................................ 75
2.2.2. Внутренняя таблица стилей ......................................................... 77
2.2.3. Встроенные стили ................................................................................ 77
2.2.4. Несколько таблиц стилей ............................................................... 78
2.3. Цвет и фон в CSS ........................................................................................79
2.3.1. Свойство COLOR ..................................................................................... 79
2.3.2. Свойство BACKGROUND-COLOR ................................................... 80
2.3.3. Свойство BACKGROUND-IMAGE ................................................... 81
2.3.4. Свойство BACKGROUND-REPEAT ................................................ 81
2.3.5. Свойство BACKGROUND-ATTACHMENT .................................. 82
2.3.6. Свойство BACKGROUND-POSITION............................................. 82
2.3.7. Сокращенная форма записи — BACKGROUND................... 85
2.4. Шрифты в CSS .............................................................................................85
2.4.1. Свойство FONT-FAMILY..................................................................... 85
2.4.2. Свойство FONT-STYLE ........................................................................ 86
2.4.3. Свойство FONT-VARIANT ................................................................. 87
2.4.4. Свойство FONT-WEIGHT ................................................................... 88
2.4.5. Свойство FONT-SIZE ............................................................................ 89
2.4.6. Сокращенная запись. Свойство FONT ..................................... 89
2.5. Текст в CSS ....................................................................................................90
2.5.1. Свойство TEXT-ALIGN......................................................................... 90
2.5.2. Свойство TEXT-DECORATION ........................................................ 91
2.5.3. Свойство TEXT-INDENT .....................................................................92
2.5.4. Свойство TEXT-TRANSFORM ..........................................................93
2.5.5. Свойство LETTER-SPACING .............................................................93
2.5.6. Свойство WORD-SPACING.................................................................94
2.6. Списки в CSS .................................................................................................95
2.6.1. Свойство LIST-STYLE-TYPE..............................................................95
2.6.2. Свойство LIST-STYLE-IMAGE ..........................................................97
2.6.3. Сокращенная форма LIST-STYLE .................................................97
2.7. Ссылки в CSS ................................................................................................98
2.8. Типы селекторов в CSS ..........................................................................99
2.8.1. Селектор по элементу ........................................................................99
2.8.2. Селектор по классу ...............................................................................99
2.8.3. Селектор по id .......................................................................................101
2.8.4. Контекстный селектор...................................................................102
2.9. Таблицы в CSS .......................................................................................... 103
2.9.1. Границы таблиц ..................................................................................103
2.9.2. Свернутые границы .........................................................................104
2.9.3. Ширина и высота таблицы ..........................................................105
2.9.4. Выравнивание текста таблицы ................................................107
2.9.5. Свойство PADDING.............................................................................109
2.9.6. Цвет и изображение в таблице .................................................110
2.10. Тест ............................................................................................................. 112
2.11. Задания для самостоятельной работы .................................. 116
Глава 3. Верстка сайтов .................................................................................... 120
3.1. Задачи верстки........................................................................................ 120
3.2. Особенности верстки web-страниц ............................................ 122
3.2.1. Ширина документа ...........................................................................123
3.2.2. Высота документа .............................................................................125
3.2.3. Модульные сетки ...............................................................................125
3.3. Табличная верстка сайта .................................................................. 128
3.4. Примеры формирования сайтов .................................................. 130
3.4.1. Макет с одноколонной сеткой ..................................................130
3.4.2. Макет с двухколонной сеткой ...................................................132
3.4.3. Макет с трехколонной сеткой ...................................................134
3.5. Тест ................................................................................................................ 137
3.6. Задания для самостоятельной работы ..................................... 138
Глава 4. Дизайн сайтов ..................................................................................... 143
4.1. Правила создания макета ................................................................. 145
4.2. Сайт в стиле Web 2.0 ............................................................................ 151
4.3. Цветовой круг.......................................................................................... 156
4.3.1. Гармоничные сочетания цветов ............................................. 158
4.3.2. Теплые и холодные цвета ............................................................ 160
4.3.3. Принципы композиции цвета для создания сайта ..... 161
4.3.4. Общие рекомендации по выбору цвета.............................. 163
4.3.5. Инструмент выбора цветов сайта .......................................... 164
4.4. Шрифт в web-дизайне......................................................................... 167
4.4.1. Общие характеристики шрифтов ........................................... 167
4.4.2. Основные группы шрифтов........................................................ 168
4.4.3. Типы шрифтов..................................................................................... 170
4.4.4. Выбор шрифта ..................................................................................... 171
4.4.5. Родовое семейство шрифтов ..................................................... 172
4.4.6. Поддержка кириллицы.................................................................. 172
4.4.7. Основы выбора шрифтов ............................................................. 174
4.5. Тест ................................................................................................................ 176
Глава 5. Продвижение сайтов ....................................................................... 184
5.1. Общие принципы работы поисковых систем ....................... 188
5.1.1. Особенности работы поисковых систем ............................ 188
5.1.2. Выбор домена и хостинга............................................................. 191
5.1.3. Выбор ключевых слов .................................................................... 193
5.2. Внутренние факторы ранжирования ........................................ 198
5.2.1. Структура сайта .................................................................................. 198
5.2.2. Текстовое оформление веб-страниц .................................... 203
5.3. Внешние факторы ранжирования ............................................... 208
5.3.1 Для чего используется учет внешних ссылок
на сайт ................................................................................................................... 208
5.3.2. Важность ссылок (индекс цитируемости) ........................ 209
5.3.3. Ссылочный текст ............................................................................... 210
5.3.4. Релевантность ссылающихся страниц ................................ 210
5.3.5. Google PageRank .................................................................................. 210
5.3.6. ТИЦ и ВИЦ в Yandex .......................................................................... 211
5.4. Ошибки и «черные» методы SEO.................................................. 212
5.4.1. Распространенные ошибки ........................................................ 212
5.4.2. Черные технологи ............................................................................. 214
5.5. Тест ................................................................................................................ 216
Тезаурус ..................................................................................................................... 221
Словарь тегов ......................................................................................................... 223
Литература .............................................................................................................. 232
Введение
Информационные технологии, использующие возможно-
сти Интернета, проникают в большинство сфер человеческой
деятельности. Для того чтобы создавать веб-страницы, необ-
ходимо знать язык гипертекстовой разметки и технологию их
создания с использованием этого языка.
Язык HTML (Hyper Text Markup Language), или универ-
сальный язык разметки гипертекста, используется для создания
самых разных интерактивных документов с гиперссылками и
элементами мультимедиа — Web-страниц, интерфейсов, пре-
зентаций, электронных книг и учебных пособий. Файлы с
HTML-кодом — это обычные текстовые файлы, доступные для
чтения, как программе, так и человеку. Благодаря этому
HTML-страницы можно редактировать и просматривать на
любом компьютере и в любой операционной системе.
Вследствие постоянного развития HTML-технологии,
возникновения новых свойств и параметров, а также появле-
ния новых версий популярных браузеров, возможности HTML
приобретают все большее значение в ходе создания Web-
сайтов различной сложности и тематики. Знание основ языка
HTML становится обязательным и неотъемлемым атрибутом
многих специалистов в области интернет-технологий, превра-
щается в систему знаний, необходимых практически каждому
пользователю Всемирной сети.
Основная цель учебного пособия — изучение основ со-
здания Web-документов, средств и методов их разработки и
продвижения.
В результате освоения учебного курса обучающийся
должен:
— уметь разрабатывать Web-страницы с использованием
современных интернет-технологий; разрабатывать модели
реальных систем;
— владеть навыками разработки концепции, дизайна,
навигации и реализации Web-сайтов; навыками работы с совре-
менными аппаратными и программными средствами анализа,
проектирования и разработки систем; навыками использования
современных языков программирования для решения задач
профессиональной деятельности; навыками создания устойчи-
вых к ошибкам Web-документов.
7
Процесс изучения курса направлен на формирование
следующих компетенций:
— способность владеть основными методами, способами
и средствами получения, хранения, переработки информации,
иметь навыки работы с компьютером как средством управле-
ния информацией;
— способность разрабатывать Web-документы и созда-
вать прототипы различных Web-решений.
Первая глава учебного пособия содержит материал для
начинающих разработчиков, в ней рассмотрены такие вопро-
сы, как элементы языка гипертекстовой разметки HTML, фор-
матирование текста, создание гиперссылок, списков, рисунков
и таблиц. Завершает первую главу пример табличной верстки
сайта с подробным пошаговым описанием действий.
Во второй главе рассмотрен материал для использования
каскадных таблиц стилей (CSS). Изначально HTML использо-
вался исключительно для разметки документа. Но со временем
выдвигались все более высокие требования к дизайну сайтов,
что привело к появлению новых тегов, определяющих внеш-
ний вид сайта. К сожалению, большая часть таких тегов под-
держивается только одним видом браузеров, что вызывает
ошибки при просмотре того или иного сайта.
Использование CSS значительно облегчает и автомати-
зирует создание веб-сайтов, открывая совершенно новые
возможности в веб-дизайне. Стиль — это набор параметров,
задающий внешнее представление некоторого объекта в той
или иной среде. CSS работает со шрифтами, полями, таблица-
ми, отступами, картинками и др.
В третьей главе рассматриваются вопросы верстки сайта,
процесса создания Web-страниц с помощью специальных язы-
ков. Процесс верстки — один из самых важных этапов создания
интернет-ресурса HTML и CSS позволяют полностью сформи-
ровать страницы будущего сайта, разместив на них нужное
содержание и оформив его должным образом. Независимо от
того, какой браузер использует пользователь, сайт должен
выглядеть и работать корректно при любом разрешении мо-
нитора.
Четвертая глава посвящена вопросам грамотного дизай-
на сайта.
8
В пятой главе рассмотрен материал, необходимый для
раскрутки сайта. Наличие собственного сайта не гарантирует
того, что пользователи глобальной сети узнают о его суще-
ствовании. Сайт, приносящий пользу своему владельцу, дол-
жен располагаться в начале списка, а для этого он должен быть
оптимизирован под требования поисковых систем. Для этого и
используется SEO (Search Engine Optimization) — комплекс
мероприятий, проводимых с целью улучшения видимости
сайта или отдельной страницы в результатах естественной
(неоплаченной) выдачи поисковых систем по определенным
запросам пользователей.
Глава 1. Язык гипертекстовой
разметки HTML
1.1. Гипертекст
Гипертекст (Hypertext) — это текст, содержащий ссылки,
связывающие слова или картинки документа с другими ресур-
сами. Пользователь может активировать эти связи щелчком
мыши. В большинстве случаев подобная активизация ссылки
приводит к тому, что вызываемый ресурс замещает текущий
документ.
В принципе, идея нелинейного прочтения текста возник-
ла задолго до появления компьютеров. Известно, что в толко-
вании на книгу псалмов Гильберта Порретанского (около
1150 года н. э.) применялись специальные пометки на полях,
которые отсылали читателя на страницы в других местах
книги.
WWW (World Wide Web) — это глобальный механизм об-
мена информацией: одни люди помещают информацию на
Web-серверы, а другие ее просматривают. Количество инфор-
мации, которое может быть предоставлено посетителю на
сайте, практически не ограничено.
Для того чтобы обеспечить доступ к ресурсу, необходимо
воспользоваться услугами так называемого провайдера хо-
стинга (от англ. Host — хозяин) Обычно провайдер взимает
плату, однако, существуют и бесплатные услуги. Многие ком-
пании, предлагающие бесплатный хостинг предоставляют
своим пользователям доменные имена третьего уровня,
например, www.your-name.narod.ru. Для серьёзного интернет
проекта лучше иметь платный домен второго уровня.
1.2. Основные понятия

языка HTML
Задача разработки страниц для каждого типа оборудова-
ния является практически невыполнимой. Вместо того чтобы
указывать, как должен выводиться документ на том или
ином оборудовании, предложили использовать специальный
язык функциональной разметки — HTML (HyperTexl Markup
Language). Как следствие, HTML-документ состоит из соб-
10
ственно текста и средств его разметки (форматировании),
к которым относятся все записи, не являющиеся информаци-
онным наполнением документа.
HTML был разработан в конце 1980-х годов в физической
лаборатории CERN (Швейцария) и является стандартным язы-
ком, содержащим набор формальных рекомендаций, опреде-
ленных консорциумом W3C (World Wide Web Consortium).
Язык HTML описывает лишь самые общие инструк-
ции для представления информации, которые могут быть
интерпретированы различными браузерами и на разных
платформах. Инструкции HTML или управляющие маркеры
называют тэгами (от англ. Tag — маркер). Теги вставляются
непосредственно в текст документа и заключаются в угловые
скобки <…>.
При этом изначально принимается как данность факт не-
возможности достижения абсолютной точности воспроизве-
дения исходного документа всеми клиентами. Так, если на
компьютере нет шрифта, которым предписывается отобразить
ту или иную надпись, будет использован другой, ближайший к
нему из доступного набора.
Основное преимущество HTML заключается в том, что
документ может быть просмотрен на Web-броузерах различ-
ных типов и на различных платформах.
1.2.1. Создание HTML документов

HTML-документы могут быть созданы при помощи тек-
стового (например, Блокнот) или специализированного HTML-
редактора. Кроме того, большинство традиционных средств
для создания документов (например, Word) имеют конверте-
ры, позволяющие преобразовывать созданные документы к
формату HTML.
1.2.2. Основные положения

Все тэги HTML записываются в угловых скобках,
причем существует как парные теги, имеющие стартовые
и завершающие записи (<…> и </…>). Синтаксис парных тегов
имеет следующий вид:
<тег атрибут 1="значение" атрибут 2="значение">...</тег>
11
Некоторые тэги, не требуют завершающей записи, имеют
следующий вид:
<тег атрибут 1="значение" атрибут 2="значение">
Однако рекомендуется закрывать все теги, так как это
создает более стройный и строгий код. При этом одиночный
тег используется самостоятельно, а парный может включать
внутри себя другие теги или текст.
Работу тегов конкретизируют используемые в них атри-
буты, которые разделяются между собой пробелом. Атрибуты
тегов условно можно подразделить на обязательные, которые
непременно должны присутствовать, и необязательные, их
добавление зависит от цели применения. Порядок записи
атрибутов в любом теге не имеет значения и на результат
отображения элемента не влияет.
Согласно спецификации HTML, значения всех атрибутов
тегов следует брать в двойные ("пример") или одинарные
кавычки ('пример'). Отсутствие кавычек не приводит к ошиб-
кам, браузеры корректно обрабатывают код, за исключением
текста, содержащего пробелы.
Если какой-либо тег или его атрибут был написан невер-
но, то браузер проигнорирует подобный тег и будет воспроиз-
водить текст так, словно тега и не было.
Теги можно записывать как прописными, так и строчны-
ми символами. Любые теги, а также их атрибуты нечувстви-
тельны к регистру. Внутри тега между его атрибутами
допустимо ставить перенос строк.
Существует определенная иерархия вложенности тегов.
Например, тег <title> должен находиться внутри контейнера
<head>, а не иначе.
Дополнительные пробелы, символы табуляции и возвра-
та каретки, добавленные В исходный текст HTML-документа
для его лучшей читаемости, будут проигнорированы Web-
броузером при интерпретации документа.
1.2.3. Структура документа

Типовая структура HTML-документа представлена на ри-
сунке ниже.
12
<html>
<head>
<meta content="text/html">
<title>Мой первый сайт </title>
</head>
<body>
Привет тебе, мир.
</body>
</html>
<html> — этот тэг открывает документ.

<head> — заголовок документа. Тег является контейне-
ром для элементов, содержащих техническую информацию о
документе.
<meta> — универсальный тег, который добавляет целый
класс возможностей, в частности, можно изменять кодировку
страницы, указывать ключевые слова, описывать содержание
документа и многое другое.
<title> — определяет имя всего документа. Имя, как пра-
вило, отображается в заголовке окна браузера. Данный эле-
мент обязателен для любого HTML-документа и может быть
указан не более одного раза.
<body> — указывает начало и конец тела HTML-документа.
Между начальным и конечным тэгами содержится текст доку-
мента, изображения и таблицы. Элемент body должен встречать-
ся в документе не более одного раза.
В теле документа часто используются комментарии,
которые служат для того, чтобы было проще разобраться
в коде документа. Для вставки комментариев используется
синтаксис:

13
1.2.4. Тэг, описывающий общие
свойства документа и его атрибуты
Тег <body> описывает тело сайта и может иметь следую-
щие атрибуты:
background — определяет изображение для «заливки»
фона. Значение задается в виде полного адреса или имени
файла с картинкой в формате gif или jpg.
bgcolor — определяет цвет фона документа.
text — определяет цвет текста в документе.
link — определяет цвет гиперссылок в документе.
alink — определяет цвет подсветки гиперссылок в мо-
мент нажатия.
vlink — определяет цвет гиперссылок на документы, ко-
торые вы уже просмотрели.
Значения параметров BGCOLOR, TEXT, LINK, ALINK и VLINK
задаются либо RGB-значением в шестнадцатеричной системе,
либо одним из базовых цветов.
<html>
<head>
<title>Пример 1</title>
</head>
<body bgcolor="brown" text="white">
</body>
</html>
Результат:
Рис. 1
В следующем примере в качестве фона используется го-
товое изображение.
<html>
<head>
<title>пример 2</title>
</head>
14
<body background ="file.jpg" text="red">
</body>
</html>
Результат:
Рис. 2
Иногда, в соответствии с выбранным дизайном страницы,
требуется отступить от краев документа. Выполнить эту задачу
призваны атрибуты topmargin leftmargin и rightmargin. Атрибут
topmargin — задает ширину верхнего поля, leftmargin — левого
поля, а rightmargin — правого поля документа.
К сожалению, эти атрибуты работают не во всех браузерах.
Они поддерживаются в Internet Explorer и Mozilla Firefox. Для
Netscape Navigator есть аналогичные атрибуты для тега body.
Пример:
<html>
<head>
<title>Рамка изображения</title>
</head>
<body topmargin="35" leftmargin="50" rightmargin="50">
Язык HTML (Hyper Text Markup Language), или универсальный
язык разметки гипертекста, используется для создания самых раз-
ных интерактивных документов с гиперссылками и элементами
мультимедиа — Web-страниц, интерфейсов, презентаций, электрон-
ных книг и учебных пособий. Файлы с HTML-кодом — это обычные
текстовые файлы, доступные для чтения, как программе, так и чело-
веку. Благодаря этому HTML-страницы можно редактировать и про-
сматривать на любом компьютере и в любой операционной системе.
</body>
</html>
15
Результат:
Рис. 3
Практические советы:
Для указания типа документа в его начале записывается тег
<!DOCTYPE> — (document type definition).
<!doctupe html public "-//w3c//dtd html 4.01//en"
http://www.w3.org/TR/html4/strict.dtd">
Это необходимо, чтобы браузер понимал, как следует ин-
терпретировать текущую Web-страницу, поскольку HTML суще-
ствует в нескольких версиях. Чтобы браузер «не путался» и
понимал, согласно какому стандарту отображать Web-страницу
элемент необходимо задавать в первой строке кода.
Использование комментариев приносит огромную пользу,
но их избыток отрицательно влияет на продвижение сайта.
1.3. Форматирование текста
1.3.1. Разделение текста на абзацы

Еще в школе учат, что текст разбивается на абзацы, каж-
дый из которых выражает отдельную, законченную мысль.
Гипертекстовые документы не являются исключением из
этого правила.
Разделение текста на абзацы выполняется при помощи
тэга <p>. Тег устанавливается в начало каждого нового абзаца
текста. Использование закрывающего тэга </p> необязательно.
Замечание: Изначально базовым языком документа счи-
тался английский, а, следовательно, и абзацы оформлялись в
соответствии с правилами оформления английских текстов:
16
красная строка отсутствует, а абзацы выделяются с помощью
увеличенного межстрочного интервала.
Тэг <p> имеет один атрибут, align, имеющий значения,
представленные в таблице ниже. По умолчанию, т. е. когда этот
атрибут не используется, происходит выравнивание по левому
краю.
Значение Функция
left Выравнивание текста по левой границе окна браузера.
center Выравнивание по центру окна браузера.
right Выравнивание по правой границе окна браузера.
justify Выравнивание по границам окна браузера
Пример:
<html>
<head>
<title>выравнивание абзацев</title>
</head>
<body>
<p> В HTML несколько стоящих подряд тэгов абзаца разделя-
ются дополнительным пространством междуабзацами. </p>
<p align="left"> Выравнивание текста по левой границе
окна.</p>
<p align="center"> Выравнивание по центру окна.</p>
<p align="right"> Выравнивание по правой границе окна.</p>
</body>
</html>
Результат:
Рис. 4
1.3.2. Перевод строки

Для того чтобы перейти на следующую строку в любом
нужном вам месте текущей строки, в HTML используется тэг
17
разрыва строки <br>. Он заставляет программу просмотра
выводить стоящие после него символы с начала новой строки.
В отличие от тэга абзаца, он не добавляет пустую строку. Не
имеет закрывающего тэга.
Пример:
<html>
<head>
<title>Перевод строки</title>
</head>
<body>
Для того чтобы перейти на следующую строку в любом нужном
вам месте текущей строки, в html существует тэг разрыва строки.<br>
Он заставляет программу просмотра выводить стоящие после
него символы с начала новой строки.<br>
Текст, заключенный между тэгами <nobr> и </nobr>, будет га-
рантированно располагаться в одной строке без переноса на другую.
</body>
</html>
Результат:
Рис. 5
Бывают случаи, когда необходимо запретить перевод
строки. Это выполняется с помощью тега <nobr> Текст, заклю-
ченный между тэгами <nobr> и </nobr>, будет гарантированно
располагаться в одной строке.
При необходимости можно предложить браузеру альтер-
нативное место перевода строки при помощи тэга <wbr>
(«мягкий» перевод строки). Эта инструкция будет выполнена
только, если браузер не сможет вывести фразу одной строкой в
пределах окна.
18
1.3.3. Заголовки
Элемент «заголовок» является контейнером и поэтому
должен иметь открывающий (<h1>) и закрывающий (</h1>)
тэги. HTML располагает шестью уровнями заголовков: h1 (са-
мый крупный), h2, h3, h4, h5 и h6 (самый мелкий). Программа
просмотра выводит каждый из них, но автор не может точно
знать, в каком именно виде. Это обстоятельство является ча-
стью философии HTML: когда автор, отвечает за содержание,
а читатель определяет окончательный облик документа.
Пример:
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Заголовок 1.</h1>
</body>
</html>
Результат:
Рис. 6
19
Элемент «заголовок» предполагает автоматическую
вставку пустых строк до и после него. Этот элемент нельзя
использовать в середине абзаца для изменения размера шриф-
та. В противном случае абзац будет разбит на части.
Точно так же, как и в элементе «абзац», в заголовках
можно использовать атрибут align. Его применение здесь важ-
но с той точки зрения, что не все программы просмотра вы-
равнивают заголовки по левому краю окна.
1.3.4. «Бегущая» строка

Иногда, для придания странице сайта элемента дина-
мичности, используется так называемая «бегущая» строка,
когда текст прокручиваться либо перемещаться из стороны в
сторону. Для создания подобного эффекта используется пар-
ный тег <marquee>.
Ниже в таблице представлены атрибуты тэга
Атрибут Назначение
direction Определяет направление скроллинга. Используются
значения left, right, up, down — движение влево, вправо,
вверх и вниз
behavior Определяет вид скроллинга. Имеет значения alternate, scroll,
slide, где alternate — колебательные движения налево и
направо; scroll — перемещение текста в заданном направ-
лении; slide — аналогичен scroll, но текст перемещается
только один раз и останавливается
bgcolor Задает цвет фона
height Высота области прокрутки
width Ширина области прокрутки
loop Задает, количество раз прокрутки контента
scrollamount Скорость движения контента
hspace Горизонтальные поля вокруг контента
vspace Вертикальные поля вокруг контента
scrolldelay Величина задержки в миллисекундах между движениями
Пример горизонтальной «бегущей» строки (строка дви-

гается вправо и движение повторяется 5 раз):
<html>
<head>
<title>Бегущая строка</title>
</head>
20
<body>
<marquee behavior=scroll direction="right"
bgcolor="gold" loop="5">
Информационная строка</marquee>
</body>
</html>
Результат:
Рис. 7
Пример вертикальной «бегущей» строки (строка выпол-
няет колебательные движения по вертикали):
<html>
<head>
<title>Бегущая строка</title>
</head>
<body>
<marquee behavior=alternate direction="down"
bgcolor="yellow" width="170">
Информационная строка</marquee>
</body>
</html>
Результат:
Рис. 8
21
1.3.5. Горизонтальные линии
Другим методом разделения документа на части являет-
ся проведение горизонтальных линий. Они визуально подчер-
кивают законченность той или иной области страницы. Сейчас
часто используют рельефную, вдавленную линию, чтобы обо-
значить «объемность» документа.
Элемент <hr> позволяет провести рельефную горизон-
тальную линию. Этот тэг не является контейнером, поэтому
не требует закрывающего тэга. До и после линии автоматиче-
ски вставляется пустая строка.
Ниже в таблице представлены атрибуты тэга <hr>.
align Выравнивает линию. Имеет значения LEFT, CENTER, RIGHT.
width Устанавливает длину линии в пикселах или процентах от
ширины окна браузера; в последнем случае добавляется
символ %
size Устанавливает ширину линии в пикселах.
noshade Отменяет рельефность линии.
color Указывает цвет линии. Используется формат RGB или стан-
дартное имя.
Пример:
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<hr>
<hr align="center" width="250">
<hr align="left" width="250" color="green">
<hr size="6" width="250">
</body>
</html>
Результат:
Рис. 9
22
1.3.6. Логическое форматирование
Логическое форматирование наравне с четким структу-
рированием являются признаками хорошо составленного
документа.
Ниже перечислены элементы логического форматирования.
<cite> Используется для выделения цитат или названий книг и статей,
при этом текст обычно выводится курсивом.
<code> Применяется для вывода программного кода шрифтом фиксиро-
ванной ширины.
<var> Используется для отметки имен переменных. Обычно такой текст
отображается курсивом.
<em> Используется для выделения важных фрагментов текста. Браузеры
обычно отображают такой текст курсивом.
<samp> Используется для выделения нескольких символов шрифтом
фиксированной ширины.
<strong> Используется для выделения важных фрагментов текста полужир-
ным шрифтом.
Внимание: все перечисленные элементы являются кон-

тейнерами, т. e. требуют закрывающего тэга.
Пример:
<HTML>
<head>
<title>Логическое форматирование</title>
</head>
<body>
<cite> Для выделения цитат или названий книг и статей.
</cite> <br>
<code>Для вывода небольшого куска программного кода.
</code><br>
<em>Для выделения важных фрагментов текста.</em><br>
<samp>Вывод символов шрифтом фиксированной шири-
ны.</samp><br>
<strong>Для выделения важных фрагментов
текста.</strong><br>
<var>Для вывода имен переменных.</var><br>
</body>
</html>
23
Результат:
Рис. 10
1.3.7. Физическое форматирование

Определение внешнего вида документа формирует брау-
зер читателя. С помощью элементов физического форматиро-
вания, список которых приведен ниже, можно повлиять и на
этот процесс.
<в> Выделяет текст полужирным шрифтом.
<i> Выделяет текст курсивом.
<tt> Выводит текст шрифтом фиксированной ширины.
<u> Элемент подчёркивания.
<strike> Элемент зачеркивания.
<big> Выводит текст шрифтом большего размера.
<small> Выводит текст шрифтом меньшего размера.
<sub> Сдвигает текст ниже уровня.
<sup> Сдвигает текст выше.
Элементы физического форматирования могут быть вло-

женными друг в друга. При этом нужно внимательно следить,
чтобы один контейнер находился целиком в другом контейнере.
Пример:
<html>
<head>
<title> Физическое форматирование</title>
</head>
<body>
<b>Полужирный шрифт.</b> <br>
24
<i>Текст курсивом.</i><br>
<tt>Шрифт фиксированной ширины.</tt><br>
<u>Подчёркнутый шрифт.</u><br>
<strike>Зачёркнутый шрифт.</strike><br>
база <big>Увеличение размера шрифта.</big><br>
база <small>Уменьшение размера шрифта.</small><br>
база <sub>Сдвиг текста ниже уровня строки.</sub><br>
база <sup>Сдвиг текста выше уровня строки.</sup>
</body>
</html>
Результат:
Рис. 11
1.3.8. Шрифты
Тег <font> представляет собой контейнер и с помощью
своих атрибутов позволяет выбрать параметры используемого
шрифта.
face Позволяет указать тип шрифта. Параметром атрибута служит
название шрифта
<font face="verdana", "arial", "helvetica">
size Служит для указания размера шрифта в условных единицах

от 1 до 7. «Нормальный» шрифта соответствует 3. Размер может
быть указан как абсолютной величиной (size=5), так и относитель-
ной (size=+2). Последняя запись указывает на увеличение
размера шрифта на две единицы относительно стандартного значения
size=3.
25
color Устанавливает цвет шрифта как в шестнадцатеричном
формате RGB
<font color="#ff0000">,
так и стандартным именем.
<font color="green">
Список стандартных имен достаточно широк. Вот некоторые
из них:
Пример:
<html>
<head>
<title>Параметры шрифтов</title>
</head>
<body>
<font face="arial">Шрифт Arial</font><br>
<font size=1>Размер шрифта 1</font><br>
<font size=+2>Размер шрифта 3+2=5</font><br>
<font color="green"size=5>Цвет шрифта – зеленый</font>
</body>
</html>
26
Результат:
Рис. 12
1.3.9. Специальные символы

Некоторые символы отсутствуют на клавиатуре. К ним от-
носятся буквы алфавитов части европейских языков, математи-
ческие и некоторые другие символы. Ввести эти символы можно
с помощью специальных кодов. Эти коды начинаются с символа
«амперсанд» «&» и заканчиваются «точкой с запятой» «;».
В спецификации HTML указано большое количество
спецсимволов, но ниже будут приведены лишь наиболее часто
употребляемые.
Общие знаки
неразрывный пробел
&ensp; узкий пробел (шириной в букву n)
&emsp; широкий пробел (шириной в букву m)
© © копирайт ©
® ® знак зарегистрированной торговой марки ®
™ ™ знак торговой марки ™
§ § Параграф §
… … Многоточие …
Кавычки
" " двойная кавычка (")
& & Амперсанд (&)
Стрелки
← ← стрелка влево ←
↑ ↑ стрелка вверх ↑
27
→ → стрелка вправо →
↓ ↓ стрелка вниз ↓
↔ ↔ стрелка влево и вправо↔
Знаки арифметических операций

× × умножить (×)
÷ ÷ разделить (÷)
± ± плюс/минус (±)
≤ ≤ меньше или равно (≤)
≥ ≥ больше или равно (≥)
≈ ≈ приблизительно (≈)
≠ ≠ не равно (≠)
∞ ∞ бесконечность (∞)
∑ ∑ Суммирование (∑)
Знаки валют
€ € Евро €
¢ ¢ Цент ¢
£ £ Фунт £
1.4. Списки
В HTML-документе можно представить информацию раз-
личными способами. Одним из наиболее эффективных форма-
тов являются списки. Они легки для восприятия и могут
представлять последовательность процедур, опции для выбора
решений, перечень ссылок, меню и т. д. Списки встречаемся
везде — в ресторанных меню, энциклопедиях и телефонных
справочниках — и являются фундаментальным способом ор-
ганизации и представления информации.
HTML имеет специальные элементы-контейнеры для
представления данных в виде списков. Основными типами
списков являются нумерованные и маркированные списки,
меню, перечни каталогов и определений. Для получения до-
полнительных эффектов различные типы списков могут вкла-
дываться друг в друга.
1.4.1. Упорядоченный (нумерованный) список

Упорядоченный список используется для нумерованного
перечисления отдельных пунктов или указания последова-
тельности каких-то действий и открывается тэгом <оl>, а каж-
дый пункт списка выделяется тэгом <li>.
28
Для создания заголовка списка используется специаль-
ный тэг <lh>. Список закрывается тэгом </ol>. Открывающий и
закрывающий тэги обеспечивают перевод строки до и после
списка, отделяя, таким образом, список от остального текста,
поэтому здесь нет необходимости использовать тэги абзаца.
Пример:
<html>
<head>
<title>Нумерованный список</title>
</head
<body>
<ol>
<lh>Разные цвета:<br>
<li>Красный
<li>Синий
<li>Желтый
<li>Зеленый
</ol>
</body>
</html>
Результат:
Рис. 13
Атрибуты тэга <ol> позволяют устанавливать вид маркеров
элементов списка, а также задавать начальный маркер списка.
В таблице ниже приведены эти атрибуты и их назначения.
сомраст Представляет список в более компактном виде.
type=a Устанавливает маркер в виде прописных букв.
type=а Устанавливает маркер в виде строчных букв.
type=i Устанавливает маркер в виде больших римских цифр.
29
type=i Устанавливает маркер в виде маленьких римских цифр.
type=1 Устанавливает маркер в виде арабских цифр.
Пример использования атрибута <type>:

<html>
<head>
<title>Нумерованный список</title>
</head
<body>
<ol type="a">
<li>Красный
<li>Синий
<li>Желтый
<li>Зеленый
</ol>
</body>
</html>
Результат:
Рис. 14
Чтобы в списке, между пунктами которого располагаются
абзацы текста, не прерывалась нумерация, используется атри-
бут <start>. Например,
<html>
<head>
<title> Нумерованный список</title>
</head
<body>
<ol type="a">
<li>Красный
<li>Синий
30
<p>а в этом месте стоит небольшой абзац текста, разрываю-
щий список </p>
<li start=="3" >Желтый
<li>Зеленый
</ol>
</body>
</html>
Результат:
Рис. 15
1.4.2. Неупорядоченный
(маркированный) список
Для создания неупорядоченных списков, т. е. таких, в ко-
торых отношения между пунктами не определены, использу-
ется тэг <ul>.
Неупорядоченный список вместо буквенной или цифро-
вой нумерации предполагает использование различных сим-
волов — маркеров (от англ. bullets — маркер).
Пример:
<html>
<head>
<title>Маркированный список</title>
</head
<body>
<ul>
<lh>Планеты солнечной системы:<br>
<li>Меркурий
<li>Венера
<li>Земля
<li>Марс
31
</ul>
</body>
</html>
Результат:
Рис. 16
Как и в случае тэга <ol>, для тэга <ul> в HTML могут ис-
пользоваться специальный атрибут управления видом марке-
ров туре. Атрибут может принимать одно из трех значений:
disc, square и circle.
Пример:
<html>
<head>
<title>Маркированный список</title>
</head
<body>
<ul type="square">
<li>Венера
<li>Земля
<li>Марс
</ul>
</body>
</html>
Результат:
Рис. 17
32
1.4.3. Меню
Этот тип списков по виду мало отличается от неупорядо-
ченных и введен для удобства идентификации меню при со-
здании документов. Список, определяемый тэгом <menu>,
выводится большинством браузеров теми же шрифтами и в
том же стиле, что и неупорядоченный список.
Пример:
<html>
<head>
<title>Меню</title>
</head
<body>
<menu>
<lh> Планеты солнечной системы:<br>
<li><a href="mercury.htm">Меркурий</a>
<li><a href="venus.htm">Венера</a>
<li><a href="earth.htm">Земля</a>
<li><a href="mars.htm">Марс</a>
</menu>
</body>
</html>
Результат:
Рис. 18
1.4.4. Список определений

Списки определений, также называемые словарями спе-
циальных терминов (глоссариями), являются особым видом
списков. Они представляют текст, состоящей из определяемого
термина и абзаца, раскрывающего его значение. Элемент спис-
ка определений <dl> является контейнером и обеспечивает
отделение списка от остального текста пустыми строками.
33
Внутри контейнера тэгом <dt> помечается определяемый
термин, а тэгом <dd> — абзац с его определением. Тэги <dt> и
<dd> не являются контейнерами и поэтому не имеют закры-
вающих тэгов.
Пример:
<html>
<head>
<title>Список определений</title>
</head
<body>
<dl>
<dt>Драйвер
<dd>Специальная программа, перекодирующая команды
процессора
<dt>Список определений
<dd>Словарь специальных символов
<dl>
</body>
</html>
Результат:
Рис. 19
Текст после тэга <dt> должен помещаться в одной строке.
Текст, стоящий за тэгом <dd>, выводится отдельным абзацем с
отступом вниз на одну строку.
1.4.5. Комбинирование списков

Бывают ситуации, когда в список одного типа требуется
включить список другого типа. Например, в нумерованный
список, в каждом пункте требуется разместить неупорядочен-
ный список.
34
Пример:
<html>
<head>
<title>Комбинирование списков</title>
</head
<body>
<ol>
<lh>Небесные тела:<br>
<li>Планеты:
<ul>
<li>Венера
<li>Земля
</ul>
<li>Звезды
<li>Астероиды
</ol>
</body>
</html>
Результат:
Рис. 20
1.5. Использование графики

Изображения могут сделать текст документа более со-
держательным, помогая лучше передать суть и содержание
документа. Старое правило гласит: один рисунок может быть
ценнее тысячи слов.
Принимая решение о целесообразности включения в до-
кумент той или иной иллюстрации, надо иметь в виду следу-
ющие соображения:
— Графические файлы передаются медленно, но пользо-
ватель не должен ждать несколько минут, пока загрузится
графический файл.
35
— Изображения не всегда интернациональны. Поэтому
назначение и смысл какой-либо иллюстрации могут быть не
поняты представителями других культур.
— Цветная графика не всегда переносима. Цветная иллю-
страция, хорошо смотрящаяся на одном компьютере, может
«бледно» выглядеть на другом.
1.5.1. Выбор формата графического файла

Существует множество форматов графических изображе-
ний, однако, создавая HTML-документ, следует ограничить
свой выбор лишь тремя из них — GIF, PNG и JPEG.
Каждый из форматов имеет свои преимущества и важно
объективно оценивать выбираемые форматы по скорости и
потерям при передаче, по глубине цветовой гаммы и с точки
зрения поддержки различными браузерами.
GIF (Graphical Interchange Format). Был разработан для се-
ти CompuServe. После ряда усовершенствований он приобрел
много важных свойств, включающих:
— cжатие данных без потерь;
— поддержку прозрачного фона;
— чересстрочный вывод на экран;
— поддерживает 256 цветов.
JPEG (Joint Photographic Experts Group) Использует метод
сжатия фотографических изображений «с потерями». Основ-
ные свойства формата:
— сжатие происходит «с потерями», поэтому изображе-
ние теряет некоторые детали. В частности, наблюдается «дро-
жание» контурных линий;
— размер файла сжатого изображения, как правило,
меньше, чем в случае GIF, т. е. файл передается быстрее;
— поддерживает 16,7 миллионов цветов, что обеспечива-
ет очень хорошее качество цветопередачи.
PNG (Portable Network Graphics) был разработан в 1995 го-
ду, чтобы прийти на смену формату GIF. Одновременно были
переработаны некоторые технические характеристики, в част-
ности, улучшено сжатие и увеличено количество поддерживае-
мых цветов.
36
1.5.2. Вставка изображения в документ
Помещение изображения на страницу выполняется тэгом
<img> совместно с атрибутом src:
<img src="pic.jpg">
где filename — имя файла изображения.
Если картинка лежит в поддиректории основной папки
сайта, то ссылка будет выглядеть так:
<img src="picture/pic.jpg">
Если файл изображения лежит в другой папке на этом же
уровене, то ссылка будет иметь вид:
<img src="../pic.jpg">
Если используется изображение, файл которого лежит на
другом сайте, то путь прописывается полностью, например, так:
<img src="http://www.mero.ru/picture/pic.jpg">
1.5.3. Выравнивание текста

по краю изображения
По умолчанию, когда изображение вставляется в строку
текста, строка выравнивается по низу изображения. Изменить
эту установку можно при помощи атрибута align тэга <img>.
В таблице описаны значения атрибута allign.
Значение Описание
тор выравнивает текст по верху изображения.
middle выравнивает текст по середине изображения.
botton выравнивает текст по низу изображения.
Пример:
<html>
<head>
<title>Выравнивание изображений</title>
</head>
<body>
текст по верху изображения <img src="log.jpg" align="top">
<br>
текст по середине. <img src="log.jpg" align="middle"><br>
текст по низу. <img src="log.jpg" align="botton">
37
</body>
</html>
Результат:
Рис. 21
1.5.4. Позиционирование
изображения на странице
По умолчанию программа просмотра выводит изображение
в текущей строке. Текст не «обтекает» его. Однако при помощи
атрибута align тэга <img> изображение можно сделать «плаваю-
щим», т. e. заставить текст расположиться вокруг изображения.
В таблице ниже приведены значения атрибута align, пози-
ционирующие обтекаемое текстом изображение относительно
краев окна браузера.
Значение Описание
left Обтекаемое текстом изображение прижато к левой стороне
окна браузера.
right Обтекаемое текстом изображение прижато к правой стороне
окна браузера.
Пример:
<html>
<head>
<title>Обтекание изображения</title>
</head>
<body>
<img src="log.jpg" align="left"> По умолчанию программа просмот-
ра выводит изображение в текущей строке. Текст не «обтекает» его.
Однако при помощи атрибута align изображение можно сделать «плава-
ющим», т. е. заставить текст расположиться вокруг изображения.
38
<br><br><br>
<img src="log.jpg" align="right"> По умолчаниюпрограмма про-
смотра выводит изображение в текущей строке. Текст не «обтекает» его.
Однако при помощи атрибута align изображение можно сделать «плава-
ющим», т. е. заставить текст расположиться вокруг изображения.
</body>
</html>
Результат:
Рис. 22
1.5.5. Прерывание текста

при обтекании изображения
При формировании контекста страницы может возник-
нуть ситуация, когда требуется прервать обтекание изображе-
ния и начать новый абзац после него. Для этого в теге <img>
предусмотрен атрибут clear, который может принимать одно
из следующих значений: all, left, right.
Значения left и right указывают на завершение обтекание
текстом изображения, выровненного по левому и правому
краю, соответственно. Значение all призвано завершить любое
обтекание.
Пример:
<html>
<head>
<title>Прерывание текста</title>
</head>
<body>
39
<img src="cat_04.jpg" align="left" width="100">
Британские кошки — бывают от средних до крупных размеров.
Согласно легенде, являются потомками Чеширского кота.
<br clear="left">
Шерсть у Британской кошки очень пушистая и мягкая, хоть и
довольно короткая. Британским кошкам свойственно много различ-
ных окрасов, самые популярные — сплошные, табби или разновид-
ности: пятно, полоса и мрамор.
</body>
</html>
Результат:
Рис. 23
1.5.6. Указание размеров

выводимого изображения
При помощи тэга <img> программе просмотра можно со-
общить размеры изображения. Для указания размеров изоб-
ражения (в пикселах) служат атрибуты height и width.
Если указанные размеры не совпадают с размерами
изображения, программа просмотра изменяет масштаб изоб-
ражения.
Допустимо задавать только один размер изображения —
высоту или ширину. В этом случае другой размер будет авто-
матически пересчитан исходя из первоначального соотноше-
ния его сторон.
Пример:
<html>
<head>
40
<title>Размеры изображений</title>
</head>
<body>
Размер изображения 10*100
<img src="log.jpg" width="100" height="100"><br>
Размер изображения 70*70
<img src="log.jpg" width="70" height="70"><br>
Задана только высота height=120
<img src="log.jpg" height="120"><br>
Задана только ширина width=50
<img src="log.jpg" width="50">
</body>
</html>
Результат:
Рис. 24
1.5.7. Альтернативное описание изображения

Некоторые читатели экономят свое время и не загружа-
ют изображения. Дать им представление об иллюстрациях
можно при помощи текстового указания. Для этого использу-
ется атрибут alt тэга <img>:
Если браузер читателя не выводит изображение, на его ме-
сте будет помещено альтернативное описание. Если указатель
мыши задержать на иллюстрации на одну-две секунды, этот же
текст будет выведен в специальном всплывающем окошке.
41
1.5.8. Помещение изображения в рамку
Эта операция предполагает применение атрибута border
тэга <img>. По умолчанию программа просмотра использует рам-
ку, которая указана в соответствующей ссылке. Значение, получа-
емое атрибутом border, соответствует толщине линий рамки.
Пример:
<html>
<head>
<title>Рамка изображения</title>
</head>
<body>
Рамка шириной 1 пикс.
<img src="log.jpg" border="1"><br><br>
Рамка шириной 6 пикс.
<img src="log.jpg" border="6">
</body>
</html>
Результат:
Рис. 25
1.5.9. Отделение изображения от текста

Если текст слишком близко подходит к изображению, то
используя атрибуты vspace и hspace можно указать расстояния
(по вертикали и горизонтали) между кромкой текста и краями
иллюстрации.
Пример:
<html>
<head>
42
<title>Отделение изображения</title>
</head>
<body>
Вам может не понравиться, что текст слишком близко подхо-
дит к изображению.
<img src="log.jpg" vspace="20" hspace="20" align="left"
border="1" width="70">
<br>
Отделить его помогут атрибуты vspace и hspace. Они позволя-
ют указать расстояния (по вертикали и горизонтали) между кромкой
текста и краями иллюстрации.
<br>
Теперь текст будет отодвинут от изображения на расстояние
20 пикселей как по горизонтали, так и по вертикали. Для того чтобы
это было хорошо видно изображение взято в рамку.
<br>
Таким образом, ситуация будет исправлена и контекст страни-
цы приобретет приятный глазу вид.
</body>
</html>
Результат:
Рис. 26
1.6. Ссылки
Гипертекстовый документ характеризуется наличием в
контенте его web-страницы ссылок, которые позволяют пере-
ходить на другие страницы. При этом ссылка может вести к
страницам данного сайта или другого внешнего по отношению
к нему. В целом, переход может быть осуществлен к файлам
любого типа при условии их доступности.
43
1.6.1. Что такое ссылка
Ссылка состоит из указателя (anchor), который отобра-
жается на web-странице, и адресной части (URL-адрес), которая
содержит инструкцию браузеру.
На сайтах обычно используются либо текстовые, либо
графические указатели. Текстовый указатель представляет
собой слово или выражение, которые выделяются цветом и
подчеркиванием. Цвет указателя регулируются атрибутами
link, alink и vlink тега <body> (см. выше).
Использование графических указателей имеет свои осо-
бенности, связанные с тем, что они не могут быть выделены
цветом и представляют собой обычные картинки, пиктограм-
мы или рекламной вставки. Единственный способ выделить
графический указатель это создать вокруг него рамку, но
обычно это мало приемлемо из-за нарушения дизайна.
URL-адрес это адрес web-страницы, которая будет загру-
жена, если щелкнуть на указателе ссылки мышью. При этом
используются как относительные, так и абсолютные адреса.
Относительный указатель — это адрес файла, располо-
женного на том же компьютере, что и документ, в котором
находится указатель этой ссылки.
Абсолютные указатели — это адрес, полностью опреде-
ляющий компьютер и каталог, в котором располагается файл.
1.6.2. Создание ссылок на документы и файлы

Для включения ссылок в документ необходимо сообщить
браузеру, такой элемент страницы является указателем, и ука-
зать адрес документа, на который ссылаются. Оба действия
выполняются при помощи тэга <a>.
Тэг <a> имеет единственный атрибут href, в котором разме-
щается URL-адрес. Этот тэг является контейнером, поэтому необ-
ходимо ставить закрывающий тэг </a> сразу же за указателем.
Приведенные ниже примеры иллюстрируют создание
текстовой и графической ссылок.
<html>
<head>
<title>Текстовая ссылка</title>
44
</head
<body>
Текстовая ссылка<br>
<a href="http://knigainformatika.narod.ru/"> Сайт
"Информатика и программирование"</a>
</body>
</html>
Результат:
Рис. 27
<html>
<head>
<title>Графическая ссылка</title>
</head
<body>
Графическая ссылка<br>
<a href="http://knigainformatika.narod.ru/
title="Ссылка на сайт информатики">
<img src="logo.jpg" border="1" </a>
</body>
</html>
Результат:
Рис. 28
Примечания:
1. Так как графическая ссылка мало заметна на странице
сайта и её легко спутать с иллюстрацией контекста, рекомен-
дуется заключать её в рамку.
45
2. В теге <a> использован атрибут title. Данный атрибут
относится к группе универсальных и может быть использован
практически во всех тегах с целью вывода на экран всплываю-
щей подсказки.
3. По умолчанию, при переходе по ссылке документ от-
крывается в текущем окне. При необходимости, это условие
может быть изменено параметром target тега <a>. Если устано-
вить у параметра target значение blank, то откроется новое окно,
в которое будет загружено содержимое указанного файла.
1.6.3. Внутренние ссылки

Кроме ссылок на другие документы, часто бывает полез-
но включить ссылки на разные части текущего документа.
Например, большой документ читается лучше, если он имеет
оглавление со ссылками на соответствующие разделы.
Для построения внутренней ссылки нужно создать ука-
затель, показывающий место назначения. Например, если
необходимо сделать ссылку на текст в середине документа,
нужно разместить там указатель и дать ему имя при помощи
атрибута name тэга <а>. При этом атрибут href не использует-
ся, и браузер не выделяет содержимое тэга.
После того как указателю присвоили имя, можно присту-
пить к созданию ссылки на него. Для этого в атрибут href по-
мещается имя указателя со специальным префиксом (#).
Пример:
<html>
<head>
<title>Сбербанк России</title>
</head>
<body>
<a name="начало">
<h4 align = "center">Услуги сбербанка по вкладам</h4>
Сбербанк России предоставляет следующие услуги повкла-
дам:<br>
<a href = "#ДВ"> Депозитные вклады </a><br>
<a href = "#СВ"> Срочные вклады </a><br>
<a href = "#ВВ"> Валютные вклады </a><br>
</a>
<a name="ДВ">
46
<h3 align = center>Депозитные вклады</h3>(Текст с условиями
вкладов)</a><br>
<a name="СВ">
<h3 align=center>Срочные вклады</h3>(Текст с условиями
<a name="ВВ">
<h3 align=center>Валютные вклады</h3>(Текст с условиями
</a>
<a href = "#начало">В начало документа</a>
</body>
</html>
Результат:
Рис. 29
После выбора пункта «Срочные вклады» осуществляется
переход к якорю СВ.
Рис. 30
Чтобы вернуться в начало используется ссылка, стоящая
внизу страницы.
47
Рис. 31
1.6.4. Файлы и другие встраиваемые объекты

Когда пользователь щелкает мышью на ссылке, указы-
вающей на другую Web-страницу, она выводится непосред-
ственно в окне браузера. Если же ссылка указывает на
документ иного типа, программа просмотра принимает доку-
мент и затем решает, что с ним делать.
Если браузер «знает» этот тип документа и умеет с ним
обращаться. Например, если используется ссылка на графиче-
ский файл и пользователь щелкнул мышью на этой ссылке, то
программа выведет изображение.
Если браузер «не узнает» тип документа, то он обратится
к пользователю с вопросом как необходимо обработать дан-
ный документ.
Связь с электронной почтой (e-mail).
Очень часто для получения отклика читателей на содер-
жание вашего документа, требуется поместить ссылку свой
электронный адрес.
Создание ссылки на электронную почту так же просто,
как и на другую страницу, только вместо «http:», определяю-
щего Web-адрес, нужно ввести адрес электронной почты после
слова «mailto:».
Пример:
<HTML>
<HEAD>
<TITLE>Отправка письма на Email</TITLE>
</HEAD
<BODY>
<A HREF="mailto:me@com.ru">Отправка письма на me@com.ru </A>
48
</BODY>
</HTML>
Результат:
Рис. 32
После щелчка мышью на ссылке откроется окно про-
граммы для работы с электронной почтой. При этом адрес
получателя заполняется автоматически.
Связь с FTP.
Другим популярным видом ссылок являются ссылки на
сайты FTP. Протокол передачи файлов FTP (File Transfer
Protocol) позволяет пользователям копировать файлы с других
компьютеров.
Ссылка на сайт FTP похожа на другие гипертекстовые
ссылки, только вместо «http:» нужно поставить «ftp:». Если не
указывать имя файла, браузер выведет перечень всех файлов в
каталоге.
1.6.5. Карты и ссылки

Создание карты изображения позволяет пользователю
привязывать ссылки на другие документы к отдельным частям
изображений. Щелкая на них мышью, пользователь может пере-
ходить по ссылкам на другие документы. Такое изображение
называют навигационной картой. Необходимо использовать
браузер, поддерживающий данную технологию. Навигационные
карты задаются тегом <map>. Тег <map> является контейнером и
включает себя теги <area>, которые определяют геометрические
области внутри карты и ссылки, связанные с каждой из них.
Атрибут coords — определяет координаты, положение
геометрической формы. Число координат и порядок их значе-
ний зависят от выбранной формы. Отсчет ведется от левого
верхнего угла картинки. Это началом координат (0;0). Для
прямоугольной области нужны координаты верхнего левого и
нижнего правого углов области.
49
<area shape="rect" coords="x1,y1,x2,y2">
Для создания круглой области необходимы координаты
ее центра (x, y) и длина радиуса (R) в пикселях.
<area shape="circle" coords="x,y,R">
Для создания области многоугольника необходимы ко-
ординаты многоугольника
<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">
Рис. 33
Для примера создания навигационной карты можно ис-
пользовать приведенное ниже изображение, с размерами
150 × 150 пикселей.
Рис. 34
Предполагается, что при нажатии на красный квадрат —
срабатывает одна ссылка, зеленый — другая и т. д.
50
В начале, с помощью тега <img> прописывается исходное
изображение. В теге задаётся параметр usemap="box", чтобы
создаваемая карта под именем «box» знала к какой картинке
она относится. После описания изображения задается тег
<map>, описывающий создаваемую навигационную карту.
<img src="rect.jpg" usemap="#box">
<map name="box">
Теперь необходимо выполнить разметку изображения на
области с помощью тега <area>. Тег имеет несколько атрибутов.
Первый атрибут shape описывает форму области. Атри-
бут может принимать следующие значения:
circle — область в виде окружности;
poly — область в виде многоугольника;
rect — область в виде прямоугольника.
Второй атрибут cords задает координаты области. Коорди-
наты записываются через запятую. Например, для используемого
изображения красный прямоугольник задается координатами
верхнего левого и нижнего правого углов — 0,0,75,75.
Третий — href задает собственно ссылку.
Таким образом, для приведенного изображения может
быть использован следующий код:
<html>
<head>
<title>Навигационная карта</title>
</head
<body>
<img src="rect.jpg" usemap="#box">
<map name="box">
<area shape="rect" coords="0,0,75,75"
href="http://informatika.narod.ru/" title="Красный">
href="http://informatika.narod.ru/" title="Синий">
href="http://informatika.narod.ru/" title="Зеленый">
href="http://informatika.narod.ru/" title="Желтый">
</map>
</body>
</html>
51
Результат:
Рис. 35
1.7. Таблицы
В издательском деле таблицы являются одним из основ-
ных методов дизайна. Они представляют данные в виде удоб-
ных для восприятия колонок и строк и значительно упрощают
анализ информации. С их помощью отделяют одну часть пуб-
ликации от другой, улучшая структуризацию документа.
1.7.1. Основы построения таблиц

Тег <table> представляет собой контейнер, в котором
размещается содержимое таблицы.
Таблица строится по строкам: для обозначения строки
используется контейнер tr, для обозначения заголовков столб-
цов — контейнер th, а для данных в ячейках — контейнер TD.
Заголовки выделяются полужирным шрифтом и центрируются
в своих ячейках.
1.7.2. Основные тэги таблиц

Ниже приведен список основных тэгов таблиц
<table></table> Контейнер таблицы.
<tr></tr> Контейнер строки таблицы.
<td></td> Контейнер ячейки таблицы. В ячейку можно включить
другую таблицу.
<th></th> Контейнер заголовка, располагающегося в первой строке,
либо в первом столбце таблицы.
52
Пример построения простой таблицы:
<html>
<head>
<title>Простая таблица</title>
</head
<body>
<table>
<tr>
<th>Фамилия</th><th>Имя</th><th>Отчество</th>
</tr>
<tr>
<td>Иванов</td><td>Иван</td><td>Иванович</td>
</tr>
<tr>
<td>Петров</td><td>Петр</td><td>Петрович</td>
</tr>
<tr>
<td>Васин</td><td>Василий</td><td>Васильевич</td>
</tr
</table>
</body>
</html>
Результат:
Рис. 36
Заголовки столбцов и строк выводятся полужирным
шрифтом и располагаются по центру своей ячейки. Данные име-
ют обычный шрифт и выравниваются по левой стороне ячейки.
1.7.3. Таблицы c рамками

За наличие и вид рамки таблицы отвечает атрибут border
тэга <table>, причем, она изначально отображается как трех-
мерная. Этот атрибут устанавливает ширину рамки таблицы в
пикселях.
53
Пример:
<html>
<head>
<title>Рамки</title>
</head
<body>
<table border="2">
<tr>
<th>Фамилия</th><th>Должность</th><th>Оклад</th>
</tr>
<tr>
<td>Петров</td><td>Техник</td><td>30000</td>
</tr>
<tr>
<td>Сидоров</td><td>Инженер</td><td>45000</td>
</tr>
<tr>
<td>Иванова</td><td>Секретарь</td><td>33000</td>
</tr>
</table>
</body>
</html>
Результат:
Рис. 37
1.7.4. Размещение данных внутри ячеек

При помощи атрибутов align и valign можно по-разному
размещать данные относительно границ ячейки. Эти атрибуты
используются совместно с элементами <tr>, <th> и <td> в самых
различных комбинациях. Ниже приведены значения атрибутов.
54
<tr> Атрибут align может принимать значения left, center, right и
justify (по умолчанию — left). Он определяет горизонтальное
выравнивание данных в ячейках и действует на всю строку, если
не отменяется тем же атрибутом в отдельной ячейке. Атрибут
valign может иметь значения тор, bottom, middle и baseline (по
умолчанию — middle). Он регулирует положение данных отно-
сительно верхней и нижней границ ячейки и влияет на всю
строку, если не отменяется таким же атрибутом в отдельной
ячейке. BASELINE применяется ко всем элементам строки и
выравнивает их по базовой линии.
<th> Атрибут align может принимать значения left, center, right и
justify (по умолчанию — center). Атрибут valign может иметь
значения тор, bottom и middle (по умолчанию — middle).
<TD> Атрибут align может принимать значения left, center, right и
justify (по умолчанию — left). Атрибут valign может иметь значе-
ния тор, bottom, middle и baseline (по умолчанию — middle).
Пример:
<html>
<head>
<title>Выравнивание данных</title>
</head
<body>
<table border>
<tr>
<th>Фрукты</th><th>Овощи</th><th>Цветы</th>
</tr>
<tr valign="middle">
<td>Мандарин</td><td>Цветная<br>капуста</td>
<td>Ромашка</td>
</tr>
<tr>
<td>Яблоко</td><td>Лук</td><td>Фиалка</td>
</tr>
<tr align="center">
<td>Киви</td><td>Свекла</td><td>Роза</td>
</tr>
</table>
</body>
</html>
55
Результат:
Рис. 38
1.7.5. Объединение ячеек

Смежные ячейки таблицы могут объединяться с целью
размещения большего количества данных. Например, в табли-
це необходимо объединить две ячейки в первой строке. Это
может быть сделано с использованием атрибута colspan в тэге
<th> или <td>, например:
<td colspan=2>
Возможно также объединить три ячейки в одном столб-
це. Для этого используется атрибут rowspan тэга <th> или <td>,
например:
<td rowspan=3>
Пример объединения смежных ячеек в одной строке:
<html>
<head>
<title>Объединение ячеек</title>
</head
<body>
<table border>
<tr>
<th colspan="3">Cтуденты группы</th>
<th colspan="2">Дисциплины</th>
</tr>
<tr align="center">
<td><b>Фамилия</td><td> <b>Имя</td><td> <b>Отчество</td>
<td> <b>История</td><td> <b>Иностранный</td>
56
</tr>
<tr>
<td>Иванов</td><td>Иван</td><td>Иванович</td>
<td>Отлично</td><td>Хорошо</td>
</tr>
<tr>
<td>Петров</td><td>Петр</td><td>Петрович</td>
<td>Хорошо</td><td>Удовлетворительно</td>
</tr>
<tr>
<td>Викторов</td><td>Виктор</td><td>Викторович</td>
<td>Хорошо</td><td>Отлично</td>
</tr>
</table>
</body>
<html>
Результат:
Рис. 39
Пример объединения смежных ячеек в одном столбце:
<html>
<head>
<title>Объединение ячеек</title>
</head
<body>
<table border>
<tr>
<th rowspan=2>Студенты группы</th>
<th colspan="2">Дисциплины</th>
</tr>
<tr align="center">
57
<td><b>История</td><td><b>Иностранный</td>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Отлично</td><td>Хорошо</td>
</tr>
<tr>
<td>Петров Петр Петрович</td>
<td>Хорошо</td><td>Удовлетворительно</td>
</tr>
<tr>
<td>Викторов Виктор Викторович</td>
<td>Хорошо</td><td>Отлично</td>
</tr>
</table>
</body>
<html>
Результат:
Рис. 40
1.7.6. Пустые ячейки

Наличие в ячейках данных обязательно, поэтому создать
пустую ячейку можно, лишь заполнив ее специальным симво-
лом пустого пространства .
Пример:
<html>
<head>
<title>Пустые ячейки</title>
</head
<body>
58
<table border>
<tr>
<th>Студенты группы</th><th>История</th>
</tr>
<tr>
<td>Зачтено</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Зачтено</td>
</tr>
</table>
</body>
<html>
Результат:
Рис. 41
1.7.7. Дополнительные атрибуты таблиц

Для создания таблицы использовались следующие ат-
рибуты:
WIDTH Определяет ширину таблицы или отдельной ячейки в
пикселах, или в процентах от ширины окна браузера.
HEIGHT Определяет высоту таблицы или отдельной ячейки в
пикселах, или в процентах от высоты окна браузера.
CELLPADDING Добавляют свободное пространство между данными
внутри ячейки и ее границами
CELLSPACING Добавляют свободное пространство между ячейками
внутри всей таблицы.
59
Пример:
<html>
<head>
<title>Дополнительные атрибуты</title>
</head
<body>
<table border=5 cellpadding=10 cellspacing=20 width=100%>
<tr>
<td width=30%>Ширина ячейки 30% общей ширины</td>
<td>border=5 <br>
cellpadding=10 <br>
cellspacing=20 </td>
</tr>
</table>
<body>
</html>
Результат:
Рис. 42
1.7.8. Использование цвета и изображений

Во всей таблице, отдельных ячейках или строках табли-
цы можно изменить цвет рамки ячеек с помощью атрибута
bordercolor и фона — при помощи атрибута bgcolor.
Пример использования атрибута bordercolor:
<html>
<head>
<title>Атрибут bordercolor</title>
</head>
<body>
<table cellspacing="3" border="5" bordercolor="green">
<tr><th width="80">Цвета</th><th>Код</th></tr>
60
<tr><td width="80">Красный</td>
<td>Red FF0000</td></tr>
<tr><td width="80">Оранжевый</td>
<td>Orangered FF4500</td></tr>
<tr><td width="80">Желтый</td>
<td>Yellow FFFF00</td></tr>
<tr><td width="80">Зеленый</td>
<td>Lawngreen 7CFC00</td></tr>
<tr><td width="80">Голубой</td>
<td>Cyan 00FFFF</td></tr>
<tr><td width="80">Синий</td>
<td>Blue 0000FF</td></tr>
<tr><td width="80">Фиолетовый</td>
<td>Darkviolet 9400D3</td></tr>
</table>
</body>
</html>
Результат:
Рис. 43
Пример использования атрибута bgcolor:
<html>
<head>
<title>Использование цветов</title>
</head
<body>
<table border=2>
<tr>
61
<th>Студенты группы</th><th>История</th>
</tr>
<tr>
<td bgcolor="yellow">Зачтено</td>
</tr>
<tr>
<td bgcolor="red">Не явился</td>
</tr>
<tr>
<td bgcolor="yellow">Зачтено</td>
</tr>
</table>
</body>
<html>
Результат:
Рис. 44
В следующем примере как фон таблицы используется
изображение.
<html>
<head>
<title>Рисунок как фон</title>
</head>
<body>
<table background="cat.jpg" width=600 height=369
border="2">
<tr =>
<td>ячейка_1_1</td>
62
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Результат:
Рис. 45
1.7.9. Вложенные таблицы

Вложенные таблицы — это обычные таблицы, которые
располагаются в ячейках другой таблицы. Благодаря вложен-
ным таблицам гораздо проще управлять содержимым сайта.
63
Пример:
<html>
<head>
<title>Вложенные таблицы</title>
</head>
<body>
<table border="5" bordercolor="red">
<tr>
<td width="250" valign="top" align="left">
Вложенные таблицы — это обычные таблицы, которыераспо-
лагаются в ячейках другой таблицы. Благодаря вложенным таблицам
гораздо проще управлять содержимым сайта.
</td>
<td width="250" valign="top" align="center">
Вложенная таблица
<table cellspacing="3" border="5" bordercolor="green">
<tr>
<td width="80">Цвета радуги</td>
<td> </td>
</tr>
<tr>
<td width="80">красный</td>
<td>Red FF0000</td>
</tr>
<tr>
<td width="80">оранжевый</td>
<td>Orangered FF4500</td>
</tr>
<tr>
<td width="80">желтый</td>
<td>Yellow FFFF00</td></tr>
<tr>
<td width="80">зеленый</td>
<td>Lawngreen 7CFC00</td>
</tr>
<tr>
<td width="80">голубой</td>
<td>Cyan 00FFFF</td>
</tr>
<tr>
<td width="80">синий</td>
<td>Blue 0000FF</td>
</tr>
64
<tr>
<td width="80">фиолетовый</td>
<td>Darkviolet 9400D3</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Результат:
Рис. 46
1.8. Тест
1. Что из ниже перечисленного является браузером?
а) Microsoft Word
б) HomeSite
в) Google.com
г) Microsoft Internet Explorer
2. Что из ниже перечисленного можно использовать для
просмотра HTML-страницы?
а) Notepad
б) Microsoft Internet Explorer
в) PhotoShop
г) Windows
65
3. Что из ниже перечисленного можно использовать для
просмотра HTML-страницы?
а) Notepad
б) Linux
в) Opera
г) Google.com
4. Какой из следующих фрагментов HTML-кода содержит
ошибку?
а) Можно <i> расставить акценты</i>
б) Текст курсивом: <i></i>
в) Тег или </i>дескриптор<i>
г) Код содержит <i> символы</i>
5. Какой из следующих фрагментов HTML-кода не со-
держит ошибки?
а) Вложенный тег <i><u>
б) Разметка <u> гипертекста </u>
в) Полужирный курсив "I","B"
г) Тег <U>
6. В каком случае абзац будет выровнен по левому краю:
а) <Р align = center >
б) <Р align = right >
в) <Р align = justify>
г) <Р align = left>
7. Какой из следующих фрагментов HTML-кода не содер-
жит ошибки?
а) <P_align=center>
б) <Р align=center>
в) <Р align=center>
г) <align=center>
ошибки?
а) <FONT face="ARIAL CYR">
б) <FONT face="Arial Cyr">
в) <FONT face="Arial Bold">
г) <FONT>новый шрифт</FONT>
66
ошибки?
а) <FONT size=3>
б) <FONT size=-3>
в) <FONT size=+6>
г) <FONT size=8 pt>
а) <color=red font size=1>
б) <font="red, 1">
в) <font size=1 color=red>
г) <font color=red></font color>
11. Какой из следующих фрагментов HTML-кода содер-
а) <Н1>Заголовок</H1>
б) <Н1 align=left>Заголовок</H1>
в) <Н1 align=center>Заголовок</H1>
г) <Н1 align=justify>Заголовок</H1>
12. Какие из следующих пар фрагментов отображаются в
браузере одинаково?
а) <DFN>HTML</DFN> — <B>HTML</B>
б) <DFN>HTML</DFN> — <ACKRONYM>HTML</ACKRONYM>
в) <DFN>HTML</DFN> — <DEL>HTML</DEL>
г) <DFN>HTML</DFN> — <I>HTML</I>
а) <UL start=l>
<LI> Первый элемент списка
<LI> Второй элемент списка
</UL>
б) <UL start=circle>
</UL>
в) <UL type=circle>
</UL>
67
г) <UL type=l>
</UL>
а) <IMG src="Мои документы\mydoc.jpg">
б) <IMG src="Mydoc\mydocument.jpg">
в) <IMG src="Mydoc/mydocument.jpg">
г) <IMG src="Mydoc/mydocument.tif">
а) <IMG src=picture.jpg border=1 bordercolor=red>
б) <IMG src=picture.jpg border=red>
в) <IMG src=picture.jpg border=1,5>
г) <IMG src=picture.jpg border=1>
16. Какой из следующих фрагментов HTML-кода содер-
а) <IMG src=vasya.gif alt=Этo Вася>
б) <IMG src=vasya.gif alt=vasya.gif>
в) <IMG src=vasya.gif alt = vasya>
г) <IMG src=vasya.gif alt="Этo Вася">
17. Для того чтобы текст обтекал изображение справа,
используется следующий код:
а) <IMG src=pict.gif align=right> текст
б) <IMG src=pict.giff> текст
в) <IMG src=pict.gif align=left> текст
г) <IMG left src=pict.gif текст
а) <А> Гиперссылка </А>
б) <А href="page2.htm"> Гиперссылка </А>
в) <А target=page2.htm> Гиперссылка </А>
г) <HREF> page2.htm </HREF>
19. Какой тип списка описан ниже?
<ol>
<li>элемент 1</li>
68
</ol>
Выбрать ответ:
а) Маркированный
б) Нумерованный
в) Список определений
20. В каком случае абзац будет выровнен по левому краю:
а) <Р align = center >
б) <Р align = right >
в) <Р align = justify>
г) <Р align = left>
а) <А> Гиперссылка </А>
б) <А href="page2.htm"> Гиперссылка </А>
в) <А target=page2.htm> Гиперссылка </А>
г) <HREF> page2.htm </HREF>
1.9. Задания для самостоятельной работы

Задание 1. Форматирование текста. Создать сайты по при-
веденным ниже образцам.
а)
Рис. 47
69
b)
Рис. 48
с)
Рис. 49
Задание 2. Ссылки. Создать сайты по приведенным ниже
образцам.
a)
Рис. 50
b)
Рис. 51
70
Задание 3. Ссылки. Создать сайты по приведенным ниже
образцам.
а)
Рис. 52
b)
Рис. 53
c)
Рис. 54
d)
Рис. 55
71
Задание 4. Таблицы. Создать сайт по приведенному ниже
образцу.
Рис. 56
Задание 5. Объединение ячеек таблицы. Создать сайты по
приведенным ниже образцам.
а)
Рис. 57
b)
Рис. 58
c)
Рис. 59
72
Задание 6. Использование вложенных таблиц. Создать сайт
по образцу.
Рис. 60
Глава 2. Основы технологии CSS
Изначально HTML использовался исключительно для
разметки документа, т. е. с его помощью указывалось, что
это — параграф, а это — таблица или картинка и т. д. Но со
временем выдвигались все более серьезные требования к
дизайну сайтов. Это требовало теги, которые определяли уже
не только структуру, но и внешний вид сайта. И таких тегов
появилось все больше и больше. К сожалению, большая часть
таких тегов поддерживалась только одним видом браузеров,
что взывало ошибки при просмотре того или иного сайта.
Использование CSS (Cascading Style Sheets — каскадные
таблицы стилей) значительно облегчает и автоматизирует
создание веб-сайтов, открывая совершенно новые возможно-
сти в веб-дизайне. Стиль — это набор параметров, задающий
внешнее представление некоторого объекта в той или иной
среде. CSS работает со шрифтами, полями, таблицами, отступа-
ми, картинками и др.
2.1. Синтаксис и принцип работы CSS

CSS имеет строго определенный синтаксис, т. е. правила,
по которым создаются таблицы стилей. В CSS нет ни элемен-
тов, ни атрибутов, ни тегов. Основной структурной единицей в
CSS является правило, которое определяет, как будет выгля-
деть тот или иной элемент в документе.
Правила имеют следующую структуру:
селектор {свойство: значение; свойство: значение; …},
где селектор — это HTML элемент, которому требуется при-
дать определенный стиль. Непосредственно за селектором,
пишется блок объявления стилей, который обязательно за-
ключается в фигурные скобки. Каждое объявление состоит из
свойств и их значений. Свойство — это атрибут стиля, который
требуется изменить. Каждое свойство имеет значение, которое
отделяется двоеточием.
Правило может содержать в себе несколько объявлений.
В таком случае они должны быть отделены друг от друга точ-
кой с запятой.
74
Чтобы сделать код CSS более читаемым, обычно записы-
вают объявления следующим образом:
h1
{
color:blue;
font-size:14px;
}
Комментарии CSS используются, чтобы пояснить запи-
санный код. Комментарии игнорируются браузерами. Коммен-
тарий начинается с "/*", и заканчивается "*/".
Например:
/*Это комментарий*/
p
{
text-align:center;
/*Это другой комментарий*/
color:black;
font-family:arial;
}
2.2. Способы подключения

CSS к HTML–документу
Существует три способа вставки таблицы стилей:
— Внешняя таблица стилей.
— Внутренняя таблица стилей.
— Встроенный стиль.
2.2.1. Внешняя таблица стилей

Внешняя таблица стилей идеально подходит, когда стили
должны применяться ко многим страницам. С помощью внеш-
ней таблицы стилей можно изменить вид целого Web-сайта
путем редактирования одного файла.
Каждая страница должна ссылаться на таблицу стилей,
используя тег <link>, который располагается в head-секции:
<head>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
75
Внешняя таблица стилей записывается в файле с расши-
рением .css с помощью любого текстового редактора. Един-
ственное правило: файл не должен содержать какие-либо html
теги. Пример файла таблицы стилей:
hr {color:sienna;}
p {margin-left:20px;}
body {background-
image:url("images/back40.gif");}
Пробелы между значением свойства и единицами его из-
мерения не допускаются!
Если создана таблица стилей style.css и несколько стра-
ниц html, причем все это расположено в одной папке, то в каж-
дом документе, в котором необходимо его подключить, между
тегами <head> и </head> требуется прописать строчку:
<link rel="stylesheet" type="text/css"href="style.css">
Пример:
style.css
h1{color:green;font-size:14px}
index.html
<html>
<head>
<title>Работаем со стилями</title>
href="style.css">
</head>
<body>
<h1>Заголовок текста</h1>
Это моя первая таблица стилей, и если все работает, то несмот-
ря ни на что заголовок первого уровня отобразится высотой в
14 пикселей и будет зеленого цвета
</body>
</html>
Результат:
Рис. 61
76
2.2.2. Внутренняя таблица стилей
Внутренняя таблица стилей используется, когда отдель-
ный документ имеет уникальный стиль.
Например:
<html>
<head>
<title>Внутренняя таблица стилей</title>
<style type="text/css">
h3 {color:sienna;}
p {margin-left:20px;}
</style>
</head>
<body>
<h3>Пример внутренней таблицы стилей</h3>
<p>
Внутренняя таблица стилей используется, когда отдельный
документ имеет уникальный стиль.
</p>
</body>
</html>
Результат:
Рис. 62
2.2.3. Встроенные стили

Встроенный стиль теряет много преимуществ таблиц
стилей, смешивая содержание с оформлением. Этот метод
используется в исключительных случаях!
Чтобы добавить встроенные стили, используется атрибут
style в соответствующем теге. Атрибут style может содержать
любое свойство CSS.
Пример: изменен цвет и левый отступ параграфа:
<html>
<head>
<title>Внутренний стиль</title>
77
</head>
<body>
<p style="color:sienna;margin-left:20px">
Особенность национального сознания диссипативных инте-
гралов приводит к значительной дегуманизации урбанизированного
человеческого существования.
</p>
</body>
</html>
Результат:
Рис. 63
Внутренняя таблица стилей и встроенные стили не дают
особых преимуществ перед html. Ведь при попытке изменить
дизайн всего сайта, построенного по их принципу, придется
изменять стили на всех страницах.
2.2.4. Несколько таблиц стилей

Если некоторые свойства были установлены для одного
и того же селектора в различных таблицах стилей, значения
будут браться из более специфической таблицы стилей.
Например, внешняя таблица стилей определяет свойства
для селектора h3:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
И внутренняя таблица стилей устанавливает тоже свой-
ства для селектора h3:
h3
{
text-align:right;
78
font-size:20pt;
}
В результате для селектор h3 будут приняты свойства:
color:red;
text-align:right;
font-size:20pt;
Цвет берется из внешней таблицы стилей, а выравнива-
ние текста и размер шрифта заменяются значениями из внут-
ренней таблицы стилей.
Таким образом, встроенный стиль имеет наивысший
приоритет. Это означает, что встроенный стиль перепишет
свойства селекторов, указанные во внешней и внутренней
таблицах стилей.
Ниже, в примерах, для большей наглядности будут ис-
пользоваться встроенные стили.
2.3. Цвет и фон в CSS

Цвета в CSS указываются так же, как и в html, либо в форма-
те RGB (например, #ff3355), либо стандартным названием цвета.
2.3.1. Свойство COLOR

Задает основной цвет того или иного элемента. Напри-
мер, требуется сделать цвет заголовка первого уровня крас-
ным, а цвет текста параграфа зеленым:
<html>
<head>
<title>Свойство color</title>
</head>
<body>
<h1 style="color:red;">Понятие информация</h1>
<p style="color:green;">
Информация — это вся совокупность сведений об окружающем
нас мире, о всевозможных протекающих в нем процессах, которые
могут быть восприняты живыми организмами, электронными маши-
нами и другими информационными системами.
</p>
</body>
</html>
79
Результат:
Рис. 64
2.3.2. Свойство BACKGROUND-COLOR

Задает фоновый цвет элемента. В отличие от html, в ко-
тором фоновый цвет можно использовать только для страни-
цы или ячейки таблицы в CSS фоновый цвет можно задавать
для любых объектов.
Например, требуется изменить фоновый цвет приведенной
выше страницы.
<html>
<head>
<title>Свойство background-color</title>
</head>
<body style="background-color:#FFEE8C;">
<h1 style="color:red;background-color:blue;">
Понятие информация
</h1>
</p>
</body>
</html>
Результат:
Рис. 65
80
2.3.3. Свойство BACKGROUND-IMAGE
Данное свойство используется для задания фонового
изображения. Укажем фоновое изображение для всей страни-
цы, т. е. для элемента BODY.
<html>
<head>
<title>Свойство background-image</title>
</head>
<body style="background-color:#FFEE8C;
background-image:url(smile.jpg);">
<h1 style="color:red;
background-color:blue;">
Понятие информация
</h1>
</p>
</body>
</html>
Результат:
Рис. 66
2.3.4. Свойство BACKGROUND-REPEAT

Фоновое изображение, по-умолчанию, повторяется начи-
ная с верхнего левого угла, как по вертикали, так и по горизон-
тали, пока не заполнит весь экран.
С помощью свойства background-repeat, можно контролиро-
вать эти повторения. Это свойство может принимать 4 значения:
Background-repeat: repeat-x; — повторение по горизонтали;
Background-repeat: repeat-y; — повторение по вертикали;
81
Background-repeat: repeat; — по вертикали и по горизон-
тали (умалчиваемое значение);
Background-repeat: no-repeat; — без повторений.
Пример записи:
<html>
<head>
<title>Свойство background-repeat</title>
</head>
<body style="background-image:url(smile.png);
background-repeat:repeat-x;">

</body>
</html>
Результат:
Рис. 67
Если вообще не указывать это свойство, то будет исполь-
зоваться его значение по умолчанию, т. е. фоновое изображе-
ние будет повторяться как по вертикали, так и по горизонтали.
2.3.5. Свойство BACKGROUND-ATTACHMENT

Это свойство устанавливает, будет ли фоновое изображе-
ние прокручиваться с содержимым страницы, или будет за-
блокировано, т. е. неподвижно.
Свойство может принимать одно из двух значений:
— scroll — фон прокручивается вместе с содержимым
(умалчиваемое значение);
— fixed — фон строго зафиксирован.
2.3.6. Свойство BACKGROUND-POSITION

Задает позицию фонового изображения. Значения можно
задавать в процентах, в единицах длины и при помощи ключевых
слов. Отсчет как обычно ведется из левого верхнего угла браузе-
ра, где и располагается фоновое изображение по умолчанию.
На рисунке приведены примеры позиционирования (точка —
это «изображение», а то, что под ней — координаты).
82
Рис. 68
В начале указывают координату по горизонтали, затем
через пробел координату по вертикали. Координату можно
задавать в процентах от ширины окна браузера, либо в пиксе-
лях. Можно задавать и в сантиметрах, но не рекомендуется.
Также положение можно задавать специальными слова-
ми: left — лево, right — право, center — центр, top — верх,
bottom — низ. На рисунке ниже приведены примеры позицио-
нирования (точка — это «изображение», а под ней — коорди-
наты, заданные словами).
Рис. 69
Примеры стилей:
<html>
<head>
<title>Свойство background-position</title>
</head>
<body style="background-image:url(smile.jpg);
background-repeat:no-repeat;
background-position:top right;">
<h1>Понятие информация</h1>
83
<p>Информация — это вся совокупность сведений об окружа-
ющем нас мире, о всевозможных протекающих в нем процессах,
которые могут быть восприняты живыми организмами, электрон-
ными машинами и другими информационными системами.
</p>
</body>
</html>
Результат:
Рис. 70
Если изменить свойство background-position:top right на
background-position:center center, то результат работы будет
иметь вид:
Рис. 71
А для background-position: bottom left.
Рис. 72
84
2.3.7. Сокращенная форма
записи — BACKGROUND
Свойство background служит для сокращенной записи
всех выше рассмотренных свойств.
Порядок свойств этого элемента таков:
1. background-color.
2. background-image.
3. background-repeat.
4. background-attachment.
5. background-position.
Для компактности записи можно задавать значения всех
свойств background через пробел в одной строке. Например,
BODY{ BODY{
background-color:#ffee8c; background:#ffee8c
background-image:url(smile.png); url(smile.png)
background-repeat:no-repeat; no-repeat
background-attachment:fixed; fixed
background-position:top right;} top right;}
Если какое-либо свойство не указать, то ему автоматиче-
ски присвоится умалчиваемое значение.
2.4. Шрифты в CSS
2.4.1. Свойство FONT-FAMILY

Данное свойство определяет гарнитуру шрифта. Шрифты
объединяются в три основных семейства.
— Serif — шрифты с характерными «засечками», наибо-
лее яркий представитель «Times New Roman»;
— Sans-serif — шрифты рубленые, без засечек, например
Arial или Verdana ;
— Monospace — моноширинные шрифты такие как «Cou-
rier New».
Правило: «Если в названии шрифта встречаются пробелы,
то его следует заключать в кавычки».
Пример:
<html>
<head>
<title>Свойство font-family</title>
</head>
85
<body>
<h1 style="font-family:arial, verdana">Три медведя</h1>
<p style="font-family:'Times New Roman', verdana">
В домике этом жили три медведя. Один медведь был отец, зва-
ли его Михайло Иванович. Он был большой и лохматый. Другой была
медведица. Она была поменьше, и её звали Настасья Петровна. Тре-
тий был маленький медвежонок, и звали его Мишутка.</p>
</body>
</html>
Результат:
Рис. 73
В начале перечня пишется самый приоритетный шрифт,
затем менее приоритетный, а затем желательно писать имя
семейства. Например:
h1 {font-family: verdana, arial, sans-serif;}
Если по каким либо причинам шрифт verdana не установ-
лен, то браузер подставит шрифт arial, а если и его нет, то
любой доступный шрифт из семейства serif.
2.4.2. Свойство FONT-STYLE

Данное свойство задает стиль шрифта и может прини-
мать одно из трех значений:
— normal — обычный;
— italic — курсивный;
— oblique — наклонный.
Может возникнуть вопрос: «Чем отличается курсивный
от наклонного?», — дело в том, что значение italic означает
использование встроенного в шрифт курсивного начертания.
Ведь почти каждый шрифт включает в себя все символы и
буквы в нормальном исполнении, в полужирном исполнении и
в курсивном.
86
В свою очередь, значение oblique — это искусственно со-
зданный курсив, т. е. созданный наклоном стандартных букв
на определенный угол.
Пример:
<html>
<head>
<title>Свойство font-style</title>
</head>
<body>
<h1 style="font-family:verdana, sans-serif;
font-style:normal;">
Заголовок 1-го уровня</h1>
font-style:italic;">
font-style:oblique;">
</body>
</html>
Результат:
Рис. 74
2.4.3. Свойство FONT-VARIANT

Это свойство используется для выбора варианта написа-
ния букв нижнего регистра. Может принимать два значения:
— normal — значение по умолчанию, текст отображается
обычным образом;
— small-caps — буквы нижнего регистра отображаются
как уменьшенные заглавные.
Пример записи стиля:
<html>
<head>
87
<title>Свойство font-variant</title>
</head>
<body>
<p style="font-family:verdana, sans-serif;
font-variant:small-caps;">
Первый абзац текста</p>
<p style="font-family:verdana, sans-serif;
font-variant:normal;">
Второй абзац текста </p>
</body>
</html>
Результат:
Рис. 75
2.4.4. Свойство FONT-WEIGHT

Это свойство определяет насыщенность шрифта, т. е. с
его помощью можно сделать шрифт жирным. Основные значе-
ния: normal — обычный и bold — жирный.
<html>
<head>
<title>Свойство font-weight</title>
</head>
<body>
<p style="font-family:arial, sans-serif;
font-weight:normal;">
В лесу она заблудилась и стала искать дорогу домой, да не
нашла, а пришла в лесу к домику.</p>
<p style="font-family:arial, sans-serif;
font-weight:bold;">
Дверь была отворена; она посмотрела в дверь, видит: в домике
никого нет, и вошла.</p>
</body>
</html>
88
Результат:
Рис. 76
2.4.5. Свойство FONT-SIZE

C помощью этого свойства можно регулировать размер
шрифта. В качестве единиц измерения лучше всего использо-
вать пикселы, т.к. это универсальный способ во всех браузерах.
Пример:
<html>
<head>
<title>Свойство font-size</title>
</head>
<body>
<h1 style="font-family:arial, sans-serif;
font-size:22px;">
<h2 style="font-family:arial, sans-serif;
font-size:32px;">
</body>
</html>
Результат:
Рис. 77
2.4.6. Сокращенная запись. Свойство FONT

Все перечисленные выше свойства можно записать в
краткой форме. Это помогает экономить время и cделать код
89
стилей более легким. При этом все свойства должны следовать
в такой последовательности:
1. font-style;
2. font-variant;
3. font-weight;
4. font-size;
5. font-family.
Для компактности записи можно задавать значения всех
свойств font через пробел в одной строке. Например,
p{ p{
font-style:italic; font:italic
font-variant:normal; normal
font-weight:bold; bold
font-size:30px; 30px
font-family:arial, sans-serif;} arial, sans-serif;}
Если какое-либо свойство не указать, то ему автоматиче-

ски будет присвоено умалчиваемое значение.
2.5. Текст в CSS
2.5.1. Свойство TEXT-ALIGN

Свойство выравнивания текста, аналогичное атрибуту
align, используемому в html. Может принимать одно из четырех
значений:
— left — выравнивание по левому краю (значение по
умолчанию);
— right — выравнивание по правому краю;
— center — выравнивание по центру;
— justify — выравнивание по ширине.
<html>
<head>
<title>Свойство text-align</title>
</head>
<body>
<h1 style="text-align:center;">Заголовок 1-го уровня</h1>
<h2 style="text-align:left;">Заголовок 2-го уровня</h2>
<h3 style="text-align:right;">Заголовок 3-го уровня</h3>
<p style="text-align:justify;">
90
</body>
</html>
Результат:
Рис. 78
2.5.2. Свойство TEXT-DECORATION

Позволяет оформлять текст определенным образом. Рас-
смотрим четыре основных значения данного свойства:
— none — значение по умолчанию. Дополнительного
оформления не происходит;
— underline — текст подчеркивается снизу;
— overline — текст надчеркивается сверху;
— line-through — текст перечеркивается.
Пример:
<html>
<head>
<title>Свойство text-decoration</title>
</head>
<body>
<h1 style="text-align:center;
text-decoration:underline;">Заголовок 1-го уровня</h1>
text-decoration:overline;">Заголовок 2-го уровня</h2>
text-decoration:overline;">Заголовок 3-го уровня</h3>
91
</body>
</html>
Результат:
Рис. 79
2.5.3. Свойство TEXT-INDENT

Это свойство используется для создания отступов первой
строки абзацев. Значение лучше задавать в пикселях.
Пример:
<html>
<head>
<title>Свойство text-indent</title>
</head>
<body>
<p style="text-align:justify;
text-indent:30px;">
</body>
</html>
Результат:
Рис. 80
Можно задать отступ первой строки и в процентах от об-
щей длины базовой строки (строки без отступа).
92
2.5.4. Свойство TEXT-TRANSFORM
C помощью этого свойства, можно видоизменять текст,
меняя большие буквы на маленькие или наоборот. Свойство
может иметь следующие значения:
— capitalize — делает первые буквы каждого слова за-
главными.
— uppercase — делает из всех букв заглавные.
— lowercase — делает все буквы прописными.
— none — не производит смены регистра (используется
по умолчанию).
Пример:
<html>
<head>
<title>Свойство text-transform </title>
</head>
<body>
<p style="text-transform:capitalize;">
В домике этом жили три медведя. один медведь был отец, зва-
ли его Михайло Иванович. он был большой и лохматый.</p>
<p style="text-transform:uppercase;">
Другой была медведица. Она была поменьше, и её звали Наста-
сья Петровна.</p>
<p style="text-transform:lowercase;">
Третий был маленький медвежонок, и звали его Мишутка.</p>
</body>
</html>
Результат:
Рис. 81
2.5.5. Свойство LETTER-SPACING

C помощью этого свойства можно изменять расстояние
между буквами. Значение лучше указывать в пикселях.
93
Пример:
html>
<head>
<title>Свойство letter-spacing</title>
</head>
<body>
letter-spacing:10px;">Три медведя</h1>
<p style="text-align:justify;
letter-spacing:4px;">
</body>
</html>
Результат:
Рис. 82
2.5.6. Свойство WORD-SPACING

Позволяет изменять расстояние между словами. Значе-
ние лучше задавать в пикселах.
Пример:
<html>
<head>
<title>Свойство word-spacing</title>
</head>
<body>
<h1>Три медведя</h1>
<p style="word-spacing:10px;">
94
</body>
</html>
Результат:
Рис. 83
2.6. Списки в CSS

Все описанные ниже свойства универсальны, т. е. могут
применяться как к упорядоченным спискам (OL), так и к
неупорядоченным (UL).
2.6.1. Свойство LIST-STYLE-TYPE

Позволяет определять вид маркера элементов списка.
Это могут быть цифры, буквы, квадратики, кружочки и др.
Ниже приведены основные значения этого свойства:
— disk — маркер в виде закрашенного круга;
— circle — маркер в виде незакрашенного круга;
— square — маркер в виде закрашенного квадрата;
— decimal — обычные десятичные числа, например, 1, 2,
3, 4 и т. д.;
— upper-roman — большие римские цифры, типа I, II, III,
IV и т. д.;
— lower-roman — маленькие римские цифры типа i, ii, iii,
iv и т. д.;
— upper-alpha — большие буквы A, B, C, D, E и так далее;
— lower-alpha — малые буквы типа a, b, c, d, e и т. д.;
— none — маркер списка отсутствует.
95
В качестве примера можно построить неупорядоченный
и упорядоченный списки:
<html>
<head>
<title>Свойство list-style-type</title>
</head
<body>
<ul style="list-style-type:upper-roman;">
<li>Красный
<li>Синий
<li>Желтый
<li>Зеленый
</ul>
<ol style="list-style-type:square;">
<li>Венера
<li>Земля
<li>Марс
</ol>
</body>
</html>
Результат:
Рис. 84
96
2.6.2. Свойство LIST-STYLE-IMAGE
Это свойство позволяет поставить вместо маркера любое
изображение. В качестве значения указывается ключевое
слово url и затем в круглых скобках путь к изображению.
Пример:
<html>
<head>
<title>Свойство list-style-image</title>
</head
<body>
<ul style="list-style-image:url(galka.jpg);">
<li>Венера
<li>Земля
<li>Марс
</ul>
</body>
</html
Результат:
Рис. 85
2.6.3. Сокращенная форма LIST-STYLE

Перечисленные выше свойства можно записать более ком-
пактно. Для этого существует сокращенный вариант list-style.
ul{ ul{
list-style-type:square; list-style:square
list-style-position:inside; inside
list-style-image:url(galka.gif); url(galka.gif)
} }
Свойства указываются через пробел и последователь-
ность в данном случае роли не играет.
97
2.7. Ссылки в CSS
На различных сайтах при наведении на ссылку меняется
ее внешний вид: исчезает подчеркивание, меняется цвет и
другие эффекты. Это делает CSS, а отвечают за это псевдо-
классы — классы, способные учитывать те или иные условия
при определении свойств html элемента.
Применение псевдокласса к ссылкам:
а: — имя псевдокласса {стиль}
Для ссылок используют четыре псевдокласса:
— a:link {стиль оформления обычной ссылки};
— a:active {стиль оформления ссылки в момент нажатия};
— a:visited {стиль оформления посещенной ссылки};
— а:hover {стиль оформления ссылки, на которую наве-
ден указатель мыши}.
По умолчанию ссылки выглядят так:
Рис. 86
Видно, что только посещённая ссылка отличается от дру-
гих, а остальные выглядят одинаково. Это не очень удобно,
и поэтому разработчики часто используют свой оригинальный
стиль, где все режимы работы с ссылкой имеют разное оформ-
ление:
a:link {color:blue ;}
a:visited {color:gray;}
a:hover {color:red ;
text-decoration:none;}
a:active {color:green;
text-decoration:none;}
Чтобы для всех псевдоклассов оформить одинаковый

стиль можно использовать запись:
a:link, a:visited, a:hover, a:active {color:black;}
или и вовсе обходится без псевдоклассов:
a {color:black; text-decoration:none;}
98
При установке стилей для нескольких состояний ссылки,
действуют правила:
— a:hover должно идти после a:link и a:visited;
— a:active должно идти после a:hover.
2.8. Типы селекторов в CSS

Селектор служит для того, чтобы однозначно определить
элемент в html документе, к которому необходимо применить
тот или иной стиль CSS. Различают:
— селектор по элементу;
— селектор по классу;
— селектор по id;
— контекстный селектор.
2.8.1. Селектор по элементу

Селектор по элементу характеризуется тем, что в его ка-
честве используется непосредственно имя html элемента,
к которому применяется данный стиль. При таком подходе
стиль оформления параграфа (p) действует для всех парагра-
фов на странице.
А если необходимо сделать первый параграф в одном
стиле, второй в другом, третий в третьем и т. д., то требуется
перейти к использованию селектора по классу.
2.8.2. Селектор по классу

В данном случае вначале потребуется создать универ-
сальный класс в CSS. Описание класса начинается с задания его
имени, которому предшествует точка, а затем в фигурных
скобках следует описание стиля. Например,
green
{
font-family:arial, verdana, sans-serif;
font-size:12px; color:green;
}
Теперь чтобы применить данный стиль к определенному
параграфу в документе можно использовать запись:
<р class ="green"> ... текст параграфа ... </р>
99
Пример:
style.css
p {font-family:verdana,sans-serif;font-size:18px;}
.green {color:green;}
.big {font-size:24px; color:red;}
index.html
<html>
<head>
<title>Селектор по id</title>
href="style.css">
</head>
<body>
<p>Это обычный параграф, для него используется селектор по
элементу.</p>
<p class="green"> Этот параграф зеленый, к нему применили
класс.</p>
<p class="big">А этот параграф большего красного шрифта.</p>
<p>Этот параграф снова обычный, по классу селектора элемен-
та.</p>
</body>
</html>
Результат:
Рис. 87
Рекомендуется сначала описать базовый стиль для всех
параграфов (селектор по элементу), а уже потом, если необхо-
димо что-то изменить, создать для конкретного параграфа
специальный стиль (селектор по классу). Создавая этот специ-
альный класс, необходимо вписать в него те свойства, которые
требуется добавить, или изменить, по отношению к базовому
стилю его элемента.
100
Классы из примера выше, можно применить не только к
параграфу, но и к заголовкам, ячейке таблицы, или ко всей
таблице. Короче, эти классы могут применяться везде, где они
могут на что-то.
Сделать так, чтобы класс действовал только на опреде-
ленный элемент (например, параграф) можно указав название
элемента перед точкой:
p.green {color:green;}
Теперь класс green будет действовать только на элемент р.
2.8.3. Селектор по id
Данный селектор применяется, если необходимо выде-
лить один единственный уникальный элемент. К примеру,
требуется выделить первый заголовок на странице.
style.css
h1#first {color:red;text-align:center}
index.html
<html>
<head>
<title>Селектор по id</title>
href="style.css">
</head>
<body>
<h1 id="first">Первый заголовок на странице</h1>
<h1>Обычный заголовок на странице </h1>
</body>
</html>
Результат:
Рис. 88
101
В приведенном примере для применения созданного
класса вместо атрибута class употребляется атрибут id, а при
описании — вместо точки употребляется знак #.
2.8.4. Контекстный селектор

Допустим, существует страничка с таблицей или пара-
графами текста, причем и в них встречаются слова, выделен-
ные жирным шрифтом (strong). Необходимо, чтобы эти слова
стали зеленого цвета. Для решения данной задачи требуется
использовать контекстный селектор.
Описание селектора формируется следующим образом: в
начале p, затем пробел, затем strong, а уже потом стиль.
p strong {color:green}
Такая строка читается примерно так: если внутри эле-
мента p имеется элемент strong, то этому элементу присвоить
стиль зеленого цвета.
Пример:
style.css
p strong {color:green;}
index.html
<html>
<head>
<title>Контекстный селектор</title>
href="style.css">
</head>
<body>
<p>Одна девочка ушла из <strong>дома</strong> dв лес. В лесу
она заблудилась и стала искать дорогу <strong>домой</strong>. </p>
</body>
</html>
Результат:
Рис. 89
102
Вложенность может быть любого уровня. Если внутри
ячейки таблицы (td), встречается параграф (p), внутри которо-
го есть слова, выделенные жирным (strong), то сделать эти
слова красными.
td p strong {color:red;}
Рис. 90
2.9. Таблицы в CSS

Вид таблицы может быть значительно улучшен с по-
мощью CSS.
2.9.1. Границы таблиц

Чтобы указать границы таблиц, используется свойство
border. В примере ниже создается таблица с красными границами:
style.css
table, th, td {border:1px solid red;}
index.html
<html>
<head>
<title>Границы таблиц</title>
href="style.css">
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Отчество</th>
<th>Фамилия</th>
103
</tr>
<tr>
<td>Иван</td>
<td>Иванович</td>
<td>Иванов</td>
</tr>
<tr>
<td>Петр</td>
<td>Петрович</td>
<td>Петров</td>
</tr>
</table>
</body>
</html>
Результат:
Рис. 91
Таблица в рассмотренном примере имеет двойные гра-
ницы. Это потому, что как элемент table, так и элементы th и
td — имеют отдельные границы.
Чтобы отобразить одинарную границу для таблицы, ис-
пользуйте свойство border-collapse.
2.9.2. Свернутые границы

Свойство border-collapse устанавливает, будут ли грани-
цы таблицы свернуты в одинарную границу, или будут отоб-
ражаться отдельно:
Пример:
style.css
table{border-collapse:collapse;}
table,td,th {border:1px solid blue;}
104
index.html
<html>
<head>
<title>Свернутые границы</title>
href="style.css">
</head>
<body>
<table>
<tr>
<th>Имя</th>
</tr>
<tr>
<td>Иван</td>
</tr>
<tr>
<td>Петр</td>
</tr>
</table>
</body>
</html>
Результат:
Рис. 92
2.9.3. Ширина и высота таблицы

Ширина и высота таблицы определяются с помощью
свойств width и height.
Пример ниже устанавливает ширину таблицы в 100 %,
и высоту элементов th в 50 px.
105
style.css
table,td,th {border:1px solid blue;}
table {width:400px;}
th {height:50px;}
index.html
<html>
<head>
<title>Ширина и высота таблицы</title>
href="style.css">
</head>
<body>
<table>
<tr>
<th>Студент</th>
<th>Факультет</th>
<th>Группа</th>
</tr>
<tr>
<td>Экономический</td>
<td>ФЭК471-1</td>
</tr>
<tr>
<td>Менеджмент</td>
<td>ФМЕ171-2 </td>
</tr>
</table>
</body>
</html>
Результат:
Рис. 93
106
2.9.4. Выравнивание текста таблицы
Текст в таблице выравнивается с помощью свойств text-
align и vertical-align.
Свойство text-align указывает горизонтальное выравни-
вание, например: по левому краю (left), по правому краю (right),
или по центру (center):
Пример:
style.css
table,td,th {border:1px solid black;}
table{width:500px;}
td#td1{text-align:right;}
td#td2{text-align:center;}
td#td3{text-align:left;}
index.html
<html>
<head>
<title>Выравнивание текста по горизонтали</title>
href="style.css">
</head>
<body>
<table>
<tr>
</tr>
<tr>
<td id="td1">Иванов</td>
<td id="td2">Экономический</td>
<td id="td3">ФЭК471-1</td>
</tr>
<tr>
<td id="td3">Петров</td>
<td id="td2">Менеджмент</td>
<td id="td1">ФМЕ171-2 </td>
</tr>
</table>
</body>
</html>
107
Результат:
Рис. 94
Свойство vertical-align устанавливает вертикальное вы-
равнивание, например, по верху (top), по низу (bottom), или
посередине (middle):
style.css
td{height:50px;}
td#td1{vertical-align:top;}
td#td2{vertical-align:middle;}
td#td3{vertical-align:bottom;}
index.html
<html>
<head>
<title>Выравнивание текста по вертикали</title>
href="style.css">
</head>
<body>
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
108
</tr>
</table>
</body>
</html>
Результат:
Рис. 95
2.9.5. Свойство PADDING

Чтобы контролировать пространство между границей и
содержанием в таблице, используется свойство use padding в
элементах td и th:
Пример:
style.css
td {padding:15px;}
index.html
<html>
<head>
<title>Свойство padding </title>
href="style.css">
</head>
<body>
<table>
<tr>
<th>Имя</th>
</tr>
<tr>
109
<td>Иван</td>
</tr>
<tr>
<td>Петр</td>
</tr>
</table>
</body>
</html>
Результат:
Рис. 96
2.9.6. Цвет и изображение в таблице

Пример ниже указывает цвет границ, текста и фона эле-
ментов th.
style.css
table,td,th {border:1px solid green;}
th {background-color:green;color:white;}
td#td1{background-color:yellow;color:blue;}
td#td2{background-color:red;color:white;}
td#td3{background-color:#999999;color:red;}
index.html
<html>
<head>
<title>Цвет в таблице</title>
href="style.css">
</head>
110
<body>
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Результат:
Рис. 97
style.css
tr {height:50px;}
index.html
<html>
<head>
<title>Таблица </title>
href="style.css">
</head>
<body>
<table background="cat.jpg" width=300 border="1">
111
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Результат:
Рис. 98
2.10. Тест
1. Есть такой HTML-код:
<p><span class="blue">Синий</span> не синий</p>.
Какой CSS-код внутри тега <span> сделает синий цвет:
а) .blue {color: blue;}
б) все представленные варианты подойдут
112
в) p span {color: blue;}
г) span {color: blue;}
2. Какое свойство используется для задания отступов у
блока?
а) direction
б) position
в) padding
г) margin
3. Имеется такой HTML-код:
<div id="myid">Содержимое</div>.
Как задать стиль для тега <div>?
а) div[myid] {margin: 1px;}
б) div.myid {margin: 1px;}
в) .myid {margin: 1px;}
г) div#myid {margin: 1px;}
4. Есть такой CSS-код во внешнем файле:
p {color:blue;}.
На странице написан такой HTML-код:
<p style="color:red;">текст</p>.
Какого цвета будет «текст»?
а) Синего
б) Красного
в) В браузере IE8 синего, а в других красного
г) Чёрного
5. Границы страницы не примыкают к краям окна брау-
зера. Куда надо добавить свойство margin:0;?
а) head
б) doctype
в) body
г) html
6. Какой CSS-код написан правильно?
а) div {border: 1px solid #hhh;}
б) <div> {border: 1px solid #ccc;}
в) <div> {border: 1px solid #hhh;}
г) div {border: 1px solid #ccc;}
113
7. Как изменить цвет фона для всех элементов h1 на
странице?
а) h1[all] {background-color: #ccc;}
б) h1 {background-color: #ccc;}
в) h1.all {background-color: #ccc;}
г) h1:all {background-color: #ccc;}
8. Что происходит после выполнения кода?
ul li:first-letter {font-size: 200%;}
а) Первая буква у каждого элемента ненумерованного
списка размером 200 %
б) Первая буква у первого элемента в нумерованном
списке размером 200 %
в) Первая буква у первого элемента в ненумерованном
списке размером 200 %
г) Ничего не происходит, так как псевдоэлемента first-
letter вообще не существует
9. Какой псевдоэлемент нужно использовать, чтобы при
наведении курсора мыши на ссылку, она меняла цвет?
а) active
б) link
в) hover
г) onmouseover
10. Какой селектор написан с ошибкой?
а) input[type="text"]
б) div p
в) input["text"]
г) input.text
11. Какое CSS правило синтаксически корректное?
а) div:[font_size-2em]
б) div [font-size:2em]
в) div {font-size:2em}
г) div {font_size:2em}
12. Какое CSS свойство позволяет устанавливать размер
шрифта?
а) font-weight
б) font-size
114
в) size
г) weight
13. Какой селектор позволяет выбрать все элементы div
имеющие атрибут id='wrap'?
а) div-wrap
б) div id.wrap
в) div.wrap
г) div#wrap
14. С помощью какого тэга можно подключить к HTML
документу внешний файл стилей?
а) <style>
б) <link>
в) <meta>
г) <css>
15. С помощью какого CSS свойства можно оформить
границу элемента?
а) border
б) padding
в) margin
г) outline
16. Какие виды позиционирования элементов суще-
ствуют в CSS
а) flow, none, show, shift
б) absolute, relative, static, fixed
в) slip, relating, attached, static
17. Выберите перечень, содержащий только существую-
щие CSS свойства фона:
а) background-color, background-repeat
б) background-repeat, background-picture
в) background-align, background-image
18. Какое CSS свойство позволяет управлять порядком
наложения элементов?
а) index
б) z-index
в) stack
г) order
115
19. Какое CSS свойство было использовано для превра-
щения первой таблицы во вторую?
Таблица 1
Таблица 2
Ячейка 1 Ячейка 2
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4 Ячейка 3 Ячейка 4
а) border-width
б) border-collapse
в) border-visibility
20. Укажите CSS свойства, которые были использованы
для оформления абзаца ниже.
Данный абзац был оформлен с помощью CSS
а) font-color, size и text-decoration

б) letter-spacing и color
в) color, font-size и text-decoration
г) font-color, font-size и font-decoration

Сформировать сайт, содержащий фрагмент русской
народной сказка по выбору. Используя текст сайта, выполнить
следующие задания по его форматированию с помощью CSS.
Задание 1:
1. Сделать все абзацы <p> красного цвета.
2. Поставить все <h1> по центру.
3. Сделать красную строку в абзацах 30 px.
Задание 2:
1. Сделать все абзацы <р> шириной 300 px.
2. Сделать <h3> жирным.
3. Сделать для <h2> шрифт Times New Roman.
Задание 3:
1. Сделать так, чтобы текст в абзацах <p> был выровнен
по ширине.
2. Сделать все абзацы <p> курсивом.
3. Сделать для абзацев <p> текст подчеркнутым и голубым.
116
Задание 4:
1. Сделать все <h2> шрифтом 20 px.
2. Поставить текст в таблице <table> по верхнему краю
по вертикали.
3. Придумайте селектор, который выберет все <h2>
внутри дивов <div>.
Задание 5:
1. Поставить все <h2> по правому краю.
2. Сделать список с большими римскими цифрами.
3. Сделать для абзацев <p> текст, состоящим из пропис-
ных букв.
Задание 6:
1. Сделать все <h2> 20 px.
2. Сделать межстрочный интервал для абзацев <p> в 30 px.
3. Поставить текст в <th> по центру по вертикали.
Задание 7:
1. Сделать все таблицы <table> шириной 400 px, высотой
200 px.
2. Сделать для абзацев <p> текст, состоящим из заглав-
ных букв.
3. Поставить текст в таблице <table> по верхнему краю
по вертикали.
Задание 8:
1. Сделать так, чтобы в абзаце <p> текст был выровнен
по центру.
2. Сделать одновременно <th> и <h1> жирными.
3. Придумать селектор, который выберет все <h2> внут-
ри дивов <div>.
Задание 9:
1. Сделать все <h1> зеленого цвета.
2. Сделать для абзацев <p> шрифт Arial.
3. Сделать для абзацев <p> текст перечеркнутый и
красный.
Задание 10:
1. Сделать все <h2> курсивом.
117
2. Сделать селектор, который выберет абзацы <p> внут-
ри дивов <div>.
3. Сделать список с маркерами в виде закрашенного
квадрата.
Задание 11:
1. Сделать межстрочный интервал для абзацев <p> в
30 px.
3. Сделать все абзацы <р> шириной 250 px.
Задание 12:
1. Сделать для абзацев <p> шрифт Calibri.
2. Выровнять в абзацах <p> текст был выровнен на пра-
вую границу.
3. Сделать цвет заголовков <h1> красным.
Задание 13:
1. Сделать все <h1> красного цвета.
2. Сделать список с большими английскими буквами.
3. Сделать абзацы <p> выравненные по ширине.
Задание 14:
1. Сделать <h2> жирным.
2. Сделать абзацы <p> с расстоянием между буквами 3 px.
3. Придумать селектор, который выделит все <b> внут-
ри <div>.
Задание 15:
1. Поставить текст в таблице <table> по нижнему краю по
вертикали.
2. Сделать абзац <p> с расстояние между словами 10 px.
3. Сделать цвет текста параграфов <p> синим.
Задание 16:
1. Сделать для абзацев <p> текст подчеркнутый и зеленый.
2. Придумать селектор, который выделит все <strong>
внутри <div>.
3. Сделать фоновый цвет страницы золотым.
Задание 17:
1. Сделать красную строку в абзацах 25 px.
3. Сделать для абзацев <p> шрифт Verdana.
118
Задание 18:
1. Поставить все <h1> по левому краю.
2. Сделать список, в котором маркер — любое изображение.
3. Сделать изображение фоном страницы.
Задание 19:
1. Придумать селектор, который выделит все <strong>
внутри абзацев <p>.
2. Сделать все таблицы шириной 350 px.
3. Сделать неподвижное фоновое изображение на стра-
нице.
Задание 20:
1. Сделать все таблицы со свернутыми границами.
2. Сделать фоновое изображение из повторяющихся кар-
тинок.
3. Сделать для абзацев <p> первые буквы каждого слова
заглавными.
Глава 3. Верстка сайтов
Верстка сайта — это процесс создания web-страниц с по-
мощью специальных приемов, которые должны позволить
сформировать страницы будущего сайта, разместив на них
нужное содержание и оформив его должным образом. Причем,
независимо от того, какой браузер использует пользователь,
сайт должен выглядеть и работать корректно при любом раз-
решении монитора.
Процесс верстки — один из самых важных этапов созда-
ния web-ресурса, поскольку от этого этапа работы над сайтом
очень многое зависит. Обычно при верстке web-сайта испол-
нители стараются обеспечить выполнение следующих требо-
ваний:
1. Вёрстка обязательно должна быть кроссбраузерной. То
есть правильно отображаться в Firefox, Opera, Safari, Google
Chrome, Internet Explorer и других браузерах.
2. Сайт должен быть протестирован на разных разреше-
ниях монитора.
3. Вёрстка абсолютно всех страниц сайта должна пройти
валидацию — проверку на наличие ошибок.
4. Внешний вид страницы должен по максимуму соответ-
ствовать дизайну выбранного макета по размеру шрифтов,
расстояниям между строками, отступам и другим параметрам.
5. CSS стили должны быть вынесены в отдельный доку-
мент. В HTML коде допустимо только присутствие идентифи-
каторов и классов.
3.1. Задачи верстки

Чтобы стало понятно, что же входит в верстку и почему она
считается достаточно важным и сложным этапом создания сайта,
обратимся к примеру. Сразу надо оговориться, что верстка — это
процесс творческий и четких алгоритмов здесь не существует,
поэтому не следует принимать изложенные ниже советы и реко-
мендации не как догму, это лишь как один из возможных путей
решения стоящих перед разработчиком задач.
Работа над проектом сайта проходит в несколько этапов.
120
На первом этапе создается вайрфрейм — это низко детали-
зированное представление дизайна будущего сайта. Он отражает
только основные элементы, которые планируется разместить на
сайте, а также их положение на странице.
Вайрфреймы используются как документация по проек-
ту, так как они показывают взаимодействие пользователя с
интерфейсом сайта. Хорошо подходят для обсуждения концеп-
ции создаваемого сайта внутри команды разработчиков.
Второй этап — это создание макета web-страницы. На
этом этапе нужно выбрать стиль, цветовую палитру, форму и
дизайн всех компонентов. Работая над макетом, нужно оце-
нить, насколько эргономичным будет дизайн, а также общий
вид страницы.
Анализ макета позволяет решить, как его воплотить в
web-страницу. Для удобства работы проводят логическое
разбиение макета на отдельные блоки. Обычно на макетах
выделяют следующие основные блоки: «шапка», основной
контент, меню и «подвал». Это позволяет распараллелить
работу над страницами будущего сайта и, тем самым, сокра-
тить сроки разработки.
Работа над реализацией макета обычно носит итераци-
онный характер, когда постоянно происходит проверка, кото-
рая должна ответить на следующие вопросы:
— корректно ли отображаются страницы в популярных
браузерах?
— происходит сохранение целостности данных при из-
менении размера шрифта в браузере?
— можно ли продолжать работу с сайтом, если отклю-
чить показ изображений?
— как влияет на вид страниц возможные разрешения
монитора?
Если будут найдены ошибки или несоответствия, то с их
учетом в макет вносятся исправления, и так до тех пор, пока
число ошибок не будет сведено к минимуму.
Любой сайт — это комплексный продукт в том смысле, что
он одновременно должен решать множество, подчас противоре-
чивых задач. Так, сайт должен быть эстетичным и привлека-
тельным в плане дизайна, содержать интересную и полезную
информацию, в то же время, он должен легко индексироваться
121
поисковиками и быстро загружаться, для автора — быть удоб-
ным для редактирования и расширения возможностей, а для
пользователя — без явных искажений отображаться в разных
браузерах, подстраиваться под размер окна и терпеливо сно-
сить различные настройки браузеров.
Разумеется, из перечисленного дизайн и контент сайта
лежат вне сферы работ по верстке сайта, но все остальное, так
или иначе, формируется в его процессе.
3.2. Особенности верстки web-страниц

Хотя прародителем верстки web-страниц является верст-
ка полиграфических материалов, между ними есть одно важ-
ное различие. Любая полиграфия вроде буклета, листовки или
брошюры печатается на листах установленного размера и в
пределах одного тиража имеет лишь незначительные или даже
незаметные глазу различия. Web-страница же запускается на
компьютере под управлением клиентской программы называ-
емой браузером. Понятно, что операционная система, ее
настройки и, собственно, сам браузер отличается от компью-
тера к компьютеру. Из чего следует банальный вывод, что
один и тот же документ сайта может по-разному отображается
у каждого пользователя.
Напрашивается вопрос, можно ли сделать так, чтобы web-
страница отображалась одинаково? Учитывая, сколько придется
принять во внимание разных неоднозначных факторов, следует
признаться, что нет, нельзя. Поэтому задача верстки web-
страниц формулируется так: сформировать документ, который
бы корректно отображался с небольшими различиями на ос-
новных платформах и в основных браузерах. Корректно означа-
ет, что должен быть соблюден исходный замысел автора,
воплощен требуемый дизайн документа, и, что особенно важно,
в различных браузерах документ выводится без ошибок.
Чтобы реализовать указанную задачу надо понимать, как
вообще происходит верстка web-страниц и соизмерять свои
идеи с их исполнением. Далее описаны некоторые особенно-
сти, которые имеют большое значение при верстке документов
сайта.
122
3.2.1. Ширина документа
Выбор ширины создаваемого документа является одной
из принципиальных проблем, стоящих перед разработчиком
сайта. Действительно, сегодня невозможно предсказать, что
будет использовать пользователь для посещения сайта, будет
ли это компьютер, размеры монитора которого колеблятся в
широких пределах, или это будет смартфон. Необходимость
преодолеть эту проблему породила два подхода к верстке:
фиксированный и «резиновый».
Фиксированный макет.
В данном случае разработчик, опираясь на статистику
используемого посетителями оборудования, выбирает ширину
макета будущего сайта и фиксирует ее в своем проекте. Дей-
ствительно, сегодня подавляющая масса пользователей в
своей работе используют мониторы, реализующие разрешение
1024 × 768 пикселей. Это позволяет взять за ориентир ширину
макета в 1000 пикселей, а учитывая возможное наличие верти-
кальной полосы прокрутки и рамки браузера, использовать в
проекте ширину макета сайта в 800 ÷ 990 пикселей. Обычно,
фиксированный макет имеет в среднем ширину в 900 пикселей.
Преимущество такого подхода очевидно. Разработчику
удобно подгонять ширину используемых изображений и эле-
ментов дизайна под фиксированную ширину макета, тем бо-
лее, что такая верстка становиться похожей на традиционную
и хорошо освоенную верстку печатного буклета, где ширина
фиксируется размером бумажного листа.
Однако, фиксированный макет имеет и существенный
недостаток, связанный с низкой эффективностью использова-
ния свободных площадей. Особенно это будет заметно на
мониторах, имеющих расширение экрана большее, чем пред-
полагаемое (например, 900 пикселей) разработчиком в про-
екте. Если использовать макет фиксированной ширины с
выравниванием его по левому краю монитора, то справа появ-
ляется широкая пустая полоса, размер которой зависит от
разрешения экрана или его диагонали. Разработчики пытают-
ся визуально скрыть или как-то уменьшить это пустое про-
странство, размещая макет сайта по центру окна браузера.
Описанный подход хорошо иллюстрируется на приведенных
ниже рисунках.
123
Рис. 99
«Резиновый» макет.
При формировании «резинового» макета в качестве еди-
ниц измерения размеров объекта выступают проценты. При
этом ширина окна браузера принимается за 100 %, а размеры
колонок макета, задаваемые тоже в процентах, в сумме не
должны ее превышать. Иногда, из соображений дизайна стра-
ницы, одна или несколько колонок могут быть фиксированной
ширины. При использовании такого подхода размеры элемен-
тов страницы автоматически адаптируются под используемую
ширину окна.
Подобная верстка становится все более популярной. Это
обуславливается широким использованием самых различных
гаджетов для просмотра сайтов, и стремлением разработчиков
максимально эффективно использовать всю площадь web-
страницы.
При всех своих достоинствах «резиновый» макет имеет и
ряд недостатков:
— существующая сегодня тенденция использования ши-
рокоформатных мониторов приводит к тому, что строки текста
становятся слишком длинными. Такой текст очень неудобно
читать, что приводит к быстрой утомляемости глаз;
— уменьшение ширины окна тоже не безгранично. При
достижении некоторого предельного значения сайт «рассыпа-
ется». Из-за невозможности отобразить какой-либо элемент
дизайна, например изображение, в окне браузера появляется
горизонтальная полоса прокрутки;
124
— верстка «резинового» макета сложнее фиксированно-
го, так как требует учета множества факторов. В частности,
важным становится фактор неоднозначности трактовки брау-
зерами некоторых параметров и операторов языка HTML.
В результате сайт может отображаться в них по-разному;
— отдельной проблемой становится использование фо-
новых изображений. Дело в том, что изменять ширину изобра-
жения без потери качества невозможно, в силу используемого
для этого алгоритма масштабирования.
3.2.2. Высота документа

Читая контент сайта, пользователь пролистывает его
сверху вниз. Для этого у него есть несколько инструментов
управления. Это и вертикальные полосы прокрутки, и различ-
ные клавишные комбинации и, конечно, колесико прокрутки
мыши. В тоже время, перемещение по горизонтали затруднено,
так как для него может использоваться только горизонтальная
полоса прокрутки. Учитывая это, разработчики стремятся
вписать web-страницу в окно браузера по ширине, не очень
заботясь о её высоте.
Однако, такой подход чреват тем, что даже в структури-
рованном тексте, разбитом на блоки с обязательными заго-
ловками, становится трудно отыскать нужную информацию.
Другой проблемой становиться фактор различия объемов
текста в разных колонках макета. В результате при изменении
высоты страницы могут возникать ошибки её отображения.
3.2.3. Модульные сетки

Широко известно определение модульной сетки как си-
стемы организации объектов в пространстве, основанной на
рядах и колонках определенного фиксированного размера.
В ячейках сетки вдоль невидимых направляющих располага-
ются текстовые блоки, заголовки, изображения и другие эле-
менты сайта.
Это позволяет рассматривать web-страницу как набор
прямоугольных блоков, которые выкладываются в определен-
ном порядке. При этом данные располагаются по колонкам,
а при верстке применяют термин одно-, двух-, трехколонный
макет.
125
Каждый блок такой страницы четко отделен от других с
помощью пустого пространства, рамки или разделителя, в каче-
стве которого выступает цветной прямоугольник с текстом
заголовка.
Работа по созданию сайта обычно начинается с разработ-
ки эскиза макета web-страницы. Прорисовка на бумаге макета
позволяет быстро сделать серию набросков и выбрать наибо-
лее удачный и понравившийся заказчику. При этом вместо
текста и рисунков можно использовать схематические значки.
Одноколонная сетка.
Такой макет обычно характерен для академических из-
даний или публикации статей большого объема.
В таких случаях основное внимание уделяется содержа-
тельной части сайта, а не его дизайну. Дизайн у таких сайтов
отличается заметным аскетизмом оформления.
На рисунке ниже показана типичная схема одноколонной
модульной сетки.
Рис. 100
Как видно из рисунка на странице сайта выделяются че-
тыре основных блока: шапка страницы с общим заголовком;
меню или средства навигации по сайту; основной контекст и
подвал — нижняя часть страницы с контактной информацией.
Для удобства чтения сайта при большой высоте страницы в
подвале принято либо дублировать блок навигации, либо
делать ссылку к началу документа.
Иллюстрации располагаются непосредственно в тексте,
который их обтекает по контуру. При большом количестве
иллюстраций такие сайты разрабатывают, ориентируясь на
фиксированный макет заданной ширины.
Двухколонная сетка.
В этой схеме используются две колонки. В одной распола-
гается основной контент, а другой средства навигации и другая
126
полезная информация. Расположение колонок слева или спра-
ва значения не имеет, но более традиционным считается
расположение меню слева.
Рис. 101
Сегодня это самый распространенный вариант формиро-
вания web-страницы, характерный для информационных
сайтов. К недостаткам дизайна таких сайтов часто относят их
однообразность.
Трехколонная сетка.
Чаще всего трехколонная сетка используется для глав-
ных страниц сайтов или в случае, когда двух колонок не хвата-
ет для размещения информации.
Рис. 102
При использовании трехколонной сетки две крайние ко-
лонки отводятся под меню, новости, рекламу или ссылки,
а средняя (самая широкая) под основной текст. При этом нави-
гация может располагаться как слева, так и справа от основно-
го текста.
Данная схема открывает простор для работы дизайнера,
снимая многие ограничения, характерные для сеток с малым
количеством колонок. Разбив материал на отдельные блоки,
которые могут визуально объединять пространства колонок
127
или наоборот отделять их друг от друга, удается получить
очень красивый и функциональный сайт.
Цена этого — достаточно сложный макет, на отладку ко-
торого придется затратить массу времени, в частности, на про-
верку его функционирования в разных браузерах.
Дизайнеры иногда используют и другие виды многоко-
лонных сеток, но достаточно редко.
3.3. Табличная верстка сайта

Сегодня табличная верстка тоже считается устаревшей.
Вся литература и сайты в Интернете буквально в один голос
призывают переходить к верстке с помощью слоев. Утверждая,
что такая верстка правильнее и соответствует современным
стандартам сайтостроения, они не объясняют, почему это лучше
табличной верстки. Фактически приходится либо верить авто-
рам, либо попытаться решить эту дилемму самостоятельно.
Преимущества таблиц:
— Удобство и широкие возможности верстки — таблица
дает возможность удобно формировать web-страницу, исполь-
зуя ячейки в роли модульной сетки, тем более, что границы
ячеек можно задать невидимыми (нулевой толщины).
— Создание колонок — формируемый таблицей многоко-
лонный макет сайта удобен в использовании, так как отдель-
ные ячейки в отличии от слоев сохраняют свой вид и не
накладываться друг на друга при изменении размера окна
браузера. С другой стороны высота разных колонок, располо-
женных в одной строке таблицы остается одинаковой, незави-
симо от объема содержимого каждой из них. Добиться такого
же эффекта при использовании блоков достаточно сложно.
— «Резиновый» макет — благодаря тому, что размер таб-
лицы можно задавать в процентах, они хорошо подходят для
«резинового» макета, ширина которого привязана к ширине окна
браузера. С другой стороны, в таблицах удобно регулировать и
высоту колонок, позволяя отрегулировать её так, что и при не-
большом тексте «подвал» страницы будет плотно прилегать к
нижнему краю окна браузера, независимо от размеров окна.
— «Склейка» изображений — большие изображения удоб-
но разрезать на несколько небольших фрагментов. Собрать
128
изображение в единое целое помогает таблица. При этом неко-
торые фрагменты могут быть заменены, для них могут быть
созданы эффекты перекатывания, анимации и другие. При
правильной обработке фрагментов изображения можно добить-
ся уменьшения их суммарного объема. С другой стороны загруз-
ка изображения, состоящего из множества фрагментов,
психологически воспринимается пользователем более быстрым.
— Фоновые рисунки — возможность использовать в ячей-
ках фоновые изображения создает дополнительные возможно-
сти при оформлении дизайна сайта. Например, можно
создавать декоративные рамки, линии и тени.
— Выравнивание элементов страницы — контекст, раз-
мещаемый в ячейке таблицы, можно выравнивать как по гори-
зонтали, так и по вертикали. Эта придает дополнительную
гибкость размещению элементов страницы.
— Особенности браузеров — в отличие от вольного тол-
кования стилей слоев и при их отображениия, таблицы во всех
браузерах выглядят практически одинаково.
Недостатки таблиц:
— Долгая загрузка — существенный недостаток при ис-
пользовании таблиц для верстки сайтов. Дело в том, что таб-
лица не отображается на экране, пока не будет полностью
загружена. Это делается для того, чтобы собрать всю доступ-
ную информацию о таблице для ее правильного отображения.
Особенно сильно такое торможения загрузки сайта будет
заметно при использовании для верстки большой по высоте
таблицы. Обойти этот недостаток можно, если вместо одной
большой таблицы использовать несколько маленьких.
— Громоздкий код — формирование таблицы на языке
HTML требует использование сложной структуры вложенных
тегов (таблица описывается тегом <table>, в который вклады-
вается тег описания строк <tr>, содержащие в свою очередь
теги ячеек <td>). Это не только увеличивает объем программ-
ного кода, но и сложность отладки сайта. Проблемы нарастают
по экспоненте, если требуется одну таблицу вложить внутрь
другой.
— Плохая индексация поисковиками — при использовании
табличного макета основной контекст страницы оказывается
раздробленным по отдельным ячейкам таблицы. При этом
129
между фрагментами контекста будут располагаться теги про-
граммного кода. В результате контекст будет отодвинут от
начала программного кода, а его прочтение затруднено.
В результате, будет затруднено индексирование страниц сайта
поисковиками.
— Нет разделения содержимого и оформления — обычно
при разработке web-сайта разработчики стараются выносить
все особенности форматирования в каскадные таблицы, хра-
нящиеся в виде CSS-файлов. Такой подход оправдан, так как
позволяет легко переформатировать отдельные элементы
сайта, не затрагивая основ его программного кода. При исполь-
зовании табличного макета далеко не все параметры можно
форматировать с помощью стилевых операторов. Это потребу-
ет при необходимости изменить внешний вид элементов сайта
напрямую корректировать программный код страницы. Учи-
тывая сложную вложенную структуру описания таблиц в HTML
(смотри выше), такая корректировка может оказаться далеко
нетривиальной.
— Несоответствие стандартам — на современном эта-
пе разработчики широко используют метаязыки XHTML и XML,
которые дают разработчикам большие возможности, чем
HTML и CSS. Использование современных метаязыков дает
максимальную эффективность при использовании верстки
слоями и блоками.
3.4. Примеры формирования сайтов
3.4.1. Макет с одноколонной сеткой
Рис. 103
130
Сайт с одноколонной сеткой на базе таблиц будет выгля-
деть следующим образом:
index.html
<html>
<head>
<title>Одна колонка</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr align="center">
<td height="40" width="l50">
<p><font size="4"><b>Выберите сказку:</b></p><br>
<a href="a.html">Золотой петушок</а><br>
<a href="b.html">Три nopoceнкa</a><br>
<a href="с.html">Тpи мeдвeдя</a> </font></p>
</td>
<td width="600">
<font color="Mediumvioletred">
<h1>Скaзки нашего дeтcтвa</h1>
</td>
</tr>
<tr>
<td colspan="2" width="600">
<h1 align="center">Скaзкa "Три медведя"</h1>
<img src="Tri.jpg" height="200" align="left">
<font size="5"><br>
    Одна девочка ушла из дома… <br>
    Дверь была отворена… <br>
    В домике было две комнаты… <br>
    Девочка взяла самую большую…
</td>
</tr>
<tr>
<td colspan="2">
<font size="4">© Файл разработан как пример использова-
ния таблиц.
</td>
</tr>
</table>
</body>
</html>
131
Результат:
Рис. 104
Примечание: В данном примере и в дальнейших для
наглядности выведены границы блоков.
3.4.2. Макет с двухколонной сеткой
Рис. 105
132
В соответствии с макетом сайт может быть сформирован
следующим образом:
index.html
<html>
<head>
<title> Макет две колонки </title>
</head>
<body>
<tr>
<td colspan="2">
<h1 align="center">Сказки нашего детсва</h1>
</td>
</tr>
<tr>
<td width="l90" valign="top">
<h3>Наши сказки</h3>
<a href="1.html"> Золотой петушок</a><br>
<a href="2.html"> По щучьему велению</a><br>
<a href="content.html"> Три медведя</a>
</td>
<td width="600">
<h1 align="center">Сказка "Три медведя"</h1>
<img src="Tri.jpg" align="left">
<font size="5">
    Одна девочка ушла из дома… <br>
    В домике было две комнаты… <br>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</body>
</html>
133
Результат:
Рис. 106
3.4.3. Макет с трехколонной сеткой
Рис. 107
134
Для данного макета файлы сайта будут иметь следую-
щий вид:
index.html
<html>
<head>
<title>Макет три колонки</title>
</head>
<body>
<tr>
<td colspan="3">
<h1 align="center">Сказки нашего детства</h1>
</td>
</tr>
<tr>
<td width="180" valign="top">
<h3>Наши сказки</h3>
<a href="1.html"> Золотой петушок</a><br>
<a href="2.html"> По щучьему велению</a><br>
<a href="content.html"> Три медведя</a>
</td>
<td width="600">
<h1 align="center">Сказка "Три медведя"</h1>
<img src="Tri.jpg" align="left">
<font size="5">
     Одна девочка ушла… <br>
     В домике было две… <br>
</td>
<td width="200" valign="top">
<h3 align="center">Новости</h3>
<p><font size="4">
    Мишутка потребовал… </p>
<p>    Настасья Петровна…</p>
<p>    Михайлы… </p>
<h3 align="center">Реклама</h3>
<p>    Заточка когтей… </p>
<p>    Lenta.Сезонная… </p>
</td>
135
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
</body>
</html>
Результат:
Рис. 108
136
3.5. Тест
1. Что такое вайрфрейм?
а) низко детализированное представление дизайна сайта
б) детализированный проект страницы сайта
в) схема блочной организации сайта
г) макет табличной верстки
2. Кроссбраузерность это:
а) привязка сайта к особенностям конкретного браузера
б) настройка браузера для работы в Интернете
в) верстка сайта, обеспечивающая его работу в любом
браузере
г) просто красивое словосочетание
3. Что такое валидация?
а) оценка внешнего вида сайта
б) проверка HTML-кода сайта на наличие ошибок
в) проверка контекста на наличие орфографических ошибок
г) выдача заказчику валидола перед демонстрацией сайта
4. Что понимается под термином «резиновый» макет?
а) макет основывается на том, что ширину его элементов
задают в процентах
б) макет, для которого не задана минимальная ширина
окна
в) макет, в котором специальный блок пересчитывает
размеры элементов
г) макет, в котором пользователь управляет размерами
отдельных блоков
5. Как web-страница должна вписываться в окно браузера?
а) по высоте
б) по ширине
в) по обоим размерам
г) по выбору пользователя
6. Что собой представляет модульная сетка?
а) таблица, созданная с помощью тега <table>
б) набор невидимых направляющих, для расположения
элементов страницы
в) средства ориентации элементов web-страницы
137
7. Основные элементы макета сайта:
а) шапка, меню, контент, подвал
б) заголовок, меню, контент
в) шапка, меню, текст, копирайт
г) шапка, меню, контент, копирайт
8. Достоинства табличной верстки:
а) простота, использование фоновых рисунков, скорость
загрузка
б) выравнивание элементов, быстрота загрузки, разме-
щение
в) простота работы, управляемое размещение, скорость
загрузка
г) простота структуры, быстрота верстки, загрузка толь-
ко в указанное окно
9. Недостатки табличной верстки:
а) долгая загрузка, громоздкий код, плохая индексация,
несоответствие стандартам
б) сложность в освоении, громоздкий код, плохая индек-
сация
в) долгая загрузка, проблемы масштабирования, несоот-
ветствие стандартам
г) громоздкий код, плохая индексация, несовместимость
с разными браузерами

1. Выполнить табличную верстку макета
Рис. 109
138
Рис. 110
Рис. 111
Рис. 112
139
Рис. 113
Рис. 114
Рис. 115
140
Рис. 116
Рис. 117
Рис. 118
141
Рис. 119
Рис. 120
Глава 4. Дизайн сайтов
Английское «design» — производное от итальянского
«disegno» означает не только чертеж, рисунок, замысел, проект,
но и гораздо более сложные вещи, едва ли не всю область
работы художника. В узком смысле дизайн — это художе-
ственное конструирование. В широком смысле — это деятель-
ность, направленная на создание гармоничного, понятного и
удобного в использовании предметного мира.
Web-дизайн — термин, обозначающий различные виды
проектной деятельности, главной целью которых является
формирование эстетических и функциональных качеств созда-
ваемого web-сайта.
Существуют два основных подхода к дизайну: артистиче-
ский, позволяющий вам выразить себя, и технический, когда
все усилия направлены на решение проблем пользователя.
Сегодня, наиболее используемым является технический под-
ход, правила которого должен знать каждый. Е этим правилам
относятся:
Юзабилити.
Это организация структуры данных, позволяющая посе-
тителю без особых усилий находить нужную информацию, не
утруждая себя излишним поиском на сайте. Аналитические
исследования показали, что в среднем посетитель проводит на
сайте около двадцати семи секунд, причём довольно редко
прокручивает страницу до конца. И это надо учитывать.
Скорость загрузки страницы.
Нельзя забывать, что не у всех пользователей мощный
компьютер или высокоскоростной интернет. Web-сайт, пере-
груженный лишними, пусть и красочными, изображениями,
будет грузиться очень долго. Порою именно из-за этого люди
могут уходить с сайта, потому что им попросту не хочется
долго ждать.
Навигация.
Навигационный блок считается одной из самых важных
зон на сайте. С его помощью пользователь передвигается по
web-страницам и находит то, зачем пришел. Навигация должна
охватывать полный список разделов сайта, чтобы человеку не
приходилось тратить лишнее время на поиск нужной инфор-
мации.
143
Единый стиль.
Единый фирменный стиль придаст сайту более солид-
ный вид и наверняка понравится. Важно, чтобы структура
подачи контента и все графические элементы на страницах
сайта имели характерный почерк. Хороший дизайн предпола-
гает единство стиля.
Шрифты.
Сейчас используют крупные читаемые шрифты. Ни в ко-
ем случае не используйте более трех (а лучше двух) разновид-
ностей шрифтов на одной странице. Допустимо использовать в
логотипе один шрифт, в заголовках — второй, в тексте —
третий, и достаточно.
Цветовая схема.
Смысловая нагрузка касается и цветовой схемы сайта.
Тут тоже действует правило: не более 3 цветов на странице.
Допускаются оттенки и полутона, но не более. Черный, крас-
ный, желтый и зеленый — это уже перебор: пожалейте бедно-
го посетителя. За буйством красок он просто не заметит
полезную информацию. Лучше грамотно воспользоваться
несколькими оттенками, чем взрывать пользователям мозг
неуместной радугой.
Визуализация.
Для более комфортного восприятия информации и пере-
мещения по сайту постарайтесь использовать общепринятые
иконки. На непонятный графический элемент пользователи
могут просто не обратить внимания.
Фон.
Фон считается одной из главных проблем web-
дизайнеров. Необходимо помнить, что макет сайта — это не
простая картинка, а динамическая страница, которая будет
растягиваться и преображаться на других разрешениях, мони-
торах или гаджетах, а, следовательно, непосредственно воз-
действовать на фоновое изображение. Для фона лучше
выбрать чистые тона и градиенты или виртуальную реаль-
ность — это сейчас модно.
Мультибраузерное отображение.
Разные браузеры обладает собственным алгоритмом об-
работки HTML-кода web-страниц, поэтому один и тот же эле-
мент может отображаться в Google Chrome и Internet Explorer
144
по-разному. Требуется проверять предварительный шаблон на
идентичность во всех браузерах.
Перечисленные базовые правила важны для разработки
проектов. Однако для реализации нестандартных идей стоит
сделать что-нибудь не как все. Однако, это удается далеко не
всем и не всегда.
4.1. Правила создания макета

В создании любого макета web-сайта существует шесть
основных правил, которые ни в коем случае нельзя нарушать.
Акцентирование.
Это выделение особенной значимости, или важности
элемента, присутствующего на нашем макете.
Рис. 121
Этот принцип очень важен, так как основывается на пси-
хологии поведения человека, посещающего Интернет-ресурс.
Действительно, придя на web-страницу, пользователь, прежде
всего, знакомится с блоками, представляющими для него
наибольший интерес, и по ним формирует свое мнение о сайте
в целом. Тоже можно сказать и о его знакомстве с элементами
управления сайта. Второстепенное отсеивается.
Учитывая это, разработчик обязан акцентировать внима-
ние пользователя на наиболее значимых элементах страницы.
Для реализации такого подхода требуется, проанализировав
структуру страницы, построить иерархию её элементов. Соста-
вив перечень важнейших элементов, разработчик должен
145
продумать их компоновку и выделение с помощью более яркого
цвета, шрифтового оформления или использования графиче-
ских элементов в виде стрелок, сносок и т. д.
При этом надо помнить, что по оценке дизайнеров мак-
симально ярко может быть выделен только один элемент
страницы — квинтэссенция смысла её создания.
Контрастирование.
Это визуальное разделение двух, или более элементов ди-
зайна. Для лучшей четкости обозначения разделов (элементов)
сайта рекомендуется использовать высокое контрастирование.
Рис. 122
При использовании данного принципа особое внимание
должно быть уделено визуальной дифференциации элементов
страницы. В руках у разработчика множество способов добить-
ся требуемого уровня контратирования. Это и использование
жирных шрифтов, и выбор броских цветов, и, наконец, варьи-
рование размеров блока.
Нельзя забывать и о том, что принцип контрастирования
тесно связан с принципом акцентирования. Действительно,
для акцентирования внимания пользователя на блоке, кото-
рый несет основную смысловую нагрузку страницы, требуется
сделать его более контрастным и выделяющимся из общего
стиля оформления.
146
Правильный баланс использования принципов контра-
стирования и акцентирования очень важен, так как не должна
быть нарушена и визуальная балансировка страницы.
Балансировка.
Важным вопросом дизайна страницы web-сайта является
правильное соотношение и распределение ее элементов или,
как принято говорить, балансировка. Равномерная визуальная
нагрузка позволяет дольше удерживать посетителя на страни-
це сайта.
Различают два вида балансировки: симметричная и ас-
симетричная.
Симметричная балансировка означает, что изображение
страницы является зеркальным отражением его левой и пра-
вой частей относительно вертикальной или горизонтальной
оси. Пример симметричной балансировки иллюстрирует при-
веденный ниже рисунок.
Рис. 123
Ассиметричный — самая распространенная сегодня фор-
ма баланса. Такая балансировка может быть выполнена раз-
личными методами. Например, на одной половинке страницы
располагается яркий элемент, а на другой — более спокойные
элементы. При этом зеркального сходства между половинками
страницы нет. Пример асимметричной балансировки пред-
ставлен на рисунке ниже.
147
Рис. 124
Выравнивание.
Принцип выравнивания можно сформулировать следу-
ющим образом: элементы дизайна не могут располагаться на
странице произвольно.
Элементы дизайна должны быть визуально связанными
друг с другом, что позволит обеспечить более четкую подачу
информации
Рис. 125
По сути, все элементы дизайна страницы располагаются
в соответствии с некоторой (невидимой) сеткой. Например,
две статьи контекста страницы располагаются в двух столбцах,
а их заголовки лежат на одной линии. Такое решение смотрит-
ся визуально целостным. Нарушение принципа выравнивания
148
(заголовки расположены на разных уровнях) вносит дисбаланс
в общую картину и отрицательно влияет на восприятие поль-
зователя.
Выравнивание элементов требует больших временных
затрат на этапе верстки сайта, но это компенсируется привле-
чением пользователей в процессе его эксплуатации.
Повторение.
Этот эффект подразумевает использование одних и тех
же графических элементов, но в разных способах. Прием по-
вторения также способствует унификации контента и разде-
лов сайта для удобности его использования. Он может
выражаться в использовании одного цвета, изображения,
линии, очертания и общей схемы стилизации
Рис. 126
Его суть заключается в использовании однотипных эле-
ментов дизайна на всех страницах сайта. Повторение может
выражаться в применении одинаковых линий, шрифтов, форм
и цвета. Использование даже мелких однотипных элементов на
разных страницах сайта создает логически связанных образ
ресурса.
Кроме того, повторение вызывает у пользователя чув-
ство стабильности, поскольку появляется предсказуемость в
выполнении действий.
149
Не стоит применять индивидуальный подход к дизайну
каждой страницы, поскольку такой сайт, утратив визуальную
связанность, не будет восприниматься пользователем как
целостный объект. Лучше использовать одни и те же цвета и
размеры для все кнопок на ресурсе, размещать одинаковое
основное меню на всех страницах и избегать разноцветных
фонов.
Удобство восприятия.
Рис. 127
Данный принцип практически не имеет конкретных ре-
комендаций. В его основу положены вопросы удобства воспри-
ятия элементов на странице. Это и вопросы правильного
выбора шрифтов, и гармоничного сочетания используемых
цветов, и геометрические решения форм, используемых изоб-
ражений, и многое другое.
Единственной рекомендацией, которую можно сформу-
лировать для человека верстающего сайт, является следую-
щая: поставьте себя на место пользователя, который придет на
сайт. Попробуйте так расположить элементы дизайна страни-
цы, чтобы они соответствовали логике его поведения.
Например, мы привыкли читать текст или искать требу-
емый элемент, просматривая страницу слева направо и сверху
вниз. Следовательно, эта последовательность должна быть
сохранена и при подаче информации на странице сайта.
150
4.2. Сайт в стиле Web 2.0
Простота.
На сайте с web 2.0 дизайном присутствует только самое
необходимое. Все лишние элементы убираются, чтобы не от-
влекало внимание посетителей сайта. Это делается для того,
чтобы информация воспринималась быстрее и легче.
Рис. 128
Много свободного пространства.
Если на сайте много свободного пространства, то у посе-
тителя меньше устают глаза, так как ему не нужно постоянно
концентрироваться, для поиска нужной информации. Пребы-
вание на сайте делается легким и приятным.
Крупные объекты.
На таком сайте блоки с текстом, кнопки и другие элемен-
ты больше, чем на простых сайтах. Это сделается для удобства
и легкого восприятия информации, так как большие элементы
привлекают к себе внимание.
Рис. 129
151
Крупный текст.
На сайтах в стиле web 2.0 размер шрифта в 14 px — это
практически минимум. Часто можно увидеть текст со шрифтом
в 16 ÷ 18 px. Однако тут очень внимательно нужно подходить к
выбору размеров шрифта, так как для чтения не рекомендует-
ся ставить шрифт больше 14 px.
Простая навигация.
На сайтах в стиле web 2.0 очень редко можно увидеть вы-
падающие списки, сделанные на различных языках програм-
мирования. В большинстве случаев используется простое
текстовое меню. Оно лучше для восприятия посетителя и для
индексации поисковыми роботами.
Простая структура сайта.
Web-дизайн таких сайтов, не будет содержать 5–10 бло-
ков с информацией. Обычно весь сайт делится на три основных
блока:
— header — шапка сайта;
— контент — информация для посетителей сайта;
— footer — подвал (он обычно содержит контакты, дуб-
лированное меню и прочее).
Header может содержать как шапку, так и меню. Контент
часто делится на два или три блока — это информация для
чтения или статьи и боковые блоки — меню и новости.
Рис. 130
152
Логотип.
Сейчас практически каждый сайт в стиле web 2.0 не об-
ходится без логотипа. Это своего рода отличительная особен-
ность от старых сайтов (на них практически не встречаются
логотипы). Конечно, если не брать в счет крупные компании.
Рис. 131
Яркие и сочные цвета.
На новом сайте сразу же заметны яркие и сочные краски.
Часто настроение от увиденной картинки меняется в зависи-
мости от того, какую гамму использует установленная тема.
Здесь важную роль играет восприятие цвета человеком. Обыч-
но, яркие краски используются для привлечения внимания
посетителей. В то же самое время, фон на таких сайтах обычно
делается серым. На таком фоне очень хорошо что-то выделить
и привлечь внимание к определенному элементу.
Рис. 132
153
Закругленные углы.
Практически у всех элементов на таких сайтах закругле-
ны углы. Это, скорее, сделано потому, что так легче и приятнее
воспринимается информация. Закругление придает какое-то
спокойствие и внушает доверие. Конечно, не желательно де-
лать закругления слишком большими. Это может напрягать и
отвлекать.
Рис. 133
Тени и отражения.
Тени и отражения — это часто встречающиеся особенно-
сти дизайна сайта в таком стиле. Тень способна придать есте-
ственность и реалистичность. Если ее не будет, то объект
будет казаться плоским или парить где-то в воздухе. Отраже-
ние придает как красоту, так и гламур различным объектам
сайта. Оно используется не только для картинок, но и для раз-
личных кнопок или меню. Не стоит злоупотреблять отражени-
ем, иначе информация будет восприниматься очень трудно.
Рис. 134
Мягкая подсветка.
Очень часто для того, чтобы привлечь внимание посети-
теля сайта к какому-то объекту, в дизайне web 2.0 используют
мягкую подсветку. Это не только привлекает внимание, но и
делает дизайн сайта намного привлекательнее.
Рис. 135
154
Красивые иконки в web 2.0.
Красивые иконки, оформленные описанным выше обра-
зом, существенно оживляют сайт
Рис. 136
На многих современных сайтах довольно много иконок
используется в меню, кнопках и других блоках как замену
текста. Использование картинок вместо текста хорошо тем, что
человек запоминает графику лучше, чем текст.
Рис. 137
Проработка мелочей.
Раньше для сайта достаточно было просто залить фон,
вставить простое меню, добавить текст, и можно уже было
запускать проект. Сейчас же данный стиль сайта приучил к
тому, что даже самые мелкие детали требуют отдельной про-
работки. Будь то кнопка или меню, заголовок или что-то дру-
гое, в web 2.0 все прорабатывается отдельно (цвет, градиент,
отражение, тень, обводка, свечение и так далее). За счет этого
весь веб-дизайн сайта будет смотреться гораздо лучше.
155
4.3. Цветовой круг
Известно, что все многообразие цветов образуется на ос-
нове всего лишь трех хроматических: красного, желтого, сине-
го, которые называются основными или первичными в
цветовом круге.
Рис. 138
Если в равной степени смешать эти три основных цвета
друг с другом, то получатся еще три цвета, которые носят
название составные или вторичные: это зеленый, оранжевый,
фиолетовый.
Рис. 139
А если смешать в равной степени основные и составные
цвета, то получатся так называемые третичные. Если собрать
эти цвета вместе, получится 12-частный цветовой круг.
156
Рис. 140
Такой цветовой круг вполне подходит для подбора гар-
моничных цветов. Однако все получившиеся цвета очень яркие
и насыщенные. Чтобы снизить чрезмерную насыщенность
спектральных цветов, принято добавлять в них ахроматиче-
ские цвета: т. е. черный и белый. В итоге можно получить мно-
жество тонов и оттенков одного цвета.
Такой эффект цвета называется насыщенностью и, соот-
ветственно, если в любой выбранный спектральный цвет из
цветового круга добавлять белый цвет, то его насыщенность
снижается до пастельных тонов или вообще до чисто белого;
и, наоборот, если добавлять черный цвет в тот же основной
цвет, то его насыщенность повышается, и в конечном итоге
достигнет полностью черного.
Рис. 141
157
Если выполнить такое насыщение хроматических цветов
ахроматическими, то в итоге получится цветовой круг с мно-
жеством оттенков и тонов 12 основных цветов.
Рис. 142
4.3.1. Гармоничные сочетания цветов

Теперь можно решить самый важный вопрос: как
хроматические цвета можно сочетать друг с другом?
Первое гармоничное сочетание цветов одноцветное
(монохромное). Вы-полняется оно на основе оттенков в
пределах одного сектора цветового круга.
Рис. 143
158
Второе гармоничное сочетание — это сочетание трех
соседних цветов, оно называется аналогичным, или аналогичной
триадой.
Рис. 144
Третье гармоничное сочетание называется комплемен-
тарным (дополнительное) сочетанием, т. е. два цвета, про-
тивоположные друг другу на цветовом круге.
Рис. 145
Если к двум гармоничным дополнительным цветам
цветового круга добавить соседние, то получится сочетание,
называемое разбитым дополнением (или расщепленной
комплиментарной схемой).
159
Рис. 146
И последнее гармоничное сочетание, называемое триада,
основывается на трёх равноудалённых друг от друга цветах
цветового круга. Такое сочетание может опираться как на
основные или вторичные цвета
Рис. 147
4.3.2. Теплые и холодные цвета

Все хроматические цвета делятся на эти две группы. Те,
в составе которых больше желтого и красного, являются теп-
лыми, а те, в составе которых больше синего — холодными.
Соответственно, например, зеленый может быть, как холод-
ным, так и теплым оттенком, так как он состоит из смеси жел-
того и синего.
160
Рис. 148
4.3.3. Принципы композиции цвета

для создания сайта
Итак, определившись с цветовой палитрой, важно разо-
браться, как же ее применить.
Количество цветов.
Как правило, следует ограничиться тремя-четырьмя ос-
новными цветами. Возможно использование оттенков различ-
ной насыщенности этих цветов, но не стоит увлекаться
большим количеством основных.
Цвет и размер.
В общем случае, более мелкие элементы должны быть
окрашены в более темные цвета, а для крупных лучше взять
светлый цвет.
Теплый или холодный?
Теплые цвета кажутся более активными и уютными. Хо-
лодные же — более серьезными и официальными. Исходя из
назначения сайта, можно определиться и с теплотой палитры.
Чувства, вызываемые цветом:
Красный.
В основном связан с азартом, смелостью и желанием.
Красный цвет любви, силы, энергии, лидерства и волнения. Это
сильный цвет, но у него есть и негативные эмоции: опасность,
тревога.
Голубой.
Терпение, мир, спокойствие, надежность, любовь, ста-
бильность. Один из самых любимых цветов, особенно у мужчин.
161
Это связано со стабильностью и глубиной, профессионализ-
мом, доверием.
Желтый.
Цвет, который чаще всего ассоциируется с живостью.
Энергичный, дает ощущение счастья. Кроме того, он ассоции-
руется с любопытством, развлечением, радостью, интеллек-
том, осторожностью.
Оранжевый.
Бодрость и творчество. Ассоциируется с дружелюбием,
уверенностью, игривостью, мужеством, стойкостью.
Фиолетовый.
Традиционно ассоциируется с властью, благородством и
богатством. Мудрость, независимость, благородство, роскошь,
честолюбие, достоинство, магия и тайны.
Зеленый.
Цвет гармонии, природы, исцеления, жизни, питания и
здоровья. Кроме того, часто связан с деньгами.
Коричневый.
Цвет релаксации и уверенности. Коричневый означает
приземленность, природу, долговечность, комфорт, надеж-
ность.
Серый.
Вызывает чувство серьезности, консерватизма и тради-
ционализма.
Розовый.
Выражает нежность, романтичность, женственность, пас-
сивность, привязанность, воспитание, слабость.
Черный.
Стильный и элегантный цвет, связан с властью, изыскан-
ностью. Если есть желание сделать так, чтобы сайт не вызывал
тяжелые чувства, нужно отказаться от использования черного
цвета в большом количестве.
Белый.
Белый связан с чистотой, простотой, свежестью, добро-
той, невинностью.
Целевая аудитория.
Иногда, выбирая цвета, нужно задуматься и о целевой
аудитории сайта, о том, какие ассоциации будет вызывать
цвет.
162
Цвет Европа Восток Христианство США Фэн-шуй
Уважение,
Радость, удача, Опасность,
Кровь Христа, защита,
Возбужде- жизнь, огонь, террори-
Красный жертвенность, живучесть,
ние, любовь лето, право- стическая
любовь деньги,
судие угроза
признание
Спокой-
ствие,
Успокоение, Защита,
Муже- исцеление,
Голубой безопас- духовность, Цвет Христа
ственность доверие,
ность бессмертие
приклю-
чения
Цвет импера- Стреми-
Надежда,
тора, муже- Царственность, тельность, Солнечные
радость,
Желтый ство, мудрость, слава, достоин- движение, лучи, тепло,
трусость,
женское ство, святость процвета- движение
слабость
начало ние
Нищета, Стабиль-
Стабиль-
убогость, ность,
Коричне- Тяжесть, Распад, разло- ность,
безнадёжность, постоян-
вый грубость жение посто-
потеря духов- ство, ста-
янство
ной чистоты тичность
Молодость,
Природа,
жизнь, весна, Безопас-
покой, Исцеление,
Дерево, весна, цветение, ность,
Зеленый молодость, здоровье,
гибкое, кислое зависть, рев- надежда на
безопас- успокоение
ность, нечистая лучшее
ность
сила
Затмение,
Мудрость, Единения Отклоняет- Знать,
старость,
Фиолето- тайные зна- смерти плот- ся как творчество
вера, со-
вый ния, волшеб- ской и торже- непри- и гиб-
весть,
ство, магия ства духа ятный кость ума
смирение,
Металл, Смерть,
Чистота, Святость, Чистота,
чистота, равновесие,
Белый невинность, чистота, мир, спо-
безмятеж- уверен-
свет духовность. койствие
ность, осень ность
Тьма, траур, Вода,
Сложности,
смерть, ад, Север, зима, деньги,
Траур, скорбь, чрезвычай-
Черный грех, смире- мокрое и успех,
грусть, печаль ная си-
ние мона- соленое стабиль-
туация
шество ность, сила
4.3.4. Общие рекомендации по выбору цвета

Лучше избегать использования ярких цветов на больших
областях, поскольку они имеют тенденцию оставаться перед
163
глазами некоторое время, даже после того, когда взгляд будет
переведен на другое изображение.
Для фона должен использоваться неброский цвет (блед-
но-голубой, серый).
Цвета белый, серый, черный должны использоваться для
текстовых объектов, которые будут просматриваться в тече-
ние длительного времени.
Цвета, выбранные для активного режима или цвета под-
светки, должны обеспечивать максимальный контраст с цве-
том фона. Например, с черным фоном использование красного
и синего должно быть минимизировано — белый, желтый,
зеленый и сиреневый обеспечивают с черным фоном лучший
контраст.
Одновременно должно быть видно не более трех разных
цветов, так как использование красочного интерфейса может
первоначально привлечь больше внимания, но затем вызовет
напряжение при работе в течение длительного времени.
Цвет не должен быть единственным индикатором свой-
ства или функции. Вместе с цветом можно использовать другие
визуальные эффекты, например, курсив, подчеркивание и т. п.
Красный цвет является наиболее значимым, он должен
быть зарезервирован для важных предупреждений. Использо-
вать его лучше как можно реже, ибо он ассоциируется с тре-
вожными сообщениями.
Красный цвет не должен отображаться на зеленом фоне
так же, как и зеленый цвет на красном. Эта цветовая комбина-
ция может вызывать раздражение глаз.
Синий не должен использоваться для текстовых символов,
линий или границ, за исключением случая, когда объект является
«исчезающим», т. е. сливающимся с цветом фона. Синий цвет
плохо виден и делает элементы размытыми и стертыми.
Насыщенные красные и синие цвета не должны исполь-
зоваться в смежных областях, поскольку это сочетание вызы-
вает появление нежелательных визуальных эффектов в виде
резкого ощущения глубины на изображаемом пространстве.
4.3.5. Инструмент выбора цветов сайта

Работу с инструментом нужно начинать с установки цве-
товой модели — web-цвета.
164
Рис. 149
Далее нужно установить какое сочетание цветов будет
использовано, например, сочетание трех соседних цветов —
аналогичная триада, и выбрать базовый цвет
Рис. 150
Теперь используя кнопку «Регулировка Схемы», можно
подобрать необходимый уровень яркости и контрастности.
165
Рис. 151
Чтобы использовать выбранные цвета необходимо полу-
чить их значения в шестнадцатеричной форме (кнопка «Зна-
чения Цветов»).
Рис. 152
166
И, наконец, программа предоставляет возможность озна-
комиться с примерами оформления сайтов в выбранном цве-
товом сочетании.
Рис. 153
Рис. 154
4.4. Шрифт в web-дизайне
4.4.1. Общие характеристики шрифтов

Существует сложившаяся терминология, позволяющая
охарактеризовать каждый конкретный шрифт по всем его
параметрам.
167
Гарнитура шрифта (Type family) — совокупность шриф-
тов, объединенных общими стилевыми признаками, характером
графического построения знаков и решением их элементов,
отличающих их от других шрифтов.
Начертание (Type face) — начертания шрифтов любой
гарнитуры отличаются цветовой насыщенностью, пропорци-
ями, контрастностью и наклоном знаков (светлое, полужир-
ное, курсивное или наклонное, нормальное, узкое или ши-
рокое).
Насыщенность шрифта определяется изменением тол-
щины основных и соединительных штрихов одноименных
знаков в различных начертаниях. В рамках одной гарнитуры
насыщенность может изменяться от сверхсветлой до сверхжир-
ной (light — ultra bold).
Пропорции шрифта — показатель изменения ширины
одноименных знаков в начертаниях одной гарнитуры от
сверхузких до сверхшироких.
Контрастность — один из основных признаков шриф-
та, выраженный отношением толщины соединительных
штрихов к толщине основных штрихов знаков. Эта характе-
ристика изменяется от неконтрастных до сверхконтрастных
шрифтов.
Кегель — величина шрифта в наборе, определяется в
пунктах. Кегль часто определяют как величину площадки, на
которой размещается знак.
Комплектность (полиграфический алфавит) — совокуп-
ность всех знаков, необходимых для набора текста: строчных,
прописных, цифр, знаков препинания, спецзнаков и символов.
Существует еще такие понятия, как четкость — отличие,
разборчивости одной буквы от другой и удобочитаемость —
взаимодействие букв и их сочетаемость в одном слове, но они
скорее носит субъективный характер.
4.4.2. Основные группы шрифтов

В основном принято шрифты разделять на две большие
группы — это шрифты с засечками (антиква) и шрифты без
засечек (гротески или рубленные). Рекомендуется придержи-
ваться ограниченного списка доступных шрифтов.
168
Рис. 155
Шрифты с засечками.
Как правило, шрифты с засечками лучше подходят для пе-
чатных материалов. Засечки — это не только декоративные
элементы. Они играют важную роль в восприятии шрифта, по-
скольку помогают глазу отделить один знак от другого и вы-
явить отдельные буквы. Засечки помогают создать пространство
между буквами, что делает текст более читабельным.
Более того, засечки формируют ощущение линий вдоль
текста, которые помогают читателю следовать по тексту. Это
очень облегчает восприятие и создает ощущение стройности
текстовых строк. Они упорядочивают горизонтальную тексту-
ру шрифта.
Если на сайте есть текст, который планируется в даль-
нейшем печатать, то лучше использовать шрифт с засечками.
Шрифты с засечками дают ощущение личного, они выражают
уважение, интеллект и профессионализм.
Рис. 156
Шрифты без засечек.
Шрифты без засечек, как правило, лучше подходят для
Интернета. Ведь экраны компьютеров, и тем более различных
169
устройств имеют намного худшее разрешение, чем печать на
бумаге. Низкое разрешение не дает возможности видеть мел-
кие детали, а значит и засечки у шрифта будут плохо воспри-
ниматься.
Если засечки могут выглядеть на экране размытыми и
неясными, то шрифты без засечек, отображаются более чи-
стыми и, следовательно, более читаемыми. Шрифты без засе-
чек выражают чувства рациональности, стильности,
молодости и современности. Самый популярный web-шрифт
без засечек на сегодня — шрифт Verdana.
Рис. 157
4.4.3. Типы шрифтов

Для web-дизайнера интерес представляют так называе-
мые контурные шрифты. В этом типе шрифтов происходит
описание только контура (границ) символа. Для описания
очерчивающих контуров символа, используют разбиение кри-
вой линии на отдельные участки и аппроксимацию получив-
шихся фрагментов математическими функциями. Обычно
применяется два типа функций: полиномы второй (TrueType
шрифты) и третьей (PostScript шрифты) степеней (кривые
Безье).
TrueType шрифты (формат .ttf) имеют характерные изло-
мы в точках сопряжения фрагментов символов. Избежать этого
невозможно. Поэтому их разумно использовать тогда, когда
размер (кегль) небольшой, так как на крупных буквах можно
заметить характерные зубцы по контуру элемента.
PostScript шрифты (формат .otf за счет большего числа
степеней свободы символы не имеют изломов в точках сопря-
жения фрагментов. Иначе говоря, символы этих шрифтов более
гладкие. Для PostScript — мелкий шрифт отображается «плохо-
вато», зато с заголовками никаких проблем не возникает.
При возможности выбора между TrueType и PostScript
шрифтами предпочтение, безусловно, должно быть отдано
последним.
170
4.4.4. Выбор шрифта
Рекомендуется использовать стандартные шрифты, ко-
торые включены в состав различных операционных систем и
приложений. Они относятся к группе так называемых безопас-
ных шрифтов и одинаково отображаются во всех браузерах. То
есть, для их использования никаких файлов ни скачивать, ни
устанавливать не нужно. К этим шрифтам относятся:
Название
Удобочитаемость на экране Характеристика
шрифта
Воспринимается хорошо
Современный, довольно
только при соответствующем
Arial четкий шрифт без декоратив-
размере. Не использовать
ных излишеств.
шрифт размером меньше 10.
Хорошо воспринимает- Используется для со-

Aria l Bla c k
ся в широком диапа- здания заголовков.
Хорошо читаемый равно- Используется для записи
Courier New
широкий шрифт. текстов программ.
Нестандартные формы букв

Приятный и неформальный.
значительно осложняют
Comic Sans MS Не подходит для професси-
чтение при любых разме-
ональных сайтов.
рах шрифта.
Шрифт «с засечками»,
Традиционный шрифт.
подходит для использования
Georgia Удобный для восприятия
в сети. Размер шрифта
на экране.
не меньше 10.
В основном используется при Жирный шрифт. Не подходит
печати. Крайне плохо воспри- для набора блоков текста.
Impact
нимается на экране при любых Можно использовать для
размерах. заголовков.
Прекрасно подходит для
Традиционный шрифт. Не
Times New печати. Удобство восприятия
используется профессионалами
Roman на экране резко снижается при
для отображения на экране.
выборе размера меньше 12.
Подходит больше для Имеет средне- широкие буквы

Tahoma
технической тематики. и удобен для восприятия.
Хорошо воспринимается
Современный, простой с
Trebuchet MS только с размером не
четким контуром.
меньше 10.
171
Название
Удобочитаемость на экране Характеристика
шрифта
Наиболее удобный
Современный и професси-
шрифт. Хорошо воспри-
Verdana ональный. Рекомендуется
нимается практически
для основного контекста.
при любых размерах.
Самым лучшим шрифтом, на сегодня, считается Verdana.
4.4.5. Родовое семейство шрифтов

Спецификация предусматривает 5 основных родовых
групп шрифтов:
serif — шрифты с засечками (например, Times New
Roman);
sans-serif — шрифты без засечек (например, Arial);
cursive — курсивные (наклонные) шрифты; (например,
Comic Sans MS);
fantasy — декоративные шрифты (рукописные, рисован-
ные и так далее);
monospace — моноширинный шрифт (например, Cou-
rier New).
Каждое семейство шрифтов имеет свое предназначение.
Например, с помощью декоративных шрифтов выделяются заго-
ловки, курсивные шрифты могут обозначать цитаты, а моноши-
ринные используются для отображения кода, например HTML-
кода и других целей.
4.4.6. Поддержка кириллицы

Специфической особенностью Рунета является пробле-
ма с кодировками страниц и поддержкой кириллицы в шриф-
тах. Это еще и потому важно, что разработчик сайта не знает,
какая операционная система установлена у пользователя,
а, следовательно, неизвестен и перечень используемых им
шрифтов.
Выйти из создавшейся ситуации позволяет таблица соот-
ветствий шрифтов в различных операционных системах.
Данная таблица позволяет избежать автоматической за-
мены отсутствующих шрифтов, что обычно приводит к иска-
жению внешнего вида страницы сайта.
172
Чтобы страничка отображалась так, как ее задумал ди-
зайнер, в любой операционной системе, используется свойство
font-family, в котором можно задавать несколько шрифтов
через запятую. Например, если основным текстом страницы
является Arial, то в CSS пишем следующую строчку:
body {
font-family:Arial,"Helvetica CY","Nimbus Sans L",sans-serif;
}
или
body {
font-family:Verdana,"Geneva CY","DejaVu Sans",sans-serif;
}
Приведенный выше фрагмент кода указывает, что при
наличии у пользователя шрифта Arial, текст на странице дол-
жен быть отображен именно этим шрифтом. Расчет делается
на то, что шрифт Arial присутствует у всех пользователей Win-
dows и Mac OS. При отсутствии шрифта Arial страничка будет
отображена системным шрифтом, который в каждой системе
свой. Например, в Mac OS это Helvetica, а в Unix/Linux — Nim-
bus Sans. В редких случаях, у 10 % пользователей Unix/Linux
страница отображается шрифтом, используемым по умолчанию
для просмотра web-страниц.
Имена родовых семейств являются ключевыми словами и
не обязательно должны заключаться в кавычки.
173
4.4.7. Основы выбора шрифтов
Размер шрифта.
Предпочтения у каждого человека свои. Самый использу-
емый размер шрифта это 12–14, если шрифт мельче, то это не
очень уважительно к посетителям, которые должны напрягать
глаза при чтении, но и больший шрифт не подойдет, так как
страница будет выглядеть как транспарант.
Мелкий шрифт чаще всего используется для примечаний
или надписей под изображениями. Размер таких надписей
примерно 10.
Сглаживание шрифта.
В таких браузерах как InternetExplorer и Safari уже вклю-
чено сглаживание шрифтов по умолчанию, это касается и
маленьких и больших шрифтов. В остальных браузерах Opera,
Mozilla, сглаживание начинается с 17–18 px, а мелкий текст
остается без сглаживания.
Прописные и строчные буквы.
Осторожно с прописными буквами. Текст, написанный
прописными буквами, приходится читать по слогам
Средства выделения шрифтов.
Нельзя злоупотреблять средствами выделения шрифтов
(курсивом, полужирным шрифтом, подчеркиванием, цветом,
применением эффекта тени). Подчеркиванием или наклоном
можно выделить слово, но никак весь текст. Лучше ограни-
читься одним или двумя способами выделения шрифтов,
и следить за тем, чтобы выделенными оказывались действи-
тельно значимые фрагменты текста.
Выбор цветов шрифта и фона.
Важно правильно использовать контраст. Фон и текст
непременно должны контрастировать друг с другом, иначе
текст станет нечитабельным. Как правило, выгоднее исполь-
зовать светлый фон, но в целом темный тоже допустим. Выби-
рая темный, не следует использовать мелкий шрифт — его
будет сложнее разобрать.
Применение ярких фоновых цветов не допустимо, так как
читать текст по яркому, а тем более пестрому, фону трудно,
а иногда просто невозможно.
174
В приведенной ниже таблице отображен уровень удобо-
читаемости для различных сочетаний цветов.
Сочетание цветов Уровень удобочитаемости
Черный текст на белом фоне Высокий: самый высокий контраст и
самый высокий уровень зрительного
восприятия
Синий текст на белом фоне Высокий: высокий уровень зрительного
восприятия, если пользователь различает
темно-синий цвет
Черный текст на сером фоне Средний: уровень зрительского восприя-
тия от среднего до высокого, в зависимо-
сти от оттенков и насыщенности цветов
Белый текст на синем фоне Низкий: сложно читать, поскольку текст
приглушается темным фоном
Серый текст на белом фоне Низкий: самый низкий контраст и самый
низкий уровень зрительного восприятия
Белый текст на сером фоне Низкий: низкий контраст и низкий уровень
зрительного восприятия
Оранжевый текст на белом Очень низкий: сочетание светлых цветов
фоне делает текст «невидимым»
Красный текст на синем фоне Очень низкий: сочетание ярких цветов
создает эффект «дрожания» текста, утом-
ляющий зрение
Красный текст на черном фоне Очень низкий: сочетание ярких цветов
создает эффект «дрожания» текста, утом-
ляющий зрение
Красный текст на зеленом Очень низкий: сочетание ярких цветов
фоне создает эффект «потери резкости» текста,
утомляющий зрение
Оформление контекста:
1. строка «идеальной ширины» должна умещать порядка
50–70 знаков. При большем количестве символов в строке ско-
рость чтения замедляется, а утомляемость наступает быстрее;
2. текст должен быть оформлен в нижнем регистре, так
как текст в верхнем регистре вызывает раздражение и его
приходится читать «по слогам»;
3. выравнивание шрифта должно быть по левому краю,
поскольку к этому все привыкли;
4. шрифт должен быть обычным, т. е. не курсивным, не
жирным и не подчеркнутым; шрифтовые выделения на боль-
ших областях текста не рекомендуются.
175
4.5. Тест
1. Какая из следующих спецификаций правильная для
определения цветового стиля?
а) H1 {color: FF-00-88}
б) H1 {color: red}
в) H1 {color: rgb(#D46A11)}
г) H1 {color: 66.7%/66.7%/73.3%}
2. С помощью какой цветовой модели представлен цвет в
следующем виде:
#13AD7C
а) CMYK, т. е. цвет определяется четверкой: C — голубым,
M — пурпурным, Y — желтым, K — черным
б) Gradient
в) RGB, т. е. цвет определяется тройкой: R — красный,
G — зеленый, B — синий
г) Web-safe
3. Атрибуты HTML-контейнера (элемента) соответствуют:
а) методам объекта
б) свойствам объекта
в) событиям
г) классам объекта
4. HTML. Документ состоит из главных частей:
а) Head, Body
б) Head, Title, Body
в) Body, Footer
г) Body, Frameset
5. В HTML так записываются ссылки на документы, хра-
нящиеся на других серверах:
а) с указанием их URL
б) <ul><li></ul>
в) <А NАМЕ="полное имя файла"></А>
г) <А="имя файла"></А>
6. В HTML задается положение рисунка с помощью:
а) <IMG SRC=...>
б) <IMG ALIGN=...>
176
в) <IMG URL=>
г) <IMG HR>
7. Ухудшение качества изображения, связанное с увели-
чением размеров, характерно для
а) векторной графики
б) смешанной графики
в) растровой графики
г) фрактальной графики
8. Характерной особенностью векторной графики явля-
ется
а) ухудшение качества изображения с уменьшением его
размера
б) ухудшение качества изображения с увеличением его
размера
в) неизменность качества изображения с увеличением
его размера
г) большой объем файла
9. Представление графической информации в виде набо-
ра точек или пикселей
а) разрешающая способность
б) фрактальное представление
в) векторная форма представления
г) растровое представление
10. Цветовая модель, формирующаяся за счет смешива-
ния трех базовых цветов: красного, зеленого, синего
а) RGB
б) CMYK
в) HSB
г) CMY
11. Несуществующий вид компьютерной графики:
а) растровая графика
б) векторная графика
в) дискретная графика
г) фрактальная графика
177
12. В качестве гипертекстовых ссылок может использо-
ваться
а) таблица
б) любое слово или картинка
в) поле ввода
г) только картинка
13. Какого гармоничного сочетания цветов не существует?
а) монохромное
б) комплементарное
в) расщеплённое
г) комплексное
14. Какой цвет считается холодным?
а) красный
б) синий
в) оранжевый
г) желтый
15. Цвет, ассоциирующийся с терпением, миром, спокой-
ствием и надежностью?
а) зеленый
б) фиолетовый
в) голубой
г) коричневый
16. С чем ассоциируется зеленый цвет в Японии?
а) жизнь
б) деньги
в) добродетель
г) здоровье
17. Как называется совокупность шрифтов, объединен-
ных общими стилевыми признаками?
а) комплект
б) гарнитура
в) фурнитура
г) кегель
18. Какой из шрифтов надо использовать для заголовков?
а) comic sans ms
б) georgia
178
в) times new roman
г) impact
19. Очень низкий уровень зрительного восприятия дают
цвета шрифта и фона?
а) черный текст на сером фоне
б) белый текст на сером фоне
в) оранжевый текст на белом фоне
г) синий текст на белом фоне
20. Какое значение необходимо указать тегу border, что-
бы граница была пунктирной?
а) outset
б) dashed
в) dotted
г) solid

Разработать дизайн главной страницы сайта на основе
предложенных:
1. Дизайн сайта The Yellow Conference сочетает желтый
цвет, шрифтовой контраст и контент.
Рис. 158
179
2. У сайта Nation яркий и запоминающийся дизайн с кон-
турным заголовком.
Рис. 159
3. Дизайн сайта Tectonica Studios содержит плоскую гра-
фику с градиентами и блоком иллюстраций.
Рис. 160
180
4. Дизайн сайта DoneDone системы управления проектами
оформлен в стиле Flat с баг-трекером, яркими цветами и плос-
кой графикой.
Рис. 161
5. На сайте мексиканского агенства Mobkii используются
плоские иллюстрации с градиентами.
Рис. 162
181
6. У сайта нидерландского арт-музея Frans Hals Museum
необычный дизайн в стиле Flat с гигантскими заголовками
рубленым шрифтом.
Рис. 163
7. Хостинговая платформа из Сан-Франциско Panteon, со-
зданная для разработки Drupal и WordPress сайтов, разработала
дизайн корпоративного сайта с плоской графикой, геометрич-
ными формами c градиентами.
Рис. 164
182
8. В оформлении дизайна сайта-визитки Ladybird исполь-
зуются готические и декоративные шрифты, красивые иллю-
страции для передачи атмосферы одноименного фильма.
Рис. 165
9. Дизайн игрового проекта-сайта rs0playthegame для
бренда одежды Puma содержит элементы бренда Puma и объ-
емный загловок.
Рис. 166
Глава 5. Продвижение сайтов
Сегодня все предприятия и многие люди считают для се-
бя жизненно важным иметь свой собственный сайт. Это не
просто желание оповестить весь мир о своем существовании,
но и надежда на приобретение новых клиентов и заказов на
товары и услуги.
К сожалению, многие не задумываются над тем, что
наличие сайта не гарантирует ни того, ни другого. Спросите
себя, а как Вы пользуетесь результатами поисковиков, когда
пытаетесь найти в Интернете нужную информацию. Обычно,
человек ограничивается просмотром первых трех, пяти сайтов,
не более того, а переход на вторую страницу — это из области
ненаучной фантастики.
Таким образом, сайт, приносящий пользу своему владель-
цу, должен располагаться в начале списка, а для этого он должен
быть оптимизирован под требования поисковых систем. Для
этого и используется SEO (Search Engine Optimization) — ком-
плекс мероприятий, проводимых с целью улучшения видимости
сайта или отдельной страницы в результатах естественной
(неоплаченной) выдачи поисковых систем по определенным
запросам пользователей.
В техническом плане, SEO делится на две категории:
внутреннюю и внешнюю оптимизации. Однако до того, чтобы
проводить оптимизацию, нужно знать и понимать, что и как
оптимизировать. Этими вопросами занимается SEO-аудит
сайта — всесторонний анализ сайта для выявления ошибок и
проверки его на предмет соответствия стандартам и требова-
ниям поисковых систем. Сюда относится:
1. Выявление проблем и недостатков в оформлении и
структуре сайта.
2. Проверка контента на уникальность, наличие ключе-
вых слов, их расположение и т. д.
3. Проверка html-кода страниц, на наличие ошибок, со-
здание файла robots.txt и карты сайта для улучшения индекса-
ции сайта.
4. Анализ ссылочной массы и так далее.
В итоге должна быть сформирована стратегия и порядок
исправления ошибок, внутренней и внешней оптимизации и
продвижения сайта.
184
Внутренняя оптимизация.
Понятие внутренней оптимизации традиционно делят
на: классическую и прогрессивную.
К классической оптимизации относятся:
Мета-теги.
Что касается мета-тегов, то требуется обратить внимание
только на мета описание сайта (description), потому что именно
из него, содержания заголовка title и контента страницы гене-
рируется сниппет-блок информации о сайта, который отобра-
жается в результатах поиска. Благодаря ему пользователь
получает представление о странице, не заходя на сайт.
Рис. 167
Другими мета-тегами можно пренебречь. Они не так уж и
важны.
Дизайн юзабилити.
Качественное и понятное управление, которое помогает
пользователям найти контент на сайте быстрее (в идеале не
более чем за два-три клика). Запутанное или не очевидное
управление ведет к росту отказов, когда пользователь просто
покидает сайт. Что касается дизайна, то тут у каждого свои
вкусы, хотя давно известно такое понятие, как адаптивный
дизайн (responsive design — отзывчивый дизайн) и его типо-
вые шаблоны, главный принцип которого — улучшение визу-
ального восприятия сайта и удобство управления.
Перелинковка.
Грамотная перелинковка предполагает размещение ссылок
внутри сайта на наиболее важные его страницы. Перелинковка
185
помогает добиться более высоких результатов в поисковых
системах для тех страниц, на которые размещены ссылки, так
как поисковые системы воспринимают и учитывают ссылки и
тексты ссылок, размещенные внутри самого сайта.
Создание правильного контента.
Под этим обычно понимаются уникальные статьи с опти-
мальным количеством тщательно подобранных ключевых слов,
а также тематический видео-аудио контент и изображения.
К прогрессивной оптимизации относятся действия, свя-
занные с улучшением позиции путем анализа и учета челове-
ческого фактора:
Выбор «правильного» доменного имя.
Доменное имя должно быть легко читаемым и запоми-
нающимся. Домен «time.ru» выглядит лучше и удобнее в ис-
пользовании, чем «superpupertimingslip.com».
Если ваш сайт ориентирован на продвижение брэнда, то
доменное имя должно его содержать, а в других ситуациях
полезно попытаться включить в имя главное ключевое слово,
но это не обязательно.
Выбор ключевых слов.
Создавая собственный сайт с нуля, нужно сделать пра-
вильный выбор ключевых слов и фраз, по которым сайт будет
оптимизироваться, и продвигаться в выдаче. Сформулировав
тему сайта, необходимо создать его семантическое ядро —
основу структуры будущего сайта.
Фавикон.
Это маленькое изображение, которое отображается на
вкладке результатов поиска, сопровождая описание сайта.
Файлы robotr и sitemap
Файл robots.txt очень важен для корректной внутренней
оптимизации и содержит команды для поисковых роботов,
с помощью которых можно управлять сканированием разделов
сайта. Со своей стороны, файл sitemap (карта сайта) нужен для
нормальной индексации и распределения весов страниц.
Страница «ошибка 404».
Страница «ошибка 404», говорит пользователю о том, что
он пытается перейти на несуществующий адрес. Цель — удер-
жать пользователя на сайте, то есть уменьшить число отказов.
186
Быстрая загрузка страниц.
Опыт показывает, что люди не хотят ждать лишнюю пару
секунд. Это факт. Поэтому необходимо максимально облегчить
страницы сайта для быстрой загрузки. Чаще всего это связано
с иллюстрациями, которые должны быть обработаны особым
образом.
Оптимизация для социальных сетей.
Сегодня важно предусмотреть возможность использова-
ния контента страниц сайта в социальных сетях. Пусть посети-
тели делятся понравившимся им контентом, что может
увеличить его популярность и посещаемость. Сайт необходимо
оптимизировать для этих целей. Например, разместить кнопки
для лайков, ретвитов, репостов, и т. д.
Внешняя оптимизация.
Внешней оптимизацией называется работа, проводимая
вне сайта. По сути, к ней относится только линкбилдинг —
наращивание ссылочной массы (получение ссылок), так как
они являются главным фактором, учитываемым при ранжиро-
вании сайтов в поисковой выдаче.
В начале работы над сайтом 80 % внимания уделяется
внутренней, 15 % — внешней оптимизации и около 5 % —
работе в соцсетях. Впоследствии это соотношение можно по-
менять на 10/60/30.
В отличии от внутренней оптимизации работа по нара-
щиванию ссылочной массы обычно упирается в выделенный
для этих целей бюджет. При закупке ссылок нужно руковод-
ствоваться следующими базовыми принципами:
Прогоны по каталогам.
Сегодня прогоны по различным каталогам уже отживает
своё. Хотя, если использовать качественную базу тематиче-
ских ресурсов, определенная польза может быть получена.
Вершиной мастерства считается наличие сайта в каталоге
Yandex и DMOZ, но такая регистрация процесс длительный и
сложный.
Комментирование блогов и тем на форумах.
Этот способ больше работает на самого комментатора,
чем на сайт. Считается, что это обыкновенный спам, но метод
пока процветает.
187
Покупка ссылок.
Это самый распространенный способ получения ссылок,
причем, можно покупать ссылки временные (платить каждый
месяц), а можно постоянные.
Существуют несколько видов покупных ссылок, которые
отличаются по типу и цене. Можно закупать временные ссыл-
ки на специализированной бирже (например, sape.ru).
Рис. 168
Если закупаются постоянные ссылки, то за них приходит-
ся платить больше, правда, только один раз.
5.1. Общие принципы работы

поисковых систем
5.1.1. Особенности работы поисковых систем

Современный Интернет не мыслим без поисковых машин
или, как их еще называют, поисковиков. В мировом Интернете
сейчас доминирует Google, а в русскоязычной его части наибо-
лее популярен — Yandex.
Популярность поисковых машин обуславливается тем,
что они, в известном смысле, упорядочивают хаос. Ведь ин-
формация, содержащаяся в сайтах, хранится в Интернете без
какого-либо порядка, и без них найти необходимые сведения
невозможно. Более того, они не только находят сайты, содер-
жащие искомую пользователем информацию, но и ранжируют
их степени соответствия сделанному запросу.
188
В своей повседневной жизни люди постоянно сталкива-
ются с поиском информации и используют, в основном, три
способа — оглавление, ссылки и предметный указатель.
Оглавление.
Первый, самый простой способ поиска информации в
книге, знакомый каждому с детства. Аналогом этого способа
поиска в Интернете являются каталоги. В них сайты сгруппи-
рованы по темам, что позволяет пользователю, выбрав нуж-
ную рубрику, просмотреть сайты, относящиеся к данной
области знаний или деятельности. В середине 1990-х годов,
именно каталоги были основным способом упорядочения
информации в Интернете.
Ссылки.
Это второй, привычный нам, книжный способ поиска, ко-
гда указывается где можно подробнее прочитать об указанном
факторе или откуда взята цитируемая фраза. В Интернете идея
ссылок трансформировалась в использование автоматических
гиперссылок («гипер» — за пределы текста) на другие страни-
цы или сайты.
Предметный указатель или индекс.
И, наконец, третий способ поиска — это алфавитный спи-
сок терминов в книге, называемый ещё предметный указатель
или индекс. Именно идея поиска информации, по ключевым
словам, и стала основной при создании поисковых машин.
Поисковая машина (Search results engine) — это про-
граммный комплекс, который, с одной стороны, составляет и
хранит предметный указатель сайтов, который называют
индексом, а, с другой стороны, обрабатывает запросы пользо-
вателей и находит сайты, соответствующие заданным ключе-
вым словам.
Процессы составления индекса и поиска по нему состоит
из следующих этапов:
Сбор адресов страниц в Интернете.
Обычно разработчики поисковой машины загружают в
нее некоторый начальный список адресов страниц сайтов
(например, из какого-нибудь каталога). Затем модуль поиско-
вой машины Crawler (краулер) последовательно обходя задан-
ные страницы, собирает с каждой из них все ссылки на другие
страницы и добавляет их адреса к первоначальному набору.
189
Двигаясь таким образом от страницы к странице, быстро
наращивается набор адресов.
Следует обратить внимание на то, что малоизвестные
страницы, на которые ещё никто не ссылается, не могут по-
пасть в индекс поисковой машины, но владелец сайта может
сам добавить адрес своего нового сайта в индекс поисковика
вручную. Такая возможность предусмотрена во всех поисковых
машинах.
Выкачивание страниц.
Чтобы поработать с текстом страницы и составить из не-
го индекс, поисковая машина, должна его получить. Эту функ-
цию выполняет поисковый модуль Spider (паук). Обходя
заданный список страниц «паук» считывает гигантский объем
сырого текстового материала, сохраняет его и передает на
индексирование другому модулю поисковой машины —
Indexer (индексер).
Составление индекса.
Чтобы составить индекс, используется модуль поисковой
машины Indexer. Для начала текст индексируемой страницы
очищается от всяких нетекстовых элементов: графики, раз-
метки языка HTML и прочего. Далее из текста выбираются все
слова.
В так называемых флективных языках слова имеют не-
сколько различных окончаний, поэтому у каждого слова очень
много различных форм, которые называются словоформами.
Русский язык — высоко-флективный, так как его слова имеют
очень много форм. Например, существительное в общем случае
имеет двенадцать словоформ (шесть падежей единственного
числа и шесть падежей множественного). У прилагательного —
почти двадцать словоформ, а уж глаголы со всеми своими
причастиями могут иметь до сотни форм.
Для решения проблемы слова приводятся к своим
начальным формам — к основам, чаще всего к корням слов и
уже в таком виде добавляются в индекс. Этот процесс называ-
ют машинной морфологией, и выполняется он для экономии
места в индексе и, что еще важнее, для более точного поиска.
В индексе основы всех слов будут упорядочены по алфа-
виту, а при каждой будет записано, с какой страницы она взята и
на каком месте на этой странице стояла. Конечно, в реальности
190
для экономии места и повышения скорости использования
структуру индекса дополнительно оптимизируют.
Запись индекса.
Собранная информация записывается в виде базы дан-
ных (Database), хранящей информацию обо всех проиндекси-
рованных веб страницах.
Поиск.
Для поиска информации пользователь вводит в поиско-
вую строку свой запрос (слово или словосочетание). Поисковая
машина обращается к индексу, находит запись о заданном
слове, извлекает все номера страниц, относящиеся к нему,
и показывает пользователю, ранжированный список страниц и
их сниппетов.
Если же в запросе было несколько слов, то поисковая ма-
шина выбираются только те страницы, на которых одновре-
менно встречаются все слова запроса.
Поисковая машина тем лучше, чем более «правильные»
(релевантные) страницы он показывает пользователю в ответ
на запрос.
5.1.2. Выбор домена и хостинга

Доменное имя.
Доменное имя — это уникальное алфавитно-цифровое
обозначение, которое является необходимым элементом адре-
са Интернет. Оно позволяет идентифицировать web-сайт в
сети Интернет и состоит из латинских букв, цифр и знаков «-»
(дефис).
Регистрацией доменных имен в РФ занимается РосНИИРОС.
Регистрация означает занесение домена и соответствующему ему
IP-адреса в базу данных DNS сервера. Рекомендуется зарегистри-
ровать доменное имя — лично, не перепоручая это веб-мастеру,
т. к. при регистрации нужно заполнять довольно много личных
данных (в том числе и паспортные).
Не желательна регистрация домена и через хостинг-
компанию: в этом случае перенести сайт на другой хостинг
может быть затруднительно, независимо от того, что Вы —
полноценный владелец домена.
Выбор домена и хостинга косвенно влияют на индекса-
цию сайта. Достоверно нельзя утверждать, что доменное имя
191
должно соответствовать тематике сайта, хотя длина домена и
его написание могут учитываться поисковиками.
Бесперебойная работа и скорость хостинга также влияют
на индексацию сайта и его ранжирование в выдаче.
Бесплатный домен.
Получить домен бесплатно несложно, но, как правило,
это будет домен третьего или более высокого уровня, вроде
tema.journal.com. В этом случае, сайт оказывается не совсем
вашим, так как является поддоменом и принадлежит владель-
цу основного домена.
Возможен вариант бесплатного домена с оплатой хостин-
га на длительный срок. Только в этом варианте, оплата хо-
стинга, по сути, является (в скрытой форме) оплатой всего
домена.
Бесплатный домен, как правило, не пользуется доверием
поисковых систем и имеет меньше шансов на продвижение,
нежели платные домены второго уровня. Поскольку считается,
что никто не станет размещать более или менее серьезный
сайт на базе бесплатного хостинга и уж тем более на бесплат-
ном домене.
Платный домен.
При покупке своего собственного домена можно свобод-
но выбирать хостинг. Это позволит при неудовлетворённости
текущим состоянием дел снять свой сайт и переехать на дру-
гую площадку, более удобную или быструю.
При выборе домена, необходимо обратить внимание на
следующие моменты:
— доменное имя должно быть хорошо запоминающимся,
а его написание и произношение были бы однозначны;
— имя состоит из англоязычных символов (латиницы),
в нём допустимы цифры и дефисы (не более двух и не рядом);
— дефис нельзя ставить в начале и в конце символьной
конструкции, только в её середине;
— все символы и слова домена пишутся слитно, пробелы
между ними не допустимы;
— доменное имя сайта не стоит делать слишком длин-
ным (максимальная длина 63 символа);
— желательно, чтобы в доменном имени содержались
ключевые слова, по запросам которых потребуется получить
сайт в выдаче Яндекс или Google;
192
— чтобы раскрутить русскоязычный проект, домен надо
брать в зоне «.ru»;
— чтобы раскрутить международный (англоязычный)
проект, больше всего подходят домены, имеющие расширение
«.com». Можно взять домены из зон «.net», «.org» или «.biz», но
эти варианты хуже.
Стоимость домена зависит от регистратора и зоны и со-
ставляет от 5 до 20 $ в год.
В случае приобретения домена у перекупщиков нужно
обязательно проверить и досконально выяснить его историю.
За доменом может тянуться шлейф неприглядностей (филь-
тры поисковых систем и т. п.), которые негативно отразятся на
сайте.
Услугу по предоставлению ресурсов, для размещения го-
тового сайта на сервере с определенными программными
возможностями называют хостингом. Компании, предостав-
ляющие подобные услуги — хостинг-провайдеры. У провайде-
ра можно приобрести как платный, так и бесплатный хостинг.
Стоимость платного хостинга невелика, примерно 150 руб./мес.,
но авторитетность Вашего сайта будет оцениваться выше, так
как считается, что люди станут платить только за серьезный,
качественный сайт.
Выбирая хостинг необходимо обратить внимание на:
— доступность сервера;
— скорость доступа;
— географическое расположение;
— отзывы других пользователей.
Многие Интернет-провайдеры, согласятся дать бесплат-
ное место на сервере, но все эти варианты имеют существен-
ные недостатки, и при создании коммерческого проекта мало
приемлемы. Например, нередко хостинг-провайдеры предла-
гают своим клиентам бесплатные услуги, но в обмен на разме-
щение своей рекламы на страницах вашего сайта.
5.1.3. Выбор ключевых слов

Создавая собственный сайт с нуля, нужно сделать подбор
ключевых слов и фраз, по которым сайт будет оптимизиро-
ваться, и продвигаться в выдаче. Уже после этого, основываясь
на список ключей можно создавать структуру сайта. Например,
193
создается сайт компании, оказывающей 10 типов услуг. Можно
спрогнозировать, что сайт будет содержать10 продвигаемых
страниц, страницу контактов и проезда, плюс любое количе-
ство сквозных статей с дополнительной информацией.
Каждая продвигаемая страница сайта должна продви-
гаться по определенному поисковому запросу, а все продвига-
емые запросы должны вместе составлять набор ключевых слов
сайта — его семантическое ядро.
Создание семантического ядра.
И так, на первом этапе требуется сформулировать тему
сайта, а по теме сделать подбор ключевых слов, и согласовать
их со статистикой поисковых запросов. Вряд ли стоит писать,
а далее продвигать сайт, по ключевым словам, которые никто
не запрашивает.
Для подбора ключевых слов есть масса различных ин-
струментов. Сложность подбора ключевых слов растёт с увели-
чением желаемого количества потенциальных посетителей.
Для крупных проектов количество ключевых слов может дохо-
дить до нескольких тысяч и требует определенного опыта.
Подбор ключевых слов для простых проектов практически
элементарен и должен быть взят на вооружение всеми вла-
дельцами сайтов, которые заинтересованы в продвижении
своего детища.
Средства подбора ключевых слов и фраз.
Чтобы подобрать ключевые слова и фразы, удобно вос-
пользоваться теми сервисами, которые предлагаются самими
поисковыми системами. Поисковики Yandex и Google предо-
ставляют два основных сервиса по подбору ключевых слов.
— подбор ключевых слов Yandex это сервис «Яндекс–
Подбор слов». (https://wordstat.yandex.ru);
— подбор ключевых слов Google это сервис «Google
Adwords — инструмент Keyword Planner» (https://adwords.
google.ru/select/KeywordToolExternal).
Оба этих сервиса позволяют разработчику сайта ознако-
миться со статистическими отчетами по уже сделанным поис-
ковым запросам. Например, сервис «Яндекс — Подбор слов»,
показывает статистику запросов на Yandex, по заданному слову
или фразе, которые делали искавшие его люди.
194
Чтобы воспользоваться инструментами подбора ключе-
вых слов, требуется завести аккаунты на Yandex и Google соот-
ветственно.
Кроме сервисов Yandex и Google по подбору ключевых
слов, есть инструменты подбора ключевых слов и специальные
базы ключевых слов. Самая известная среди них — база клю-
чевых слов Пастухова (https://pastukhov.com/).
Поисковые системы учитывают и сохраняют все запросы,
которые делают пользователи. Это крайне важная информа-
ция для разработчиков сайтов, и поисковики предоставляют к
этим архивам свободный доступ.
Принято различать низкочастотные (НЧ), среднечастот-
ные (СЧ) и высокочастотные (ВЧ) запросы. Такое деление
выполняется либо, опираясь на количество запросов в месяц,
либо на логическую характеристику. Если количественный
подход интуитивно понятен, то логический требует иллюстра-
ции на примере. Например:
Высокочастотный запрос — запрос общего характера.
Предположим «Удочка».
Среднечастотный запрос — уточненный запрос. Предпо-
ложим «Болонская удочка».
Низкочастотный запрос — конкретизированный запрос.
Предположим «Болонская удочка mikado princess 500».
Очевидно, что НЧ запросы входят в СЧ запросы, а СЧ за-
просы входят в ВЧ запросы.
Использование цифровых характеристик обычно затруд-
нено, так как здесь нет конкретных рекомендаций, и частот-
ные диапазоны зависят от анализируемого запроса. Например,
условно можно разделить запросы следующим образом:
— менее 1000 запросов в месяц — низкочастотные;
— менее 10 000 запросов в месяц — среднечастотные;
— более 10 000 запросов в месяц — высокочастотные.
Воспользовавшись вышеперечисленными средствами,
можно сделать первый подбор ключевых слов.
Понятно желание включить в семантическое ядро сайта
только ВЧ запросы, которые ищут тысячи пользователей, но
это не гарантирует, что по этим запросам на сайт придут поль-
зователи. Слишком уж высока конкуренция.
195
В силу этого, для запросов используется еще одна харак-
теристика, так называемая конкуренция запроса. По конку-
ренции запросы делятся на высоко конкурентные (ВК), средне
конкурентные (СК) и низко конкурентные запросы (НК). Пря-
мой связи между частотой запросов и их конкурентностью нет.
То есть, среднечастотные запросы могут быть и низкоконку-
рентным и высококонкурентными.
Поэтому в семантическое ядро сайта нужно включить все
типы частотных запросов. Исключить можно НЧ запросы с
совсем уж низкими показателями — 10 и менее запросов в
месяц.
Пример использования — Wordstat.yandex.ru.
После авторизации в Yandex, нужно перейти на сервис
https://wordstat.yandex.ru/ и в форму поиска ввести нужное
ключевое слово общего характера (ВЧ запрос). После нажатия
на кнопку «Подобрать» Wordstat откроет таблицу, где будут
показаны и введенный ВЧ запрос и все включающие его и
похожие запросы, которые делались в Yandex за последний
месяц.
Рис. 169
Основываясь на выведенной таблице, составляется се-
мантическое ядро. В левой таблице приведены все запросы с
запрошенным ключевым словом. В правой таблице, похожие
196
запросы, которые делались людьми, искавшими введенное
ключевое слово. Для общего семантического ядра эти фразы не
нужны, но в дальнейшем их можно использовать при написа-
нии статей для сайта.
Дальше идет аналитическая часть работы. Из всех
найденных вариантов требуется отобрать только нужные за-
просы, которые станут ключевыми словами сайта и войдут в его
семантическое ядро.
Как это реализовать? Вариантов много, например, можно
из первого поиска по общей фразе, подобрать ключевые фразы
для разделов сайта. Это могут быть разделы: корпусная ме-
бель, кухонная мебель, мебель гостиной, детская мебель и т. д.
Далее для каждого из выбранных разделов потребуется
подобрать свой список ключевых слов и фраз и так далее.
В результате получится иерархическая структура ключевых
слов и фраз семантического ядра сайта, соответствующая его
схеме построения.
Далее, нужно сделать анализ своих конкурентов, чтобы
выяснить, на какие ключи они ориентируются: возможно, из
этого анализа удастся почерпнуть что-либо новое и полезное.
С другой стороны, используя язык поисковых запросов
Yandex, можно скорректировать семантического ядра уточнив
информацию по ключевым словам.
Если ввести ключевое слово или фразу в кавычках, то бу-
дет выведено точное количество таких запросов. Например, на
запрос «мебель» будет выведено:
Рис. 170
Можно выяснить, количество запросов, которые включа-
ли конкретную фразу. Такую информацию дает запрос: «!ме-
бель !для !дома». Получаем точное количество запросов,
точной фразы — мебель для дома.
197
Рис. 171
5.2. Внутренние факторы ранжирования
5.2.1. Структура сайта
5.2.1.1. Структура сайта

У сайта должна быть правильная и четко выстроенная
структура. Правильная структура сайта важна как для посети-
теля, так и для поисковой машины. Структура должна быть
простой и понятной всем без исключения пользователям. Для
этого требуется оптимизировать следующие параметры в
структуре сайта:
— Мета-теги.
— Дизайн и юзабилити.
— Фавикон.
— Перелинковка.
— Файлы robotr и sitemap.
— Страничка «ошибка 404».
5.2.1.2. Мета-теги
Мета-теги (тег<meta>) используются для хранения инфор-
мации предназначенной для браузеров и поисковых систем, в
частности, описания сайта, ключевых слов и других данных.
Для поисковых серверов важны два мета-тега: Description
(описание) и Keywords (ключевые слова). Из этих двух тегов
поисковые машины формируют сниппеты, которые отобража-
ются в поисковой выдаче.
198
Мега-тег Description.
Тег Description содержит краткий анонс содержания
страницы сайта.
<html>
<head>
<meta name="Description" content="Сайт о HTML">
</head>
<body>
...
</body>
</html>
Напрямую тег Description, на ранжирование не влияет, но
очень важен так как:
— точное и интересное описание страницы, может при-
влечь пользователя зайти на сайт, вне зависимости от его
места в результатах поиска;
— поисковые системы отдают предпочтение тем сайтам,
на которых заполнен этот тег, так как он позволяет им опреде-
лить наиболее релевантные страницы.
Если мета-тега на странице отсутствует, то поисковая си-
стема просто перечисляет первые встречающиеся слова на
странице, которые, часто, не имеют никакого отношения к
теме сайта.
Учитывая особенности работы поисковых систем Yandex
и Google, можно сформулировать ряд рекомендаций по форми-
рованию содержания тега Description:
— текст должен быть не более 150–160 символов;
— слишком короткое описание (меньше 70 символов)
недопустимо;
— текст в мета-теге Description не должна совпадать с те-
гами title или h1;
— в текст должны быть включены ключевые слова. В иде-
але их нужно прописать их как можно ближе к началу текста;
— текст тега должен быть емким и ориентированным на
людей;
— тег Description должен располагаться на каждой стра-
нице, а его текст — уникальным;
— полезно указывать в тексте конкурентные преиму-
щества.
199
Мета-тег Keywords.
Мета-тег Keywords предназначен для указания ключевых
слов страницы сайта, которые перечисляются через пробел
или запятую.
<html>
<head>
<meta name="Keywords" content="HTML, META, метатег">
</head>
<body>
...
</body>
</html>
Сейчас почти не используется, но, тем не менее, от него

не рекомендуется отказываться. Лучше его заполнить, только
реально присутствующими на странице ключевыми словами.
При использовании мета-тега Keywords нужно пользо-
ваться следующими рекомендациями:
— не включать в тег более 20-ти слов. Такое количе-
ство ключевых слов воспринимается поисковыми системами
как переспам, а сайты, заподозренные в этом, ранжируются
ниже;
— не нужно указывать одно и то же ключевое слово не-
сколько раз. Это то же воспринимается как переспам;
— иногда полезно прописывать ключевые слова с «тра-
диционными» ошибками, так как такие запросы бывают попу-
лярнее запросов с правильным написанием;
— для некоторых ключевых слов (например, бренд) сто-
ит указать и англоязычный вариант;
— лучше перечислять ключевые слова через запятые. Это
дает возможность указать, какие именно словоформы будут
использоваться. Если запятые отсутствует, то поисковик будет
определять словоформы самостоятельно.
5.2.1.3. Дизайн и юзабилити

Юзабилити — это удобство использования чего-либо. В рам-
ках обсуждаемых проблем, под этим термином подразумевается
200
удобство использования сайта. Сайт создается для пользовате-
ля и должен быть максимально удобным ему. Существуют
определенные общепринятые стандарты и нормы юзабилити,
которые выработаны сообществом пользователей. Вот неко-
торые из них, которые могут быть применимы для большин-
ства сайтов:
— сайт должен иметь основное меню, которое обычно
располагается слева и сверху страницы, обязательно в замет-
ном месте. Ссылки пунктов меню должны быть текстовыми,
а не графическими;
— если страница занимает больше одного экрана, то ре-
комендуется использовать дополнительное меню, которое
дублирует ссылки на разделы сайта и располагается внизу
страницы;
— в случае сложной структуры сайта полезно использо-
вать иерархическое меню («хлебные крошки»), которое пока-
зывает иерархию разделов и местоположение пользователя на
сайте. В качестве разделителя разделов рекомендуется ис-
пользовать символ «>». Например:
Рыбалка >Катушки>Мультипликаторные>Daiwa
— для больших сайтов, где структура может быть четы-
рех или пятикликовой. Желательно наличие поля поиска
информации на сайте. Оптимально располагать в правом
верхнем углу страницы, цвет поля — белый, ширина — по-
рядка 30 символов;
— логотип компании лучше располагать в верхнем левом
углу страницы, иметь размеры порядка 80 × 68 пикселей и
ссылающийся на главную страницу сайта.
Основой дизайнерского решения структуры сайта явля-
ется «Принцип трех кликов». Принцип гласит: любой документ
с сайта должен быть доступен за три щелчка. Преимущества
данной структуры несомненны:
— удобна для пользователей;
— позволяет поисковым роботам быстро и полно индек-
сировать сайт.
По возможности необходимо приводить к такой структу-
ре любой оптимизируемый сайт.
201
5.2.1.4.Фавикон
Фавикон (favicon) представляет собой маленькое изоб-
ражение (как правило, 16 × 16 пикселей), файл которого имеет
расширение *.ico. Фавикон отображается на вкладке и в за-
кладках.
Существует возможность скачать готовый фавикон из
специализированного каталога, однако, установка уникального
фавикона вместо стандартной иконки отвечает современным
требованиям к внутренней оптимизации сайта и дополнитель-
но положительно оценивается.
Создать фавикон можно либо в специализированной бес-
платной программе IcoFX, либо в онлайн редакторе, например,
на сайте www.favicon.сс.
Рис. 172
Для внутренней оптимизации сайта требуется соблюдать
следующие правила установки фавикона:
— файл должен называться favicon, и иметь расшире-
ние .ico;
— файл должен быть загружен в корневую папку веб-
сайта;
— на всех страницах сайта внутри тега <head> прописыва-
ется обращение к фавикону.
<html>
<head>
<link rel="shortcut icon" href="favicon.ico"
type="image/x-icon">
202
</head>
<body>
...
</body>
</html>
Фавикон сегодня есть у большинства сайтов, так как счи-
тается, что его наличие делает сайт более заметным в поиско-
вой выдаче браузера и, тем самым, увеличивает количество
переходов на сайт.
5.2.2. Текстовое оформление веб-страниц
5.2.2.1. Создание правильного контента

Оптимизация контента — это главная составляющая
внутренней оптимизации сайта. При этом разработчику при-
ходится решать нетривиальную двуединую задачу. С одной
стороны, требуется удовлетворить требованиям роботов поис-
ковых систем с тем, чтобы занять более высокое место в ре-
зультатах поисковой выборки, а с другой, сделать так, чтобы
все странички сайта отвечали на запросы посетителей. И не
просто отвечали, а предоставляли ему новую или уникальную
информацию. Если пользователь не получит удовлетворяюще-
го ответа на свой запрос, то весьма быстро покинет сайт и
уйдет к конкурентам.
Таким образом, под термином релевантность страницы
понимается тонкая грань между удовлетворением требований
поисковых систем и реальных пользователей.
В силу этого, задача оптимизации контента декомпози-
руется на ряд частных задач:
— создание уникального и полезного контекста;
— формирования требуемого объема текста на странице;
— использование ключевых слов;
— выбор плотности ключевых слов;
— правильное расположение ключевых слов;
— стилистическое оформление текста;
— формирование тега title;
— включение ключевых слов в текст ссылок;
— изображения и использование тега alt.
203
Контент для своего сайта лучше писать самому, а не
нанимать для этого копирайтера. Для этого есть несколько
причин:
— копирайтер не является специалистом в той области,
которой посвящён сайт, и это будет заметно по количеству
«воды» и банальных советов в текстах;
— копирайтер не является владельцем сайта, и не будет
тратить усилия на то, чтобы текст получился действительно
качественным (в смысле перечисленных выше задач) и доста-
точно объемным;
— то, что сегодня называют «копирайтингом», на самом
деле в 95 % случаев является рерайтингом — результатом
скрещивания между собой нескольких статей на заданную тему.
Говорить об уникальности такого контента не приходится.
5.2.2.2. Объем текста на странице

Поисковым системам нравятся сайты с большим инфор-
мационным содержанием. Поэтому полезно стремиться к уве-
личению текстового наполнения ресурса.
Анализ высокочастотных запросов обычно показывает,
что пользователь ищет ответы на счетное число конкретных
вопросов. Желание ответить на все вопросы приводит к стре-
мительному росту контента сайта. Однако, так как поисковые
системы индексируют до 100 кб текста на странице, будет
правильным написать не один, а несколько текстов так, чтобы
каждая страница сайта отвечала на один из возможных высо-
кочастотных запросов и содержала текст объемом от 500 до
1000 слов. Главное, чтобы пользователь нашел ответ на свой
вопрос и не ушел на сайт конкурентов.
Кроме того, в тексте большего объема появляется воз-
можность использовать редкие фразы, соответствующие низ-
кочастотным запросам пользователей, а, следовательно,
получить дополнительный приток посетителей.
5.2.2.3. Число ключевых слов на странице

Ключевые слова в тексте страницы обязательно должны
встречаться несколько раз.
Если в тексте используются ключевые фразы, то наилуч-
шие результаты наблюдаются, если фраза встречается в тексте
204
несколько раз целиком, а кроме того, в тексте используются
отдельные слова из фразы. При этом желательно, чтобы суще-
ствовало некоторое различие (разбалансировка) между числом
вхождений каждого из слов, составляющих фразу. Это так
называемая разбалансировка ключевых слов, крайне полезна.
5.2.2.4. Расположение
ключевых слов на странице
Чем ближе ключевая фраза или слово к началу текста,
тем весомее они выглядят для поисковой системы.
Правило короткое и простое, но стремление его выпол-
нить очень часто ведет к тому, что текст страницы становится
нечитабельным. Поэтому, составление текста страницы сайта
далеко не простая и требует компромисса между требования-
ми поисковых систем и литературным текстом.
5.2.2.5. Тег title

Тег title — определяет имя всего документа. Данный элемент
обязателен для любого HTML-документа и может быть указан не
более одного раза.
<html>
<head>
<title>Тег title: Языкразметки HTML</title>
</head>
<body>
...
</body>
</html>
Тегу title поисковые системы придают очень большое
значение, и поэтому в него нужно обязательно вставлять клю-
чевые слова или фразы.
В выдаче поисковой системы ссылка на ресурс (сниппет)
содержит текст именно тега title. Получается, что этот тег
является настоящей визитной карточкой страницы. Это опре-
деляет необходимость внимательно отнестись к оформлению
тега title, сделать его максимально информативным и привле-
кательным, ведь именно он помогает привлечь заинтересо-
ванных посетителей на сайт.
Примерное количество символов, которое попадает в вы-
дачу поисковой системы из тега title, колеблется от 50 до 80,
205
поэтому размер заголовка желательно ограничить этой длин-
ной. По другим сведениям Yandex учитывает первые 15 слов в
title, а Google — 12.
В любом случае рекомендуется ориентироваться на сле-
дующие правила:
— заголовок должен соответствовать содержимому
страницы — привлекать, но не обманывать;
— включая в заголовок страницы ключевые слова или
фразы необходимо располагать их поближе к началу описания;
— чтобы сэкономить место в теге title, нельзя использо-
вать стоп-слова (символы = / ! ? * » : <> | + _ );
— каждая страница сайта должна иметь свой уникаль-
ный заголовок, иначе поисковые машины могут наказать сайт
фильтром;
— при формировании заголовка нельзя допустить пол-
ного его совпадения с конкурентными интернет-ресурсами;
— если сайт продвигается в конкретном регионе, то за-
головок должен содержать геотопоним (название города).
5.2.2.6. Ключевые слова в тексте ссылок

Так как отдельные страницы сайта соответствуют от-
дельным вопросам пользователей в рамках высокочастотных
запросов, то перекрестные ссылки между страницами просто
необходимы.
Использование ключевых слов в тексте исходящих ссы-
лок со страниц сайта добавляет некоторое преимущество при
ранжировании.
<html>
<head>
...
</head
<body>
<a href="http://...">текст ссылки</a>
</body>
</html>
Использовать это правило следует и для ссылок на внеш-

ние сайты Интернета.
206
5.2.2.7. Изображения и тег alt
С целью улучшения восприятия текста его сопровождают
иллюстрациями и, следовательно, правильная подготовка
изображений становиться важной частью внутренней оптими-
зации страниц сайта. Можно выделить следующие основные
требования к используемым изображениям:
Уникальность.
Поисковики ценят оригинальные изображения. Для
внутренней оптимизации сайта можно сделать «уникализа-
цию» иллюстрационного материала путем добавления фона
или надписи, изменения его размера или цветовой гаммы и,
наконец, объединения нескольких изображений в одно.
Формат.
Обычно для иллюстраций используются следующие гра-
фические форматы:
— gif применяют для изображений с небольшим числом
цветов (к примеру, для логотипов);
— jpg используют для изображений с детализацией, без
применения прозрачности (к примеру, для природных пейзажей);
— png применяют для изображений, использование ко-
торых требует использование прозрачного фона (например,
при наложении картинок друг на друга).
Чаще всего используется формат jpg.
Размер.
Как правило, размер изображения тесно связан с его ка-
чеством. Надо помнить, что эти два параметра влияют на ско-
рость загрузки страницы сайта и количество занятого у
хостинга пространства. Для оптимизации изображений удобно
пользоваться графическим редактором Photoshop, который
имеет специальный режим записи файла «Сохранить для Web».
Данный режим позволяет пользователю выбирать нужный
вариант качества изображения для jpg-формата.
Ширина и высота.
Загружаемое изображение должно быть такого размера,
чтобы оно отображалось на сайте. При вставке изображения на
страницу сайта можно подогнать его размеры используя атри-
буты height (высота) и weigh (ширина), но лучше сделать это
заранее в графическом редакторе (например, Photoshop).
207
Необходимо помнить, что уменьшение изображения не
сильно влияет на его качество, а вот увеличение может сделать
его неприемлемым для использования.
Имя файла.
Название графического файла должно быть кратким
(в 1–2 слова) и отражать её содержание. Рекомендуется писать
имя файла или на английском языке, или на латинице.
Если в имени используется два слова, то рекомендуется
писать их без пробела, соединяя их либо нижним подчеркива-
нием «_», либо дефисом «-». Например, image-optimization.jpg
или optim_risunok.jpg.
Водяные знаки.
Если на картинку наносится логотип или адрес сайта,
чтобы избежать их несанкционированного использования
другими пользователями, лучше наносить их как водяные
знаки. Это не скажется на результатах выдачи.
Атрибуты.
Необходимым элементом HTML кода для изображений
являются alt (альтернативное описание) и title (всплывающая
подсказка). Ранее, когда скорости загрузки сайтов были неве-
лики, многие пользователи отключали в своих браузерах ре-
жим вывода графических изображений и использование тегов
alt и title позволяло понять смысл пропущенных иллюстраций.
Сегодня при индексации страницы значение тега alt поисковые
системы запоминается, но точных данных об использовании
при ранжировании результатов поиска нет. Продвигать сайт
по изображениям практически не реально. В связи с этим счи-
тается, что в тегах необходимо давать описание изображения
длиной до 100 символов. При этом можно и нужно использо-
вать в описании изображений ключевые слова, но очень акку-
ратно, чтобы исключить подозрение на спам.
5.3. Внешние факторы ранжирования
5.3.1 Для чего используется

учет внешних ссылок на сайт
При ранжировании сайта внутренним факторам, которые
находятся под контролем разработчика, отводится небольшое
значение. Это связано с невозможностью поисковой системы
208
отличить качественный сайт от сайта, страницы которого не
несут никакого смысла, но специально «заточены» под нужную
ключевую фразу.
В силу этого, за основной фактор ранжирования принят
анализ внешних ссылок на сайт. Данный фактор можно счи-
тать объективным, так как он неподконтролен разработчику.
Считается, что больше внешних ссылок на сайт, тем
больший интерес он вызывает у посетителей или его контекст
не только качественный, но и несет в себе элемент новизны,
который оценили владельцы других сайтов, являющихся зача-
стую прямыми конкурентами. В соответствии с этим критерием
поисковая система придает анализируемому сайту некоторый
вес, определяющий его место при ранжировании.
Следовательно, имеется два важных фактора, влияющих
на результат сортировки сайтов, отбираемых поисковой си-
стемой в ответ на запрос пользователя. Это степень соответ-
ствия контекста страницы теме запроса пользователя —
релевантность страницы и число (с учетом качества) внешних
ссылок к ней, которое называют ссылочной цитируемостью,
ссылочной популярностью или индексом цитирования.
5.3.2. Важность ссылок (индекс цитируемости)

Одно время поисковые системы осуществляли простой
подсчет количества ссылок. Это привело к тому, что разработ-
чики стали активно обмениваться ссылками, не обращая вни-
мания на тематику сайтов, с которых они приходят. А ведь
очень важно насколько авторитетен и как долго существует
сайт, с которого пришла ссылка. Например, вес ссылки, которая
пришла с сайта, расположенного на платном хостинге второго
уровня, должен быть выше, чем у ссылки с сайта, базирующе-
гося на бесплатном хостинге третьего уровня.
В поисковых системах для учета перечисленных факто-
ров вводится понятие индекс цитирования (ИЦ), который пред-
ставляет собой некоторый числовой показатель популярности
сайта. Для подсчета величины индекса цитирования каждая
поисковая система использует свой алгоритм. Например, Ян-
декс оценивает только ссылки, идущие с сайтов однотипной
тематики. В результате они перешли от оценки простого ИЦ
209
к более конкретному, получившему название тематический
индекс цитирования (ТИЦ).
Многие поисковые системы постепенно отошли от ис-
пользования ИЦ и стали использовать взвешенный индекс
цитирования. Данный показатель оценивает популярность
данной страницы относительно других страниц в Интернете.
5.3.3. Ссылочный текст

Ссылочный текст — это текст, отображающийся на стра-
нице и используемый для перехода на новую страницу. Нали-
чие ключевых слов в ссылочном тексте положительно
оценивается поисковой системой, в смысле соответствия поис-
ковому запросу.
5.3.4. Релевантность ссылающихся страниц

Ссылка с сайта аналогичной тематики будет оцениваться
поисковой системой гораздо выше, чем ссылка с сайта иной
тематики. Ссылка с тематически близкого сайта рассматрива-
ется как показатель качества контента Вашего сайта, на кото-
рый ссылаются даже конкуренты. При закупке ссылок этот
фактор обязательно нужно учитывать.
5.3.5. Google PageRank

Учет количества и качества ссылок на сайты позволяет
осуществить их ссылочное ранжирование, то есть оценить
авторитетность среди сетевого сообщества.
Компания Google первая запатентовала систему учета
внешних ссылок — алгоритм получил название PageRank (ранг
страницы).
По сути, PR представляет собой автоматизированный ва-
риант оценки индекса цитируемости сайта и его авторитетно-
сти. PR рассчитывается для каждой веб-страницы отдельно и
определяется цитируемостью ссылающихся на нее страниц.
Значение PR для любой веб-страницы колеблется в диапазоне
от 0 до 10.
С одной стороны, PageRank позволяет оценить уровень
раскрученности сайта, что очень важно при обмене ссылками.
PR 4 ÷ 5 — типичный PR для сайтов средней раскрученности.
210
PR 6 — очень хорошо раскрученный сайт. PR 7 — величина, прак-
тически недостижимая для обычного вебмастера. Показатели
PR 8, 9, 10 — встречаются только у сайтов крупных компаний.
С другой стороны, PR дает оценку уровня конкуренции по
поисковому запросу. К примеру, если в выдаче поисковой си-
стемы стоят сайты с PR 6–7, то сайт с PR 4 имеет очень мало
шансов подняться в ТОП.
Для вычисления ранга страницы используется следую-
щий алгоритм:
1. Берется матрица всех ссылок всех страниц Интернета
(матрица гигантских размеров).
2. Сначала всем страницам присваивается равный вес
(ранг).
3. Начиная с верхнего левого угла этой матрицы, пере-
считывается вес страниц и ссылок по следующим правилам:
— если на страницу ссылается много страниц, то ее ранг
повышается с учетом веса каждой входящей ссылки;
— если со страницы уходят несколько ссылок, то ранг
страницы делится между этими ссылками.
Завершив первый цикл пересчета матрицы связей необ-
ходимо вернуться к началу и пересчитать все ранги еще раз.
Доказано, что процесс пересчета матрицы сходится и доста-
точно пересчитать матрицу всего несколько раз, чтобы ранги
страниц стали стабильны.
Технически задача такого пересчета очень сложна. По-
этому Google пересчитывает свой индекс не часто.
5.3.6. ТИЦ и ВИЦ в Yandex

ТИЦ — тематический индекс цитирования — рассчиты-
вается для сайта в целом и показывает авторитетность ресурса
относительно других, тематически близких ресурсов. ТИЦ
используется Yandex для оценки русскоязычных сайтов.
ТИЦ зависит от количества и качества внешних ссылок,
ведущих на сайт — он равен суммарному весу всех внешних
ссылок на сайт. ТИЦ можно использовать для оценки уровня
конкуренции по определенному поисковому запросу. Чтобы
поднять ТИЦ, необходимо увеличить сумму весов ссылок на
сайт.
211
Взвешенный индекс цитирования — ВИЦ является ана-
логом Google PageRank и используется Yandex для оценки
«важности» конкретной страницы. Значения ВИЦ известны
только Yandex и нигде не публикуются.
5.4. Ошибки и «черные» методы SEO
5.4.1. Распространенные ошибки

Графический заголовок.
Не следует использовать в верхней части страницы сайта
графический заголовок (шапку), то есть картинку во всю ши-
рину страницы. Как правило, такой заголовок содержит лого-
тип компании, её название и некоторую другую информацию.
Это классическая ошибка погони за красочным дизайном.
Верхняя часть страницы очень ценное место, где нужно раз-
мещать наиболее важные ключевые слова и фразы, а в случае
использования графического заголовка — это место пропадает
впустую.
Лучше всего использовать комбинированный вариант —
графический логотип вверху страницы присутствует, но зани-
мает лишь часть ее ширины. На оставшейся части размещается
текстовый заголовок с ключевыми словами.
Графическое навигационное меню.
Ситуация схожа с предыдущим пунктом — внутренние
ссылки на сайте должны также содержать ключевые слова, это
даёт дополнительное преимущество при ранжировании. Одна-
ко, если навигационное меню в целях большей привлекатель-
ности выполнено в виде графики или с использованием Flash-
технологий, то поисковые роботы не смогут распознать текст
ссылок.
Если же отказаться от графического меню нет возможно-
сти, то нужно снабдить все картинки тегами Аlt или дублиру-
ющим текстовым меню.
Навигации с помощью скриптов.
Аналогичная ситуация возникает и при использовании в
меню сайта java-скриптов. Много лет разработчики поисковых
систем обещают научить поисковых роботов читать и пони-
мать используемые на страницах сайтов скрипты, но полной
уверенности в адекватности этого процесса нет. Поэтому,
212
ссылка, заданная через скрипт может оказаться недоступной
для поисковой системы и поисковый робот по ней не пройдет.
В случаях использования скриптов следует обязательно
продублировать ссылки обычным способом.
Скрытый текст.
Использование скрытого текста — скорее не ошибка,
а преднамеренный обман для ускорения индексации ресурса,
за счет «накачки» страницу нужными ключевыми словами без
нарушения логики и её дизайна. Для этого может применяться
один из следующих методов:
— минимальный размер шрифта (менее 1 мм или ноль).
Причем, текст может быть оформлен как заголовок, что прида-
ёт ему большую весомость;
— цвет текста совпадает с цветом фона;
— текст скрывается посредством стилей CSS, например,
сдвигается за пределы видимости для посетителя страницы;
— текст скрывается под изображением.
Такой текст невидим для посетителей, однако прекрасно
читается поисковыми роботами, и воспринимается ими как
попытка обмана.
Однопиксельные ссылки.
Использование графических изображений-ссылок разме-
ром 1 × 1 пиксель (то есть фактически невидимых посетителю)
также воспринимается поисковыми системами как обман.
Использование двух последних «методов оптимизации»,
обычно, приводит, в лучшем случае, к понижению сайта в
рейтинге поисковой выдачи, а, в худшем, к исключению из
индекса (базы данных) поисковой системы или, как принято
говорить, к бану.
Правда есть исключения. Не наказывают за скрытый
текст используемый для улучшения юзабилити сайта — скры-
тый блок выпадающего меню, всплывающие подсказки или
анонсы новостей. Так как в данном случае цель — не манипу-
ляция с позицией сайта, а удобство пользователей.
Аналогичная ситуация возникает и при использовании
однопиксельных счётчиков посещаемости сайта, поскольку
это технически оправданно, так как не засоряет страницу
ненужной пользователю информацией.
213
5.4.2. Черные технологии
Запрещенные методы продвижения сайтов не рекомен-
дуется применять для раскрутки серьёзных ресурсов, так как
они бесполезны в долгосрочной перспективе. Поисковые си-
стемы без особых проблем раскрывают факты подобного мо-
шенничества.
Однако, если владелец сайта готов пойти на риск для по-
лучения кратковременного эффекта, то он может попробовать
использовать инструменты «черного» SEO, которые могут дать
ему следующие преимущества:
— высокую скорость раскрутки сайта;
— быструю индексацию, которая привлечет к сайту це-
левую аудиторию;
— высокую степень автоматизации, которая позволит из-
бавиться от ошибок, возникающих из-за человеческого фактора;
— возможность в будущем отказаться от «черного» про-
движения, и если сайт не попадается «на горячем», то все по-
лученные результаты пойдут ему на пользу в будущем.
Однако, попытка нарушения правил раскрутки сайтов
требует от разработчика отличного знания рекомендаций
поисковых систем и глубокого понимания алгоритмов работы
поисковых роботов.
И надо помнить, что такая оптимизация отличается вы-
сочайшим риском и множеством негативных тенденций. К ним
необходимо отнести:
— обнаружение факта использования запрещенных спо-
собов оптимизации приводит к следующим наказаниям:
— бан — полное удаление сайта из индекса;
— пессимизация — к удалению из индекса добавляется
искусственное снижение рейтинга;
— песочница — автоматическое ограничение в сфере ин-
дексации и включение правил, характерных для новых сайтов;
— фильтры — позволяют отправлять в черный список
дорвеи и сателлиты, а порой и сами материнские сайты;
— покупка платных ссылок и отзывов, создание дорвеев
и сателлитов требует существенных капиталовложений в
отсутствии каких-либо гарантий положительного результата;
— недолговечность результатов.
214
К методам «черной» раскрутки сайтов относятся:
Клоакинг.
Клоакинг (от англ. cloaking — маскировка) — методов,
когда поисковому роботу и пользователю демонстрируются
разные варианты одной и той же страницы. Один — интерес-
ный, полезный для пользователей, другой — нечитабельный и
разработанный по всем правилам оптимизации для поисковых
роботов. При этом каждый видит только предназначенный ему
текст.
В клоакинге используются следующие подходы:
1. User Agent — самый простой способ. Так как имена ро-
ботов известны, достаточно прописать функцию сравнения
имен, чтобы показывать роботам и пользователям требуемое
содержимое.
2. IP-адрес — самый эффективный способ. Поисковые ро-
боты идентифицируются посредством IP-адресов, а, следова-
тельно, можно написать функцию, позволяющую показывать
роботу и посетителям разное содержимое.
На сегодняшний день клоакинг теряет свою популяр-
ность.
Дорвеи.
Дорвеи (от англ. doorway — входная дверь) — это полно-
ценные одностраничные сайты, часто автоматически сгенери-
рованные, наполненные низкокачественным (чаще вообще
бессмысленным) контентом с высокой плотностью НЧ и
СЧ запросов. Чаще всего эти технические страницы незаметны
для пользователей, но их прекрасно видят поисковые системы
и, воспринимая как уникальный и полезный контент, продви-
гают в ТОП. Собственно, эти сайты выполняют единую функ-
цию — перенаправление пользователя на продвигаемый ресурс.
Современные роботы быстро распознают этот метод и
строго наказывают за его применение.
Метод сателлитов.
Метод сателлитов (от англ. satellite — спутник). Сател-
лит — сайт спутник, который представляет собой полноцен-
ный ресурс. На каждом сателлите размещается ссылка на
основной продвигаемый сайт.
Вся сеть продвигается с целью размещения основного
сайта на первом месте и захвата всех позиций в ТОПе. В случае
215
идеального воплощения этой схемы, конкуренты выталкива-
ются за пределы первой страницы поисковой выдачи.
Метод очень эффективный, но очень трудоемкий, осо-
бенно, если сателлиты создаются не автоматически, а вручную,
а также оптимизируются и заполняются качественным кон-
тентом.
Свопинг.
Свопинг — это скорее не способ продвижения сайта, а за-
прещенный прием рекламы. Метод состоит в том, что контент
сайта, по достижении им необходимых позиций в результатах
поиска, заменяется на принципиально другой. Чаще на казино,
хоум-видео или сайты мошенников.
Ссылочная масса.
Ссылочная масса — популярный способ «черного» SEO. На
внешних ресурсах размещают ссылки на продвигаемый сайт.
Одним из основных методов реализации такого подхода
является линкфарминг (от англ. linkfarm — ферма ссылок) —
создание сети сайтов, которые ссылаются друг на друга. Таким
образом происходит взаимное наращивание ссылочной массы.
Чтобы запустить ферму ссылок необходимо разработать
множество веб-площадок, часто, автоматически сгенерирован-
ных и не имеющих вразумительного содержания. В итоге,
ссылки поисковые роботы воспринимают как ссылочный спам,
так как они размещены на нетематических ресурсах.
С 2019 года сайты, использующие метод ссылочной мас-
сы, не допускаются к вершинам поисковой выдачи.
5.5. Тест
1. Какие из поисковых систем наиболее важны для про-
движения русскоязычных сайтов:
а) Rambler
б) Yahoo
в) Yandex
г) Google
д) Msn
2. При покупке ссылок:
а) Лучше купить много ссылок с второстепенных страниц
б) Лучше купить мало ссылок с главных страниц
в) Лучше использовать оба способа
216
3. Самым лучшим способом увеличения плотности клю-
чевого слова, является:
а) Добавление в текст этого ключевого слова много-
много раз
б) Добавление ключевого слова в атрибуты alt и title всех
картинок и ссылок на странице
в) Вынесение кодов javascripta и css в отдельные файлы
4. Наличие файла robot.txt является:
а) Желательным, но ни необходимым условием
б) Необходимым условием
в) Обязательным только если у вас есть страницы, кото-
рые следует запретить к индексации
5. Что является основой SEO?
а) продвижение в поисковых системах
б) все варианты верны
в) раскрутка в социальных сетях
г) оптимизация контекстной рекламы
6. Что такое семантическое ядро?
а) набор ключевых слов
б) набор лишь высокочастотных запросов
в) ни один из вариантов не является верным
7. В котором из ниже представленных тегов не размеща-
ются ключевые слова?
а) h
б) strong
в) form
8. Что такое внешние ссылки?
а) ссылка из других сайтов на ваш сайт
б) ссылка из сайта на другие интернет ресурсы
в) оба варианта верные
9. В котором из мета тегов размещают ключевые слова?
а) description
б) keywords
в) robots
217
10. Для чего создается файл sitemap.xml?
а) это карта сайта для интернет пользователей
б) для ускорения индексации всех страниц сайта
в) для запрета индексации отдельных папок и файлов
11. Какой является основная цель поисковой оптимизации?
а) вывод сайта на первые позиции поисковой выдачи
б) повышение популярности сайта на других интернет
ресурсах
в) ни один из вариантов не является верным
12. Что значит термин «конверсия»?
а) процент посетителей ставших покупателями
б) процент бэклинков известных Google
в) показатель посещаемости на сайт
г) CTR
13. К чему относится PageRank?
а) к сайту
б) к странице
в) к ссылке
г) к хостингу
14. Что такое релевантность страницы сайта?
а) это авторитетность посадочной страницы
б) это частота запрашиваемость по конкретному ключе-
вому слову
в) это семантическое соответствие поискового запроса
г) это количество внешних ссылок на сайт
15. Robots.txt —
а) позволяет ограничить доступ к сайту для роботов по-
исковых систем
б) помогает в ускорении индексации сайта в поисковых
системах
в) помогает поисковым системам определить уникаль-
ность контента на сайте
16. Тег «Alt» —
а) текстовое описание содержимого графического объекта
б) текст содержания ссылки
в) описание содержание страницы
218
17. Белые методы поисковой оптимизации —
а) методы, которые предусматривают наращивание ссы-
лочной массы только с качественных площадок
б) методы, которые не нарушают правила использования
поисковых систем
в) методы, могут содержать обмен ссылками, но не по-
купка их на биржах
18. Что такое пессимизация сайта?
а) понижение всех параметров сайта: PR, страниц в ин-
дексе и пр.
б) принудительное понижение позиции сайта в выдаче
поисковой системы или отключение его ссылочного ранжиро-
вания
в) постепенное снижение PageRank из-за некачественной
ссылочной массы
19. Что такое поведенческий фактор?
а) факторы, внешних ссылок, на основе анализа которых
поисковая система ранжирует сайт
б) факторы, которые относятся к структуре сайтов и
находятся под контролем веб-мастера
в) это совокупность действий посетителей на опреде-
ленном сайте
г) все варианты верны
20. К «чёрным» методам поисковой оптимизации отно-
сятся…
а) линкбомбинг
б) дорвеи
в) свопинг
г) все варианты верны

1. Напишите определенное количество уникальных ста-
тей со ссылкой внутри на свой сайт и вручную разместите их в
бесплатных статейных каталогах.
2. С помощью популярных блогохостингов попытайтесь
бесплатно продвинуть свой сайт в поисковых системах.
219
3. Найдите в интернете сайты со схожей или близкой к
вашей тематике и договоритесь с вебмастерами произвести
обмен ссылками.
4. Оставьте свою ссылку и получите дополнительный ис-
точник трафика путем добавления комментариев на различ-
ных тематических блогах, форумах.
5. Разместите бесплатно в интернете пресс-релиз, не-
большую новостную статью (500–1000 символов) для разме-
щения в СМИ.
6. Привлеките трафик на продвигаемый сайт из социаль-
ных сетей.
7. Опубликуйте уникальную статью на сайте-доноре с
«вшитыми» ссылками.
Тезаурус
CSS (Cascading Style Sheets — каскадные таблицы сти-
лей) — технология, использующаяся для оформления веб-
страниц с помощью стилей.
Web-дизайн — различные виды проектной деятельности
для формирования этетических и функциональных качеств
сздаваемого web-сайта.
Акцентирование — эо выделение наиболее значимых
элементов на странице.
Балансировка — соотношение и распределение отдель-
ных элементов на общем полотне макета для раномерного
размещения визуальной нагрузки.
Блок в CSS — это элементы, выделяемые абзацами. Блоки
не могут находиться на одной строке с другими блоками.
Блочная верстка — это верстка дивами (div-блоками)
или слоями.
Верстка web-страниц — создание HTML-кода, который
позволяет размещать элементы web-страницы в заданных
местах документа и отображать их в окне браузера согласно
разработанному макету.
Визуализация — комфортное восприятие информации и
перемещения по сайту.
Выравнивание — упорядочение всех компонентов наста-
нице в соответствии с сеткой и сведение всех элементов сайта
к естественным границам для обеспечения унификации раз-
личных элементов дизайна.
Гарнитура шрифта (Type family) — совокупность шриф-
тов, объединенных общими стилевыми признаками.
Градиент — плавный переход от одного цвета к другому.
Кегель — величина шрифта, определяется в пунктах.
Комплектность — полиграфический алфавит.
Контрастирование — визуальное разделение двух или
более элементов дизайна, заключается в визуальной диффе-
ренциации нескольких элементов, расположенных на одном
экране.
Контрастность — отношение толщины соединитель-
ных штрихов к толщине основных штихов знаков.
Модульная сетка — набор аправляющих, вдоль которых
располагаются элементы web-страницы.
221
Навигация сайта — это возможность перехода между его
страницами. Навигационная система позволяет находить тре-
буемую информацию и ориентироваться в разделах сайта.
Насыщенность шрифта — изменение толщины основ-
ных и соединительных штрихов одноименных знаков в разич-
ных начертаниях.
Начертание (Type face) — цветовая насыщенность, про-
порции, контрастность, наклон знаков.
Отступ — пустое пространство от внешнего края границ.
Повторение — эффект использования одних и тех же
графических элементов в различных вариантах.
Пропорции шрифта — показатель изменения ширины
одноименных знаков в начертаниях одной гарнитуры.
Псевдокласс — класс, учитывающий условия при опреде-
лении свойств html-элемента.
«Резиновый» макет — вид макет, основанный на том, что
в качестве единиц измерения выступают проценты.
Селектор — HTML-элемент с определенными заданными
свойствами.
Слой в CSS — набор данных, которые можно накладывать
друг на друга, размещая их на экране по координатам.
Таблица стилей — способ подключения CSS к HTML-
документу.
Тень — элемент дизайн для создания эффекта трехмер-
ности.
Удобство восприятия — визуальная привлекательность
страницы и оптимальная компоновка различных элементов
на ней.
Фиксированый макет — вид макета с жестко заданной
шириной макета.
Цветовая схема — это набор нескольких оттенков, кото-
рые будут использоваться в дизайне.
Цветовой круг — способ представления цветов видимого
спектра в условной форме, обозначающей различные цветовые
модели.
Словарь тегов
A
Тег <A> служит для создания гипертекста (ссылок). Ги-
пертекст позволяет осуществлять мгновенный переход от
одного фрагмента текста к другому. Сам гипертекст поддается
форматированию. Закрывающий парный тег обязателен </A>.
Тег должен содержать либо атрибут name, либо href.
Тег <ABBR> — тег логического форматирования текста.
Тег используется для аббревиатуры. Обязателен парный ему
тег </ABBR>.
Тег <ACRONYM> — тег логического форматирования тек-
ста. Тег идентифицирует акроним. Обязателен парный ему тег
</ACRONYM>.
Тег <ADDRESS>. Тег <ADDRESS> применяется для иден-
тификации автора документа и указания адреса автора. Сюда
же обычно помещаются и сведения об авторских правах, а
также дата создания и последней модификации документа. Тег
применяется обычно вначале или в конце документа. Текст,
заключенный между тегами <address></address> обычно
отображается курсивом. Обязателен парный ему тег
</ADDRESS>.
Тег <AREA>. Элемент AREA определяет фигуру и коорди-
наты областей в MAP. Необязателен закрывающий тег
</AREA>.
B
Тег <B> — тег физического форматирования текста. Тег
<B> создает жирный текст. Закрывающий парный тег обязате-
лен </B>. Тег может содержать атрибут title (всплывающая
подсказка).
Тег <BIG> — тег физического форматирования текста.
Тег <BIG> выводит более крупный текст. Закрывающий пар-
ный тег обязателен </BIG>. Тег может содержать атрибут title
(всплывающая подсказка).
Тег <BLOCKQUOTE> — тег форматирования текста. Тег
<BLOCKQUOTE> предназначен для включения в документ
длинных цитат, cоздавая отступы с обеих сторон текста и отде-
ляясь от остального текста пустыми строками. Закрывающий
223
парный тег обязателен </BLOCKQUOTE>. Тег может содержать
атрибут title (всплывающая подсказка).
Тег <BODY> — тег форматирования текста. Тег <BODY>
определяет видимую часть документа. В этом разделе распола-
гается вся содержательная часть документа (текст статьи,
фотографии, формы для заполнения, другие объекты). Тег
имее ряд необязательных атрибутов: bgcolor, background, text,
link, vlink, alink.
Атрибут bgproperties=fixed. Фоновое изображение про-
кручиваться не будет, т. е. текст будет двигаться при нажатии
PageDown, а фон — нет. Данный параметр поддерживается
только Internet Explorer. Обязателен парный ему тег </BODY>.
Тег <BR> — тег форматирования текста. Тег <BR> (BReak
line) вставляет перевод строки. Тег <BR> не требует парного
закрывающего тега.
Тег <BUTTON> — элемент управления. Тег <BUTTON> со-
здает кнопку с рисунком или с другими встроенными элемен-
тами. Закрывающий тег </BUTTON> требуется.
C
Тег <CENTER>. Тег <CENTER> предназначен для горизон-
тального выравнивания ВСЕХ элементов посередине окна
браузера. CENTER — это тег уровня блока, поэтому им можно
центрировать, например, таблицы, тексты. Закрывающий
парный тег обязателен </CENTER>.
Тег <CITE> — тег логического форматирования текста.
Тег <CITE> используется для цитат, названий книг. Обычно
наклонный текст. Закрывающий парный тег обязателен
</CITE>.
Тег <CODE> — тег логического форматирования текста.
Тег <CODE> отмечает текст как небольшой фрагмент про-
граммного кода. Обычно отображается моноширинным шриф-
том. Закрывающий парный тег обязателен </CODE>.
D
Тег <DD>. Тег <DD> (Definition Description) является опи-
санием списка определений. Закрывающий парный тег необя-
зателен.
224
Тег <DFN> — тег логического форматирования текста.
Тег <DFN> отмечает текст как определение (DeFeNition). Этим
тегом можно отметить термин, впервые встречающийся в
документе. Закрывающий парный тег обязателен </DFN>.
Атрибут title — всплывающая подсказка.
Тег <DL>. Тег <DL> (Definition List) служит для создания
списка определений. Списки состоят из двух частей: определе-
ния (DT) и описания (DD). Закрывающий парный тег необяза-
телен. Атрибут title — всплывающая подсказка.
Тег <DT>. Тег <DT> (Definition Term) является определе-
нием списка определений. Закрывающий парный тег необяза-
телен.
E
Тег <EM> — тег логического форматирования текста. Тег
<EM> используется для выделения, подчеркивания важных
фрагментов текста курсивом (наклонный текст). Происходит
от слова emphasis — акцент. Аналогичен тегу I. Закрывающий
парный тег обязателен </EM>.
F
Тег <FIELDSET> — элемент управления. Тег <FIELDSET>
рисует рамку вокруг текста и других объектов, содержащихся в
контейнере. Закрывающий парный тег обязателен
</FIELDSET>.
Тег <FONT> — тег форматирования текста. Тег <FONT>
определяет выводимый шрифт, его цвет и размер. Закрываю-
щий парный тег обязателен </FONT>. Атрибуты: color, face,
size. Атрибуты можно объединять.
H
Тег <Hx> — тег форматирования текста. Тег <Hx> служит
для создания заголовка. Всего существует 6 видов заголов-
ков — от H1 до H6. Тегу <H1> соответствует самый большой
заголовок, тегу <H6> — самый маленький. Закрывающий пар-
ный тег обязателен </Hx>. Атрибуты: align (= center | left |
right), title (всплывающая подсказка).
225
Тег <HEAD> — тег форматирования текста. Тег <HEAD>
определяет место, где помещается различная информация, не
отображаемая в теле документа. Здесь располагается тег
названия документа и теги для поисковых машин. Закрываю-
щий парный тег обязателен </HEAD>.
Тег <HR> — тег форматирования текста. Тег <HR> добав-
ляет в HTML документ горизонтальную линию. Перед и после
линии помещается пустая строка. Закрывающий парный тег
необязателен. Атрибуты: size, width, noshade, color.
Тег <HTML> — тег форматирования текста. Тег <HTML>
указывает программе просмотра страниц, что это HTML доку-
мент. Закрывающий парный тег обязателен </HTML>.
I
Тег <I> — тег физического форматирования текста. Тег
<I> создает наклонный текст. Закрывающий парный тег обяза-
телен </I>.
Тег <IFRAME> — категория «фреймы». Тег <IFRAME> со-
здает плавающее окно. Закрывающий парный тег обязателен
</IFRAME>. Атрибуты: frameborder, height, name, scrolling, src,
width.
Тег <IMG> — категория «графика». Тег <IMG> служит для
внедрения графики на страницы. На данный момент поддер-
живаются форматы файлов GIF, JPG, JPEG, PNG. Закрывающий
парный тег обязателен </IMG>. Атрибуты: src, align, alt, border,
ismap, height, hspace, usemap, vspace, width.
Тег <INPUT> — категория «графика». Тег <IINPUT> пред-
назначен для создания элементов управления и всегда исполь-
зуется совместно с атрибутом TYPE. Закрывающий парный тег
необязателен. Атрибуты: title, value, size, maxlength, checked,
type, style.
K
Тег <KBD> — тег логического форматирования текста.
Тег <KBD> отмечает текст, вводимый пользователем с клавиа-
туры. Отображается моноширинным шрифтом. От английского
keyboard — клавиатура. Закрывающий парный тег обязателен
</KBD>.
226
L
Тег <LEGEND>. Тег <LEGEND> выводит надпись для тега
FIELDSET и должен быть в нем первым элементом. Закрываю-
щий парный тег обязателен </LEGEND>.
Тег <LI>. Тег <LI> (List Item) служит для обозначения эле-
мента (строки) списка. Используется в нумерованных(OL) и
ненумерованных(UL) списках. Закрывающий парный тег не-
обязателен. Тег <LINK>. Тег <LINK> (List Item) определяет
ссылку. В отличие от тега <A>, тег <LINK> может располагаться
только в части заголовка HEAD документа. Информация, ука-
занная в элементе LINK, может по-разному обрабатываться
браузерами, в зависимости от указанных атрибутов. Закрыва-
ющий парный тег необязателен.
M
Тег <MAP>. Элемент MAP определяет коллекцию чув-
ствительных областей в графическом изображении, при этом
различные участки изображения могут быть ссылками на
различные ресурсы. Чувствительные области задаются тегами
AREA. Закрывающий парный тег обязателен </MAP>.
Тег <MARQUEE> — тег форматирования текста. Тег
<MARQUEE> заставляет текст не мигать, а прокручиваться,
либо перемещаться из стороны в сторону. Закрывающий пар-
ный тег обязателен </MARQUEE>. Атрибуты: BEHAVIOR
(=ALTERNATE | SCROLL | SLIDE), DIRECTION (=DOWN | LEFT |
RIGHT | UP).
Тег <MENU>. Тег <MENU> служит для создания ненуме-
рованного списка. Данный тег является устаревшим и оставлен
для совместимости со старыми браузерами. Закрывающий
парный тег обязателен </MENU>. Атрибуты: title (всплываю-
щая подсказка), disabled (= 1, то текст будет выведен серым
цветом).
Тег <META> — тег форматирования документа. Специ-
альная группа инструкций <META>, предназначена в основном
для описания и индексирования документа поисковыми ма-
шинами. Все теги META не видны при просмотре документа.
Команды <META> вносятся в "шапку" гипертекстового доку-
мента — внутри блока <HEAD>...</HEAD>. Закрывающий пар-
ный тег запрещен.
227
N
Тег <NOBR> — тег форматирования текста. Тег <NOBR>
запрещает перевод строки. Бывают случаи, когда возникает
необходимость в операции противоположного назначения —
запретить перевод строки. Текст, заключенный между тегами,
будет гарантированно располагаться в одной строке без
переноса на другую. Длинная строка не уместится на экране,
и для ее просмотра придется использовать горизонтальную
полосу прокрутки. Закрывающий парный тег обязателен
</NOBR>.
O
Тег <OL>. Тег <OL> (Ordered List) служит для создания
нумерованного списка. Допускается вложение нумерованного
списка в списки другого вида. Закрывающий парный тег обя-
зателен </OL>. Атрибуты: type (тип маркера), start (начальное
значение для нумерованного списка при использовании араб-
ских цифр), title (всплывающая подсказка).
Тег <OPTGROUP> — элемент управления. Тег <OPTGROUP>
позволяет группировать элементы в SELECT в логические груп-
пы. Закрывающий парный тег обязателен </OPTGROUP>. Атри-
бут label задает имя для заданной группы.
Тег <OPTION> — элемент управления. Каждый элемент
SELECT должен содержать хотя бы один или более элементов
OPTION, с помощью которого создаются строки списков. За-
крывающий парный тег необязателен. Атрибут selected —
индикатор, что данная строка является выбранной по умолча-
нию. Если данный индикатор отсутствует, то такой строкой
является первый элемент.
P
Тег <P> — тег форматирования текста. Тег <P> создает
новый параграф. Два или более тега <P>, идущих подряд, заме-
няются одним. Закрывающий парный тег необязателен. Атри-
буты: align (= left | right | center | justify), title (всплывающая
подсказка).
228
Тег <PRE> — тег форматирования текста. Тег <PRE> об-
рамляет предварительно отформатированный текст. Префор-
матированный текст отображается моношириным шрифтом.
Получается как бы текстовая вставка в html. Закрывающий
парный тег обязателен </PRE>.
S
Тег <S> — тег физического форматирования текста. Тег
<S> указывает, что текст должен быть зачеркнут. Закрываю-
щий парный тег обязателен </S>.
Тег <SAMP> — тег логического форматирования текста.
Тег <SAMP> отмечает текст как образец (sample). Используется
для отметки текста, выдаваемого программами. Отображается
моноширинным шрифтом. Закрывающий парный тег обязате-
лен </SAMP>.
Тег <SCRIPT>. Элемент SCRIPT используется для вклю-
чения небольших программ — скриптов (JavaScript, VBScript).
При помощи скриптов можно достаточно легко создавать
интерактивные страницы. Если браузер не поддерживает
сценарии, то содержимое контейнера SCRIPT может быть
выведено на экран. Чтобы этого не случилось, весь текст
программы вкладывают в комментарий, а поясняющий текст
помещают внутрь контейнера NOSCRIPT. Обратите также вни-
мание на то, что закрывающему тегу комментария предше-
ствует комментарий на языке JavaScript (//). Это делается для
того, чтобы интерпретатор JavaScript не выдал ошибки, дойдя
до символов «чужеродной» конструкции HTML. Закрывающий
парный тег обязателен </SCRIPT>. Атрибуты: language (опре-
деляет язык скрипта = JScript | javascript | vbs | vbscript | XML),
src (содержит ссылку на внешний файл, содержащий скрипт).
Тег <SELECT> — элемент управления. Тег <SELECT> созда-
ет список или выпадающий список. Каждый элемент списка
описывается тегом Option. Закрывающий парный тег обязате-
лен </SELECT>. Атрибут size — число отображаемых элементов.
Тег <SMALL> — тег физического форматирования текста.
Тег <SMALL> выводит более мелкий текст. Закрывающий пар-
ный тег обязателен </SMALL>. Атрибут title показывает текст в
виде всплывающей подсказки.
229
Тег <SPAN>. Элемент SPAN определяет контейнер для
внутреннего текста. Данный элемент предназначен для ис-
пользования в CSS. Закрывающий парный тег обязателен
</SPAN>. Атрибут UNSELECTABLE запрещает или разрешает
выделять текст в данном элементе (on — запрещает, off —
разрешает).
Тег <STRONG> — тег логического форматирования тек-
ста. Тег <STRONG> используется для выделения из текста слова
(жирный текст). Происходит от слова strong emphasis — силь-
ный акцент. Аналогичен тегу B. Закрывающий парный тег
обязателен </STRONG>.
Тег <SUB> — тег физического форматирования текста.
Тег <SUB> выводит текст как нижний индекс. Закрывающий
парный тег обязателен </SUB>.
Тег <SUP> — тег физического форматирования текста.
Тег <SUP> выводит текст как верхний индекс. Закрывающий
парный тег обязателен </SUP>.
T
Тег <TABLE>. Тег <TABLE> создает таблицу. Все прочие
элементы таблицы должны быть вложенными в него. Допуска-
ется также вложение таблиц одна в другую, т.е. содержимым
ячейки может быть другая таблица. Закрывающий парный тег
обязателен </TABLE>. Атрибуты: align (=center | left | right),
background, bgcolor, border, bordercolor, cellspacing, cellpadding,
rules (= all | cols | groups | none | rows), summary, title, width.
Тег <TD>. Тег <TD> определяет отдельную ячейку в таб-
лице. Закрывающий парный тег необязателен. Атрибуты:
height, align, valign, colspan, rowspan, title.
Тег <TH>. Тег <TH> определяет заголовок для столбца в
таблице. Обычно, выделяются жирным шрифтом. Закрываю-
щий парный тег обязателен </TH>. Атрибуты: bgcolor,
bordercolor, height, align, valign, colspan, rowspan, title.
Тег <TITLE> — тег форматирования документа. Элемент
TITLE не является частью отображаемого текста. Он может
отображаться, например, как заголовок страницы или назва-
ние окна. Только один TITLE может быть в документе. Элемент
TITLE должен использоваться для идентификации содержимо-
го документа. Поскольку пользователи часто обращаются
230
к документам вне контекста, авторы должны предоставлять
осмысленные заголовки. Название должно быть не более
40 символов, т. к. название, привышающее размер в 40 симво-
лов непомещается в строку заголовка окна браузера. Закрыва-
ющий парный тег обязателен </TITLE>.
Тег <TR>. Тег <TR> определяет строку в таблице. Закры-
вающий парный тег необязателен. Атрибуты: align (= left | rigth
| center), valign (= top | middle | bottom).
Тег <TT> — тег физического форматирования текста. Тег
<TT> создает текст, имитирующий стиль печатной машинки.
Закрывающий парный тег обязателен </TT>.
U
Тег <U> — тег физического форматирования текста. Тег
<U> указывает, что текст должен быть подчеркнут. Закрываю-
щий парный тег обязателен </U>.
Тег <UL>. Тег <UL> (Unordered List) служит для создания
ненумерованного списка. Допускается вложение ненумерован-
ного списка в списки другого вида. Закрывающий парный тег
обязателен </UL>. Атрибуты: type (= disk | circle | square), title.
Литература
1. Адамс Д. Р. Основы работы с XHTML и CSS / Адамс Д. Р.,
Флойд К. С. — М.: Интернет-Университет Информационных
Технологий (ИНТУИТ), 2016. — 567 c.
2. Ашманов И., Иванов А. Оптимизация и продвижение
сайтов в поисковых системах (+CD). — З-е изд. — СПб.: Питер,
2011. — 464 с.
3. Боде М. Раскрутка: секреты эффективного продвиже-
ния сайтов / Боде М., Бабаев А., Евдокимов Н. [и др.]. — СПб.:
Питер, 2013. — 215 с.
4. Дакетт, Джон. HTML и CSS. Разработка и дизайн веб-
сайтов (+ CD-ROM) / Джон Дакетт. — М.: Эксмо, 2013. — 480 c.
5. Дебольт В. HTML и CSS. Совместное использование /
Дебольт, Вирджиния. — М.: НТ Пресс, 2016. — 512 c.
6. Информационные технологии. HTML и XHTML: учебное
пособие / А. И. Костюк [и др.]. — Таганрог: Южный федераль-
ный университет, 2015. — 131 c.
7. Кириченко А. В. Динамические сайты на HTML, CSS,
Javascript И Bootstrap. Практика, практика и только практика /
Кириченко А. В., Дубовик Е. В. — СПб.: Наука и Техника, 2018. —
272 c.
8. Круг С. Веб-дизайн: книга Стива Круга или «не застав-
ляйте меня думать!» — пер. с англ. — СПб: Символ-Плюс,
2005. — 200 с.
9. Кэмпбел, Марк. Строим Web-сайты.: пер. с англ. яз. /
[пер. с англ. Александр Горлач, Александр Климович]. — М.:
Изд-во ТРИУМФ, 2006. — 480 с.
10. Лобан А. В. Информатика (создание сайтов в сети Ин-
тернет): практикум для ФНО / Лобан А. В. — М.: Российский
государственный университет правосудия, 2014. — 96 c.
11. Мелькин Н. В. Искусство продвижения сайта. Полный
курс SEO: от идеи до первых клиентов / Мелькин Н. В., Горя-
ев К. С. — М.: Инфра-Инженерия, 2017. — 268 c.
12. Мержевич Влад. HTML и CSS на примерах / Влад
Мержевич. — М.: БХВ-Петербург, 2016. — 448 c.
13. Нагаева И. А., Кузнецов И. А. Web-конструирование.
HTML-практикум: учебное пособие. — Саарбрюкен, Германия:
LAMBERT Academic Publishing, 2012. — 160 с.
232
14. Основы работы с HTML. [Электронный ресурс]. — М.:
Интернет-Университет Информационных Технологий (ИНТУ-
ИТ), 2016. — 208 c.
15. Петрунина Е. Б. Основы HTML: учебно-методическое
пособие / Петрунина Е. Б., Селина Е. Г. [Электронный ресурс]. —
СПб.: Университет ИТМО, 2013. — 47 c.
16. Создание Web-страниц и Web-сайтов. Самоучитель:
учебное пособие / под ред. В. Н. Печникова. — М.: Изд-во Три-
умф, 2006. — 464 с.
17. Титов В. А. Разработка WEB-сайта средствами языка
HTML: учебное пособие / Титов В. А., Пещеров Г. И. — М.: Ин-
ститут мировых цивилизаций, 2018. — 184 c.
18. Ши Д., Хольцшлаг М. Е. Философия CSS-дизайна /
Дэйв Ши, Молли Е. Хольцшлаг; пер. с англ. А. А. Слинкина. —
М.: НТПресс, 2005. — 312 с.
19. Кашевский П. А. Шрифты: учебное пособие / П. А. Ка-
шевский. — Мн: Лiтаратура i Мастацтва, 2012. — 192 с.
20. Энж Э. SEO — искусство раскрутки сайтов: пер. с англ. /
Э. Энж, С. Спенсер, Р. Фишкин, Д. Стрикчиола. — 2-е изд., перераб.
и доп. — СПб.: БХВ-Петербург, 2014. — 688 с.
21. SEO-копирайтинг 2.0. Как писать тексты в эру семанти-
ческого поиска / И. С. Шамина [и др.]. — М.: Инфра-Инженерия,
2018. — 260 c.
Нагаева Ирина Александровна
Фролов Александр Борисович
Кузнецов Игорь Александрович
Основы web-дизайна.
Методика проектирования
Учебное пособие
Текст приводится в авторской редакции
12+
Ответственный редактор С. Краснова

Верстальщик А. Мужилова
Издательство «Директ-Медиа»
117342, Москва, ул. Обручева, 34/63, стр. 1
Тел./факс: +7 (495) 334-72-11
E-mail: manager@directmedia.ru
www.biblioclub.ru
Издайте свою книгу у нас!
Издательство «Директ-Медиа» публикует учебники, монографии,
литературу NON-FICTION, аудиокниги, новые издания и те, что с годами не
утратили своей актуальности, коллективные научные сборники.
Наше издательство берет свои корни в книгоиздательских традициях и

технологиях Германии. Мы – лидеры современного книгоиздательского
процесса, охватывающего цифровые образовательные платформы для
школ и вузов, издание электронных и печатных книг. Нашу продукцию
отличает высокое полиграфическое качество и высокотехнологичный
процесс продвижения книги.
Наши авторы – ведущие ученые и преподаватели страны. За 20 лет работы в
России нами издано более 10 000 изданий учебной, академической и
научно-популярной литературы.
Приобрести наши книги можно в интернет-магазине DIRECTMEDIA.RU и в

ЭБС «Университетская библиотека онлайн» (BIBLIOCLUB.RU), в книжных и в
интернет-магазинах страны.
Хотите приобрести книгу издательства «Директ-Медиа»

или издать свое произведение?
Мы ждем Вас!
www.directmedia.ru
Email: manager@directmedia.ru
Tel.: 8-800-333-6845 (звонок бесплатный)
Для заметок
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________

Основы web дизайна Методика проектирования2021

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Основы web дизайна Методика проектирования2021

Загружено:

Авторское право:

Доступные форматы

И. А. Нагаева, А. Б.

1.2. Основные понятия

1.2.1. Создание HTML документов

1.2.2. Основные положения

1.2.3. Структура документа

<html> — этот тэг открывает документ.

1.3. Форматирование текста

1.3.1. Разделение текста на абзацы

1.3.2. Перевод строки

1.3.4. «Бегущая» строка

Пример горизонтальной «бегущей» строки (строка дви-

Внимание: все перечисленные элементы являются кон-

1.3.7. Физическое форматирование

Элементы физического форматирования могут быть вло-

size Служит для указания размера шрифта в условных единицах

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

Знаки арифметических операций

1.4.1. Упорядоченный (нумерованный) список

Пример использования атрибута <type>:

1.4.4. Список определений

1.4.5. Комбинирование списков

1.5. Использование графики

1.5.1. Выбор формата графического файла

1.5.3. Выравнивание текста

1.5.5. Прерывание текста

1.5.6. Указание размеров

1.5.7. Альтернативное описание изображения

1.5.9. Отделение изображения от текста

1.6.2. Создание ссылок на документы и файлы

1.6.3. Внутренние ссылки

1.6.4. Файлы и другие встраиваемые объекты

1.6.5. Карты и ссылки

1.7.1. Основы построения таблиц

1.7.2. Основные тэги таблиц

1.7.3. Таблицы c рамками

1.7.4. Размещение данных внутри ячеек

1.7.5. Объединение ячеек

1.7.6. Пустые ячейки

1.7.7. Дополнительные атрибуты таблиц

1.7.8. Использование цвета и изображений

1.7.9. Вложенные таблицы

1.9. Задания для самостоятельной работы

2.1. Синтаксис и принцип работы CSS

2.2. Способы подключения

2.2.1. Внешняя таблица стилей

2.2.3. Встроенные стили

2.2.4. Несколько таблиц стилей

2.3. Цвет и фон в CSS

2.3.1. Свойство COLOR

2.3.2. Свойство BACKGROUND-COLOR

2.3.4. Свойство BACKGROUND-REPEAT

2.3.5. Свойство BACKGROUND-ATTACHMENT

2.3.6. Свойство BACKGROUND-POSITION

2.4. Шрифты в CSS

2.4.1. Свойство FONT-FAMILY

2.4.2. Свойство FONT-STYLE

2.4.3. Свойство FONT-VARIANT

2.4.4. Свойство FONT-WEIGHT

2.4.5. Свойство FONT-SIZE

2.4.6. Сокращенная запись. Свойство FONT

Если какое-либо свойство не указать, то ему автоматиче-

2.5. Текст в CSS

2.5.1. Свойство TEXT-ALIGN