Самоучитель HTML

Самоучитель HTML и XHTML

Вступление

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

Структура самоучителя

Самоучитель состоит из трех разделов: HTML, Валидация и XHTML. Каждый раздел является независимым и изучать его можно отдельно от других разделов.

HTML

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

Валидация

Описано, что такое валидация, для чего она нужна и как ее совершать для HTML-кода.

XHTML

Приведены основные отличия XHTML от HTML и синтаксис XHTML.

Обозначения

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

<strong> — тег.
align — параметр тега, ключевое слово или выделение.
right — значение параметра тега.
HTML — термин.

File > Open — пункт меню указанной программы.

Предложения и замечания

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

Мне будет полезно, если будут сделаны замечания по следующим темам:

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

Свои пожелания присылайте по адресу vlad@htmlbook.ru с пометкой «Самоучитель HTML».

Влад Мержевич

Самоучитель HTML и XHTML

© 2002–2009 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru с пометкой «Самоучитель HTML»

Последняя редакция 27.04.2009


Введение в HTML

1. Введение в HTML

HTML (HyperText Markup Language, язык разметки гипертекста) представляет собой систему верстки веб-страниц и определяет, где и как в документе отображать отдельные элементы (текст, рисунки, ссылки и др.).

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

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

Таким образом, освоение HTML сводится к изучению основных тегов (их около двух десятков) и правил их использования.

Разметка документа

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

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

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

Браузеры

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


1. Введение в HTML

Быстрый старт

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

В листинге 1.1 приведен несложный пример такого кода.

Листинг 1.1. Первая веб-страница

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Моя первая веб-страница</title>
 </head>
 <body>

  <h1>Заголовок страницы</h1>
  <p>Основной текст.</p>

 </body>
</html>

Чтобы посмотреть результат листинга в действии, проделайте следующие шаги.

1. В Windows откройте программу Блокнот (Пуск > Выполнить > набрать «notepad» или Пуск > Программы > Стандартные > Блокнот).

2. Наберите или скопируйте код в Блокноте (рис. 1.1).

Рис. 1.1. Вид HTML-кода в программе Блокнот

3. Сохраните готовый документ (Файл > Сохранить как...) под именем c:\www\example11.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы. Обратите внимание, что расширение у файла должно быть именно html.

4. Запустите браузер Internet Explorer (Пуск > Выполнить > набрать «iexplore» или Пуск > Программы > Internet Explorer).

5. В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу.

6. Если все сделано правильно, то в браузере вы увидите результат, как показано на рис. 1.2.

Рис. 1.2. Вид веб-страницы в окне браузера

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


Инструментарий

2. Инструментарий

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

  • Текстовый редактор.
  • Браузер для просмотра результатов.
  • Валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде.
  • Графический редактор.
  • Справочник по тегам HTML.

Далее рассмотрим эти инструменты подробнее.

Текстовый редактор

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

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

Ссылки на некоторые подобные редакторы приведены ниже.

PSPad
http://www.pspad.com/ru/download.php

HtmlReader
http://htmlreader.codeby.net

Notepad++
http://notepad-plus.sourceforge.net/ru/site.htm

EditPlus
http://www.editplus.com

Браузер

Браузер это программа, предназначенная для просмотра веб-страниц. На первых порах подойдет любой браузер, но с повышением опыта и знаний потребуется завести целый «зверинец», чтобы проверять правильность отображения сайта в разных браузерах. Дело в том, что каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учетом. На сегодняшний день наибольшей популярностью пользуются три браузера: Firefox, Internet Explorer и Opera.

Mozilla Firefox

Перспективный и развивающийся браузер, получивший признание во всем мире. Его особенность — простота и расширяемость, которая получается за счет специальных расширений, как они называются. Изначально Firefox имеет набор только самых необходимых функций, но, устанавливая желаемые расширения, в итоге можно нарастить браузер до системы, выполняющей все необходимые для вашей работы действия. Браузер Firefox является открытой системой, разрабатываемый группой Mozilla.

Где скачать
http://www.mozilla.ru/products/firefox/

Microsoft Internet Explorer (IE)

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

Где скачать
http://www.microsoft.com/rus/windows/ie/default.mspx

Opera

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

Где скачать
http://ru.opera.com/download/

Safari

Разработаный компанией Apple этот браузер встроен в в iPhone и операционную систему MacOS на компьютерах Apple. Также имеется версия под Windows.

Где скачать
http://isafari.ru/downloadsafari

Google Chrome

Самый свежий браузер, появившийся на рынке в конце 2008 году. Разработан компанией Google.

Где скачать
http://www.google.com/chrome?hl=ru

Валидатор

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

Как проверить HTML-файл на валидность

Если есть доступ в Интернет, то следует зайти по адресу http://validator.w3.org и ввести путь к проверяемому документу или сайту в специальной форме. После проверки будут показаны возможные ошибки или появится надпись, что документ прошел валидацию успешно.

Tidy

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

Где скачать
http://tidy.sourceforge.net

Графический редактор

Графический редактор необходим для обработки изображений и их подготовки для публикации на веб-странице. Самой популярной программой такого рода является Photoshop, ставший стандартом для обработки фотографий и создания графических изображений для сайтов. Но в большинстве случаев мощь Photoshop-а избыточна, и лучше воспользоваться чем-нибудь более простым и проворным. В частности, программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.

Скачать Paint.Net
http://www.getpaint.net/download.html

Справочник по тегам HTML

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

Справочники в Интернете

Описание тегов HTML (на английском языке)
http://www.w3.org/TR/html4/index/elements.html

Список атрибутов тегов (на английском языке)
http://www.w3.org/TR/html4/index/attributes.html

Справочник по HTML Брайана Уильямса (на английском языке)
http://www.blooberry.com/indexdot/

Справочник по HTML на сайте htmlbook.ru
http://htmlbook.ru/html/

Локальный справочник

Удобный справочник в формате CHM (стандартный файл справки Windows) содержит список всех основных тегов с их описанием и примерами использования.

http://htmlbook.ru/download/html.zip


Теги

3. Теги

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

<тег параметр1="значение" параметр2="значение">
<тег параметр1="значение" параметр2="значение">...</тег>

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

В листинге 3.1 показан типичный HTML-документ с тегами и текстом.

Листинг 3.1. Теги в документе

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=windows-1251">
   <title>Lorem ipsum</title>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet consectetuer cursus pede pellentesque vitae
      pretium. Tristique mus at elit lobortis libero Sed vestibulum ut eleifend habitasse.
      Quis Nam Mauris adipiscing Integer ligula dictum sed at enim urna. Et scelerisque
      id et nibh dui tincidunt Curabitur faucibus elit massa. Tincidunt et gravida
      Phasellus eget parturient faucibus tellus at justo sollicitudin. Mi nulla ut
      adipiscing.</p>
   </body>
</html>

В данном примере используется одиночный тег <meta>, а парных тегов сразу несколько: <html>, <head>, <title>, <body> и <p>.


3. Теги

Парные теги

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

а

б

Рис. 3.1. Вложение тегов, а — правильное, б — неверное

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

Замечание

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


3. Теги

Правила применения тегов

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

Параметры тегов и кавычки

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

Листинг 3.2. Использование кавычек в параметрах тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type"  content="text/html; charset=windows-1251">
  <title>Кавычки в параметре alt</title>
 </head>
 <body>
  <p><img src="/images/title.gif" alt="Вид заголовка" width="438" height="118"></p>
  <p><img src="/images/title.gif" alt=Вид заголовка width="438" height="118"></p>
 </body>
</html>

В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у параметра alt кавычки отсутствуют. Из-за этого браузер в качестве значения параметра alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как ошибочный аргумент. Поэтому всегда приучайтесь указывать параметры тегов в кавычках.

Теги можно писать как прописными, так и строчными символами

Любые теги, а также их параметры нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.

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

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

Листинг 3.3. Переносы строк в коде тега

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Кавычки в параметре alt</title>
 </head>
 <body>
  <p><img src="/images/title2.gif" alt="Вид заголовка в браузере Internet Explorer"
      width="438" height="118"></p>
  <p><img src="/images/title2.gif"
   alt="Вид заголовка в браузере Internet Explorer"
   width="438"
   height="118"></p>
 </body>
</html>

В данном примере первый тег <img> набран в одну строку, включая все его параметры, а второй тег <img> разбит на несколько строк.

Замечание

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

Неизвестные теги и параметры

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

Порядок тегов

Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.

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

Закрывайте все теги

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


3. Теги

Значения параметров тегов

Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров и применяются параметры тегов.

Для параметров тегов используются значения по умолчанию

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

Параметры без значений

Допустимо использовать некоторые параметры у тегов, не присваивая им никакого значения, как показано в листинге 3.4.

Листинг 3.4. Параметры без значений

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Добавление формы</title>
 </head>
  <body>
  <form action="self.php">
   <p><input type="text"></p>
   <p><input type="submit" disabled></p>
  </form>
 </body>
</html>

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

Порядок параметров в тегах

Порядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида <img src="/images/title.gif" width="438" height="118"> и <img height="118" width="438" src="/images/title.gif"> по своему действию равны.

Формат параметров

Каждый параметр тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании параметра. Так, в листинге 3.3 упоминается тег <img>, он добавляет на веб-страницу рисунок, а его параметр width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то аргумент будет проигнорирован и возникнет ошибка при валидации документа.


3. Теги

Вопросы для проверки

1. В каких строках приведенного кода находятся ошибки?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Untitled Document</title>
 </head>
 <body>
  <table width="100%" border="0" cellspacing="0" cellpadding="4">
   <tr><td><b>Lorem</td>
   <tr><td>
    <label for="textfield3">Lorem Ipsum Dolar</label>
   <br></p></tr>
  </table>
 </body>
</html>
  1. 8 и 10.
  2. 9 и 12.
  3. 4 и 8.
  4. 10 и 13.
  5. 5 и 14.

2. Какой вариант написания тега наиболее правильный?

  1. <a class='mylink' href='/images/2.html title='Sample'>Sample</a>
  2. <a class=mylink href=/images/2.html title=Sample>Sample</a>
  3. <a class=<mylink> href=</images/2.html> title="Sample">Sample</a>
  4. <a class="mylink" href="/images/2.html" title=«Sample»>Sample</a>
  5. <a class="mylink" href="/images/2.html" title="Sample">Sample</a>

3. Какая ошибка содержится в приведенной строке кода?

<p><b>Lorem ipsum</b> dolor <i><span>
sit amet consectetuer cursus<br> pede</i> pellentesque</span> vitae pretium.</p>
  1. Нет закрывающего тега </br>.
  2. Неправильное вложение тегов.
  3. У тегов нет ни одного параметра.
  4. Тега <span> не существует.
  5. Текст перенесен на другую строку.

4. Саша добавляет на веб-страницу изображение шириной 200 пикселов,
  для чего использует тег <img width="200px">,
    Лена же для этой цели применяет  <img width="200">,
      а Борис — <img width="200%">.
        У кого наиболее правильный результат?

  1. У Саши и Лены.
  2. У Бориса и Саши.
  3. У Саши.
  4. У Лены.
  5. У Бориса.

5. Вы хотите получить валидный HTML-код. Какое требование необходимо обязательно выполнять?

  1. Не использовать сокращенные параметры тегов.
  2. Писать все теги в нижнем регистре.
  3. Применять правильное вложение тегов.
  4. Значения параметров писать только прописными буквами.
  5. Опускать теги, которые добавляются по умолчанию.

6. Какое написание тега из приведенных вариантов правильное?

  1. <\tag>
  2. {/tag}
  3. "tag"
  4. <tag>
  5. <tag/>


Структура HTML-кода

4. Структура HTML-кода

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

Листинг 4.1. Исходный код веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h1>Заголовок</h1>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD
DOCTYPE | Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> | В HTML-документе применяются фреймы.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> | Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.

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

Замечание

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

 <html>

Тег <HTML> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

 <head>

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

 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой «Кириллица (Windows)» и добавляется данная строка.

 <title>Пример веб-страницы</title>

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 4.2. Вид заголовка в браузере

Замечание

Тег <title> является обязательным и должен непременно присутствовать в коде документа.

</head>

Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.

<body>

Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.

<h1>Заголовок</h1>

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

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

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

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

 <p>Первый абзац.</p>

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента.

 <p>Второй абзац.</p>

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

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </html>.

Вопросы для проверки

1. Почему в браузере не отображается текст, расположенный между тегами <!-- и --> ?

  1. Такой текст воспринимается браузером как стилевые параметры для оформления элементов веб-страницы.
  2. Это комментарий к коду, поэтому он не выводится.
  3. Это директива, которая дает веб-серверу задачу выполнить определенную команду.
  4. Это команды для поисковых систем, а не для браузеров.
  5. Потому что таких тегов не существует и браузер их игнорирует.

2. Содержимое какого тега можно увидеть в окне браузера?

  1. <meta>
  2. <link>
  3. <!DOCTYPE>
  4. <title>
  5. <br>

3. Какое утверждение наиболее подходит к случаю, когда тег <p> располагается в контейнере <head>?

  1. Содержимое тега <p> не будет отображаться на веб-странице.
  2. Браузер выведет сообщение об ошибке.
  3. Вместо веб-страницы будет показано пустое окно.
  4. Изменится кодировка текста в документе.
  5. Код HTML не пройдет валидацию.
4. Какая функция из предложенных вариантов наиболее подходит метатегам?
  1. Задают региональные настройки текущей страны.
  2. Хранят вспомогательную информацию о типе документа.
  3. Содержат служебные параметры веб-страницы.
  4. Определяют функции носителя языка.
  5. Устанавливают настройки браузера по умолчанию.

Задание

Исправьте ошибки в коде документа.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<head>
<body>
<h2>Опрос общественного мнения показал</h2>
<p>Диего Веласкес писал свои полотна в стиле: империализма, кубизма и
империосионизма;</p>
конфуцианство возникло в: Италии, Корее и Франции;</p>
<p>богами торговли и воровства в Древней Греции были: Марс, Меркурий
и Дионис;</p>
<li>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</p>
<p>столица Золотой Орды - Монголия;</p>
<p>главные противники Александра Македонского: татаро-монголы, Дедал
и Цезарь;</p>
<p>в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.</p>
</ul>
</body>
</html>


Теги верхнего уровня

5. Типы тегов

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

Условно теги делятся на следующие типы:

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

Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <ol> и <ul> относятся к категории списков, но также являются и блочными элементами.

Далее рассмотрим только те теги, которые потребуются нам в дальнейшей работе.

Теги верхнего уровня

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

<HTML>

Тег <html> является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование.

<HEAD>

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

<BODY>

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

Набор тегов верхнего уровня и порядок их вложения показан в листинге 5.1.

Листинг 5.1. Теги верхнего уровня

<html>
  <head>
   ...
  </head>
  <body>
   ...
  </body>
</html>

В данном примере показано, что контейнер <html> определяет «каркас» всей веб-страницы, внутри него вначале задается тег <head>, затем идет контейнер <body>, в нем хранится содержательная часть документа, которая и отображается в браузере. Теги <html> и <body> хотя и не относятся к обязательным тегам (т. е. их можно не размещать в коде), все же стоит добавлять всегда. Это позволяет получить четкую и понятную структуру документа.

Заметьте, что в листинге не упоминается <!DOCTYPE>, поскольку этот обязательный элемент кода веб-страницы не является тегом, а предназначен для браузеров, чтобы сообщить им, как интерпретировать текущий документ.


Типы тегов

5. Типы тегов

Теги заголовка документа

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

<TITLE>

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

<META>

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

Так, для краткого описания содержимого веб-страницы используется значение description параметра name, как показано в листинге 5.2.

Листинг 5.2. Использование description

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>HTML</title>
  <meta name="description" content="Сайт об HTML и создании сайтов">
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Описание сайта, заданное с помощью тега <meta> и значения description, обычно отображается в поисковых системах или каталогах при выводе результатов поиска. Значение keywords также предназначено в первую очередь для повышения рейтинга сайта в поисковых системах. В качестве аргумента перечисляются ключевые слова, встречаемые на веб-странице (листинг 5.3).

Листинг 5.3. Использование keywords

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>HTML</title>
  <meta name="keywords" content="HTML, META, метатег, тег, поисковая  система">
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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


5. Типы тегов

Блочные элементы

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

<BLOCKQUOTE>

Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.

<DIV>

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

<H1>...<H6>

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

<HR>

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

<P>

Определяет параграф (абзац) текста.

<PRE>

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

Следующие теги не должны размещаться внутри контейнера <pre>: <big>, <img>, <small>, <sub> и <sup>.


5. Типы тегов

Встроенные элементы

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

<A>

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <a> устанавливает ссылку или якорь.

<B>

Определяет жирное начертание шрифта.

<BIG>

Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <big> увеличивает текст на одну условную единицу.

<BR>

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <p>, использование тега <br> не добавляет пустой отступ перед строкой.

<EM>

Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

<I>

Устанавливает курсивное начертание шрифта.

<IMG>

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border="0" в тег <img>.

<SMALL>

Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег <big>, но действует с точностью до наоборот.

<SPAN>

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

<STRONG>

Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

<SUB>

Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H2O.

<SUP>

Отображает шрифт в виде верхнего индекса. По своему действию похож на <sub>, но текст отображается выше базовой линии текста — м2.

Разница между блочными и встроенными элементами следующая.

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


5. Типы тегов

Универсальные элементы

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

<DEL>

Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый.

<INS>

Тег <ins> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом <del>. Браузеры помечают содержимое контейнера <ins> подчеркиванием текста.


5. Типы тегов

Списки

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

<OL>

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

<UL>

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

<LI>

Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

<DD>, <DT>, <DL>

Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dd> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.


5. Типы тегов

Таблицы

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

<TABLE>

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

<TD>

Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

<TH>

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

<TR>

Тег <tr> служит контейнером для создания строки таблицы.


5. Типы тегов

Фреймы

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

<FRAME>

Тег <frame> определяет свойства отдельного фрейма, на которые делится окно браузера.

<FRAMESET>

Тег <frameset> заменяет собой элемент <body> на веб-странице и формирует структуру фреймов.

<IFRAME>

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


Типы тегов

5. Типы тегов

Вопросы для проверки

1. К какому типу относится тег <p>?

  1. Блочный.
  2. Встроенный.
  3. Заменяемый.
  4. Табличный.
  5. Заголовочный.

2. Для чего нужны ключевые слова, задаваемые через тег <meta>?

  1. Для облегчения поиска по странице для браузера.
  2. Для индексации слов и предложений текущего документа.
  3. Для работы поисковых систем.
  4. Для хранения в закладках браузера, чтобы быстрее находить нужный документ.
  5. Для ускорения загрузки HTML-файла.

3. Какой из приведенных тегов запрещено размещать внутри контейнера <pre>?

  1. <img>
  2. <br>
  3. <p>
  4. <div>
  5. <tt>

4. Какая ошибка содержится в следующей строке?

<p><b>lorem ipsum dolor sit </b><span>amet <blockquote>consectetuer</blockquote>
 <span>adipicim</span> elit</span></p>
  1. Неправильное вложение тегов.
  2. Встроенный элемент размещается внутри блочного.
  3. Тег <span> задан без параметров.
  4. Блочный элемент размещается внутри встроенного.
  5. Тег <b> использовать нельзя, его следует заменить на тег <strong>.

5. Кате надо на веб-странице отобразить текст со всеми пробелами. Какой тег для этой цели она должна использовать?

  1. <p>
  2. <div>
  3. <pre>
  4. <blockquote>
  5. <span>

Задания

1. Оформите в виде веб-страницы следующий текст.

Юность, верность, красота,
Прелесть сердца, чистота
Здесь лежат, сомкнув уста.

Феникс умер, и она
Отошла, ему верна,
В царство вечности и сна.

Не бесплоден был, о нет,
Брак, бездетный столько лет, -
То невинности обет.

Если верность иль - увы! -
Красоту найдете вы -
То обман, они мертвы.
Ты, кто верен и любим,
Помолись на благо им
Перед камнем гробовым.

Уильям Шекспир, пер. В. Левика

2. Исправьте ошибки в приведенном коде

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01 Transitional//EN">
<html>
 <title>Glossary<title>
<meta http-equiv="content-type"  content="text/html; charset=windows-1251">
<body>
<a  href="glosstop.html"><h1>Glossary of  Terms</h1></a>
 <span>
 <h2><p>Algorithmic Oriented  Language.</h2></p>
 </span>
 <span>
 <h2><p>Creates new  project</p></h2>
 </span>
 </body>
 </html>

3. Создайте веб-страницу, представленную на рис. 5.1, используя теги <del> и <ins>.

Рис. 5.1


6. Значения параметров у тегов

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

Цвет

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

Шестнадцатеричные цвета

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.

Табл. 6.1. Десятичные и шестнадцатеричные числа меньше 16
Десятичные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
Шестнадцатеричные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Табл. 6.2. Десятичные и шестнадцатеричные числа больше 16
Десятичные | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28
Шестнадцатеричные | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.

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

<body bgcolor="#fa8e47">

Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

FA + 8E + 47 = FA8E47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

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

  • Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
  • Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
  • Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.

Рис. 6.1. Цветовой круг

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

Рис. 6.2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.

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

Цвета по названию

Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.

Табл. 6.3. Названия некоторых цветов
Имя цвета | Цвет | Описание | Шестнадцатеричное значение
aqua |  | Голубой | #00FFFF
black |  | Черный | #000000
blue |  | Синий | #0000FF
fuchsia |  | Светло-фиолетовый | #FF00FF
gray |  | Темно-серый | #808080
green |  | Зеленый | #008000
lime |  | Светло-зеленый | #00FF00
maroon |  | Темно-красный | #800000
navy |  | Темно-синий | #000080
olive |  | Оливковый | #808000
purple |  | Темно-фиолетовый | #800080
red |  | Красный | #FF0000
silver |  | Светло-серый | #C0C0C0
teal |  | Сине-зеленый | #008080
white |  | Белый | #FFFFFF
yellow |  | Желтый | #FFFF00

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

Листинг 6.1. Цвет фона и текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Цвета</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 </head>
 <body bgcolor="teal" text="#ffffff">
  <p>Пример текста</p>
 </body>
</html>

В данном примере цвет фона задается с помощью параметра bgcolor тега <body>, а цвет текста через параметр text. Для разнообразия значение у параметра text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal.


6. Значения параметров у тегов

Размер

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

При использовании пикселов в качестве значений пишется только число без указания единиц, например: width="380". В листинге 6.2 приведено добавление изображения с заданными размерами.

Листинг 6.2. Размеры изображения в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Изображение</title>
 </head>
 <body>
  <p><img src="figure.jpg" alt="Винни-Пух в гостях у Кролика"
  width="111" height="102" hspace="4" vspace="4" border="2"></p>
 </body>
</html>

В данном примере рисунок имеет ширину 111 пикселов (width="111"), высоту 102 пиксела (height="102"), горизонтальный и вертикальный отступ по 4 пиксела (hspace и vspace) и толщину границы вокруг картинки 2 пиксела (border="2").

Процентная запись удачно дополняет пикселы, поскольку позволяет привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. Браузер понимает, что речь идет о процентах, если после числа добавляется символ %, например: width="40%".

Замечание

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

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

Листинг 6.3. Размеры изображения в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Изображение</title>
 </head>
 <body>
  <p><img src="figure.jpg" alt="Винни-Пух в гостях у Кролика" width="100%"></p>
 </body>
</html>

В данном примере ширина картинки задана как 100%, при этом высота изображения явно не задается, поскольку она вычисляется автоматически. Вид страницы при таких размерах картинки показан на рис. 6.3.

Рис. 6.3. Изображение с шириной 100%

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

Как вы понимаете, ширина окна принимается за 100%, но ее легко превысить, причем ненароком. В частности, стоит только добавить в листинге 6.3 к тегу <img> отступы по горизонтали (hspace="10") и ширина изображения станет 100%+20. Это в свою очередь приведет к появлению горизонтальной полосы прокрутки. Учитывайте этот нюанс при установке размеров элементов.


6. Значения параметров у тегов

Адрес

— Папа, как пишется «адрес», — обращается сын программиста к папе.
— Напиши: «URL».

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

Синонимом адреса выступает URL (Universal Resource Locator, универсальный указатель ресурсов), различают абсолютные и относительные адреса.

Абсолютные адреса

Подобные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где задан URL и начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные адреса начинаются с ключевого слова http://. В листинге 6.4 приведена ссылка, в которой применяется абсолютный адрес.

Листинг 6.4. Использование абсолютного адреса в ссылке

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Ссылка</title>
 </head>
 <body>
  <p><a href="http://htmlbook.ru/html/body.html">Описание тега  BODY</a></p>
 </body>
</html>

В данном примере текстовая ссылка ведет на сайт htmlbook.ru и указывает на веб-страницу с именем body.html, которая располагается в каталоге html.

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

Относительные адреса

Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src="pic.gif"> означает загрузить графический файл с именем pic.gif, который располагается в той же папке, что и сама веб-страница. Далее рассмотрим несколько примеров таких адресов.

/
Адрес указывает обычно на файл index.html, который находится в корне сайта. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Имя файла не обязательно должно быть index.html, этот параметр меняется через настройки веб-сервера — так называется программа, которая анализирует приходящие от браузера запросы и передает ему документы, показываемые пользователю.

/images/pic.gif
Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html
Двоеточие перед именем указывает браузеру перейти на уровень выше в списке каталогов сайта и там «поискать» файл me.html.

manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде двоеточия или слэша, то папка размещена внутри текущего каталога, а уже в ней располагается файл info.html.

Замечание

Адреса относительно корня сайта вроде /demo/ работают только под управлением веб-сервера и на локальном компьютере не применимы.

В листинге 6.5 приведены ссылки, в которых используются относительные адреса.

Листинг 6.5. Относительные адреса в ссылках

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=windows-1251">
   <title>Ссылки</title>
 </head>
 <body>
   <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
   <p><a href="tip.html">Как сделать такое же фото?</a></p>
 </body>
</html>

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слэшем означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.


Вопросы и задание

6. Значения параметров у тегов

Вопросы для проверки

1. Размер окна браузера установлен 500х400 пикселов. На веб-страницу добавлена таблица А, ширина которой задана как 60%. Внутри нее расположена еще одна таблица Б, у нее ширина 50%. Какова ширина таблицы Б в пикселах?

  1. 300
  2. 250
  3. 150
  4. 120
  5. 110

2. Какой цвет из приведенных ближе всех к оранжевому?

  1. #b0232a
  2. #4555c7
  3. #00b08b
  4. #ad806c
  5. #ffb300

3. Какое значение параметра width тега <img> является ошибочным?

  1. 13
  2. 120%
  3. 34.5%
  4. 1%
  5. 1097

4. Какое значение из приведенных ниже является веб-цветом?

  1. #ec1414
  2. #eaff00
  3. #00ff99
  4. #1200ff
  5. #00fffc

5. На сайте имеется три папки с именами: uranus, cronos и zeus, которые находятся одна в другой, т. е. внутри uranusa — cronos, а внутри cronosa — zeus. Оле необходимо задать адрес папки uranus относительно папки zeus. Какой URL в данном случае правильный?

  1. /
  2. ../../
  3. ../uranus/
  4. ../../uranus/
  5. /zeus/cronos/uranus/

Задание

1. Исправьте ошибки в каждой строке.

  1. <body bgcolor="#ffcc00" text="ffffee">
  2. <img src="..././lol.gif">
  3. <a href="fc0fge.html">Оранжевый<a>
  4. <img src="pan.html" width="134" height="13,6%" alt="Пан">

2. Создайте веб-страницу с зеленым фоном и белым текстом, как показано на рис. 6.4.

Рис. 6.4. Веб-страница с фоном

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


7. Текст

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

Особенности текста в HTML

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

Любое количество пробелов идущих подряд, в браузере отображается как один

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

<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром.   Отмечай мелом.   Отрубай топором.</p>
<p>Измеряй микрометром.
   Отмечай мелом.
   Отрубай топором.</p>

Исключением из этого правила является тег <pre>, внутри которого любое число пробелов отображается именно так, как оно указано в коде.

Нет расстановки переносов в тексте

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

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

Текст занимает ширину окна браузера

Если вы просто напишите одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Что произойдет, если в тексте нет ни того, ни другого символа? Браузер не сможет создать переносы и отобразит текст одной строкой. Если она шире окна браузера, то неминуемо появится горизонтальная полоса прокрутки.


7. Текст

Абзацы

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

<p>Абзац 1</p>
<p>Абзац 2</p>

Каждый абзац начинается с тега <p> и должен иметь необязательный закрывающий тег </p>.

Замечание

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

В листинге 7.1 показано применение абзацев для создания отступов между строк.

Листинг 7.1. Использование абзацев

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Применение абзацев</title>
 </head>
 <body>
   <p>В одних садах цветёт миндаль, в других метёт метель.</p>
   <p>В одних краях ещё февраль, в других - уже апрель.</p>
   <p>Проходит время, вечный счёт: год за год, век за век...</p>
   <p>Во всём - его неспешный ход, его кромешный бег.</p>
   <p>В году на радость и печаль по двадцать пять недель.</p>
   <p>Мне двадцать пять недель февраль, и двадцать пять - апрель.</p>
   <p>По двадцать пять недель в туман уходит счёт векам.</p>
   <p>Летит мой звонкий балаган куда-то к облакам.</p>
   <p><i>М. Щербаков</i></p>
 </body>
</html>

Результат данного примера показан на рис. 7.1.

Рис. 7.1. Отступы на веб-странице при использовании абзацев

Как видно из рисунка, при использовании тега <p> между абзацами возникают слишком большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег <br>. В отличие от абзаца, тег переноса строки <br> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте.

Так, текст листинга 7.1 с учетом переноса строк будет преобразован следующим образом (листинг 7.2).

Листинг 7.2. Тег BR

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Переносы в тексте</title>
 </head>
 <body>
   <p>В одних садах цветёт миндаль, в других метёт метель.<br>
   В одних краях ещё февраль, в других - уже апрель.<br>
   Проходит время, вечный счёт: год за год, век за век...<br>
   Во всём - его неспешный ход, его кромешный бег.<br>
   В году на радость и печаль по двадцать пять недель.<br>
   Мне двадцать пять недель февраль, и двадцать пять - апрель.<br>
   По двадцать пять недель в туман уходит счёт векам.<br>
   Летит мой звонкий балаган куда-то к облакам.</p>
   <p><i>М. Щербаков</i></p>
 </body>
</html>

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

Рис. 7.2. Вид текста с учетом переносов


7. Текст

Заголовки

Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес» , тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно» . Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<h1>), а самым нижним — уровень 6 (<h6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.

Синтаксис создания заголовков показан в листинге 7.3.

Листинг 7.3. Добавление заголовков

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Заголовки в тексте</title>
 </head>
 <body>
  <h1>Заголовок первого уровня</h1>
  <h2>Заголовок второго уровня</h2>
  <h3>Заголовок третьего уровня</h3>
  <h4>Заголовок четвертого уровня</h4>
  <h5>Заголовок пятого уровня</h5>
  <h6>Заголовок шестого уровня</h6>
 </body>
</html>

Результат данного примера показан на рис. 7.3. Содержимое тега <h1> отображается самым крупным шрифтом жирного начертания, а <h6> — самым мелким.

Рис. 7.3. Вид заголовков на веб-странице

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


7. Текст

Выравнивание текста

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

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

  • left — выравнивание по левому краю, задается по умолчанию;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по ширине (одновременно по правому и левому краю). Этот аргумент работает только для текста, длина которого более, чем одна строка.

Также аргумент align можно применять как для текста, так и для заголовков (листинг 7.4).

Листинг 7.4. Способы выравнивания текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Выравнивание текста</title>
 </head>
 <body>
  <h1 align="center">Как поймать льва?</h1>
  <h2 align="right">Метод перебора</h2>
  <p align="justify">Делим пустыню на ряд элементарных участков, размер
   которых совпадает с габаритными размерами льва, но при этом меньше размера
   клетки. Далее простым перебором определяем участок, в котором находится лев,
   что автоматически приводит к его поимке.</p>
  <h2 align="right">Метод дихотомии</h2>
  <p align="justify">Делим пустыню на две половины. В одной части - лев, в
   другой его нет. Берем ту половину, в которой находится лев, и снова делим
   ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p>
 </body>
</html>

Результат данного примера показан на рис. 7.4.

Рис. 7.4. Вид текста при его выравнивании


Начертание

7. Текст

Жирное начертание

Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два тега: <b> и <strong>.

<b>Жирное начертание шрифта</b>
<strong>Сильное выделение текста</strong>

Курсивное начертание

Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: <i> и <em>.

<i>Курсивное начертание шрифта</i>
<em>Выделение текста</em>

Следует отметить, что теги <b> и <strong>, также как <i> и <em> хотя и похожи по своему действию, являются не совсем эквивалентными и заменяемыми. Первый тег <b> — является тегом физической разметки и устанавливает жирное начертание текста, а тег <strong> — тегом логической разметки и выделяет помеченный текст. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

В листинге 7.5 показано использование тегов <em> и <strong> для оформления текстов.

Листинг 7.5. Теги <em> и <strong>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Оформление текста</title>
 </head>
 <body>
  <p><strong>А где же печенье и самогоноваренье?!</strong> -
  <em>воскликнул Мальчиш-плохиш</em>.</p>
 </body>
</html>

Результат данного примера показан на рис. 7.5.

Рис. 7.5. Курсивное и жирное начертание текста


7. Текст

Верхний и нижний индекс

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

В листинге 7.6 показано, где применяется подобный текст

Листинг 7.6. Использование нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Нижний индекс</title>
 </head>
 <body>
  <p><b>Формула серной кислоты:</b> <i>H<sub>2</sub>SO<sub>4</sub></i></p>
 </body>
</html>

Результат данного примера показан на рис. 7.6.

Рис. 7.6. Отображение текста в виде нижнего регистра


7. Текст

Спецсимволы

Для отображения символов, которых нет на клавиатуре применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В табл. 7.1 приведены некоторые популярные спецсимволы.

Табл. 7.1. Спецсимволы
Имя | Код | Вид | Описание
&nbsp; | &#160; |  | неразрывный пробел
&pound; | &#163; | £ | фунт стерлингов
&euro; | &#8364; | € | знак евро
&para; | &#182; | ¶ | символ параграфа
&sect; | &#167; | § | параграф
&copy; | &#169; | © | знак copyright
&reg; | &#174; | ® | знак зарегистрированной торговой марки
&trade; | &#8482; | ™ | знак торговой марки
&deg; | &#176; | ° | градус
&plusmn; | &#177; | ± | плюс-минус
&frac14; | &#188; | ¼ | дробь - одна четверть
&frac12; | &#189; | ½ | дробь - одна вторая
&frac34; | &#190; | ¾ | дробь - три четверти
&times; | &#215; | × | знак умножения
&divide; | &#247; | ÷ | знак деления
&fnof; | &#402; | ƒ | знак функции
Греческие буквы
&Alpha; | &#913; | Α | греческая заглавная буква альфа
&Beta; | &#914; | Β | греческая заглавная буква бета
&Gamma; | &#915; | Γ | греческая заглавная буква гамма
&Delta; | &#916; | Δ | греческая заглавная буква дельта
&Epsilon; | &#917; | Ε | греческая заглавная буква эпсилон
&Zeta; | &#918; | Ζ | греческая заглавная буква дзета
&Eta; | &#919; | Η | греческая заглавная буква эта
&Theta; | &#920; | Θ | греческая заглавная буква тета
&Iota; | &#921; | Ι | греческая заглавная буква иота
&Kappa; | &#922; | Κ | греческая заглавная буква каппа
&Lambda; | &#923; | Λ | греческая заглавная буква лямбда
&Mu; | &#924; | Μ | греческая заглавная буква мю
&Nu; | &#925; | Ν | греческая заглавная буква ню
&Xi; | &#926; | Ξ | греческая заглавная буква кси
&Omicron; | &#927; | Ο | греческая заглавная буква омикрон
&Pi; | &#928; | Π | греческая заглавная буква пи
&Rho; | &#929; | Ρ | греческая заглавная буква ро
&Sigma; | &#931; | Σ | греческая заглавная буква сигма
&Tau; | &#932; | Τ | греческая заглавная буква тау
&Upsilon; | &#933; | Υ | греческая заглавная буква ипсилон
&Phi; | &#934; | Φ | греческая заглавная буква фи
&Chi; | &#935; | Χ | греческая заглавная буква хи
&Psi; | &#936; | Ψ | греческая заглавная буква пси
&Omega; | &#937; | Ω | греческая заглавная буква омега
&alpha; | &#945; | α | греческая строчная буква альфа
&beta; | &#946; | β | греческая строчная буква бета
&gamma; | &#947; | γ | греческая строчная буква гамма
&delta; | &#948; | δ | греческая строчная буква дельта
&epsilon; | &#949; | ε | греческая строчная буква эпсилон
&zeta; | &#950; | ζ | греческая строчная буква дзета
&eta; | &#951; | η | греческая строчная буква эта
&theta; | &#952; | θ | греческая строчная буква тета
&iota; | &#953; | ι | греческая строчная буква иота
&kappa; | &#954; | κ | греческая строчная буква каппа
&lambda; | &#955; | λ | греческая строчная буква лямбда
&mu; | &#956; | μ | греческая строчная буква мю
&nu; | &#957; | ν | греческая строчная буква ню
&xi; | &#958; | ξ | греческая строчная буква кси
&omicron; | &#959; | ο | греческая строчная буква омикрон
&pi; | &#960; | π | греческая строчная буква пи
&rho; | &#961; | ρ | греческая строчная буква ро
&sigmaf; | &#962; | ς | греческая строчная буква сигма (final)
&sigma; | &#963; | σ | греческая строчная буква сигма
&tau; | &#964; | τ | греческая строчная буква тау
&upsilon; | &#965; | υ | греческая строчная буква ипсилон
&phi; | &#966; | φ | греческая строчная буква фи
&chi; | &#967; | χ | греческая строчная буква хи
&psi; | &#968; | ψ | греческая строчная буква пси
&omega; | &#969; | ω | греческая строчная буква омега
Стрелки
&larr; | &#8592; | ← | стрелка влево
&uarr; | &#8593; | ↑ | стрелка вверх
&rarr; | &#8594; | → | стрелка вправо
&darr; | &#8595; | ↓ | стрелка вниз
&harr; | &#8596; | ↔ | стрелка влево-вправо
Прочие символы
&spades; | &#9824; | ♠ | знак масти "пики"
&clubs; | &#9827; | ♣ | знак масти "трефы"
&hearts; | &#9829; | ♥ | знак масти "червы"
&diams; | &#9830; | ♦ | знак масти "бубны"
&quot; | &#34; | " | двойная кавычка
&amp; | &#38; | & | амперсанд
&lt; | &#60; | < | знак "меньше"
&gt; | &#62; | > | знак "больше"
Знаки пунктуации
&hellip; | &#8230; | … | многоточие ...
&prime; | &#8242; | ′ | одиночный штрих - минуты и футы
&Prime; | &#8243; | ″ | двойной штрих - секунды и дюймы
Общая пунктуация
&ndash; | &#8211; | – | тире
&mdash; | &#8212; | — | длинное тире
&lsquo; | &#8216; | ‘ | левая одиночная кавычка
&rsquo; | &#8217; | ’ | правая одиночная кавычка
&sbquo; | &#8218; | ‚ | нижняя одиночная кавычка
&ldquo; | &#8220; | “ | левая двойная кавычка
&rdquo; | &#8221; | ” | правая двойная кавычка
&bdquo; | &#8222; | „ | нижняя двойная кавычка
&laquo; | &#171; | « | левая двойная угловая скобка
&raquo; | &#187; | » | правая двойная угловая скобка


Вопросы и задание

7. Текст

Вопросы для проверки

1. Что определяет параметр align="justify" тега <div>?

  1. Выравнивание текста по центру
  2. Выравнивание текста по правому краю
  3. Выравнивание текста по ширине
  4. Выравнивание текста по левому краю
  5. Выравнивание всех строк

2. Что делает тег <strong>?

  1. Устанавливает курсивный текст
  2. Изменяет цвет текста
  3. Помечает текст как важный
  4. Отображает шрифт в виде верхнего индекса
  5. Делает текст неразрывным

3. Какой тег смещает текст вверх относительно базовой линии?

  1. <sub>
  2. <sup>
  3. <div>
  4. <p>
  5. <em>

4. Вы поместили текст внутрь контейнера <i>. Какая характеристика текста изменится?

  1. Цвет
  2. Насыщенность
  3. Контраст
  4. Наклон
  5. Подчеркивание

Задание

1. Напишите код HTML, чтобы получить результат, приведенный на рис. 7.7.

Рис. 7.7

2. Исправьте ошибки в приведенном коде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<body>
<h11 align="justify">Галион</h1>
<p align="justify">
<strong>Галион</b> - большое трехмачтовое судно особо прочной постройки, снабженное тяжелой артиллерией.</br>
Эти суда служили для перевозки товаров и драгоценных металлов из испанских и португальских колоний в Европу.</p>
<hr>
<blockquote>Флагманский корабль был мощным <i>галионом</i>, вооруженным сорока восьмью
большими пушками и восьмью малыми.</blockquote>
</hr>
</p>
</body>
</html>

3. Используя спецсимволы оформите текст, как показано на рис. 7.8. Обратите внимание на кавычки и тире в тексте.

Рис. 7.8


Ссылки

8. Ссылки

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

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

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

Параметр href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <A> является ссылкой. Текст, расположенный между тегами <A> и </A>, по умолчанию становится синего цвета и подчеркивается. В листинге 8.1 показано создание нескольких ссылок на разные веб-страницы.

Листинг 8.1. Добавление ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Ссылки на странице</title>
 </head>
 <body>
  <p><a href="dog.html">Собаки</a></p>
  <p><a href="cat.html">Кошки</a></p>
 </body>
</html>

В данном примере создаются две ссылки с разными текстами. При щелчке по тексту «Собаки» в окне браузера откроется документ dog.html, а при щелчке на «Кошки» — файл cat.html.

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

Рис. 8.1. Вид ссылок на странице

Если указана ссылка на файл, которого не существует, например, его имя в параметре href набрано с ошибкой, то такая ссылка называется битая. Битых ссылок следует категорически избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из листинга 8.1 в браузере Opera откроется не сам документ, а окно с предупреждением (рис. 8.2).

Рис. 8.2. Результат при открытии битой ссылки

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

Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку. Например, в браузере Firefox выводится следующее окно (рис. 8.3).

Рис. 8.3. Окно для выбора действия с файлом в Firefox


8. Ссылки

Абсолютные и относительные ссылки

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.

В листинге 8.2 показано создание абсолютной ссылки на другой сайт.

Листинг 8.2. Использование абсолютных ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Абсолютный адрес</title>
 </head>
 <body>
  <p><a href="http://htmlbook.ru">Изучение HTML</a></p>
 </body>
</html>

В данном примере ссылка вида <a href="http://htmlbook.ru">Изучение HTML</a> является абсолютной и ведет на главную страницу сайта htmlbook.ru.

Замечание

При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/), отображается индексный файл. Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html.

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

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке (рис. 8.4).

Рис. 8.4

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

<a href="Ссылаемый документ.html">Ссылка</a>

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

2. Файлы размещаются в разных папках (рис. 8.5).

Рис. 8.5

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

<a href="../Ссылаемый документ.html">Ссылка</a>

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 8.6).

Рис. 8.6

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

<a href="../../Ссылаемый документ.html">Ссылка</a>

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 8.7).

Рис. 8.7

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

<a href="Папка/Ссылаемый документ.html">Ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Папка 1/Папка 2/Ссылаемый документ.html">Сылка</a>

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как "/Папка/Имя файла" со слэшем вначале. Так, запись <a href="/course/">Курсы</a> означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.

Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.


8. Ссылки

Виды ссылок

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

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

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

Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.

Правила вложений для тега <A>

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

Листинг 8.3. Вложение тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Ошибки при использовании ссылок</title>
 </head>
 <body>
  <a href="lion.html"><h1>Охота на льва</h1></a>
  <h1><a href="lion.html">Как поймать льва в пустыне</a></h1>
 </body>
</html>

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


8. Ссылки

Параметры ссылок

Основной параметр href тега <a> мы уже освоили, рассмотрим еще несколько полезных, но необязательных атрибутов этого тега.

target

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

<a target="имя окна">...</a>

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

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно (это значение задается по умолчанию).
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

В листинге 8.4 показано, как сделать, чтобы ссылка открывалась в новом окне.

Листинг 8.4. Открытие ссылки в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Ссылка в новом окне</title>
 </head>
 <body>
  <p><a href="new.html" target="_blank">Открыть
      в новом окне</a></p>
 </body>
</html>

Замечание

Параметр target корректно использовать только при переходном <!DOCTYPE>, при строгом <!DOCTYPE> будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

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

title

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

<a title="текст">...</a>

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

Листинг 8.5. Создание всплывающей подсказки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Подсказка к ссылке</title>
 </head>
 <body>
  <p><a href="zoo.html" title="Рисунки различных животных и не только...">Рисунки</a></p>
 </body>
</html>

Результат данного примера показан на рис. 8.8.

Рис. 8.8. Вид всплывающей подсказки в браузере Opera

Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут, а вот вид и содержимое незначительно варьируется в зависимости от браузера. Например, Opera выводит не только текст подсказки, но и адрес ссылки, а другие браузеры отображают только текст (рис. 8.9).

Рис. 8.9. Вид всплывающей подсказки в браузерах Firefox, Internet Explorer, Chrome, Safari


8. Ссылки

Ссылка на адрес электронной почты

Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты (листинг 8.6).

Листинг 8.6. Ссылка на адрес электронной почты

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Адрес почты</title>
 </head>
 <body>
  <p><a href="mailto:ask@htmlbook.ru">Задавайте вопросы по электронной почте</a></p>
 </body>
</html>

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

Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject="тема сообщения", как показано в листинге 8.7.

Листинг 8.7. Задание темы сообщения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Тема письма</title>
 </head>
 <body>
 <p><a href="mailto:ask@htmlbook.ru?subject=Вопрос по HTML">Задавайте
  вопросы по электронной почте</a>
 </body>
</html>

При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.


8. Ссылки

Вопросы для проверки

1. На странице располагаются три текстовые ссылки, две из них синего цвета, а одна фиолетовая. Почему различаются цвета ссылок?

  1. Тег <a> в фиолетовой ссылке содержит ошибочные параметры, поэтому выделяется другим цветом.
  2. Фиолетовая ссылка содержит абсолютный путь к документу, а синие ссылки — локальный.
  3. На фиолетовую ссылку уже щелкали, она стала посещенной, а синие ссылки еще не открывали.
  4. Фиолетовая ссылка является активной, а синие ссылки нет.
  5. Синие ссылки битые, а фиолетовая корректная.

2. Какая ссылка написана с ошибкой?

  1. <a href="ftp://microsoft.com/windows/halyava/dounload/">Скачать</a>
  2. <a href="http://htmlbook.ru/download/?id=100">Справочники</a>
  3. <a href="../../animal/index.html">Животные</a>
  4. <a href="/site/my/html/learn/links/yes/мои файлы.html">Мои файлы<a>
  5. <a href="/">Главная страница </a>

3. Текущий файл располагается в следующей папке относительно корня сайта — krsk/peoples/index.html. Вам надо сделать ссылку на файл index.html, расположенный в папке krsk/animal. Какой путь правильный?

  1. ../../krsk/animal/index.html
  2. ../krsk/animal/index.html
  3. ../krsk/peoples/index.html
  4. ../animal/index.html
  5. /animal/index.html

4. Настя захотела сделать ссылку на новое окно, для чего она написала такой код <a target="new" href="new.html">Открыть в новом окне</a>. Антон утверждает, что здесь ошибка, потому что у параметра target нет значения new. Настя говорит, что это не важно, ссылка все равно откроется в новом окне, а Паша заявляет, что ссылка вообще работать не будет. Кто из них прав?

  1. Настя.
  2. Антон.
  3. Паша.
  4. Паша и Антон.
  5. Никто.

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

  1. Перед именем файлов в теге <a> забыли указать слэш (/).
  2. Вместо относительных путей использованы абсолютные.
  3. В настройках браузера не указан прокси-сервер для локальных адресов.
  4. Внутри контейнера <a> располагались блочные элементы.
  5. Расширение html не зарегистрировано на данном компьютере.

Задание

1. Создайте три файла с именами 1.html, 2.html и 3.html, в каждом из них должен быть заголовок вида «Страница 1» и ссылка с текстом «Перейти». Причем ссылки должны быть замкнуты по схеме кольца, т.е. ссылка с документа 1.html должна вести на 2.html, с файла 2.html на 3.html, а файл 3.html опять ссылается на 1.html.

2. Создайте веб-страницу, результат которой показан на рис. 8.10. Адреса ссылок произвольны.

Рис. 8.10


Якоря

9. Якоря

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

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи параметра name тега <a> (листинг 9.1). В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Листинг 9.1. Создание якоря

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Быстрый переход внутри документа</title>
 </head>
 <body>
  <p><a name="top"></a></p>
  <p>...</p>
  <p><a href="#top">Наверх</a></p>
 </body>
</html>

Между тегами <a name="top"> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения параметров name и href совпадали (символ решетки не в счет).

Замечание

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

Cсылку можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в параметре href тега <a> надо указать адрес документа и в конце добавить символ решетки # и имя закладки (листинг 9.2).

Листинг 9.2. Ссылка на закладку из другой веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Якорь в другом документе</title>
 </head>
 <body>
  <p><a href="text.html#bottom">Перейти к нижней части текста</a></p>
  </body>
</html>

В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.

Замечание

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет.

Вопросы для проверки

1. Какая ссылка написана с ошибкой?

  1. <a href="http://webreference.ru/link.html#graph">Переход</a>
  2. <a href=" /style.html#top">Переход</a>
  3. <a href="#17" monitor">Переход</a>
  4. <a href="../music/queen.html#A Winter's Tale">Переход</a>
  5. <a href="#images.html">Переход</a>

2. Иван написал ссылку вида <a href="top">Вернуться</a>, чтобы можно было быстро переходить к верхней части текущей страницы. Какой результат будет в браузере при щелчке по этой ссылке?

  1. Браузер перейдет к якорю с именем top.
  2. Появится сообщение об ошибке, т.к. файла top не существует.
  3. Никаких видимых результатов не будет.
  4. Текст не будет выделен как ссылка, поэтому щелчок по тексту ни к чему не приведет.
  5. Откроется файл top.html.

3. Что помогает делать якорь?

  1. Сокращать объем кода веб-страницы.
  2. Избавиться от лишних ссылок.
  3. Осуществлять переход с одной страницы на другую.
  4. Быстрее загружать веб-документы.
  5. Переходить к определенной закладке внутри страницы.

Задание

Исправьте все ошибки в приведенном коде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  </head>
  <body>
  <P>Эйлер, Леонард (Leonhard Euler, 1707-1783)

  <A href="#E6_1" target=b">44</A>,
  <A href="#E6_2" target=b">67</A>,

  <A href="#E6_3" target=b">73</A>, <SPAN
  A name=6_1></A>Леонард Эйлер обратился к своему другу <A name=K13></A>Клеро с просьбой
  поискать в доме Ферма, не осталось ли где-нибудь клочка бумаги с жизненно
  важным фрагментом доказательства.
</body>
</html>


Форматы файлов

10. Изображения

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

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

  1. Поскольку веб-страница загружается по сети, существенным фактором выступает объем графического файла, встроенного в документ. Чем он меньше, тем быстрее отобразится изображение.
  2. Размер картинки необходимо ограничить по ширине, например, установить не более 800 пикселов. Иначе изображение целиком не поместится в окне браузера, и появятся полосы прокрутки.

Широкое распространение для веб-графики получили два формата — GIF и JPEG. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт веб-изображений. Есть еще формат PNG, который также поддерживается браузерами при добавлении изображений и существует в двух ипостасях — PNG-8 и PNG-24. Однако популярность PNG сильно уступает признанию форматам GIF и JPEG.

Формат GIF

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

Особенности

  • Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры.
  • Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.
  • Поддерживает покадровую смену изображений, что делает формат популярным для создания баннеров и простой анимации.
  • Использует свободный от потерь метод сжатия

Область применения

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

Формат JPEG

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

Особенности

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

Область применения

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

Формат PNG-8

PNG-8 (Portable Network Graphics) — формат по своему действию аналогичен GIF. По заверению разработчиков использует улучшенный формат сжатия данных, но как показывает практика, это не всегда так.

Особенности

  • Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле — от 2 до 256.
  • В отличие от GIF, не отображает анимацию ни в каком виде.

Область применения

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

Формат PNG-24

PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или иллюстрациях

Особенности

  • Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для полноцветных изображений.
  • Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной, так называемый градиент.
  • Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пикселы в изображении неизменными, если сравнивать с другими форматами, то у PNG-24 конечный объем графического файла получается наибольшим.

Область применения

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


10. Изображения

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

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

<img src="URL" alt="альтернативный текст">

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample.gif и хранится в папке images корня сайта.

  • Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
  • Если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
  • Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 10.1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.

Рис. 10.1. Пример размещения файлов

  • Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif.

Рис. 10.2. Пример размещения файлов

В листинге 10.1 показано несколько способов добавления рисунка на веб-страницу.

Листинг 10.1. Вставка изображения в документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Добавление рисунков</title>
 </head>
 <body>
  <p><img src="http://www.webimg/images/sample.gif"
        alt="Это абсолютный адрес размещения изображения"></p>
  <p><img src="/images/sample.gif"
        alt="Адрес размещения изображения относительно корня сайта"></p>
  <p><img src="images/sample.gif"
        alt="Адрес размещения изображения относительно текущего HTML-документа"></p>
 </body>
</html>

Как правило, в качестве формата графического файла выступает GIF и JPEG.


10. Изображения

Альтернативный текст

Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения и дает представление об его содержании (рис. 10.3). Затем зарезервированное пустое поле заменяется картинкой (рис. 10.4).

Рис. 10.3. Альтернативный текст до загрузки изображения

Рис. 10.4. Веб-страница после загрузки изображения

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

Рис. 10.5. Вид всплывающей подсказки

Замечание

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

Для создания альтернативного текста используется параметр alt тега <img>, как показано в листинге 10.2.

Листинг 10.2. Добавление альтернативного текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Альтернативный текст</title>
 </head>
 <body>
   <p><a href="index.html"><img src="home.gif" alt="Возврат на главную страницу"></a></p>
  </body>
</html>

Учтите, что текст в параметре alt обязательно должен быть взят в кавычки, как в данном примере.

Не все браузеры отображают альтернативный текст в виде всплывающей подсказки. Поэтому для ее создания используйте параметр title (листинг 10.3).

Листинг 10.3. Всплывающая подсказка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Параметр title </title>
 </head>
 <body>
   <p><a href="index.html"><img src="home.gif"
       alt="Вернуться на главную страницу" title="Главная страница"></a></p>
 </body>
</html>

Как показано в данном примере, значения у параметров alt и title может различаться, что позволяет установить определенный текст для разных случаев. Только учтите, что длинный текст будет «обрезаться» и отображается не весь. Но поисковые системы, для которых иной раз и применяют параметр title и alt, вполне его читают.


10. Изображения

Изменение размеров рисунка

Для изменения размеров рисунка средствами HTML у тега <img> предусмотрены параметры width (ширина) и height (высота). В качестве значения используются пикселы, при этом аргументы должны совпадать с физическими размерами картинки. Например, на рис. 10.6 показано изображение, которое имеет размеры 100х111 пикселов.

Рис. 10.6. Картинка исходного размера

Соответственно, HTML-код для размещения данного рисунка, приведен в листинге 10.4.

Листинг 10.4. Размеры рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Размеры изображения</title>
 </head>
 <body>
  <p><img src="sample.gif" width="100" height="111" alt="Винни-Пух"></p>
 </body>
</html>

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

Рис. 10.7. Размеры картинки не указаны и она еще не загрузилась

Рис. 10.8. Картинка загружена, текст переформатирован

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

На рис. 10.9 приведено то же изображение, что показано на рис. 10.6, но с увеличенной в два раза шириной и высотой.

Рис. 10.9. Вид картинки, увеличенной в браузере

Код для такого рисунка останется практически неизменным и показан в листинге 10.6.

Листинг 10.5. Изменение размера рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Увеличение размеров изображения</title>
 </head>
 <body>
  <p><img src="sample.gif" width="200" height="222" alt="Винни-Пух"></p>
 </body>
</html>

Такое изменение размеров называется ресемплированием, при этом алгоритм браузера по своим возможностям уступает графическим редакторам. Поэтому увеличивать таким способом изображения нужно только в особых случаях, а то слишком ухудшается качество картинки. Лучше воспользоваться какой-нибудь графической программой. Исключением являются рисунки, содержащие прямоугольные области. На рис. 10.9 приведен файл узора, который занимает 54 байта и имеет исходный размер 8 на 8 пикселов, увеличенных до 150 пикселов.

Рис. 10.10. Увеличенное изображение


10. Изображения

Вопросы для проверки

1. На сайте внутри папки images фотографии хранятся в папке photo. Как указать путь к файлу с фотографией girl0018.jpg из файла index.html, расположенного в корне сайта?

  1. ../images/photo/girl0018.jpg
  2. ../photo/girl0018.jpg
  3. /photo/girl0018.jpg
  4. photo/images/girl0018.jpg
  5. images/photo/girl0018.jpg

2. Миша зашел на веб-страницу, где была только одна небольшая фотография размером 100х100 пикселов. Фотография при этом загружалась очень долго. Почему это произошло?

  1. На странице не указан <!DOCTYPE>.
  2. Для тега <img> не добавлен параметр alt.
  3. Неправильно заданы размеры изображения.
  4. Фотография сохранена в формате JPEG.
  5. Неверно указан путь к файлу.

3. Какая строка содержит ошибку?

  1. <img src="images/fig01.png" width="626" height="233" alt="рисунок 1 ">
  2. <img src="images/fig02.png" alt="">
  3. <img src="images/fig03.png" height="273" alt="рисунок 1">
  4. <img src="images/fig04.png" width="154" alt="рисунок 1">
  5. <img src="images/fig05.png" width="264" height="233">


11. Списки

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

Любой список представляет собой контейнер <ul>, который устанавливает маркированный список, или <ol>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <li>.

Маркированный список

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

<ul>
 <li>Первый пункт</li>
 <li>Второй пункт</li>
 <li>Третий пункт</li>
</ul>

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

В листинге 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

Листинг 11.1. Создание маркированного списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Маркированный список</title>
 </head>
 <body>
   <hr>
   <ul>
     <li>Чебурашка</li>
     <li>Крокодил Гена</li>
     <li>Шапокляк</li>
     <li>Крыса Лариса</li>
   </ul>
   <hr>
 </body>
</html>

Результат данного примера показан на рис. 11.1.

Рис. 11.1. Вид маркированного списка в браузере Opera

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

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется параметр type тега <ul>. Допустимые значения приведены в табл. 11.1

Табл. 11.1. Стили маркеров списка
Тип списка Код HTML Пример
Список с маркерами в виде круга <ul type="disc">
<li>...</li>
</ul>
  • Первый
  • Второй
  • Третий
Список с маркерами в виде окружности <ul type="circle">
<li>...</li>
</ul>
  • Первый
  • Второй
  • Третий
Список с квадратными маркерами <ul type="square">
<li>...</li>
</ul>
  • Первый
  • Второй
  • Третий

Замечание

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

Создание списка с квадратными маркерами показано в листинге 11.2.

Листинг 11.2. Вид маркеров

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Маркированный список</title>
 </head>
 <body>
  <p><strong>Изменение убеждений</strong></p>
  <ul type="square">
   <li>изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм).
       Специальное предложение - иудаизм и мусульманство вместе;</li>
   <li>изменение веры в непогрешимость любимой партии;</li>
   <li>убеждение в том, что инопланетяне существуют;</li>
   <li>предпочтение политического строя, как самого лучшего в своем роде
       (на выбор: феодализм, социализм, коммунизм, капитализм).</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 11.2.

Рис. 11.2. Вид списка с квадратными маркерами в браузере Opera


11. Списки

Нумерованный список

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега <ol>, который и применяется для создания списка. Каждый пункт нумерованного списка заключается в контейнер <li>, как показано ниже.

<ol>
 <li>Первый пункт</li>
 <li>Второй пункт</li>
 <li>Третий пункт</li>
</ol>

Если не указывать никаких дополнительных параметров и просто написать тег <ol>, то по умолчанию применяется список с арабскими числами (1, 2, 3,...), как показано в листинге 11.3.

Листинг 11.3. Создание нумерованного списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Нумерованный список</title>
 </head>
 <body>
  <p><strong>Работа со временем</strong></p>
  <ol>
    <li>создание пунктуальности (никогда не будете никуда опаздывать);</li>
    <li>излечение от пунктуальности (никогда никуда не будете торопиться);</li>
    <li>изменение восприятия времени и часов.</li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 11.3.

Рис. 11.3. Вид нумерованного списка

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

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

  • арабские числа (1, 2, 3, ...);
  • прописные латинские буквы (A, B, C, ...);
  • строчные латинские буквы (a, b, c, ...);
  • прописные римские числа (I, II, III, ...);
  • строчные римские числа (i, ii, iii, ...).

Для указания типа нумерованного списка применяется параметр type тега <ol>. Его возможные значения приведены в табл. 11.2.

Табл. 11.2. Типы нумерованного списка
Тип списка | Код HTML | Пример
Арабские числа | <ol type="1"> <li>...</li> </ol> | 1. Чебурашка 2. Крокодил Гена 3. Шапокляк
Прописные буквы латинского алфавита | <ol type="A"> <li>...</li> </ol> | A. Чебурашка B. Крокодил Гена C. Шапокляк
Строчные буквы латинского алфавита | <ol type="a"> <li>...</li> </ol> | a. Чебурашка b. Крокодил Гена c. Шапокляк
Римские числа в верхнем регистре | <ol type="I"> <li>...</li> </ol> | I. Чебурашка II. Крокодил Гена III. Шапокляк
Римские числа в нижнем регистре | <ol type="i"> <li>...</li> </ol> | i. Чебурашка ii. Крокодил Гена iii. Шапокляк

Чтобы начать список с определенного значения, используется параметр start тега <ol>. При этом не имеет значения, какой тип списка установлен с помощью параметра type, аргумент start одинаково работает и с римскими и с арабскими числами. В листинге 11.4 показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.

Листинг 11.4. Нумерация списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Римские числа</title>
 </head>
 <body>
  <ol type="I" start="8">
   <li>Король Магнум XLIV</li>
   <li>Король Зигфрид XVI</li>
   <li>Король Сигизмунд XXI</li>
   <li>Король Хусбрандт I</li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 11.4.

Рис. 11.4. Нумерованный список с римскими числами


11. Списки

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

Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <dl>, термин — тегом <dt>, а его определение — с помощью тега <dd>. Вложение тегов для создания списка определений продемонстрировано в листинге 11.5.

Листинг 11.5. Общая структура списка определений

<dl>
  <dt>Термин 1</dt>
    <dd>Определение 1</dd>
  <dt>Термин 2</dt>
    <dd>Определение 2</dd>
</dl>

Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д. В листинге 11.6 показано одно из возможных использований этого вида списка.

Листинг 11.6. Создание списка определений

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Список определений</title>
 </head>
 <body>
  <dl>
   <dt>Тег</dt>
     <dd>Тег - это специальный символ разметки, который применяется для
         вставки различных элементов на веб-страницу таких как: рисунки,
         таблицы, ссылки и др., и для изменения их вида.</dd>
   <dt>HTML-документ</dt>
     <dd>Обычный текстовый файл, который может содержать в себе текст,
         теги и стили. Изображения и другие объекты хранятся отдельно.
         Содержимое такого файла обычно называется HTML-код.</dd>
   <dt>Сайт</dt>
   <dd>Cайт - это набор отдельных веб-страниц, которые связаны между собой
         ссылками и единым оформлением.</dd>
  </dl>
 </body>
</html>

Результат примера показан на рис. 11.5.

Рис. 11.5. Вид списка определений

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


Вопросы и задание

11. Списки

Вопросы для проверки

1. Какой элемент списка написан с ошибкой?

  1. <li type="a">Первый</li>
  2. <li type="circle">Второй</li>
  3. <li type="disk">Третий</li>
  4. <li type="i">Четвертый</li>
  5. <li type="square">Пятый</li>

2. Какой тип списка устанавливает параметр type="a" тега <ol>?

  1. Нумерованный, с римскими числами.
  2. Нумерованный, с арабскими числами.
  3. Маркированный, с маркерами в виде круга.
  4. Нумерованный, с латинскими буквами.
  5. Нумерованный, с русскими буквами.

3. Какой параметр тега <ol> начинает нумерацию списка с определенного значения?

  1. begin
  2. start
  3. number
  4. type
  5. value

4. С какого тега начинается список определений?

  1. <dd>
  2. <dt>
  3. <dl>
  4. <dv>
  5. <dm>

5. Какой тег не относится к тегам списка?

  1. <ol>
  2. <li>
  3. <ul>
  4. <dl>
  5. <dfn>

Задание

1. Используя вложение тегов, сделайте список, приведенный на рис. 11.6. Обратите особое внимание на то, чтобы код был валидным.

Рис. 11.6

2. Создайте список, как показано на рис. 11.7. Ссылки не обязательно должны работать (т.е. вести на какие-то существующие файлы), главное соблюсти указанный вид и валидность кода.

Рис. 11.7


12. Таблицы

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

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

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

Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (листинг 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

Листинг 12.1. Создание таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type"  content="text/html; charset=windows-1251">
  <title>Тег TABLE</title>
 </head>
 <body>
  <table border="1" width="100%" cellpadding="5">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>
 </body>
</html>

Порядок расположения ячеек и их вид показан на рис. 12.1.

Рис. 12.1. Результат создания таблицы с четырьмя ячейками


Параметры тега TABLE

12. Таблицы

Параметры тега <TABLE>

Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию параметров тегов <table>, <tr> и <td>. Далее перечислены некоторые параметры тега <table>, которые применяются наиболее часто.

ALIGN

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются аргументы left и right, текст начинает обтекать таблицу сбоку и снизу.

BGCOLOR

Устанавливает цвет фона таблицы.

BORDER

Устанавливает толщину границ в пикселах. Границы отображается вокруг таблицы и между ячейками, как показано на рис. 12.1.

CELLPADDING

Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

CELLSPACING

Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение.

COLS

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

RULES

Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов <thead>, <tfoot>, <tbody>, <colgroup> или <col>. Толщина границы указывается с помощью параметра border.

WIDTH

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


Параметры тега TD

12. Таблицы

Параметры тега <td>

Каждая ячейка таблицы, задаваемая через тег <td>, в свою очередь тоже имеет свои параметры, часть из которых совпадает с параметрами тега <table>.

ALIGN

Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки.

BGCOLOR

Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега <table> можно получить разнообразные цветовые эффекты в таблице.

COLSPAN

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 12.2.

Рис. 12.2. Пример таблицы, где используется горизонтальное объединение ячеек

В приведенной на рис. 12.2 таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan.

HEIGHT

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

ROWSPAN

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 12.3.

Рис. 12.3. Пример таблицы, где применяется вертикальное объединение ячеек

В приведенной на рис. 12.3 таблице содержатся две строки и две колонки, левые вертикальные ячейки объединены с помощью параметра rowspan.

VALIGN

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

WIDTH

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


12. Таблицы

Особенности таблиц

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

  • Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, уже как обычная таблица.
  • Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками, поля вокруг содержимого, устанавливаемые через параметр cellpadding и расстояние между ячейками, которые определяются значением cellspacing.
  • Если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит с рисунками. В этом случае ширина таблицы увеличивается, несмотря на указанные размеры.
  • Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.


12. Таблицы

Выравнивание таблиц

Для задания выравнивания таблицы по центру веб-страницы или по одному из ее краев предназначен параметр align тега <table>. Результат будет заметен только в том случае, если ширина таблицы не занимает всю доступную область, другими словами, меньше, чем 100%. На самом деле align не только устанавливает выравнивание, но и заставляет текст обтекать таблицу с других сторон аналогично поведению тега <img>. В листинге 12.2 показано выравнивание таблицы по правому краю и ее обтекание текстом.

Листинг 12.2. Выравнивание таблицы по правому краю

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Выравнивание таблицы</title>
 </head>
 <body>
  <table width="200" bgcolor="#c0c0c0" cellspacing="0" cellpadding="5" border="1" align="right">
   <tr><td>Содержимое таблицы</td></tr>
  </table>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
     euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

В данном примере создается таблица с фоном серого цвета и выравниванием по правому краю. Результат примера показан на рис. 12.4.

Рис. 12.4. Таблица, выровненная по правому краю окна браузера

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


12. Таблицы

Объединение ячеек

Для объединения двух и более ячеек в одну используется параметр colspan тега <td>. Он устанавливает, сколько ячеек следует объединить по горизонтали. Аналогично работает и параметр rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan="3"> заменяет три ячейки, поэтому в следующей строке должно быть три тега <td> или конструкция вида <td colspan="2">...</td><td>...</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В листинге 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.

Листинг 12.3. Неверное объединение ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Неправильное использование параметра colspan</title>
 </head>
 <body>
   <table border="1" cellpadding="5">
    <tr>
     <td colspan="2">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr>
     <td>Ячейка 3</td>
     <td>Ячейка 4</td>
    </tr>
   </table>
 </body>
</html>

Результат данного примера показан на рис. 12.5.

Рис. 12.5. Появление дополнительной ячейки в таблице

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

Правильное использование параметров colspan и rowspan продемонстрировано в листинге 12.4.

Листинг 12.4. Объединение ячеек по вертикали и горизонтали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td rowspan="2">Браузер</td>
    <th colspan="2">Internet  Explorer</th>
    <th colspan="3">Opera</th>
    <th colspan="2">Firefox</th>
   </tr>
   <tr>
    <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
   </tr>
   <tr align="center">
    <td>Поддерживается</td>
    <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 12.6.

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.


12. Таблицы

Вложенные таблицы

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

Листинг 12.5. Явно заданная высота ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Объединение ячеек</title>
 </head>
 <body>
  <table width="100%" border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td width="100" valign="top">Duis te feugifacilisi. Duis autem dolor in hendrerit
         in vulputate velit esse molestie consequat.</td>
    <td rowspan="2" valign="top">Lorem ipsum dolor sit amet, consectetuer
         adipiscing  elit, sed diem nonummy nibh euismod tincidunt ut lacreet
         dolore magna aliguam  erat volutpat. Ut wisis enim ad minim veniam, quis
         nostrud exerci tution  ullamcorper suscipit lobortis nisl ut aliquip ex ea
         commodo consequat. Duis te  feugifacilisi. Ut wisi enim ad minim veniam, quis
         nostrud exerci taion  ullamcorper suscipit lobortis nisl ut aliquip ex
         en commodo consequat.</td>
   </tr>
   <tr>
    <td height="40">Lorem ipsum</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 12.7.

Рис. 12.7. Высота ячеек в браузере Opera 9

Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что параметр height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.

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

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

Листинг 12.6. Вложенные таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Вложенные таблицы</title>
 </head>
 <body>
  <table width="100%" border="0" cellpadding="5" cellspacing="0">
   <tr>
    <td width="150" valign="top" bgcolor="#f0f0f0">
     <table width="100%" cellpadding="2" cellspacing="1">
      <tr><td bgcolor="#ffffff">Lorem</td></tr>
      <tr><td bgcolor="#ffffff">Ipsum</td></tr>
      <tr><td bgcolor="#ffffff">Dolor</td></tr>
      <tr><td bgcolor="#ffffff">Sit</td></tr>
      <tr><td bgcolor="#ffffff">Amet</td></tr>
     </table>
    </td>
    <td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer
         adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
         dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
         nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea
         commodo consequat.</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 12.8.

Рис. 12.8. Вид вложенных таблиц

В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%.

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


12. Таблицы

Заголовок таблицы

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

  • left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
  • right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
  • center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
  • top — результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
  • bottom — заголовок размещается внизу таблицы по ее центру.

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

Листинг 12.7. Создание заголовка таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Заголовок таблицы</title>
 </head>
 <body>
  <table width="100%" border="1" cellpadding="4" cellspacing="0">
   <caption>Изменение добычи ресурсов по годам</caption>
   <tr>
    <th>&nbsp;</th><th>2003</th><th>2004</th><th>2005</th>
   </tr>
   <tr>
    <td>Нефть</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Золото</td><td>29</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Дерево</td><td>38</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Ниже показан результат данного примера (рис. 12.9).

Рис. 12.9. Вид заголовка таблицы в браузере Opera


Вопросы и задание

12. Таблицы

Вопросы для проверки

1. Какой из приведенных фрагментов кода выравнивает содержимое ячейки по правому краю?

  1. <td right>
  2. <td righalign>
  3. <td align="right">
  4. <td valign="right">
  5. <td textalign="right">

2. Какие из приведенных тегов являются табличными?

  1. <table><head><tfoot>
  2. <table><tr><tt>
  3. <thead><body><tr>
  4. <table><tr><td>
  5. <table><caption><align>

3. Ане требуется сделать заголовок под таблицей. Какой код она должна использовать?

  1. <table>
    <caption>Заголовок</caption>
    ...
    </table>
  2. <table>
    ...
    <caption>Заголовок</caption>
    </table>
  3. <table>
    ...
    </table>
    <caption>Заголовок</caption>
  4. <table>
    <caption align="bottom" >Заголовок</caption>
    ...
    </table>
  5. <table>
    <caption valign="bottom" >Заголовок</caption>
    ...
    </table>

4. Что определяет параметр colspan тега <td>?

  1. Связывает ячейки по вертикали.
  2. Задает выравнивание внутри ячейки.
  3. Объединяет ячейки по горизонтали.
  4. Определяет количество колонок.
  5. Рисует границу вокруг колонок.

Задание

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

2. Создайте таблицу приведенную на рис. 12.10.

Рис. 12.10

3. Исправьте ошибки в приведенном коде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 </head>
 <body>
  <table border="0" celpadding="0" celspacing="0" border="2">
   <tr>
    <td valign="top">Ut aliquip ex ea commodo.</td>
    <td valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
   </tr>
    <td valign="botom" colspan="2">Lobortis nisl.</td>
    <td valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
   </tr>
  </table>
 </body>
</html>


Достоинства и недостатки фреймов

13. Фреймы

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

Достоинства фреймов

Простота

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

Быстрота

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

Размещение

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

Изменение размеров областей

Можно изменять размеры фреймов «на лету», чего не позволяет сделать традиционная верстка HTML.

Загрузка

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

Недостатки фреймов

Навигация

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

Плохая индексация поисковыми системами

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

Внутренние страницы нельзя добавить в «Избранное»

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

Несовместимость с разными браузерами

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

Непрестижность

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


Фреймы

13. Фреймы

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

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

Для создания фрейма используется тег <frameset>, который заменяет тег <body> в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги <frame>, которые указывают на HTML-документ, предназначенный для загрузки в область (рис. 13.1).

Рис. 13.1. Пример разделения окна браузера на два фрейма

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

Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (листинг 13.1).

Листинг 13.1. Файл index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Фреймы</title>
 </head>
 <frameset cols="100,*">
   <frame src="menu.html" name="MENU">
   <frame src="content.html" name="CONTENT">
 </frameset>
</html>

В случае использования фреймов в первой строке кода пишется следующий тип документа.

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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

В данном примере окно браузера разбивается на две колонки с помощью параметра cols, левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.

В теге <frame> задается имя HTML-файла, загружаемого в указанную область с помощью параметра src. В левое окно будет загружен файл, названный menu.html (листинг 13.2), а в правое — content.html (листинг 13.3). Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью параметра name.

Листинг 13.2. Файл menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Навигация по сайту</title>
 </head>
 <body style="background: #f0f0f0">
   <p>МЕНЮ</p>
 </body>
</html>

В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее.

Листинг 13.3. Файл content.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Содержание сайта</title>
 </head>
 <body>
  <p>СОДЕРЖАНИЕ</p>
 </body>
</html>

Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2).

Рис. 13.2. Разделение страницы на три фрейма

В данном случае опять используется тег <frameset>, но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через параметр rows, где для разнообразия применяется процентная запись (листинг 13.4).

Листинг 13.4. Три фрейма

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Фреймы</title>
 </head>
 <frameset rows="25%,75%">
   <frame src="top.html" name="TOP" scrolling="no" noresize>
   <frameset cols="100,*">
     <frame src="menu.html" name="MENU">
     <frame src="content.html" name="CONTENT">
   </frameset>
 </frameset>
</html>

Как видно из данного примера, контейнер <frameset> с параметром rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один <frameset>, который повторяет уже известную вам структуру из листинга 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены параметры scrolling="no" и noresize.


13. Фреймы

Ссылки во фреймах

В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется параметр target тега <a>. В качестве значения используется имя фрейма, в который будет загружаться документ, указанный параметром name (листинг 13.5).

Листинг 13.5. Ссылка на другой фрейм

Файл index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 <html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Фреймы</title>
  </head>
  <frameset cols="100,*">
   <frame src="menu.html" name="MENU">
   <frame src="content.html" name="CONTENT">
  </frameset>
</html>

Файл menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Навигация по сайту</title>
 </head>
 <body>
  <p><a href="text.html" target="CONTENT">Содержание</a></p>
 </body>
</html>

В приведенном примере фрейму присваивается имя CONTENT. Чтобы документ загружался в указанный фрейм, используется параметр target="CONTENT".

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

  • _blank — загружает документ в новое окно;
  • _self — загружает документ в текущий фрейм;
  • _parent — загружает документ во фрейм, занимаемый родителем, если фрейма-родителя нет параметр действует также, как _top;
  • _top — отменяет все фреймы и загружает документ в полное окно браузера.


13. Фреймы

Границы между фреймами

Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии. Чтобы ее скрыть используется параметр frameborder тега <frameset> со значением 0. Однако в браузере Opera граница хоть и становится в этом случае бледной, все же остается. Для этого браузера требуется добавить параметр framespacing="0". Таким образом, комбинируя разные параметры тега <frameset>, получим универсальный код, который работает во всех браузерах. Линия при этом показываться никак не будет (листинг 13.6).

Листинг 13.6. Убираем границу между фреймами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Фреймы</title>
 </head>
  <frameset cols="100,*" frameborder="0" framespacing="0">
   <frame src="menu.html" name="MENU">
   <frame src="content.html" name="CONTENT">
  </frameset>
</html>

Учтите, что параметр frameborder и framespacing не являются валидными и не соответствуют спецификации HTML.

Если граница между фреймами все же нужна, в браузере она рисуется по умолчанию, без задания каких-либо параметров. Можно, также, задать цвет рамки с помощью параметра bordercolor, который может применяться в тегах <frameset> и <frame>. Цвет указывается по его названию или шестнадцатеричному значению (листинг 13.7), а толщина линии управляется параметром border. Браузер Opera игнорирует этот параметр и обычно отображает линию черного цвета.

Листинг 13.7. Изменение цвета границы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Фреймы</title>
 </head>
 <frameset cols="100,*" bordercolor="#000080" border="5">
   <frame src="menu.html" name="MENU">
   <frame src="content.html" name="CONTENT">
 </frameset>
</html>

Параметры bordercolor и border тега <frameset> также не являются валидными и не признаются спецификацией HTML.

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

Opera | Internet Explorer | Firefox
Opera | Internet Explorer | Firefox

Рис. 13.3. Вид границы между фреймами в разных браузерах

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


Размеры фреймов

13. Фреймы

Изменение размеров фреймов

По умолчанию размеры фреймов можно изменять с помощью курсора мыши, наведя его на границу между фреймами. Для блокировки возможности изменения пользователем размера фреймов следует воспользоваться параметром noresize тега <frame> (листинг 13.8).

Листинг 13.8. Запрет на изменение размера фреймов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Фреймы</title>
 </head>
 <frameset cols="100,*">
   <frame src="menu.html" name="MENU" noresize>
   <frame src="content.html" name="CONTENT">
 </frameset>
</html>

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


13. Фреймы

Полосы прокрутки

Если содержимое фрейма не помещается в отведенное окно, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется параметр scrolling тега <frame>. Он может принимать два основных значения: yes — всегда вызывает появление полос прокрутки, независимо от объема информации и no — запрещает их появление (листинг 13.9).

Листинг 13.9. Запрет на изменение размера фреймов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Фреймы</title>
 </head>
 <frameset cols="100,*">
   <frame src="menu.html" name="MENU" noresize scrolling="no">
   <frame src="content.html" name="CONTENT">
 </frameset>
</html>

При выключенных полосах прокрутки, если информация не помещается в окно фрейма, просмотреть ее будет сложно. Поэтому параметр scrolling="no" следует использовать осторожно.

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


13. Фреймы

Плавающие фреймы

Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. На рис. 13.4 приведен пример такого фрейма.

Рис. 13.4. Плавающий фрейм на веб-странице

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

Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный параметр src, указывающий на загружаемый во фрейм документ (листинг 13.10).

Листинг 13.10. Использование тега <iframe>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Плавающий фрейм</title>
 </head>
 <body>
  <p><iframe src="rgb.html" width="300" height="120"></iframe></p>
 </body>
</html>

В данном примере ширина и высота фрейма устанавливается через параметры width и height. Сам загружаемый во фрейм файл называется rgb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки.

Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через параметр name, а в теге <a> указать это же имя в параметре target (листинг 13.11).

Листинг 13.11. Загрузка документа во фрейм

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Плавающий фрейм</title>
 </head>
 <body>
  <p><a href="rgb.html" target="color">RGB</a> |
     <a href="cmyk.html" target="color">CMYK</a> |
     <a href="hsb.html" target="color">HSB</a></p>
  <p><iframe src="model.html" name="color" width="100%" height="300"></iframe></p>
 </body>
</html>

В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color.


Вопросы и задание

13. Фреймы

Вопросы для проверки

1. Какой параметр тега <frame> не является валидным?

  1. bordercolor
  2. frameborder
  3. name
  4. noresize
  5. scrolling

2. Паше требуется разбить окно браузера на два фрейма: правый фрейм должен занимать ширину 200 пикселов, а левый — оставшееся пространство. Какой код должен использовать Паша?

  1. <frameset rows="200" cols="2">
  2. <frameset cols="200,*">
  3. <frameset cols="*,200">
  4. <frameset rows="*,200">
  5. <frameset rows="*" cols="200">

3. Какой параметр тега <frameset> является валидным?

  1. border
  2. bordercolor
  3. cols
  4. frameborder
  5. framespacing

4. Аня делает ссылку, которая должна открываться во фрейме с именем content. Однако Аня сделала ошибку, и написала: <a href="text.html" target="cotent">Ссылка</a>. Что произойдет в данном случае?

  1. Ссылка не откроется.
  2. Документ text.html откроется в новом окне.
  3. Документ text.html откроется в том же фрейме, что и ссылка.
  4. Все фреймы исчезнут, документ text.html откроется в обычном окне.
  5. Документ text.html откроется во фрейме с именем content.

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

  1. noresize тега <frameset>
  2. borderno тега <frame>
  3. frameborder тега <frameset>
  4. border тега <frameset>
  5. noresize тега <frame>

Задание

1. Создайте страницу с фреймами, как показано на рис. 13.5.

Рис. 13.5

2. Создайте страницу с фреймами, как показано на рис. 13.6.

Рис. 13.6


Теги

Ответы и решения

3. Теги

Вопросы для проверки

  1. 9 и 12.
  2. <a class="mylink" href="/images/2.html" title="Sample">Sample</a>
  3. Неправильное вложение тегов.
  4. У Лены.
  5. Применять правильное вложение тегов.
  6. <tag>


Структура HTML-кода

Ответы и решения

4. Структура HTML-кода

Вопросы для проверки

  1. Это комментарий к коду, поэтому он не выводится.
  2. <title>
  3. Код HTML не пройдет валидацию.
  4. Содержат служебные параметры веб-страницы.

Задание

Исправление ошибок. Добавленный текст выделен красным, удаленный текст — синим цветом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Опрос общественного мнения показал</title>
</head>
<body>
<h2>Опрос общественного мнения показал</h2>
<p>Диего Веласкес писал свои полотна в стиле: империализма, кубизма и империосионизма;</p>
<p>конфуцианство возникло в: Италии, Корее и Франции;</p>
<p>богами торговли и воровства в Древней Греции были: Марс, Меркурий и Дионис;</p>
<li><p>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</p>
<p>столица Золотой Орды - Монголия;</p>
<p>главные противники Александра Македонского: татаро-монголы, Дедал и Цезарь;</p>
<p>в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.</p>
</ul>
</body>
</html>


Типы тегов

Ответы и решения

5. Типы тегов

Вопросы для проверки

  1. Блочный.
  2. Для работы поисковых систем.
  3. <img>
  4. Неправильное вложение тегов.
  5. <pre>

Задание

1. Код примера.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Уильям Шекспир</title>
 </head>
 <body>
  <p>Юность, верность, красота,<br>
     Прелесть сердца, чистота<br>
     Здесь лежат, сомкнув уста.</p>
  <p>Феникс умер, и она<br>
     Отошла, ему верна,<br>
     В царство вечности и сна.</p>
  <p>Не бесплоден был, о нет,<br>
     Брак, бездетный столько лет, -<br>
     То невинности обет.</p>
  <p>Если верность иль - увы! -<br>
     Красоту найдете вы -<br>
     То обман, они мертвы.<br>
     Ты, кто верен и любим,<br>
     Помолись на благо им<br>
     Перед камнем гробовым.</p>
  <p>Уильям Шекспир, пер. В. Левика</p>
 </body>
</html>

2. Исправление ошибок.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Glossary<title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<a href="glosstop.html"><h1><a href="glosstop.html">Glossary of Terms</a></h1></a>
<span>
<h2><p>Algorithmic Oriented Language.</h2></p>
</span>
<span>
<h2><p>Creates new project</p></h2>
</span>
</body>
</html>

3. Использование тегов <del> и <ins>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Редактирование текста</title>
 </head>
 <body>
  <p>Горизонтальный отступ от картинки до текста управляется параметром hspace,
     он добавляет пустое пространство одновременно слева и справа от изображения.
     <ins>Поэтому</ins> рисунок от края окна будет отстоять на значение, которое указано
     этим атрибутом по горизонтали <del>выравнивается не строго по краю окна браузера,
     а отстоит от него на некотором расстоянии, которое равно значению hspace</del>.</p>
  <p>В качестве фона можно указывать любое подходящее для этого изображение в формате GIF,
     JPEG или PNG. Фон не должен отвлекать внимание от текста, при этом должен хорошо
     сочетаться<del>. Правильно подобранный фон не отвлекает внимание от текста, хорошо
     сочетается</del> с цветовой гаммой <ins>веб-</ins>страницы, при этом сам файл
     желательно должен быть небольшим по объему, чтобы быстро <del>загружаться</del>
     <ins>загружался по сети</ins>. </p>
 </body>
</html>


Значения параметров у тегов

Ответы и решения

6. Значения параметров у тегов

Вопросы для проверки

  1. 150
    Вначале вычисляется ширина таблицы А, она равна 60% от 500 пикселов и составляет 300 пикселов. Ширина таблицы Б равна 50% от этого значения, т. е. половина — 150 пикселов.
  2. #ffb300
    Рассуждаем следующим образом. Оранжевый цвет на цветовом круге располагается между красным (#ff0000) и желтым цветом (#ffff00). И в том и другом случае синяя компонента равна нулю, а этому условию удовлетворяет только один цвет.
  3. 34.5%
  4. #00ff99
  5. ../../

Задание

1. Исправление ошибок. Добавленный текст выделен красным, удаленный текст — синим цветом.

  1. <body bgcolor="#ffcc00" text="#ffffee">
  2. <img src="..././../../lol.gif">
  3. <a href="fc0fge.html">Оранжевый</a>
  4. <img src="pan.html" width="134" height="13,6%" alt="Пан">

2. Код веб-страницы с зеленым фоном и белыми буквами.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Структура файлов</title>
 </head>
 <body bgcolor="#008000" text="#ffffff">
  <h1>Структура файлов</h1>
  <p>С позиции разработчика, сайт условно можно подразделить на два уровня —
     логический и физический. На логическом уровне сайт представляет собой совокупность
     веб-страниц, объединенных между собой единым дизайном, стилем и ссылками. При этом на
     физическом уровне сайт является и набором файлов разного типа — в состав могут входить
     программы, документы, изображения и многое другое. Продумывание и создание удобной файловой
     структуры помогает не только разработчику оптимизировать его работу, но и посетителю лучше
     понять строение сайта.</p>
 </body>
</html>

3. Шоколадный #5A3D1C, мятный #00A33D, рубиновый #BF0000, розовый #EC65B5, стальной #BAC6CC, терракотовый #AA4D2D.


Текст

Ответы и решения

7. Текст

Вопросы для проверки

  1. Выравнивание текста по ширине.
  2. Помечает текст как важный.
  3. <sup>
  4. Наклон.

Задание

1. Написать код HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Уравнение</title>
  </head>
  <body>
  <p>Характеристическое уравнение поверхности второй степени</p>
  <p>&lambda;<sup><i>3</i></sup> - I<sub><i>1</i></sub>&lambda;<sup><i>2</i></sup> +
     I<sub><i>2</i></sub>&lambda; - I<sub><i>3</i></sub> = 0</p>
  </body>
  </html>

2. Исправить ошибки в коде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250 1">
<title>Галион</title>
</head>
<body>
<h11 align="justify">Галион</h1>
<p align="justify">
<strong>Галион</b></strong> - большое трехмачтовое судно особо прочной постройки, снабженное тяжелой артиллерией.</br>
Эти суда служили для перевозки товаров и драгоценных металлов из испанских и португальских колоний в Европу.</p>
<hr>
<blockquote>Флагманский корабль был мощным <i>галионом</i>, вооруженным сорока восьмью большими пушками и восьмью малыми.</blockquote>
</hr>
</p>
</body>
</html>

3. Оформление текста.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Тире в тексте</title>
  </head>
  <body>
  <p>Однако Питер Блад&nbsp;&#8212; человек, не знавший, что такое трусость,&nbsp;&#8212;
    вспоминал о своем католичестве только тогда, когда это ему требовалось.
    Способный не только носить оружие, но и мастерски владеть им, он в этот
    теплый июльский вечер ухаживал за цветущей геранью, покуривая трубку с таким
    безразличием, будто вокруг ничего не происходило, и даже больше того, бросал
    время от времени вслед этим охваченным военной лихорадкой энтузиастам слова
    из любимого им Горация: &laquo;Куда, куда стремитесь вы, безумцы?&raquo;.</p>
  <p>Рафаэль Сабатини &#8212; &laquo;Одиссея Капитана Блада&raquo;</p>
  </body>
  </html>


Ссылки

Ответы и решения

8. Ссылки

Вопросы для проверки

  1. На фиолетовую ссылку уже щелкали, она стала посещенной, а синие ссылки еще не открывали.
  2. <a href="/site/my/html/learn/links/yes/мои файлы.html">Мои файлы<a>
  3. ../animal/index.html
  4. Настя.
  5. Вместо относительных путей использованы абсолютные.

Задание

1. Создание трех страниц, ссылающихся друг на друга.

Файл 1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Страница 1</title>
 </head>
 <body>
  <h1>Страница 1</h1>
  <p><a href="2.html">Перейти</a></p>
 </body>
</html>

Файл 2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Страница 2</title>
 </head>
 <body>
  <h1>Страница 2</h1>
  <p><a href="3.html">Перейти</a></p>
 </body>
</html>

Файл 3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Страница 3</title>
 </head>
 <body>
  <h1>Страница 3 </h1>
  <p><a href="1.html">Перейти</a></p>
 </body>
</html>

2. Создание страницы с ссылками.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>ТБ по ОТ</title>
 </head>
 <body>
  <h1>Средствами индивидуальной защиты оператора являются:</h1>
  <p><a href="robe.html"><strong>белый х/б халат темного цвета</strong></a> с
     антистатической пропиткой;</p>
  <p><a href="fiter.html">экранный защитный фильтр</a> класса &quot;полная защита&quot;;</p>
  <p><a href="glass.html">специальные спектральные очки</a>.</p>
 </body>
</html>


Якоря

Ответы и решения

9. Якоря

Вопросы для проверки

  1. <a href="#17" monitor">Переход</a>
  2. Появится сообщение об ошибке, т.к. файла top не существует.
  3. Переходить к определенной закладке внутри страницы.

Задание

Исправление ошибок в коде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250 1">
<title>Эйлер Леонард</title>
</head>
<body>
<P>Эйлер, Леонард (Leonhard Euler, 1707-1783)
<A href="#E6_1" target="b">44</A>,
<A href="#E6_2" target="b">67</A>,
<A href="#E6_3" target="b">73</A>, <SPANA name="E6_1"></A>Леонард Эйлер обратился к своему другу <A name="K13"></A>Клеро с просьбой поискать в доме Ферма, не осталось ли где-нибудь клочка бумаги с жизненно важным фрагментом доказательства.</p>
</body>
</html>


Изображения

Ответы и решения

10. Изображения

Вопросы для проверки

  1. images/photo/girl0018.jpg
  2. Неправильно заданы размеры изображения.
  3. <img src="images/fig05.png" width="264" height="233">


Списки

Ответы и решения

11. Списки

Вопросы для проверки

  1. <li type="disk">Третий</li>
  2. Нумерованный, с латинскими буквами.
  3. start
  4. <dl>
  5. <dfn>

Задание

1. Создание вложенного списка.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Вложенные списки</title>
 </head>
 <body>
  <ul>
   <li>Пункт 1
    <ul>
     <li>Подпункт 1.1</li>
     <li>Подпункт 1.2  </li>
    </ul>
   </li>
   <li>Пункт 2
    <ul>
     <li>Подпункт 2.1</li>
     <li>Подпункт 2.2  </li>
    </ul>
   </li>
  </ul>
 </body>
</html>

2. Создание вложенного списка.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Вложенные списки</title>
 </head>
 <body>
  <h1>Ключевые слова</h1>
  <ol type="I">
   <li><b>A</b>
    <ul type="disc">
     <li><a href="abstract.html">abstract</a></li>
    </ul>
   </li>
   <li><b>B</b>
    <ul type="disc">
     <li><a href="boolean.html">boolean</a></li>
     <li><a href="break.html">break</a></li>
     <li><a href="byte.html">byte</a></li>
    </ul>
   </li>
   <li><b>C</b>
    <ul type="disc">
     <li><a href="case.html">case</a></li>
     <li><a href="catch.html">catch</a></li>
     <li><a href="char.html">char</a></li>
     <li><a href="class.html">class</a></li>
     <li><a href="const.html">const</a></li>
     <li><a href="continue.html">continue</a></li>
    </ul>
   </li>
  </ol>
 </body>
</html>


Таблицы

Ответы и решения

12. Таблицы

Вопросы для проверки

  1. <td align="right">
  2. <table><tr><td>
  3. <table>
    <caption align="bottom" >Заголовок</caption>
    ...
    </table>
  4. Объединяет ячейки по горизонтали.

Задание

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Таблица</title>
 </head>
 <body>
  <table width="600" align="center" cellpadding="4" cellspacing="0">
   <tr>
    <td width="150" valign="top">Левая колонка</td>
    <td valign="top">Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Добыча</title>
 </head>
 <body>
  <table width="100%" border="1" cellpadding="4">
   <caption>Добыча драгоценных камней</caption>
   <tr>
    <td>&nbsp;</td>
    <th>2010</th>
    <th>2012</th>
    <th>2014</th>
   </tr>
   <tr>
    <td>Сапфиры</td>
    <td rowspan="2">1483</td>
    <td>4532</td>
    <td>6743</td>
   </tr>
   <tr>
    <td>Рубины</td>
    <td>3835</td>
    <td>7482</td>
   </tr>
   <tr>
    <td>Алмазы</td>
    <td>683</td>
    <td colspan="2" align="center">238</td>
   </tr>
  </table>
 </body>
</html>

3. Исправление ошибок в коде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" border="2">
<tr>
<td valign="top">Ut aliquip ex ea commodo.</td>
<td valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
<tr>
<td valign="bottom" colspan="2">Lobortis nisl.</td>
<td valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
</table>
</body>
</html>


Фреймы

Ответы и решения

13. Фреймы

Вопросы для проверки

  1. bordercolor
  2. <frameset cols="*,200">
  3. cols
  4. Документ text.html откроется в новом окне.
  5. noresize тега <frame>

Задание

1. Создание страницы с фреймами.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Пример фреймов</title>
 </head>
 <frameset cols="90,*">
  <frame src="menu.html" name="leftFrame" scrolling="no" noresize>
  <frameset rows="80,*">
   <frame src="title.html" name="topFrame" scrolling="no" noresize>
   <frame src="content.html" name="mainFrame">
  </frameset>
 </frameset>
</html>

menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Навигация</title>
 </head>
 <body>
   <p>Навигация</p>
 </body>
</html>

content.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Содержание</title>
 </head>
 <body>
   <p>Содержание</p>
 </body>
</html>

title.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Заголовок</title>
 </head>
 <body>
   <h2>Заголовок сайта</h2>
 </body>
</html>

2. Создание страницы с фреймами.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Пример фреймов</title>
 </head>
 <frameset rows="55,*,40">
  <frame src="title.html" name="topFrame" scrolling="no" noresize>
   <frameset cols="110,*">
    <frame src="menu.html" name="leftFrame" scrolling="no" noresize>
    <frame src="content.html" name="mainFrame">
   </frameset>
   <frame src="footer.html" name="bottomFrame" scrolling="no" noresize>
 </frameset>
</html>

footer.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Подвал</title>
 </head>
 <body>
   <p>Подвал страницы</p>
 </body>
</html>

Содержимое файлов menu.html, title.html и content.html совпадает с первым примером.


Зачем нужна валидация?

Валидацией будем называть проверку документа на соответствие веб-стандартам и выявление существующих ошибок. Соответственно, валидным является такой веб-документ, который прошел подобную процедуру и не имеет замечаний по коду. Код веб-страницы должен подчиняться определенным правилам, которые называются спецификацией, ее разрабатывает W3 Консорциум (www.w3c.org) при поддержке разработчиков браузеров.

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

Плюсы валидации

Хотя HTML-код имеет достаточно простую иерархическую структуру, при разрастании объема документа в коде легко запутаться, следовательно, просто и совершить ошибку. Браузеры, несмотря на явно неверный код, в любом случае постараются отобразить веб-страницу. Но поскольку единого регламента не существует о том, как же должен быть показан «кривой» документ, каждый браузер пытается сделать это по-своему. А это в свою очередь приводит к тому, что один и тот же документ может выглядеть по-разному в популярных браузерах. Исправление явных промахов и систематизация кода приводит, как правило, к стабильному результату.

Тенденции

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

Не стоит забывать и об XML (eXtensible Markup Language, расширяемый язык разметки). Этот язык становится стандартом де-факто для хранения данных и обмена информацией между разными приложениями. Синтаксис XML более жесткий, чем HTML и не прощает малейших ошибок. В каком-то смысле XML похож на языки программирования, в которых программа не будет скомпилирована, пока код не отлажен. HTML является первой ступенькой к изучению XML, поэтому приучая себя писать код по всем правилам, будет легче перейти к следующему этапу развития HTML.

Мода на валидацию

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

Косвенные преимущества

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

Минусы валидации

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

Браузеры

Разработчики браузеров не всегда следуют спецификации и в некоторых случаях трактуют код не по заданным правилам, а по-своему. В конечном итоге это приводит к тому, что веб-страница, которая правильно (т.е. так, как и задумывали разработчики) отображается в одном браузере, выводится с ошибками в другом. Следование спецификации в подобных случаях, скорее всего, отпугнет пользователей некоторых браузеров. К примеру, Internet Explorer (IE) в настоящее время занимает лидирующее положение среди браузеров, но при этом поддерживает спецификацию HTML и CSS хуже, чем Firefox и Opera. Очевидно, что пользователи IE при посещении сайта выполненного по всем стандартам, но не учитывающего специфику этого браузера, увидят неприглядную картину.

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

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

Резюме

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


Проверка данных на валидность

2. Проверка данных на валидность

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

validator.w3.org

По адресу http://validator.w3.org располагается, пожалуй, самый распространенный инструмент для проверки отдельных страниц на валидность. Этот сайт предлагает три способа проверки: по адресу, локального файла и введенного в форму кода.

Проверка по адресу

Если ваш сайт уже опубликован в Интернете, то любую страницу можно проверить, вводя в текстовое поле ее адрес (рис. 2.1).

Рис. 2.1. Форма для ввода адреса документа

Так, вводя http://htmlbook.ru в форме «Validate by URI» (валидация по адресу) и нажав кнопку Check (проверить) получим сообщение о том, валидный документ или нет.

Замечание

Хотя в текстовом поле вводится адрес сайта, проверяется не сайт целиком, а только одна главная страница. Учтите, что, к примеру, адрес http://htmlbook.ru равнозначен вводу http://htmlbook.ru/index.php.

Валидатор проверяет HTML-код страницы и в случае отсутствия ошибок докладывает о валидности документа (рис. 2.2).

Рис. 2.2. Отчет о проверке и валидности веб-страницы

При обнаружении ошибок выводится уведомление о том, что страница не валидна и список ошибок с указанием строк, где встречаются ошибки (рис. 2.3).

Рис. 2.3. Отчет о проверке и вывод ошибок

Проверка локальных файлов

Документы, еще не выставленные в Интернете, можно проверить с помощью формы, озаглавленной «Validate by File Upload» (валидация загруженных файлов), как показано на рис. 2.4.

Рис. 2.4. Форма ввода пути к локальному файлу для его проверки

Вначале следует указать путь к HTML-файлу, после чего нажать кнопку Check. Файл будет загружен на сервер и проверен на ошибки.

Использование формы для ввода кода

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

Рис. 2.5. Форма для ввода HTML-кода

Расширение HTML Validator для браузера Firefox

Популярность браузера Firefox обусловлена наличием для него большого количества разнообразных расширений — программ, которые добавляют новые возможности в браузер. Расширения построены по открытой технологии и написать их может любой разработчик. Не оставлены без внимания и веб-разрабочики — для их удобства создано множество расширений, в том числе и для валидации документа прямо в браузере. В данном случае нас интересует HTML Validator. Эта программа построена по той же технологии, что и валидатор W3C, но не требует подключения к Интернету и работает прямо «на лету».

Где скачать
http://users.skynet.be/mgueury/mozilla/

Установка расширения

После скачивания файла установить расширение можно несколькими способами.

1. Через менеджер расширений

Запустите Firefox и откройте меню Инструменты > Расширения. Перетащите мышью загруженный файл (он имеет расширение xpi) в открывшееся окно. Далее расширение будет установлено автоматически.

2. С помощью открытия файла

Выберите в меню Firefox пункт Файл > Открыть файл... и укажите путь к файлу с расширением, дальнейшие действия браузер выполнит сам.

3. Копирование файла в папку extension

Откройте папку на диске, где установлен Firefox (к примеру c:\Program Files\Mozilla Firefox) и найдите в ней подпапку extension, в которую скопируйте расширение. После запуска браузера дальнейшая установка пройдет самостоятельно.

Все приведенные методы установки требуют перезагрузки браузера после установки расширения. Работа HTML Validator начинается сразу же после повторного запуска Firefox.

Если указанные способы по каким-либо причинам не помогли, вы можете обратиться на сайт поддержки браузера Mozilla Firefox и прочитать обо всех возможных методах установки расширений по адресу
http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Использование HTML Validator

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

Рис. 2.6. Виды картинок, отображаемых при проверке документа

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

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

Рис. 2.7. Контекстное меню с пунктом выбора исходного кода

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

Рис. 2.8. Результат работы расширения HTML Validator


Написание корректного кода

3. Написание корректного кода

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

По адресу http://www.w3.org/TR/html401/ ознакомиться с правилами HTML версии 4.01 может каждый, здесь же мы рассмотрим рядовые ошибки и научимся, как же их обходить.

Ошибки в коде обычно возникают по следующим причинам:

  • на странице не задан <!DOCTYPE>;
  • опечатка (неверно написан тег или его атрибут);
  • не указан обязательный параметр тега;
  • используется тег или его параметр, который не входит в спецификацию;
  • неверное вложение тегов.

Далее разберем эти ошибки подробнее.

Не указан <!DOCTYPE>

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

Опечатки

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

Не указан обязательный параметр тега

У некоторых тегов имеются параметры, которые обязательно должны присутствовать. Например, нельзя просто указать тег <style>, необходимо писать <style type="text/css">.

Параметр или значение не входит в спецификацию

В порыве завоевать рынок пользователей разработчики браузеров добавляли в них специальные теги, не входящие в спецификацию HTML, но расширяющие возможности веб-страниц. Со временем часть таких тегов была включена в спецификацию, но многие так и остались «за бортом». При этом поддержка браузером осталась, так что результат работы тега наблюдать можно, но валидацию документ не пройдет. Типичным примером подобного тега является <marquee> придуманный компанией Microsoft и понимаемый всеми современными браузерами. Вот только в спецификацию этот тег не включен.

Неверное вложение тегов

Ошибка с вложением одного контейнера внутрь другого может быть вызвана следующими причинами:

  • блочный элемент располагается внутри встроенного, когда должно быть наоборот — встроенные элементы допустимо помещать внутрь блочных;
  • пересечение тегов, например, как это показано в следующем примере: <strong><em>текст</strong></em>. Здесь закрывающий тег </strong> помещается в контейнер <em>, тогда как он должен следовать только после тега </em>;
  • не соблюдается порядок вложения тегов. В определенных элементах вроде списка и таблицы принципиальное значение имеет порядок следования тегов. Перестановка тегов местами может привести к неверному отображению объекта и появлению ошибок при валидации документа.

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

Закрывайте все теги

Хотя HTML и не требует присутствия некоторых закрывающих тегов, их наличие поможет сохранить строгость кода и четко определить порядок следования тегов.

Указывайте значения параметров тегов в кавычках

Валидатор во многих случаях пропустит значения параметров указанных без всяких кавычек, тем не менее, кавычки лучше писать всегда. Во-первых, подобный навык поможет для устранения возможных ошибок связанных с параметрами тегов. А во-вторых, поможет легче перейти на XHTML (Extensible Hypertext Markup Language, расширяемый язык разметки гипертекста), синтаксически более строгую версию HTML. В XHTML кавычки выступают обязательным элементом синтаксиса.

Коллекционируйте заготовки

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

Используйте блочные элементы

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

Переключайте <!DOCTYPE>

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


Исправление ошибок

4. Исправление ошибок

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

Посмотреть все возможные сообщения валидатора можно по адресу http://www.htmlpedia.org/wiki/HTML_Tidy, далее приведены основные ошибки с их описанием и решением. Зеленым цветом выделен корректный вариант, другой цвет используется для обозначения ошибки.

Notice: entity "..." doesn't end in ";"

Это замечание возникает при использовании спецсимволов вроде &lt; при отсутствии на конце точки с запятой.

&nbsp;

&nbsp

Решение

Добавьте в конце спецсимвола точку с запятой.

Notice: numeric character reference "..." doesn't end in ';'

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

&#8482;

&#8482

Решение

Добавьте в конце спецсимвола точку с запятой.

unescaped & or unknown entity "&..."

Символ амперсанда (&) часто применяется в адресах ссылок (аргумент href тега <a>), поскольку он разделяет несколько параметров. Однако амперсанд зарезервирован для спецсимволов вроде &nbsp; поэтому в ссылках необходимо указывать &amp; вместо &.

<a href="http://www.htmlbook.ru/content/?id=30&amp;text=1">Ссылка</a>

<a href="http://www.htmlbook.ru/content/?id=30&text=1">Ссылка</a>

Решение

Замение & на &amp;.

missing </...>

Отсутствует обязательный закрывающий тег.

<head><title>Заголовок</title></head>

<head><title>Заголовок</head>

Решение

Добавьте закрывающий тег.

missing </aaa> before <bbb>

Ошибка возникает при нарушении порядка тегов, когда блочный тег располагается внутри встроенного. В данном случае блочный тег <bbb> находится внутри встроенного тега <aaa>.

<p><span>Текст</span></p>

<span><p>Текст</p></span>

Решение

Поменяйте расположение тегов — перенесите встроенный тег внутрь блочного.

discarding unexpected <...>

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

<div><div>Текст</div></div>

<div>Текст</div></div>

<div><div>Текст</div>

Решение

В зависимости от ситуации добавьте или удалите открывающий или закрывающий тег.

Notice: nested emphasis ...

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

<p><b>Текст</b></p>

<p><b><b>Текст</b></b></p>

Решение

Удалите один из тегов.

replacing unexpected ... by </...>

Закрывающий тег не соответствует открывающему тегу.

<p><b>Текст</b></p>

<p><b>Текст</span></p>

Решение

Замените открывающий или закрывающий тег на парный.

... isn't allowed in <...> elements

Обнаружены теги, которые запрещено размещать внутри указанных элементов.

<head><title>Заголовок</title></head>

<head><body>Текст</body></head>

Решение

Переместите HTML-элемент в правильный раздел.

missing <...>

Нет обязательного тега в структуре элементов. Ошибка, к примеру, может возникнуть при формировании таблицы, когда пропущен тег <tr> и сразу же после <table> следует <td>.

<ol><li>Список</li></ol>

<ol>Список</ol>

Решение

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

Notice: inserting implicit <...>

Сообщение возникает из-за предыдущей ошибки на странице.

Решение

Исправьте предыдущие ошибки.

Insert missing <title> element

В коде не вставлен тег <title>.

<head><title>Заголовок</title></head>

<head></head>

Решение

Добавьте контейнер <title>.

Multiple <frameset> elements

Тег <frameset> используется в документе более одного раза без вложения. Допускается вставлять несколько элементов <frameset>, но вложенных один в другой.

<frameset ...><frame ...>
<frameset ...><frame ...></frameset>
</frameset>

<frameset ...><frame ...></frameset>
<frameset ...><frame ...></frameset>

Решение

Используйте вложенные теги <frameset>.

<...> is not approved by W3C

Указанный тег не входит в спецификацию HTML.

<span style="white-space: nowrap;">текст без переносов</span>

<nobr>текст без переносов</nobr>

Решение

Удалите тег или замените его подходящим эквивалентом.

Error: <...> is not recognized!

Тег не распознан и не входит в спецификацию HTML.

Правильно: <p>Текст</p>

Неверно: <p><adres>Текст</adres></p>

Решение

Удалите неизвестный тег.

Trimming Empty Tag

Контейнер пустой или содержит только пробел.

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

<p>&nbsp;</p>

<p></p>

Решение

Удалите тег или добавьте внутрь контейнера текст.

<a> is probably intended as </a>

В закрывающем теге <a> отсутствует слэш.

<a href="http://htmlbook.ru">Ссылка на сайт</a>

<a href="http://htmlbook.ru">Ссылка на сайт<a>

Решение

Добавьте слэш к закрывающему тегу.

... shouldn't be nested

Некоторые теги вроде <form> не могут содержать сами себя. Это сообщение также возникает из-за предыдущей ошибки.

<form action="gb.php" name="guestbook"></form>
<form action="gb2.php" name="guestbook2"></form>

<form action="gb.php" name="guestbook">
<form action="gb2.php" name="guestbook2"></form>
</form>

Решение

Удалите вложенные теги или исправьте предыдущую ошибку.

Text found after closing </body>-tag

Теги или текст добавляется после закрывающего тега </body>.

<html>
<head><title>Заголовок</title></head>
<body><p>Основной текст</p></body>
</html>

<html>
<head><title>Заголовок</title></head>
<body><p>Основной текст</p></body>
<b>Привет!</b>
</html>

Решение

Удалите текст после тега </body> или перенесите этот тег в конец текста.

Adjacent hyphens within comment

Комментарии в коде HTML определяются конструкцией вида <!-- комментарий -->. Если в тексте комментария подряд идет два и более дефиса, возникает ошибка.

<!-- Комментарий - заголовок -->

<!--- комментарий --->

<!-- Комментарий -- тело документа -->

Решение

Удалите лишние дефисы.

SYSTEM, PUBLIC, W3C, DTD, EN must be upper case

Элемент <!DOCTYPE> указан неверно, в частности следующие атрибуты необходимо писать в верхнем регистре: SYSTEM, PUBLIC, W3C, DTD, EN.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!doctype html public "-//w3c//dtd html 4.01 Transitional//en" "http://www.w3.org/TR/html4/loose.dtd">

Решение

Пишите <!DOCTYPE> корректно.

Warning: missing <!DOCTYPE> declaration

Не указан элемент <!DOCTYPE>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<p>Основной текст</p>
</body>
</html>

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Решение

Поместите элемент <!DOCTYPE> в самую первую строку кода документа.

Too much <...>-elements

Повторяется тег, который в коде должен быть только один. К таким тегам относится <html>, <head>, <title> и <body>.

<head>
<title>Заголовок</title>
</head>

<head>
<title>Заголовок</title>
<title>Название статьи</title>
</head>

Решение

Удалите повторяющийся тег.

<...> inserting "..." attribute

Не указан обязательный параметр для данного тега.

<style type="text/css">

<style>

Решение

Проверьте параметры тега и добавьте недостающие атрибуты.

... attribute ... lacks value

Параметр тега не содержит обязательное значение или оно написано с синтаксической ошибкой.

<a href="link.html">Ссылка</a>

<a href>Ссылка</a>

Решение

Проверьте параметры тега и добавьте недостающие значения.

... attribute "..." has invalid value "..."

Параметр содержит некорректное значение. Ошибка проявляется в тех случаях, когда в значении вместо текста пишется число и наоборот. Так, параметр id и name должен начинаться с символа ([A-Za-z]) и может содержать цифры ([0-9]), дефис (-), подчеркивание (_), двоеточие (:) и точку (.). Значение ширины и высоты в параметрах тегов не должно содержать ничего, кроме цифр ([0-9]).

<div id="layer1">Слой 1</div>

<img src="images/pic.gif" width="200" height="120">

<div id="2layer">Слой 2</div>

<img src="images/pic.gif" width="200px" height="120px">

Решение

Проверьте параметр тега и измените его значение.

<...> missing > for end of tag

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

<p>Пример текста</p>

<p>Для случая 0&lt;p рассмотрим следующий пример.</p>

<p Пример текста</p>

<p>Для случая 0<p рассмотрим следующий пример.</p>

Решение

Вставьте отсутствующую закрывающую скобку.
Замените < на &lt;.

<...> proprietary attribute "..."

Тег содержит параметр, специфичный только для браузера Nescape или Internet Explorer и не входящий в спецификацию. Примером такого параметра является атрибут height тега <table>.

Список всех атрибутов, входящих в спецификацию HTML приведен по адресу http://www.w3.org/TR/html4/index/attributes.html

<table style="height: 100%">

<table height="100%">

Решение

Список наиболее характерных параметров тегов приведен в табл. 1.

Табл. 1. Замена нестандартных параметров тегов
Тег | Устаревший параметр | Стандартный параметр
<body> | marginwidth=0, marginheight=0, leftmargin=0, topmargin=0 | style="margin: 0"
<table> | height=100% | style="height: 100%"
<table> | nowrap | style="white-space: nowrap" или <td nowrap>
<td> | background="abc.gif" | style="background-image:url(abc.gif)"

... proprietary attribute value "..."

Значение параметра не входит в спецификацию HTML и является специфичным для браузера Nescape или Internet Explorer. Например, значение align="absmiddle" тега <img> недопустимо.

<p><img src="hello.gif" alt="Привет" align="middle"></p>

<p><img src="hello.gif" alt="Привет" style="vertical-align: middle"></p>

<p><img src="hello.gif" alt="Привет" align="absmiddle"></p>

Решение

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

... dropping value "..." for repeated attribute "..."

Параметр применяется в теге больше одного раза.

<img src="image.jpg">

<img src="image.jpg" src="image.jpg">

Решение

Удалите повторяющийся параметр.

... unexpected or duplicate quote mark

Отсутствует открывающая или закрывающая кавычка в параметре тега.

<img src="image.jpg">

<img src=image.jpg">

Решение

Добавьте парную кавычку к значению параметра.

... attribute with missing trailing quote mark

Тег содержит параметр, в котором задано неверное количество кавычек.

<p id="my_id">

<p id="my_id"">

Решение

Добавьте или удалите одну из кавычек.

... id and name attribute value mismatch

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

<a name="elm" id="elm">

<a id="elm">

<a name="abcdef" id="db1">

Решение

Удалите один из параметров или сделайте значения атрибутов name и id одинаковыми.

Notice: replacing <...> by <...>

Ошибка возникает в следующих случаях:

  • неверный порядок тегов;
  • добавлен лишний закрывающий тег;
  • имеется открывающий тег без наличия обязательного закрывающего.

<p>Текст</p><br>

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

<p>abc<br><table>...</table></p>

Решение

Измените порядок тегов или удалите один из открывающих или закрывающих тегов.

... anchor "..." already defined

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

<form name="my_form1" action="test1.php"></form>
<form name="my_form2" action="test2.php"></form>

<form name="my_form" action="test1.php"></form>
<form name="my_form" action="test2.php"></form>

Решение

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

<...> is probably intended as </...>

Тег повторяется дважды в коде HTML, тогда как подобный тег содержать сам себя.

<em>Привет, мир!</em>

<em>Привет<em>, мир!</em></em>

Решение

Удалите один из тегов.

<...> lacks "..." attribute

Требуется обязательный параметр тега, который, тем не менее, отсутствует.

<form action="my_action.php">

<form>

Решение

Добавьте недостающий атрибут к тегу.


Вопросы для проверки

5. Вопросы для проверки

1. Какая ошибка содержится в следующей строке кода?

<a HREF="journ.html"><font color=#ffffff><b>Неофициальный сайт журфака</b></a>
  1. У тега <a> нет обязательного параметра alt.
  2. Тег <b> нельзя располагать внутри ссылок.
  3. Параметр href набран большими буквами.
  4. Нет закрывающего тега <font>.
  5. Значение параметра color не в кавычках.

2. Какая ошибка содержится в следующем коде?

<tr>
 <td height="39"><li></td>
 <td>
  <a class="tk12" href="plast.html" title="Пластиковые окна и жалюзи">
   <strong>Пластиковые окна и жалюзи</strong>
  </a>
 <td>
</tr>
  1. Параметр title запрещен для тега <a>.
  2. Внутри контейнера <td> неверно расположен тег <li>.
  3. Неверно указана высота ячейки, вместо height="39" следует писать height="39px".
  4. Имена классов не должны содержать цифры, вместо class="tk12" надо указать class="tk".
  5. Параметр height запрещен для тега <td>.

3. В коде ниже валидатор W3C выдает следующую ошибку «Line 8, Column 27: there is no attribute "TARGET"». Как ее исправить (два варианта)?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>test</title>
 </head>
 <body>
  <form name="form1" target="_top" action="index.php">
   <p>...</p>
  </form>
 </body>
</html>
  1. Добавить параметр target к тегу <p>.
  2. Добавить параметр target к тегу <body>.
  3. Заменить <!DOCTYPE> на переходный.
  4. Изменить значение _top параметра target на _self.
  5. Убрать параметр target в теге <form>.

4. В коде ниже валидатор W3C выдает замечание «cannot generate system identifier for general entity "referer2"». Какая строка является корректным заменителем?

<form name="form1" method="post" action="/index.php?referer1=user&referer2=logo">
  1. <form name ="form1" method="get" action="/index.php?referer1=user&referer2=logo">
  2. <form name ="form1" method="post" action="/index.php?referer1=user?referer2=logo">
  3. <form name ="form1" method="post" action="/index.php?referer1=user & referer2=logo">
  4. <form name ="form1" method="post" action="/index.php?referer1=user&amp;referer2=logo">
  5. <form name ="form1" method="post" action="/index.php?referer2=logo&referer1=user">

5. Какой параметр в данной строке лишний при использовании переходного <!DOCTYPE> (два варианта)?

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0"
      topmargin="0" marginwidth="0" marginheight="0" link="#0033CC">
  1. bgcolor
  2. text
  3. leftmargin и topmargin
  4. marginwidth и marginheight
  5. link

6. Во фрагменте кода валидатор при строгом <!DOCTYPE> выдает три ошибки. Какие действия необходимы, чтобы их устранить (два варианта)?

<body><img src="images/tools.gif" width="77" height="65"></body>
  1. Добавить параметр alt к тегу <img>.
  2. Добавить параметр title к тегу <img>.
  3. Изменить width="77" height="65" на width="77px" height="65px".
  4. Добавить к тегу <body> параметр bgproperties.
  5. Поместить тег <img> внутрь контейнера <p>.

7. Какое расположение тегов является правильным?

  1. <h1><p>Текст</p></h1>
  2. <a><p>Текст</p></a>
  3. <p><h1>Текст</p></h1>
  4. <p><p>Текст</p></p>
  5. <h1><a>Текст</a></h1>

8. Какой порядок вложения тегов неверный?

  1. <ol>, <li>
  2. <tr>, <td>
  3. <ul>, <li>, <ul>, <li>
  4. <table>, <td>
  5. <dl>, <dt>, <dd>

9. В каких строках содержится ошибка?

  1. <img src="1.gif" alt="картинка" height="100" width="100">
  2. <img title="картинка" height="100" width="100" src="1.gif">
  3. <img width="100" src="1.gif" alt="картинка" title="текст">
  4. <img alt="картинка" href="1.gif" width="100" height="100">
  5. <img alt="" src="1.gif">


6. Задание

Задание

1. Исправьте ошибки в каждой строке. <!DOCTYPE> переходный.

  1. <BODY text=#000000 bgColor=#ffffff background="bg.gif">
  2. <IMG height=2 src="1x1.gif" width=2>
  3. <HR align=right width=150 noShade height="2">
  4. <body leftmargin="0" topmargin="0">
  5. <script language="JavaScript">

2. Сделайте проверку на валидность следующего кода и устраните найденные ошибки.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <HTML>
  <HEAD>
  <TITLE>Шаблон дизайна</TITLE>
  <style  type=text/css>
    TD { FONT-SIZE: 12pt; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif;
         text-align: justify; }
    A { TEXT-DECORATION: none; }
    A:hover { TEXT-DECORATION: underline; }
    A:visited { color: #ee99FF; }
    H1 { FONT-WEIGHT: bold; FONT-SIZE: 32px; COLOR: #ffffff;
         font-family: Verdana, Arial, Helvetica, sans-serif;
         text-align: center; }
    H2 { FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: #4ADBFF; text-align: center; }
  </style>
  </HEAD>
  <BODY text=#ffffff vLink=#CC99FF aLink=#ff6666 link=#ffff66 bgColor=#003399>
  <DIV align=center>
  <TABLE cellSpacing=0 cellPadding=0 width=750 align=center border=0>
  <TR><TD heigh=60><h1>Название сайта</h1></TD>
  </TR><TR><TD height=1 bgcolor=white><img src="images/1x1.gif"></TD></TR>
  <TR><TD height=40><DIV align=center>| <A
    href="#">Ссылка 1</A> | <A href="#">Ссылка 2</A> | <A href="#">Ссылка 3</A> |
   <A href="#">Ссылка 4</A> | <A href="#">Ссылка 5</A> |
   <a href="#">Ссылка 6</a> |</DIV></TD></TR>
  <TR>
  <TD height=1 bgcolor=white><img src="images/1x1.gif"></TD>
  </TR>
  <TR>
  <TD>
  <h2>Заголовок</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
     nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
     enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
     nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor
     in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
     nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
    luptatum zril delenit au gue duis dolore te feugat nulla facilisi.</p>
  </TD></TR><TR><TD height=1 bgcolor=white><img src="images/1x1.gif"></TD>
  </TR><TR>
  <TD height=40><DIV align=center>| <A href="#">Ссылка 1</A> | <A href="#">Ссылка 2</A> | <A
    href="#">Ссылка 3</A> | <A href="#">Ссылка 4</A> | <A href="#">Ссылка 5</A> |
    <a href="#"> Ссылка 6</a> |</DIV>
  </TD></TR><TR>
  <TD height=1 bgcolor=white><img src="images/1x1.gif"></TD>
  </TR><TR><TD><DIV align=center><br>Copyright Влад Мержевич</TD></TR>
  </TABLE>
  </DIV>
</BODY></HTML>


Ответы и решения

6. Ответы и решения

Вопросы для проверки

  1. Нет закрывающего тега <font>.
  2. Внутри контейнера <td> неверно расположен тег <li>.
  3. Заменить <!DOCTYPE> на переходный.
    Убрать параметр target в теге <form>.
  4. <form name ="form1" method="post" action="/index.php?referer1=user&amp;referer2=logo">
  5. leftmargin и topmargin
    marginwidth и marginheight
  6. Добавить параметр alt к тегу <img>.
    Поместить тег <img> внутрь контейнера <p>.
  7. <h1><a>Текст</a></h1>
  8. <table>, <td>
  9. <img title="картинка" height="100" width="100" src="1.gif">
    <img alt="картинка" href="1.gif" width="100" height="100">

Задание

1. Исправить ошибки в каждой строке

  1. <BODY text="#000000" bgColor="#ffffff" background="bg.gif">
  2. <IMG height="2" src="1x1.gif" width="2" alt="">
  3. <HR align=right width=150 noShade height="2" size="2">
  4. <body leftmargin="0" topmargin="0">
  5. <script language="JavaScript" type="text/javascript">

2. Устранение найденных ошибок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Шаблон дизайна</TITLE>
<style type=text/css>
TD { FONT-SIZE: 12pt; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; text-align: justify; }
A { TEXT-DECORATION: none; }
A:hover { TEXT-DECORATION: underline; }
A:visited { color: #ee99FF; }
H1 { FONT-WEIGHT: bold; FONT-SIZE: 32px; COLOR: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; }
H2 { FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: #4ADBFF; text-align: center; }
</style>
</HEAD>
<BODY text="#ffffff" vLink="#CC99FF" aLink="#ff6666" link="#ffff66" bgColor="#003399">
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TR><TD heigh=60><h1>Название сайта</h1></TD>
</TR><TR><TD height=1 bgcolor=white><img src="images/1x1.gif" alt=""></TD></TR>
<TR><TD height=40><DIV align=center>| <A
href="#">Ссылка 1</A> | <A href="#">Ссылка 2</A> | <A href="#">Ссылка 3</A> | <A href="#">Ссылка 4</A> | <A href="#">Ссылка 5</A> | <a href="#">Ссылка 6</a> |</DIV></TD></TR>
<TR>
<TD height=1 bgcolor=white><img src="images/1x1.gif" alt=""></TD>
</TR>
<TR>
<TD>
<h2>Заголовок</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zril delenit au gue duis dolore te feugat nulla facilisi. </p>
</TD></TR><TR><TD height=1 bgcolor=white><img src="images/1x1.gif" alt=""></TD>
</TR><TR>
<TD height=40><DIV align=center>| <A href="#">Ссылка 1</A> | <A href="#">Ссылка 2</A> | <A
href="#">Ссылка 3</A> | <A href="#">Ссылка 4</A> | <A href="#">Ссылка 5</A> |<a href="#"> Ссылка 6</a> |</DIV>
</TD></TR><TR>
<TD height=1 bgcolor=white><img src="images/1x1.gif" alt=""></TD>
</TR><TR><TD><DIV align=center><br>Copyright Влад Мержевич</TD></TR>
</TABLE>
</DIV>
</BODY></HTML>


Что такое XHTML

1. Что такое XHTML

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

Определенным ограничением HTML является и то, что он относится к формальным языкам, в том смысле, что теги и их иерархическая структура жестко описаны в спецификации. Поэтому популярность набирает XML, с помощью которого можно создавать собственные теги и формировать их структуру. Разница между HTML и XML состоит не только в тегах, но и правилах написания кода. Браузер при работе с HTML «закрывает глаза» на разные мелкие огрехи и недочеты в структуре или тому, что не корректно указан параметр. С XML такие фокусы не проходят, поэтому браузер выдаст ошибку о том, что документ неверно сформирован.

Чтобы научить разработчиков «правильному» мышлению, изменить их стиль написания кода, а также сократить разрыв между HTML и XML, и был разработан XHTML, как промежуточный этап между ними.

XHTML (EXtensible HyperText Markup Language, Расширенный язык разметки гипертекста) предназначен для замены HTML и считается его более строгой версией. Вообще,W3C определяет XHTML как последнюю версию HTML, которая постепенно его вытеснит. Так ли это будет обстоять на самом деле, покажет только время.

Если рассуждать о некотором идеальном коде веб-страницы, то его можно сравнить с программой, которая не будет скомпилирована до тех пор, пока все ошибки не исправлены. Браузер выступает в роли компилятора и не отображает документ, если он не соответствует спецификации. XHTML, сохраняя все особенности HTML, вносит более строгие правила создания страниц, чтобы приблизиться к «идеальному» коду. Это позволяет делать сайты независимыми от устройства отображения и браузера. Иными словами, сайт будет корректно показываться во всех современных браузерах и платформах вроде компьютеров, смартфонов, наладониках и т.д.

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

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


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

2. Структура XHTML-документа

Любой XHTML-файл состоит из четырех разделов — <!DOCTYPE>, контейнера <html>, заголовка (<head>) и тела документа (<body>). Последние два элемента перекочевали из HTML и ничем не отличаются от своего родоначальника (листинг 2.1).

Листинг 2.1. Простейший XHTML-документ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
  </head>
  <body>
   <!-- А здесь надо размещать все, что хочется увидеть на странице. -->
  </body>
</html>

Элемент <!DOCTYPE> сообщает браузеру о типе текущего документа и как его интерпретировать. Различают три типа документа по спецификации XHTML 1.0:

  1. Strict (Строгий);
  2. Transitional (Переходный);
  3. Frameset (С фреймами).

XHTML 1.0 Strict

Используется в том случае, если в документе идет четкое разделение оформления и содержания. При этом код веб-страницы содержит только теги разметки, а сам вид элементов задается через стили (листинг 2.2).

Листинг 2.2. Документ со строгой разметкой

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Пример строгого документа</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 </head>
 <body>
  <p>...</p>
 </body>
</html>

XHTML 1.0 Transitional

Обычно применяется, когда правило разделения оформления и содержания выполняется не в полной мере. В этом случае допускается в коде документа использовать теги физического проектирования (например, тег <tt>) и лишь частично стили. В листинге 2.3 показан вид тега <!DOCTYPE> для подобных документов.

Листинг 2.3. «Переходный» документ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Пример мягкого документа</title>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 </head>
 <body>
   <p>...</p>
 </body>
</html>

XHTML 1.0 Frameset

Применяется, когда окно браузера делится на два или более фрейма (листинг 2.4).

Листинг 2.4. Документ с фреймами

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Фреймы</title>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 </head>
 <frameset cols="100,*">
    <frame src="menu.html" name="menu" />
    <frame src="content.html" name="content" />
 </frameset>
</html>

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

Контейнер HTML

Тег <html> выступает главным контейнером, в котором хранятся все остальные элементы, и в коде он должен идти сразу же после <!DOCTYPE>. В <html> требуется указывать обязательный параметр xmlns со значением http://www.w3.org/1999/xhtml. Он определяет пространство имен — так называется набор имен всех элементов и атрибутов, чтобы обеспечить их уникальность в пределах XHTML-документа.

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

В HTML кодировка документа задается с помощью тега <meta> расположенного внутри контейнера <head>. В XHTML же кодировка может задаваться двумя путями: аналогично HTML и с помощью команды <?xml version="1.0" encoding="UTF-8"?>, она должна располагаться в первой строке кода, перед <!DOCTYPE>. В данном случае UTF-8 обозначает кодировку текущего документа. В листинге 2.5 показано, как устанавливать кодировку подобным способом.

Листинг 2.5. Кодировка документа

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Кодировка</title>
  </head>
  <body>
    <p>Текст на русском языке в стандартной кодировке Windows.</p>
  </body>
</html>

В данном примере кодировка установлена как windows-1251.

Замечание

В браузере Internet Explorer до 6 версии включительно команда <!DOCTYPE> должна обязательно стоять в первой строке кода, иначе браузер переходит в режим несовместимости (Quirk mode) и веб-страница может отображаться весьма причудливым образом. Поэтому для универсальности кодировку лучше указывать с помощью метатегов, как и в HTML.


Синтаксис XHTML

3. Синтаксис XHTML

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

Правила XHTML следующие.

  1. Все теги и параметры должны быть набраны в нижнем регистре (строчными символами).
  2. Значения любых параметров необходимо заключать в кавычки.
  3. Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
  4. Должна соблюдаться правильная вложенность тегов.
  5. Нельзя использовать сокращенные атрибуты тегов.
  6. Вместо параметра name следует указывать id.
  7. Следует определять DTD (document type definition, описание типа документа) с помощью элемента <!DOCTYPE>.

Теги должны быть набраны в нижнем регистре

Это правило возникло из-за того, что XHTML чувствителен к регистру символов, поэтому для него теги <HR> и <hr> различаются. Чтобы не возникало путаницы, синтаксис принудительно заставляет указывать все теги, а также их параметры в нижнем регистре. В листинге 3.1 приводится неверное использование тегов.

Листинг 3.1. Ошибочное написание тегов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>XHTML</title>
 </head>
 <BODY>
   <P>Lorem ipsum dolor sit amet...</P>
 </BODY>
</html>

В данном примере теги <body> и <p> набраны прописными символами, что является ошибкой. В листинге 3.2 показан корректный код.

Листинг 3.2. Правильное написание тегов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>XHTML</title>
 </head>
 <body>
   <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

Значения любых параметров необходимо заключать в кавычки

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

Листинг 3.3. Использование кавычек

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>XHTML</title>
  </head>
  <body>
    <table width="200" border="1" cellpadding="5" cellspacing="0">
      <tr>
       <th scope="col">Чебурашка</th>
       <th scope="col">Шапокляк</th>
      </tr>
      <tr>
       <td>1</td>
       <td>5</td>
      </tr>
      <tr>
       <td>4</td>
       <td>13</td>
     </tr>
    </table>
  </body>
</html>

В данном примере все параметры тега <table>, а также <th> задаются в кавычках.

Требуется закрывать все теги

В HTML теги делятся на две категории — парные теги, называемые еще контейнерами и одинарные теги. Парные теги состоят из открывающего и закрывающего тега, причем в некоторых случаях закрывающий тег можно опустить. В XHTML закрывающий тег требуется всегда и везде. В листинге 3.4 показан код с ошибкой, из-за того, что отсутствует тег </p>.

Листинг 3.4. Нет закрывающего тега

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>XHTML</title>
 </head>
 <body>
  <p>и лезет, крадучись, в самолёт,
  <p>и бомбу в брюхо ему кладёт,
  <p>и прочь неслышно бежит, как кот;
  <p>а дальше - не наше дело.
 </body>
</html>

Обычно разработчики игнорируют закрывающие теги </li>, </p>, </td>, но в XHTML их отсутствие считается ошибкой. В листинге 3.5 показано корректное использование списков.

Листинг 3.5. Добавление списка

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>XHTML</title>
 </head>
 <body>
  <ul>
    <li>Восток</li>
    <li>Запад</li>
    <li>Юг</li>
    <li>Север</li>
  </ul>
 </body>
</html>

В данном примере каждому открывающему тегу соответствует его закрывающий тег.

Замечание

Элемент <!DOCTYPE> не является частью XHTML-документа, поэтому для него закрывающего тега не требуется.

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

Листинг 3.6. Добавление изображения

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>XHTML</title>
 </head>
 <body>
   <p><img src="test.gif" width="873" height="620" alt="тестовая картинка" /></p>
 </body>
</html>

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

В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе.

Табл 3.1. Сопоставление HTML и XHTML-тегов
HTML-тег | XHTML-тег
<br> | <br />
<hr> | <hr />
<input> | <input />
<img> | <img />
<meta> | <meta />

Должна соблюдаться правильная вложенность тегов

XHTML критично относится к ошибкам следующего типа: некорректная вложенность одного тега в другой и расположение тега в несоответствующем контейнере.

Правильная вложенность тегов

Каждый тег должен располагаться внутри другого тега, при этом недопустимо их «пересечение», как это показано в листинге 3.7.

Листинг 3.7. Ошибка с положением тегов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>XHTML</title>
 </head>
 <body>
  <p>Lorem <b><i>ipsum dolor sit</b></i> amet...</p>
 </body>
</html>

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

Замечание

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

Иерархия тегов

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

Необходимо знать систему подчиненности тегов и следовать ей при написании кода XHTML. В листинге 3.8 показана базовая структура документа.

Листинг 3.8. Структура документа

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>Новый документ</title>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

В данном примере вначале приводится тег <html>, внутри которого располагаются теги <head> и <body>. Внутри раздела <head> хранится заголовок документа (<title>) и кодировка страницы (<meta>).

Нельзя использовать сокращенные атрибуты тегов

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

Листинг 3.9. Ошибка при использовании параметров

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>XHTML</title>
 </head>
 <body>
  <form action="handler.php" method="post">
    <fieldset>
      <input type="text" value="Совет дня"  readonly />
    </fieldset>
  </form>
 </body>
</html>

«Пустое значение», как еще называется подобная ошибка, легко исправляется, если присвоить параметру аргумент, совпадающий с названием атрибута. В табл. 3.2 приведены некоторые параметры и как они записываются в HTML и XHTML.

Табл 3.2. Сопоставление параметров в HTML и XHTML
HTML | XHTML
checked | checked="checked"
compact | compact="compact"
disabled | disabled="disabled"
ismap | ismap="ismap"
multiple | multiple="multiple"
nohref | nohref="nohref"
noresize | noresize="noresize"
noshade | noshade="noshade"
nowrap | nowrap="nowrap"
readonly | readonly="readonly"
selected | selected="selected"

В листинге 3.10 показано корректное использование вышеприведенной формы.

Листинг 3.10. Правильное использование параметров

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>XHTML</title>
 </head>
 <body>
  <form action="handler.php" method="post">
   <fieldset>
    <input type="text" value="Совет дня" readonly="readonly" />
   </fieldset>
  </form>
 </body>
</html>

Вместо параметра name необходимо указывать атрибут id

Параметр name определяется в HTML для тегов <a>, <frame>, <iframe>, <img> и <map> и предназначен для обозначения элемента с целью последующего к нему обращения из скриптов. В XHTML параметр name частично вышел из употребления, а вместо него следует использовать id, как показано в листинге 3.11.

Листинг 3.11. Идентификатор рисунка

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>XHTML</title>
 </head>
 <body>
  <p><img src="bgtop.gif" id="pic1" alt="Картинка" /></p>
 </body>
</html>

Указанное правило не применяется к элементам форм, вроде <input type="radio" />, где без параметра name вообще не обойтись.

Следует определять DTD

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


Вопросы и задание

Вопросы для проверки

1. Что задает параметр xmlns тега <body>?

  1. Ссылку на спецификацию XHTML.
  2. Ссылку на определение типа документа.
  3. Пространство имен.
  4. Способ интерпретации документа как XML.
  5. Указатель на валидатор XHTML.

2. Какой <!DOCTYPE> для приведенного примера следует поставить, чтобы код стал валидным?

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Пример</title>
 </head>
 <body>
  Привет, меня зовут Вася. Мне 14 лет.
 </body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

3. Паша сохранил XHTML-документ в программе Блокнот, но при открытии в браузере Internet Explorer вместо русского текста он увидел «кракозябры». Что ему следует сделать?

  1. Сменить браузер.
  2. Вместо строгого <!DOCTYPE> поставить переходный.
  3. Изменить кодировку документа.
  4. Убрать параметр xmlns у тега <HTML>.
  5. Добавить строку <?xml version="1.0" encoding="Cyrillic"?>

4. Какой тег написан правильно?

  1. <BR>
  2. <br>
  3. <BR/>
  4. <Br/>
  5. <br />

Задание

Все задания должны быть выполнены на XHTML с соблюдением следующих условий:

  • применяется строгий <!DOCTYPE>;
  • код проходит валидацию на http://validator.w3.org, не содержит ошибок и замечаний;
  • результат должен максимально соответствовать приведенному изображению.

1. Создайте таблицу, как показано на рис. 4.1.

Рис. 4.1. Таблица

2. Создайте веб-страницу, как показано на рис. 4.2.

Рис. 4.2

3. Используя верхний и нижний индекс создайте страницу, как показано на рис. 4.3.

Рис. 4.3. Работа с индексом

4. Создайте список, как показано на рис. 4.4.

Рис. 4.4. Список


Ответы и решения

Ответы на вопросы

  1. Пространство имен.
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. Изменить кодировку документа.
  4. <br />

Решения

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>Таблица</title>
 </head>
 <body>
  <table width="80%" border="1" cellpadding="4" cellspacing="0">
   <tr>
    <th>Ячейка 1 </th>
    <th>Ячейка 2 </th>
   </tr>
   <tr>
    <td rowspan="2" valign="top">Ячейка 3</td>
    <td>Ячейка 4 </td>
   </tr>
   <tr>
    <td>Ячейка 5 </td>
   </tr>
  </table>
 </body>
</html>

2. Страница по граффити

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>Граффити</title>
 </head>
 <body>
  <h1>Граффити</h1>
  <p>Слово «граффити» происходит от итальянского «graffito», что значит «нацарапанный». Принято считать,
   что искусство граффити зародилось в Нью-Йорке. Идеальными «холстами» для юных граффитистов стали
   поезда Нью-Йоркского метро. В 1975 году перед зрителями предстало полотно размером с вагон,
   чуть позже &#8212; с целый состав. Самыми подходящими считались плоские вагоны старого образца и
   белые вагоны. Юные художники забирались в отстойники и наутро зрители уже могли оценить
   новый шедевр.</p>
 </body>
</html>

3. Верхний и нижний индекс

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>Многочлен</title>
 </head>
 <body>
  <p>Многочлен степени <em>n</em></p>
  <p><big><big><em>f(x) = a<small><sub>0</sub></small> + a<small><sub>1</sub></small> x + ... + a<small>
  <sub>n-1</sub> </small>x<small> <sup>n-1</sup></small> + a<small><sub>n</sub></small> x <small>
  <sup>n</sup></small></em></big></big></p>
  </body>
 </html>

4. Создание списка

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>Список</title>
 </head>
 <body>
  <hr />
  <ul>
   <li>Lorem ipsum dolor</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Duis te feugifacilisi</li>
  </ul>
  <hr />
 </body>
</html>