Глава 22. Услуги веб-публикации

• Поиск правильного хостинга

• Бесплатные серверы

  • America Online

  • Yahoo! Geocities

  • Lycos Tripod

  • iTools от Apple

• Решения для электронной коммерции

  • Интернет-магазин Yahoo! Store

  • Catalog. com

  • Oracle Small Business

  • Серверы Miva Merchant

• Резюме

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

Итак, данная глава будет состоять из следующих разделов:

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

• бесплатные услуги — вы понимаете, за что вы платите и за что вы не платите;

• электронная коммерция: учимся продавать через Интернет.

Поиск правильного хостинга

Вы можете удивиться: «А почему этот вопрос обсуждается не в начале книги, а в конце?» Ответ прост. Прежде чем выбирать себе врб-сервер, нужно знать, что вам нужно и что можно на нем размещать. То есть вначале следует научиться создавать веб-публикации, а затем — размещать их в Сети. Эта книга была посвящена первому, и лишь последняя глава — второму.

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

ПРИМЕЧАНИЕ

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

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

Прежде всего нужно спросить себя: «Готов ли я тратить деньги на это?» Если нет, то сразу резко ограничивается круг интересующих вас фирм. Вы будете выбирать между своим поставщиком услуг Интернета, который может бесплатно предоставить место на сервере, и каким-нибудь бесплатным рекламным хостингом. В России в этом смысле популярен проект narod.ru.

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

• Имеет ли для меня значение платформа сервера? Если для работы вашего сайта критично, какая операционная система установлена на сервере — Unix, Linux, Windows NT или Mac OS, — то прежде всего нужно выяснить именно этот вопрос, потому что дальше вы либо окажетесь в тупике, либо будете вынуждены переделывать сайт. В наши дни этот вопрос возникает редко, все стремятся к максимальной толерантности веб-продукции к установленному на сервере ПО. Единственное, что иногда бывает при этом важно, — это расширение файлов (например, .htm или .html). Но бывают ситуации и посерьезнее, особенно если поставщик услуг Интернета предлагает доступ к ОС через удаленный вход в систему или если вы хотите пользоваться какими-то особенными языками написания скриптов или баз данных.

• Имеет ли значение поддержка CGI-скриптов и важен ли язык программирования? Если у вас есть на сайте скрипты, форумы, чаты и другие элементы на основе технологии CGI (см. главы 16 и 21), то на этот вопрос вы, без сомнения, ответите утвердительно. Некоторые серверы имеют поддержку языков Perl и С, некоторые — PHP, AppleScript, Visual Basic и т. д. Если важна поддержка какого-то определенного языка, это снова сузит область возможных предложений.

• Работает ли SSI или FrontPage Extensions, какие команды можно использовать? Если вы собираетесь применять вставки на стороне сервера или расширения FrontPage, нужно узнать, доступно ли это у данного провайдера.

• Нужна ли мне поддержка баз данных? На многих серверах на основе Linux и Unix установлены SQL или MySQL, что позволяет работать в онлайновом режиме с базами данных. При этом в качестве программной среды обработки данных могут выступать CGI-скрипты. На других серверах вы найдете, например, FileMaker Pro или Microsoft Access. Это говорит о том, что работа с базами данных может осуществляться вполне нормально. Общий совет: скачивая совершенно произвольный скрипт, внимательно изучайте его системные требования и соотносите их с возможностями сервера.

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

• Нужен ли мне инструментарий для электронной коммерции? Если у вас есть доступ к каталогу CGI, если вы намерены работать с базами данных, то почему бы не организовать какой-нибудь небольшой электронный магазин с оформле нием заказов через Интернет и возможностью работать по кредитным картам? Однако если вы всерьез думаете об электронной коммерции, то лучше всего обратиться к соответствующим приложениям, предоставляемым поставщиками услуг Интернета. Кроме всего этого, нужно учитывать те вопросы, которые были освещены в главе 3. Они, если помните, касались объемов дискового пространства, ограничений на трафик, других базовых технических вопросов. Если вас все устраивает, следует поинтересоваться тем, какие дополнительные услуги может предложить данная хостинговая компания. Может быть, среди них есть предоставление e-mail адреса, переадресации электронных сообщений, регистрация домена и т. д.

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

ПРИМЕЧАНИЕ

Вопросам хостинга посвящен целый раздел на Yahoo!: http://dir.yahoo.com/Business_and_Economy/ Business to_Business/ Communication_and_Networking/ Internet_and_World_Wide_Web/ Network_ Service_Providers/Hosting/Web_Site_Hosting/Directories/.

Бесплатные серверы

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

America Online

Если вы являетесь клиентом AOL, это автоматически означает, что у вас есть до cтуп к службе AOL Hometown (http://hometown.aot.com/), позволяющей хранить на сервере до 12 Мб HTML-файлов, картинок и других документов. Если даже у вас нет учетной записи в AOL, вы все равно можете пользоваться этой службой, правда, при этом будут наложены некоторые ограничения. В частности, для создания сайта придется воспользоваться онлайновым инструментарием — 1-2-3 Publish или Easy Designer. Клиенты AOL между тем могут передавать свои файлы по FTP, используя для этого либо специальный раздел сайта, либо внешнюю программу.

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

Yahoo! Geocities

Geocities (http://geocities.yahoo.com) издавна славится своим бесплатным хостингом. Еще с тех времен, когда он не был подмят под себя компанией Yahoo!. И сегодня на Geocities вы найдете раздел, посвященный бесплатным сайтам с возможностью за небольшую плату получить кое-какие дополнительные услуги, включая предоставление персонального имени домена.

Будучи зарегистрированным пользователем Geocities, вы получаете 15 Мб дискового пространства и доступ к инструментарию для создания веб-страниц. Ваш домен будет выглядеть так:

http://geocities.yahoo.сот/имя_пользовагеля/

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

Главным преимуществом Geocities является услуга по размещению содержимого какого-либо раздела Yahoo! на своем сайте. Это могут быть новости, биржевые курсы, поле поиска Yahoo! и т. п. Можно указать информационную категорию своего сайта, в соответствии с которой хост будет самостоятельно подбирать подходящую рекламу. В этом есть несомненные преимущества. Если уж смотреть рекламу, так хотя бы как-то соотносящуюся с остальным содержимым.

Кроме этого, можно установить счетчик или гостевую книгу, а данные HTML-форм — отправлять по e-mail. В состав дополнительных функций Yahoo! входит коллекция картинок, фотографий, игр (например, покер), приложения для обработки статистики, из которых тоже можно подобрать кое-что для своего сайта. Если вы решите прибегнуть к платными дополнительным услугам Geocities, то, воспользовавшись ими, вы получите собственное имя домена, соответствующий адрес e-mail, возможность создания подобластей внутри него, например f red. fakecorp. com. Цены на это все очень скромные (порядка $9 в месяц). Кроме того что вы получите все эти блага цивилизации, наконец-то исчезнет реклама Yahoo!.

Lycos Tripod

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

Tripod имеет более широкие возможности применения скриптов, чем другие службы подобного рода, на которых можно найти лишь несколько готовых программ на CGI и JavaScript. Здесь же есть и готовые скрипты, и специальный редактор для их создания (на Perl или JavaScript). На рисунке 22.1 показано, как он выглядит.

Рис. 22.1. В Tripod имеется редактор скриптов, который можно применять для создания программ на JavaScript или Perl

Можно бесплатно использовать имя домена для своего сайта, если заплатить $20 за регистрацию с помощью специального виртуального регистрационного бюро. На самом деле разных бюро в Tripod имеется великое множество. Можно найти ссылки на такие службы Lycos, как Webmonkey — самоучитель по созданию вебстраниц, Online Business Center — служба электронной коммерции, Commision Central — для установки связей между различными дочерними сайтами и рекламодателями.

Есть служба Lycos Tripod Plus, позволяющая работать без рекламных объявлений. Конечно, это стоит определенную сумму. И конечно, не бесплатно расширяется канал для обслуживания вашего сайта и объем доступного дискового пространства. К моменту написания этой книги цены начинались от $4,95 в месяц.

iTools от Apple

Фирма Apple разработала ряд Интернет-приложений разного назначения под названием iTools. В нее входит служба электронной почты, пользователи которой имеют e-mail-адрес Mac.com, служба предоставления дискового пространства iDisk, служба поздравительных Интернет-открыток iCard, а также HomePage — средство создания веб-страниц.

ПРИМЕЧАНИЕ

К сожалению, воспользоваться всеми этими дарами Apple могут только лишь пользователи компьютеров Маc с подходящими браузерами. Вход в систему из обозревателей Windows запрещен.

Наличие учетной записи на iTools подразумевает выделение 20 Мб дискового пространства, которые разделяются между HomePage (рис. 22.2) и iDisk. Впрочем, распоряжаться и тем и другим можно так, как вам захочется. Apple не размещает свою рекламу на ваших страницах, однако требует использовать готовые шаблоны и мастера. Смысл заключается в том, чтобы придать вашему сайту, так сказать, Apple-подобный вид.

Рис. 22.2. HomePage от Apple можно использовать для создания страниц, построенных на основе профессиональных шаблонов

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

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

Домашние странички HomePage будут располагаться по адресу:

http://www.homepage.mac.сот/имя_пользователя/

Apple не предоставляет других имен доменов. Можно заплатить за дополнительные услуги, но от этого вы не станете «ближе к двум косым чертам», а лишь увеличите доступное дисковое пространство под HomePage и iDisk.

Решения для электронной коммерции

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

Интернет-магазин Yahoo! Store

Такое впечатление, что на Yahoo! есть все. В том числе и решение для электронной коммерции под названием Yahoo! Store (http://store.yahoo.com), которое провозглашается фирмой как «Интернет-магазин под ключ». При пользовании этой службой вы действительно лишь заполняете полки, после чего приглашаете покупателей регистрировать номера своих кредитных карт. Все делается с помощью шаблонов. Стоит такая услуга нынче $50 плюс нечто вроде подоходного налога, взимаемого с каждой реализованной единицы продукции. В некоторых случаях Yahoo! достается небольшой процент с продаж, если покупатели пришли с других страниц одноименного портала.

Данная служба является одной из самых дешевых среди себе подобных. Кроме того, вы можете попросить включить ваш сайт в листинг Интернет-магазинов Yahoo!, что послужит очень эффективной рекламой вашему делу. Между тем создается все это виртуальное торговое предприятие с помощью, что называется, одного щелчка мыши, так что Yahoo! Store — это крайне приятное и выгодное предложение, особенно для тех, кто хочет сразу же окунуться в мир электронного бизнеса, не вникая в тонкости технологий.

Catalog.com

Эта служба сразу радует низкой ценой, которую она берет за свои услуги. И это притом, что снова предлагается готовое решение для Интернет-коммерции. Базовая ставка составляет $25, и за эту сумму вы получаете полностью рабочий программный пакет под Windows. Он включает в себя доступ к готовым CGI-скрип там, но вы можете создавать и свои. Имеется поддержка Microsoft Access, VBScript и FrontPage. Кроме того, осуществляется поддержка ODBC, мультимедиа, например формата RealAudio, а в Unix-версии — mySQL, PHP и Python.

Имеется один маленький недостаток: вы не можете выкладывать на свои виртуальные полки более 50 наименований продукции. Однако же реализована возможность оплаты кредитками. За каждую тысячу наименований товаров доплата составляет $10.

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

Oracle Small Business

Служба Oracle Small Business (http://www.OracleSmallBusiness.com/) начала свое существование с NetLedger.com — онлайнового приложения для осуществления функций управления и учета в малом бизнесе. Затем она разрослась до теперешних размеров и может эффективно работать в качестве инструмента для создания полноценного виртуального магазина. Сделано это было за счет модульного подхода.

Этот подход немного отличается от остальных, но если у вас уже есть свое дело, то он вас, несомненно, заинтересует. Oracle Small Business начнет свою работу с того, что заменит текущую систему управления счетами (типа QuickBook или PeachTree Accounting) своим собственным онлайновым приложением. Суть в том, что при этом вам не нужен специальный серверный компьютер. Недостаток, как всегда, в потере контроля над данными. Онлайновое приложение занимается многими вещами: ведет список счетов, составляет платежные ведомости, управляет или, по крайней мере, следит за снабжением и т. д.

Очень интересно решается вопрос интеграции Интернет-магазина и программного обеспечения, управляющего счетами. На сайте Oracle Small Business утверждается, что виртуальный магазин создается «одним щелчком». И это отчасти действительно так, поскольку на основе имеющихся данных о счетах, продажах и товарах автоматически строится целая система. Все совершаемые операции находят свое отражение в меняющейся информации о счетах. Клиенты могут оплатить покупки в режиме реального времени, прямо на сайте. Базовая конфигурация веб-магазина, ограниченная сотней товаров на полках, но имеющая полный набор перечисленных выше услуг, обойдется в $99 в месяц.

Это слишком сложная система, чтобы можно было рассказать о ней в двух словах, гораздо полезнее будет взглянуть на нее самому. Я думаю, если у вас есть маленькое дело, значит, вы знакомы со счетами. И представляете себе все преимущества автоматизированного учета. Чем и занимается Oracle Small Business.

Серверы Miva Merchant

Из множества серверов, предлагающих организовать электронные магазины, Miva Merchant (http://www.miva.com/) выделяются своей популярностью среди поставщиков услуг Интернета, предлагающих соответствующие услуги по построению системы электронной коммерции. Еще Miva настойчиво рекламируется как простое и доступное дополнение для обычных сайтов. На самом деле что действительно ценно, так это услуга Miva Now — тестовая версия Интернет-магазина, с которой можно побаловаться в течение 30 дней. По истечении этого срока можно перейти на базовый вариант, стоимость которого от $30 в месяц.

Можно приобрести Miva Merchant, что называется, «насовсем», но стоить это будет ни много ни мало $595. Думаю, вы предпочтете платить ежемесячную абонентскую плату. (Провайдеры будут предлагать вам Miva Empressa — так знайте, что это специальная платформа для поддержки нескольких сайтов с Miva одновременно.) Управлять своим магазином вы сможете прямо из своего домашнего браузера. Можно изучать специфическую статистику, проверять наличие товаров и т. д.

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

Возможно, наиболее интересным компонентом линейки Miva является поддержка Miva Script. Это собственный язык написания скриптов, позволяющий вставлять какие-то элементы, напоминающие детали HTML-форм. При этом можно писать скрипты самостоятельно (рано или поздно вы так и сделаете) либо пользоваться уже готовыми, среди которых есть и довольно сложные: для традиционной реализации выполняемых ими функций, видимо, потребовался бы Perl или РНР. Чтобы узнать больше о Miva Script, посетите http://www.ideablue.com/ index.mv?Menu=MivaScript или же http://www.miva.com.

Резюме

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

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

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

Однако книга не прощается с вами. В Приложении вы найдете краткое руководство по самым распространенным элементам XHTML, их синтаксису, атрибутам и т. д. Там же приведен список элементов таблиц стилей CSS.

Приложение

Краткий справочник по командам XHTML и CSS

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

  • Объявления DTD

  • Элемент <html>

  • Элемент <head>

  • Элемент <title>

  • Элемент <meta>

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

  • Элемент <body>

  • Элемент "комментарий"

• Стили и скрипты

  • Элемент <script>

  • Элемент <noscript>

  • Элемент <style>

  • Стили, скрипты и универсальные атрибуты

• Общая разметка

  • Форматирование блоков

  • Форматирование текста

  • Списки

• Изображения, гиперссылки, Java и плагины

  • Вставка изображений

  • Вставка гиперссылок

  • Карты ссылок

  • Мультимедийные элементы

  • Java- апплеты

• Создание таблиц

• Создание наборов фреймов

• Создание форм

  • Элемент <form>

  • <textarea>

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

  • Элемент <select>

• CSS

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

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

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

Объявления DTD

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

Объявление Strict DTD используется, если вы намереваетесь написать документ в полном соответствии с требованиями стандарта XHTML 1.0. Выглядит оно следующим образом:

<!DOCTYPE html PUBLIC "V/W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtmll-strict.dtd">

Если же вы предполагаете, что не все элементы, которые вы будете использовать при оформлении, входят в XHTML 1.0, то следует указывать так называемый переходный DTD:

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML 1.0

Transitional//EN" "DTD/xhtml 1-transitional.dtd">

Frameset DTD указывается, если страница построена на основе фреймов:

<!DOCTYPE html PUBLIC "\//W3C//OTO XHTML 1.0 Frameset//EN" "DTO/xhtml 1 - frameset. dtd ">

Элемент <html>

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

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

Элемент <head>

Этот элемент также является контейнером, внутри него могут располагаться другие элементы, имеющие отношение к заголовку документа: <title>, <meta>, <base>.

Собственно, обязательным является только <title>. У элемента <head> также может быть атрибут lang.

Например:

<head> ...элементы заголовка

</head>

Элемент <title>

Элемент <title> используется для определения текста, который будет появляться при загрузке страниццв заголовке окна браузера. Его же можно использовать для | создания закладок на определенные страницы, а также и в других ситуациях, когда можно документу сопоставить его название. Он должен располагаться внутри контейнера <head>. У данного элемента тоже может быть атрибут Lang.

Например:

<head> <titlе>Пример заголовка</titlе> </head>

Элемент <meta />

Это необязательный элемент. Предназначен для передачи браузеру и другим приложениям дополнительных сведений о документе, называемых метадан ними. У него могут быть атрибуты content, а также либо name, либо http-equiv. Оба последних сосуществовать в одном элементе ие могут.

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

Примеры:

<meta name="keywords" content="PC.hardware.repair,laptop.newsfeed" /> <meta http-equiv="refresh" content="30"; url="http://www.fakenews.com/newpage.html" />

Элемент <base />

Еще один необязательный, но очень удобный элемент. С его помощью указывается базовый URL, чтобы в ссылках, встречающихся в документе, можно было применять относительный URL. Например, если базовый адрес http://www.fakecorp.coni/ products/, а в ссылке написано href = "productl. html", то в результате получим http:/ /www.fakecorp.com/products/productl.html, и этот URL не будет зависеть от того, где реально расположен документ, в котором встретилась относительная ссылка. У элемента <base /> могут быть атрибуты href и/или target. Последний используется для указания целевого фрейма.

Примеры:

<base href="http://www.fakecorp.com/people/bob/" />

<base target="main_viewer" />

Элемент <body>

Это очень важный контейнер. В нем содержится все, что есть на HTML-странице, но не вошло в контейнер <head>. У него, как и у многих других элементов, может быть атрибут lang.

Например:

<body> . <h1>Hello World</h1> ...содержимое страницы... </body>

Элемент «комментарий»

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

Например:

<!-- Этот комментарий уместился на одной строке --> <!•- А это комментарий не уместился на одной строке, но в этом нет ничего страшного :-) -->

Стили и скрипты

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

Элемент <script>

В этом элементе содержится исходный код скрипта на каком-либо языке программирования. Это означает, что браузер не должен пытаться воспринимать эти символы как XHTML. Вместо этого ему следует опознать скрипт и обратиться к обработчику скриптов, который зачастую встроен в браузер. У элемента <scri pt> может быть атрибут type, иногда для большей совместимости используется lang.

Например:

<script type="text/javascript"> ...команды JavaScript... </script>

Обычно контейнер <script> прячут от браузера, чтобы не возникало проблем со старыми обозревателями, которые могут попытаться прочитать команды скрипта как команды XHTML. Например:

<script type="text/javascript"> «!--- команды скрипта // --> </script>

Элемент <noscript>

В тех документах, в которых имеется элемент <script>, можно указать элемент <noscript>, в котором содержится текст и разметка, которая показывается только не поддерживающими скрипты браузерами.

Например:

<noscript> Требуется поддержка JavaScript. Пожалуйста, обратитесь <а href="index2.html">сюда</а>. </noscript>

Элемент <style>

Контейнер <style> должен располагаться в секции <head>. В нем хранятся определения стилей и классов. Возможный атрибут — type.

Например:

<style type="text/css"> ...Определения CSS,.. </style>

Стили, скрипты и универсальные атрибуты

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

ПРИМЕЧАНИЕ

Элементы, расположенные внутри <head> (<meta> и др.), а также сами <script> и <style> не имеют этих атрибутов.

class

Атрибут class применяется для того, чтобы присваивать определенные классы стилей элементам разметки страницы. Сами эти классы определяются внутри <style>. (А есть еще <di v>, с помощью которого один и тот же стиль можно применять сразу к нескольким элементам. Об этом мы поговорим далее.)

Примеры:

<р class="intro">текст абзаца</р> <div class="centerbold "> ...текст и разметка. ..

id

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

Например:

<р id="paral"> <текст абзаца</р>

style

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

Например:

<р style="font-family: Arial"> текст абзаца</р>

dir

Атрибут di г задает направление написания текста. Его можно использовать только н контейнерных элементах, но не во <frame> или <frameset>. Возможные значения: Иг (слева направо) и rtl (справа налево).

Например:

<р dir="rtl">текст абзаца</р>

lang

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

Например:

<р lang="fr">текст абзаца на французском языке</р>

Общая разметка

Элементы, представленные в этом разделе, можно разделить на две категории: задающие разметку и создающие блоки текста.

Форматирование блоков

Есть ряд элементов, которые определяют некие блоки, отрывки текста, такие как абзацы, цитаты, заголовки и пр.

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

Например:

<р>Это - текст абзаца.</р>

Ниже показаны элементы, работающие по тому же принципу, что и <р>.

• <рге>. Элемент <рге> определяет форматирование, в точности повторяющее то, что задано в исходном коде.

• <blockquote>. Считается, что текст, находящийся внутри этого контейнера, выглядит как цитата.

• <address>. Такой стиль называется «информация об авторе». Многие браузеры отображают такой текст курсивом.

• <di v>. Контейнер <di v> часто используется для того, чтобы применить один стиль ко всем входящим в него элементам. У него может быть атрибут а 1 ign, позволяющий разместить элементы в соответствии с такими значениями: center, left, right, justify. (Обратите внимание, al ign не входит в стандарт Strict XHTML.) Вокруг разметки, включенной в <div>, как и вокруг абзаца, браузер оставляет пустое место, однако в отличие от <р> в <di v> может входить несколько элементов блокового уровня.

• <h1>. . .<h6>. С помощью этих элементов можно задать шесть уровней заголовков в тексте. По правилам хорошего тона, их нужно использовать только в стро гой очередности, не пропуская ни один уровень. Как и вокруг абзацев, вокруг заголовков можно тоже заметить пустое пространство.

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

• <bг />. Разрыв строки. Распознается браузером как перевод каретки.

• <br />. Горизонтальная линия. С помощью атрибутов этого элемента можно менять ширину, длину и вид линии.

Наконец, следует упомянуть еще один элемент — контейнер <span>, используемый для того, чтобы можно было применить один и тот же стиль ко всем содержащимся в нем элементам. <span> отличается от <di v> только лишь тем, что не оставляет пустого места вокруг себя. Поэтому следующий пример не приведет к разрыву абзаца:

<р>Этот текст<sраn class="bold"> Написан жирным шрифтом</sрап>, а этот - нет. </р>

Форматирование текста

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

Физические стили

Элементами, определяющими физические стили, являются:

• <b> — жирный;

• <i> — курсив;

• <tt> — моноширинный шрифт, как на печатающей машинке;

• <u> — подчеркивание;

• <big> — увеличенный размер;

• <small > — уменьшенный размер;

• <sub> — нижний индекс;

• <sup> — верхний индекс.

Например:

<р>Этот текст написан <i>курсивом</i>, этот - <b>жирным</b>.

этот выделен <tt_>моноширинным шрифтом</tt>, а этот - <u>подчеркнут</u>.</р>

Логические стили

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

Список логических элементов:

• <ет> — выделенный;

• <strong> — особо выделенный;

• <cite> — цитата или ссылка на внешний источник;

• <code> — вставка исходного программного кода;

• <dfn> — определение;

• <samp> — пример, часто выглядит как <code>;

• <kbd> — нечто подлежащее вводу с клавиатуры;

• <var> — переменная или значение;

• <q> — цитированный текст в кавычках;

• <abbr> — аббревиатура;

• <acronym> — акроним.

Особенно интересен логический стиль <q>. Он в большинстве браузеров окружает текст кавычками. А если указать в атрибуте lang какой-нибудь язык, в котором эти кавычки обычно выглядят не так, как в английском, то они действительно будут перерисованы!

<ins> и <del>

Эти два логических стиля используются, когда нужно напомнить самому себе о том, что данный кусок текста должен быть (или уже) вставлен или удален. Часто применяется при создании сайта группой дизайнеров. Среди атрибутов этих элементов могут быть datetime, cite и title. В datetime можно указать дату и время удаления/ вставки. В cite ставится ссылка на URL, по которому содержится пояснение к данному отрывку. Используя атрибут title, можно вставить пояснения прямо в тег.

Например:

<р>Важная информация для <ins datetime="2001-12-05T09:00:00-05:00" title="Изменить после голосования">Совета директоров </ins>

<del> Президента компании </del>: акционеры вами недовольны.</р>

Списки

Списки являются элементами блокового уровня, контейнерами, содержащими определенные пункты, определяемые с помощью элемента <li>. Чтобы изменить стиль списка, нужно изменить контейнер, в котором содержатся все <l i>.

Упорядоченный список задается с помощью элемента <ol>. Перед каждым пунктом в этом случае ставится его порядковый номер.

Например:

<оl> <li>ПерВЫЙ ПУНКТ<li> <li>Второй пункт</li> <li>Третий пункт</li>

Соответственно, маркированный список отличается тем, что перед каждым пунктом ставится маркер.

Если вы работаете с переходным DTD, то можете смело использовать атрибуты start, value и type для настройки упорядоченных списков. (В стандарт XHTML 1.0 они не вошли.) Значения type следующие:

• <оl type="A"> — прописные буквы;

• <ol type="a"> — строчные буквы;

• <оltype="I"> — большие римские цифры;

• <ol type="i"> — маленькие римские цифры;

• <ol type="l"> — арабские цифры (по умолчанию).

Что касается неупорядоченных списков, то в них с помощью type можно изменять вид маркера:

• <ul type="disc"> — кружок;

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

• <ul type="circle"> — кольцо.

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

Например:

<ol start="10">

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

Например:

<li value="1 ">#!</li> <li>#2</li> </ol>

Есть еще третий, менее распространенный тип списка, задаваемый элементом <dl>. Это список определений. Соответственно, внутри списка один из элементов (<dt>) является контейнером для термина, а другой (<dd>) — для описания этого термина. Никто не обязывает вас использовать их исключительно вместе друг с другом, однако наиболее ценен такой список именно тогда, когда он состоит из этих двух частей. В списке определений (словаре, если хотите) перед пунктами не ставятся ни номера, ни маркеры.

Например:

<dl> <dt>TepMHH l</dt> <dd>описание термина l</dd> <dt>Термин 2</dt> <dd>0писание термина 2 </dd>

Изображения, гиперссылки, Java и плагины

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

Вставка изображений

Для вставки изображений используется элемент <img />. При этом указывается абсолютный или относительный путь к графическому файлу в подходящем формате (GIF, JPEG, некоторые браузеры работают с PNG). Для этого нужен атрибут src.

Например:

<img src="imagel.gif" />

Кроме этого, у <img /> может быть еще много атрибутов, среди которых, например, alt, в котором указывается текст, заменяющий изображение при отсутствии возможности его отображения. Атрибут longdesc может содержать URL с подробным текстовым описанием изображения. Это тоже сделано для тех браузеров и людей, которые по тем или иным причинам не могут просматривать картинки. Если изображена какая-нибудь таблица или график, то словесное описание иногда может заменить и то и другое.

Например:

<img src="chartl.jpg" аlt= "Таблица продаж за первый квартал" longdesc="/img_desc/ chartl.html" />

У <img /> также может быть атрибут align, позволяющий задать расположение картинки относительно окружающего текста. Изображение становится «плавающим», если в качестве значения align указать left или right. Текст при этом как бы обтекает графику.

Еще следует упомянуть об атрибутах height и width. Они применяются для масштабирования изображения. Значения задаются в пикселах. Обычно этот прием используется для того, чтобы оконечный браузер мог быстрее загрузить страницу с изображением.

Например:

<img src="chartl.jpg" alt="chart #1" align= "left" height="330" width="200" />

Вставка гиперссылок

Гиперссылки создаются с помощью особого элемента под названием «якорь» (<а>). Однако сам по себе якорь не означает почти ничего. Сама гиперссылка задается атрибутом href, значением которого может быть относительный или абсолютный адрес. Якорь является контейнерным элементом, — это значит, что между его открывающим и закрывающим тегами может располагаться любой текст со своей разметкой, изображение или даже мультимедийный элемент. Единственное ограничение заключается в невозможности создания вложенных ссылок. То есть один <а> внутрь другого вы поместить не можете.

Примеры:

<а href="http://www.w3.org">Посетите сайт W3C </a> <а href="products/productl.html"> <img src="productl.jpg" alt="Фрукт-продукт №1" /> </а>

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

ПРИМЕЧАНИЕ

Атрибут name не входит в стандарт XHTML 1.0, поэтому лучше всего использовать переходный DTD, а также одновременно name и id в одном и том же якоре.

Итак, давайте создадим поименованную секцию:

<а name="answerl" id="answerl"><h2>Ответ:

Потому что оно синее. </h2> </a> А теперь создадим ссылку на нее: <а href="#answerT'>Bonpoc: Почему небо синее? </а>

На поименованные секции можно ссылаться и из других документов, если использовать полный URL:

<а href="http://www.fakecorp.com/questions. html#answerl"> Bonpoc: Почему небо синее?</а>

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

У <а> может быть и еще один интересный атрибут под названием target. С его помощью можно указать целевой фрейм либо вообще целевой объект, в котором будет открыта ссылка. Эти объекты могут быть следующими:

• _blank — ссылка будет загружена в новое окно обозревателя;

• _top — загружает ссылку в текущее окно, независимо от наличия фреймов;

• _parent — загружает ссылку в родительский фрейм;

• _sel f — загружает ссылку в текущий фрейм.

Пример:

<а href="productl.html" tаrgеt="_blank"> Ссылка будет открыта в новом окне.</а>

Карты ссылок

Можно и совместить изображения и гиперссылки и создать нечто, называемое картой ссылок. Что это такое? Представьте себе, что мы мысленно разбиваем изображение на части и каждая из них является отдельной ссылкой.

Как это сделать? Для этого существует атрибут элемента <img /> под названием usemap. В нем указывается ссылка на некий поименованный объект, часть страт цы, в которой определена карта ссылок.

Например:

<img src="banner.gif" usemap="#banner_map" аlt= "навигационный баннер" border="0" />

ПРИМЕЧАНИЕ

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

Атрибут usemap сообщает браузеру о том, что где-то рядом должно быть определение карты ссылок. Оно создается с помощью <тар>, в котором отдельными элементами <агеа /> задаются «горячие области». У <тар> имеется атрибут name — идентификатор карты ссылок.

Итак, поговорим об элементе <агеа />. Он задает не только расположение и размеры области (атрибут coords), можно указать и ее форму (атрибут shape). Конечно же, должен присутствовать атрибут href — собственно ссылка на URL. У shape могут быть следующие значения:

• rect — прямоугольник, требуются четыре координаты, задающие отступ слева, верхний отступ, правый и нижний;

• ci rcl e — зона в форме окружности, нужны три координаты: х центра, у центра, а также радиус.;

• polygon — многоугольник, каждая вершина задается парой координат (х, у).

Например:

<map name="banner_map"> <area shape="rect" coords= "0. 0.100, 100" href ="index.html" аlt="Индекс" /> <area shape="rect" coords= " 100. 0.200. 100" href="products.html" alt="Products" /> <area shape="rect" coords= "200. 0.300. 100" href ="about. html" alt="0 компании" /> </map>

Если вы хотите создать серверную карту ссылок, можно использовать атрибут ismap="ismap" элемента <img />. Затем поместить последний внутрь якоря, ссылающегося на файл карты на сервере.

Например:

<а href="/maps/topbanner.map"> <img src="topbanner.gif" ismap= "ismap" аlt="Баннер" />

Мультимедийные элементы

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

Для этого существует элемент <embed> (который, правда, не входит в стандарт XHTML 1.0, то есть нужно применять DTD для XHTML Transitional). Он загружает специальный плагин, который обеспечивает выполнение дополнительных функций Netscape-совместимыми браузерами. В зависимости от типа подгружаемых данных, у <embed> могут быть несколько разных атрибутов. Наиболее часто встречаются следующие: src, width, pluginspage и в некоторых случаях autoplay. Нужно смотреть документацию по конкретным плагинам (а также главу 13).

Например:

<embed name="Moviel" src="moviel.mov" width="240"

height="120" piuginspage= "http://www.apple.com/quicktime/download/"> </embed>

Java-апплеты

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

Вставляются апплеты с помощью элемента <object>, входящего в стандарт XHTML Наряду с ним, впрочем, популярен и устаревший ныне Netscape-элемент <applet>. Что же касается <object>, то он должен иметь атрибут classid, ссылающийся на файл с апплетом. Может быть и другой атрибут — codebase, если требуется указать полный URL Java-апплета.

Например:

<object codetype="application/java" codebase="http://www.fakecorp.coin/applets/" classid="java:myapplet.class" standby="HfleT загрузка..." width=400 height=350> </object>

Создание таблиц

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

Таблицы создаются при помощи элемента <table>, у которого может быть множество атрибутов:

• width — устанавливает относительную ширину (в процентах) таблицы относительно окна браузера, можно указать и абсолютное значение в пикселах;

• Border — определяет ширину окружающей таблицу рамки (в пикселах);

• Cel I spaci ng — межклеточное расстояние;

• Cel I paddi ng — внутриклеточный отступ;

• Rules — определяет, какие из внутренних линий таблицы будут видны (значения: none, groups, rows, cols или all);

• Frames — определяет, какие части внешней рамки таблицы будут видны (значения: above, below, hsides, Ihs, rhs, vsides, box или border).

Еще один атрибут, align, может задавать расположение таблицы относительно окружающего текста (тогда таблица будет называться «плавающей»), однако он не входит в стандарт XHTML. Его значениями могут быть right и left.

Например:

<table border="1" cellpadding="5" cellspacing="5" width="50%"> </table>

Еще у элемента <table> может быть атрибут summary, особенно широко используе- мый различными нестандартными браузерами.

Например:

<table summary="B этой таблице показано, что объем продаж за первый квартал текущего года в северном регионе составил 500 единиц, в западном он составил 400 единиц, в восточном - 600 единиц, а в южном - 300. ">

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

Например:

<table> <сарtion> <b>Объемы продаж в регионах за первый квартал текущего года</b> </сарtion>

</table>

Далее следуют контейнеры строк <tr>, контейнеры заголовков столбцов или строк <th>, а также контейнеры ячеек <td>.

Например:

<table> <сарtion><b>0бъемы продаж в регионах по кварталам текущего года</b> </caption>

<tr><th>Becнa</th><td>500</td> <td>300</td><td>200</td></tr> <tr><th>Лето</th><td>600</td> <td>400</td><td>650</td></tr> </table>

Как строки таблицы, так и ячейки могут иметь параметры val ign и align. Первый применяется для вертикального выравнивания данных в ячейке и может иметь значения top, middle и bottom. Второй, соответственно, применяется для горизонтального выравнивания данных и может иметь значения left, center и right. Значения, указанные для конкретных ячеек (<td> или <th>) перекрывают значения, установленные для целой строки (<tr>).

Например:

<table border»" 1"> <tr valign="top"> <td><img src="imagel.gif" /></td> <td valign="bottom"><img src="image2.gif" /> </td>

<td><img src="image3.gif" /></td> </tr> </table>

Ячейки можно «растягивать» в разных направлениях, точнее, объединять их с другими. Для этого используются атрибуты rowspan и colspan.

Например:

<table> <tr><th>Студент</th> <th colsраn="2">0ценки</th> </th> <tr><td>Миша</td><td>100</td> <td>90</td></tr> <tr><td>Caша</td> <td>85</td><td>100</td></tr> <tr> <td>Taня</td> <td colspan="2">95</td></tr> </table>

ПРИМЕЧАНИЕ

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

Кроме всех перечисленных элементов, в контейнер <tab1e> могут входить еще три: <thead>, <tfoot> и <tbody>. Особенно интересный эффект получается при просмотре таблицы с такими элементами в браузере, который их может нормально интерпретировать. В этом случае пользователь заметит, что при прокручивании длинной таблицы (<tbody>) вниз ее заголовок (<thead>) и основание (<tfoot>) остаются неподвижными. Спецификация XHTML требует, чтоб в исходном коде контейнер <tfoot> следовал сразу за <thead>. Это нужно для того, чтобы браузер мог корректно обработать эти элементы. Вместе с тем такое их расположение может привести к тому, что поменяется порядок секций при просмотре в каких-нибудь старых браузерах.

Например:

<table> <thead>

Данные заголовка </t_head> <tfoot> .

Данные основания

</tfoot> <tbody>

Данные тела таблицы

</tbody> </table>

Создание наборов фреймов

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

Для начала нужно указать в начале документа особый DTD, соответствующий стандарту наборов фреймов. После этого должен следовать элемент <frameset>, который чем-то напоминает <body> обычных документов. У него может быть два атрибута: rows и col s. Каждый <frameset> определяет либо строку, либо столбец фреймов. Если вам нужно вложить одно в другое, следует использовать несколько элементов <f rameset>. Значения атрибутов rows и col s могут указываться либо в пикселах, либо в процентах. Одним из стандартных значений является *, которая означает «оставшаяся часть окна».

Например:

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML 1.0 Frameset/EN" "http://www.w3.org/TR/xhtmll/DTD/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml "> <head> <title>Frameset</title> </head> <frameset cols="150.*"> </frameset> </html>

Внутри каждого <frameset> могут быть элементы <frame> и <noframe>. Яричем там будет столько <f rame>, сколько столбцов или строк вы определили для данного <frameset> (если только вы не вкладываете их один в другой, о чем будет сказано далее). Но на всю страницу может быть не более одного элемента <nof rames>. Последний позволяет задать альтернативный текст или разметку для браузеров, не поддерживающих фреймы.

У элемента <frame> должен быть атрибут src, определяющий URL страницы, которая будет выводиться в данном фрейме. Может быть еще необязательный атрибут id — идентификатор, на который можно сослаться как на обозначение целевого объекта.

ПРИМЕЧАНИЕ

Хотя id — это вполне стандартный атрибут с точки зрения XHTML, но для совместимости со старыми браузерами следует вставлять еще и атрибут name.

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

Например:

frameset cols="150.*"> <frame src="index.html" /> <frame src="viewer.html" name="main_viewer" id= "main_viewer" /> <noframes> <р>Если ваш браузер не поддерживает фреймы, перейдите напрямую к <а href="/articles/index.html"> списку статей</а> direktly.</р> </noframes> . </frameset>

У элемента <frame> может быть еще ряд дополнительных атрибутов:

• noresize="noresize" — запрещает изменение размера фрейма пользователем;

• frameborder — значения — 1 или 0 (например, frameborder="l"); в первом случае у фрейма будет граница, во втором — нет;

• scrolling — значения — yes, no или auto; этот параметр задает режим прокрутки: разрешено (всегда видна полоса прокрутки), запрещено или «прокрутка по требованию»;

• marginwidth — изменяет правый и левый отступы во фреймах; единицы измерения — пикселы;

• marginheight — изменяет верхний и нижний отступы во фреймах; единицы измерения — пикселы;

• longdesc — позволяет указать ссылку (то есть URL) на HTML-документ, содержащий описание содержимого фрейма; пользователи нестандартных браузеров будут вам благодарны, если вы вставите этот атрибут.

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

Например:

<frameset rows="150,*"> <frame src="topbanner.html" /> <frameset cols="25*.75r> <frame src="leftcol.html" name="left_col" id="left_col" /> <frame src-"default.htmV name="viewer" id="viewer" /> </frameset> </frameset>

Атрибут target элемента <а>, как уже говорилось, применяется для задания целевого фрейма. Скажем, в предыдущем примере ссылка на 1 eftcol .html могла бы выглядеть так:

<а href="newpage.html" tагдеt="viеwеr"> Щелкните здесь, чтобы увидеть новую страницу</а>

При этом документ newpage.html загрузится во фрейм под именем viewer.

Создание форм

Форма — это наиболее интерактивная часть любой страницы. Различают такие стандартные ее элементы, как меню, переключатели, поля ввода, текстовые поля, флажки и кнопки. Данные, вводимые пользователем, могут отсылаться либо на сервер для обработки скриптом, либо по e-mail, либо обрабатываться непосредственно на стороне клиента.

Элемент <form>

Главный элемент данной спецификации — это контейнер <form>. Его атрибутами являются method и action. Значениями первого могут быть get или post. Метод get означает, что данные формы будут в явном виде добавлены к URL обрабатывающего их скрипта. Это накладывает серьезные ограничения на их размер. Метод post отсылает данные отдельно, а значит, никаких практических ограничений на размер быть не может.

Вторым атрибутом является action, значение которого представляет собой URL скрипта, который будет обрабатывать данные. Обычно скрипты хранятся в каталоге bin или cgi -bin на сервере.

Например:

<form method="post" action=

"http://www.fakecom.net/cgi-bin/ survey.pl"> </form>

Кроме этих двух основных атрибутов, у <f orm> могут быть следующие параметры:

• enctype — позволяет указать разновидность (MIME) содержимого передаваемых данных;

• name и id — идентификатор формы (нужен скриптам или таблицам стилей, при этом id входит в стандарт XHTML, a name требуется исключительно для совместимости со старым ПО);

• accept — типы данных (через запятую), поддерживаемые сервером; используются имена MIME;

• accept-charset — поддерживаемые сервером кодировки.

<textarea>

Элемент <textarea> позволяет пользователю вводить несколько строк данных. Это контейнер, в нем можно задать текст, который будет в текстовом поле по умолчанию. У него могут быть атрибуты rows и cols, определяющие размеры поля, а также атрибут name —идентификатор.

Например:

<textarea name="comments" rows="4" cols="40"> Введите комментарии, касающиеся нашего сайта. Не забудьте оставить свой e-mail! </textarea>

Еще один возможный атрибут — readonly. С его помощью можно сделать текстовое поле неизменяемым.

Элемент <input />

У этого элемента может быть атрибут type, с его помощью определяется тип элемента управления.

Его значения:

• text — поле ввода (то же самое, что текстовое поле, но меньше по размеру);

• password — то же самое, что text, но вместо букв показываются звездочки;

• checkbox — флажок, который можно установить и снять;

• radio — переключатель, можно выбрать только один из нескольких;

• hidden — скрытое поле, которое пользователь не может изменить;

• reset — кнопка очистки формы;

• submit — кнопка подтверждения формы.

У элемента <input /> может быть атрибут name, используемый для определения уникального идентификатора. Атрибут value — начальное значение (а также текст на кнопках очистки и подтверждения формы).

СОВЕТ

Если значением type является text или password, то можно в состав атрибутов <input /> включить size (размер поля) и maxlength (максимальная длина строки).

Например:

<form method="post" action="cgi-bin/form.pi"> <pre> Имя:<input type="text" name="name" length="40" /> Выберите свой приз: <input type="checkbox" name="car" />Новая машина <input type="checkbox" name="cash" />Деньги <input type="checkbox" name="land" />Квартира Хотите узнать больше о наших рассылках? <input type="radio" name="subs" value- "yes" checked="checked" />Да <input type="radio" name="subs" value="no" />Нет <hr /> <input type="submit" value-''Подтвердить" /> <input type="reset" уа!ие="0чистить" /> </pre> </form>

Обратите внимание: все флажки (checkbox) имеют разные значения name, в то время как вся группа переключателей имеет один и тот же идентификатор. Также обратите внимание на атрибут checked. Он позволяет задать начальное значение флажка или исходное положение переключателей.

Элемент <select>

Элемент <sel ect> применяется для создания выпадающих и прокручиваемых меню. Ему требуется параметр name. С помощью size можно определить число пунктов, одновременно показываемых на экране. <select> является контейнером, содержащим несколько элементов <opti оп>. Последние должны иметь уникальные значения, которые при выборе того или иного пункта присваиваются переменной, имеющей имя, указанное в <select>. С помощью атрибута selected="selected" указывается пункт, выбранный по умолчанию.

Например:

Ваше хобби <select name="hobby"> <option sеlected="sеlected">Поедание пищи</орtion> <option>Домино</option> <орtion>Программирование</орtion> <орtion>Кулинария</орtion> </select>

Если установить параметр size элемента <select>, то можно выпадающее меню превратить в прокручиваемое. Другой параметр, multiple="multiple", позволяет выбирать одновременно более одного пункта.

Наконец, можно группировать пункты с помощью <optgroup>. У этого элемента может быть атрибут label — метка группы внутри <select>. Элементы <optgroup> используются некоторыми браузерами для организации управления <select>.

Например:

<р>Ваше хобби:</р> <select name="hobby" size="15" multiple="multiple"> <option value="none" selected-"selected">Отсутствует </option> <optgroup label="indoors"> <орtion>Поедание пищи</орtion> <орtion>Сидение перед компьютером </орtion> <орtion>Искусство и ремесла </орtion> </optgroup> <optgroup label="outdoors"> <орtion>Поедание пищи на свежем B03духе </option> <option>noxoдыi</option> <орtion>Велопрогулки</орtion> </optgroup> <optgroup label="sports"> <орtion>Поедание пищи на скорость </орtion> <орtion>Баскетбол</орtion> <орtion>Плавание</орtion> </optgroup> </select>

CSS

В этом разделе я напомню некоторые таблицы из глав 10 и 14. В таблице П.1 показаны свойства текстовых стилей.

Таблица П.1. Свойства текстовых стилей

Свойство	Значения	Примеры
word-spacing	Число и ед. измерения	1pt, 4em, lin
letter-spacing	Число и ед. измерения	3pt, 0 0,1em, +1
line-height	Число и ед. измерения	14pt
text-decoration	Значение	underline, line-through, box, blink
text-transform	Значение	capitalize, lowercase, uppercase, none
text-indent	Число и ед. измерения либо проценты	lin, 5%, 3em
vertical-align	Значение либо проценты	baseline, sub, sup, top, middle, 50%
text-align	Значение	left, right, center, justify

В таблице П.2 показаны всевозможные свойства шрифтов.

Таблица П.2. Свойства шрифтов

Свойство	Значение	Примеры
font-family	Название шрифта	Helvetica, Serif, Symbol
font-size	Число/процент	12pt, +1, 120%
font-weight	Число/значение	normal, bold, bolder, 100, 900
font-style	Название стиля	italic, oblique, normal
font-variant	Название стиля	normal, small-caps
font	Комбинация	12pt Serif
color	Спово/16-ричное число	red, green, blue, #ff00aa

В таблице П.З вы найдете свойства фона.

Таблица П.З. Свойства фона

Свойство	Значение	Примеры
background-color	Название цвета или значение в формате RGB	white, #0000ff
background-image	url()	url(image.gif), url(http://www.fakecorp.com/bgnd.jpg)
background-repeat	Название режима	repeat, repeat-x, repeat-y, no-repeat
background-attachment	Название режима	scroll, fixed
background-position	Направление или процент	top, left, center, 20%, 65%
background	Комбинация	white url(image.gif) repeat-x fixed

Таблица П.4 представляет собой свод стилей блокового уровня (типа абзацев).

Таблица П.4. Свойства блоков

Свойство	Значение	Примеры
margin	Длина или проценты	lin, 5% 10%, 12pt lOpt 12pt lOpt
padding	Длина или проценты	lin, 5% 10%, 12pt lOpt 12pt lOpt
border	Ширина/стиль/цвет	medium dashed red, 2in grooved, blue
width	Длина или проценты	.5in, 10%
height	Длина или проценты	10tm,12pt
float	Направление	left, right, none
clear	Направление	left, right, none, both

В таблице П.5 показаны псевдоклассы для создания эффектов наведения с помощью CSS.

Таблица П.5. Псевдоклассы

Свойство	Объяснение
:link	Вид ссылки до того, как на ней щелкнули
: visited	Вид ссылки после того, как на ней щелкнули
: hover	Вид ссылки или объекта в тот момент, когда на них находится указатель
:focus	Вид ссылки или объекта во время ввода текста или при выделении
: active	Вид ссылки или объекта во время их выбора (при нажатой кнопке мыши или - клавише Enter)

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

Таблица П.6. Речевые элементы CSS2

Свойство	Значения	Описание
azimuth	left, center-left, center, center-right, right или угол (от -360° до 360°)	Позволяет задать угол, под которым находится воображаемый источник звука относительно слушателя
cue-after	url	Проигрывает звуковой файл, расположенный по указанному URL, после прочтения текста
cue-before	url	Проигрывает звуковой файл, расположенный по указанному URL, до прочтения текста
elevation	below, level, above или значение угла (от -90° до 90°)	Угол в вертикальной плоскости, под которым расположен воображаемый источник звука
pause-after	секунды или миллисекунды	Пауза после проговаривания элемента
pause-before	секунды или миллисекунды	Пауза перед проговариванием элемента
pause	секунды или миллисекунды	Пауза до и после проговаривания элемента
pitch	low, medium, high или частота (Гц)	Высота звучания голоса
pitch-range	0, 50 или другое число	Величина колебания частот: 0 — монотонно, 50 — нормально
play-during	url	Адрес звукового файла для фонового воспроизведения
speak	none, normal, spell-out	Манера произношения
speak-numeral	digits, continuous	Манера произнесения числительных: цифра за цифрой либо все число сразу
speak-punctuation	none, code	Значение «code» означает, что все знаки пунктуации нужно называть («точка», «запятая» и т. д.)
speak-rate	slow, medium, fast, число слов в минуту	Скорость речи
voice-family	male, female, Zervox, Princess, child	«Чьим» голосом говорить (как и шрифты, голоса должны быть установлены на компьютере пользователя)
volume	silent, soft, medium, loud	Громкость