Базовая компоновка документа

Тег <blockquote>

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

<blockquote>
  <p>текст</p>
</blockquote>

Отметим, что тег <blockquote> не считается тегом блочного уровня в стандартах XHTML 1.1, хотя и создает разрывы строк и пустые строки перед и после вложенного текста. Он не заменяет тег блочного уровня <p>, который требуется для вложения блока текста и смещения его относительно окружающего содержимого. Тег <blockquote> просто окружает блок параграфа, включая его в обрамляющий тег <p>.

В следующем примере тег <blockquote> смещает средний параграф относительно окружающего текста. Вывод браузера показан на рисунке 2.6.

<p>Здесь три параграфа. Первый параграф форматирован с помощью 
стандартного тега параграфа и выровнен относительно левого края 
страницы.</p>

<blockquote><p>Второй параграф форматирован с помощью тега blockquote, 
чтобы сместить его левую и правую стороны 
примерно на 40 пикселей от краев 
страницы.</p></blockquote>

<p>Последний параграф форматирован как первый. Он помещен в 
стандартный тег параграфа и прижат к левому краю страницы.</p>

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

Вложенные теги <blockquote>

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

<p>Здесь пять параграфов. Первый параграф форматирован стандартным 
тегом параграфа и прижат к левому краю страницы.</p>

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

<p>Пятый параграф кодируется как первый. Он помещен внутри стандартного 
тега параграфа и прижат к левому краю.</p>

В этом примере два тега <blockquote> вложены друг в друга, то есть тег <blockquote> появляется внутри тега <blockquote>. Внешний тег <blockquote> охватывает и смещает три своих вложенных текстовых блока примерно на 40 пикселей от левого и правого края страницы. Внутренний тег <blockquote> смещает свой вложенный текст еще примерно на 40 пикселей от краев, определенных внешним тегом. Любые дополнительные вложенные теги еще в большей степени смещают свой вложенный текст от предыдущих границ.

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

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

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

Перенос строки

Кодирование параграфов с помощью тегов <p> является наиболее распространенным методом структурирования текста на странице Web. Большинство страниц Web - это текстовые страницы, и параграфы являются удобными и легко читаемыми методами представления текста. Однако существуют и другие средства структуризации текста.

Тег <br/>

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

<br/>

Тег <br/> не является контейнерным тегом; он не охватывает текст и не имеет дополнительного закрывающего тега. Этот пустой тег просто помещают внутри текста в том месте, где должен произойти разрыв строки. Этот тег удобно применять для вывода списков объектов, стихов или других объединений отдельных текстовых строк через один интервал. Следующий код использует перенос строк, например, для завершения отдельных строк стихотворения, помещенного в тег <blockquote>.

<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду ее  преследовала.</p>

  <blockquote>
  <p>Была у Мери овечка,<br/>
  Была ее шерсть снежно-белой;<br/>
  И куда бы ни шла Мери,<br/>
  Овечка бежала за ней.</p>
  </blockquote>
	
<p>У Мери была ужасная жизнь. Ужасно трудно сходить на свидание, когда 
вокруг тебя все время скачет овечка.</p>

Четыре строки стихотворения помещены внутрь параграфа blockquoted, чтобы сместить их и отделить от окружающих параграфов. Каждая строчка стихотворения появляется на отдельной строке текста через один интервал от предыдущей строки. Важно помнить, что тег <br/> является линейным тегом, а не блочным; поэтому согласно стандартам XHTML 1.1 он не может появиться в строке сам по себе или как автономный тег. Он должен помещаться внутрь тега <p> или другого блочного тега, как это сделано в предыдущем примере.

Несколько переносов строк

При использовании тегов <p> и <blockquote> одна пустая строка появляется перед и после вложенного текстового блока с отступами. Когда вставляют теги <br/>, чтобы закончить строки текста, никакие интервалы между строками не появляются. Однако могут быть ситуации, когда желательно вставить дополнительные пустые строки, чтобы увеличить вертикальный интервал между строками текста или между другим содержимым, присутствующим на странице. Для этой цели можно использовать тег <br/>.

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

<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду ее 
преследовала.<br/><br/><br/></p>

  <blockquote>
  <p>Была у Мери овечка,<br/>
  Была ее шерсть снежно-белой;<br/>
  И куда бы ни шла Мери,<br/>
  Овечка бежала за нею.</p>
  </blockquote>
	
<p><br/>У Мери была ужасная жизнь. Ужасно трудно сходить на свидание, 
когда вокруг тебя все время скачет овечка.</p>

Каждый тег <br/> вставляет на странице дополнительный перенос строки. Поэтому можно писать несколько тегов <br/> подряд, чтобы получить несколько пустых строк на странице.

Отметим в предыдущем примере, что теги <br/> кодируются внутри первого и последнего параграфов - внутри тегов блочного уровня <p> для совместимости со стандартами XHTML 1.1. Их можно было бы поместить также в начале и конце параграфа стихотворения внутри тега <blockquote>. Обратите внимание, что требуется три тега <br/> в конце первого параграфа, чтобы соответствовать числу пустых строк, заданных одним тегом <br/> в начале последнего параграфа. Это является особенностью способа, которым браузер обрабатывает тег в начале и конце параграфов. Может понадобиться эксперимент, чтобы определить число тегов, нужное для создания требуемого числа пустых строк.

Исключенный тег <br>

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

Заголовки

Появляющийся на странице Web текст выводится используемым по умолчанию типом шрифта и размером, если не определено иное. Большинство браузеров выводят текст шрифтом или семейством шрифтов Times New Roman, размером примерно 12 пунктов. Чтобы внести на страницу визуальное разнообразие, для различных разделов документа часто выбирают различные типы и размеры шрифтов. Эта тема будет подробнее рассмотрена в дальнейшем, скажем лишь, что существуют простые способы изменения размера шрифта, позволяющие добавлять на страницу заголовки различного уровня.

Тег <hn> (heading) является блочным тегом, который ограничивает строку текста для вывода одним из шести стилей заголовка. Его общая форма показана В листинге 2.11.

<hn>Текст заголовка</hn>

Число n в теге может изменяться от 1 (самый крупный) до 6 (самый мелкий). Эти шесть уровней заголовков приведены в следующем примере и выводятся в браузере, как показано на рисунке 2.10. Стандартный параграф выводится для сравнения.

<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>

<p>Обычный текстовый параграф.</p>

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

Исключенный атрибут align

Заголовки можно выравнивать слева (по умолчанию) или справа, или они могут выравниваться по центру строки с помощью атрибута

align="left|center|right"

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

<h1 align="center">Центрированный заголовок</h1>

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

Горизонтальная линейка

Основным способом выделения и идентификации разделов страницы Web является применение заголовков и подзаголовков, кодируемых с помощью тегов <hn>. Различные части страницы Web можно также визуально разделить, проводя между ними горизонтальные линейки. Это делается с помощью блочного тега <hr/> (horizontal rule) для вычерчивания через страницу линии разделения. Общий формат этого тега показан в листинге 2-13.

<hr/>

Тег <hr/> вызывает перенос строки и вывод линейки на новой отдельной строке. По умолчанию используется линейка толщиной 2 пикселя и проходящая по всей ширине окна браузера. Линейка, показанная на рисунке 2.11, порождается тегом <hr/>, записанным на отдельной строке, как показано на листинге 2-14.

<h2>Горизонтальная линейка</h2>

<p>Горизонтальная линейка используется для разделения отдельных частей 
содержимого страницы. Далее показана используемая по умолчанию 
линейка.</p>

<hr/>

<p>Линейка имеет толщину 2 пикселя и проходит по ширине через все окно 
браузера. Перед и после нее вставляется пустая строка.</p>

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

Исключенные тег <hr> и его атрибуты

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

align="left|center|right"
size="n"
width="n|n%"
noshade
color="цвет"

Атрибут align смещает линейку в строке влево (по умолчанию), по центру или вправо. Атрибут size задает толщину горизонтальной линейки в пикселях. Атрибут width задает ширину линейки в пикселях или как процент от ширины окна. Линейка может выводиться как сплошная полоса при задании noshade (без значения) и с цветом, определяемым атрибутов color. Значение цвета задается как название цвета или как шестнадцатеричное значение, определение которого будет рассмотрено в дальнейшем. Следующий код задает нестандартную линейку:

<hr align="center" size="5" width="50%" noshade color="gray">

Так как тег <hr> исключен в текущих стандартах, то он не должен использоваться. Аналогично атрибуты выравнивания и оформления могут присваиваться новому тегу <hr/>, хотя желательно их избегать в пользу новых методов оформления, рассматриваемых в дальнейшем.

Списки

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

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

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

x Элемент списка 1
x Элемент списка 2
x Элемент списка 3

Неупорядоченный список создается с помощью блочного контейнерного тега <ul>, который ограничивает элементы списка, определяемые блочными контейнерными тегами <li> (list item). Общая форма неупорядоченного списка показана в листинге 2.16.

<ul>
  <li>элемент списка</li>
  <li>элемент списка</li>
  ...
</ul>

Например, маркированный список, показанный выше в листинге 2.15, задается следующим кодом.

<ul>
  <li> Элемент списка 1</li>
  <li> Элемент списка 2</li>
  <li> Элемент списка 3</li>
</ul>

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

<ul>
 <li><p>Это первый элемент списка. Текст, идущий после символа маркера,
переносится по словам внутри маркера. Теги параграфа используются для
вставки пустых строк между элементами списка.</p></li>
  
 <li><p>Это второй элемент списка. Текст, идущий после символа маркера,
переносится по словам внутри маркера. Теги параграфа используются для
вставки пустых строк между элементами списка.</p></li>
</ul>

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

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

Вложенные неупорядоченные списки

Неупорядоченные списки можно вкладывать друг в друга. Например, маркированный список внутри второго маркированного списка, который входит в третий маркированный список, создается следующим кодом и выводится в браузере, как показано в листинге 2.21. Отметим, что вложенный неупорядоченный список является частью элементов списка своего объемлющего списка. То есть, теги <ul>...</ul> вложенного списка находятся внутри пары тегов <li>...</li> охватывающего списка.

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2
      <ul>
        <li>Элемент списка 2a</li>
        <li>Элемент списка 2b
            <ul>
              <li>Элемент списка 2b1</li>
              <li>Элемент списка 2b2</li>
            </ul>
        </li>
      </ul>
  </li>
  <li>Элемент списка 3</li>
</ul>

x Элемент списка 1
x Элемент списка 2 
      x Элемент списка 2a
      x Элемент списка 2b 
            x Элемент списка 2b1
            x Элемент списка 2b2
x Элемент списка 3

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

Исключенный атрибут type

Атрибут type="disc|circle|square" можно задействовать внутри открывающего тега <ul>, чтобы определить стиль применяемого символа маркера, если он отличается от используемого по умолчанию диска. Текущие стандарты XHTML не рекомендуют пользоваться атрибутом type и предоставляют показанные далее другие средства для определения символов маркеров.

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

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

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

1. Элемент списка 1
2. Элемент списка 2
3. Элемент списка 3

Вывод упорядоченного списка в браузере.

Упорядоченный список создается с помощью контейнерного тега <ol>, который обрамляет элементы списка, идентифицируемые контейнерными тегами <li>. Общая форма кодирования упорядоченного списка показана в листинге 2.23.

<ol>
  <li>элемент списка </li>
  <li>элемент списка </li>
  ...
</ol>

Например, упорядоченный список, показанный выше в листинге 2.22, задается следующим кодом.

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ol>

Элементы списка выводятся через один интервал и с переносом слов внутри символа нумерации. Элементы списка могут содержать теги <p> или разделяться тегами <br/> для увеличения межстрочного интервала между элементами.

Вложенные упорядоченные списки

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

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2
      <ol>
        <li>Элемент списка 2.1</li>
        <li>Элемент списка 2.2</li>
      </ol>
  </li>
  <li>Элемент списка 3</li>
</ol>

1. Элемент списка 1
2. Элемент списка 2 
	1. Элемент списка 2.1
	2. Элемент списка 2.2
3. Элемент списка 3

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

Исключенные атрибуты type и start

Атрибут type может использоваться внутри открывающего тега <ol>, чтобы определить один из пяти различных символов нумерации. Значением атрибута может быть type="1" для десятичных чисел (по умолчанию), type="A" для букв верхнего регистра, type="a" для букв нижнего регистра, type="I" для римских цифр верхнего регистра и type="i" для римских цифр нижнего регистра. Например, тег ol type="A" порождает следующий список упорядоченных по алфавиту элементов.

A. Элемент списка 1
B. Элемент списка 2
C. Элемент списка 3

Можно определить значение, начинающее последовательность упорядоченного списка, задавая необязательный атрибут start="n" для тега <ol>. Начальное значение последовательности требуется, например, когда упорядоченный список прерывается на странице другими элементами.

Как показано ниже, два последовательно упорядоченных списка разделены параграфом. Первый список начинается с "A" и продолжается до "E", так как в списке имеется пять элементов. Второй список необходимо начать с шестой буквы "F". Если начальное значение не определено, то упорядочивание снова начнется с "A".

Это начало списка:

A. Элемент списка A
B. Элемент списка B
C. Элемент списка C
D. Элемент списка D
E. Элемент списка E

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

F. Элемент списка F
G. Элемент списка G
H. Элемент списка H
I. Элемент списка I
J. Элемент списка J

Код этого списка показан ниже. Первый упорядоченный список использует буквы верхнего регистра ( type="A" ), начиная с "A" и заканчивая "Е". Второй список переопределяет эту последовательность по умолчанию, определяя start="6" в открывающем теге <ol>. Таким образом, второй список последовательно упорядочивается от "F" до "J".

<p>Это начало списка:</p>

<ol type="A">
  <li>Элемент списка A</li>
  <li>Элемент списка B</li>
  <li>Элемент списка C</li>
  <li>Элемент списка D</li>
  <li>Элемент списка E</li>
</ol>

<p>Это продолжение списка:</p>

<ol type="A" start="6">
  <li>Элемент списка F</li>
  <li>Элемент списка G</li>
  <li>Элемент списка H</li>
  <li>Элемент списка I</li>
  <li>Элемент списка J</li>
</ol>

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

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

Термин 1
     Это определение Термина 1. Определяемый термин располагается на отдельной 
     строке и за ним следует блок текста определения. Определение использует 
     перенос слов и смещено от края.
Термин 2
     Это определение Термина 2. Определяемый термин располагается на отдельной 
     строке и за ним следует блок текста определения. Определение использует 
     перенос слов и смещено от края.

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

<dl>
  <dt>Термин 1</dt>
    <dd>Текст определения Термина 1</dd>
  <dt>Термин 2</dt>
    <dd>Текст определения Термина 2</dd>
  ...
</dl>

Список определений помещается внутри тегов <dl> и содержит один или несколько тегов <dt> (definition term), перечисляющих определяемые элементы. С каждым определяемым термином связан тег <dd> (definition description), содержащий определение термина.

Список определений, показанный выше в листинге 2.27, порождается следующим кодом.

<dl>
 <dt>Термин 1</dt>
  <dd>Это определение Термина 1. Определяемый термин располагается на 
     отдельной строке и за ним следует блок текста определения. 
Определение использует перенос слов и смещено от края.</dd>
 <dt>Термин 2</dt>
  <dd>Это определение Термина 2. Определяемый термин располагается на 
     отдельной строке и за ним следует блок текста определения. 
Определение использует перенос слов и смещено от края.</dd>
</dl>

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

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

Соединение страниц

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

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

Как иллюстрирует рисунок 2.12 две текстовые ссылки вызывают переход на различные страницы. На связанных страницах имеются текстовые ссылки для возврата на исходную страницу.

Тег <a>

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

<a href="url">текст ссылки</a>

Атрибут href (hypertext reference) определяет адрес URL связанной страницы. Ссылки можно делать с другими страницами на локальном сайте Web или со страницами на удаленных сайтах в любом месте WWW.

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

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

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

Тег <a> является линейным тегом - это означает, что он должен появляться внутри тега <p> или другого блочного тега, чтобы соответствовать стандартам XHTML 1.1.

Локальные ссылки

При создании сайта Web большинство создаваемых ссылок будет между страницами этого сайта. Простейшим способом хранения этих страниц для соединения является хранение их в одном месте, то есть в одном каталоге на диске или на одной дискете или устройстве хранения. В этом случае указываемый в теге <a> адрес URL является просто именем страницы.

В примере на рисунке 2.12 показаны три страницы Web с именами Home.htm, Organize.htm, и Supplement.htm. Страница Home.htm содержит текстовые ссылки на две другие страницы и имеет следующий код:

<h2>Соединение со страницами Web</h2>

<p>Перемещение между страницами сайта Web становится возможным с 
помощью гипертекстовых ссылок. Одно или несколько слов на странице 
"соединения" сделаны чувствительными к щелчкам мыши, что позволяет 
читателю переходить на различные "присоединенные" страницы. Существует 
две основные причины для разбиения темы на  различные присоединенные 
страницы Web:</p>

<p>
<a href="Organize.htm">Тематическая организация</a><br/> 
<a href="Supplement.htm">Дополнительная информация</a><br/>
</p>

<p>При создании ссылок между страницами Web важно предоставить ссылки 
возврата на страницы соединения. Автор страницы не должен оставлять 
читателей зависшими в конце ряда ссылок, не имеющим простого способа 
вернуться на домашнюю страницу. </p>

Обратите внимание на строку, содержащую код

<a href="Organize.htm">Тематическая организация</a>

Тег <a> охватывает строку текста "Тематическая организация", чтобы преобразовать ее в гиперссылку для открытия страницы Organize.htm в окне браузера. Требуется только имя этой страницы в качестве адреса URL в href, так как присоединенная страница находится в том же каталоге, что и страница Home.htm, на которой создается ссылка. Аналогично кодируется ссылка на страницу Supplement.htm. Когда происходит щелчок на любой из этих ссылок, связанная страница вызывается и загружается в браузер, заменяя страницу Home.htm.

Когда одна из страниц, Organize.htm или Supplement.htm, выводится в окне браузера, можно легко вернуться на страницу Home.htm, щелкнув на кнопке Back в панели инструментов браузера. Однако лучше закодировать свои собственные внутренние ссылки между страницами. То есть, обе страницы, Organize.htm и Supplement.htm, должны включать, как показано здесь, свои собственные ссылки возврата на страницу Home.htm.

Код страницы Organize.htm показан ниже. Здесь строка текста "Вернуться на Home" превращена в ссылку с помощью тега анкера <a>. Щелчок на этой ссылке снова открывает страницу Home.htm в окне браузера. Аналогичный код возврата на домашнюю страницу имеется на странице Supplement.htm.

<h2>Тематическая организация</h2>

<p>Одной из причин разбиения рассматриваемого вопроса в Web на 
отдельные страницы является слишком большой объем информации для 
размещения на одной странице Web. По той же причине, почему книги делятся 
на главы, а главы делятся на разделы, а разделы на параграфы, 
рассматриваемый вопрос в Web может понадобиться разделить на логические 
единицы, которые представлены отдельно друг от друга. Вместо 
представления в виде одного непрерывного потока текста рассматриваемый 
вопрос организуется в связанные фрагменты информации, которые 
напоминают о своей общей структуре и предоставляют независимое чтение 
отдельного частичного вопроса.</p>    

<p><a href="Home.htm">Вернуться на Home</a></p>

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

Удаленные ссылки

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

http://имя домена,

где протокол http предшествует местоположению сайта (имя домена). Абсолютная ссылка такого вида ведет на домашнюю страницу этого сайта. Следующий код ссылки, например, используется для перехода на домашнюю страницу www.google.com.

<a href="http://www.google.com">Перейти на Google</a>

Перейти на Google

Чтобы узнать URL сайта Web, зайдите просто на этот сайт и прочитайте URL, который появится в поле адреса браузера. Скопируйте этот адрес в атрибут href тега <a> и добавьте текст, чтобы создать реагирующую на щелчок текстовую ссылку. Если соединиться с определенной страницей на удаленном сайте, то за именем домена будет следовать путь доступа через структуру каталогов к указанной странице. Например, следующий URL указывает на страницу на сайте directory.google.com, содержащую ссылки на различные бизнес сайты и службы.

<a href="http://directory.google.com/Top/Business/">Business Sites</a>

Business Sites

Эта страница расположена в подкаталоге Business каталога Top на сайте. Адрес URL скопирован из поля адреса браузера при выводе этой страницы.

Исключенный атрибут target

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

Одним из способов решения этой проблемы является соединение с удаленными сайтами всегда в отдельном окне браузера. Достаточно просто открыть страницу в другом окне; добавьте просто атрибут target="_blank" к тегу <a>, как показано ниже для уже приведенной здесь ссылки на сайт Google.

<a href="http://www.google.com" target="_blank">Перейти на Google</a>

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

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

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

Цвет ссылок

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

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

Вывод изображений

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

Графические форматы

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

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

Формат PNG (Portable Network Graphics) был создан с целью замены формата GIF. PNG имеет по сравнению с GIF улучшенное качество изображений, предлагая в то же время лучшую степень сжатия. Однако он не поддерживает анимированные изображения. Файлы PNG используют расширение .png.

Формат JPEG (Joint Photographic Experts Group) был создан для хранения фотографических изображений. Он может представлять миллионы цветов и использует методы сжатия, позволяющие упаковать всю эту информацию о цветах в файлы небольшого размера. Изображения, сохраненные в этом формате, обычно имеют расширение файла .jpg.

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

Использование изображений

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

После того как необходимое изображение найдено, его можно легко загрузить для использования. Как показано на рисунке 2.14, сделайте щелчок правой кнопкой мыши на изображении и выберите из контекстного меню позицию Save Picture As (Сохранить изображение как...). В диалоговом окне Save (Сохранить) выберите место на своем ПК для загрузки изображения. Этим местом может быть каталог страницы Web, на которой будет выводиться изображение, или можно создать отдельный подкаталог для хранения таких файлов. Можно также при желании переименовать изображение во время сохранения. Помните об авторских правах. Для использования защищенных авторским правом изображений необходимо получить соответствующее разрешение.

Тег <img/>

Изображения GIF и JPEG размещают на странице Web с помощью линейного тега <img/>. Общий формат этого тега показан ниже.

<img src="url" alt="text"/>

Тег <img/> кодируется на странице Web в том месте, в котором должно выводиться изображение. Атрибут src задает источник или расположение файла изображения. Если файл изображения находится в том же каталоге, что и страница Web, на которой оно выводится, то в качестве URL в src достаточно указать только имя файла.

Атрибут alt является обязательным в XHTML 1.1. Его значение "text" задает краткое всплывающее описание изображения, когда указатель мыши перемещается поверх изображения. Эта текстовая строка выводится, когда пользователи отключают в браузере вывод графики, задавая тем самым текстовое описание отсутствующих изображений. Текст также может быть озвучен специальной программой чтения, применяемой пользователями с недостатками зрения, которые иначе не могут видеть или четко различать изображения.

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

Изображение JPEG, показанное на рисунке 2.15, должно находиться в том же каталоге, что и страница Web, на которой оно выводится. Изображение помещается на странице в месте расположения тега <img/> с соответствующим кодом. (Если провести указатель мыши над изображением на странице, то появится всплывающая подсказка атрибута alt ).

<p><img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/></p>

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

Исключенное выравнивание изображений

Горизонтальное положение изображения можно контролировать, размещая тег <img/> внутри тега <p>, который выравнивает изображение влево, вправо или центрирует на линии. Выравнивание параграфа может использовать исключенный атрибут align="left|center|right" тега <p>. Изображение ниже, например, будет центрировано на отдельной линии и будет окружено пустыми строками с помощью ограничивающего тега <p>.

<p align="center"><img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/></p>

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

Исключенные атрибуты width и height

Загруженное изображение может иметь размер, не соответствующий тому, который требуется на странице. Лучшим решением будет использование графического редактора для изменения размера или обрезки изображения по требуемым размерам до размещения его на странице. Альтернативное решение состоит в динамическом изменении размеров изображения во время вывода браузера, с применением исключенных атрибутов width и height тега <img/>.

width="n"
height="n"

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

Исходный размер загруженного изображения, показанного ниже, равен 480 пикселей (ширина) на 641 пиксель (высота). Его размер изменяется во время вывода браузера с помощью следующего тега:

<img src="Flower.jpg" alt="Изображение цветка" width="200"/>

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

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

Использование графических изображений в качестве ссылок

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

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

<a href="http://www.google.com"><img src="Google.gif" alt="Ссылка на Google"/></a>

Отметим, что приведенное выше изображение может быть окружено рамкой. Таким же образом, как подчеркиваются текстовые строки, используемые как ссылки, графические изображение, используемые как ссылки, выводятся с рамкой. Рамка служит графическим индикатором того, что изображение является ссылкой. Можно удалить рамку с помощью исключенного атрибута border="0" тега <img/>. В дальнейшем будут описаны более современные методы работы с рамками.

Создание подкаталога Media

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

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

Если будет создана эта папка Media, то относительный URL атрибута src тегов <img/> должен отражать эту структуру каталогов. Например, если Page1.htm выводит изображение Pic1.gif, файл которого расположен в папке Media, то его тег <img/> необходимо записать следующим образом:

<img src="Media/Pic1.gif" alt="Изображение Pic1"/>

Такой код указывает, что относительно каталога, где расположена страница Page1.htm, изображение Pic1.gif расположено на один уровень ниже в иерархи каталогов, внутри подкаталога Media. В дальнейшем организация страниц Web и поддерживающих файлов рассматривается подробнее. В данный момент можно начать создавать порядок в своих файлах для Web, помещая изображения в отдельный подкаталог.