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-код нечувствителен к регистру символов. Часто дескрипторы набирают прописными буквами, чтобы они четче выделялись среди остального текста.

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

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

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

Как вы уже знаете, в 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 рабочих дней удалим его.