Поиск

Анатомия Web-страницы

Ниже показана заготовка типичного Webдокумента. На этом примере мы рас смотрим структуру HTMLстраниц. Я назвал этот файл Strukt.htm.

Листинг 1.1. Пример (шаблон) Webстраницы

<HTML>
<HEAD>
<Т1Т1Е>Структура МеЬстраницы<ДШе>
<STYLE> H2 {fontfamily: Arbat;}
CODE {fontfamily: Arial;} </style>
<META httpequiv="ContentType" content="text/html; charset=windows1251">
<META name="Author" content="Alexei Goncharov">
<МЕТА name="Keywords" content="WWW, HTML, document, element">
</head>
<BODY bgcolor=#FFFFFF>
<! Комментарий к странице >
<A name="top"x/a>
Переход в <А href="#bottom">KOHeu</a> документа<Р>
Переход к <А пгег"="#5001"хВ>ссылке K/bx/axP>
<Р>
<HR>
<Н1>Заголовок 1</h1>
<Н2>Заголовок 2</h2>
<НЗ>Заголовок 3</h3>
<Н4>Заголовок 4</h4>
<Н5>Заголовок 5</h5>
<Н6>Заголовок 6</h6>
<HR>
Здесь расположена <В>ссылка K/bxA name="S001"x/a>
<HR>
<Р>Здесь должен располагаться оригинальный текст Webстраницы
<HR>
<А name="bottom"x/a><P>
Переход в <А href="jftop">Ha4ano</a> документа
</body>
</html>

Если рассмотреть исходные тексты различных Webстраниц, то можно легко уви деть схожесть их структур. Это объясняется тем, что документы создаются по опре деленным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим. HTML постоянно развивается, допол няется новыми элементами, и изучать его надо не по официальным первоисточ никам, а на практике, обращаясь к последним разработкам ведущих фирм и спе циалистов.

Чтобы понять структуру Webстраницы, необходимо рассмотреть вес элементы, входящие в приведенный выше листинг. При рассмотрении элементов языка я буду приводить оба тега: начальный и конечный. Например: <I> </i>. Этим я хочу подчеркнуть, что в большинстве случаев разработчик должен использовать два тега для каждого элемента. Число случаев, когда допустим только начальный тег (часть элементов не имеют конечного вообще), невелико, и они специально оговариваются. Для имен тегов можно использовать как прописные, так и строч ные буквы латинского алфавита. Некоторые пользователи записывают начальные теги прописными буквами, а конечные теги — строчными. Это помогает разобрать ся в исходном тексте Webстраницы.

<HTML> </html>

Обозначение документа на языке HTML. Я уже упоминал о том, что одним и: принципов языка является многоуровневое вложение элементов. Данный эле мент является самым внешним, так как между его начальным и конечным тегам! должна находиться вся Webстраница. В принципе, этот элемент можно рассмат ривать как формальность. Он имеет атрибуты version, lang и d i r , которыми в дан ном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY FRAMESET и других, определяющих общую структуру Webстраницы. Естественно что конечным тегом </html> заканчиваются все подобные документы.

<HEAD> </head>

Область заголовка Webстраницы. Иными словами, ее первая часть. Так же, как предыдущий элемент, HEAD служит только для формирования общей структурь документа. Этот элемент может иметь атрибуты lang и d i r , должен включать эле мент TITLE и допускает вложение элементов BASE, МЕТА, LINK, OBJECT, SCRIPT, STYLE.

<TITLE> </title>

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

<STYLE> </style>

Описание стиля некоторых элементов Webстраницы. В файле Strukt.htm назна чены шрифты для элементов Н2 и CODE. На рис. 2.1 видно, как изменится вид заго ловка второго уровня после такого переопределения. Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление элемента STYLE не обязательно, но желательно.

Интересно, как синтаксис HTML отражает историю развития вычислительной техники. Например, старый, теперь уже не работающий элемент BLINK напомина ет нам о тех временах, когда люди использовали дисплеи, которые имели (страш но подумать!) только текстовый режим. При таком положении вещей мигание текста (blink) было, наверное, единственным достижимым визуальным эффектом. В противоположность этому, элемент STYLE, введенный сравнительно недавно, вызывает ассоциации с программами для Windows, так как в них впервые появи лось стилевое оформление текста, которое теперь невероятно популярно, и без него уже немыслима работа в таких приложениях, как Word или Excel.

<МЕТА>

Этот элемент содержит служебную информацию, которая не отражается при про смотре Webстраницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, пер вый из которых определяет тип данных, а второй — содержание. Вот несколько примеров metaданных.

  • Дата, обозначающая «срок годности» документа:
  • name="Expires" content="//ara"
  • Адрес электронной почты:
  • name="Replyto" content="Имя@Адрес"
    т Имя автора Webстраницы:
    паше ="Author" content="^M« автора"
  • Набор ключевых слов для поиска:
  • name="Keywords" content="cnoBo1, слово2, словоЗ . . . "
  • Краткое описание содержания Webстраницы:
  • name="Description" content="Содержание страницы"
  • Описание типа и характеристик Webстраницы:
  • name="ContentType" content="Описание страницы"
  • Указание приложения, в котором была создана Webстраница:
  • name="Generator" content="Wa3eaHne HTMLредактора"

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

    Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего ат рибута таков:

    URL="http://адрес"
    <BODY> </body>

    Этот элемент заключает в себе гипертекст, который определяет собственно Web страницу. Это та произвольная часть документа, которую разрабатывает авто страницы и которая отображается броузером. Соответственно, конечный тег этс го элемента надо искать в конце HTMLфайла. Внутри элемента BODY можно ис пользовать все элементы, предназначенные для дизайна Webстраницы. Внутр начального тега элемента BODY можно расположить ряд атрибутов, обеспечиваю щих установки для всей страницы целиком. Рассмотрим их по порядку. Один из самых полезных Для дизайна — атрибут, определяющий фон страниць Его появление можно уподобить маленькой революции в WWW, так как одина ково серые Webстраницы вдруг расцвели яркими цветными узорами:

    background="/7yrb к файлу фона"

    Более простое оформление фона сводится к заданию его цвета:

    bgcolor="#ff/?GGSS"

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

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

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

    text="#/?/?GGB5"

    Для задания цвета текста гиперссылок используется следующий атрибут:

    link="#/?/?GGflS"

    Точно так же можно задать цвет для просмотренных гиперссылок:

    vlink="#/?/?GGflS"

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

    alink="#/?/?GGflS"

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

    <! Комментарий — >

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

    <! Начало вывода таблицы >
    <Hl></hl>

    Элемент заголовка. Существует шесть уровней заголовков, которые обозначают ся Н1...Н6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Рис. 2.1 дает представление об относительных размерах букв в заголовках. Для заголовков можно использовать атрибут, задающий вырав нивание влево, по центру или вправо:

    align="left"
    align="center"
    align="right"
    <HR>

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

    Элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:

    align="left"
    align="center"
    align="right"
    align="justify"

    Можно задавать толщину линии:

    51ге=толщина в пикселах

    Можно управлять длиной линии:

    fiitifnдлина в пикселах
    width=/^twa в процентам/ч

    Можно выбрать цвет:

    со1ог="цеет"
    <A></a>

    HTMLдокумент может быть очень большим, и в этом случае пользователю дол жна быть предоставлена возможность быстрого перемещения к нужному раздел документа. Для этого можно использовать механизм гиперссылок. Необходим также в нужных местах текста расставить соответствующие метки. Подроби гиперссылки обсуждаются в разделе «Гиперссылки» главы 3, а здесь мы рассмот рим только шаблон для создания меток:

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

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

    <Р>Переход к <А href=" Пметка ">метке</а></р>

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

    <BASE>

    Элемент для задания базового адреса (URL) для ссылок. Это позволяет опускат] начальную часть адреса в ссылках документа. Для использования этого элемент; необходимо использовать следующую конструкцию:

    <BASE href :="http:// компьютер/ путь1">

    Фрагмент адреса путъ1'не является обязательным. При формировании полногс адреса он будет отброшен. Так, если в тексте документа встретится относительна* ссылка

    <А \ref =" путь2/имя документа, htm' '> Видимый текст ссылки</а>,

    то она будет соответствовать URL

    Ь11р://компьютер/путь2/имя документа. htm

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

    <BASE href="file://D:nyrb">

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

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