стр. 1
(всего 11)

СОДЕРЖАНИЕ

>>

Файл взят с сайта - http://www.natahaus.ru/

где есть ещё множество интересных и редких книг,
программ и прочих вещей.
Данный файл представлен исключительно в
ознакомительных целях.
Уважаемый читатель!
Если вы скопируете его,
Вы должны незамедлительно удалить его
сразу после ознакомления с содержанием.
Копируя и сохраняя его Вы принимаете на себя всю
ответственность, согласно действующему
международному законодательству .
Все авторские права на данный файл
сохраняются за правообладателем.
Любое коммерческое и иное использование
кроме предварительного ознакомления запрещено.
Публикация данного документа не преследует за
собой никакой коммерческой выгоды. Но такие документы
способствуют быстрейшему профессиональному и
духовному росту читателей и являются рекламой
бумажных изданий таких документов.

Все авторские права сохраняются за правообладателем.
Если Вы являетесь автором данного документа и хотите
дополнить его или изменить, уточнить реквизиты автора
или опубликовать другие документы, пожалуйста,
свяжитесь с нами по e-mail - мы будем рады услышать ваши
пожелания.
Самоучитель IV—
то освоению языка
HTML




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




ДЦДЛЕКПШКД Е.Л. Полонская
язык HTML
язык HTML
Е.Л. Полонская




Москва • Санкт-Петербург • Киев
2003
ББК 32.973.26-018.2.75
П52
УДК 681.3.07


Компьютерное издательство "Диалектика"
Зав. редакцией А.В. Слепцов




По общим вопросам обращайтесь в издательство "Диалектика" по адресу:
info@dialektika.com, http://www.dialektika.com



Полонская Е.Л.
П52 Язык HTML. Самоучитель. : — М. : Издательский дом "Вильяме", 2003.
— 320 с. : ил.
ISBN 5-8459-0466-8 (рус.)
Книга предназначена для самостоятельного изучения базового языка соз-
дания документов в World Wide Web - языка HTML. Ее главная задача со-
стоит в том, чтобы помочь новичкам освоиться в сложной среде современ-
ных интерактивных документов, изучить правила их оформления и имею-
щиеся инструментальные средства, приобрести навыки, необходимые для
успешной публикации своих материалов в Web. В книге рассматриваются
основы языка HTML, особенности структуры интерактивных документов, а
также самые современные Web-технологии.
Благодаря лаконичному, понятному изложению материал книги будет
доступен для восприятия людям любых профессий и возрастов. Книга снаб-
жена многочисленными врезками, а также тематическими контрольными
вопросами, способствующими усвоению прочитанного.

ББК 32.973.26-018.2.75

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


Copyright © 2003 by Dialektika Computer Publishing.
All rights reserved including the right of reproduction in whole or in part in any form.

ISBN 5-8459-0466-8 (рус.) © Компьютерное изд-во "Диалектика", 2003
Оглавление

Введение. Первые "почему" 12
Глава 1. Основные принципы HTML 19
Глава 2. Абзацы 25
Глава 3. Служебные и "непечатные" символы 34
Глава 4. Шрифты 41
Глава 5. Заголовки 55
Глава 6. Логическая разметка гипертекста 61
Глава 7. Списки 75
Глава 8. Графика на Web-странице 91
Глава 9. Гипертекстовые ссылки 113
Глава 10. Табличный дизайн 131
Глава 11. Фреймы 161
Глава 12. Формы 185
Глава 13. Структура HTML-документа 213
Глава 14. Внешние параметры Web-страницы 221
Глава 15. Основные принципы каскадных таблиц стилей 229
Глава 16. Понятие событий 253
Приложение А. Ответы на вопросы тестов 265
Приложение Б. Таблица дескрипторов HTML 292
Приложение В. Коды и мнемонические имена спецсимволов 308
Предметный указатель 316
Содержание

Введение. Первые "почему" 12
Почему HTML 12
Почему Notepad 15
Почему HTML не является языком программирования 16
Резюме 17
Тесты 17
Глава 1. Основные принципы HTML 19
Первый опыт "общения" с броузером 19
HTML — язык дескрипторов 20
Первый опыт форматирования: курсив 21
Жирный шрифт и подчеркивание 22
Резюме 23
Тесты 23
Глава 2. Абзацы 25
Как заставить броузер перейти на новую строку 25
Абзац с параметрами 28
Разрыв строки 29
Резюме 31
Тесты 32
Глава 3. Служебные и "непечатные" символы 34
Специальные символы 34
О переносах и их отсутствии 36
Резюме 39
Тесты 39
Глава 4. Шрифты 41
Дескриптор <FONT> 41
Гарнитура 41
Размер 44
Цвет 47
Шрифт с несколькими параметрами 49
Другие параметры 50
Параметры шрифта по умолчанию 51
Резюме 52
Тесты 53




Содержание
Глава 5. Заголовки 55
Уровни заголовков 55
Параметры заголовка 57
Резюме 58
Тесты 59

Глава 6. Логическая разметка гипертекста 61
"Логические" дескрипторы 61
Расстановка акцентов 62
Цитаты 63
Верхние и нижние индексы 64
Имитация бурной деятельности 65
Сокращения 67
Обратный адрес 67
HTML придумал программист... 68
Зачем все это? 71
Резюме 71
Тесты 72
Глава 7. Списки 75
Концепция списков в HTML 75
Нумерованные списки 76
Маркированные списки 79
Параметры элемента списка 81
Многоуровневые списки 83
Списки определений 84
Другие виды списков 86
Резюме 87
Тесты 88
Глава 8. Графика на Web-странице 91
Вставка графики в текст 91
С:\Мои документы на языке WWW 92
Точка единого отсчета 94
Размеры изображения 95
Вместо картинок 99
Обтекание графики текстом 100
Выравнивание по вертикали 103
Картина в раме 104
Отступы 105
Форматы графических файлов 106
Резюме 109
Тесты 110




Содержание
Глава 9. Гипертекстовые ссылки из
Точки входа в гипертекст 113
"Якоря" в море Internet 114
Закладки 115
Ссылки, которые не являются ссылками 116
Ссылки-картинки 120
Виртуальная навигация 126
Резюме 127
Тесты 128
Глава 10. Табличный дизайн ш
Для чего нужны таблицы 131
Из чего состоят таблицы 133
Пример табличного дизайна 134
Горизонтальное выравнивание 136
Вертикальное выравнивание 139
Размеры таблицы 142
Размеры ячеек 143
Внутренние отступы 144
Рамки 145
Частичное отображение рамок 147
Фон таблицы и ячеек 150
Слияние ячеек 152
Заголовок таблицы 154
Заголовки строк и столбцов 155
Группировка ячеек 156
Резюме 159
Тесты 160
Глава 11. Фреймы 161
Что такое фреймовая структура 161
Горизонтальные и вертикальные фреймы 164
Размеры фреймов 165
Вложенные фреймы 169
Обрамление и отступы 171
Ссылки 177
Фрейм без фреймов 178
Резюме 182
Тесты 182
Глава 12. Формы 185
Основная схема формы 185
Из чего состоит форма 187
Текстовые строки 188
Кнопки 192

Содержание
8
Текстовые поля 197
Списки вариантов 202
Списки-переключатели 206
Раскрывающиеся списки 207
Резюме 210
Тест 211
Глава 13. Структура HTML-документа 213
Основные параметры Web-страницы 213
Отступы от края окна 214
Цвет фона 217
Цвет текста 218
Резюме 219
Тест 219
Глава 14. Внешние параметры Web-страницы 221
Кто ваши посетители 221
Как страницу назовете... 222
Назначение дескриптора <МЕТА> 224
Keywords 224
Description 225
Robots 226
Generator 226
Author и copyright 226
Content-type 227
Expires 227
Refresh 227
Резюме 227
Тесты 227
Глава 15. Основные принципы каскадных таблиц стилей 229
Зачем нужны таблицы стилей 229
Простейшее описание стиля 230
Таблицы стилей 231
Стиль дескриптора 232
Подклассы дескрипторов 233
Описание цветов 236
Задание фона 237
Атрибуты шрифта 241
Атрибуты абзаца 246
Гиперссылки 247
Отступы и рамки 248
Резюме 251
Тесты 251



Содержание
Глава 16. Понятие событий 253
Понятие динамического HTML 253
Виртуальные события 253
События мыши 255
События клавиатуры 258
События форм 258
События страницы 261
Резюме 263
Тесты 263
Приложение А. Ответы на вопросы тестов 265
Приложение Б. Таблица дескрипторов HTML 292
Приложение В. Коды и мнемонические имена спецсимволов 308
Предметный указатель 316




Содержание
10
Как читать эту книгу
Если эта книга послужит вам приятным послеобеденным чтением, — что ж, буду
рада за вас. Но если вы всерьез собрались освоить HTML, то ее нужно читать иначе.
Каждая глава несет в себе информацию трех видов: теоретическую, практиче-
скую и справочную. Как усваивать теорию — дело ваше. Одним людям достаточ-
но просто вдумчиво прочесть главу. Другие ведут конспект. Третьи делают нечто
наподобие школьной шпаргалки, которой потом пользуются в работе. Подберите
тот вариант, который вам удобнее и больше нравится. Здесь все зависит от при-
вычек и особенностей вашей памяти.
Но в любом случае будет не лишним проверить себя: правильно ли вы поняли
прочитанное? Для этого в конце каждой главы приводится раздел Тесты. Там вы най-
дете вопросы с несколькими вариантами ответа на каждый. Отметьте те варианты,
которые вы считаете правильными, и проверьте свои ответы по Приложению А. Обра-
тите внимание, что среди множества предлагаемых вариантов может не оказаться ни
одного правильного или несколько правильных ответов. Кроме того, встречаются от-
веты частично правильные, например, вариант кода, который в принципе работает,
но не является оптимальным. В общем, все как в жизни... Так что будьте внимательны.
Однако основные навыки приобретаются, конечно же, на практике. Поэтому
настоятельно советую, после того как прочитаете главу, выполнить все описан-
ные в ней примеры самостоятельно. Для этого вам понадобится компьютер, на
котором установлены HTML-редактор и броузер. Желательно также иметь доступ
к Internet. Но если у вас его нет, не беда. Он нам будет нужен не так часто. При
необходимости можете сходить в ближайшее Internet-кафе.
Наконец, в каждой главе содержится информация справочного характера, та-
кая как описание дескрипторов и их параметров. На мой взгляд, зазубривать эти
сведения ни к чему. В конце учебника вы найдете сводную таблицу дескрипторов
HTML (см. Приложение Б). Можете пользоваться ею, а можете по ходу чтения
составить собственную.
Некоторые главы снабжены разделами, озаглавленными Технические подробно-
сти. В них содержатся более углубленные технические сведения, касающиеся те-
мы, рассматриваемой в данной главе.
Некоторые заметки и рекомендации в книге снабжены пиктограммами. Отве-
ты на наиболее типичные вопросы начинающих помечены пиктограммой Совет.
Пиктограммой Внимание выделены важные моменты, о которых следует помнить
при создании Web-страниц. Под пиктограммой На заметку приводятся удобные
практические приемы, наблюдения — результат многолетнего опыта многих Web-
дизайнеров. Это не правила и не стандарты. Вы можете согласиться с ними и
взять на вооружение, а можете поспорить, перепроверить и только потом решить,
насколько они вам подходят.
В любом случае, я желаю вам успехов в изучении HTML и удовольствия от
создания собственных HTML-документов.
Елена ПОЛОНСКАЯ,
автор
Введение. Первые "почему"
Уважаемый читатель! Позвольте задать вам вопрос: зачем вам понадобилось
изучить HTML? Для того чтобы стать Web-дизайнером? Чтобы создать виртуаль-
ную книгу, учебник, презентацию? Сдать зачет? Для общего развития?
Как бы то ни было, какая-то причина все же побудила вас взять в руки эту
книгу, пролистать первые страницы. Пойдете ли вы до конца? Решитесь ли пода-
рить себе удовольствие нового знания, умения? Не берусь судить. Но, говорят, тот,
кто однажды отказал себе в таком удовольствии, потом долго об этом жалеет...
Домашняя Web-страничка — это, конечно, далеко не всегда источник дохода
(хотя нередко бывает и так). Гораздо чаще это виртуальная визитная карточка,
средство общения, "живой" учебник или презентация, которые можно без осо-
бых хлопот изготовить самому, не прибегая к помощи программиста. Нередко это
первая проба Web-дизайнерского пера, за которой потом появляются другие,
лучшие, профессиональные... И всегда — средство самовыражения.
Начинать всегда немного боязно и страшно. Боязно — как нырять в холодную
воду после того, как угреешься на теплом песке. Страшно — как все новое. Тебя
удивляют правила новой среды. А старожилы удивляются твоим вопросам. Но
постепенно образуется некий общий знаменатель. А потом начинает получаться.
И тогда приходит удовольствие. Как от всего, что делаешь своими руками и дела-
ешь хорошо, — будь то гениальный роман или ровно вбитый гвоздь.
Но поначалу все кажется немного странным. Особенно до тех пор, пока не
найдешь ответы на основные "почему".


Почему HTML
Языков программирования и так в последнее время расплодилось довольно
много. Зачем было изобретать еще одну тарабарскую систему кодов, на сей раз
для Web? Неужели нельзя было взять обычный формат текстовых документов,
например Word, со всеми его шрифтами, таблицами, картинками и, само собой,
гиперссылками, и написать для него программу-просмотрщик? Зачем было изо-
бретать какой-то язык разметки гипертекста и набирать в куцем Notepad нечто
жуткое, не имея возможности даже увидеть, как это выглядит на самом деле?
Ведь вот он — Word, под рукой. И все видно, и все понятно, и его документы
везде открываются. Похоже, эти интернетчики — просто ненормальные. Создают
сложности на ровном месте себе и другим...
У вас никогда не возникало подобных мыслей?
У меня — возникали.
Оставим в покое историю развития Internet. Вряд ли вас удовлетворит ответ в
духе "все всегда так делали и мы будем делать так же". Займемся днем сегодняш-
ним. И самыми практическими его вопросами.
Почему объем HTML-страницы так важен? Говоря о месте на жестком
диске, мы давно оперируем гигабайтами или, на худой конец, сотнями
мегабайт. А тут трясемся над каждым десятком килобайт!
В чем причина? В каналах связи.
Подавляющее большинство отечественных пользователей Internet под-
ключаются к сети по коммутируемой телефонной линии через модем.
Повысить качество такой связи они обычно могут только в очень огра-
ниченных пределах, так как определяется оно не столько модемом,
сколько бабушкой АТС, из которой весь песок уже давно высыпался.
Попробуем приблизительно оценить, какой объем должна иметь HTML-
страница, чтобы посетитель не заскучал и не ушел дальше бродить по
Internet, не дожидаясь конца ее загрузки.
Скорость загрузки страницы на компьютер ее посетителя определяется
многими факторами. Учесть их все при таком поверхностном расчете не
представляется возможным. Поэтому будем опираться только на один из
них, который нам известен, — скорость модема. Предположим, она состав-
ляет 33,6 Кбит/с. Это значит, что (подчеркнем, не учитывая массу других
факторов!) за секунду модем передает 33,6 Кбит / 8 = 4,2 Кбайт данных. Но
количество полезных данных меньше, так как на линии часто возникают
ошибки, отчего данные приходится передавать повторно. Насколько оно
меньше, точно сказать нельзя. Предположим, что в полтора раза. Тогда по-
лучится, что пользователь принимает 4,2 / 1,5 = 2,8 Кбайт полезной инфор-
мации в секунду. Сколько времени он будет терпеливо ждать загрузки стра-
ницы? Конечно, это зависит и от темперамента пользователя, и от того, на-
сколько ему нужна именно эта страница, и еще от массы причин. Но
предположим, что это время составляет 1 минуту. Тогда, как нетрудно под-
считать, максимальный размер Web-страницы составляет 2,8 * 60 =
168 Кбайт. Нетрудно подсчитать, что для скорости 14,4 кбит/с этот размер
составит 72 Кбайт, а для скорости 54,6 Кбит/с — 273 Кбайт.
Конечно, мы многого не учли в нашем примитивном расчете. Однако
он позволяет сказать, что размер Web-страницы должен составлять 100—
150 Кбайт и уж, во всяком случае, не должен превышать 250 Кбайт.
Но ведь файлы с HTML-кодом гораздо меньше, скажете вы. Действитель-
но, размер самого кода редко превышает несколько десятков килобайт.
Но следует помнить, что вместе с кодом на компьютер посетителя стра-
ницы передаются файлы с картинками и, возможно, другими нетекстовы-
ми объектами. А их размер может значительно превышать определенный
нами лимит. О том, как поступать в таких случаях, вы узнаете из главы 8.
Следует отметить, что это довольно жесткое ограничение. Оно не позволяет
использовать на Web-страницах интенсивную графику, аудио- и видеоэф-
фекты. Для того чтобы такие вещи, как просмотр через Internet видеофиль-
мов и телеканалов, стали реальностью, нужны гораздо более мощные кана-
лы передачи данных, — такие, которые позволили бы оперировать не сот-
нями килобайт, а гигабайтами или хотя бы сотнями мегабайт.

Первые "почему" 13
Скачайте из Internet и сохраните на диске любую Web-страницу. Можно даже
без картинок. Откройте ее, скажем, в Word 2000 или ХР и сохраните как документ
Word. Готово? Теперь откройте Explorer (Проводник) или какой-нибудь Commander
и сравните размеры обоих файлов. Ну как? Могу поспорить, что файл с кодом
HTML не просто меньше, а раз в десять меньше. Или даже в пятьдесят... А теперь
припомните свои впечатления, когда вы последний раз загружали объемистую Web-
страницу и минут пять глазели на одинокий баннер. Не мелькала ли у вас тогда
мысль заставить автора этой страницы частично оплатить вам доступ к Internet?
А у того — свои заботы. Каждый хозяин Web-собственности желает, чтобы его
страницу в Internet посещали часто и с удовольствием. Иначе зачем было городить
весь этот виртуальный огород? А раз так — страницы должны быть, во-первых, инте-
ресными, а во-вторых, быстро открываться. За первое HTML ответственности не не-
сет. Зато за второе — отвечает головой. И, поверьте, неплохо справляется. Вы могли
убедиться в этом сами, сравнив объем HTML-страницы с объемом документа Word.
Идем дальше. У вас какой компьютер? Pentium II? Прекрасно. Р-ГУ? Ого!
"Двойка"? Смотрите-ка, жива ведь старушка... Мака ни у кого нет? Ладно, шучу.
А впрочем, вон кто-то тянет руку в заднем ряду. Карманный ПК... Мобильный
телефон... Телевизор с Web-приставкой... Что? Холодильник?! Н-да, дожили...
А какая у вас операционная система? Windows 98... NT... 2000... ХР... "Могу-
чая кучка" линуксоидов с фанатично горящими глазами... UNIX? Вы, наверное,
системный администратор или скоро им будете... Владельцам Мае и карманных
ПК выбирать особо не из чего... Плюс то, что заменяет ОС в мобильном телефо-
не, Web-приставке и... гм, в холодильнике.
То, что нас так много, — это еще ничего. Это даже очень хорошо. Хуже, что у
нас такие разные платформы — компьютеры и операционные системы. Поэтому
нам, сообществу Internet, для обмена информацией нужен такой формат, который
бы "понимали" все броузеры всех производителей и всех операционных систем,
настоящие и по возможности будущие. В PC, Macintosh, карманном ПК и холо-
дильнике. Можем ли мы положиться на двоичный формат отдельно взятого при-
ложения, разработанный отдельно взятой.— пусть даже очень большой — компа-
нией? Голосуем: кто за то, чтобы вверить формат наших Web-страниц заботам г-
на Гейтса? Заснули, что ли... Ладно, кто против? Нет, похоже, не заснули.
Раз так — возникает следующий вопрос: какой формат самый универсальный?
Очевидно, такой, который прочтет и поймет не только программа, но и, в случае че-
го, человек. Какой формат для этого лучше всего подходит? Правильно — текстовый.
Если взять обычный текстовый файл и разметить в нем фрагменты, которые нуж-
но выделить, скажем, курсивом или цветом, обозначить нумерованные и маркиро-
ванные списки, места вставки рисунков и т.п. (рисунки и другие нетекстовые объекты
придется поместить в отдельных файлах), то любой мало-мальски толковый програм-
мист практически за неделю "нарисует" вам программку, которая бы отображала та-
кие файлы на экране в более или менее приятно читаемом виде. Вот вам и броузер.
Осталось разработать единую систему разметки текста. Или, точнее, гипертекста, по-
скольку, кроме собственно текста — и не простого, а форматированного — в нем ведь
есть еще картинки, ссылки на другие документы и файлы, а иногда аудио- и даже ви-



Введение
14
деовставки. Что у нас получится? Язык разметки гипертекста, или, по-английски, Ну-
perText Markup Language — HTML. Вот мы и изобрели велосипед...
И последний, но немаловажный аргумент в пользу HTML. К сожалению, в си-
лу — как бы это сказать помягче? — некоторых специфических традиций отечествен-
ного рынка программного обеспечения этот аргумент не вполне очевиден. Вы когда-
нибудь интересовались, сколько стоит текстовый процессор Microsoft Word? Нет?
Поинтересуйтесь. За эту сумму можно устроить себе неплохой летний отпуск. А тек-
стовых редакторов для ASCII — пруд пруди. Помимо Notepad и редакторов, встроен-
ных во всяческие "Коммандеры", на Web-узлах бесплатного ПО их сотни мегабайт.
И это не считая специализированных HTML-редакторов, среди которых тоже немало
бесплатных и условно-бесплатных. Если бы вся Всемирная Паутина перешла на стан-
дарт Word, она бы, пожалуй, быстро лишилась многих небогатых, но законопослуш-
ных авторов. А поскольку слишком много народу уже жизни не мыслит без Internet,
то происходит как раз обратное: Word и весь Microsoft Office, да и другие офисные
пакеты, дружно принимают HTML в виде еще одного текстового формата.


Почему Notepad
Notepad, он же Блокнот Windows — излюбленный редактор Web-дизайнеров.
Хотя есть много других хороших и не менее уважаемых ими специализированных
редакторов для HTML, таких как MacroHTML или HomeSite. Уважают их, глав-
ным образом, за простоту, доступность, компактность. А еще за невмешательство
в творческие дела дизайнера. Все очень просто: вы вводите в редакторе HTML-
код и любуетесь результатом в окне параллельно работающего броузера. Редактор
в лучшем случае ускорит ввод ключевых слов и поможет с синтаксической про-
веркой. Остальное — за вами.
Другой тип HTML-редакторов — визуальные, такие как известный Microsoft
FrontPage Express или гораздо более любимый Web-дизайнерами Macromedia
DreamWeaver. Их интерфейс построен по тому же принципу, что и интерфейс
текстового процессора, скажем Word. Кстати, Word 2000 или ХР вполне сойдет в
качестве визуального HTML-редактора.
Преимущество визуальных HTML-редакторов в том, что для работы с ними
можно вообще не знать HTML. К сожалению, визуальные редакторы страдают
тем же недостатком, что и трансляторы языков программирования, преобразую-
щие текст на С или Pascal в ассемблерный код. А именно — неоптимальностью
этих самых кодов. Спросите любого программиста, и он вам скажет, что ассемб-
лерный код, написанный вручную, в несколько раз меньше кода такой же про-
граммы, написанной, скажем, на Pascal и преобразованной в ассемблерный код с
помощью транслятора. Удивляться нечему: решения человека-специалиста всегда
красивее решений машины. Зато и труда, и времени они требуют несравнимо
больше. Впрочем, вероятно, недалек тот день, когда при загрузке страницы раз-
ница в несколько килобайтов или даже мегабайтов не будет так заметна, как сей-
час. Тогда визуальные HTML-редакторы займут на компьютере Web-дизайнера
такое же достойное место, какое сейчас занимают на компьютере программиста
визуальные среды разработки, такие как, например, Delphi.

Первые "почему" 15
Увы, этим грехи визуальных редакторов не исчерпываются. Часто страница
выглядит в броузере совсем не так, как до этого она выглядела в окне редакто-
ра. Приходится лезть в длинный, запутанный код, искать там ошибки и вруч-
ную их исправлять.
Когда-то давно мне встретились в одной книжке десять шуточных заповедей
программиста. Одна из них гласила: "Не возжелай программы ближнего твое-
го!". В применении к нашей задаче она звучит так: "Не возжелай HTML-кода
ближнего твоего, в особенности если этот ближний — FrontPage, а ты собрался
изучать HTML".
Где взять хороший HTML-редактор?
HTML-редакторов множество, и у каждого из них есть свои преимущетсва
и недостатки. Поэтому однозначно сказать, какой именно вам подойдет
лучше всего, нельзя. Одним нравится HomeSite, другим — 1st Page, треть-
им — Arachnophilia или Easy HTML. Или другой из десятков им подоб-
ных. Здесь все в конечном счете сводится к личным вкусам.
Для того чтобы подобрать редактор по душе, советую посетить несколь-
ко Web-хранилищ бесплатного и условно-бесплатного программного
обеспечения и там подобрать себе редактор по душе и по карману. По-
этому вместо того, чтобы сравнивать редакторы (тем более что регуляр-
но появляются новые версии с новыми функциями), я лучше приведу
несколько адресов, по которым стоит обратиться.
• 1st Page: www.evrsoft.com
• Arachnophilia: www.arachnoid.com
• HomeSite: www.macromedia.com
• Easy HTML: www.ukrwest.net
• Также виртуальные архивы ПО: FreeSoft (www.freesoft.ru), Freeware.ru
(www.freeware.ru), ListSoft (www.listsoft.ru), Softarea (www.softarea.ru) и др.


Почему HTML не является языком
программирования
Многие ошибочно называют HTML языком программирования. К сожалению,
это не так. И дело здесь даже не в том, что у HTML нет компилятора, а только
встроенный в броузер интерпретатор: BASIC и JavaScript тоже обходятся одними
интерпретаторами, но это не мешает им называться языками программирования.
Дело в том, что в HTML отсутствует главный атрибут, присущий любому языку
программирования, — команды. На HTML нельзя задать последовательность дейст-
вий, а можно только описать, как броузер должен вводить на экран тот или иной
документ. Если же на Web-странице действительно должно что-то выполняться,
например вестись форум, то используются настоящие языки программирования,
такие как Java и JavaScript (см. главу 16). Поэтому говорить "программа на HTML"
не вполне корректно. Мы будем пользоваться термином "HTML-код".

Введение
16
Резюме
Язык HTML, или универсальный язык разметки гипертекста, используется для
создания самых разных интерактивных документов с гиперссылками и элемента-
ми мультимедиа — Web-страниц, интерфейсов, презентаций, электронных книг и
учебных пособий. Файлы с HTML-кодом — это обычные текстовые файлы, дос-
тупные для чтения как программе, так и человеку. Благодаря этому HTML-
страницы можно редактировать и просматривать на любом компьютере и в лю-
бой операционной системе.
Для создания HTML-страниц можно пользоваться любым текстовым редакто-
ром, но существуют и специализированные программы. Эти HTML-редакторы
делятся на два типа: визуальные и невизуальные. Визуальные HTML-редакторы
обладают интуитивно понятным интерфейсом и не требуют много времени на ос-
воение, но генерируют очень длинный, неоптимальный и малопонятный HTML-
код, который потом трудно редактировать. К редакторам этого типа относится,
например Microsoft FrontPage Express.
Невизуальные редакторы требуют знания HTML, но лишены недостатков ви-
зуальных редакторов. Кроме того, это, как правило, небольшие, компактные
программы, бесплатные или условно-бесплатные. К HTML-редакторам этого ти-
па относятся, например MacroHTML и HomeSite.
HTML не является языком программирования. Поэтому для того чтобы на
HTML-странице что-то выполнялось, например, выводился какой-то текст или
менялась картинка в ответ на определенные действия пользователя, необходимо
пользоваться специальными средствами, расширяющими возможности HTML,
такими как язык программирования JavaScript.


Тесты
1. Что из нижеперечисленного является броузером?
а) Microsoft Word
б) Microsoft Internet Explorer
в) Microsoft FrontPage Express
r) HomeSite
д) Netscape Navigator
е) Opera
ж) Mozilla
з) Notepad
и) PhotoShop
к) Google.com
2. Что из нижеперечисленного можно использовать для просмотра HTML-
страницы?

Первые "почему" 17
а) Microsoft Word
б) Microsoft Internet Explorer
в) Microsoft FrontPage Express
r) HomeSite
д) Netscape Navigator
е) Opera
ж) Mozilla
з) Notepad
и) Windows
к) Linux
л) PhotoShop
м) Google.com
3. Что из нижеперечисленного можно использовать для просмотра кода
HTML-страницы?
а) Microsoft Word
б) Microsoft Internet Explorer
в) Microsoft FrontPage Express
r) HomeSite
д) Netscape Navigator
е) Opera
ж) Mozilla
з) Notepad
и) Windows
к) Linux
л) PhotoShop
м) Google.com




Введение
18
Глава 1

Основные принципы HTML
В этой главе...

* Первый опыт "общения" с броузером
4 HTML — язык дескрипторов
f Первый опыт форматирования: курсив
* Жирный шрифт и подчеркивание



Первый опыт "общения" с броузером
Итак, Notepad открыт, рукава засучены, в глазах — огонь... Приступим.
Прежде всего давайте разберемся: что "понимает" и чего "не понимает" бро-
узер? Для этого создадим в Notepad обычный текстовый файл. Можно написать
там что-то вроде:
Я хочу, чтобы ЭТО можно было прочесть в броузере!
И сохраним. Назовем его, скажем, testhtml.
Теперь откроем созданный файл в броузере. Это можно сделать двумя спосо-
бами: с помощью команды Файл ^ Открыть (File => Open), либо перетащив пик-
тограмму из Проводника или файлового менеджера в окно броузера.
Несмотря на все усилия сообщества Internet, жесткого стандарта HTML до
сих пор не существует. Некоторые конструкции языка отображаются в раз-
ных броузерах по-разному. А иногда не воспринимаются вовсе, и тогда по-
сетители Web-страницы видят на экране нечто невообразимое... Поэтому
хороший Web-дизайнер обязательно проверяет свои работы в нескольких
броузерах. В качестве "джентльменского набора" можно предложить Internet
Explorer, Netscape Navigator, Opera. Причем желательно предпоследние вер-
сии: как бы ни была привлекательна идея "идти в ногу со временем", самые
новые версии, как правило, содержат ошибки, которые будут исправлены
через несколько месяцев, да и немногие пользователи успели их установить.
Получилось? Повезло вам с броузером...
Не текст, а абракадабра? Смените кодировку. С помощью команды Кодировка
(Coding) или чего-то похожего, что находится в меню Вид (View). Более точное
название команды зависит от броузера. Попробуйте разные виды кириллицы, на-
чиная с Windows и КОИ8-Р. Забегая вперед, отметим, что, вообще-то, первая
обязанность Web-дизайнера — избавить посетителя от необходимости подобных
действий. И не такая уж обременительная — нужно всего лишь поставить в нача-
ле документа специальный дескриптор...


HTML — язык дескрипторов
Что-что поставить в начале?..
Дескриптор.
"Вехи", которыми размечают гипертекст, называются дескрипторами (tags). В
обычном, некомпьютерном английском языке слово tag означает "признак",
"метка", "маркер". Дескриптор в HTML — это некое ключевое слово или сокра-
щение, которое служит признаком того или иного форматирования данной части
документа. Для того чтобы дескриптор можно было отличить от остального тек-
ста, его заключают между знаками "больше" и "меньше": <ДЕСКРИПТОР>.
Многие дескрипторы принадлежат к контейнерному типу: в них, как в контей-
нер, заключается фрагмент текста, форматирование которого определяется этим
дескриптором, — например, выделение курсивом или "привязка" гиперссылки.
Контейнерные дескрипторы всегда парные: каждому открывающему дескриптору
соответствует одноименный закрывающий, причем закрывающий дескриптор от-
личается от открывающего тем, что начинается с косой черты (заметьте — обыч-
ной, а не обратной, к которой вы, возможно, привыкли, работая в Windows):
Я хочу, чтобы <ДЕСКРИПТОР1> ЭТО </ДЕСКРИПТОР1> можно было прочесть в броузере!
Встречаются и неконтейнерные, одинарные дескрипторы. Они не содержат
текста, который нужно так или иначе отформатировать, а определяют характери-
стики документа в целом или описывают объект, который нужно вставить в дан-
ной точке документа, например картинку. Такие дескрипторы не имеют закры-
вающих "двойников":
Я хочу, чтобы ЭТО <ДЕСКРИПТОР2> можно было прочесть в броузере!
Контейнерные дескрипторы, как правило, могут быть вложенными друг в дру-
га, как матрешки:
Текст! <ДЕСКРИПТОР1> текст2 <ДЕСКРИПТОР2> текстЗ </ДЕСКРИПТОР2> текст4
</ДЕСКРИПТОР1> текстБ
В результате текст! и текстЗ выводятся без форматирования, текст2 и текст4 — с
форматированием, описываемым дескриптором 1, а текстЗ — с форматированием, опи-
сываемым дескрипторами 1 и 2. Таким образом, свойства двух дескрипторов как бы на-
кладываются друг на друга, в результате чего достигаются разнообразные эффекты.
Пример такого эффекта будет рассмотрен в конце этой главы.
Главное правило при использовании вложенных дескрипторов — соблюдать
последовательность: первым закрывается дескриптор, открытый последним. Соб-
ственно, как и при сборке куклы-матрешки...




20 Глава 7
Первый опыт форматирования: курсив
А теперь попробуем что-нибудь отформатировать с помощью дескрипторов.
Вспомним: как мы, например, привыкли в Word делать текст курсивным? Вы-
деляем текст и щелкаем на соответствующей кнопке, или просто нажимаем
<Ctrl+I>. Кстати, в Word с английским интерфейсом на кнопке тоже нарисована
буква I, а не К. Почему I? Потому что по-английски курсив — Italic. В HTML для
того же действия существуют дескрипторы <1> и </!>. Текст, помещенный между
ними, отображается в броузере курсивом.
Попробуем?
Заключим, например, в "курсивные" дескрипторы слово ЭТО:
Я хочу, чтобы <1>ЭТО</1> можно было прочесть в броузере!
Сохраним файл и "освежим" картинку в броузере. Если вы его еще не закры-
ли, можете воспользоваться командой Вид о Обновить (View о Refresh). В неко-
торых броузерах для этого есть специальная клавиша. Например, в IE это <F5>.
Ну как, нравится (рис. 1.1)? Лично мне — не очень.
Похоже, броузер по-прежнему отказывается принимать наш текст за HTML.
Попробуем его перехитрить — изменим расширение файла, ничего не меняя внут-
ри. Вы, наверное, сохранили файл с тем расширением, что предлагал Notepad -
.txt. А нужно — .htm или .html. He ищите HTML в списке типов Notepad — тип-то
все равно текстовый. Просто при сохранении введите не только имя файла, но и
расширение: testhtml.html. Ну вот, теперь другое дело (рис. 1.2).



хочу, чтобы <1>ЭТО</1> можно было прочесть в броузере!




D:\My docs\DIALECT\HtmlTutoiYrESTHTMLM


Я хочу, чтобы <1>ЭТО</1> можно было прочесть в броузере!




Рис. 1.1. Для того чтобы в броузере отображался отформати-
рованный текст, одних дескрипторов недостаточно

Теперь, пожалуй, слово это можно написать обычными, строчными бу-
квами. К слову сказать, посетители Web-страниц не любят, когда с ними
"говорят" БОЛЬШИМИ БУКВАМИ. Да и у вас, вероятно, такой стиль
вызывает раздражение: подсознательно он воспринимается как крик. За-
чем КРИЧАТЬ, когда можно мягко расставить акценты!



Основные принципы HTML 21
хочу, чтобы <1>ЭТО</1> можно было прочесть в броузере!




Я хочу, чтобы ЭГО можно было прочесть
в броузере!


Рис. 1.2. Для того чтобы броузер воспринимал содержимое файла
как HTML-код, этот файл должен иметь расширение .htm или .html


Жирный шрифт и подчеркивание
Как вы думаете, какие дескрипторы соответствуют жирному шрифту и под-
черкиванию? По аналогии с Word, жирному должен соответствовать дескриптор
<В> (от слова Bold), а подчеркиванию — <U> (от Underline). Так и есть. Конечно
же, эти дескрипторы, как и <1>, являются контейнерными, т.е. имеют соответст-
вующие закрывающие "пары".
Впрочем, увлекаться дескриптором <U> не рекомендуется. Ведь на Web-
страницах подчеркиванием традиционно обозначаются гиперссылки (см.
главу 9), и посетители к этому привыкли. Вряд ли имеет смысл обманы-
вать их ожидания только лишь красивости ради.
А что нужно сделать, чтобы слово это выводилось жирным шрифтом, а первая
буква э — еще и курсивом? Правильно, использовать вложенные дескрипторы <1>
и <В> (рис. 1.3).
I TESTHTML - Блокнот


хочу, чтобы <ВХ1>э</1>то</В> можно было прочесть в броузере!

3 O:\My docs\DIALECTUHImlTutot\TESTHTML html - ... Ц •.


»•' 3 '} '
. •* - ' 4" *
"-..I,.
' . •.., О..'лист OSwuunTt, Дсмой:
) LHCPiHImlTuto^TESTHTM

т
Щ
Я хочу, чтобы это можно было
прочесть в броузере!


Рис. 1.3. С помощью вложенных дескрипторов <1> и <В>
достигается эффект полужирного курсива


Глава 1
22
Резюме
Для того чтобы броузер воспринимал содержимое текстового файла как
HTML-код, этот файл должен иметь расширение .htm или .html.
Разметка гипертекста средствами HTML происходит путем вставки в текст де-
скрипторов — специальных кодовых слов, определяющих элементы форматирова-
ния. Для того чтобы дескрипторы отличались от остального текста, их заключают
между знаками "больше" и "меньше", например: <I>, <U>, <В>.
Дескрипторы бывают контейнерные (парные) и неконтейнерные (одинарные),
причем первые встречаются чаще. Контейнерный дескриптор состоит из двух
частей — открывающего и закрывающего дескрипторов, — между которыми на-
ходится форматируемый текст, например:
<1> текст курсивом </!>
Закрывающий дескриптор отличается от открывающего наличием косой черты.
Контейнерные дескрипторы бывают вложенными, например:
<1> курсив <В> жирный курсив </В> курсив </!>
При использовании вложенных дескрипторов нужно следить за их последова-
тельностью: дескриптор, открытый первым, закрывается последним.


Тесты
1. Какой Или какие из следующих фрагментов HTML-кода содержат ошибку?
а) Зачем КРИЧАТЬ, когда можно мягко <1>расставить акценты</1>?
б) Текст курсивом: <!></!>
в) Многие дескрипторы принадлежат к <\1>контейнерному типу<1>
2. Какой или какие из следующих фрагментов HTML-кода не содержат ошибки?
а) Увлекаться дескриптором <U> не рекомендуется
б) С помощью вложенных дескрипторов «I» и «В» достигается эффект полужирного
курсива
в) Контейнерные дескрипторы бывают вложенными, например: <1><и></и></1>
г) Разметка гипертекста средствами HTML происходит путем вставки в текст
<1><и>дескрипторов</1></и>
3. Как будет выглядеть в окне броузера следующий фрагмент HTML-страницы?
Для того чтобы броузер воспринимал содержимое файла как HTML-код, этот файл должен
иметь расширение <Uxi>.htm</I> или <B>.html</Bx/U>
а) Для того чтобы броузер воспринимал содержимое файла как HTML-код,
этот файл должен иметь расширение .htm или .html
б) Для того чтобы броузер воспринимал содержимое файла как HTML-код,
этот файл должен иметь расширение .htm или .html
в) Для того чтобы броузер воспринимал содержимое файла как HTML-код,
этот файл должен иметь расширение .htm или .html

Основные принципы HTML 23
Глава 2

Абзацы
В этой главе...

4 Как заставить броузер перейти на новую строку
+ Абзац с параметрами
4 Разрыв строки


Как заставить броузер перейти
на новую строку
Отлично! Похоже, в первом приближении у нас есть все, что нужно для про-
стенькой странички. Правда, черно-белой и без картинок. Ну, да невелика важ-
ность. Сейчас попробуем написать что-нибудь побольше, например:
Я памятник себе воздвиг нерукотворный,
К нему не зарастет народная тропа.

(с) <1><В>А.С. П</В>ушкин</1>


ДНИ!
Я памятник себе воздвиг нерукотворный,
К нему н» зарастет народная тропа.
(С) <1><В>Й.С. П</В>уикин</1|>




J D:\My docs\DIALECT\HtmlTutof\TESTHTMLhtml



Я памятник себе воздвиг нерукотворный, К нему
не зарастет народная тропа. (С) А.С. Пушкин


Рис. 2.1. Попытка разбить текст на абзацы: первый блин комом

По идее, подпись "А.С. Пушкин" должна получиться курсивной, а инициалы
и первая буква фамилии — еще и жирными. Так и есть (рис. 2.1). Но где переход
на новую строку после запятой? Где пустая строка между стихами и подписью? И
самое главное — как сделать, чтобы все это было?
Броузеру безразлично, какой разделитель стоит между словами в HTML-коде:
переход на новую строку, табуляция или пробел. Безразлично ему и количество
разделителей. Сколько ни ставь пробелов между словами в коде, на экране слова
все равно будут разделены одним пробелом. Сколько ни ставь в коде абзацев, в
окне броузера переход на следующую строку будет происходить тогда, когда текст
приблизится к границе окна.
Для того чтобы разделить текст на абзацы, в HTML применяется дескриптор
<Р> — от английского paragraph, что в переводе означает вовсе не "параграф" (как
было бы логично с точки зрения русского языка), а именно "абзац". Что ж, по-
пробуем иначе:
<Р>Я памятник себе воздвиг нерукотворный,</Р>
<РЖ нему не зарастет народная тропа.</Р>
1><В>А.С. П</В>ушкин</1></Р>
Уже лучше (рис. 2.2).


Р>Я памятник себе воздвиг нерукотворный.</Р>
РЖ нему не зарастет народная тропа.</Р>
П</В>иикин</1Х/Р>




Я памятник себе воздвиг нерукотворный, g

К нему не зарастет народная тропа.

(С) АС. Пушкин



Рис. 2.2. Абзацы в HTML размечаются с помощью
дескриптора <Р>

А как увеличить отступ после стихов перед подписью? Наверное, нужно вста-
вить пустую строку, как в Word? Скажем, так:
<Р>Я памятник себе воздвиг нерукотворный, </Р>
<РЖ нему не зарастет народная тропа. </Р>

. П</В>ушкин</1></Р>
М-да... Похоже, "пустой" абзац для броузера просто не существует (рис. 2..
А что, если абзац будет не пустым? Если заполнить его чем-то видимым для 6pi
узера, но невидимым для нас? Скажем, пробелом или табуляцией (см. рис. 2.3):
<Р>Я памятник себе воздвиг нерукотворный, </Р>
<РЖ нему не зарастет народная тропа. </Р>

. П</В>ужкин</1></Р>

Глава 2
26
Похоже, нас опять не понимают...


<Р>Я памятник себе воздвиг нерукотворный,</Р>
<РЖ нему не зарастет народная тропа.</Р>
РХ/Р>


оздвиг нерукотворный,
нему не зарастет народная тропа. </Р>

СР>(С) <1ХВ>Я.С. П</В>уикин</1Х/Р>




D:\My docs\DIALECT\HtmlTuWi\TESTHTMLhtml



Я памятник себе воздвиг нерукотворный, j

К нему не зарастет народная тропа.

(С) А.С. Пушкин



Рис. 2.3. Простая вставка "пустой" строки в коде не позво-
ляет увеличить отступ между строками в броузере. Запол-
нение ее пробелами также не дает желаемого результата


|<Р>Я памятник себе воздвиг нерукотворный.</Р>
|<РЖ нему не зарастет народная тропа.</Р>
|<Р>8пЬвр;</Р>
1<Р>(С) <1><В>Я.С. П</В>уикин</1Х/Р>




} D:\Mydocs\DlALECTV-ftmlTutoi\TESTHTMLhtnil


Я памятник себе воздвиг нерукотворный,

К нему не зарастет народная тропа.



(С) А.С. Пушкин


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

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

27
Абзацы
вом: если обычный пробел (а также, кстати, и табуляция) расценивается броузе-
ром как отсутствие символа, то неразрывный пробел для него — полноценный
символ, хоть и невидимый. Что и требуется.
Но как ввести н7еразрывный пробел в Notepad? С помощью специального
обозначения — Snbsp (подробнее об этом читайте в главе 3):
<Р>Я памятник себе воздвиг нерукотворный,</Р>
<РЖ нему не зарастет народная тропа.</Р>
<P>&nbsp</p>
1><В>А.С. П</В>ушкин</1></Р>
Вот теперь (рис. 2.4) — другое дело!


Абзац с параметрами
Действительно, неразрывный пробел — полезная вещь: его можно использо-
вать и для "красных строк", и вообще везде, где нужно изобразить отступ или ос-
тавить немного свободного места.
А если много? Как, например, разместить подпись А.С. Пушкин не с левого, а
с правого края строчки?
Конечно, можно вставить много неразрывных пробелов. Примерно так посту-
пают, когда печатают на пишущей машинке. Но так работать на компьютере -
это, по меньшей мере, непрофессионально. Было бы просто нелепо предполагать,
что при разработке стандарта HTML не предусмотрели возможность выравнива-
ния текста по правому краю.
Конечно же, такая возможность есть — с помощью параметров дескриптора <Р>.
Параметры для дескрипторов HTML — обычное дело. У большинства дескрипто-
ров HTML есть параметры. Благодаря им язык разметки гипертекста становится бо-
лее гибким, появляется больше возможностей при меньшем количестве дескрипто-
ров. Параметры и их значения вписываются между именем дескриптора и закрываю-
щей угловой скобкой. Если параметров несколько, то они разделяются пробелами:
<ДЕСКРИПТОР параметр1=значение! параметр2=значение2 ...>
У дескриптора <Р> всего один параметр — align. Он принимает одно из четырех
значений — left, right, center или justify. Как вы уже, вероятно, догадались, этот
параметр "отвечает" за выравнивание текста — соответственно по левому или пра-
вому краю, по центру или по обоим краям сразу. Впрочем, значение justify под-
держивается не всеми броузерами, хотя в IE проблем не возникает.
По умолчанию обычно текст выравнивается по левому краю, что соответствует ко-
ду <Р align=right>. Попробуем отформатировать наш пример по-другому (рис. 2.5):
<Р>Я памятник себе воздвиг нерукотворный,</Р>
<РЖ нему не зарастет народная тропа.</Р>
<P>&nbsp</p>
<Р align=right>(c) <1><В>А.С. П</В>ушкин</1></Р>
Ура, заработало!


Глава 2
28
<Р>Я памятник себе воздвиг нерукотворный,</Р>
<РЖ нему не зарастет народная тропа.</Р>
<P>8nbsp;</P>
<Р ali9n=right>(C) <IXB>fl.C. П</В>у1Кин</1х/Р> %•




Ш DAMydocs\DIALECT\HtmrTutoATESTHTML.html
^SШAKШШШSШtШШШшШЯKШtжШi(^ilf'^SШШil№'u:iiii^1^U1'

Я памятник себе воздвиг нерукотворный,

К нему не зарастет народная тропа.



(С) А.С. Пушкин


Рис. 2.5. Выравнивание абзаца по правому краю
с помощью параметра align

Вероятно, вы уже заметили, что абзацы в HTML выглядят иначе, чем в
книгах. В "бумажной" литературе абзац — это текст, который начинается
с новой строки, причем первая строка абзаца, как правило, "красная", т.е.
начинается с некоторым отступом относительно остальных строк.
Такова традиция русской литературы. В англоязычной литературе тради-
ция другая: вместо "красной строки" абзацы разделяются большими ин-
тервалами между строками. Именно эта традиция сохранилась в элек-
тронных документах. Конечно, главная причина этого — та, что Internet
родом из англоязычных стран. Но, кроме того, читать текст с экрана
труднее, чем с листа бумаги. Для того чтобы облегчить этот процесс, ди-
зайнеры прилагают все усилия, чтобы как-то разбивать информацию на
блоки, всеми силами избегают больших и однородных массивов текста.
И абзац с отступами — одно из простейших средств добиться этого.


Разрыв строки
А нельзя ли как-нибудь уменьшить расстояние между строками в нашем при-
мере? Великовато оно. Но в дескрипторе <Р> подходящего параметра нет.
Воспользуемся другим дескриптором — <BR>. Означает он переход на новую стро-
ку, но не на новый абзац — то, что в Word называется "разрыв строки". При этом:
• по умолчанию в новой строке сохраняется тип выравнивания, присвоенный
всему абзацу;
• расстояние между новой строкой и предыдущими строками абзаца равно
расстоянию между остальными строками абзаца.


29
Абзацы
Именно это нам и требуется. Теперь лишние абзацы, в том числе и
"невидимый", можно убрать (рис. 2.6):
<Р>Я памятник себе воздвиг нерукотворный,<BR>
К нему не зарастет народная тропа.</Р>
<Р align=right>(c) <1><В>А.С. П</В>ушкин</1></Р>
Как раз то, что нам нужно!


<Р>Я памятник себе воздвиг нерукотворный.<BR>
К йену не зарастет народная тропа.</Р>
Р alion=rioht>(C) <1><В>Я.С. П</В>ушкин</1Х/Р>




D:\My docs\DIALECTV-«mrTutoi\TESTHTMLhtml


памятник сеое воздвиг нерукотворный
К нему не зарастет народная тропа.
(С) А.С. Пушкин


Рис. 2.6. Для того чтобы уменьшить расстояние между
строками, замените дескриптор <Р> дескриптором <BR>

Обратите внимание: дескриптор <BR> — одиночный. У него нет парного за-
крывающего дескриптора. И неудивительно: ведь этот дескриптор "работает" не
на участке текста, а в той точке, где он поставлен.
Интересно, что и для дескриптора <Р> указывать парный закрывающий дескрип-
тор не обязательно. Броузер сам "закрывает" предыдущий абзац, когда начинается
следующий. Но полагаться на броузер в таких делах можно далеко не всегда. По-
пробуйте не закрыть дескриптор <1> или <в> — сами увидите, что получится.
Понятно, что код HTML-страницы читают не только броузеры, но и
люди. Вы уже завтра захотите что-нибудь добавить или исправить. Что-
бы было проще разбираться в хитросплетениях дескрипторов, использу-
ют следующие приемы.
Правильная расстановка отступов и абзацев. Как вы уже знаете, любое коли-
чество пробелов, абзацев и табуляций, поставленных в HTML-коде подряд,
воспринимается броузером как один разделитель между словами. Зато для
тех, кто будет читать и править этот код, они по-прежнему выполняют свое
основное назначение. Эта особенность позволяет разделять логически за-
конченные фрагменты кода, не меняя вид страницы в броузере. Обратите
внимание, что пробелы можно использовать и внутри дескрипторов. Бро-
узер одинаково воспримет <Р align=right> и <Р align = right>.



Глава 2
30
Выделение дескрипторов большими буквами. Броузеру безразлично, в каком
регистре набраны дескрипторы: <Р ALIGN=RIGHT>, <P Align=Right> или
<р align=right>. Некоторые предпочитают писать дескрипторы прописны-
ми буквами, чтобы код HTML-страницы было удобнее читать.
Комментарии. Для той же цели — удобства чтения и правки — служат
комментарии. Комментарий — это часть HTML-кода, которую броузер
не выводит на экран. Комментарии обозначаются так:
<!— Здесь мог быть ваш комментарий —>
Комментарии служат двум целям: в одних случаях они позволяют снаб-
дить пояснениями малопонятный код, а в других — скрыть для броузера
код, который он обрабатывать не должен. Это может быть сценарий,
написанный на каком-нибудь языке программирования, или временно
не используемый фрагмент HTML-кода.


Резюме
Символы перехода на новую строку, используемые для разбиения на абзацы
обычного текста, в коде HTML воспринимаются как обычные пробелы. Поэтому для
создания абзацев в HTML-страницах используются специальные дескрипторы — <Р>.
Для изменения выравнивания абзаца — по левому краю, по правому краю, по
центру и по ширине — используется параметр дескриптора <Р> — align, — при-
нимающий значение left, right, center и justify, соответственно. Так, для вы-
равнивания абзаца по центру используется следующий код:
<Р align = center> Какой-нибудь заголовок
Следует отметить, что, несмотря на то, что дескриптор <Р> — контейнерный,
указывать для него закрывающий дескриптор не обязательно: ведь начало сле-
дующего абзаца — это одновременно и конец предыдущего.
С помощью дескрипторов <Р> текст разбивается на абзацы, согласно традици-
ям англо-американской полиграфии — без красной строки и с увеличенным от-
ступом между абзацами. Для создания красной строки используют символы не-
разрывного пробела Snbsp;, а для уменьшения отступов— дескриптор разрыва
строки <BR>. В последнем случае при переходе на новую строку сохраняется вы-
равнивание, заданное параметром align предыдущего дескриптора <Р>.
Тот факт, что броузер не различает пробелы, табуляции и абзацы в коде HTML-
страницы, а также не реагирует на несколько этих символов, поставленных подряд,
позволяет сделать код читабельнее, не меняя вид страницы в броузере.
Кроме того, для удобства чтения используют также тот факт, что HTML-код
нечувствителен к регистру символов. Часто дескрипторы набирают прописными
буквами, чтобы они четче выделялись среди остального текста.
Наконец, для удобства чтения и правки используются комментарии. Коммен-
тарий в HTML-коде заключается между символами <!— и -->:
<!-- комментарий —>


Абзацы 31
Тесты
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Р> Для того чтобы перейти на новую строку, используется тег <Р>
б) <Р> Для того чтобы перейти на новую строку, используется тег <Р></Р>
в) <Р> Для того чтобы перейти на новую строку, используется тег «Р»</Р>
г) <R> Для того чтобы перейти на новую строку, используется тег «P»</R>
д) «Р» Для того чтобы перейти на новую строку, используется тег Р
2. В каком случае абзац будет выровнен по левому краю?
а) <Р align = center> Этот абзац выровнен по левому краю?
б) <Р align = left> Этот абзац выровнен по левому краю?
в) <Р align = right> Этот абзац выровнен по левому краю?
г) <Р align = justify> Этот абзац выровнен по левому краю?
д) <Р> Этот абзац выровнен по левому краю?
е) <Р align> Этот абзац выровнен по левому краю?
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Р align=center> Этот текст выровнен по центру
б) <Р ALIGN=CENTER> Этот текст выровнен по центру
в) <P_align=center> Этот текст выровнен по центру
г) <Р
align = center> Этот текст выровнен по центру
д) <Р aLiGn=cEnTeR> Этот текст выровнен по центру
е) <Р center = align> Этот текст выровнен по центру
4. Как будет выглядеть в окне броузера следующий фрагмент HTML-страницы?
<р align = right> Где переход на новую строку:
здесь? <BR> Или здесь?
<Р> А может быть, и здесь тоже?
(выберите один из вариантов ответа, предлагаемых на рис. 2.7)




32 Глава 2
i i -> и D
. -. i ВЯ
Й Н . Oi.Hnmm. йим.ч',
-....

D:\My docs\DiALECT\HtmlTutot\TESTHTMLhtrril •



Где переход на новую строку: здесь?
Или здесь?
А, может быть, и здесь тоже?




Где переход на новую строку: здесь?
Или здесь?
А, может быть, и здесь тоже?




D:\My docs\DW-EC^HtmlTuto^TESTHTMLh1ml «



Где переход на новую строку: здесь?
Или здесь? 1
А, может быть, и здесь тоже?

Рис. 2.7. Какой из вариантов соответствует коду,
приведенному в тесте 4?




33
Глава 3

Служебные и "непечатные"
символы
В этой главе...

Ф Специальные символы
t О переносах и их отсутствии


Специальные символы
Некоторые знаки, такие как < и >, являются служебными символами HTML.
Другие, такие как неразрывный пробел и длинное тире, просто нельзя набрать в
программе Блокнот. А на HTML-странице они должны быть — по правилам ор-
фографии или просто для красоты.
Попробуем, например, вставить в HTML-код кавычки. В программе Блокнот
(Notepad) их, конечно, нет. Но они есть в Word. Скопируем их в буфер обмена, а
оттуда — в Блокнот. Посмотрим теперь, что получилось в броузере. Иногда это
срабатывает. Но чаще нас ждет разочарование (рис. 3.1).




Вот слово в угловых кавычках-"елочках"


Рис.3.1. Простой перенос специальных символов
в программу Блокнот с помощью буфера обмена
обычно не приводит к желаемым результатам

Чтобы обойти это досадное ограничение, "строптивые" символы заменяются в
HTML-коде на соответствующие Esc-последовательности (читается "эскейп-
последовательности"). Esc-последовательностью называется ASCII-код символа,
перед которым стоят символы &Л. Именно по этим символам броузер распознает
Esc-последовательность. Например, открывающей и закрывающей угловым скоб-
кам соответствуют Esc-последовательности &I60 и &#62.
Для того чтобы не обращаться то и дело к таблице ASCII-кодов, некоторым
наиболее часто используемым символам присвоены специальные мнемонические
коды, состоящие из знака &, английского сокращенного названия этого символа и
точки с запятой. Их проще запомнить, чем "голые" цифры. (Разумеется, если знать
английский язык.) Например, тем же угловым скобкам соответствуют обозначения
sit (от less than — "меньше") и &gt (от greater than — "больше"), неразрывному про-
белу — snbsp (от non-breaking space), амперсанду (&) — samp, а левой и правой двой-
ным кавычкам ("елочкам") — slaquo и sraquo, соответственно.



В
Как видим, существует несколько видов кавычек и тире. В издательском
деле — и бумажном, и электронном — приняты четкие правила их ис-
пользования.
Кавычки. На клавиатуре компьютера есть только один вид кавычек — ".
Точнее, это и не кавычки вовсе, а двойной штрих — знак дюйма и се-
кунд. Именно он, а также знаки " меньше" (<) и "больше" (>) зачастую
используются в электронных публикациях вместо правой и левой кавы-
чек. Но такое применение этих символов некорректно.
В полиграфии существует три вида кавычек: "елочки" («»), верхние
"лапки" (" ") и рукописные "лапки" („ "). По традиции российской по-
лиграфии основным видом кавычек являются "елочки". Правой и левой
"елочкам" в HTML соответствуют мнемонические коды slaquo; и sraguo;
соответственно. Во многих изданиях вместо "елочек" используются также
верхние "лапки" — это традиция западной полиграфии. Кроме того, верх-
ние "лапки" применяются для вложенных кавычек (рис. 3.2). Левой и
правой верхним "лапкам" соответствуют мнемонические коды sldquo; и
srdquo; соответственно, а нижней левой "лапке" — sbdquo;.
Дефис и тире. В полиграфии существует три знака: длинное тире, короткое
тире и дефис. Из них на компьютерной клавиатуре есть только один — по-
следний. Именно его зачастую и используют во всех случаях, когда в тексте
нужно поставить дефис или тире. Однако существуют четкие правила пунк-
туации относительно того, какой из этих знаков когда используется.
Так, дефис ставится только внутри слов или между цифрами. Длинное
тире, или просто тире (—), ставится между словами в предложении и от-
деляется от этих слов пробелами. Ему соответствует мнемонический код
smdash;. Короткое тире (—) ставится между цифрами без букв или между
словами, набранными прописными буквами, а также используется в
формулах в качестве знака "минус". Между этим знаком и словами про-
бел не ставится. Короткому тире соответствует мнемонический код
Sndash;. Применение дефиса и тире показано на рис. 3.3.

стр. 1
(всего 11)

СОДЕРЖАНИЕ

>>