Создание WEB-страниц

NSFNET - Развитие Интернет

Развитие того, что стало теперь Интернетом, берет старт в 1986 г., когда началось финансирование Национального научного фонда (NSF - National Science Foundation). Сеть NSFNET была первоначально создана для связи суперкомпьютеров в основных исследовательских организациях, но она быстро выросла и включила в себя большинство крупнейших университетов и исследовательских лабораторий. В 1990 г. существовало более 300000 хост-компьютеров. В 1994 г. по поручению NSF был подготовлен отчет с названием "Осознание информационного будущего: Интернет и дальнейшее развитие". Этот отчет представил программу эволюции "информационной супермагистрали" и оказал значительное влияние на пути развития Интернет.

В 1995 г. после короткой, но успешной истории финансирование NSFNET было прекращено и были сняты ограничения на коммерческое использование, что привело к экспоненциальному росту использования Интернет. Финансирование, которое шло на поддержку NSFNET, было перераспределено между региональными сетями, чтобы помочь им в получении соединения с Интернет у многочисленных новых коммерческих поставщиков сетевых услуг. За следующие три года количество хост-сайтов росло на миллион в год, а в 1995 -1997 гг. число сайтов увеличивалось более чем на 6 миллионов в год и достигло почти 20 миллионов. К этому времени правительственные агентства, образовательные учреждения и частные предприятия стали активными клиентами Интернет.

24 октября 1995 г. Федеральный совет по сетям (Federal Networking Council) единогласно одобрил резолюцию, определяющую термин Интернет (Internet):

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

WWW - Информационная сеть

Хотя e-mail и пересылка файлов были важны для развития Интернет, они не обладали удобными методами, которые необходимы пользователям-новичкам, чтобы получить доступ к растущим хранилищам информации, разбросанным по всему миру. Все еще было слишком много технических проблем, связанных с коммуникацией через Интернет. Реализация задачи создания информационной супермагистрали требовала развития инструментов для "сокрытия" технологии Интернет за удобным для человека интерфейсом. Это привело к развитию Всемирной паутины (WWW) и программного обеспечения браузеров Интернет.

В середине 1960-х Тед Нельсон создал слово " гипертекст " для описания системы непоследовательных ссылок внутри текста. Идея состояла в том, чтобы перемещаться по текстовым ссылкам, не читая при этом материал в линейной последовательности. Фрагмент информации в одном месте будет вести к родственной информации в другом месте через цепочку ссылок, чтобы собрать сведения из различных источников, разбросанных по множеству документов. И только пятнадцать лет спустя Тим Бернерс-Ли, работавший консультантом в Европейском центре ядерных исследований (CERN), написал программу с названием "Enquire-Within-Upon-Everything" ("Задай любой вопрос"), которая позволяла создавать ссылки между произвольными узлами текста в документе. Каждый узел имел заглавие-идентификатор и список двунаправленных ссылок, поэтому читатели могли перемещаться из одного раздела документа в другой, активируя текстовые ссылки.

В 1990 Бернерс-Ли начал работу над гипертекстовым " браузером ". Он придумал термин "WorldWideWeb" ("Всемирная паутина") для названия программы и "World Wide Web" - для названия проекта. Проект WWW был первоначально разработан для создания распределенной гипермедийной системы, которая была легко доступна из любого настольного компьютера, и для согласования физических исследований, разбросанных по всему миру. Web содержала стандартные форматы для текста, графики, звука и видео, которые легко индексировались и были доступны для поиска всем сетевым машинам. Были предложены стандарты для Единообразного локатора ресурса (URL - Uniform Resource Locator), который является схемой адресации Web; Протокола передачи гипертекста (HTTP - HyperText Transfer Protocol), который является множеством сетевых правил для передачи Web-страниц; и Языка разметки гипертекста (HTML - HyperText Markup Language), который является темой данного учебника.

Прототип браузера был написан для компьютера Apple Next, который был не очень широко распространен. Была создана упрощенная версия, которая подходила для любой компьютерной платформы, так называемый "Line-Mode Browser" ("Построчный браузер"), и выпущена центром CERN как свободно доступная программа (freeware). Бернерс-Ли позднее переехал на работу в MIT (Массачусетский институт технологии) и помог создать Консорциум WWW (W3С), который сегодня поддерживает стандарты технологий Web.

В январе 1993 г. Марк Андреессен, который работал в Национальном центре суперкомпьютерных приложений (NCSA) в Университете Иллинойса, выпустил версию своего нового графического браузера для Web на основе принципа "укажи и щелкни" для работы на машинах Unix. В августе Андреессен и его коллеги по NCSA выпустили бесплатные версии для Macintosh и Windows. Андреессен и Эрик Бина разработали браузер Mosaic, а позже основали корпорацию Netscape для производства его потомка браузера Navigator, одного из первых и наиболее популярных коммерческих браузеров. В августе 1994 г. NCSA передала все коммерческие права на браузер Mosaic компании Spyglass, Inc. Spyglass впоследствии лицензировала эту технологию нескольким другим компаниям, включая Microsoft, для использования в Internet Explorer.

И только в 1996 г. компания Microsoft стала основным игроком на рынке браузеров. Сегодня Internet Explorer является наиболее широко распространенным браузером, которым пользуется во всем мире около 84% пользователей Интернет.

Техническая конвергенция

Интернет возник в результате сближения множества технологий, которые соединились с целью электронного обмена информацией. Сегодня Интернет является сетью взаимосвязанных сетей, которые используют общие коммуникационные протоколы, или правила обмена, для передачи информации между компьютерами. Одним из этих протоколов является Протокол передачи гипертекста - HTTP, который управляет обменом между компьютерами гипертекстовыми документами или страницами Web. Процесс обмена информацией, который применяет этот протокол, в своей совокупности называется Всемирной паутиной (WWW - World Wide Web ). Другими протоколами Интернет являются Протокол передачи файлов (FTP - File Transfer Protocol), а также Простой протокол пересылки почты (SMTP - Simple Mail Transfer Protocol), который используется для обмена сообщениями e-mail. Интернет не является единой сущностью. Он объединяет множество различных способов поддержания и обмена информацией среди множества различных компьютеров во множестве различных сетей, разбросанных по всему миру.

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

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

Использование Интернет

В 1969 г. Интернет начинался с четырех узлов и четырех пользователей. Сегодня, согласно Всемирной книге фактов ЦРУ (CIA World Factbook), во всем мире существует более 600 миллионов пользователей Интернет, что составляет около 9% населения Земли. Однако распространение Интернет не равномерно на земном шаре. Лидируют страны, обладающие высоким интеллектуальным и организационным потенциалом вместе с политической и экономической системами, необходимыми для развития этих возможностей. Страны, занимающие первые двадцать пять позиций по доле пользователей Интернет от общего количества населения, показаны в таблице 1.1.

Источник: CIA World Factbook (http://www.odci.gov/cia/publications/factbook/index.html)

Для стран, объединенных по регионам, степень использования Интернет показана в Таблице 1.2. Примечательно то, что Северная Америка и Европа составляют более 52% пользователей Интернет, хотя в абсолютных числах азиатские страны имеют наибольшее число пользователей.

Источник: Internet World Stats (http://www.internetworldstats.com/index.html)

Технологии Интернет

В недавнем прошлом соединение с Интернет было по большей части медленным. Пользователи были ограничены использованием существующих телефонных линий с ненадежными коммутируемыми соединениями. Большинство пользователей соединялись с Интернет со скоростью, ограниченной сверху 56000 бит информации в секунду. Однако последние годы отмечены значительным ростом скорости Интернет за счет применения технологии DSL и кабельных модемов со скоростями до 5000000 бит в секунду. Эти широкополосные соединения с Интернет продолжают развиваться в США и во всем мире. Как показано в таблице 1.3 к середине 2005 г. большинство домашних пользователей использовали высокоскоростной доступ к Интернет.

Источник: WebSiteOptimization.com (http://www.websiteoptimization.com/bw/0505/)

Большинство работающих в США также имеют высокоскоростные линии связи с Интернет через сетевые соединения своих компаний. В середине 2005 г. более 80% работников имели доступ к высокоскоростным соединениям.

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

Источник: Browser News (http://www.upsdell.com/BrowserNews/index.htm)

При проектировании Web-страниц для известной аудитории с известным браузером усилия по разработке становятся относительно простыми. Страницы необходимо тестировать только в определенном браузере. Однако при проектировании для общего доступа необходимо делать предположения о наиболее вероятной аудитории.

В идеале, надо протестировать страницы во всех наиболее популярных браузерах, например, в Internet Explorer и Firefox. Как правило, при следовании стандартам W3C, представленным в этом учебнике, страницы будут иметь наилучшие шансы правильного вывода во всех браузерах, которые следуют этим стандартам.

Все современные мониторы ПК могут работать с разрешением экрана 1024 x 768 (пикселей), и многие пользователи выбирают это разрешение для вывода Web-страниц. Тем не менее, до сих пор достаточно много пользователей ограничены в выборе или выбирают разрешение дисплея 800 x 600. Очень немногие в настоящее время пользуются устаревшими дисплеями 640 x 480. Безопасный подход состоит в проектировании Web-страниц для разрешения дисплея 800 x 600, если нет полной уверенности, что предполагаемая аудитория предпочитает большие размеры страниц, возможно, с более высокими разрешениями. Так как технология развивается очень быстро, то очень скоро разрешение 1024 x 768 станет минимальным стандартом.

Необходимо отметить, что разрешение экрана не связано с размером экрана. Даже маленькие экраны (например, 15" или 17") можно настроить для вывода высокого разрешения, в зависимости от объема установленной в системе видеопамяти. Тем не менее, размер окна, в котором открывается браузер, может оказать значительное влияние на вывод страницы Web. Полноэкранный вывод страницы обычно отличается от страницы, открытой в окне меньшего размера, так как страница согласовывает свою компоновку с размером окна. Эта автоматическая настройка позволяет странице расширяться или сжиматься в соответствии с выбранной шириной окна, делая менее важным проектирование для определенного разрешения экрана или определенного размера окна.

При выводе на странице цветной графики необходимо учитывать глубину цвета (диапазон цветов) мониторов. Обычно используются режимы с трехцветным представлением. Пользователи с более старыми ПК имеют обычно 8-битные мониторы (256 цветов), число таких пользователей составляет не более 1%. Другие пользователи имеют обычно 16-битные (65,536 цветов) и 24-битные (16,777,216 цветов) мониторы, представляющие примерно 18% и 72%, соответственно. При создании собственной графики есть возможность выбора выводимой глубины цвета. При использовании готовой графики такой возможности может не быть. Помните, что изображения, сохраненные с большой глубиной цвета, могут выводиться с неправильными цветами на мониторах с небольшим объемом видеопамяти и меньшим количеством возможных цветов.

С учетом тенденций развития технологий Web разработчики Web могут рассчитывать, что современные компьютерные системы будут только совершенствоваться. Это означает, что при создании Web-страниц можно использовать самые современные технологии Web, так как количество пользователей, применяющих более старые технологии, постоянно сокращается. Оптимальным является разработка для браузера Internet Explorer, работающим с разрешением 800 x 600 пикселей и глубиной цвета 24 бита в полноэкранном окне. Можно делать настройку для других браузеров, других разрешений экрана и другой глубины цвета, если предполагается посещение страницы пользователями с другими технологиями.

Обслуживание страниц Web

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

Серверы и клиенты

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

Доступ к документам Web

Пользователи взаимодействуют с WWW с помощью программы браузера Web. Чтобы извлечь страницу Web, расположенную на определенном сервере, используется специальная адресация для идентификации сервера и страницы. Этот адрес Web, называемый Единообразным локатором ресурса (URL - Uniform Resource Locator), вводится в адресное поле браузера и посылается через Интернет в поисках сервера.

Например, адресом URL страницы, показанной на рисунке 1.7, будет http://www.google.com/enterprise/mini/index.html

URL состоит из нескольких частей:

протокол Часть адреса "http" определяет метод сетевой передачи (протокол), используемый для поиска и доставки страницы браузеру. HTTP является протоколом передачи гипертекста (HyperText Transfer Protocol), стандартным методом, который применяется для взаимодействия с WWW.

имя домена Часть адреса www.google.com определяет имя сервера. Практически всем серверам Web присвоены имена доменов для уникальной идентификации среди всех серверов в Интернет. При отсутствии имени, местонахождение сервера можно определить по его числовому адресу протокола Интернет (IP), записанному в формате с точками 000.000.000.000. Однако обычно используются имена доменов, так как адреса IP трудно запоминать.

путь доступа После прибытия на сервер необходимо пройти путь доступа к каталогу, чтобы найти определенный документ для извлечения. Cтраница Web на рисунке 1.7 имеет путь доступа enterprise/mini; то есть документ расположен в каталоге mini, который является подкаталогом каталога enterprise.

имя файла Имя файла документа является конечной частью пути доступа. Web страница на рисунке 1.7 с именем index.html расположена в каталоге mini.

Обычно требуется знать точное имя страницы Web, чтобы ее извлечь. Однако, если страница имеет имя index.html, как в примере выше, то она извлекается, даже если имя страницы отсутствует в URL. Имя index.html, а также другие специальные имена, такие, как index.htm, default.htm и default.html, означают страницу по умолчанию, которая извлекается, если имя страницы не задано.

Именно поэтому можно извлечь страницу Web из Интернет с помощью простого адреса URL из имени домена (например, http://www.google.com). В главном каталоге Web-cайта имеется страница с одним из этих специальных имен, которая будет извлечена. Эту страницу по умолчанию часто называют домашней страницей сайта.

URI

Хотя термин "URL" используется повсеместно, более точно называть Web-адрес URI (Uniform Resource Identifier - Единообразный идентификатор ресурса). Этот термин подчеркивает, что ресурсы Web являются чем-то большим, чем просто страницами Web; они могут быть графическими изображениями, файлами мультимедиа, загружаемыми файлами текстового процессора, электронной таблицы, и базы данных, электронными почтовыми ящиками и множеством других типов документов и служб Web.

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

Пользователь может не знать IP-адрес своего компьютера, но он присваивается ему поставщиком услуг Интернет (ISP) при соединении с Интернет. Поэтому Web-сервер может доставить страницу сразу запрашивающему ПК.

Просмотр локальных страниц Web

Кроме получения доступа через Интернет страницы Web можно просматривать локально. Личные страницы Web можно сохранить на своем настольном ПК и открывать в браузере. Эти страницы ничем не отличаются от любых других файлов на компьютере. Фактически все документы Web, описанные в этом учебнике, можно создать на своем настольном ПК, сохранить на своем настольном ПК и извлекать для вывода на своем настольном ПК.

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

Можно также просматривать локальную Web-страницу, открывая сначала браузер и выбирая затем "Open..." (Открыть ... ) из меню File, а затем просмотреть каталоги на диске, чтобы найти и открыть документ. Этот процесс показан на рисунке 1.9.

Создание присутствия в Web

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

Теги XHTML и стили CSS

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

Язык разметки HTML

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

<h2>Форматировать эту строку текста.</h2>

которая окружает текстовую строку "Форматировать эту строку текста." тегами HTML для разметки <h2> и </h2> (стиль заголовка 2), чтобы вывести текст показанным на рисунке 1.10 стилем.

Эти коды разметки приказывают браузеру форматировать текст, увеличивая и делая жирными появляющиеся между ними символы. Коды разметки, называемые также тегами или элементами HTML, всегда помещаются между символами "<" и ">", чтобы выделить их в текстовом контенте, к которому они применяются. Обычно "открывающий" тег указывает на начальную точку форматирования ( <h2> в примере выше), а отдельный "закрывающий" тег указывает на конечную точку форматирования ( </h2> в примере выше). Изучив доступные теги HTML, можно создавать свои собственные страницы Web для представления текста и графики практически в любом требуемом виде.

Изучение HTML

Язык HTML не является языком программирования компьютеров. Это просто набор кодов разметки, которые структурируют и задают стиль текста и графики, имеющихся на странице Web. Изучение HTML является, по сути, изучением этих тегов разметки и их использования для задания стиля страниц Web.

Существуют доступные методы для создания страниц Web, не требующие изучения HTML. Это хорошо известные программы Microsoft FrontPage или Macromedia Dreamweaver. Это редакторы страниц Web, работающие в режиме WYSIWYG ("что видим, то имеем") и использующие буксировку элементов, которые неявно для пользователя создают необходимые коды. Фактически можно создавать страницы Web с помощью этих программных пакетов, совершенно не зная HTML. Зачем же тогда беспокоиться об изучении HTML?

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

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

Развитие стандартов HTML

Как отмечалось, консорциум WWW (W3C) поддерживает стандарты технологий Интернет, включая стандарты для языков разметки Web. Самый ранний стандарт HTML появился в 1995 г., за ним последовали версии HTML 3.0, HTML 3.2, и завершилась разработка в 1999 г. версией HTML 4.01. Однако в дальнейшем происходит существенная переработка языков разметки.

Последние усилия W3C сосредоточены на определении нового языка XML (eXtensible Markup Language - Расширяемый язык разметки) для использования в качестве универсального языка разметки, заменяющего более старые языки, и со стандартами создания будущих языков для специальных случаев разметки. Например, были созданы версии XML для генерации графики Web (VML - Vector Markup Language), для вывода математических выражений (MathML - Mathematical Markup Language), для создания интерактивных аудио/видео представлений (SMIL - Synchronized Multimedia Integration Language), для распознавания цифровой подписи (InkML - Ink Markup Language) и другие.

Недавние усилия по переработке HTML как языка на основе XML привели к его текущей инкарнации в качестве XHTML (eXtensible HyperText Markup Language - Расширяемый язык разметки гипертекста). Начальная версия, XHTML 1.0, появилась в 2000 г. как переходный стандарт, который все еще распознает некоторые популярные свойства HTML. Однако к 2001 г. он развился в версию XHTML 1.1 и полностью отказался от оставленных свойств предыдущих стандартов HTML. Язык в настоящее время пересматривается в направлении версии XHTML 2.0.

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

Стандарты кодирования XHTML

Этот учебник пытается выдержать баланс между строгим следованием XHTML 1.1 (текущим стандартом) и популярными оставленными свойствами HTML, включенными в XHTML 1.0. Основное содержание основывается на XHTML 1.1, однако дополнительные разделы представляют свойства XHTML 1.0, которые все еще популярны и распознаются современными браузерами.

При создании страниц Web рекомендуется включать кодирование, чтобы указать стандарт W3C, которому будет следовать кодирование. Поэтому желательно, чтобы все страницы Web включали следующую начальную строку кода для указания, что документ Web является фактически документом XML:

<?xml version="1.0" encoding="UTF-8"?>

Соответствие XHTML 1.1

Кроме того, страница Web должна указать, с каким множеством стандартов она согласована. Страница Web обозначает свое соответствие стандарту с помощью Определения типа документа (DTD), указанного в начале страницы после объявления XML. Так как основным стандартом соответствия, которому следует учебник, является XHTML 1.1, то DTD соответствия кодируется следующим образом.

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Соответствие XHTML 1.0

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

Тремя DTD соответствия, которые необходимо указывать для этих версий XHTML 1.0, являются:

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

В этом учебнике все страницы, за исключением указанных специально, закодированы в соответствии с XHTML 1.1, что почти совпадает со стандартами XHTML 1.0 Strict. Поэтому использовать последний нет необходимости. Для тех страниц Web, которые нарушают стандарты XHTML 1.1 (и XHTML 1.0 Strict), сделаны примечания об используемом для такой страницы DTD.

Корневой элемент <html>

Наконец, корневым элементом (открывающим тегом) страницы XHTML должен быть тег <html>, указывающий пространство имен применяемого стандарта, то есть, расположение в Web применяемого для страницы стандарта XHTML. Во всех случаях корневой элемент кодируется, как показано на листинге 1.5.

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

Стандарты соответствия кодированию

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

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Страница Web, соответствующая XHTML 1.1</title>
</head>
<body>

<h2>Форматировать эту строку текста.</h2>

</body>
</html>

Страницы Web в этом учебнике, которые не строго соответствуют стандартам XHTML 1.1, могут использовать стандарты XHTML 1.0 Transitional. Эти страницы имеют в начале код, показанный на листинге 1.7.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Страница Web, соответствующая XHTML 1.0 Transitional</title>
</head>
<body>

<h2>Форматировать эту строку текста.</h2>

</body>
</html>

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

Валидация страниц Web

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

Служба валидации W3C доступна по адресу: http://validator.w3.org. По этому адресу находится страница, показанная на рисунке 1.12.

Существует три возможности для проверки страниц. Можно ввести URL страницы (убедившись, что страница доступна в Web), можно загрузить документ Web со своего локального ПК или можно скопировать свой код в текстовое поле. Последний метод показан на рисунке 1.13, где для валидации введен код страницы примера, приведенного на листинге 1.6.

Так как запись !DOCTYPE на этой странице указывает на соответствие стандартам XHTML 1.1, то страница проверяется согласно этим стандартам. После нажатия кнопки "Check" выполняется валидация и выводится страница отчета.

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

Типы тегов XHTML

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

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

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

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

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

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

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

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

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

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

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

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

Контейнерные и пустые теги

Теги XHTML являются специальными ключевыми словами, окруженными угловыми скобками "<" и ">". "Имена" этих элементов указывают на назначение тега и предписывают браузеру интерпретировать вложенный контент специальным образом. В примере страницы, показанной на листинге 1.6, тег <html> окружает все содержимое страницы и говорит о том, что оно является документом HTML и должно соответствующим образом интерпретироваться браузером. То есть, браузер должен искать теги XHTML и использовать вложенные спецификации разметки для оформления информации, окруженной тегами. Аналогично теги <body> окружают весь контент страницы, которая выводится в окне браузера. В соответствии со стандартами XHTML все ключевые слова записываются символами нижнего регистра. Большинство тегов XHTML кодируются парами из открывающего и закрывающего тегов, называемых контейнерными тегами. Открывающий тег является самим ключевым словом, появляющимся между символами < и > ; закрывающий тег имеет такой же формат, в котором перед ключевым словом стоит прямая косая черта ( / ). Эта пара контейнерных тегов охватывает данные, к которым применяется форматирование. Следовательно, пара контейнерных тегов <html>...</html> окружает весь документ HTML, чтобы указать, что все находящееся между ними кодируется на языке HTML. Таким же образом пара контейнерных тегов <body>...</body> охватывает все содержимое страницы, которое выводится в окне браузера.

Не все теги являются контейнерными, то есть они не "окружают" данные, которые будут форматироваться, а кодируются единственным, автономным тегом. Такие пустые теги кодируются специальным образом, чтобы соответствовать стандартам XHTML. Они должны содержать символ наклонной черты ( / ) непосредственно перед закрывающей угловой скобкой. Например, одиночный тег для вывода горизонтальной линии на странице кодируется как <hr/>, а одиночный тег для создания разрыва строки в текстовом параграфе - как <br/>. Такое специальное кодирование указывает, что тег служит одновременно открывающим и закрывающим.

Каскадные таблицы стилей

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

В предыдущих версиях HTML большая часть оформления контента страницы происходила с помощью атрибутов, задаваемых как часть ее тегов. Атрибуты определяли дополнительные спецификации форматирования помимо тех, которые подразумевает само имя тега. Например, начертание шрифта можно задавать для текстовой информации, окружая ее тегом <font>, содержащим атрибуты для задания вида шрифта, размера и цвета: <font face="arial", size="4", color="red">. Различные теги содержали различные атрибуты для форматирования своего содержимого различным образом.

В текущих версиях XHTML атрибуты тегов почти исчезли, будучи исключены (исключены в использовании) в пользу каскадных таблиц стилей (CSS - Cascading Style Sheets), или просто кратко "таблиц стилей". Таблица стилей является набором характеристик оформления, связанных с тегами XHTML. Эти характеристики оформления состоят из свойств оформления и значений, записанных с помощью специального синтаксиса таблиц стилей и присвоенных тегам, которые будут наследовать эти стили оформления. Например, одним из способов присвоить таблицу стилей тегу является включение ее в тег в качестве атрибута style.

<p style="font-family:arial; font-size:14pt; color:red; font-weight:bold">
  Это текстовый параграф.
</p>

В этом примере параграфу текста, окруженному тегом <p> (paragraph), задается тип шрифта Arial размером 14pt (14 пунктов), красного цвета ( red ), с жирной насыщенностью ( bold ). Четыре спецификации свойство:значение (например, font-family:arial ) задают эти стили оформления.

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

стили шрифта - для задания типа шрифта, размера и насыщенности.;

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

стили цвета - для задания цвета фона и переднего плана;

стили рамок - для вывода различных рамок, окружающих текстовые и графические элементы;

стили отступов - для задания ширины различных отступов, окружающих текстовые и графические элементы;

стили фильтрации - для применения специальных эффектов к текстовым и графическим элементам;

стили задания размера - для задания высоты и ширины текстовых и графических контейнеров;

стили позиционирования - для позиционирования элементов страницы в фиксированных пиксельных координатах на странице.

Консорциум WWW поддерживает стандарты языка каскадных таблиц стилей, так же, как это делается для языка разметки XHTML. Текущей версией стандартов, рассматриваемой в данном учебнике, является CSS Level 2 (CSS2).

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

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

Работа с документами XHTML

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

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>здесь находится заголовок страницы</title>
</head>
<body>
  .
  здесь находится содержимое страницы 
  .
</body>
</html>

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

Пролог

Все документы XHTML должны начинаться со строк пролога, показанных на листинге 1.10. Первая строка говорит, что этот документ основывается на XML версии 1.0. Остальные строки указывают на определение типа документа (DTD), описывающее используемый на странице стандарт кодирования W3C, в данном случае XHTML версии 1.1.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Тег <html>

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

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

Тег <head>

Контейнерный тег <head> обрамляет раздел заголовка документа XHTML. Раздел заголовка содержит название документа ( title ) вместе с другой информацией, связанной с форматированием и индексированием документа. В данный момент в разделе заголовка имеется только тег title. Другие теги, которые могут находиться в разделе заголовка, будут рассмотрены по мере необходимости.

<head>
  <title> здесь находится название документа </title>
</head>

Тег <title>

Контейнерный тег <title> добавляет в документ название. Этот тег обрамляет строку текста, которая появляется в строке заголовка браузера, когда открывается страница. Тег <title> содержит идентификационную информацию о странице, полезную посетителю различных страниц Web-сайта. Отметим, что разделы <head> и <title> необходимы для соответствия стандартам XHTML 1.1.

Тег <body>

Основная часть кода документа XHTML находится в разделе тела документа <body>, обрамленного контейнерным тегом <body>. Только та информация, которая появляется внутри этого тега, выводится в окне браузера. В своей простейшей форме раздел тела содержит обычный текст, который выводится стилем используемого по умолчанию шрифта в окне браузера. Браузеры обычно выводят текст с помощью шрифта Times New Roman и размером примерно 12 пунктов.

Все страницы Web начинаются с этой базовой структуры документа. Затем <body> документа увеличивается в объеме за счет текста и других элементов страницы, которые должны выводиться в окне браузера. Различные комбинации этих выводимых элементов и управление их представлением выполняется с помощью дополнительных тегов XHTML.

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

Страницы Web, созданные в этом учебнике, выглядят корректно в Internet Explorer и других браузерах, которые следуют стандартам W3C.

Редактирование текста с помощью Notepad

Документы XHTML создаются с помощью текстовых редакторов или с помощью специальных редакторов HTML, созданных для этой цели. Для данного учебника достаточно использовать простой текстовый редактор, такой, как Windows Notepad. Эта программа обычно находится в меню Start-->All Programs-->Accessories. После запуска этого редактора можно ввести текст и другие элементы страницы, которые желательно вывести, дополняя тегами XHTML для компоновки и оформления.

Рисунок 1.16 показывает редактор Notepad с кодом простой страницы Web. Эта страница имеет заглавие, которое выводится в панели заглавия браузера, и одно предложение, которое выводится в окне браузера.

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

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"><head><title>Страница Page</title></head><body> 
<h2>Форматировать эту строку текста.</h2></body></html>

Однако легче составлять и редактировать документ и понимать компоновку страницы, размещая ее теги и текст в более удобочитаемом формате. Уделите большое внимание выравниванию и отступам кода, чтобы визуально он представлял структуру выводимого в браузере контента. Небрежный код неизбежно ведет к ошибкам. Необходимо выбрать для вывода кода в Notepad моноширинный шрифт, такой, как Courier New. Моноширинный шрифт облегчит выравнивание строк текста в редакторе. Кодирование XHTML является трудным искусством и наукой. Аккуратность кодирования - требование первостепенное, здесь нужна работа с точностью, приближающейся к 100%. Браузер не знает, что "хочет" сделать программист; браузер может делать только то, что ему будет точно сказано. Сначала кодирование будет утомительным и трудоемким. Однако после некоторой практики можно научиться вводить и редактировать код XHTML почти так же просто, как обычный текст.

Сохранение документа XHTML

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

Для документа Web можно выбрать любое имя файла, хотя оно не должно включать никаких пробелов или специальных символов. Документ необходимо также сохранять с расширением файла .htm. Это расширение идентифицирует документ как страницу Web, чтобы браузер мог ее распознать. При использовании в качестве редактора Windows Notepad не забудьте выбрать в качестве типа файла All Files (*.*) из выпадающего меню. Иначе Notepad добавит расширение .txt к имени файла, и документ будет неправильно опознаваться браузером.

Вывод документа XHTML

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

Редактирование документа и вывод

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

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

Следующая иллюстрация показывает экран компьютера с одновременно открытыми на рабочем столе программами Notepad и Internet Explorer. Теперь очень легко щелкнуть в окне Notepad, чтобы редактировать документ Web. После сохранения изменений щелкните в окне Internet Explorer, а затем нажмите кнопку Refresh, чтобы перезагрузить измененный документ. Затем вернитесь в окно Notepad, чтобы продолжить разработку страницы.

Между прочим, существует быстрый способ открыть документ Web для редактирования в Notepad при просмотре страницы в окне браузера. В меню браузера View выберите команду Source, что означает просмотр исходного кода страницы XHTML. Страница автоматически откроется в редакторе Notepad, как показано на рисунке 1.19.

Создание первой страницы Web

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

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

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Первая страница Web</title>
</head>
<body>

<!-- Здесь находится параграф для вывода в браузере -->

<p>Это первая попытка создать страницу Web. Я еще не совсем понимаю, что делаю, 
но это, кажется, достаточно просто.  Возможно, когда я немного лучше узнаю теги XHTML и стили CSS, 
я буду чувствовать себя уверенно и смогу поразить всех своим мастерством.</p>

</body>
</html>

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

Комментарии в XHTML

Для описания различных разделов документа Web желательно помещать в нем комментарии, которые являются общими описаниями или пояснениями кода XHTML. Они служат полезным напоминанием назначения или содержания разделов кода, когда придется через какое-то время вернуться к редактированию документа. В приведенном выше примере в начале раздела <body> был помещен общий комментарий.

<!-- Здесь находится параграф для вывода в браузере -->

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

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

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

<!p style="font-family:arial; color:red;">
Вывести эту строку красным цветом.
<!/p>

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

Сохранение и вывод первой страницы Web

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

Теперь откройте браузер и загрузите страницу. Желательно оставить редактор открытым на рабочем столе, так как это будет удобно для внесения исправлений или изменений на странице. Если документ совпадает с вышеприведенным примером, то страница Web должна появиться в окне браузера так, как показано ниже. Эта страница была загружена с локального жесткого диска и выводится в Internet Explorer.

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

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