WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!

Pages:     || 2 | 3 | 4 |
-- [ Страница 1 ] --

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

HTML-страницы Создавать списки и таблицы Помещать в графику Применять технологию каскадных листов стилей Публиковать HTML-документы Web Полонская HTML HTML Е.Л. Полонская Москва • • Киев 2003 32.973.26-018.2.75 П52 Компьютерное издательство "Диалектика" Зав. редакцией Слепцов По общим вопросам обращайтесь в издательство "Диалектика" по адресу:

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. Все названия программных продуктов являются зарегистрированными торговыми марками соответствующих фирм.

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

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 (рус.) © Компьютерное изд-во "Диалектика", Оглавление Введение. Первые "почему" Глава Основные принципы HTML Глава 2. Абзацы Глава 3. Служебные и "непечатные" символы Глава 4. Шрифты Глава 5. Заголовки Глава 6. Логическая разметка гипертекста Глава 7. Списки Глава 8. Графика на Web-странице Глава 9. Гипертекстовые ссылки Глава 10. Табличный дизайн Глава Фреймы Глава 12. Формы Глава 13. Структура Глава 14. Внешние параметры Web-страницы Глава 15. Основные принципы каскадных таблиц стилей Глава Понятие событий Приложение А. Ответы на вопросы тестов Приложение Б. Таблица дескрипторов HTML Приложение В. Коды и мнемонические имена спецсимволов Предметный указатель Содержание Введение. Первые "почему" Почему HTML Почему Notepad Почему HTML не является языком программирования Резюме Тесты Глава 1. Основные принципы HTML Первый опыт "общения" с броузером HTML — язык дескрипторов Первый опыт форматирования: курсив Жирный шрифт и подчеркивание Резюме Тесты Глава 2. Абзацы Как заставить броузер перейти на новую строку Абзац с параметрами Разрыв строки Резюме Тесты Глава 3. Служебные и "непечатные" символы Специальные символы О переносах и их отсутствии Резюме Тесты Глава 4. Шрифты Дескриптор Гарнитура Размер Цвет Шрифт с несколькими параметрами Другие параметры Параметры шрифта по умолчанию Резюме Тесты Содержание Глава 5. Заголовки Уровни заголовков Параметры заголовка Резюме Тесты Глава 6. Логическая разметка гипертекста "Логические" дескрипторы Расстановка акцентов Цитаты Верхние и нижние индексы Имитация бурной деятельности Сокращения Обратный адрес HTML придумал программист... Зачем все это? Резюме Тесты Глава 7. Списки Концепция списков в HTML Нумерованные списки Маркированные списки Параметры элемента списка Многоуровневые списки Списки определений Другие виды списков Резюме Тесты Глава 8. Графика на Web-странице Вставка графики в текст документы на языке WWW Точка единого отсчета Размеры изображения Вместо картинок Обтекание графики текстом Выравнивание по вертикали Картина в раме Отступы Форматы графических файлов Резюме Тесты Содержание Глава 9. Гипертекстовые ссылки Точки входа в гипертекст "Якоря" в море Internet Закладки Ссылки, которые не являются ссылками Ссылки-картинки Виртуальная навигация Резюме Тесты Глава 10. Табличный дизайн Для чего нужны таблицы Из чего состоят таблицы Пример табличного дизайна Горизонтальное выравнивание Вертикальное выравнивание Размеры таблицы Размеры ячеек Внутренние отступы Рамки Частичное отображение рамок Фон таблицы и ячеек Слияние ячеек Заголовок Заголовки строк и столбцов Группировка ячеек Резюме Тесты Глава 11. Фреймы Что такое фреймовая структура Горизонтальные и вертикальные фреймы Размеры фреймов Вложенные фреймы Обрамление и отступы Ссылки Фрейм без фреймов Резюме Тесты Глава 12. Формы Основная схема формы Из чего состоит форма Текстовые строки Кнопки 8 Содержание Текстовые поля Списки вариантов Списки-переключатели Раскрывающиеся списки Резюме Тест Глава 13. Структура HTML-документа Основные параметры Web-страницы Отступы от края окна Цвет фона Цвет текста Резюме Тест Глава 14. Внешние параметры Кто ваши посетители Как страницу Назначение дескриптора <МЕТА> Keywords Description Robots Generator Author и copyright Content-type Expires Refresh Резюме Тесты Глава 15. Основные принципы каскадных таблиц стилей Зачем нужны таблицы стилей Простейшее описание стиля Таблицы стилей Стиль дескриптора Подклассы дескрипторов Описание цветов Задание фона Атрибуты шрифта Атрибуты абзаца Гиперссылки Отступы и рамки Резюме Тесты Содержание Глава 16. Понятие событий Понятие динамического HTML Виртуальные события События мыши События клавиатуры События форм События страницы Резюме Тесты Приложение А. Ответы на вопросы тестов Приложение Б. Таблица дескрипторов HTML Приложение В. Коды и мнемонические имена спецсимволов Предметный указатель Содержание Как читать эту книгу Если эта книга послужит вам приятным послеобеденным чтением, — что ж, буду рада за вас. Но если вы всерьез собрались освоить 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 видеофиль мов и телеканалов, стали реальностью, нужны гораздо более мощные кана лы передачи данных, — такие, которые позволили бы оперировать не сот нями килобайт, а гигабайтами или хотя бы сотнями мегабайт.

Первые Скачайте из 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-страниц заботам г на Гейтса? Заснули, что ли... Ладно, кто против? Нет, похоже, не заснули.

Раз так — возникает следующий вопрос: какой формат самый универсальный?

Очевидно, такой, который прочтет и поймет не только программа, но и, в случае че го, человек. Какой формат для этого лучше всего подходит? Правильно — текстовый.

Если взять обычный текстовый файл и разметить в нем фрагменты, которые нуж но выделить, скажем, курсивом или цветом, обозначить нумерованные и маркиро ванные списки, места вставки рисунков и т.п. (рисунки и другие нетекстовые объекты придется поместить в отдельных файлах), то любой мало-мальски толковый програм мист практически за неделю "нарисует" вам программку, которая бы отображала та кие файлы на экране в более или менее приятно читаемом виде. Вот вам и броузер.

Осталось разработать единую систему разметки текста. Или, точнее, гипертекста, по скольку, кроме собственно текста — и не простого, а форматированного — в нем ведь есть еще картинки, ссылки на другие документы и файлы, а иногда аудио- и даже ви Введение Что у нас получится? Язык разметки гипертекста, или, по-английски, Ну Markup Language — HTML. Вот мы и изобрели велосипед...

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

Поинтересуйтесь. За эту сумму можно устроить себе неплохой летний отпуск. А тек стовых редакторов для ASCII — пруд пруди. Помимо Notepad и редакторов, встроен ных во всяческие на Web-узлах бесплатного ПО их сотни мегабайт.

И это не считая специализированных HTML-редакторов, среди которых тоже немало бесплатных и условно-бесплатных. Если бы вся Всемирная Паутина перешла на стан дарт Word, она бы, пожалуй, быстро лишилась многих небогатых, но законопослуш ных авторов. А поскольку слишком много народу уже жизни не мыслит без Internet, то происходит как раз обратное: Word и весь Microsoft Office, да и другие офисные пакеты, дружно принимают HTML в виде еще одного текстового формата.

Почему Notepad Notepad, он же Блокнот Windows — излюбленный редактор Web-дизайнеров.

Хотя есть много других хороших и не менее уважаемых ими специализированных редакторов для HTML, таких как или HomeSite. Уважают их, глав ным образом, за простоту, доступность, компактность. А еще за невмешательство в творческие дела дизайнера. Все очень просто: вы вводите в редакторе HTML код и любуетесь результатом в окне параллельно работающего броузера. Редактор в лучшем случае ускорит ввод ключевых слов и поможет с синтаксической про веркой. Остальное — за вами.

Другой тип HTML-редакторов — визуальные, такие как известный Microsoft FrontPage Express или гораздо более любимый Web-дизайнерами Macromedia DreamWeaver. Их интерфейс построен по тому же принципу, что и интерфейс текстового процессора, скажем Word. Кстати, Word 2000 или ХР вполне сойдет в качестве визуального HTML-редактора.

Преимущество визуальных HTML-редакторов в том, что для работы с ними можно вообще не знать HTML. К сожалению, визуальные редакторы страдают тем же недостатком, что и трансляторы языков программирования, преобразую щие текст на С или Pascal в ассемблерный код. А именно — неоптимальностью этих самых кодов. Спросите любого программиста, и он вам скажет, что ассемб лерный код, написанный вручную, в несколько раз меньше кода такой же про граммы, написанной, скажем, на Pascal и преобразованной в ассемблерный код с помощью транслятора. Удивляться нечему: решения человека-специалиста всегда красивее решений машины. Зато и труда, и времени они требуют несравнимо больше. Впрочем, вероятно, недалек тот день, когда при загрузке страницы раз ница в несколько килобайтов или даже мегабайтов не будет так заметна, как сей час. Тогда визуальные HTML-редакторы займут на компьютере Web-дизайнера такое же достойное место, какое сейчас занимают на компьютере программиста визуальные среды разработки, такие как, например, Delphi.

Первые "почему" Увы, этим грехи визуальных редакторов не исчерпываются. Часто страница выглядит в броузере совсем не так, как до этого она выглядела в окне редакто ра. Приходится лезть в длинный, запутанный код, искать там ошибки и вруч ную их исправлять.

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

Где взять хороший HTML-редактор?

HTML-редакторов множество, и у каждого из них есть свои и недостатки. Поэтому однозначно сказать, какой именно вам подойдет лучше всего, нельзя. Одним нравится HomeSite, другим — 1st Page, треть им — или Easy HTML. Или другой из десятков им подоб ных. Здесь все в конечном счете сводится к личным вкусам.

Для того чтобы подобрать редактор по душе, советую посетить несколь ко Web-хранилищ бесплатного и условно-бесплатного программного обеспечения и там подобрать себе редактор по душе и по карману. По этому вместо того, чтобы сравнивать редакторы (тем более что регуляр но появляются новые версии с новыми функциями), я лучше приведу несколько адресов, по которым стоит обратиться.

• 1st Page:

• Arachnophilia:

• HomeSite: www.macromedia.com • Easy HTML:

• Также виртуальные архивы ПО: (www.freesoft.ru), (www.listsoft.ru), и др.

Почему HTML не является языком программирования Многие ошибочно называют HTML языком программирования. К сожалению, это не так. И дело здесь даже не в том, что у HTML нет компилятора, а только встроенный в броузер интерпретатор: BASIC и JavaScript тоже обходятся одними интерпретаторами, но это не мешает им называться языками программирования.

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

Введение Резюме Язык 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 HomeSite д) Netscape Navigator Opera ж) Mozilla Notepad и) PhotoShop к) Google.com 2. Что из нижеперечисленного можно использовать для просмотра HTML страницы?

Первые "почему" 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 HomeSite д) Netscape Navigator Opera ж) Mozilla Notepad и) Windows к) Linux л) PhotoShop м) Google.com Введение Глава Основные принципы HTML В этой главе...

Первый опыт "общения" с броузером HTML — язык дескрипторов Первый опыт форматирования: курсив Жирный шрифт и подчеркивание Первый опыт "общения" с броузером Итак, Notepad открыт, рукава засучены, в глазах — огонь... Приступим.

Прежде всего давайте разберемся: что "понимает" и чего "не понимает" бро узер? Для этого создадим в Notepad обычный текстовый файл. Можно написать там что-то вроде:

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

И сохраним. Назовем его, скажем, testhtml.

Теперь откроем созданный файл в броузере. Это можно сделать двумя спосо бами: с помощью команды Файл Открыть (File Open), либо перетащив пик тограмму из Проводника или файлового менеджера в окно броузера.

Несмотря на все усилия сообщества Internet, жесткого стандарта HTML до сих пор не существует. Некоторые конструкции языка отображаются в раз ных броузерах по-разному. А иногда не воспринимаются вовсе, и тогда по сетители Web-страницы видят на экране нечто невообразимое... Поэтому хороший Web-дизайнер обязательно проверяет свои работы в нескольких броузерах. В качестве "джентльменского набора" можно предложить Explorer, Netscape Navigator, Opera. Причем желательно предпоследние вер сии: как бы ни была привлекательна идея "идти в ногу со временем", самые новые версии, как правило, содержат ошибки, которые будут исправлены через несколько месяцев, да и немногие пользователи успели их установить.

Получилось? Повезло вам с броузером...

Не текст, а абракадабра? Смените кодировку. С помощью команды Кодировка (Coding) или чего-то похожего, что находится в меню Вид (View). Более точное название команды зависит от броузера. Попробуйте разные виды кириллицы, на чиная с Windows и КОИ8-Р. Забегая вперед, отметим, что, вообще-то, первая обязанность Web-дизайнера — избавить от необходимости подобных действий. И не такая уж обременительная — нужно всего лишь поставить в нача ле документа специальный дескриптор...

HTML — язык дескрипторов Что-что поставить в начале?..

Дескриптор.

"Вехи", которыми размечают гипертекст, называются дескрипторами (tags). В обычном, некомпьютерном английском языке слово tag означает "признак", "метка", "маркер". Дескриптор в HTML — это некое ключевое слово или сокра щение, которое служит признаком того или иного форматирования данной части документа. Для того чтобы дескриптор можно было отличить от остального тек ста, его заключают между знаками "больше" и "меньше": <ДЕСКРИПТОР>.

Многие дескрипторы принадлежат к контейнерному типу: в них, как в контей нер, заключается фрагмент текста, форматирование которого определяется этим дескриптором, — например, выделение курсивом или "привязка" гиперссылки.

Контейнерные дескрипторы всегда парные: каждому открывающему дескриптору соответствует одноименный закрывающий, причем закрывающий дескриптор от личается от открывающего тем, что начинается с косой черты (заметьте — обыч ной, а не обратной, к которой вы, возможно, привыкли, работая в Windows):

Я хочу, чтобы <ДЕСКРИПТОР1> ЭТО можно было прочесть в броузере!

Встречаются и неконтейнерные, одинарные дескрипторы. Они не содержат текста, который нужно так или иначе отформатировать, а определяют характери стики документа в целом или описывают объект, который нужно вставить в дан ной точке документа, например картинку. Такие дескрипторы не имеют закры вающих "двойников":

Я хочу, чтобы ЭТО <ДЕСКРИПТОР2> можно было прочесть в броузере!

Контейнерные дескрипторы, как правило, могут быть вложенными друг в дру га, как матрешки:

<ДЕСКРИПТОР2> В результате и выводятся без форматирования, и — с форматированием, описываемым дескриптором а текстЗ — с форматированием, опи сываемым дескрипторами 1 и 2. Таким образом, свойства двух дескрипторов как бы на кладываются друг на друга, в результате чего достигаются разнообразные эффекты.

Пример такого эффекта будет рассмотрен в конце этой главы.

Главное правило при использовании вложенных дескрипторов — соблюдать последовательность: первым закрывается дескриптор, открытый последним. Соб ственно, как и при сборке 20 Глава Первый опыт форматирования: курсив А теперь попробуем что-нибудь отформатировать с помощью дескрипторов.

Вспомним: как мы, например, привыкли в Word делать текст курсивным? Вы деляем текст и щелкаем на соответствующей кнопке, или просто нажимаем . Кстати, в Word с английским интерфейсом на кнопке тоже нарисована буква I, а не К. Почему I? Потому что по-английски курсив — Italic. В HTML для того же действия существуют дескрипторы и Текст, помещенный между ними, отображается в броузере курсивом.

Попробуем?

Заключим, например, в "курсивные" дескрипторы слово ЭТО:

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

Сохраним файл и "освежим" картинку в броузере. Если вы его еще не закры ли, можете воспользоваться командой Вид о Обновить (View Refresh). В неко торых броузерах для этого есть специальная клавиша. Например, в IE это .

Ну как, нравится (рис. Лично мне — не очень.

Похоже, броузер по-прежнему отказывается принимать наш текст за HTML.

Попробуем его перехитрить — изменим расширение файла, ничего не меняя внут ри. Вы, наверное, сохранили файл с тем расширением, что предлагал Notepad.txt. А нужно — или He ищите HTML в списке типов Notepad — тип-то все равно Просто при сохранении введите не только имя файла, но и расширение: Ну вот, теперь другое дело (рис. 1.2).

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

Рис. 1.2. Для того чтобы броузер воспринимал содержимое файла как HTML-код, этот файл должен иметь расширение или Жирный шрифт и подчеркивание Как вы думаете, какие дескрипторы соответствуют жирному шрифту и под черкиванию? По аналогии с Word, жирному должен соответствовать дескриптор <В> (от слова Bold), а подчеркиванию — (от Underline). Так и есть. Конечно же, эти дескрипторы, как и являются контейнерными, т.е. имеют соответст вующие закрывающие "пары".

Впрочем, увлекаться дескриптором не рекомендуется. Ведь на Web страницах подчеркиванием традиционно обозначаются гиперссылки (см.

главу 9), и посетители к этому привыкли. Вряд ли имеет смысл обманы вать их ожидания только лишь красивости ради.

А что нужно сделать, чтобы слово это выводилось жирным шрифтом, а первая буква э — еще и курсивом? Правильно, использовать вложенные дескрипторы и <В> (рис. 1.3).

I хочу, чтобы было прочесть -...

. - 3 ' *.

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

Рис. 1.3. С помощью вложенных дескрипторов и <В> достигается эффект полужирного курсива Глава Резюме Для того чтобы броузер воспринимал содержимое текстового файла как HTML-код, этот файл должен иметь расширение или Разметка гипертекста средствами HTML происходит путем вставки в текст де скрипторов — специальных кодовых слов, определяющих элементы форматирова ния. Для чтобы дескрипторы отличались от остального текста, их заключают между знаками "больше" и "меньше", например: , , <В>.

Дескрипторы бывают контейнерные (парные) и неконтейнерные (одинарные), причем первые встречаются чаще. Контейнерный дескриптор состоит из двух частей — открывающего и закрывающего дескрипторов, — между которыми на ходится форматируемый текст, например:

текст курсивом Закрывающий дескриптор отличается от наличием косой черты.

Контейнерные дескрипторы бывают вложенными, например:

курсив <В> жирный курсив курсив При использовании вложенных дескрипторов нужно следить за их последова тельностью: дескриптор, открытый первым, закрывается последним.

Тесты 1. Какой Или какие из следующих фрагментов HTML-кода содержат ошибку?

а) Зачем КРИЧАТЬ, когда можно мягко б) Текст курсивом:

в) Многие дескрипторы принадлежат к 2. Какой или какие из следующих фрагментов HTML-кода не содержат ошибки?

а) Увлекаться дескриптором не рекомендуется б) С помощью вложенных дескрипторов и «В» достигается эффект полужирного курсива в) Контейнерные дескрипторы бывают вложенными, например:

г) Разметка гипертекста средствами HTML происходит путем вставки в текст 3. Как будет выглядеть в окне броузера следующий фрагмент HTML-страницы?

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

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

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

(с) Я К народная (С) Я памятник себе воздвиг нерукотворный, К нему не зарастет народная тропа. (С) А.С. Пушкин Рис. Попытка разбить текст на абзацы: первый блин комом По идее, подпись Пушкин" должна получиться курсивной, а инициалы и первая буква фамилии — еще и жирными. Так и есть (рис. 2.1). Но где переход на новую строку после запятой? Где пустая строка между стихами и подписью? И самое главное — как сделать, чтобы все это было?

Броузеру безразлично, какой разделитель стоит между словами в HTML-коде:

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

Для того чтобы разделить текст на абзацы, в HTML применяется дескриптор <Р> — от английского что в переводе означает вовсе не "параграф" (как было бы логично с точки зрения русского языка), а именно "абзац". Что ж, по пробуем иначе:

<Р>Я памятник себе воздвиг нему не зарастет народная Уже лучше (рис. 2.2).

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

(С) Пушкин Рис. 2.2. Абзацы в HTML размечаются с помощью дескриптора <Р> А как увеличить отступ после стихов перед подписью? Наверное, нужно вста вить пустую строку, как в Word? Скажем, так:

<Р>Я памятник себе воздвиг нему не зарастет народная М-да... Похоже, "пустой" абзац для броузера просто не существует (рис.

А что, если абзац будет не пустым? Если заполнить его чем-то видимым для узера, но невидимым для нас? Скажем, пробелом или табуляцией (см. рис. 2.3):

<Р>Я памятник себе воздвиг нему не зарастет народная.

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

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

(С) А.С. Пушкин Рис. 2.3. Простая вставка "пустой" строки в коде не позво ляет увеличить отступ между строками в броузере. Запол нение ее пробелами также не дает желаемого результата |<Р>Я себе воздвиг нему не зарастет народная 1<Р>(С) } Я памятник себе воздвиг нерукотворный, К нему не зарастет народная тропа.

(С) А.С. Пушкин Рис. 2.4. Для того чтобы вставить в текст "пустую" строку, используйте символ неразрывного пробела Придется пойти на хитрость: заменить обычный пробел неразрывным. Основ ное назначение неразрывного пробела — разделять слова, но запрещать в этом месте переход на новую строку. Но здесь мы воспользуемся другим его свойст если обычный пробел (а также, кстати, и табуляция) расценивается броузе ром как отсутствие символа, то неразрывный пробел для него — полноценный символ, хоть и невидимый. Что и требуется.

Но как ввести пробел в Notepad? С помощью специального обозначения — (подробнее об этом читайте в главе 3):

<Р>Я памятник себе воздвиг нему не зарастет народная Вот теперь (рис. 2.4) — другое дело!

Абзац с параметрами Действительно, неразрывный пробел — полезная вещь: его можно использо вать и для "красных строк", и вообще везде, где нужно изобразить отступ или ос тавить немного свободного места.

А если много? Как, например, разместить подпись А.С. Пушкин не с левого, а с правого края строчки?

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

Конечно же, такая возможность есть — с помощью параметров дескриптора <Р>.

Параметры для дескрипторов HTML — обычное дело. У большинства дескрипто ров HTML есть параметры. Благодаря им язык разметки гипертекста становится бо лее гибким, появляется больше возможностей при меньшем количестве дескрипто ров. Параметры и их значения вписываются между именем дескриптора и закрываю щей угловой скобкой. Если параметров несколько, то они разделяются пробелами:

<ДЕСКРИПТОР параметр2=значение2...> У дескриптора <Р> всего один параметр — Он принимает одно из четырех значений — left, right, center или justify. Как вы уже, вероятно, догадались, этот параметр "отвечает" за выравнивание текста — соответственно по левому или пра вому краю, по центру или по обоим краям сразу. Впрочем, значение justify под держивается не всеми броузерами, хотя в IE проблем не возникает.

По умолчанию обычно текст выравнивается по левому краю, что соответствует ко ду <Р Попробуем отформатировать наш пример по-другому (рис. 2.5):

<Р>Я памятник себе воздвиг нему не зарастет народная <Р align=right>(c) Ура, заработало!

28 Глава <Р>Я народная <Р Я памятник себе воздвиг нерукотворный, К нему не зарастет народная тропа.

(С) А.С. Пушкин Рис. 2.5. Выравнивание абзаца по правому краю с помощью параметра align Вероятно, вы уже заметили, что абзацы в HTML выглядят иначе, чем в книгах. В "бумажной" литературе абзац — это текст, который начинается с новой строки, причем первая строка абзаца, как правило, "красная", т.е.

начинается с некоторым отступом относительно остальных строк.

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

И абзац с отступами — одно из простейших средств добиться этого.

Разрыв строки А нельзя ли как-нибудь уменьшить расстояние между строками в нашем при мере? Великовато оно. Но в дескрипторе <Р> подходящего параметра нет.

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

• по умолчанию в новой строке сохраняется тип выравнивания, присвоенный всему абзацу;

• расстояние между новой строкой и предыдущими строками абзаца равно расстоянию между остальными строками абзаца.

Абзацы Именно это нам и требуется. Теперь лишние абзацы, в том числе и "невидимый", можно убрать (рис. 2.6):

<Р>Я памятник себе К нему не зарастет народная <Р align=right>(c) Как раз то, что нам нужно!

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

(С) А.С. Пушкин Рис. 2.6. Для того чтобы уменьшить расстояние между строками, замените дескриптор <Р> дескриптором
Обратите внимание: дескриптор
— одиночный. У него нет парного за крывающего дескриптора. И неудивительно: ведь этот дескриптор "работает" не на участке текста, а в той точке, где он поставлен.

Интересно, что и для дескриптора <Р> указывать парный закрывающий дескрип тор не обязательно. Броузер сам "закрывает" предыдущий абзац, когда начинается следующий. Но полагаться на броузер в таких делах можно далеко не всегда. По пробуйте не закрыть дескриптор или <в> — сами увидите, что получится.

Понятно, что код HTML-страницы читают не только броузеры, но и люди. Вы уже завтра захотите что-нибудь добавить или исправить. Что бы было проще разбираться в хитросплетениях дескрипторов, использу ют следующие приемы.

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

30 Глава Выделение дескрипторов большими буквами. Броузеру безразлично, в каком регистре набраны дескрипторы: <Р

или <р align=right>. Некоторые предпочитают писать дескрипторы прописны ми буквами, чтобы код HTML-страницы было удобнее читать.

Комментарии. Для той же цели — удобства чтения и правки — служат комментарии. Комментарий — это часть HTML-кода, которую броузер не выводит на экран. Комментарии обозначаются так:

Здесь мог быть ваш комментарий Комментарии служат двум целям: в одних случаях они позволяют снаб дить пояснениями малопонятный код, а в других — скрыть для броузера код, который он обрабатывать не должен. Это может быть сценарий, написанный на каком-нибудь языке программирования, или временно не используемый фрагмент HTML-кода.

Резюме Символы перехода на новую строку, используемые для разбиения на абзацы обычного текста, в коде HTML воспринимаются как обычные пробелы. Поэтому для создания абзацев в HTML-страницах используются специальные дескрипторы — <Р>.

Для изменения выравнивания абзаца — по левому краю, по правому краю, по центру и по ширине — используется параметр дескриптора <Р> — align, — при нимающий значение left, right, center и justify, соответственно. Так, для вы равнивания абзаца по центру используется следующий код:

<Р align = center> Какой-нибудь заголовок Следует отметить, что, несмотря на то, что дескриптор <Р> — контейнерный, указывать для него закрывающий дескриптор не обязательно: ведь начало сле дующего абзаца — это одновременно и конец предыдущего.

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

Тот факт, что броузер не различает пробелы, табуляции и абзацы в коде HTML страницы, а также не реагирует на несколько этих символов, поставленных подряд, позволяет сделать код читабельнее, не меняя вид страницы в броузере.

Кроме того, для удобства чтения используют также тот факт, что HTML-код нечувствителен к регистру символов. Часто дескрипторы набирают прописными буквами, чтобы они четче выделялись среди остального текста.

Наконец, для удобства чтения и правки используются комментарии. Коммен тарий в заключается между символами и

Многие шрифты в Windows представлены целыми семействами: отдель ный файл для полужирного шрифта, отдельный — для курсива и т.д.

Можно ли, например, написать так:

Нет, нельзя. В качестве значения параметра face следует использовать не имена файлов со шрифтами и не те имена, под которыми эти шриф ты указаны в окне шрифтов Windows, а те, под которыми они фигури руют в броузере. (См. также раздел "Другие Размер Не знаю, как у кого, но со мной при первом знакомстве с правилами задания шрифтов в HTML случился легкий шок... Почему? Сейчас поймете.

Как задается размер шрифта в текстовом процессоре? Очень просто, в пунк тах. Неважно, что в лучшем случае один из сотни пользователей знает, что такое 44 Глава пункт. Главное, что даже новичок уже через десять минут ориентируется в этих размерах и может выбрать нужный.

В дескрипторе также можно задать размер шрифта с помощью парамет ра size. Но как! Не в пунктах и не в миллиметрах, а в неких безымянных едини цах от 1 до 7. Это напоминает размеры одежды: все знают, что L больше, чем М, и меньше, чем XL — и только. Так и в HTML, size =1 — самый мелкий шрифт, size=7 — самый крупный. Ничего более определенного сказать нельзя.

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

Но какой после этого смысл в параметре size (рис. 4.5)?

size = шрифт шрифт 6 шрифт html - Mi...

a D D ] Это Это шрифт размера Эта шрифт Это шрифт размера Это шрифт размера Это шрифт размера Это шрифт размера Это шрифт размера Это шрифт размера Это шрифт разм Это шрифт размера Это шрифт Это шрифт размера Это шрифт Рис. 4.5. Код одинаковый, а размер шрифта разный. Так получается по тому, что параметр size определяет размер шрифта относительно того, который установлен в броузере Шрифты Что ж, наведем некоторый порядок. Очевидно, указывать абсолютный размер шрифта, например , имеет смысл далеко не всегда. Гораздо перспек тивнее выглядит возможность указать относительный размер — относительно то го, что установлен по умолчанию. Для этого нужно перед цифрой поставить знак.

Так, например, соответствует шрифту, который меньше текущего на две единицы, a — большему текущего на три единицы (рис. 4.6). Кстати, с помощью такого кода можно без труда убедиться, что по умолчанию шрифт броузера соответствует size=3.

шрифт на шрифт стандартного на стандартного Этот шрифт стандартного на шрифт больше стандартного на 2 Этот шрифт стандартного на Этот шрифт на Этот шрифт стандартного на Этот шрифт меньше стандартного на Этот шрифт стандартного размера Этот шрифт больше стандартного на Этот шрифт больше стандартного на Этот шрифт больше стандартного на Этот шрифт больше стандартного на Рис. 4.6. Такой код позволяет убедиться, что по умол чанию шрифт броузера соответствует size= А что будет, если приращение слишком большое? Например, относительно стандартного размера? Попробуем и посмотрим.

Ничего особенного: просто броузер "округляет" значение до ближайшего прием лемого, т.е. до +4 и -3, соответственно (рис. 4.7).

Глава FONT стандартного на шрифт больше на 5? PXFONT шрифт стандартного на 2 PXFONT шрифт на т Этот шрифт больше стандартного на Этот шрифт больше стандартного на 5?

Рис. 4.7. Если значение параметра превышает до пустимый диапазон, то оно "округляется" до ближайшего приемлемого значения Цвет По умолчанию текст Web-страницы выводится черным по белому. Так проще, так привычнее, так легче читать. Но ведь очень часто хочется сделать иначе: что то сделать более ярким, где-то изменить цвет "под настроение".

Для того чтобы изменить цвет текста, в дескрипторе предусмотрен па раметр color:

Стоп.

Как задать цвет в текстовом HTML-коде?

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

С броузером — примерно такая же история. Каждый цвет в обо значается числом, перед которым стоит знак например:

Чем не "марсианский" язык?

Впрочем, разобраться в этом "языке" не так сложно, как кажется на первый взгляд. Цвет пикселя на экране монитора составляется так же, как и в телевизоре — Шрифты из красной, зеленой и синей точек разной яркости. Именно яркость этих трех точек задается кодом. Первые два знака соответствуют яркости красной точки, вторые зеленой, третьи — синей. Поэтому формат цвета в HTML часто обозначают как (от английских слов Red — красный, Green — зеленый и Blue — синий). Яр кость каждой составляющей измеряется целым числом, которое в десятичной системе исчисления находится в пределах от 0 до 255, а в — от 00 до FF.

Даже если вы когда-нибудь занимались программированием, вряд ли вам понра вится подбирать цвета "на ощупь", меняя цифры и просматривая результат в броузе ре. Тем более вам не захочется заучивать на память все миллионов цветов, которые можно закодировать таким образом. А точнее, даже больше: = 16777216.

Но это и не нужно. Многие цвета, кроме кода, имеют собственные названия.

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

Если же понадобится что-то совсем необычное, можно воспользоваться од ним простым приемом. Заключается он в следующем. В любом графиче ском редакторе, будь то Corel DRAW, Photoshop или обычный Windows Paint, есть "палитра" для смешивания цветов. Из нее можно узнать интен сивность трех составляющих любого цвета. Правда, в десятичной форме.

Для того чтобы получить их значения, можно восполь зоваться калькулятором Windows, переведя его в "инженерный" режим.

Проведем небольшой эксперимент. Проверим, действительно ли цвету mediumaquamarine соответствует код Для этого выполним следую щие 1. Создадим HTML-страничку с таким кодом:

Проверка цвета: mediumaquamarine 2. Запустим Windows Paint и откроем нашу страничку в броузере.

3. Скопируем окно броузера в буфер обмена с помощью комбинации клавиш + Print Screen> и поместим его в Paint с помощью комбинации клавиш или .

4. Выберем инструмент "пипетка" и щелкнем на интересующем нас цвете.

5. Выберем команду Палитра о Изменить палитру и в появившемся диалоговом окне щелкнем на кнопке Определить цвет. А вот и то, что нам нужно, интен сивности составляющих: красный — 102, зеленый — 205, синий — 170.

6. Запускаем калькулятор и с помощью команды Вид Инженерный перево дим его в расширенный режим.

7. Вводим интенсивность, например красного цвета (она у нас равна 102), и переходим на исчисление (режим Hex). Что написано в "окошечке"? Правильно, 66.

48 Глава 8. Возвращаемся в десятеричный режим (Dec) и повторяем то же для зеленой и синей составляющих. Получаем CD и АА соответственно. Сошлось?

Или не сошлось?

Вспомним: код цвета определяется из расчета, что всего у нас больше миллионов цветов. Это соответствует режиму монитора True Color. Если ре жим другой, то цвет, указанный в HTML-коде, отсутствует в палитре мони тора, и броузер автоматически заменяет его другим, ближайшим. Отсюда и возможное несоответствие "измеренного" и закодированного цветов.

Естественно, чем меньше цветов отображает монитор, тем заметнее подоб ные несоответствия. Как же теперь быть: ведь у разных посетителей сайта разные мониторы?

Как правило, различия не настолько существенны, чтобы серьезно влиять на качество дизайна и тем более на интерес к странице. А для тех случаев, когда это все-таки важно, существует специальная таблица из "рекомендованных" цветов, разработанная компанией Netscape, — так на зываемая "палитра Netscape". Эти цвета одинаково отображаются во всех режимах монитора — от 256-цветного до True Color.

Шрифт с несколькими параметрами А как описать в HTML-коде шрифт, который отличается от стандартного и цветом, и размером, и гарнитурой? Если речь идет об одном фрагменте, то, разу меется, используется дескриптор с несколькими параметрами:

Порядок перечисления параметров значения не имеет. С тем же успехом мы могли бы написать:

Текст крупным Courier Помните, что разделителями между параметрами дескриптора HTML слу жат пробел, табуляция или символ перехода на новую строку. Разделение параметров запятыми или точками с запятой (как это делают по привычке программисты) приведет к неверному отображению страницы в броузере.

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

Предположим, нам нужно разметить текст следующим образом: выделить фразу моноширинным шрифтом, в нем несколько слов увеличить на две единицы, и еще некоторые буквы, например, те, на которые падает ударение, вывести дру гим, более ярким цветом. Тогда код будет выглядеть так:

A Courier Шрифты Помните, что каждый вложенный дескриптор нуждается в собственном за крывающем дескрипторе, даже если эти дескрипторы одинаковые. Нельзя "закрыть" несколько дескрипторов одним Код наподобие Это обычный текст. A этот текст напечатан Courier приведет к тому, что внутренний дескриптор будет за крыт, а внешний — нет, и весь остальной текст на странице будет выводиться шрифтом Courier.

Обратите внимание, что дескриптор можно размещать в середине слова.

В результате слово не разобьется на части, если только не поставить справа или слева от дескриптора пробелы. Пробелы внутри дескриптора не влияют на слитное или раздельное написание слова.

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

Некоторые из таких возможностей восполняются с специальных деск рипторов. С тремя такими дескрипторами — <В>, и — вы уже знакомы.

Для зачеркнутого текста используются дескрипторы и . Их название произошло от английского слова что в переводе означает... правильно, зачеркивание (ну никакой фантазии, Оба дескриптора реализуют одно дей ствие: вывод текста, перечеркнутого одинарной горизонтальной чертой (рис. 4.8).

я

:

Рис. 4.8. Для отображения перечеркнутого тек ста используются дескрипторы и Глава Зачем нужны два одинаковых дескриптора с разными названиями?

Здесь все до смешного просто. Стандарт HTML, как любой живой язык, — неважно, компьютерный или разговорный — развивается. То, что в процессе использования оказалось неудобным, изменяется, разные части "притираются" друг к другу. Вспомните: то, что раньше называли "кинематографом", сейчас зовут просто "кино", вместо длинного "таксомотор" говорят просто "такси". Если вы сегодня скажете прияте лю, что посетили кинематограф и на обратном пути взяли таксомотор, он, возможно, удивится, но вас поймет. То же и в HTML: вначале был придуман длинный дескриптор . Потом его название показалось чересчур длинным, и его сократили до . Но если вы напишете в коде , броузер вас поймет... И даже не удивится.

А как реализовать на Web-странице другие спецэффекты буквы, мигающий текст, "малые прописные"? К сожалению, многое из того, что в тек стовых редакторах обычно сосредоточено в одном диалоговом окне, в HTML от носится к разным элементам языка. В частности, многое вы найдете в каскадных таблицах стилей (см. главу 15). А если чего-то не окажется и там, придется вос полнять пробелы одного языка — HTML — возможностями другого — JavaScript (см. главу 16). Наконец, если все эти средства не обеспечат нужного эффекта, ос тается одно: нарисовать желаемое в графическом редакторе и вставить надпись на Web-страницу в виде картинки.

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

Дескриптор определяет параметры шрифта по умолчанию. В отличие от , дескриптор не является контейнерным и не имеет закрываю щего дескриптора: его действие распространяется до конца Web-страницы или до следующего дескриптора (рис. 4.9). Поэтому, если определяет параметры шрифта для всей его часто выносят в заголовок (см. главу Шрифты По весь текст выводится Резюме Параметры шрифта — гарнитура, размер, цвет — в HTML задаются с помо щью дескриптора . Это контейнерный дескриптор, определяющий свойства заключенного в него текста.

Гарнитура задается с помощью параметра face. Кроме собственно имени шрифта, значением может служить список имен шрифтов. В этом случае броузер выбирает первый из списка шрифт, который есть на компьютере пользо вателя. Если же такого шрифта нет, параметр face игнорируется. Поэтому реко мендуется все надписи с нестандартной гарнитурой делать в графическом редак торе и вставлять в HTML-страницу в виде изображений (см. главу 8).

Размер шрифта определяется параметром size и выбирается из ряда от 1 до По умолчанию используется шрифт размера 3. Реальный размер текста в окне броузера зависит от размера шрифта, установленного пользователем для просмот ра страниц. Поэтому чаще в дескрипторе задается относительный размер шрифта. Так, например, запись означает, что дальше будет исполь зоваться шрифт на 2 единицы крупнее предыдущего.

Цвет шрифта определяется параметром color и задается по формуле где RR, GG и ВВ — двузначные числа, обозначающие интен сивность красной, зеленой и синей составляющих, соответственно. Кроме того, для стандартных 140 цветов существуют мнемонические имена, которые также можно использовать при определении параметра color.

Глава Если необходимо указать несколько параметров дескриптора , то они перечисляются в произвольном порядке через пробел, например: могут быть вложенными.

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

Тесты 1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

Этот текст набран другим б) Этот текст набран другим в)

Этот текст набран другим размером б) Этот текст набран другим размером г) Этот текст набран другим размером д) Этот текст набран другим размером 3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

Этот текст набран другим з) Этот текст набран другим 4. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

Этот текст набран мелким шрифтом и красным б) Этот текст набран красным цветом и мелким Шрифты в) Этот текст набран красным цветом и мелким г) Этот текст набран красным цветом и д) Этот текст набран красным цветом и Этот текст набран красным цветом и Этот текст набран красным цветом и 5. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

color=blue> Синий текст б) Синий текст color=yellow> Желтый текст в) Синий текст 54 Глава Глава Заголовки В этой Уровни заголовков Параметры заголовка Уровни заголовков Во многих текстовых процессорах есть такая функция: если некоторый текст служит заголовком, его можно выделить соответствующим образом, использовав этого один из специально предусмотренных стилей. Вместо того чтобы раз выполнять одни и те же действия — выделять текст более крупным и шрифтом, выравнивать его по центру страницы и т.п., — достаточно присвоить этому фрагменту стиль соответствующего заголовка.

В HTML такая возможность тоже есть. Здесь предусмотрено 6 уровней товков. Первый уровень соответствует самому крупному заголовку, шестой — са мелкому. Для разметки заголовков используются дескрипторы вида <Нл>, где — первая буква английского слова header (заголовок), а л — номер заголовка, 1 до 6. Каждый заголовок выводится шрифтом своего размера и начинается с строки. Дескрипторы заголовков являются парными: текст заголовка по внутри конструкции <Нл>... (рис. 5.1).

Как и большинство парных дескрипторов HTML, дескрипторы заголов ков нужно закрывать. Если этого не сделать, возможны самые неожи данные и, как правило, нежелательные эффекты.

Зато ставить дескриптор абзаца для перехода на новую строку не нужно:

броузер сам понимает, что заголовки — такая вещь, которая всегда на чинается с новой строки и после которой опять нужно перейти на но вую строку. Вот вам преимущества логической разметки!

Поиск уровня 2 уровня уровня Ч уровня 5 уровня 6 уровня 7? Такого html а О I Заголовок уровня Заголовок уровня I Заголовок уровня Заголовок уровня Заголовок уровня уровня Заголовок уровня 7? Такого нет Рис. 5.1. В HTML предусмотрено уровней заголовков Вообще-то, заголовки — вещь важная и нужная. В первую очередь для того, чтобы текст проще читался. Сравните сами, что приятнее глазу:

страница или экран со сплошным "слепым" текстом, без единого цвет ного пятна или крупной буквы, где буквально не за что "зацепиться"?

Или текст, разбитый на логически законченные части с по мощью заголовков разного уровня? Вопрос, по-моему, риторический.

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

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

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

Обычно на Web-страницах используют 1-2 уровня заголовков, хотя в от дельных случаях, — например, если речь идет о большой книге, — вло женность может доходить до четырех уровней.

Но в HTML таких уровней шесть! Для чего они?

Глава Запас никогда не помешает. для того, чтобы использовать заголовки не подряд, а через один. Скажем, если нам нужна двухуровне вая вложенность, то мы вовсе не обязаны использовать обязательно за головки и <Н2>. Вместо этого можно воспользоваться, например, <Н2> и <Н4> или любыми другими, и таким образом подобрать нужное соотношение размеров.

уровня Здесь что-то написано уровня что если не дескриптор Н <НЗ>Загоповок уровня 3 и здесь что-то как заголовок Н 3 D do у Заголовок уровня Здесь написано обычным шрифтом Заголовок уровня Вот что бывает, если не закрыть дескриптор Н Заголовок уровня И здесь что-то написано... как заголовок Н Рис. 5.2. Если не закрыть дескриптор заголовка, возможны самые неожиданные эффекты. Но если он закрыт, следую щий текст всегда начинается с новой строки Параметры заголовка Итак, у нас есть средство для разметки заголовков и подзаголовков страницы.

не слишком ли оно однообразно? В конце концов, это всего лишь вариации тему размера шрифта в пределах одного абзаца.

Есть ли у дескрипторов <Нл> параметры?

Разумеется. И это те же параметры, что и у дескриптора <Р>. Точнее, один па абзаца — выравнивание (align). Как и обычные абзацы, заголовки по выравниваются по левому краю. Но с помощью параметра align их южно выровнять по правому краю или по центру (рис. 5.3).

А как же с другими параметрами? Ведь заголовки часто отличаются не только раз шрифта и выравниванием, но и цветом, и гарнитурой, да мало ли еще чем?

|<НЧ уровня выровнен по правому краю <Н5 уровня 5 по центру <Н6 уровня 6 face и не html - Ми т.

Заголовок уровня — выровнен по правому краю Заголовок уровня выровнен по центру Заголовок уровня А параметр t можно было и не указывать Рис. 5.3. К дескрипторам заголовков при меним тот же параметр align, что и к обычным абзацам Что ж, ответ на этот вопрос такой же, что и на вопрос об аналогичном форма тировании обычного абзаца: используйте другие средства. Благо в HTML их хва тает. Например, средства уже известного вам дескриптора . Или же средст ва пока неизвестных вам каскадных таблиц стилей (см. главу 15). Наконец, если заголовки представляют собой нечто уж вовсе экзотическое, можно заменить текст рисунком (см. главу 8).

Однако есть еще один аргумент в пользу применения дескрипторов <Нл>, а не, например, графики или обычного текста. Текст, заключенный внутри заголовочной конструкции, пользуется особым вниманием поис ковых серверов. Именно по нему они определяют тему страницы и при нимают решение о помещении ее в тот или иной раздел электронных каталогов. Подробнее об этом вы узнаете из главы 14.

Резюме Для выделения более крупным и жирным шрифтом в HTML ис пользуются дескрипторы <Нл>, где л — цифра от 1 до 6. Заголовок 1 уровня выво дится самым крупным шрифтом, заголовок 6 уровня самым мелким.

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

Заголовки почти во всем похожи на абзацы, размечаемые с помощью дескрип тора <Р>: сами они и следующий за ними текст всегда начинается с новой строки, а для более точного форматирования используется тот же параметр, что и у деск риптора <Р> — align. Однако, в отличие от дескриптора <Р>, в заголовках преду смотрены только три значения этого параметра — left, right и center. Остальные параметры текста, как и в обычном абзаце, определяются другими средствами, в частности с помощью дескриптора .

Кроме того, дескрипторы заголовков, в отличие от дескрипторов абзаца <Р>, обязательно нужно закрывать. Иначе весь текст до конца страницы по умолча нию будет считаться заголовком соответствующего уровня.

Тесты 1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

а) <Н1> Это заголовок первого уровня б) <Н1> Это заголовок первого уровня в) <Н1> Это заголовок первого уровня 2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

а) <Н1> Это заголовок
из двух строк б) <Н1> Это заголовок <Р> из двух строк в) <Н1> Это заголовок <Н2> из двух строк г) <Н1> Это заголовок <Н2> из двух строк 3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

а) <Н1>Это заголовок, выровненный по левому б) г) <Н1 заголовок, выровненный по центру д) <Н1 заголовок, выровненный по Заголовки Глава Логическая разметка гипертекста В этой главе...

"Логические" дескрипторы Расстановка акцентов Цитаты 4 Верхние и нижние индексы Имитация бурной деятельности Сокращения Обратный адрес Зачем все это?

HTML придумал программист...

"Логические" дескрипторы Откровенно говоря, понятия "логической" и "физической" разметки Web-стра довольно условны. Говоря так, противопоставляют жесткую привязку к особенностям страницы выделению на ней логически цельных элементов.

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

Готово? Тогда давайте сравним.

Действительно, дескрипторы, "отвечающие" только за внешний вид текста, — , , ,

,
, , — относятся к средствам разметки. Однако дескрипторы заголовков однозначно попадают в разряд ведь они не столько описывают видимые свойства текста, сколько его роль на странице.

Действительно, до сих пор мы в основном имели дело с дескрипторами "физического" типа. Восполним этот пробел и рассмотрим другие логические де скрипторы языка HTML.

Расстановка акцентов Что мы делаем, когда хотим обратить внимание читателя на что-то важное?

Правильно, выделяем важное курсивом. Или полужирным. Или подчеркиваем.

Или еще как-нибудь.

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

Для этого в HTML предусмотрено несколько средств (рис. 6.1).

- I С <Р>Я С дескриптора дескриптор для (Hypertext С помощью дескриптора <ЕМ> выделяются важные моменты.

А С помощью дескриптора выделяются очень важные моменты.

Наконец, дескриптор применяется для определений:

HTML (Hypertext Markup Language). Язык разметки электронных гипертекстовых документов.

Рис. 6.1. Варианты выделения важных фрагментов текста с помощью логических дескрипторов HTML Как поступают в книгах, когда хотят сакцентировать внимание читателя на нескольких важных словах? Правильно, выделяют эти слова курсивом. Для этого в HTML есть "физический" дескриптор Но, кроме него, специально для вы деления важных моментов имеется дескриптор <ЕМ>. Его название происходит от английского слова — постановка ударения, выделение, подчеркивание.

Дескриптор <ЕМ> является парным. Все, что заключено внутри конструкции , обычно выводится курсивом.

Глава Действительно, из всего прочитанного текста в первую очередь запоминается то, что было напечатано курсивом (разумеется, при условии, что остальной текст был обычным). А как сделать, чтобы какое-то слово или несколько слов букваль но бросались в глаза еще прежде, чем читатель примется за чтение? Обычно для этого используют более крупный или, по крайней мере, жирный шрифт. Как это делается на "физическом" уровне, вы уже знаете — с помощью дескриптора <В>.

Если же вам не хочется вникать в подробности того, как именно будет выделен данный текст — лишь бы заметно выделялся, — можно воспользоваться дескрип тором . Этот дескриптор, как и <ЕМ>, парный: все, что заключено между и , обычно выводится на экран жирным шрифтом.

Наконец, бывает не просто важная информация, а нечто такое, чему в последую щих фразах дается определение. Например, как в словарях. Для логической разметки таких терминов используется дескриптор (от английского — "опреде ление"). Обычно содержимое конструкции отображается курсивом.

Цитаты Согласно правилам русского языка, цитаты заключаются в кавычки. Это в электронных публикациях нам придется делать самостоятельно так же, как если бы мы писали ручкой на бумаге в линеечку.

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

Более длинные — на несколько предложений — цитаты часто выделяют в отдель ный абзац, чтобы текст лучше воспринимался.

Для разметки коротких цитат применяется дескриптор Все, что находится конструкции обычно выделяется Для больших цитат используется дескриптор Все, что находится между и выносится в отдельный абзац с отступом (рис. 6.2).

разметка гипертекста очень нравятся строки Пушкина:

Я чудное мной явилась Как гений чистой красоты.

бессонной ночи, проведенной у меня тоже Мне очень нравятся строки Пушкина:

Я помню чудное мгновенье, Передо мной явилась ты, Как мимолетное виденье, как гений чистой красоты.

После бессонной ночи, проведенной у монитора, меня тоже стали посещать «мимолетные Рис. 6.2. Короткие цитаты обычно выделяются курсивом с помощью де скриптора длинные — выносятся в отдельный абзац с помощью дескриптора Верхние и нижние индексы Как известно, текст верхних и нижних индексов выводится более мелким шрифтом и располагается соответственно выше или ниже уровня строки. Конеч но, можно изобразить нечто отдаленно похожее на нижний индекс, используя просто мелкий шрифт (рис. 6.3), а если приложить еще больше усилий, — то да же верхний индекс. Но так будет еще менее аккуратно.

Для того чтобы упростить Web-дизайнеру жизнь, в HTML предусмотрены деск рипторы и Их названия происходят от английских слов subscript и su perscript, что означает "нижний индекс" и "верхний индекс", соответственно. Оба эти дескриптора парные. Все, что попадает внутрь конструкции , вы водится более мелким шрифтом и на полстроки ниже основного текста, а все, что попадает внутрь конструкции , — на полстроки выше основного тек ста и также более мелким шрифтом. Сравните код, где используются дескрипторы и (рис. 6.4), с кодом, представленным на рис. 6.3.

Глава серной й Формула серной кислоты А уравнение Эйнштейна Рис. 6.4. Но с помощью дескрипторов и можно добиться большего эффекта Некоторые часто играющие роль верхнего и нижнего как °, ™, встречаются в распространенных шрифтах. Что предпочесть: их или специальные дескрипторы индексов — решать вам.

Главное, чтобы соответствующий шрифт нашелся и на компьютере по сетителя вашей странички (см. также главу 4).

Имитация бурной деятельности Следующие средства позволяют создать у посетителя впечатление вашей ин тенсивной работы над обновлением страницы.

Регулярность обновления страницы — вопрос весьма важный. Если стра ница не обновляется месяцами, то ее станут посещать все реже и однажды вовсе прекратят это делать. Однако слишком частое обновление содержи мого страницы может потребовать от вас неоправданных затрат времени и сил. О том, как часто стоит обновлять страницу, читайте в главе 13.

Логическая разметка гипертекста Что обычно является первым признаком того, что над бумажным документом как следует поработали? Поздно сдан? В какой-то степени, да, но нам это не подходит.

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

Да, но ведь на то он и электронный, чтобы даже после основательной пере делки не содержать помарок! Их остается только имитировать.

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

Для разметки удаленного текста используется дескриптор . Его название происходит от английского слова delete (удалить). Внешне удаленный текст выгля дит так же, как текст, заключенный внутри конструкции (рис. 6.5).

Это <Р>Я Это и размеченный дескриптором .

А это — размеченный дескриптором .

Рис. 6.5. Текст, размеченный как удаленный, выглядит на экране так же, как текст, заключенный внутрь конструкции Хорошо, с зачеркнутым текстом мы разобрались. А как имитировать вставки? В "бумажных" документах такие места обычно выглядят мало привлекательными: в лучшем случае над строкой появляется широкая "птичка", а над ней — то, что нужно вставить. О том, как выглядят менее аккуратные вставки, лучше не вспоминать...

В электронных документах даже помарки выглядят аккуратнее. Например, в Microsoft Word исправления, вставленные в текст, выделяются подчеркиванием.

Как разметить подчеркнутый текст, мы уже знаем: с дескриптора Но это — простое подчеркивание. Для того чтобы указать, что это не просто так от форматированный фрагмент, а текст, вставленный после долгих раздумий, использу ется логический дескриптор (от английского insert — "вставка"). — пар ный дескриптор;

текст, помещенный внутри конструкции , считается вставленным и отображается на экране как подчеркнутый (рис. 6.6).

Глава Последнее обновление <Р align=center> Последнее обновление было сегодня Рис. 6.6. Разметка вставленных и удаленных фрагментов поз воляет сделать работу над сайтом видимой для посетителя Сокращения Вам, вероятно, знакома ситуация: вы читаете текст, изобилующий сокраще ниями, их значение разъясняется где-то далеко вначале, искать все это лень, а иначе непонятно, о чем речь...

В Web-документах такая проблема решается с помощью дескриптора Сам по себе он не дает визуальных эффектов и используется главным образом ради параметра title. Значение этого параметра выводится на экран рядом с указателем мыши, если "навести" последний на интересующее вас слово (рис. 6.7).

разметки УеЬ-страниц используется (ACRONVM Markup используется язык Рис. 6.7. Вывод контекстной подсказки с по мощью дескриптора Обратный адрес Одним из дежурных элементов, кочующих из статьи в письмо, из письма — в новостное сообщение, является подпись. Иногда с указанием званий, должностей и прочих регалий. Часто с адресом, когда — электронным, а когда и обычным, по которому данный субъект получает зарплату или проедает оную.

Логическая разметка гипертекста Для разметки подобных элементов используется дескриптор. Это парный дескриптор. То, что заключено между и как прави ло, выводится курсивом и отдельным абзацем (рис. 6.8).

у вас по D Если у вас возникнут вопросы, пишите мне по адресу:

Рис. 6.8. Для разметки подписи, в которую часто входит и адрес, используется дескриптор HTML придумал программист...

Именно такая мысль приходит в голову, когда встречаешь в HTML целый "букет" средств для описания различных программных кодов и результатов их работы. Впрочем, использовать эти средства по назначению вовсе не обязательно.

В своей Web-дизайнерской практике (а я надеюсь, со временем она станет весьма богатой!) вы наверняка найдете им самое разнообразное применение.

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

А как быть, если речь идет о большом фрагменте в несколько строк?

Первое, что приходит в голову, — код наподобие этого:

<Р> первая строка программы <Р> вторая строка программы <Р> Ради экономии места можно заменить дескрипторы <Р> на
. Наконец, комбинируя абзацы с разрывами строк, можно разделять логически обособленные фрагмента кода (рис. 6.9).

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

68 Глава И успешно избавились, введя дескриптор

 (от английского — "с сохранением форматирования"). Этот дескриптор замечателен тем, что внутри кон струкции 
все пробелы, табуляции и переходы на новую строку со храняются в том виде, в котором они были введены в HTML-редакторе.

Представьте себе, что фрагмент программы:

<Р>начало первого блока.

первого блока <Р>начало второго блока второго блока Представьте себе, что это фрагмент программы:

начало первого блока..

конец первого блока начало второго блока... содержимое..

конец второго блока Рис. 6.9. Один из вариантов больших фраг ментов кода — с помощью дескрипторов ,

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

Содержимое конструкции всегда выводится на экран с новой строки. Поэтому предварять такой текст дескриптором <Р> не обязательно.

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

Логическая разметка гипертекста Это переменные. А в HTML для разметки переменных есть специальный деск риптор (от английского variable — "переменная"). Воспользуемся им (рис. 6.11). Что получилось в результате? Внешне — тот же курсив. Но, кроме того, такая разметка сообщает броузеру о назначении данного фрагмента.

Вот иэ квадратных

 
Вот система из двух квадратных уравнений:

Рис. 6.10. Внутри дескриптора

 сохраняются отступы и но для специальных символов по-прежнему используются их коды, а для элементов форматирования — соответствующие дескрипторы JOT иэ двух квадратных для и 
 = C/PRE> Вот система из двух квадратных уравнений для переменных х и у:

Рис. 6.11. Благодаря дескриптору имена пере менных выделяются. В данном случае, курсивом Какие еще есть элементы в описаниях программ, кроме фрагментов кодов и переменных? Правильно, текст, вводимый пользователем и примеры текста, вы водимого программой на экран. Первый размечается с помощью дескриптора Глава (от английского keyboard — "клавиатура"), второй — с помощью дескрип тора (от английского sample — "образец", "пример"). В окне броузера оба вида текста отображаются моноширинным шрифтом.

Зачем все это?

Зачем же столько дескрипторов, если результат зачастую одинаковый?

Уточним: пока одинаковый.

Кто знает, как будут обходиться с логическими дескрипторами будущие бро узеры и что они вообще станут с ними делать? Например, они могут "проговаривать" некоторые элементы текста, используя систему синтеза речи... И вообще, кто знает, что нам готовит будущее! Вероятно, именно поэтому многие средства HTML сделаны как бы "на вырост", и в справочниках рядом с ними то и дело встречаешь пометки: "пока не используется ни в одном "Физические" и Часто, когда нам встречаются подобные диаметрально противоположные пары свойств или вещей, хочется спро сить: "А какие И не менее часто ответом на этот вопрос служит фраза: "Смотря что вам нужно".

В действительности сейчас существует тенденция постепенной замены физической разметки гипертекста на логическую. Главной причиной этого является желание унифицировать вид электронных документов в соответствии с устоявшимися традициями и правилами, а также — что упростить анализ таких документов поисковыми систе мами. Задача таких систем — понять, о чем говорится в тексте и помес тить его в соответствующий раздел электронного каталога. Если в тексте уже на стадии верстки будут выделены главные элементы, эта задача значительно упростится. Подробнее об этом читайте в главе 14.

Резюме Все дескрипторы HTML можно условно разделить на две большие категории "физические" и "логические", т.е. такие, которые определяют только внешний вид документа, и такие, которые несут информацию о его логической структуре.

К "физическим" дескрипторам относятся такие, как уже знакомые нам , , , а к "логическим" - дескрипторы выделения главного <ЕМ> и , определений , цитат и нижнего и верхнего ин декса и , удаленного и вставленного текста и , сокращений, адресов программных фрагментов , переменных , ввода с клавиатуры и вывода на экран и Несмотря на то, что многие "логические" дескрипторы дублируют друг друга в смысле внешних эффектов, они полезны: благодаря им, во-первых, упрощается анализ страницы поисковыми системами Internet (см. главу 14), а во-вторых, дос тигается единообразие оформления страниц и их соответствие полиграфическим правилам и традициям.

Логическая разметка гипертекста Тесты 1. Дескриптор является аналогом:

а) дескриптора ;

б) дескриптора <ЕМ>;

в) дескриптора г) дескриптора 2. Какой или какие из следующих фрагментов кода содержат ошибки?

дальше QUOTE>. Народ ная мудрость б) дальше Народная мудрость в) дальше Народная мудрость г) разметки д) язык разметки гипертекста е) Формула этилового ж) Формула этилового 3. Какой из фрагментов состоит из двух абзацев?

дальше бу народная мудрость б) дальше в) дальше г) Народная мудрость д) дальше Народная мудрость 4. Какие из следующих пар фрагментов отображаются в броузере одинаково?

язык язык разметки гипертекста разметки гипертекста б)

а) Сама + Саша + <В>Маша = Дружба = Дружба 72 Глава б) Саша + + Дружба = Дружба в) Саша + Саша + = Дружба = Дружба 6. Какие из следующих пар фрагментов отображаются в броузере одинаково?

а) Вот фрагмент HTML-кода:

 Вот фрагмент HTML-кода: 
 курсив подчеркнутый 
б) Вот фрагмент HTML-кода:
 Вот фрагмент HTML-кода:  
в) Вот фрагмент HTML-кода:
 Вот фрагмент 
г) Вот фрагмент HTML-кода:
 Вот фрагмент HTML-кода:  
U> д) Вот фрагмент HTML-кода:
 Вот фрагмент HTML-кода:   7. Какие из следующих пар фрагментов отображаются в броузере одинаково?

а) Дескриптор Дескриптор предназначен для отображения верхнего предназначен для отображения индекса верхнего индекса б) Дескриптор Дескриптор предназначен для предназначен отображения верхнего индекса для отображения верхнего индекса г) Дескриптор Дескриптор

Концепция списков в HTML Нумерованные списки Маркированные списки Параметры элемента списка Многоуровневые списки Списки определений Другие виды списков Концепция списков в HTML Автоматическое создание списков — очень удобная функция текстовых про цессоров и причина первых у многих новичков. Это понятно: вместо того чтобы следить за нумерацией и отступами, можно уделить больше внимания логическому построению перечня и другим более важным вещам. Программа са ма расставит нужные цифры, проследит за их форматированием. Кроме вместо плюсов и черточек, которые используют в ненумерованных списках ма шинистки, можно подобрать приличествующие случаю кружки, "птички" и т.п.

Как создать список в HTML?

Конечно, можно поступить просто, т.е. как секретарь машинистка: самому ввести цифры и маркеры, лично проследить за отступами (рис. 7.1). Получится почти как на пишущей машинке. Даже лучше.

Есть ли другой, более простой и изящный способ? Разумеется, есть.

Все списки в HTML — как нумерованные, так и ненумерованные (маркиро ванные) — размечаются по единому принципу, с помощью двух видов парных де скрипторов. Внутри первого заключается весь список. Этот дескриптор определя ет тип списка и его параметры в целом. Каждый элемент списка заключается внутри дескриптора второго типа, который определяет параметры данного эле мента. Если обозначить эти дескрипторы как <Д1> и <Д2>, то общая структура списка будет выглядеть так:

<Д1 параметры всего <Д2 параметры 1 <Д2 параметра элемента 2 <Д2 3>Элемент 3 того чтобы список нужно:

Bce это достойно J Для того чтобы создать список вручную, нужно:

Терпение.

2. Внимание.

3. И еще:

терпение;

внимание.

Все это достойно лучшего применения.

Рис. 7.1. Даже вручную можно создать достаточно слож ный список Нумерованные списки Для создания нумерованных списков используется пара дескрипторов

    и Название первого происходит от английского ordered list — "упорядоченный список", а название второго — от английского item ("элемент списка").

    Попробуем разметить список по уже знакомой нам схеме: поместить весь спи сок внутрь конструкции

, а каждый элемент — в отдельную конст рукцию
  • ...
  • (рис. 7.2). Похоже, мы, действуя по привычке, ввели в код много Убрав нумерацию — она теперь выполняется автоматически, — а также став шие ненужными пробелы и разрывы строк, получаем очень простой и изящный код (рис. 7.3).

    Хотя дескриптор и парный, закрывать его не обязательно: его "закроет" следующий дескриптор или закрывающий дескриптор (а вот последний Дескриптор <Р> в начале следую щего за списком абзаца также можно опустить: текст после закрываю щего дескриптора списка всегда начинается с новой строки.

    Глава 1ля того чтобы создать список с помощью дескрипторов нужно:

      весь список внутрь конструкции каждый списка, Для того чтобы создать список с помощью дескрипторов HTML, нужно:

      \. Поместить весь список внутрь конструкции 2. 2. Заключить каждый элемент списка внутрь Рис. 7.2. Разметив список с помощью дескрипторов HTML, обнаруживаем, что многие вещи стали лишними того чтобы список дескрипторов

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

        Поместить весь список внутрь конструкции

          .

          2. Заключить каждый элемент списка Внутрь Рис. 7.3. При такой разметке нумерация выполняется ав томатически Списки Отлично. Но как теперь изменить нумерацию, например, чтобы она начиналась не с единицы, а с нуля? Или например, заменить арабские цифры латинскими?

          В текстовых процессорах для этого используются специальные функции, оп ределяющие свойства всего списка. В HTML для этого есть параметры дескрип тора

            — start и type.

            По умолчанию нумерация списка всегда начинается с единицы (start=l). Для того чтобы она начиналась, например с нуля (как любят программисты), нужно указать в дескрипторе

              параметр start=0 (рис. 7.4).

              - Б любят начинать с

              я.

              Программисты любят начинать отсчет 0. раз;

              1. два;

              2. три.

              Рис. 7.4. Начальный номер списка определяется параметром start Попробуем теперь заменить нумерацию с арабской на латинскую. Для этого нам понадобится параметр type. Он может принимать одно из пяти значений: А, a, I, i или 1, которые соответствуют типам нумерации: большими латинскими буквами (А, В, С,...), малыми латинскими буквами (а, с,...), большими рим скими цифрами (I, II, III, IV,...), малыми римскими цифрами (i, ii, Hi, iv,...) и арабскими цифрами (1, 2, 3,...). Таким образом, нам нужно присвоить параметру type значение I (рис. 7.5).

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

              78 Глава Вот нумерация латинскими цифрами:

              Рис. 7.5. Для того чтобы изменить тип нуме рации, используется параметр type Маркированные списки Как известно, кроме нумерованных списков, т.е. таких, где важен порядок следования элементов, есть такие, где важен только их перечень. Вместо цифр или букв в них используют маркеры — точки, черточки, кружки. Такие списки называют маркированными.

              Для разметки маркированных списков в HTML применяется тот же принцип, что и для нумерованных списков, только вместо дескриптора

                используется дескриптор Как нетрудно догадаться (если, конечно, знать английский), его название происходит от английского unordered — "неупорядоченный список".

                Что получится, если в рассмотренном выше примере заменить дескриптор

                  на
                    ? Нумерация исчезнет, а вместо цифр в начале каждой строки появятся характерные жирные точки (рис. 7.6).

                    А как заменить эти точки на что-то другое, например на "птички"?

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

                    Часть первая, короткая: у дескриптора как и у

                      , есть параметр type.

                      и определяет вид маркера.

                      Часть вторая, из-за которой ответ становится длинным: параметр type прини мает только три значения: circle, disc и square. По умолчанию он равен disc, что и соответствует жирным точкам. Значение circle означает маркеры в виде ма леньких окружностей, a square — в виде квадратиков (рис. 7.7).

                      Списки того чтобы с нужно:

                        весь список внутрь конструкции списка внутрь
                      Для того чтобы создать маркированный ;

                      список с помощью дескрипторов HTML, нужно:

                      • Поместить весь список внутрь конструкции

                        .

                        • Заключить каждый элемент списка внутрь Рис. 7.6. Вот что получается, если заменить дескриптор на В HTML есть только три типа

                            В HTML есть только три типа маркеров:

                            • о окружности;

                            квадратики.

                            Рис. 7.7. В HTML предусмотрено только три вида маркеров: жирные точки, окружности и квадратики Глава Наконец, часть третья, длинная: что делать, если хочется использовать нестан дартные маркеры?

                            Отказаться от разметки списка и сделать все самому. Лично проследить за маркерами и отступами. А, возможно, и собственноручно нарисовать эти самые маркеры в Photoshop (см. главу 8).

                            Возможно, однажды в новую версию стандарта HTML будут внесены необ ходимые изменения — то ли увеличится количество маркеров, то ли будет предусмотрена возможность вставки в качестве маркеров любых символов.

                            А пока остается использовать то, что есть или верстать списки вручную.

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

                            Некоторые Web-дизайнеры используют такой прием: формируют список, пользуясь только дескрипторами Попробуем так сделать и мы (рис. 7.8). Что получается? Маркированный список без горизонтальных отступов. И с полным пренебрежением к абзацам. Похоже, если навести порядок с последними, то та кая конструкция вполне имеет право на существование.

                            Бывает и такая список одних только дескрипторов о дескрипторах :писок без отступов.

                            > !

                            Бывает и такая разметка:

                            . формируем список из одних только дескрипторов • а о дескрипторах

                              забываем, • и список без отступов.

                              Рис. 7.8. Если убрать дескрипторы получится мар кированный список без отступов Параметры элемента списка А как быть, если параметры некоторых элементов одного списка отличаются от остальных? Неужели только из-за этого нужно дробить список на мелкие час ти, как это сделано на рис. 7.7?

                              К счастью, у нас есть возможность оптимизировать HTML-код. Для этого нужно воспользоваться параметрами дескриптора а именно параметром type (рис. 7.9).

                              Списки 3 три типа (LI (LI (LI В HTML есть только три типа маркеров:

                              • о окружности;

                              • квадратики.

                              Рис. 7.9. Благодаря использованию параметра type в де скрипторе можно менять тип маркера внутри списка А теперь вопрос на сообразительность: что определяет и какие значения при нимает параметр type дескриптора в нумерованных списках? Предупреждаю, вся информация, необходимая для того, чтобы дать правильный ответ, вам уже известна. На всякий случай — вдруг вы что-то подзабыли — перечитайте на чало этой главы еще раз... Ну как, ответ готов? Тогда читайте дальше.

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

                                . И изменяет его значение. Например, весь список может нумеро ваться арабскими цифрами, а один из элементов — римскими (рис. 7.10).

                                Зот список со смешанной Вот список со смешанной нумерацией:

                                I. раз;

                                2. два;

                                3. три.

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

                                Таким образом, параметр type в дескрипторе дополняет и расширяет воз можности одноименного параметра дескрипторов

                                  и Возможно, у вас уже вертится на языке вопрос: а есть ли у дескриптора параметр, дополняю щий параметр start и позволяющий "нарушить" последовательность нумерации, не изменяя ее типа? Например так: 1, 2, 3, 5, 6?

                                  Если такой вопрос у вас возник, то вы мыслите в правильном направлении.

                                  Действительно, у дескриптора есть такой параметр, и называется он value (от английского value — "значение"). Этот параметр определяет не только номер данного элемента списка, но и номера последующих элементов (рис.

                                  Вот список с

                                    • Вот список с «нарушенной» нумерацией 1. раз;

                                    2. два;

                                    6. три?

                                    7.

                                    Рис. 7.11. Параметр value позволяет "нарушить" последовательность нумерации Многоуровневые списки И еще один вопрос, который у многих уже, наверное, давно вертится на язы ке: как быть с многоуровневыми списками? В Microsoft например, для этого есть целая вкладка диалогового окна со множеством вариантов этих самых списков. А как в HTML?

                                    А в HTML многоуровневых списков нет.

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

                                    Списки, I цифрами html латинскими Списки бывают:

                                    1. a также вложенные;

                                      • нумерованные:

                                      1. арабскими цифрами;

                                        2. большими римскими цифрами;

                                        3. малыми римскими цифрами;

                                        4. большими латинскими буквами;

                                        • a также вложенные.

                                          5. малыми латинскими буквами;

                                          1. а также вложенные;

                                          • маркированные:

                                          о кружками;

                                          о о • а также вложенные.

                                          Рис. Многоуровневые списки создаются из обычных списков, вложенных друг в друга Списки определений Об этом виде списков вспоминают достаточно редко. В большинстве случаев, когда хочется сделать красиво, воображение "зацикливается" на выборе того или иного маркера. Как будто единственное, от чего зависит красивый и аккуратный дизайн, — это пресловутые "птички" или кружочки!

                                          На самом деле достаточно часто — гораздо чаще, чем кажется на первый взгляд — можно использовать еще один вид списков. Это так называемые списки определений.

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

                                          Но очень часто списки строятся по принципу: сначала короткая фраза или слово (как правило, выделенное полужирным шрифтом или как нибудь иначе), потом более подробное разъяснение. Такие фрагменты можно организовать по-разному, в зависимости от общего вида страни цы: можно как обычные абзацы, а можно — как списки определений.

                                          Из чего состоит такой список? Очевидно, из термина, который нужно описать, и самого описания. Следовательно, сколько дескрипторов для этого нужно? По первой прикидке — два: для термина и для описания. Да, пожалуй, понадобится еще один для разметки самого списка, как для нумерованного и для маркированного.

                                          Глава Так и есть: весь список определений заключается внутрь парного дескриптора

                                          (от английского definition list — "список определений"), термин — внутрь де скриптора
                                          (от английского definition term — "определяемый термин") и каждое описание — внутрь дескриптора
                                          (от английского definition description — "описание определения"). Общий вид списка определений показан на рис.

                                          список

                                          Hypertext Markup язык разметки языка HTML.

                                          Вот список определении:

                                          HTML | Hypertext Markup Language, язык разметки гипертекста.

                                          Дескриптор Элемент языка HTML.

                                          Рис. 7.13. Список определений: дескрипторы

                                          ,
                                          и
                                          "отвечают" только за отступы. За осталь ным форматированием приходится следить самому Как видим, конструкция, образованная дескрипторами
                                          и
                                          , обес печивает использование следующих элементов форматирования:

                                          * отступ между предыдущим абзацем, списком и следующим абзацем;

                                          * каждый термин находится в отдельной строке;

                                          * каждое описание термина также находится в отдельном абзаце, причем сдвинуто вправо относительно термина.

                                          И все. Если мы хотим выделить определения еще как-нибудь, например цве том или полужирным шрифтом, придется делать это вручную.

                                          Здесь уместно вспомнить о различиях между физической и логической разметкой. Можно выделить определения с помощью, например деск риптора <В> или а можно воспользоваться уже известным нам деск риптором для разметки определений — .

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

                                          Списки Вначале уберем дескрипторы и

                                          . Что получилось? Пропали отступы между списком и окружающими его абзацами. Кроме того, исчез отступ между термином и определением. Сохранилась только "красная строка", а остальные строки абзаца начинаются вровень с другими абзацами (рис.

                                          список Language, гипертекста языка HTML.

                                          Вот список определений:

                                          HTML Hypertext Markup Language, язык разметки гипертекста.

                                          Дескриптор Элемент языка HTML.

                                          Рис. 7.14. Если убрать дескриптор исчезают вертикальные отступы между списком и другими абзацами, а также горизонтальные отступы между терминами и их определениями Что ж, такой эффект вполне имеет право на существование. Иногда отступы выглядят красиво, а иногда лучше без них.

                                          Попробуем теперь убрать дескрипторы

                                          . По идее, они должны "отвечать" за остальное, а именно, за то, что описания начинаются с новой строки. Так и есть:

                                          убрали

                                          — и определения объединились с терминами в один абзац Что ж, такой вариант разметки тоже вполне имеет право на существование. Пожа луй, для нас он даже привычнее, чем "классический" список определений. Только следует помнить о том, что по правилам русского языка в таких случаях после терми на перед его описанием обязательно ставится какой-нибудь знак препинания — точ ка, если дальше следует отдельное предложение, а если нет, то двоеточие или тире.

                                          Другие виды списков Стандартом HTML предусмотрены еще два вида списков: каталоги и меню.

                                          Первый описывается дескриптором

                                          (directory list), а второй — дескриптором . Их способ применения и параметры ничем не отличаются от способа применения и параметров дескриптора
                                            .

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

                                            Вот список определений:

                                            Hypertext Language, гипертекста.

                                            языка HTML.

                                            Вот список определений:

                                            HTML Hypertext Markup Language, язык разметки гипертекста.

                                            Дескриптор Элемент языка HTML.

                                            Рис. 7.15. Если в коде списка определений убрать дескрипторы

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

                                            Маркированные списки описываются дескриптором Его параметр type определяет вид маркера — квадратики (square), (disc) и "пустые" окруж ности (circle). По умолчанию параметру type присваивается значение disc.

                                            Нумерованные списки описываются дескриптором

                                              . Этот дескриптор име ет два параметра: type, определяющий способ нумерации, и start, определяю щий, с какой буквы или цифры она будет начинаться. Параметр type дескриптора принимает значения 1, I, i, А или а, что соответствует нумерации арабскими, большими и малыми римскими цифрами, а также большими или малыми латин скими буквами. Других вариантов нумерации, в частности буквами кириллицы, к сожалению, не предусмотрено.

                                              Элементы нумерованных и маркированных списков размечаются с помощью дескрипторов

                                            1. . Этот дескриптор имеет те же параметры* что и дескриптор всего списка: если список нумерованный, то это type и start, а если маркирован то только type. Параметры дескриптора имеют более высокий приори тет, чем параметры всего списка и, таким образом, позволяют изменить порядок нумерации или вид маркера.

                                              Для организации многоуровневых списков со смешанной нумерацией исполь зуются вложенные дескрипторы

                                                и вместо очередного блока ставится вложенный список.

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

                                                ,
                                                и
                                                . Дескриптор опи сывает весь список в
                                                — определяемый термин, a
                                                — определение.

                                                Кроме того, в стандарте HTML предусмотрены еще два вида списков — ката логи (дескриптор

                                                ) и меню (дескриптор ). Однако эти дескрипторы не получили распространения, и размеченные ими списки в большинстве броузеров отображаются как обычные маркированные.

                                                Тесты 1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

                                                • Первый элемент списка Второй элемент списка б) start=circle> Первый элемент списка
                                                • Второй элемент списка
                                                в) type=l> Первый элемент списка Второй элемент списка г) type=circle>
                                              • Первый элемент списка Второй элемент списка
                                              2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

                                              a)

                                              1. Первый элемент списка Второй элемент списка 88 Глава start=circle> Первый элемент списка
                                              2. Второй элемент списка
                                              в)
                                                Первый элемент списка Второй элемент списка г)
                                                  Первый элемент списка Второй элемент списка 3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

                                                  Pages:     || 2 | 3 | 4 |





    © 2011 www.dissers.ru - «Бесплатная электронная библиотека»

    Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
    Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.