Учебное пособие 2140

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

5.3.2. Внимание к мелочам

Известно, что объединение крупных объектов в составе любой композиции является сложной задачей. Огромные буквы в заголовках, кнопки навигации высотой 40 пикселов, верстка в одну колонку шириной 600 пикселов, разделитель одного цвета, растянутый на весь экран, — все это придает дизайну непрофессиональный вид. Если же добавить в элементы дизайна мелкие детали, а крупные объекты визуально разбить на более мелкие (например, применив градиентную заливку), — картина значительно улучшится. Вот что конкретно можно предпринять для «размельчения» дизайна.

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

По возможности применяйте верстку в несколько колонок. При этом «разбивайте» колонки и по вертикали, выделяя их части, например, разными цветами (или оттенками одного цвета).

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

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

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

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

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

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

5.3.3. Гармоничное сочетание цветов

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

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

5.3.4. Гармоничное сочетание шрифтов

Очень важная область дизайна — типографика, шрифтовое решение композиции» К сожалению, в отличие от печатных изданий, современные web-возможности ограничены двумя группами очень похожих и не очень красивых шрифтов: рублеными (Aria], Verdana etc.) и антиквами во главе с Times New Roman. Все остальные шрифты могут оказаться не установленными на компьютере пользователя, и их использование регулярно приводит к невозможности посетителем прочесть ваше послание

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

Не используйте декоративные и стилизованные шрифты — например, рукописные, церковно-славянские, имитирующие штамповку на

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

5.3.5. Следите за модой

Мода диктует свои условия и в web-дизайне. Хорошим примером модного сайта является web-узел http://www.samsung.ru или, например, новый дизайн web-сайта баннерной сети RLE (Russian LinkExchange) http://web.linkexchange.ru:8080/. Мода очень активно действует на рынке,

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

5.3.6. Обеспечьте удобства посетителям сайта

Важным критерием качества web-сайта является удобство его использования посетителем. В русский язык даже введено английское слово «юзабилити» (usability), которое как раз и обозначает «удобство использования». Этот критерий требует особенно внимательно относиться к разработке системы навигации. Правильно разработанная система навигации позволяет пользователю найти интересующий его материал максимум за два щелчка. Всегда оставляйте для посетителя возможность перехода на главную страницу сайта. Кроме этого, не забывайте, что очень много людей попадают на ваши страницы через поисковые системы, то есть не на первую страницу. Хороший сайт должен позволить читателю перейти на первую страницу, для чего дублируйте навигационную систему на всех страницах или сделайте так, чтобы они по крайней мере имели переход на основную страницу. Если вы выполняете навигационную панель графическими средствами, обязательно сделайте ее текстовую копию и поместите где-нибудь снизу (текст в любом случае загружается быстрее графики).

5.3.7. Учитесь у профессионалов

Посмотрите, как работают признанные, известные дизайнеры: Дмитрий Кирсанов,-Артемий Лебедев и др. Обратите внимание на используемые ими в оформлении принципы композиции, цветовые решения, решения пространства. Внимательно изучайте их работы и

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

Контрольные вопросы

1.Что такое web-страница, чем она отличается от обычной страницы

текста?

2.Что такое гиперссылка? Какие объекты могут выступать в роли гиперссылки?

3.Что такое web-узел?

4.Опишите назначение web-сервера.

5.Что такое стартовая страница web-сайта?

Опишите назначение web-обозревателя. Создание web-страниц

7.Опишите этапы разработки web-сайта.

8.Как выяснить, предоставляет ли приложение из пакета Microsoft Office возможность сохранить созданный документ для использования в Интернете?

9.Зачем применяются темы при оформлении web-страницы в

Microsoft Word?

10.Что такое редактирование web-страницы в режиме WYSIWYG?

11.В каких режимах можно работать с web-страницей в редакторе FrontPage? Как переключить эти режимы?

12.Какие возможности предоставляются панелью инструментов Навигация в FrontPage?

13.Зачем на web-странице используются таблицы? Как можно создать таблицу в редакторе FrontPage?

14.Что такое подвижная кнопка? На какие действия посетителя webстраницы может реагировать подвижная кнопка?

15.Какие виды динамических эффектов используются для анимации web-страницы? На какие события распространяются анимационные эффекты web-страницы?

16.Что такое web-дизайн? Каковы основные рекомендации по webдизайну сайта?

Задания

1.Найдите в Интернете web-ресурсы, посвященные созданию гипертекстовых www-документов и языку HTML. Сделайте закладки на наиболее понравившиеся вам страницы.

2.Используя редактор Microsoft FrontPage, создайте web-страницу «Визитная карточка».

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

4.Зарегистрируйте созданную web-страницу на поисковых серверах

сбесплатной регистрацией.

Литература

1.Вайскопф.Дж. Microsoft FrontPage 2000. Учебный курс. - СПб.: Питер, 2000. -352 с.

Microsoft FrontPage 2000 — это новый мощный и удобный интегрированный инструмент, позволяющий создавать профессионально оформленные web-узлы и не требующий от вас знания HTML или Java. Прочитав эту книгу, вы научитесь проектировать web-страницы, форматировать текст, создавать и проверять гиперссылки, использовать фреймы, вставлять иллюстрации, работать с формами, мастерами и шаблонами и многому другому.

2.Джеймс Ф. Эффективная работа с Netscape Communicator 4 (компакт-диск). — СПб.: Питер, 1998. - 784 с.

Официальное руководство фирмы Netscape по новой версии популярного коммуникационного пакета Netscape Communicator 4, в котором вы познакомитесь с особенностями браузера Navigator 4, научитесь настраивать систему электронной почты и посылать письма, содержащие графику, анимацию и даже звук. Вы узнаете, как подписаться на информационные каналы с помощью Netcaster; сможете обмениваться идеями и информацией с коллегами в режиме реального времени, используя средства Conference, а также создавать собственные webстраницы в Composer.

3.Шафран Энди. Создание Web-страниц. Самоучитель (компакт-

диск). — СПб.: Питер, 2000. - 320 с.

Книга рассказывает о том, как «с нуля» создать собственную webстраницу, украсить ее графикой и элементами мультимедиа, связать с другими ресурсами Интернета. Автор дает множество полезных советов по дизайну страницы, от создания проекта до придания ему окончательного блеска, дает рекомендации по привлечению посетителей, описывает

приемы работы с различными программными инструментами.

Рассматриваются особенности языка HTML для двух популярных браузеров — Netscape Communicator и Internet Explorer. Книга насыщена иллюстрациями и примерами. На прилагаемом компакт-диске вы найдете обширную коллекцию изображений, примеры web-страниц, несколько популярных HTML-редакторов и графических редакторов.

4. Белунцов В. Новейший самоучитель по созданию Web-страниц. —

М.: ДЕССКОМ, 2000. - 448 с.

Эта книга поможет вам узнать все, что необходимо для самостоятельной разработки web-страниц, научиться работать с необходимыми программами, создавать интерактивные и динамические web-страницы любой степени сложности, размещать свои работы в Интернете. Вы сможете научиться «читать» код web-страниц, принятых из Интернета, освоить современные приемы и методы работы, применить полученные знания на практике, почувствовать уверенность в завтрашнем дне. Рекомендуется для школьников, учащихся колледжей, техникумов, вузов и самообразования.

6.СОЗДАНИЕ WEB-СТРАНИЦ

6.1.Обзор средств HTML

6.1.1. Что такое HTML?

HTML (Hyper Text Markup Language, язык разметки гипертекста) - это язык Всемирной паутины. Каждый раз, когда вы открываете web-страницу, вы на самом деле открываете документ, написанный на HTML. Все webдокументы отформатированы с помощью языка HTML, и все гиперссылки, которые позволяют вам легко перемещаться со страницы на страницу, также созданы средствами языка HTML. И те цветные изображения, которые вы встречали на web-страницах, и заполняемые формы, и бегущие заголовки - все это вы видите благодаря языку HTML. Научиться этому языку нетрудно, и к тому моменту, когда вы прочтете раздел «Реклама webстраниц», вы будете уметь создавать HTML-документы на вполне профессиональном уровне.

На рис. 6.1 показан фрагмент программы на HTML - именно так выглядит код web-страницы. Как вы сами можете убедиться, документ этот состоит из текста, который можно видеть на готовой web-странице, а также команд, заключенных в угловые скобки. Именно эти команды и «сообщают» webL6paysepy, как отображать текст, куда вставить графику, как отображать ссылки и многое другое. На рис. 6.2 показана та же самая страница, открытая в Internet Explorer.

Ниже приведен список основных особенностей языка HTML.

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

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

-Язык имеет широкий выбор средств макетирования.

-С помощью команд языка можно создавать таблицы и форматировать текст вручную

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

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

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

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

Рис 6.1. HTML – код web страницы

Рис 6.2. Внешний вид страницы

6.1.2. Ограничения языка HTML

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

6.1.2.1. HTML-документ не является обычным текстовым документом

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

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

6.1.2.2. Различия в аппаратном обеспечении

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

Различия в аппаратном обеспечении и являются главным ограничением, накладываемым на использование HTML. Возможно, у вас хороший 15дюймовый цветной монитор, но инженеры вашей компании работают на высококлассных компьютерах с 20-дюймовыми мониторами, а у ваших дизайнеров стоят прекрасные компьютеры Macintosh, в то время как обычные служащие сидят за компьютерами с монохромными дисплеями или даже «глупыми» терминалами ввода-вывода и занимаются обработкой текстов или данных. У каждого класса компьютеров свои возможности, и в то же время каждый из них можно использовать для подключения к Всемирной паутине и просмотра HTML-документов.

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

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

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

6.1.2.3. Выбор личных предпочтений

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

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

В этом случае вместо изображений вы будете видеть лишь характерные место заполнители (placeholders), щелкая на которых, вы увидите оригинальные рисунки. Эта возможность была разработана специально для того, чтобы максимально уменьшить время загрузки всего документа; она очень удобна тем пользователям, которые используют медленное удаленное соединение. Однако, если изображение используется в виде ссылки, пользователь может оказаться в затруднительном положении.

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

Рис 6.3. Страница, открытая в браузере Mosaic

6.1.2.4. Просмотр HTML-документов в различных браузерах

Лучшее представление о различиях в web-браузерах может дать просмотр одного и того же документа в разных браузерах. На рис. 6.3 и 6.4 показано, как по-разному может быть отображен один и тот же HTML-документ. Даже при том условии, что использовались одинаковые компьютеры,

просмотр его в двух разных web-браузерах дал совершенно различные результаты. На рис. 6.3 показана страница, загруженная в браузер NCSA Mbsaic. А на рис. 6.4 та же страница открыта в браузере, который не поддерживает графику.

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

Рис. 6.4. Та же самая страница, отображѐнная в текстовом браузере lynx

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

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

6.2.Создание простого HTML-документа

6.2.1.Инструменты для создания и редактирования HTML-документов

Какие же инструменты вам нужны? HTML-документы представляют собой простые текстовые файлы (записанные в кодах ASCII), содержащие специальные коды разметки. А это Значит, что HTML-документы не содержат ничего, кроме букв, чисел, знаков препинания и некоторых других (Печатных символов... плюс коды разметки.

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

встроенный текстовый редактор, такой как Блокнот (Microsoft Windows Notepad), редактор DOS, Windows Write, TeachText/SimpleText для Macintosh, vi или EM ACS для Unix или редактор для системы VAX/VMS;

ваш любимый текстовый редактор, например Microsoft Word, WordPerfect или любые другие программы, работающие в текстовом режиме и ASCII-кодах (если у вас есть последняя версия Word или WordPerfect, значит, вы имеете весьма мощный редактор

HTML-документов).

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

Для создания HTML-документов просто нужен какой-нибудь текстовый редактор. Примеры кодов в этой книге созданы с помощью редактора Блокнот, но вы можете работать с любым редактором, который использует символы ASCII. Если вы работаете с обычным текстовым редактором,

таким как Microsoft Word, WordPerfect или Write, не забывайте использовать команду Сохранить как, чтобы сохранять HTML-документ в текстовом формате. Ну а если у вас есть программа, предназначенная специально для обработки HTML-текстов, то вы можете использовать ее возможности для превращения простого документа в HTML-документ и даже для публикации готовой страницы в Сети.

А теперь можно начать создание нового документа в соответствии с материалами этой главы.

6.2.2. На что похож HTML-документ?

От простого текстового файла HTML-документ отличает присутствие кодов разметки, которые называются тегами. Эти коды являются составными частями самого документа; они управляют форматированием и определяют макет готового документа, формируют ссылки на другие документы и делают многое другое.

HTML-коды разметки окружены специальными маркерами, с помощью которых они отделяются от основного текста документа. Вы просто печатаете их, используя два главных символа, с помощью которых и задаются инструкции по разметке. Этими символами являются угловые скобки, «<» и «>». В большинстве случаев эти символы появляются при нажатии клавиш Shift + точка или Shift + запятая (при переключении на латинский алфавит).

Следует отметить один важный момент - HTML-коды нечувствительны к регистру, то есть тег <body> ничем не отличается от тегов <bODy>, <boDy> или <BodY>. Но, как правило, разработчики web-страниц печатают HTML-коды заглавными буквами, поскольку это позволяет легко отличать коды от основного текста, что облегчает редактирование.

Некоторые теги (например, тег <BR> - перевод строки) могут просто вставляться в нужное место документа. Другие теги, такие как <BODY>, должны встречаться в виде пары из открывающего и закрывающего тегов. Закрывающий тег отличается от открывающего символом косой черты (слеша) после открывающего «уголка». При правильной записи тег <BODY> должен выглядеть так:

<BODY> </BODY>

Эффект тега проявляется между его открывающей и закрывающей частями. В некоторых случаях (например, для тега абзаца (<Р> </Р>) или ячейки таблицы (<TD> </TD>)) закрывающий тег может быть пропущен. Такие fern в большинстве случаев отображаются правильно.

6.2.3. Использование специальных символов

Так как некоторые символы используются для служебных целей (например/символы «<» и «>» выделяют теги), использовать их в обычном тексте не получится. Если вам все-таки необходимо включить в текст такой символ, используйте специальные комбинации (см. ниже), обозначающие «запретные» символы. Все коды начинаются со знака 8/(амперсанд), который, таким образом, сам попадает в число «запретных» и отображается

вдокументе при. помощи кода.

виспользуемой таблице кодировки)

6.2.4.Теги, определяющие структуру документа

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

6.2.4.1. Тег <HTML>

Каждый HTML-документ должен начинаться с тега <НТМЦ> и им же заканчиваться. Присутствие этих тегов указывает на то, что документ является HTML-документом. Независимо от того, что еще содержится в документе, эти теги должны быть включены обязательно. Пара тегов <HTML> используется следующим образом:

<HTML>

Мой первый документ HTML</HTML>

6.2.4.2. Теги <HEAD> и <BODY>

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

<HEAD>.

<HTML><HEAD>

здесь размещается заголовок ,

</HEAD> Мой первый документ HTML </HTML>

Как видно из расположения пары тегов <HEAD>, разные теги можно размещать на одной строке.

Чтобы завершить логическое разбиение документа, следует добавить еще тег\ <BODY> - все HTML-документы должны иметь как заголовок (head), так и содержимое (body):

<HJML><HEAD>

здесь размещается заголовок

</HEAD><BODY>

Мой первый документ HTML

</BODY></HTML> {

Итак, документ обрамлен открывающим и закрывающим тегами <HTML>, затем разделен на две части, промаркированные открывающими и закрывающими тегами <HEAD> и <BODY>. Каждые из этих типов должны использоваться парами: <HTML> и </HTML>, <HEAD> и </HEAD>, <BODY> и </BODY>.

Тег <BODY> может использоваться с параметрами, определяющими цвет ссылок, цвет текста, цвет фона документа и изображение, используемое в качестве фона (текстуры). Параметры указываются между «уголками» открывающего тега. Порядок следования параметров значения не имеет.

Вот эти параметры:

TEXT - задает цвет, которым будет отображаться текст документа (правила записи цветов описываются в разделе «Цвет элементов страницы»). Пример:

<BODY TEXT="#FF8000">

LINK - указывает цвет, которым будут отображаться не просмотренные ссылки. Пример:

<BODY LINK="#12E6F7">

VLINK - указывает цвет, которым будут отображаться просмотренные ссылки. Пример:

<BODY VLINK="#12E6F7">

ALINK - указывает цвет, которым будут отображаться активные ссылки (ссылки, по которым в данный момент осуществляется

переход). Пример:

<BODY ALINK="#12E6F7">

BGCOLOR - определяет цвет фона документа. Пример: <BODY BGCОLOR="#lF3E45"> '

BACKGROUND - задает URL-адрес фонового рисунка для страницы (текстуры). Пример:

<BODY BACKGROUNDS images/texture.gtf"> }

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

6.2.4.З. Тег <TITLE>

Последний тег, который нужно использовать обязательно, - тег <TITLE>. Из опыта путешествий по Сети вы должны помнить, что в строке заголовка web-браузера всегда отображается название HTML-документа, который просматривается в данный момент. Это название берется из содержимого тега <TITLE> оригинального текста HTML-документа. Если вы не включите этот тег, ничего катастрофического, Конечно, не произойдет, но вместо названия в этой строке будет указан просто URL-адрес страницы.

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

Этот тег, который всегда располагается в заголовке документа (между тегами

<HEAD> и </HEAD>), также используется парами, обрамляя текст названия документа. Давайте внесем в наш пример последнее изменение, добавив этот тег:

<НТМ1><НЕАО><Т1Т1Е>Название документа</Т1Т1Е>

</HEAD><BODY>

Мой первый документ HTML

</BODY></HTML>

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

Документ кажется примитивным? Конечно, так и есть, но ведь это ваш первый HTML-документ.

Если вы работаете со встроенным редактором, самое время сохранить созданный документ. Делается это точно так же, как ив случае сохранения любого другого документа. Благодаря всем тегам несколько строк превратились в HTML-документ. Не забывайте о том, что документ должен быть сохранен в текстовом формате. Что, касается имени файла, лучше всего назвать его как-нибудь вроде first.html (или first.htm, если вы работаете в DOS). А сейчас давайте посмотрим, как выгля-7 дит документ в web-браузере.

6.2.4.4. Просмотр HTML-документа

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

Чтобы просмотреть локальный HTML-документ в web-браузере, проделайте следующую процедуру.

1.В браузере откройте меню File (Файл) и выберите команду Open Page (Открыть страницу), Open (Открыть) или другую с подобным названием. На экране появится окно диалога с указанным именем файла. На рис. 6.5 показано окно диалога, используемое Internet

Explorer.

Рис 6.5. Чтобы открыть файл, сохранѐнный на жѐстком диске, используйте команду (файл>открыть) или другую аналогичную

Рис 6.6. Ваш первый HTML – документ, открытый браузером

2.В поле ввода напечатайте название HTML-документа или используйте средство для просмотра файлов и выберите нужный файл.

3.Щелкните на кнопке Open, OK или Открыть. Web-браузер откроет ваш HTML-документ.

Если вы создадите файл с HTML-кодом, приведенным выше, сохраните его на диске и откроете при помощи браузера, перед вашими глазами предстанет примерно следующая картина:

6.2.5. Комментарии в HTML-документе

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

Создать заголовки различных размеров можно с помощью специальных тегов. Язык HTML поддерживает 6 уровней заголовков, для которых используются теги от <Н1> до <Н6>. Заголовок создается очень просто:

<Н1> Это заголовок первого уровня</Н1> Текст заголовка пишите между открывающим и закрывающим тегами. <Н6>Заголовок шестого уровня</Н6>

Чем больше число, идущее за символом «Н», тем мельче текст заголовка. Поэтому, если вы хотите, чтобы заголовок был написан более мелкими буквами, используйте, например, тег <Н2> или <Н5>. Наличие заголовка подразумевает автоматическое прерывание строки (подробнее об этом рассказывается далее); кроме того, заголовок может занимать сразу несколько строк. Имейте в виду, что мелкие заголовки - они маркируются тегами <НЗ> и ниже - в большинстве web-браузеров отображаются очень мелким шрифтом, в результате заголовок может оказаться мельче основного текста. На рис. 6.7 показаны примеры заголовков всех шести уровней (для сравнения приведена фраза без дополнительного форматирования).

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

<Н1 ALIGN = "CENTER">3TO заголовок первого уровня, выровненный по центру</Н1>

6.3.2. Теги форматирования текста

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

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

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

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