Глава 2. Краткий курс веб-дизайна

Глава 3. Что необходимо для начала работы

• Основной инструментарий

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

  • Редакторы HTML

• Другой инструментарий

  • Программы создания анимации

  • Инструментарий мультимедиа

  • Ресурсы для написания скриптов

• Поиск веб-сервера

  • Что такое веб-сервер

  • Отношения с поставщиками услуг Интернета

  • Программы, устанавливаемые на сервере

  • Доступ к дисковому пространству сервера

• Файловая структура сайта

  • Типы файловой организации

  • Создание файловой иерархии

  • Как именовать файлы

  • Обновление веб-сайта

• Резюме

Технологии публикации в Сети не требуют наличия дорогостоящего инструментария. В самом деле, вы вскоре обнаружите, что вполне можно обойтись любым текстовым редактором. Причем чем проще он будет, тем лучше. Обычно такие редакторы поставляются в комплекте с операционными системами типа Windows, Unix, Mac OS. Кроме текстовых редакторов могут понадобиться программы для работы с HTML, изображениями и мультимедиа. Всегда можно найти в Интернете бесплатные версии этих приложений Кроме этого, если вы хотите разместить свои веб-страницы в Сети, нужно озаботиться поиском поставщика услуг Интернета.

В этой главе мы обсудим следующие вопросы:

• редакторы веб-страниц;

• инструментарий для работы с графикой, анимацией и скриптами;

• устройство информационного пространства веб-служб;

• как получить место на веб-сервере и разместить там свои файлы.

Основной инструментарий

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

Текстовая природа документов HTML означает, что для их написания вполне достаточно обычного текстового редактора. Причем это может быть самый простой редактор типа Windows Notepad (рис. 3.1) или Mac SimpleText. В других операционных системах у вас в любом случае будет текстовый редактор В Unix-системах это, к примеру, vi или emacs.

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

ПРИМЕЧАНИЕ

ASCII расшифровывается как American Standard Code for Information Interchage (Американская стандартная кодировка обмена данными) и является основным методом представления букв и цифр в ЭВМ ASCII является самой распространенной кодировкой, которую понимают практически все компьютеры, поэтому любые текстовые файлы, в том числе HTML-документы, будут восприняты адекватно.

Рис. 3.1. HTML-страницы можно создавать в простейших текстовых редакторах типа Windows Notepad

Если вы предпочитаете использовать для написания кода HTML текстовые процессоры (большие текстовые редакторы), чего я, кстати, не советую делать, то имейте в виду, что они обычно имеют много возможностей по сохранению файлов в самых разных форматах. Например, в формате HTML. He следует поддаваться соблазну, потому что в этом случае все, что вы написали, будет воспринято просто как текст, а теги будут добавлены автоматически. Но вы уже вставили свои теги, зачем вам эта самодеятельность редактора? Можете посмотреть (рис. 3.2), какая «замечательная» страница получится в итоге при просмотре в браузере.

Итак, сохранять файл следует в текстовом формате, но при этом с расширением htm или html (подробности о различии — позже).

ПРИМЕЧАНИЕ

Где найти эти программы? В следующих параграфах вы найдете ссылки на веб-сайты, с которых можно скачать отдельные редакторы из тех, что мы рекомендуем. Но если вы сами хотите попробовать поискать для себя что-то подходящее, загляните на wwwdownloadcom/, там вы найдете ссылки на огромное количество самых разнообразных программ (бесплатных, демо-версий), предназначенных для разных типов платформ.

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

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

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

Итак, вы предпочли использовать обычный текстовый редактор, который поставляется вместе с операционной системой. В Microsoft Windows это Notepad; в Mac OS это SimpleText или TextEdit. В Unix и Linux есть множество различных текстовых редакторов. Если вы хотите использовать редакторы более высокого уровня, обратите внимание на следующие. Для Microsoft Windows — TextPad (www.textpad.com), BltraEdit (www.ultraedit.com показан на рис. 3.3), EditPlus (www.editplus.com). Для Macintosh выбор поменьше: BBEdit и BBEdit Lite (www.barebones.com), но они пользуются большой популярностью и применяются как в Mac OS 9, так и в Мае OS X (Mac OS X может работать с Unix-редакторами спомощью приложения Terminal). Все эти редакторы могут быть полезными при создании и отладке HTML-кода.

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

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

Редакторы HTML

Вы можете воспользоваться и другим типом редакторов, созданных специально для редактирования HTML-документов. Они бывают двух основных типов: редакторы кода и редакторы, построенные по технологии WYSIWYG (What You See Is What You Get, «что видишь, то и получаешь»). Последнее означает, что вы редактируете веб-страницу сразу в том виде, в каком она предстанет в браузере. В этом случае вы не пишете вручную разметку, команды и элементы HTML, а печатаете текст, вставляете картинки и перемещаете элементы по странице, как в текстовом процессоре или настольной издательской системе

Поскольку эта книга посвящена, по большей части, редактированию исходного кода XHTML (то есть ручному описанию команд и элементов), то до редакторов, работающих по технологии WYSIWYG, мы дойдем только в главе 20, «Графические редакторы». Эти редакторы — хорошее подспорье при написании веб-сайтов Но прежде, чем их использовать, нужно изучить, что они делают, какой код генерируют и как его расшифровать. Профессиональный веб-дизайнер никогда не станет пользоваться HTML-редактором, потому что совершенных программ не бывает и добиться нужной гибкости при их использовании просто не удается. Кроме того, они не успевают за изменениями стандартов, их применение оказывается нецелесообразным при решении комплексных задач, где требуется применение скриптов или интерактивных элементов, иногда приходится «зарываться» в код, чтобы заставить автоматически сгенерированную страницу работать так, как нужно. Если уж вы решили воспользоваться HTML-редактором, советую обратить внимание на редакторы кодов. Для Microsoft Windows существуют такие программы, raiiHotDog Professional и HotDog PagcWiz (www.sausagetools.com), HandyHTML (www.silveragesoftware.com) и CoffeeCup HTML Editor (www.coffeecup.com). Для Macintosh можно порекомендовать PageSpirmer (www.optima-system.com) и WebDe-sign (www.ragesw.com).

Если вы хотите подыскать для себя HTML-редактор, обращайте внимание на то, что он должен соответствовать современным стандартам и позволять редактировать HTML (или XHTML) на том уровне, который вам требуется. Для тех задач, которые решаются в этой книге, необходимо, чтобы редактор поддерживал HTML 401 Transitional (то есть переходный вариант) или XHTML 16 Transitional (Если вы намерены создавать документы в строгом варианте нового стандарта, ищите редакторе поддержкой XHTML 10 Strict). Старые редакторы, скорее всего, поддерживают старые стандарты и создают элементы, не отвечающие современным требованиям Вы, в принципе, можете использовать их, но будьте внимательны.

ПРИМЕЧАНИЕ

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

Другой инструментарий

Кроме основных программ, необходимых для написания кода HTML, в арсенал веб-дизайнера входит еще ряд вспомогательных средств. В частности, наверняка потребуется хороший редактор изображений, поскольку очень сложно отыскать такую картинку, которую сразу можно вставить на страницу. Обычно нужно что-нибудь подретушировать, изменить цветовую гамму, вырезать часть изображения и т. д. Редактор изображений должен уметь делать все это. Таким требованиям отвечают прежде всего дорогостоящие программы, такие как Adobe Photoshop и Macromedia Fireworks. Если у вас нет возможности приобрести их, воспользуйтесь бесплатными версиями других программ. Самыми популярными из них являются следующие. Для Microsoft Windows — Paint Shop Pro (http://www.jasc.com) и Lview Pro (http://www.lview.com/). Для Macintosh существует бесплатный конвертер GraphicConverter (http://www.lemkesoft.com/). Для Linux и других открытых ОС можно порекомендовать популярную программу GNU linage Manipulation Program, или GIMP (http://www.gimp.org).

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

• создание изображений с помощью фигур и текста;

• обрезка и масштабирование;

• изменение цветовой глубины или гаммы;

• сохранение в форматах JPEG, GIF или PNG;

• работа со специфическими свойствами разных форматов, например с прозрачным GIF или с прогрессивным JPEG.

Все эти нюансы описаны более подробно в главах 6 и 11.

Программы создания анимации

Веб-анимация бывает разных видов. Можно «оживлять» изображения с использованием спецификации Animated GIF, которая недостаточно интерактивна (она не отвечает на пользовательский ввод, например на нажатие кнопки мыши), но широко используется в Сети, например в веб-рекламе.

Очень немногое число приложений для создания анимированных GIF-изображений доступно в бесплатном варианте, при этом коммерческие версии программ, созданных для разработки рекламных баннеров, обычно стоят даже дороже, чем программы обработки изображений. Попробуйте поработать с программой Ulead GIF Animator (http://www.ulead.com) и Animagic GIF Animator (http://www.rtlsoft.com/ animagic/index.html). Это для Microsoft Windows. Для Macintosh можно посмотреть программу GifBuilder (http://homepage.mac.com/piquet/gif.html) или VSE Animation Maker (http://vse-online.com/animation-maker/index.html).

На ступеньку выше, чем анимированные GIF-изображения стоят анимации Macromedia Flash. Флэш-технологии становятся все более популярными, частично из-за того, что анимации могут быть интерактивными. Пользователь с помощью мыши! может осуществлять выбор дальнейшего сценария анимации. Эта технология особенно популярна среди производителей автомобилей, в веб-бизнесе и у всех, кто хочет создавать мультимедиа-презентации.

Кроме собственного проигрывателя фирмы Macromedia (http://wwwmacromediacom/ flash/), который продается всего лишь за несколько сотен долларов, существуют и другие. Например, CoffeeCup Firestarter (http://www.coffeecup.com/) для Microsoft Windows и ez-Motion (http://www.beatware.com/) для Macintosh. В главе 13 флэш-технология обсуждается более детально.

Инструментарий мультимедиа

Редакторы и приложения работы с изображениями являются основными приложениями для автора веб-публикаций. Но если вы создаете страницу с мультимедиа, вам потребуются некоторые дополнительные инструменты. Вам может понадобиться создать видеоряд с использованием QuickTime, Windows Media или других мультимедийных программ Или, например, необходимо будет создать или отредактировать звуковые файлы — все что угодно, начиная от midi-мелодии, звучащей в качестве фона вашей странички, и заканчивая музыкой в МРЗ.

В этом случае надо поискать приложения, которые позволяют создавать и редактировать такие данные. Однако прежде, чем залезать так глубоко, вспомните о том, что многие приложения такого рода поставляются вместе с операционной системой, будь то Microsoft Windows или Macintosh OS. Это, конечно, зависит от версии ОС. Вместе с Microsoft Windows ME и последующими версиями поставляется программа Windows Movie Maker, позволяющая редактировать видео, снятое на DV-совместимую камеру. Затем можно перевести его в формат Windows Media или подобный ему, который можно проигрывать в Сети. Подобным образом в Macintosh можно использовать поставляемую со многими версиями ОС программу iMovie, позволяющую редактировать DV и экспортировать его в формат QuickTime. QuickTime Pro существует как для Windows, так и для Macintosh и позволяет осуществлять некоторые операции редактирования видео и перевода его в формат QuickTime.

ПРИМЕЧАНИЕ

DV означает Digital Video, то есть «цифровое видео». Это формат видеоданных, записанных с помощью DV-камеры (часто на специальных кассетах miniDV). Такое видео просто редактировать с использованием популярных программ типа Movie Maker или Apple's iMovie. Этот стандарт становится все более распространенным и уже может соперничать с VHS.

Имеется множество приложений для редактирования и конвертирования звуковых файлов в разные веб-совместимые форматы. Среди irtix можно выделить Sound Forge XP (http://www.sonicfoundry.com) для Microsoft Windows, а для Macintosh — Sound Studio (http://www.felttip.com/). Программа iTunes, поставляемая со многими Мас'ами имеет возможность создания МРЗ и других звуковых файлов, а проигрыватель QuickTime Pro может быть использован для преобразования из одного формата в другой.

Ресурсы для написания скриптов

Некоторые из веб-редакторов, которые мы обсудили, могут быть использованы для работы с популярными языками типа JavaScript и JScript. В то же время можно поискать программы, предназначенные специально для написания скриптов, можно найти даже готовые скрипты, которые можно вставлять в своп страницы. Назовем следующие приложения для Microsoft Windows: iCoder (http://wwweportBe6hostercouk/ iCoder/), JavaScript Tools (http://www.sausagetools.com/) и JavaScript Developer (http:// www.liquidsoftwarecjb.net/).

Поиск веб-сервера

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

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

Что такое веб-сервер?

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

В общем случае серверному программному обеспечению требуется достаточно мощная операционная система (Unix, Linux, Windows NT/2000 или Mac OS X). Тем не менее есть ПО и для других версий Windows, и для более ранних версий Macintosh OS. Но в этом случае и сервер должен обслуживать небольшие сайты, с которыми не может возникнуть серьезных проблем.

Отношения с поставщиками услуг Интернета

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

СОВЕТ

Список мировых провайдеров можно найти на thelist.com или на www.yahoo.com/Business_and_Economy/ Companies/Internet_Services/Web_Presence_ Providers/. Также можно попробовать узнать, какие услуги предлагает ваш провайдер, поскольку многие из них предоставляют бесплатное или довольно дешевое дисковое пространство на сервере.

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

http://www.isp.com/username/index.html

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

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

http://www.yoursitename.com (как, например, http://fakecorp.com)

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

Поставщик услуг Интернета может помочь вам зарегистрировать свой домен, но прибегать для этого к его услугами не является такой уж необходимостью. Это можно сделать и самому, для этого нужно зайти на какой-нибудь сайт типа Registercom (http://www.register.com/) или Network Solutions (http://www.networksoutions.com/). Стоимость регистрации домена колеблется обычно от $25 до $35 в год.

После регистрации домена ваш провайдер разрешает использование имени домена (DNS). Это означает, что любые другие серверы DNS во всем мире должны обращаться именно к компьютеру провайдера, увидев указанное название домена. Поэтому, например, http://www.fakecorp.com указывает на сервер того провайдера, который предоставляет дисковое пространство под этот сайт.

А вы уже зарезервировали себе место на сервере?

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

Программы, устанавливаемые на сервере

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

• Можно ли работать с CGI-скриптами? Если да, то на каком языке они должны быть написаны? Несмотря на то что большинство веб-сайтов не использует скрипты, вам они могут понадобиться все для тех же интерактивных компонентов: форм, форумов, при реализации связей с базами данных. Имейте в виду, что в некоторых случаях требуется использовать вполне определенную версию языка (например, Perl 5, а не Perl 4), поэтому знать номера версий поддерживаемых провайдером, бывает полезно (главы 16 и 21).

ПРИМЕЧАНИЕ

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

• Какие имеются серверные расширения? В зависимости от того, какое программное обеспечение установлено у провайдера, есть возможность добавления дополнительных команд HTML, позволяющих выводить текущее время, счетчик посещений и некоторую другую специфическую информацию (глава 21).

ПРИМЕЧАНИЕ

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

• Имеется ли какая-нибудь статистика и как ее получать? Некоторые провайдеры предоставляют возможность доступа к некоторым URL, где хранится статистическая информация о том, сколько человек посетило ваш сайт, какие именно страницы чаще всего просматриваются и т. п. Статистика может храниться и в отдельном файле, который нужно скачивать у провайдера и затем анализировать с помощью специальной программы (ее обычно можно бесплатно скачать все у того же провайдера).

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

Доступ к дисковому пространству сервера

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

• Каков URL моего сайта? Он должен состоять из адреса провайдера и имени каталога, в котором хранятся ваши файлы. Например, если вы выберете в качестве своего имени пользователя vpupkin, то URL вашего сайта будет выглядеть так: www.fakeco.net/vpupkin/, или так: members.fakeco.net/vpupkin/, или похоже. Разные провайдеры предоставляют разные адреса, поэтому этот вопрос всегда нужно уточнять.

ПРИМЕЧАНИЕ

Большинство серверных программ по умолчанию при входе на сайт загружает файл index.html или index.htm. Именно такое имя файла следует использовать для начальной страницы.

Как отсылать свои файлы на сервер? Необходимо получить от провайдера инструкции, каким образом осуществляется доступ к вашему каталогу на сервере. Для этого обычно используется протокол FTP. Более подробно этот вопрос мы рассмотрим в параграфе «Обновление веб-сайта» в этой главе.

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

СОВЕТ

Чтобы не ошибиться, используйте нотацию DOS (83), когда имя файла может состоять максимум из 8 букв, а расширение — из 3.

• Можно ли создавать подкаталоги в моем каталоге на сервере? Большинство серверов позволяют это делать, но все же лучше уточнить.

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

Файловая структура сайта

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

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

Типы файловой организации

Известны такие типы организации веб-сайтов:

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

Функциональные каталоги. Одним из способов организации сложных сайтов является следующий. В каждом из каталогов хранятся файлы, относящиеся к одной и той же функциональной части системы. На верхнем уровне, например, будет только index.htm и относящаяся к нему графика. В каталогах следующего уровня будут содержаться файлы, относящиеся к какому-либо разделу сайта: «О фирме «Продукция «Поддержка» и т.д. В каждом из каталогов могут быть собственно HTML-файлы и относящиеся к ним графические или мультимедиа-файлы.

Каталоги по типам файлов. Некоторые веб-дизайнеры предпочитают хранить в каждом из каталогов файлы одного типа, независимо от того, какой функциональной части сайта они принадлежат. В главном каталоге сайта при этом будет только index.htm. Прочие каталоги могут содержать, например, все изображения сайта, HTML-странички, скачанные файлы и т. д. Главным достоинством такого подхода является то, что файлы при обновлении необходимо заменять только один раз. Что это значит? Например, если одна и та же картинка используется на нескольких страницах, вам достаточно будет заменить ее только в одном месте: там, где хранятся изображения. При этом все ссылки на всех стра ницах будут указывать на обновленный файл (надо, конечно, не забыть назват его так же, как старый).

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

Рис. З.4. Здесь различные файлы функциональных разделов расположены в соответствующих каталогах, но есть и один каталог, содержащий всю графику сайта

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

www .fakecorp. com/products/mousetrap html

Такая организация противопоставляется сугубо функциональной, при которой URL будет выглядеть так:

www. fakecorp. com/webpages/mousetrap. html

Каталог products все-таки более информативен, на мой взгляд/ Увидев такое название, пользователь сразу поймет, что он попадет на страничку, где представлена продукция, а кроме того, сразу станет понятно, как организован сайт.

Создание файловой иерархии

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

ПРИМЕЧАНИЕ

В некоторых операционных системах каталоги принято называть папками. Эта разница проявляется только в терминологии, сами по себе понятия совершенно идентичны. Чаще всего вам будет встречаться термин папка, когда речь будет идти о локальном жестком диске (особенно в применении к Windows и Mac OS), и каталог, когда будет иметься в виду серверный компьютер (на котором обычно установлена Unix-подобная ОС).

Для каждого сайта создавайте свою папку на компьютере, это понятно. Ее имя не имеет большого значения, так как она все равно будет эквивалентна безымянному каталогу, играющему роль корневого (/) на сервере. Ну, скажем, если вы создаете персональный сайт, назовите папку mysite. В ней будет храниться заглавный файл сайта: index.html. Внутри этой папки создайте вложенные папки в соответствии с выбранной стратегией файловой иерархией^ images, products и т. д. Помните, что эти панки должны иметь одинаковые имена на сервере и на локальной машине. Хорошим тоном считается использовать всегда и везде строчные буквы для имен папок, чтобы избежать проблем с регистрозависимыми серверами.

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

Как именовать файлы

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

Заглавная страница сайта почти всегда именуется index.html или index.htm. Большинство серверов автоматически загружают именно этот файл, если в URL не указан какой-то другой конкретный файл. Например, если вы напишете в строке адреса: http: //www. fakecorp.com/, то, скорее всего, загрузится файл http://www.fakecorp.com/index.html. Об этом свойстве веб-серверов нужно всегда помнить при написании сайтов.

Примите к сведению еще один совет: если уж вы решили хранить все файлы, составляющие сайт, в одном каталоге, давайте им максимально логичные имена, отражающие их принадлежность к тому или иному разделу. Например, about_company.html, about_headerjpg или about_ceo_photosjpg.

В этом случае вам впоследствии при обновлении сайта будет проще разобраться в собственных файлах. Это при их создании вы помните, к чему они относятся, а через месяц-другой, я уверяю вас, скорее всего, забудете, к чему относится какой-нибудь. sl2.html или 438952.jpg. Если же вы создаете функциональные или типовые каталоги, более логично давать несколько другие имена, потому что принадлежность файлов к тому или иному разделу или типу определяется именем каталога, например about\com.pany.html.

Обновление веб-сайта

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

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

1. Программа, установленная на сервере, попросит вас ввести имя пользователя и пароль для открытия доступа к своей части дискового пространства. В большинстве случаев вы указываете в FTP-программе адрес своего сервера (например, www.isp.com), хотя иногда требуется обращаться к компьютеру, адрес которого начинается с ftp. Если у вашего сайта есть собственное имя домена, вам может потребоваться зайти примерно на такой URL: www.fakecorp.com или ftp.fakecorp.com.

2. Если сервер распознает ваше имя пользователя и пароль, соединение с ним будет установлено. Скорее всего, вы окажетесь в главном каталоге своего сайта (В противном случае потребуется сменить каталог, чтобы попасть в главный. Это можно сделать с помощью команды cd или еще каким-нибудь образом).

3. Добавлять файлы можно с помощью команды put, которую нужно найти в программе FTP-клиента. Когда вы загружаете новые файлы, не забывайте переносить их таким образом, чтобы относительные пути к ним сохранялись такими, как на вашем локальном диске (Скажем, изображения переносите в каталог images и т. д.). Вам может понадобиться создать некоторые каталоги, особенно если вы впервые заходите на сервер.

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

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

Рис. З.5. Программа FTP-клиент используется для отправки файлов с винчестера локальной машины (внизу) на серверный компьютер (наверху)

Резюме

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

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

Глава 4. Создаем первую веб-страничку

• HTML-шаблон

  • Элементы документа

  • DTD

  • Элемент comment

• Создание шаблона HTML

• Заголовок документа

  • Название документа

  • Элемент <base>

  • Элемент <meta>

• Тело страницы

  • Ввод текста абзаца

  • Элемент <br/>

• Сохранение, тестирование и проверка

  • Сохранение страницы

  • Тестирование страницы

  • Проверка страницы

• Резюме

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

Из этой главы вы узнаете:

• как создать шаблон HTML;

• как правильно структурировать веб-документ;

• как вводить текст;

• как сохранять, тестировать и проверять страницы.

HTML-шаблон

Как уже было сказано в главе 3, все, что вам нужно для того, чтобы начать создавать HTML-документы, — это обычный текстовый редактор. Страницы, написанные на HTML, несмотря на их расширение (htm или html), представляют собой обычные текстовые файлы. Любая программа, в которой можно редактировать ASCII-файлы, вполне может служить редактором для создания веб-страниц. Можно для этого использовать даже текстовые процессоры, такие как Word Perfect или Microsoft Word при условии правильного сохранения файлов.

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

Элементы документа

Первое, что мы узнаем об XHTML, - это элементы, описывающие документ. Это теги, которые вы встретите на любой HTML-странице. Они определяют различные части документа.

ПРИМЕЧАНИЕ

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

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

Чтобы создать заголовок, наберите в любом текстовом редакторе следующее:

<head> </head>

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

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

<body> </body>

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

Теперь секции <head> и <body> нужно заключить внутрь какого-нибудь элемента, увидев который весь мир сразу поймет, что имеет дело с HTML-документом. Им является элемент <html>. Над самым первым тегом, <head>, введите:

<html>

После закрывающего тега </body> введите:

</html>

Несмотря на то что ваш документ сохранен в обычном текстовом формате, браузер поймет, что это именно HTML-документ.

Но постойте... Ведь нам нужен не какой-нибудь там старый стандарт HTML! Мы договорились придерживаться стандарта XHTML. Поэтому флаг <html> должен выглядеть несколько сложнее. А именно:

<html xmlns="http://www.w3.org/1999/xhtml> <http://www.w3.org/1999/xhtml">

Атрибутом тега <html> является параметр xmlns, задающий пространство имен XML. Он требуется для создания документов, совместимых с требованиями ХНТМL в частности стандарта XHTML 1.0.

Итак, вот какие элементы уже есть в нашем шаблоне:

<html xmlns="http://www.w3.org/1999/xhtml> <http://www.w3.org/1999/xhtml"> <head> </head> <body> </body> </html>

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

DTD

В начало любого веб-документа, особенно если мы стремимся к соблюдению требований стандарта XHTML, следует включать нечто, называемое DTD, то есть определение типа документа (document type definition). По секрету скажу, что и без DTD большинство браузеров прекрасно отобразят вашу страничку. Тем не менее это определение будет иметь со временем все большее значение. Что же это за загадочная секция? DTD представляет собой элемент, вставляемый в начало страницы, из которого можно узнать, какие языки и стандарты в ней используются. Поскольку XML начинает занимать все более крепкие позиции в Сети, а также благодаря тому, что для доступа к веб-службам используется все более широкий спектр приложений и устройств, DTD постепенно становится необходимой принадлежностью любого сайта.

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

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

<!DOCTYPE html

PUBLIC "\ //W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional .dtd">

Это DTD переходной версии стандарта XHTML. В нем браузеру сообщается, что вы используете спецификацию XHTML 1.0 Transitional. Вслед за атрибутом PUBLIС идет имя DTD, в котором указан используемый язык (в примере - EN, английский). Имейте в виду, что, даже если вы используете другой язык на своей странице, языком XHTML все равно остается EN.

Следующей строкой DOCTYPE является URL того файла DTD, который поддерживается W3C. Это указывать необязательно, но хуже не будет.

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

DTD спецификации XHTML Transitional позволяет добиться обратной совместимости браузеров. То есть нестандартные элементы, например, созданные третьими лицами - разработчиками собственных программ просмотра веб-страниц, будут отображаться без ошибок. Но можно заставить браузер работать в «строгом» режиме. Для этого потребуется DTD спецификации XHTML Strict:

<!DOCTYPE html

PUBLIC "\//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

Применяйте это определение, если вы точно уверены в том, что не будете использовать никаких специфических кодов, а для изменения внешнего вида страницы станете прибегать к таблицам стилей. В большинстве примеров этой книги используется DTD для XHTML Strict.

ПРИМЕЧАНИЕ

В каком случае нужно использовать один, а в каком — другой вариант? Как вы вскоре увидите, DTD для XHTML Strict применяется тогда, когда для изменения визуального дизайна страницы используют таблицы стилей, а элементы XHTML служат только для организации информации. Соответственно, DTD для XHTML Transitional применяется тогда, когда вы изменяете внешний вид страницы с помощью элементов HTML. Эта спецификация является более лояльной к использованию старых элементов, почему я советую именно ее включать в DTD уже существующих HTML-документов.

Еще хочу обратить ваше внимание на то, что разделение на строки элемента DOCTYPE (который, кстати, является единственным в XHTML пишущимся прописными буквами), как в приведенном примере, не является обязательным. То есть все атрибуты можно разместить при желании на одной строке:

<!DOCTYPE html PUBLIC "\//W3C//DTDXHTML 1.0 Strict//EN" "DTD/xhtml1-strict..dtd">

Элемент comment

Прежде чем завершить процесс создания шаблона HTML-страницы, обсудим еще один элемент. Элемент comment немного отличается от других элементов. Он держит текст, но не имеет открывающего и закрывающего тегов. Вместо этого текст комментария заключается в единственный тег, который начинается с <! - - и заканчивается -->. Все, что содержится в нем, игнорируется браузером.

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

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

СОВЕТ

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

Создание шаблона HTML

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

1. Начните с ввода следующего кода в новом файле:

2. <! DOCTYPE html PUBLIC "\//W3C//DTD XHTML 1.0 Sthct//EN"

3. "DTD/xhtml1-sthctdtd">

4. <html xml ns=" http: / /www w3org/1999/ xhtml" >

5. <head>

6. <title> Введите здесь Ваш любимый заголовок </title>

7. <!-- Дизайн тети Люси-->

8. <!-- Последнее обновление 10/12->

9. </head>

10. <body>

11. </body>

</html>

12. Теперь сохраните набранный код в текстовом файле с названием template. html (или template.htm, если у вас установлена старая версия ОС).

Теперь при необходимости создать HTML-документ загрузите template.html в текстовый редактор и сохраните его с новым именем. После этого можно приступить к его редактированию.

Заголовок документа

Как следует из названия, речь в этом параграфе пойдет о секции head HTML-документа. Она предшествует основному разделу страницы и определяется элементом <head>, который является контейнерным. Текст, заключенный между тегами <head> и </head>, сообщает браузеру общую информацию о файле, но не выводится в виде части документа. Внутри <head> могут располагаться различные элементы, среди которых ecть следующие:

• <title> - название документа;

• <base> - исходный URL документа;

• <meta> - дополнительная информация о странице

Из них обязательным является только <title>. Остальные часто отсутствуют на веб-страницах Тем не менее важно знать, что они собой представляют, поскольку с их использованием можно строить более сложные сайты.

Название документа

Элемент <title> дан человеку для того, чтобы он мог как-нибудь назвать свое творение. Большинство графических браузеров выводят это название в строке заголовка своего окна. К тому же оно часто используется, когда страница сохраняется в «Избранном» или на нее браузером ставится виртуальная закладка. Название не совпадает с именем файла (например, index.html), оно является кратким описанием страницы. Например, «Официальный сайт Василия Пупкина».

Элемент <title> должен располагаться после <head>:

<head>

<title>Карта сайта Василия Пупкина</title> </head>

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

• Избегайте общих слов. Старайтесь максимально точно сообщить, чему посвящена ваша страница. Помните, что любое название может быть использовано в качестве записи в поисковых системах, например Google или AllthcWeb.com.

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

• Старайтесь использовать в названии не более 60 символов. Спецификация XHTML не вводит ограничений на длину текста в элементе <title>. И все же, прежде чем давать своей страничке имя, которому не видно ни конца ни края вспомните о том, что строка заголовка окна ограничена.

Элемент <base>

Пути к файлам и URL могут быть довольно длинными и могут оказаться препятствием для начинающего веб-дизайнера. Элемент <base> можно использовать, чтобы немного облегчить его нелегкий труд. В принципе, <base> предназначен для установки «базового» пути, с его помощью определяются все относительные URL. Мы еще вернемся к этому вопросу в главе 7, поскольку прежде чем полностью разобраться в том, что все это значит, нужно кое-что узнать. Здесь мы упомянули этот элемент лишь потому, что он относится к заголовочной секции страниц.

Элемент <meta>

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

Когда поисковые роботы просматривают страницу, они обращают внимание на популярных <meta>-элемента:

<meta name="description" content-''Продукция фирмы Pupkin Soft"/>

<meta name="keywords" content="Bacя, Пупкин Васек, прога софт,

бесплатный, прибамбасы"/>

ПРИМЕЧАНИЕ

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

Первый из элементов <meta> используется роботами для описания вашей страни цы в списке веб-каталогов. Атрибут content может содержать 50-200 слов, в зависимости от конкретной поисковой системы (чем короче описание, тем, очевидно, лучше). Могут встречаться и такие примеры:

<meta name="description" соntеnt="Виртуальная команда

профессиональных программистов под руководством

известного во всей России Василия Пупкина напишет

для Вас программу любой степени сложности" />

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

«meta name="keywords" content="nporpaммa, утилита,кряк, халява,

бесплатный, полезный, разработка, программе обеспечение, Пупкин Pupkin hacker" />

Это, конечно, не исчерпывающие примеры использования элементов <meta>, а только самые распространенные. Есть такое правило: в данном элементе должны быть атрибуты content, а также name или http-equiv. Два последних вместе нельзя использовать. На самом деле, в name содержится общая информация, которая может быть, а может и не быть полезна для браузера. Например, можно включить в <meta> информацию о себе любимом или о своих авторских правах:

<meta name="author" content-''Владимир Борисов" />

<meta name="copyright" content="© 2002 Pupkin Ltd" />

Обычно эта возможность используется для сообщения браузеру какой-либо скрытой информации (тогда применяется name) или для доступа к свойствам сервера HTTP (тогда применяется http-equiv).

СОВЕТ

<meta> можно использовать с http-equiv для автоматической загрузки новых веб-страниц.

Тело страницы

Тело страницы — это основная ее часть, оно ограничено двумя тегами: открывающим (<body>) и закрывающим (</body>). Внутри этой секции вы размещаете все, что реально увидит пользователь в окне браузера: текст, гиперссылки, заголовки, изображения, элементы форм, таблицы и т. д.

Пример на XHTML, приведенный в листинге 4.1, показывает, в каком месте кода должна располагаться секция <body>. Обратите внимание, что она находится между <html> и </html>, -это означает, что тело страницы является подструктурой <html>. Почти все, что есть на веб-странице, заключено в эту секцию и должно размещаться между открывающим и закрывающим тегами: <body> и </body>.

Листинг 4.1 Пример секции body

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> FakeCorp Web Deals </title> </head> <body> <h1> FakeCorp's Web Deals </h1> ...реальное содержимое страницы </body> </html>

На рисунке 4.1 показано то, как листинг 4.1 выглядит в браузере (На рисунке несколько расширено реальное содержимое страницы, чтобы было на что посмотреть. Это не играет в данном случае большой роли и в листинге не отражено).

Рис. 4.1. Текст, заголовки и практически все, что вы видите в окне браузера, размещается между тегами <body> и </body>

ПРИМЕЧАНИЕ

Что такое «хорошо оформленный код»? Как вы увидите в этой и последующих главах, важной составной частью процесса создания XHTML-совместимых документов является использование хорошо оформленного кода. Этот термин означает, что ваши веб-документы соответствуют некоторым основным правилам и удовлетворяют стандарту XHTML. Если вы раньше имели дело с HTML, вы, вероятно, заметили, что в XHTML используется более строгий под ход. Например, это касается регистра букв. Если раньше язык разметки веб-страниц был регисгронезависимым, то теперь это не так. Все теги должны быть написаны строчными буквами. Все, даже пустые, теги должны иметь закрывающую косую черту. Раньше элементы типа paragraph, состоящие из одного тега, могли спокойно существовать и без этого. Теперь нужно обязательно дописывать косую черту (/) перед закрывающей угловой скобкой (>). Есть и другие нововведения, вы узнаете о них позднее. Например, старая специфи кация HTML допускала наличие пустых атрибутов, например NOSHADE . Стандарт XHTMl требует, чтобы у атрибута всегда было значение: noshade="noshade".

Ввод текста абзаца

Большая часть текста, который вы вводите между тегами <body>, и </body> заклю чается в контейнерные элементы <р> и </р>. Они используются для разделения текста на абзацы.

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

<р>Вот текст для абзаца Меня совершенно не интересует, сколько его сколько я ставлю пробелов между буквами и в какой момент мне вдруг захочется нажать Enter. He интересует Абсолютно Потому что новый абзац начнется только тогда, когда я поставлю закрывающий тег а затем - открывающий. Так-то</р> <р>Да а это уже следующий абзац</р>.

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

ПРИМЕЧАНИЕ

В ранних реализациях HTML <p> можно было использовать как пустой элемент. В начале абзаца можно было просто написать тег <р>, и этого было достаточно. Теперь такой код не будет являться хорошо оформленным. Он не работает с DTD для XHTML Strict, одним из требований которого является наличие закрывающего тега для любого элемента .Чтобы ни в чем не сомневаться, используйте как открывающий, так и закрывающий теги абзаца.

Рис. 4.2. Обратите внимание: нажатие клавиши Enter при вводе текста не влияет на отображение страницы в окне браузера

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

Сравните:

<p>Thanks for shopping at FakeCorp</p> и <p> Thanks for shopping at FakeCorp </p>

Эти два варианта будут выглядеть в окне браузера совершенно идентично. Это показано на рис. 4.2.

Элемент <br/>

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

<р>

Donald Johnson 12345 Main Street Yourtown NY 10001 </p>

Казалось бы, все правильно. Да, но такая разметка будет видна только в вашем текстовом редакторе. При открытии документа в браузере текст будет выглядеть так, как показано на рис 43, вверху.

Рис. 4.З. Ни нажатие Enter, ни применение контейнеров <р> не приведет к нужному результату

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

Решением этой задачки является использование пустого элемента <bг />, который представляет собой признак окончания строки. И вот при правильном форматировании текст адреса будет выглядеть следующим образом в HTML:

<p> Donald Johnson<br /> 12345 Main Street<br /> Yourtown NY 10001<br /> <p/>

Теперь вы увидите в браузере то, что нужно (рис. 4.4).

Рис. 4.4. Вот как выглядит текст, когда в конце каждой строки имеется элемент <br />

ПРИМЕЧАНИЕ

Хотя некоторые версии браузера Netscape способны распознать сразу несколько тегов <br /> и создать дополнительные разрывы строк, стандарт HTML не рекомендует использовать более одного <br /> в строке. Одним из приемлемых путей добавления дополнительных пробелов в HTML-документах, является применение контейнера <рre>, речь о котором пойдет в главе 5, «Форматирование текста». Наиболее подходящим решением проблемы можно считать использование таблиц стилей. См. главу 10.

Сохранение, тестирование и проверка

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

Сохранение страницы

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

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

Тестирование страницы

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

Рис. 4.5. Выберите файл и щелкните на команде Open, чтобы загрузить HTML-документ с жесткого диска и вывести его в окне браузера

Для тестирования документа в браузере:

1. Выберите File Save File, чтобы сохранить все изменения, сделанные в редакторе. Перейдите на окно браузера и выберите File Open File, чтобы открыть сохраненный элемент.

2. Документ должен появиться в браузере. Проверьте его на наличие ошибок, опечаток и т. п.

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

4. Если страница уже открыта в браузере, то для того, чтобы увидеть проделанные изменения, нужно щелкнуть на кнопке Обновить.

Проверка страницы

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

ПРИМЕЧАНИЕ

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

Итак, как производить проверку? Существуют несколько возможностей. Проще всего воспользоваться программой HTML Tidy, написанной Дейвом Раггеттом, работником W3C. Существует множество ее вариантов, включая реализацию, запускаемую из командной строки Windows. Есть версии, написанные под Windows, Mac и Unix. Загляните на http://www.w3.org/People/Raggett/tidy, там можно найти целую коллекцию программ проверки. Многие популярные редакторы HTML имеют поддержку различных надстроек HTML Tidy, например, в NoteTab для Windows и BBEdit для Macintosh.

Можно использовать и другие приложения для проверки веб-страниц. Их можно найти в Интернете: CSE HTML Validator Lite (http://www.htmlvalidator. com/lite/) для Windows (у этой программы есть одно немаловажное преимущество: она бесплатная) Real Validator (http://www.arealvalidator.com/) - еще одно приложение под Windows.

Наконец, можно использовать ПО, проверяющее веб-страницы прямо по Сети. В этом случае вам потребуется отправить свою страницу на веб-сервер и знать адрес URL страницы, которую вы хотите проверить. После этого нужно зайти на сайт, на котором установлено ратифицирующее ПО, и вводите URL. Таких сайтов много, но я советую зайти на сайт W3C, это наиболее авторитетное место. Его адрес: http://validator.w3.org/.

ПРИМЕЧАНИЕ

W3C предлагает также ратификатор для таблиц стилей (CSS). Зайдите на http://jigsaw.w3.org/ css-validator.

Резюме

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

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

Глава 5. Форматирование текста

• Организация страницы

  • Заголовки

  • Горизонтальные линии

• Стилизация текста

  • Элементы физических стилей

  • Элементы логических стилей

• Элементы стилей абзацев

  • Элемент <рге>

  • Использование <рге> для создания таблиц

  • Элемент <blockquote>

  • Элемент <address>

  • Обозначение исправлений: <ins> и <del>

• Списки

  • Упорядоченные и неупорядоченные списки

  • Списки определений

• Резюме

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

В этой главе вы узнаете:

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

• как придавать черты определенного стиля своему тексту;

• как использовать различные контейнерные элементы для форматирования абзацев;

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

Организация страницы

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

Заголовки

Заголовки являются контейнерами и, в отличие от многих других элементов XHTML, дублируются, как и <р>. Заголовки ранжируются с 1-го по 6-й уровень и позволяют отражать структуру документа. Вот пример:

<h1>3аголовки первого уровня - это самые главные заголовки в мире</h1>

<h2>Заголовки второго уровня поменьше, но тоже ничего. Используются для главных подзаголовков</h2> <h3>3aголовки третьего уровня еще меньше и используются для второстепенных подзаголовков</hЗ>

<р>Это обычный текст</р>

<h4>3аголовки четвертого уровня - это почти то же самое, что и обычный текст, но все же он немного выделяется</h4>

<h5>Заголовки пятого уровня: тоже выделяются, но по размеру меньше обычного текста</h5>

<h6>3аголовки шестого уровня: низший уровень заголовков</h6>

Рис. 5.1. Уровни заголовков, которые вы можете использовать

На рисунке 5.1 изображен результат аналогичной англоязычной странички.

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

<h1>Boт это заголовок</h1> А это - обычный текст

будет выглядеть в браузере примерно так же, как

<h1>Вот еще заголовок</h1> <p>А вот еще текст абзаца</р>

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

Горизонтальные линии

Хотите использовать различные разделители? Элемент <hr /> — это то, что вам нужно. Он помещает между абзацами горизонтальную линию, которую можно растянуть на всю ширину окна браузера. Если читатель изменяет размер окна, то размер линии соответственно масштабируется. <hr /> является пустым элементом, поэтому закрывающий тег не требуется. («Нг» расшифровывается как «horizontal rule», то есть просто «горизонтальная линия»).

Этот элемент вставляет разрыв абзаца до и после линии. <hr /> можно поместить в любом место на странице.

<hr /> <h2>Иван Топорыжкин</h2 <р>Иван Топорыжкин пошел на охоту. С ним пудель пошел, перепрыгнув

забор.</р>

У элемента <hr /> могут быть определенные атрибуты, изменяющие вид и размер линии, однако их можно применять, только если DTD относится к XHTML Transitional. Они не удовлетворяют требованиям XHTML Strict. Если вы хотите придерживаться строгих стандартов, используйте команды таблиц стилей вместо этих атрибутов. Мы обсудим это в главе 10. Они дают возможность управлять шириной, длиной и расположением горизонтальной линии в окне браузера. В таблице 5.1 показаны возможные атрибуты и назначение <hr />.

Таблица 5.1. Атрибуты <hr />

Примечание

Термин "пиксел" означает "элемент изображения" на экране, а в сетевых терминах можно сказать, что это одна точка. По умолчанию ширина элемента <hr/> равна 1 пикселу.

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

<hr size="4" width=50%" align="center " noshade= "noshade" />

Стилизация текста

Может показаться, что логические элементы избыточны. На самом деле это не так, более того, именно им и оказывают предпочтение. Почему? Потому что не все браузеры могут отображать физические стили, например выделение жирным шрифтом. Если, например, браузер, встроенный в сотовый телефон, не умеет этого, то он просто проигнорирует ваше <b> .Если же вы используете логические элементы, то телефон постарается выделить это место в тексте как-нибудь по-своему. Например, <strong> в обычных графических браузерах делает текст полужирным. Текстовые браузеры, не имеющие возможности изменить толщину букв, прибегают к выделению с помощью подчеркивания или изменения яркости. Но элементы типа <b> теми же самыми программами будут, скорее всего, проигнорированы.

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

Элементы физических стилей

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

В таблице 5.2 собраны некоторые описания физических стилей.

Таблица 5.2. Физические стили

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

1. Введите текст.

2. Поместите курсор в начало выделяемого текста.

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

4. Введите закрывающий тег.

Рассмотрим пример, в котором используется физический стиль.

<р><tt>Новости сайта:</tt> Мы изменили расписание выпусков <j>последних новостей</j> Теперь они будут выходить по <b>средам</b> (по просьбам наших читателей), таким образом в <u>четверг и пятницу</u> вы будете иметь возможность воспользоваться полученной информацией ^*</p> <p>^*Mы не гарантируем, что до конца недели расписание вступит в силу!</р>

На рисунке 5.2 показано, как выглядят в браузере примененные здесь стили.

Рис. 5.2. Обычно браузеры не отличаются разнообразием способов отображения физических стилей

ПРИМЕЧАНИЕ

Важно размещать теги маркировки в непосредственной близости от выделяемого текста. Это гарантирует, что пробелы будут нужной ширины. Например, сравните: Четверг и <b>пятница</b> и Четверг и <b>пятница</b>. Некоторые (не все) браузеры могут отреагировать на второй пример таким образом: «Четверг и пятница».

Элементы логических стилей

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

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

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

Таблица 5.3. Логические стили

Что касается графических браузеров, то обычно <епт> соответствует курсиву, а <strong> — жирному шрифту. Но это не всегда так. Иногда <еm> может означать подчеркивание, a <strong> — выделение яркостью. В голосовых браузерах текст, помеченный <еm>, произносится громче, чем обычный, a <strong> - еще громче. Основная идея заключается просто в том, что <еm> делает текст выделенным, а <strong> - усиленно выделенным.

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

СОВЕТ

Internet Explorer под Macintosh позволяет использовать персональные таблицы стилей, с помощью которых можно настроить вид страниц. Выберите в диалоговом окне Preferences пункт Web Content и активизируйте команду Use My Stylesheet (для этого потребуется указать размещение документа, содержащего таблицу стилей, как описано в главе 10). Netscape и IE под Windows позволяют выбрать настройки цветов и шрифтов. Opera (http:/ /www.opera.com), существующая в ряде вариантов под различные операционные системы, позволяет настраивать вид элементов.

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

Рис. 5.3. Обычным браузером логические стили воспринимаются так же, как физические

Листинг 5.1. Логические стили

<р><еm>Все пользователи</еm> должны помнить о том, что нужно корректно завершать каждый сеанс работы на терминале <strong>nepeд тем как уходить</strong>. Чтобы <dfn>завершить ceaнс</dfn> необходимо набрать в командной строке <kbd>logout</kbd> или <kbd>exit</kbd>. Когда вы увидите на экране результат выполнения этой команды <samp>Thank you. Goodbye.</samp>, можете смело выключать компьютер. Теперь это безопасно. Для этого воспользуйтесь кнопкой на лицевой панели.</р>

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

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

<p><q lаng="ru">Я не понимаю, что ты имеешь в видy</q> - сказал Джек</р>

Атрибут lang не является обязательным и содержит двухбуквенное обозначение национального языка, например "fr" (французский), "es" (испанский).

Последние два логических элемента, <abbr> и <acronym>, немного отличаются от других. Обычно они используются для ввода дополнительной информации о сокращениях. Браузер может каким-то образом интерпретировать ее, а может и проигнорировать, но в любом случае хуже от этого не будет. У обоих элементов могут быть атрибуты lang и title. Последний содержит расшифровку данного сокращения или акронима. Вот несколько примеров:

<abbr lang="ru" titlе="Российская Федерация">РФ</аbbг><br /> <acronym title="To есть">т. e.</a><br />

<acronym lang="fr" title="Association Canadienne pour la Recherche en Economie de la Sante">ACRES</acronym>

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

Рис. 5.4. В Internet Explorer для Windows текст, содержащийся в атрибуте title, выводится при наведении мыши на слово, заключенное в контейнере <abbr> или <acronym>

СОВЕТ

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

Элементы стилей абзацев

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

Элемент <рге>

Элемент под названием «преформатированный текст» представлен тегами <рге> и </рге>. Его отличие от элемента «абзац» состоит в том, что он распознает все вводимые пробелы и переводы строк. То есть вы получаете в окне браузера при мерно то же и с тем же оформлением, что отображается в окне текстового редактора. При этом не требуются дополнительные усилия для добавления пробелов, не нужны <br /> для перевода строки. Следующий пример проиллюстрирован на рис 5.5.

<рrе>

Я обнял эти плечи и взглянул

На то что оказалось за спиною

И увидал, что выдвинутый"стул Сливался с освещенною стеною </рrе>

Рис. 5.5. Теги <рrе> и </рrе> заставляют браузер обращать внимание на пробелы и переводы строк в исходном коде

Преформатированный текст идеально подходит для оформления листингов npo грамм, потому что обычно в этом случае вы стремитесь передать не только синтаксис, но и правильное форматирование. Элемент <рге> позволяет также довольно просто создавать таблицы, используя пробелы в качестве разделителей. Тем не менее, поскольку эти таблицы печатаются моноширинным шрифтом, скорее всего вы согласитесь потратить время, но оформить таблицу специальными средствами HTML; они обсуждаются в главе 8.

ПРИМЕЧАНИЕ

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

Использование <рrе> для создания таблиц

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

Например:

<рге>

Год Событие 1965 Я родился

1976 Написан первый рассказ

</рге>

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

<рге>

Год Событие 1965 Я родился <b>1976</b> <ij>Написан первый рассказ</ij> </рге>

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

СОВЕТ

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

Как создать простейшую таблицу?

1. Откройте файл шаблона и введите нечто подобное расположенному между тегами <body> Возможно, придется повозиться немного с интервалами между колонками, чтобы в браузере таблица приняла ровный вид.

<h1>Средний часовой доход в регионах</h1>

<рге> Регион Ручной труд Умственный труд Бизнес Реклама Северо-Запад $40 $50 $75 $100 Северо-Восток $35 $45 $70 $95 Юго-Запад $30 $40 $65 $90 Юго-Восток $25 $35 $55 $75 </рге>

2. Сохраните HTML-документ, затем примените команду Open File в браузере, чтобы просмотреть то, что вы создали

.

ПРИМЕЧАНИЕ

Даже в составе контейнера <рге> символы табуляции браузером не распознаются. Если Bы пользуетесь текстовым редактором или процессором, старайтесь не использовать клавишу Tab для выравнивания колонок. Для этого существует клавиша Пробел. Некоторые HTML редакторы учитывают этот момент и заменяют табуляцию серией пробелов.

Элемент <blockquote>

Исторически сложилось так, что контейнерный элемент <blockquote> использует ся благодаря своим физическим, а не логическим атрибутам. Вообще-то, он предназначен для идентификации отступов абзацев, чтобы абзацы визуально выделялись из текста. Хотя это и легитимное применение даже с точки зрения XHTML, оно не должно быть основной причиной для использования <blockquote>. В следующем примере показано, как этот элемент справляется с задачей визуального выделения абзаца.

<h1>Новости сайта!</h1> <blockquote>Haш сайт существует для тех ,кто заботится о своем <string>желудке</string>. Здесь вы найдете рецепты блюд, которые можно приготовить <i>дома</i>, также информацию о том, где можно вкусно и недорого поесть в вашем городе.

См. раздел <tt>Где перекусить</tt>. Не забудьте посетить наш <еm>Форум</еm>, там вы сможете обменяться мнениями с местными гурманами. Обязательно подпишитесь на <strong>paccылкy</strong>. Воспользовавшись этой возможностью, вы сможете получать электронные письма с самыми свежими новостями, ресторанами и интересными рецептами. </blockquote>

На рисунке 5.6 показано, как этот текст выглядит в браузере.

Рис. 5.6. Элемент <blockquote> в действии

И все же, хотя это не является нарушением стандартов, я бы не стал использовал <blockquote> для организации отступов и доверил бы это таблицам стилей. Согласно W3C элемент <blockquote> должен использоваться для ввода цитируемого текста. Например:

<р>Из историй Геттисбурга:</р> <blockquote>Четыре века и семь лет тому назад наши праотцы привели сюда народ и создали ноеус нацию, выращенную в свободе и решившую посвятить свое существование пропаганде равенства всех людей на Земле </blockquote>

Здесь показано более грамотное применение элемента <blockquote>. Результирующая страница показана на рис 5.7. Еще раз повторюсь: нет ничего страшного в том, чтобы использовать этот элемент для определения отступов абзаца, однако в этом случае следует иметь в виду, что все браузеры интерпретируют понятие абзаца по-разному.

Рис. 5.7. Элемент <blockquote> используется по прямому назначению

Следует запомнить, что <blockquote> в браузере отображается обычным шрифтом абзаца, оформляется тем же стилем. Он не воспринимает лишние пробелы и переводы строк, в этом он похож на <р>.

У этого элемента может быть аргумент cite, позволяющий включать в цитату URL, с которого она взята. Например:

<blockquote cite="http://eserverorg/history/gettysburg-addresstxt"> Четыре века и семь лет тону назад наши праотцы привели сюда народ и создали новую нацию, выращенную в свободе и решившую посвятить свое существование пропаганде равенства всех людей на Земле. </blockquote>

Элемент <address>

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

Вот пример использования элемента <address>:

<address>Cтpaница создана и поддерживается почтальоном Печкиным</аddrеss>

Традиционно этот элемент размещается в конце веб-документа и сообщает следующую информацию:

• когда страница была обновлена в последний раз;

• с кем можно обсудить вопросы, связанные с этой страницей (обычно e-mail вебмастера);

• URL данной страницы;

• телефонные номера или физические адреса компании или организации

Большинство этих данных не являются жизненно важными для вашей страницы, но являются прекрасным дополнением информации, представленной на странице. Пример более полного использования элемента <address>:

<address>Этa страница была последний раз обновлена 6/12 в 9:08 pm.<br /> В случае проблем пишите веб-мастеру по адресу: pechkin@mailprostokvashino.ru.<br />

Адрес:

12345 Ростовская обл., село Простоквашино<br /> ул. Почтовая, д. 1.</address>

Обратите внимание: по-прежнему для обозначения перевода строки используете тег <bг />. На рисунке 5.8 показано, как браузер отображает приведенный выше код.

Рис. 5.8. Обычно текст, заключенный в контейнер <address>, отображается курсивом. Обозначение исправлений: <ins> и <del>

Обозначение исправлений: <ins> и <del>

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

Используйте элемент <del>, чтобы обозначить фрагмент текста, который, скорее всего, будет удален, a <ins> - чтобы обозначить фрагмент, вставляемый на место удаляемого. Они могут использоваться и независимо, если вы просто хотите вставить или удалить текст. Это полезно, когда над страницей работают несколько человек и вы хотите отслеживать изменения. Подобная функция имеется в текстовом процессоре Microsoft Word, - если вы ей когда-нибудь пользовались, вы легко обнаружите сходство.

У обоих элементов могут быть необязательные атрибуты cite, datetime или title. Они используются для того, чтобы пояснить свои действия. При этом с помощью datetime можно указать время, когда соответствующий элемент был вставлен. Тут тоже есть свои тонкости. Вот пример:

2001-12-05109:00:00-05:00

Это означает: 9:00 am EST, 12/05/2001. Что касается -05:00, то это часовой пояс. Атрибут cite позволяет задавать ссылку на URL, на котором содержится объяснение данного добавления или удаления. А атрибут title позволяет делать то же самое с помощью тегов. Рассмотрим пример:

<р>Это важная информация для <ins datetime= "2001-12-05T09:00:00-05:00" titlе="Изменить по результатам голосования">Совета директоров,</ins><dеl> президента и его помощников.</del> Именно им необходимо иметь на руках более 50% акций предприятия.</р>

Пример проиллюстрирован на рис. 5.9.

ПРИМЕЧАНИЕ

<ins> и <del> можно применить и к целому абзацу или другому блоку текста.

Рис. 5.9. Элементы <ins> и <del> помогают в процессе работы над документом

Списки

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

<тип списка> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </тип списка>

Каждый элемент <li> - это пункт списка, который всегда пишется с новой строки. С чего начинается эта строка, зависит от того, упорядочен список или нет, маркированный он или нумерованный.

Упорядоченные и неупорядоченные списки

Проще всего понять, что это такое, если говорить в терминах «нумерованный список» и «маркированный список» (соответственно). Нумерованный/упорядочен ный список задается элементом <оl>, а маркированный/неупорядоченный — элементом <ul>. Но пункты любого из них обозначаются с помощью <li>. При этом если список упорядоченный (<оl>), то в начало каждой строки вставляется ее порядковый номер в списке; если он неупорядоченный (<ul>), то вставляется знача маркировки. Вот как выглядит упорядоченный список:

<ol> <li> Первый пункт.</li> <li> Второй пункт.</li> <li> Третий пункт.</li> </оl>

А вот пример неупорядоченного списка:

<ul> <li> Первый пункт.</li> <li> Второй пункт.</li> <li> Третий пункт.</li> </ul>

В браузере это выглядит так, как показано на рис. 5.10.

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

<ol> <li> Первый пункт.</li> <li> Второй пункт.</li> <li><ul> <li> Пункт 3.1 </li> <li> Пункт 3.2 </li> </ul></li> <li> Четвертый пункт</li> </ol>

Рис. 5.10. Нумерованные и маркированные списки

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

Атрибуты упорядоченного списка

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

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

Таблица 5.4. Атрибуты элементов нумерованных списков

С помощью атрибута start можно изменять начальное значение нумерованного списка. Например, чтобы вести счет с 10, напишите: <ol start="10">.

Атрибут value используется для изменения значения конкретного элемента списка Например, можно изменить нумерацию прямо внутри списка:

<ol> <Li>Пункт 1</Li> <Li>Пункт 2</Li> <li value="l"> Пункт 1</Li> <Li>Пункт 2</Li> </ol>

Атрибуты маркированного списка

Этот пример тоже подходит только для переходного варианта стандарта ХНТМL. Если вы хотите применять DTD для XHTML Strict, не забудьте, что для изменения внешнего вида любых элементов следует применять таблицы стилей. Тем не менее существуют атрибуты маркированного списка, изменяющие его вид (вид маркеров):

• заполненный кружок — <ul type="disc">

• квадратик — <ul type="square">

• пустой кружок — <ul type="circle">

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

Списки определений

Последним типом списков является список определений. Он включает в себя два уровня элементов: термины и их определения. Синтаксически такой список coсто ит из следующих элементов: главного контейнера списка <dl> (definition list), тер мина <dt> (definition term) и определения <dd> (definition) <dt>, по идее, должен помещаться на одной строке, хотя в случае необходимости браузер переносите на следующую строку <dd> - это целый текстовый абзац. Большинство графиче ских браузеров размещают определение под термином с небольшим отступом.

Например:

<dl> <dt><b>indent</b> <i>n</i></dt> <dd>3азубрина, зубец, выемка, вырез</dd> <dt><b>indentation</b> <i>n</i></dt> <dd>Вырезывание в виде зубцов</dd> <dt><b>indenture</b> <i>n</i></dt> <dd>Coглашение,контракт в двух экземплярах; договор между учеником и хозяином</dd> </dl>

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

СОВЕТ

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

Рис. 5.11. Типичный список определений

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

Например:

<dl> <dt>Bepxний город - над 60-й улицей</dt> <dt>Средний город - между 14-й и 60-й улицами</dt> <dt>Нижний город - под 14-й улицей</dl>

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

Резюме

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

В главе 6 вы узнаете, как создавать изображения и вставлять их в веб-страницы с помощью элемента <img /> и его атрибутов.