Содержимое раздела:

Web дизайн\Учебник по HTML

Глава 1. Основы технологии публикации в Сети

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

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

  • краткую историю Интернета и Всемирной паутины World Wide Web;
  • основные принципы работы Сети, включая протоколы и акронимы, встречающиеся в данной книге;
  • настоящее и будущее HTML и XHTML;
  • простоту программирования на HTML и не меньшую простоту его изучения;
  • несмотря на то что написание программ на HTML программированием, строго говоря, не является, но при публикации в Сети вам придется столкнуться с различными проблемами, которые мы также рассмотрим в данной главе и в данной книге.

Двухминутное сообщение на тему «История Интернета»

Прародительницей Интернета можно считать сеть ARPANet — вычислительную сеть, основанную американской правительственной организацией Advanced Research Projects Agency (Агентство передовых исследований) в конце 60-х годов Сеть могла работать во время военных действий и стихийных бедствий. Самым необычным в ARPANet было то, что сеть была децентрализованной, пакеты данных гуляли по ней, сами находя путь от одного узла к другому. Это означало, что от отправителя к получателю пакет мог проходить различными путями, что, без сомнения, повышало устойчивость такой системы.

В начале 1980-х годов был создан протокол управления передачей данных TCP/IP (Transmission Control Protocol/Internet Protocol). Он стал доминирующим в процессах обмена пакетами в ARPANet. Примерно в это же время стало понятно, что TCP/IP может использоваться для соединения различных компьютерных сетей, что позволяло обмениваться данными на национальном или даже на международном уровне. Термин Интернет впервые был использован для обозначения такой «сети сетей».

В конце 1989 года проект ARPANet благополучно пришел к своему завершению, но к тому моменту многие университеты и научные организации имели, что называется, «доступ к Интернету». В начале 90-х корпорации стали активно использовать Интернет для передачи данных по электронной почте, однако запрет на коммерческое использование трафика, наложенный Национальным научным фондом, еще существовал и препятствовал коммерческому использованию Всемирной сети В 1991 году запрет был снят, что сделало Интернет доступным для частных лиц, предприятий и организаций, не являющихся правительственными либо образовательными, а также расширило возможности его коммерческого использования (Интернет-магазины, реклама через Интернет).

В 1991 году Тим Бернерс-Ли (Tim Berners-Lee) из швейцарской фирмы CERN, используя компьютер NeXt, написал код того, из чего вскоре выросла Всемирная сеть В 1993 году был выпущен первый графический браузер Mosaic. В 1994 году Марк Андреесен (Marc Andreesen), один из разработчиков Mosaic из университета при Иллинойском национальном центре приложений для суперкомпьютеров, переехал в Калифорнию и основал корпорацию Netscape совместно с предпринимателем по имени Джим Кларк (Jim Clark).

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

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

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

ПРИМЕЧАНИЕ

Легко спутать два понятия: Интернет и World Wide Web Интернет — это глобальная сеть, состоящая из линий связи, серверов и протоколов, дающих возможность миллионам компьютеров во всем мире связываться друг с другом. WWW — это услуга, которая предоставляется при помощи Интернета .Это всего лишь один из методов доступа к информации, наряду с e-mail, чатами, системами передачи файлов и т. д.

Как работает Всемирная паутина

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

ПРИМЕЧАНИЕ

Все, что нужно компьютеру, чтобы стать сервером, — это подключение к Интернету и наличие серверного программного обеспечения. Это ПО включено в состав многих популярных операционных систем: Windows, Mac OS, Unix, часто в виде простого решения «Web Sharing» (разделения веб-ресурсов). Веб-сервер постоянно «сидит» в Интернете и ждет запросов от клиентских браузеров типа Netscape, Internet Explorer и т. п. Клиентские компьютеры запрашивают документы, которые сервером и отсылаются по адресу, назначенному браузером.

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

Во время типичного сеанса «перемещения» по World Wide Web операции типа запрос-ответ происходят практически постоянно: поскольку не только текст должен быть «скачан» с сервера, но и все графические изображения, все звуковые файлы, цифровое видео и т. д. Все это становится возможным благодаря тому, что оба компьютера подключены к Интернету. Они оба распознают протокол передачи данных (команды передачи и приема); кроме того, клиентский компьютер должен распознать язык, команды которого заставляют перерисовывать изображение и отображать содержимое веб-странички в окне браузера. Итак, у нас имеются три разных протокола, или три различных языка.

Первый из протоколов — это TCP/IP С его помощью компьютеры связаны друг с другом в Интернете. У каждого из компьютеров есть адрес, который используется для его идентификации и обеспечения возможности передачи команд и данных из одного места в другое. Если имеется компьютер, который планируется подключить к Интернету, необходимо для него установить TCP/IP-соединение, при этом аппаратура и среда передачи данных никакой роли не играет. Это может быть обычный модем для телефонных линий, кабельный модем, DSL, корпоративное подключение и т. д.

После того как установлено соединение по TCP/IP, запускается веб-браузер, который использует протокол передачи гипертекста (HTTP, Hypertext Transfer Protocol) для обмена командами. Затем веб-сервер посылает специальным образом размеченные документы (HTML) на браузер клиента, который выводит их на экран. Рассмотрим подробнее понятия HTML и HTTP.

Что такое HTTP

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

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

Обратите внимание, HTTP не является единственным протоколом, использующимся в Интернете. Есть протокол передачи файлов (File Transfer Protocol, FTP), протокол обмена сообщениями электронной почты (Post Office Protocol, Simple Mail Transport Protocol) и др. Имеются также различные разновидности HTTP, например шифрованный HTTP (SHTTP): при передаче данных с его помощью информация определенным образом кодируется .Этот протокол используется для обмена конфиденциальной информацией, в том числе коммерческой.

Но протоколы имеют свойство работать незаметно для глаз пользователя. Единственным моментом, требующим внимания к используемому протоколу, является создание гиперссылок, о чем будет сказано позднее (Мы узнаем немного подробнее об HTTP из главы 15, «Добавление HTML-форм», и из главы 16, «CGI и сбор данных»).

ПРИМЕЧАНИЕ

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

Что такое HTML

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

ПРИМЕЧАНИЕ

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

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

 <h1>Добро пожаловать на мою страничку</h1>

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

Подобным же образом HTML-документ может содержать команды, загружающие изображение и размещающие его на экране:

 <img src="imagejpg" />

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

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

Гипертекст и гиперссылки

Одним из ключевых методов, реализующих HTML в частности и Всемирную паутину в целом, является метод гипертекстовых ссылок .С помощью специальных команд можно выделить часть текста и сделать так, чтобы на него можно было «нажимать» Обычный текст таким образом превращается в гипертекст. При щелчке на гиперссылке, как показано на рис 11, браузер обычно загружает другую страницу (Я говорю «обычно», поскольку иногда щелчок на гиперссылке может вызывать другие эффекты, например запуск вспомогательного приложения типа проигрывателя RealAudio или Telnet либо сохранение файла на жестком диске).

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

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

Рис 1.1. Гипертекстовые ссылки обычно отличаются цветом и выделяются подчеркиванием

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

Унифицированные указатели информационных ресурсов (URL)

Доступ к большинству Интернет-служб осуществляется с помощью схемы адресации, благодаря которой можно легко найти интересующий документ. Каждый тип службы имеет свой формат адреса, который обычно чем-нибудь да отличается от других.
Например, с одной стороны, чтобы послать электронное письмо на мой адрес, следует написать в поле адреса своего почтового приложения: tstauffer@aolcom. С другой стороны, чтобы получить доступ к FTP-серверу AOL, нужно написать:ftpaol.com

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

протокол://Интернет_ адрес/путь/имя_файла.рсш

или

протокол:интернет_адрес

Вот пример URL для доступа к некому веб-документу: http://www.microsoft.com/windows/index.html

В соответствии с форматом URL, http:// означает протокол, а wwwmicrosoftcom — адрес веб-сервера компании Microsoft. За ним следует косая черта (/), означающая, что после нее следует путь.

Путь к файлу указывает на то, что мы ищем документ indexhtml, расположенный в папке Windows.

ПРИМЕЧАНИЕ

Если вы знакомы с операционными системами, основанными на DOS или Unix, вы сразу узнаете нечто знакомое — выражения, обозначающие пути к файлам. Если вы пользуетесь Mac OS, нужно представить, что путь задает направления на определенный файл, хранящийся на сервере. Браузер должен точно знать, в каких директориях и поддиректориях находится файл, поэтому путь — это стандартная часть любого URL.

Двумя главными преимуществами URL являются следующие:

1 Они позволяют определить тип Интернет-ресурса Например, если URL начинается с http, значит, ведется работа по соответствующему протоколу. При этом именно HTTP — это не единственно возможный протокол. Их краткий список приведен ниже.

2 Система адресации в URL позволяет единственным образом идентифицировать каждый документ, программу или файл в Интернете.

Протоколы, используемые в URL

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

При помощи ввода одного из названий этих протоколов с последующим указанием адреса сервера и пути можно получить доступ практически к любому документу, директории, файлу или программе, имеющимся в Интернете или на вашем жестком диске. Как видно из табл 11, URL относятся не только к http, но и к совершенно иным протоколам Интернета. FTP-серверы, в частности, предназначены для передачи файлов (тем самым они как бы противопоставляются протоколу HTTP, который предназначен для просмотра файлов). Серверы Gopher были предшественниками веб-серверов и служили для просмотра обычных текстовых документов. Серверы Telnet предназначены для удаленного соединения с помощью системы учетных записей, то есть пользователь должен ввести свое имя и пароль, после чего появляется командная строка, дающая возможность совершать удаленно различные операции на сервере. Большинство веб-браузеров могут отображать списки файлов, хранящихся на FTP-серверах, и меню Gopher, некоторые имеют встроенные редакторы электронных писем, но большинству требуется дополнительное программное обеспечение для доступа к Telnet.

Таблица 1.1. Протоколы, используемые в URL

Протокол

Доступ к...

№11

НТТР(веб)-серверам

ftps://

Некоторым НТТР(веб)-серверам с шифрованием

file://

HTML-документам на вашем жестком диске

ftp://

FTP-серверам и файлам

gopher://

Gopher-меню и документам

news://

Серверам групп новостей Usenet

news:

Конкретной группе новостей Usenet

mailto:

Определенному адресу электронной почты

telnet:

Удаленному серверу Telnet

ПРИМЕЧАНИЕ

Протоколы mailto:, news: и telnet: предъявляют различные требования к синтаксису URL. После mailto: должен следовать обычный адрес e-mail, после news: следует имя группы новостей, а после telnet: пишется адрес сервера (без указания пути).

HTML против XHTML

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

Кто устанавливает стандарты HTML

Консорциум World Wide Web (http://www.w3.org) отвечает за создание спецификаций, которых должны придерживаться компании, занимающиеся разработкой таких вещей, как веб-браузеры и устройства просмотра веб-страниц. W3C — это отраслевая группа, основанная Тимом Бернерс-Ли, она включает в себя все основные корпорации, занимающиеся веб-индустрией (такие как Microsoft, Netscape, AOL и AT&T).

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

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

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

Для чего нужны новые стандарты

Результатом видоизменения HTML стал стандарт XHTML. Текущая версия, XHTML 10, очень немногим отличается от своего предшественника, HTML 401. Есть некоторые различия, но он больше напоминает более строгую версию старых стандартов HTML, от авторов требуется больше аккуратности при написании документов. Но понять все это довольно-таки несложно.

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

Строгое следование стандарту XHTML может в скором времени сильно упростить жизнь. Уже сейчас многие устройства и приложения используют доступ к World Wide Web. Это касается мобильных телефонов, карманных компьютеров и других подобных изобретений. XHTML призван учесть возможности и интересы всех браузеров. И чем лучше код вашей странички будет согласован с новым стандартом, тем лучше он будет себя вести в различных условиях.

Чем пользоваться

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

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

ПРИМЕЧАНИЕ

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

HTML — это не программирование

Я, может быть, немного напугал вас всеми этими многочисленными акронимами, сокращениями и разговорами о спецификациях? Честно признаюсь, я и сам, пока писал про все это, подглядывал в разные шпаргалки, чтобы убедиться, что я еще не отстал от жизни. В большинстве случаев концепции HTML и XHTML оказываются довольно простыми для понимания, особенно если вникнуть в суть принципа языков разметки. Напоминайте себе постоянно о том, что HTML по сложности даже рядом не лежал с такой непростой штукой, как программирование. Программирование — это процесс создания скриптов или приложений с использованием сложных компьютерных языков типа C++ или Java, а что такое создание веб-страниц? Чаще всего этот процесс называют авторской разработкой, что-то вроде написания книги .Да и в самом деле, что делает веб-дизайнер, разработчик веб-страницы? Он набивает текст, затем добавляет коды для его приемлемого размещения на экране. Ну конечно, можно добавить картинки, звуковое сопровождение, еще что-нибудь для того, чтобы страничка смотрелась луч-; ше и оригинальнее .Собственно, последнему и посвящена большая часть книги, и все, что вам остается сделать по ее прочтении, — это разработать что-нибудь свое.

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

Основная разметка

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

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

<hr />

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

Это <strong> очень </strong> важное замечание!

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

ПРИМЕЧАНИЕ

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

HTML и XHTML, возможно, гораздо сложнее, чем описано выше? Какие-то простенькие теги — все понятно. Чем тогда объяснить наличие более четырехсот страниц в этой книге? Да, действительно, эти языки чуть-чуть сложнее, чем просто набор тегов, но сложность их проявляется не столько в теории, сколько на практике. Хорошим способом понимания HTML и XHTML является подробное изучение атрибутов элементов, которые используются лишь для окончательной «настройки» внешнего вида символов на экране Возьмем для примера основной тег для помещения изображения на страничку:

<img'src="imagejpg" /> 

Часть этого тега, состоящая из <img /> является полноценным элементом, хотя большого толка от его использования без атрибута src (источник изображения) не будет. Кроме этого атрибута, у <img /> есть и другие, такие как alt, задающий альтернативный текст при отсутствии изображения, align, задающий размещение картинки, как в следующем примере:

<img src="imagejpg" alt="Добро пожаловать на мой сайт!"
align="top" />

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

Если вы знакомы с предыдущими версиями HTML, этот код может показаться вам немного странным Дело в том, что примеры, приведенные в этой книге, соответствуют стандарту XHTML. Это означает следующее:

  • XML является регистрозависимым, поэтому все имена элементов должны быть написаны строчными буквами: <р>, </р>, br /> и т д;
  • все элементы должны иметь закрывающие теги либо закрывающую косую черту, даже если они являются пустыми, как <hr />;
  • все атрибуты должны быть заключены в двойные кавычки: <img src="file.jpg" align="left" />.

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

Оформление с помощью таблиц стилей

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

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

В прошлом HTML и его расширения (то есть элементы, поддерживаемые браузерами, но не включенные в рекомендации W3C) позволяли напрямую изменять внешний вид текста или других компонентов, находящихся на странице, с использованием таких элементов, как <font>, или таких атрибутов, как color. Хотя многие страницы до сих пор продолжают строиться с учетом этих соглашений, переход на XHTML потребовал, по возможности, избегать этого, а использовать таблицы стилей.

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

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

ПРИМЕЧАНИЕ

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

Добавление скриптов

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

ПРИМЕЧАНИЕ

На рисунке 1.2 вы видите экран Macintosh. Веб-мастеринг является платформонезависимым, поэтому в тексте будут встречаться как экраны Windows, так и Macintosh. На самом деле, если у вас есть доступ к нескольким операционным системам: Windows, Unix, Macintosh и другим, то всегда полезно проверять, как выглядят созданные вами страницы на разных платформах.

Рис. 1.2 Эффект наведения получается комбинированием средств XHTML, таблиц стилей и скриптов

Написание скриптов — это настоящее программирование, но вскоре вы поймете, что овладеть этим искусством совсем несложно, особенно если вы понимаете логику программирования. Язык JavaScript (и его «родственники» ECMAScript и JScript) является самым распространенным средством, с помощью которого можно писать различные полезные скрипты.

Скрипты работают в сочетании как с XHTML, так и с таблицами стилей, делая веб-страницы интерактивными и объединяя все вместе в Dynamic HTML (или DHTML). Хотя XHTML заменил DHTML и стал самым популярным акронимом, касающимся веб-публикаций, создание динамических страниц — также полезное и интересное занятие.

Резюме

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

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

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

Главные новости:

®Abifost, 2006. Копирование информации сайта разрешается только с указанием ссылки на этот сайт. Гостевая книга Контакты, резюме, об авторе
Hosted by uCoz