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

Разрабатывая Web-страницу, следует помнить о том, что не все посетители вашего сайта будут пользоваться последними версиями Internet Explorer или

22 Глава 1. Основы языка HTML





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

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

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

но запомнят ваш сайт.

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

ры, подобные Netscape Navigator и Internet Explorer, следуют инструкциям в со- зданном вами текстовом документе, чтобы отобразить содержимое Web-страницы

на экране. (Содержимое (content) страницы — это текст, графика и прочие вещи (такие, как видео — и аудиоклипы), которые вы помещаете на Web-страницу с по- мощью языка HTML).

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

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

сложный, простой в изучении язык, с помощью которого можно было создавать содержащие один лишь текст документы, просматривать которые мог каждый, у кого был доступ к Internet. Хотя комитет по стандартам HTML, консорциум W3C (World Wide Web Consortium), ввел множество новых инструкций (называе- мых дескрипторами (tags) и атрибутами (attributes)) в язык HTML, все же даже самую «богатую» Web-страницу можно создать, набрав простые HTML-команды в документе, подготовленном в текстовом редакторе (подойдет даже Notepad (Блокнот) из Windows). На Web-сайте W3C (www. w3.org) можно найти полное описание различных Internet-технологий, включая HTTP, HTML, XHTML (Extensible Hypertext Markup Language — расширяемый язык разметки гипертек — ста), XML (Extensible Markup Language — расширяемый язык разметки), CSS (Cascading Style Sheets — каскадные таблицы стилей) и т. д.

Теперь, когда вы знаете, что такое Web-страница и в общих чертах представ — ляете, как она создается, давайте взглянем на HTML-код какой-нибудь Web-стра — ницы. Если у вас нет постоянного соединения с Internet, установите подключе — ние по коммутируемой линии через вашего Internet-провайдера (поставщика

услуг Internet). Затем запустите Web-браузер и выведите на экран свою любимую Web-страницу, набрав URL-адрес (Uniform Resource Locator — унифицированный указатель информационного ресурса, то есть адрес Web-страницы) в адресной

строке браузера. Например, можно ввести в адресной .строке браузера http:/ /

www. osborne. com. Затем просто нажмите ENTER.

Web-браузер, в свою очередь, отправит Web-серверу HTTP-запрос Web-страни — цы, адрес которой был введен. После ответа Web-сервера, т. е. отправки Web-стра —

ницы вашему браузеру, браузер отобразит страницу на экране и запросит все внедренные объекты (например, графические изображения), вставленные в стра —

Глава 1. Основы языка HTML 23





ницу. После того, как браузер извлечет и отобразит все содержимое страницы,

выберите View | Source (Вид | В виде HTML), чтобы вывести на экран HTML-код, с помощью которого описана страница. (Если вы работаете с Netscape Navigator, выберите View | Page Source (Вид | Источник страницы)). Далее Internet Explorer отобразит HTML-код Web-страницы в редакторе Блокнот, тогда как Netscape Navigator просто выведет HTML-операторы в новом окне. Пусть вас пока не вол- нует значение отдельных HTML-операторов — по ходу чтения этой книги вы уз — наете о них практически все. Сейчас важно запомнить, что можно просмотреть

исходный код любой HTML-страницы.



Контейнерные HTML-дескрипторы

В основе своей, Web-страница представляет собой текстовый файл, содержа —

щий инструкции в форме HTML-кодов (называемых дескрипторами) и атрибу —

тов. Дескрипторы — это команды, которыми впоследствии будет руководствовать —

ся Web-браузер, чтобы отформатировать текст и вставить графические изображения, которые должны присутствовать на Web-странице. Некоторые, од — нако не все, HTML-команды требуют как начального, так и конечного дескрип — тора: такие команды называются контейнерными {container) дескрипторами, по — скольку инструкция в начальном дескрипторе применяется ко всему, что содержится на Web-странице между начальным и конечным дескриптором.

Каждая HTML-команда (то есть каждый HTML-дескриптор) начинается со

знака «меньше» (которым идет имя дескриптора и атрибуты (если таковые имеются), и заканчивается знаком «больше» (>). Чтобы создать конеч — ный дескриптор для начального дескриптора, нужно поместить косую черту (/)

перед именем дескриптора. Таким образом, начальный дескриптор имеет вид

, а конечный деСКрИПТОр — .

Имя дескриптора сообщает Web-браузеру назначение дескриптора; атрибуты

(если есть), идущие за именем дескриптора, предоставляют Web-браузеру допол- нительную информацию, необходимую тому для выполнения инструкций деск — риптора.

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

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

по умолчанию:



Это пример абзаца.

Если вы хотите, чтобы браузер отображал текст в абзаце определенным шриф —

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

двух разделах вы узнаете немного больше о дескрипторах.)

24 Глава 1. Основы языка HTML



HTML-дескрипторы разделов

Для организации различных частей HTML-кода, которыми описывается Web — страница, используется набор дескрипторов разделов {section tags). Типы HTML — дескрипторов в каждом разделе определения HTML-страницы имеют конкретное назначение:

• . Эти дескрипторы ставятся в начале и в конце HTML-до —

кумента. Как таковые, начальный и конечный дескрипторы заклю —

чают в себе все прочие HTML-дескрипторы, с помощью которых описыва — ется Web-страница.

• . Начальный и конечный дескрипторы заголовка части

идут сразу же за начальным дескриптором HTML () и обозначают заголовочную часть Web-страницы. С помощью дескрипторов в заголовоч- ную часть Web-страницы можно включить такую информацию, как фами —

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

В нижеприведенном коде начальный и конечный дескрипторы абзаца

() отмечают начало и конец каждого абзаца, как показано на рис. 1.3.



Глава 1. Основы языка HTML 2 7







В языке HTML есть также несколько дескрипторов для форматирования тек —

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

• . Текст, помещенный между дескрипторами выделения полужир — ным, отображается полужирным шрифтом.

• . Текст, помещенный между дескрипторами выделения курсивом, отображаетсякурсивом.

• . Текст, помещенный между дескрипторами выделения подчерки — ванием, отображается подчеркнутым.

Следующий HTML-код выводит текст, выделенный полужирным, курсивом и подчеркиванием (результат можно увидеть на рис. 1.4).









28 Глава 1. Основы языка HTML



Атрибуты в HTML

Атрибуты — один или более — вставляются в HTML-дескрипторы для того, чтобы предоставить Web-браузеру дополнительную информацию о том, как брау —

зер должен выполнить инструкцию дескриптора. Например, дескриптор выбора шрифта сообщает Web-браузеру, что вы хотите изменить внешний вид текста, идущего за дескриптором. Атрибуты color (цвет) и face (гарнитура), идущие за именем дескриптора в приведенном ниже коде, сообщают браузеру цвет (red — красный) и гарнитуру (Helvetica), которые браузер должен использо — вать для изменения внешнего вида шрифта, идущего за дескриптором:





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

торым идет знак равенства (=), вслед за которым в кавычках — двойных («») или

одинарных («) — указывается значение атрибута.



•iiJiiui=Kr. i.ui= i с л е ду е т отметить, что Web-браузер игнорирует пробелы с каждой стороны

знака равенства (=) между атрибутом и значением атрибута в кавычках. Поэтому вам будут

попадаться как Web-документы без пробелов (как показано в HTML-операторе в вышеприве- денном примере), так и документы с пробелами с одной или обеих сторон знака равенства. В своих HTML-дескрипторах вы можете использовать ту форму записи, которая вам нравится, однако будьте последовательны и не перемешивайте стили.

Web-браузер будет продолжать применять атрибут (или атрибуты), указанный

в начальном дескрипторе, до тех пор, пока не встретит соответствующий конеч — ный дескриптор. В данном примере Web-браузер продолжит отображать текст, внешний вид которого будет соответствовать атрибутам color и face в дескрип —

торе, до тех пор, пока в HTML-коде Web-страницы не встретится деск — риптор. На рис. 1.5 показаны компоненты HTML-дескриптора с двумя атрибутами.





Глава 1. Основы языка HTML 29



Работа со шрифтами

Если только в HTML-коде Web-страницы не указано противоположное, у по- сетителей вашего Web-сайта текст страницы будет отображаться с использовани —

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

игнорировать, дескриптор вместе с его атрибутами. Хотя с помощью ат — рибутов в дескрипторе можно влиять на внешнее представление текста, того же (и большего) эффекта можно добиться путем создания CSS-правил, ра —

ботать с которыми вы научитесь в главе 4.

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

• font со1ог=»цвет»>. Атрибут color определяет цвет текста. В качестве значений цвета могут использоваться имена (такие как «red» [красный],

«green» [зеленый], «yellow» [желтый], «blue» [синий] и т. д.) или шест —

надцатеричные триплеты (например, #FFOOOO, #оовооо, #FFFFOO, #OOOOFF

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

• font size=»##»>. Атрибут size определяет размер текста (по отношению

к размеру базового шрифта) с помощью значений от -7 до 7. Чем меньше значение, тем меньше размер шрифта.

• font ?асе=»название шрифта»>. Атрибут face определяет название гар —

1 нитуры шрифта (Times New Roman, Helvetica, Arial — вот некоторые из примеров шрифтов, имеющихся в большинстве компьютерных систем). Если

шрифт, определенный атрибутом face, в компьютере посетителя отсутствует,

Web-браузер игнорирует атрибут face и использует гарнитуру по умолчанию.



Web-браузер определяет значения по умолчанию для цвета, размера, гарниту —

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





30 Глава 1. Основы языка HTML







Назначение одного и того же набора атрибутов множеству элементов страницы

Если вы хотите назначить один и тот же набор атрибутов нескольким смеж — ным элементам Web-страницы одновременно, заключите элементы, на которые вы хотите повлиять, между начальным и конечным дескрипторами блока

( — от слова «division» («раздел»)). Например, вам нужно отцентри — ровать две строки текста и графическое изображение между левым и правым по — лями Web-страницы. Вместо того чтобы добавлять атрибут alig n (выравнивание)

в каждый из трех HTML-дескрипторов, поместите дескриптор перед пер —

вым элементом и дескриптор после окончания последнего элемента, как показано в следующем коде:





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

Создание Web-страниц с помощью текстовых редакторов, текстовых процессоров и программ

компоновки Web-страниц

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

будет ознакомиться с программами создания текстовых документов, в которых вы будете писать и сохранять HTML-код своих Web-страниц.

Web-страница — это не более чем текстовый документ, содержащий все тек —

стовое содержимое и HTML-операторы (дескрипторы и атрибуты), требуемые

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

то специализированные программы. Вам нужны только общие знания языка

Глава 1. Основы языка HTML 31





HTML и приложение, позволяющее сохранять текстовые ф^йлы без элементов

форматирования текста. Создавать HTML-документы можно с помощью про — грамм-трех типов: текстовых редакторов, текстовых процессоров и программ ком — поновки Web-страниц (подобных Dreamweaver или FrontPage). Всем трем типам присущи свои преимущества, а, в ряде случаев, и недостатки.

Текстовые редакторы

Текстовый редактор — это простейший (и, пожалуй, самый простой в исполь —

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

с операционной системой Windows компания Microsoft поставляет текстовый ре — дактор Notepad (Блокнот); на компьютерах Macintosh аналогичный текстовый ре- дактор называется SimpleText.

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

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

бираете HTML-код, а текстовый редактор фиксирует текст. Однако текстовый ре — дактор не предупредит вас об орфографической ошибке или ошибке HTML-син — таксиса. Преимущество же использования текстового редактора для создания Web-страниц состоит в том, что текстовые редакторы побуждают вас быстрее изу — чить язык HTML, поскольку они не предоставляют никаких «костылей», на кото — рые вы смогли бы опереться. На рис. 1.6 показан HTML-документ, подготовлен — ный в редакторе Microsoft Notepad — Блокноте.

32 Глава 1. Основы языка HTML





После набора HTML-кода в Блокноте выберите File | Save (Файл | Сохранить) и введите имя файла для сохранения вашей Web-страницы на диске. Обязательно

снабдите имя файла расширением. htm или. html (а не присваиваемым по

умолчанию. txt) .



Текстовые процессоры

Из доступных на рынке текстовых процессоров наиболее популярными по

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

игнорировать написание HTML-дескрипторов, поскольку большинство имен дес —

крипторов — это сокращения, а не «полноценные» слова английского языка.

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

забудьте убедиться, что ваш HTML-дескриптор — синтаксически правильный пе- ред тем, как щелкать на кнопке «Добавить» в окне проверки правописания.

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