Софт-Портал

как открыть Html документ

Рейтинг: 4.3/5.0 (394 проголосовавших)

Категория: Windows

Описание

Наш первый HTML-документ

Наш первый HTML-документ Как устроен HTML-документ

HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:

Если хотите, можно посмотреть этот пример прямо сейчас.

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

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тэг").

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".

Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.

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

Обязательные метки <html>. </html>

Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

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

Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator. например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

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

Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.

Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:

Подытожим все, что мы знаем, с помощью примера 2 :

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

как открыть html документ:

  • скачать
  • скачать
  • Другие статьи, обзоры программ, новости

    Создание HTML-страниц

    ЦЕЛЬ:Создать с помощью помощью редактора Word файлы учебных HTML-страниц.
    РЕЗУЛЬТАТ:Продемонстрировать преподавателю в тестовом режиме с помощью браузера HTML-документы.

    Создавать HTML-документы, являющиеся основой ваших страниц можно в любом текстовом процессоре (даже в Notepad), но использование специальных редакторов существенно облегчает и убыстряет процесс. HTML-редакторы делятся на две группы: WYSIWYG (What You See Is What You Get - что видишь, то и получаешь) и специализированные текстовые редакторы, работающие напрямую с HTML-кодом. WYSIWYG-редакторы позволяют редактировать страничку, не вдаваясь в детали HTML-кода. При использовании такого редактора вы видите и изменяете страничку, не зная, что при этом вставляется в ее - HTML-код. К этому типу редакторов можно отнести известный вам Word (если сохранять файлы в формате HTML), Netscape Composer и FrontPage. Такой подход, кажется проще - в принципе можно делать странички вообще не зная язык, однако он таит в себе много опасностей:
    • Многие редакторы, например, MS FrontPage, генерируют страницы, которые правильно выглядят только в одном из браузеров.
    • В код вставляется много лишнего, а часто и вредного.
    • Самое главное - как бы хорош не был такой редактор, он не позволит вам сделать некоторые вещи, которые можно сделать, работая напрямую с HTML-кодом.
    Специальные текстовые редакторы требуют знания HTML, но существенно облегчают написание кода, при этом вы получаете полный контроль над процессом создания страницы. Чаще всего используют оба типа редакторов, начиная разработку в WYSIWYG, а потом завершают "отделку" в текстовом.

    Создание файлов ваших страниц

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

    Рекомендации к содержанию страниц


    • Документы создаются в текстовом редакторе WORD.
    • Две страницы содержат информацию о ваших отчетах по выполненным первой и второй лабораторным работам. Они должны быть преобразованы из формата документа Word в формат HTML-документа путем выполнения команды Файл/Сохранить в формате HTML. . Если у вас сохранились ранее созданные файлы HTML-страниц, то можно воспользоваться ими.
    • При преобразовании документов WORD в формат HTML все ваши файлы должны сохраняться в одной общей папке. При этом там же будет сохранена и вся графика вашей страницы.
    • Все страницы должны иметь единое стилевое оформление (тип и цвет шрифта, единый фон и т.д.).
    • Для визуального структурирования документов (взаимного расположения текста и рисунков, текста в колонках) рекомендуется использовать таблицы с видимыми и невидимыми границами, линии.
    • Ваши страницы для облегчения навигации должны содержать взаимные гиперссылки одна на другую и на созданные на первом шаге страницы (например, возврат). На странице подготовьте место для гиперссылок на имеющиеся и будущие страницы в сети Internet ваших коллег и друзей. В момент создания страницы это могут быть просто ссылки на произвольный объект, даже на любой файл вашего компьютера. В процессе размещения страниц в сети (по мере готовности реальных документов) эти ссылки заменяются на реальные. Можете организовать ссылки на имеющиеся у вас файлы любимых музыкальных произведений, которые, естественно, должны быть размещены на сервере, или просто ссылки на любымые музыкальные произведения, найденные в процессе выполнения второй работы.
    • Для регистрации в поисковых машинах надо знать, что два слова, встречающиеся в разных местах страницы, имеют разный вес - он максимален для названия страницы (TITLE ) и тегов заголовков H1-H3. Следовательно необходимо давать страницам осмысленные названия и выделять заголовки соответствующими тэгами.
    • Для просмотра документов в процессе их создания и редактирования необходимо их открыть в окне браузера, так как в окне WORD они могут выглядеть иначе. В редакторе вносятся изменения в документ, далее, производится его сохранение, а в окне браузера информация обновляется, после нажатия соответствующей кнопки или выполнения аналогичной команды.

    Требования к именам файлов


    - Первый файл в вашей папке должен называться либо index.html либо index.htm (или соответственно default.html либо default.htm - в зависимости от выбора сервера, на котором будут расположены страницы). Если вы выполнили задания первого шага, то файл с таким именем у вас уже есть. На сервере Народ.Ру файл главной страницы имеет такое имя. При обращении к вашей страничке, именно этот файл первым видит посетитель, т.е. в URL-адресе можно не указывать имя этого файла. - ВЕЗДЕ ИСПОЛЬЗУЙТЕ ТОЛЬКО МАЛЕНЬКИЕ БУКВЫ. как в названиях файлов, так и в ссылках. Это же относится и к названиям папок, которые вы создадите. И последнее, НИКОГДА не используйте русские буквы (кириллицу) в названиях файлов. ТОЛЬКО ЛАТИНСКИЕ БУКВЫ. - Графика должна быть в формате либо GIF (*.gif) либо JPEG (*.jpg). И, пожалуйста, следите за тем, соответствуют ли названия файлов в гипперссылках или названия картинок в тексте вашей страницы реальным названиям файлов. То есть, <img src="http://gup.narod.ru/laba4/step2/image.gif"> не одно и тоже, что <img src="http://gup.narod.ru/laba4/step2/image.Gif">. Если имя картинки image.Gif, то второй вариант окажется верным, а первый - нет. Если вы используете графические объекты из MS Office, то при сохранении HTML-документов внимательно следите за именами файлов этих объектов. В этом случае могут появиться имена файлов на кириллице. Поэтому необходимо переименовать такой файл, следуя изложенным выше требованиям, а в HTML-коде ваших страниц изменить названия соответствующих ссылок, не забывая при этом сохранять документы.

    Вставка дополнительных тэгов


  • Создайте список КЛЮЧЕВЫХ слов, характеризующих вашу страницу и ОПИСАНИЕ сайта на русском и, желательно, английском языках. Именно на ключевые слова ориентируются поисковые машины при обработке запросов. Ваши ключевые слова должны быть уникальными, т.е. не общеупотребительными. Например, не следует писать слова "сайт", "интернет", "Россия" и тому подобное. И наоборот, например, слово "экскаватор" будет очень полезно. Для улучшения обработки ваших страниц поисковыми системами, следует воспользоваться тэгом <META>. Составлять мета описания - это большое искусство. Они должны соответствовать содержанию сайта и, при этом, состоять из слов и групп слов, которые чаще всего используют посетители поисковых машин (желательно, в том же числе, падеже и времени). Ниже приводится наименее трудоемкий из грамотных алгоритм составления подготовки этой информации. - Проанализируйте рейтинги Чаще Всего Используемых Слов. (Rambler. Aport ). Там вы найдете 100 самых популярных слов в поисковых запросах Рамблера и Апорта. - Отметьте слова, которые по тематике ближе всего к вашему сайту, и, используя буфер обмена, составьте нужный список (не более 20-30 слов). - Составляйте описание так, чтобы оно было правильно по смыслу и состояло из всех отмеченных слов и минимума других. - Сохраните эту информацию в отдельном файле, т.к. она еще будет использована при регистрации страницы на Шаге 5.
  • Откройте ваш первый HTML-файл в редакторе Блокнот.
  • В самом начале странички, после <HEAD> пишем: <HEAD>. <TITLE>придуманный вами заголовок</TITLE> < META NAME="KEYWORDS" CONTENT="Сюда (вместо этих слов) через запятую пишем ключевые слова (не более 20-30 слов). Лучше на русском и английском" > < META NAME="DESCRIPTION" CONTENT="Сюда (вместо этих слов) пишем описание своей странички. Лучше на русском и английском" >. </HEAD>

    При использовании для создания документов в редакторе MS Word первые два пункта могут быть созданы автоматически, если при открытом HTML-документе выполнить команду Файл/Свойства/Дополнительно. и заполнить поля Название и Ключевые слова.
  • Скопируйте введенную информацию в буфер обмена. Сохраните изменения в файле. Проведите аналогичные вставки, используя буфер обмена, в другие HTML-документы и сохраните их изменения.
  • Введенные вами слова не будут видны в окне браузера, их будут видеть только поисковые машины. Для примера можете просмотреть эту страничку в виде HTML.

    Тестирование страниц сайта

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

    Порядок выполнения
    1. Создайте две или более HTML-страницы путем пребразования документов Word в формат HTML, или воспользуйтесь созданными ранее, или сделайте новые. Придерживайтесь рекомендациям к содержанию страниц и требованиям к именам файлов.
    2. Страницы должны содержать:
      • текст,
      • графику,
      • гиперссылки на ранее созданные страницы вашего сайта для обеспечения навигации и на создаваемые страницы,
      • гиперссылки на страницы ваших коллег,
      • гиперссылки на интересные с вашей точки зрения страницы и ресурсы в Internet.
    3. В случае необходимости отредактируйте страницы. При этом используйте Word в режиме редактирования HTML-документов.
    4. Вставьте дополнительные тэги. Для этого выполните команду Вид/Источник HTML и приведите в соответствие теги в заголовке вашей страницы изложенному выше. сохраните документ в исходном формате.
    5. На сервере РосБизнесКонсалтинг в разделе Информеры выберите понравившийся вам информер и скопируйте в буфер обмена соответствующие ему тэги. Вставьте содержимое буфера обмена в то место исходного кода вашей страницы, чтобы изображение информера не искажало задуманный дизайн, например, в конец документа. Сохраните документ.
    6. Продемонстрируйте преподавателю содержание страниц и навигацию по узлу и сети Internet с вашей страницы.
  • HTML справочник

    HTML
    Теги и атрибуты

    Теги и атрибуты:

    Существует два типа тегов HTML - контейнерные и одиночные, которые всегда заключаются в угловые скобки <. >.

    Контейнерные теги состоят из пары - открывающий и закрывающий тег <. >. </. >. Перед именем закрывающего тега необходимо ставить косую черту (слэш) "/". В закрывающем теге не нужно писать атрибуты присутствующие в открывающем теге!

    Одиночные теги менее распространены и состоят лишь из открывающего тега. Пример: <br>.

    Тег может иметь атрибуты и значения атрибутов. Пример: <тег имя_атрибута_1="значение" имя_атрибута_2="значение">. </тег>. Атрибуты добавляют в тег для расширения или модификации его действий.

    Теги и атрибуты

    Указывает программе просмотра страниц что это HTML документ. В нём содержатся обязательные теги <head>. <body> .

    Определяет место, где помещается различная информация не отображаемая в теле документа. В нём распологаются теги: <title>. <meta>. <link>. <style>. <base> .

    Определяет видимую часть документа. Атрибуты:

    <body bgcolor=". "> Цвет фона. Работает так же и в тегах <td> и <tr> .
    <body text=". "> Устанавливает цвет текста.
    <body link=". "> Устанавливает цвет гиперссылок.
    <body alink=". "> Устанавливает цвет гиперссылок при нажатии.
    <body vlink=". "> Устанавливает цвет гиперссылок, на которых вы уже побывали.
    <body background=". "> Фоновое изображение.
    <body top-margin=". "> Задаёт расстояние от границы браузера до основной таблицы. Примеры:

    top-margin — отступ сверху. От 0 до.
    right-margin — отступ справа. От 0 до.
    bottom-margin — отступ снизу. От 0 до.
    left-margin" — отступ слева. От 0 до.

    Помещает название документа в оглавление программы просмотра страниц.

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

    Метаинформация. Служит в основном для поисковых роботов. Атрибуты и значения:

    <meta name="description" content=". "> Описание документа.
    <meta name="keywords" content=". "> Ключевые слова.
    <meta name="robots" content=". "> Управление процессом индексации. Возможные варианты:

    "index" — возможность индексирования данного документа. Наоборот - "noindex"
    "follow" — возможность индексировать все документы, на которые есть ссылки в данном HTML-файле. Наоборот - "nofollow"
    "all" — одновременное условие 2-ух вышеперечисленных.
    "none" — одновременное условие 2-ух первоперечисленных. Наоборот.

    <meta http-equiv="content-type" content="text/html; charset=windows-1251"> Кодировка документа.
    <meta http-equiv="refresh" content="30"> Указывает, что документ следует перезагружать через 30 с.

    Указывает на таблицу стилей (CSS). Записывается в теге <head>. Есть 3 способа применения:

    Создаёт таблицу. Обязательные теги: <td>. <tr>. Пример:

    <table>
    <tr>
    <td> Пример
    </td>
    </tr>
    </table>

    Возможные атрибуты тега:

    Создаёт строку в таблице. Допустимые атрибуты:

    <tr align=". "> Задаёт горизонтальное выравнивание ячеек в таблице. Допустимые значения:

    "left" — выравнивание по левому краю.
    "center" — выравнивание по центру.
    "right" — выравнивание по правому краю.
    "justify" — выравнивание теста на всю строчку.

    <tr valign=". "> Задаёт вертикальное выравнивание ячеек в таблице. Допустимые значения:

    "top" — выравнивание по верхнему краю.
    "middle" — выравнивание по центру.
    "bottom" — выравнивание по нижнему краю.

    <tr bgcolor=". "> Задаёт цвет фона.

    Создаёт ячейку в таблице. Допустимые атрибуты: <align>. <valign>. <bgcolor>. <width>. <height>.

    <td colspan=". "> Указывает кол-во столбцев, которое объединено в одной ячейке. От 1 до.
    <td rowspan=". "> Указывает кол-во строк, которое объединено в одной ячейке. От 1 до.

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

    Создает новый параграф. Встречая этот тег, браузер продолжает текст с новой строки.
    Возможные атрибуты: <align> .

    Задаёт заголовок. <h1>. </h1> - самый большой заголовок. <h6>. </h6> - самый маленький заголовок.
    Возможные атрибуты: <align> .

    Переносит текст на новую строку.

    Запрещает перевод строки.

    Создает жирый текст. <b> пример </b> .

    Создаёт подчёркнутый текст. <u> пример </u> .

    Создаёт наклонный текст. <i> пример </i> .

    Создаёт текст - имитирующий стиль печатной машинки. <tt> пример </tt> .

    Создаёт текст - имитирующий стиль печатной машинки. <kbd> пример </kbd> .

    Наклонный текст (воспринимается посковыми роботами как выделение).

    Жирный текст (воспринимается посковыми роботами, как особо сильное выделение).

    Добавляет в HTML документ горизонтальную линию. Возможные атрибуты:

    Задаёт в тексте нижний индекс. Пример: Н <sub> 2 </sub> O [H2 O].

    Задаёт в тексте верхний индекс. Пример c 2 =a 2 +b 2.

    Используется для форматирования текста. Не действует без атрибутов. Возможные атрибуты:

    Создает гиперссылку на другие сайты. Возможные атрибуты:

    Добавляет изображение в HTML документ. Обязательный атрибут - <img src="URL">. Атрибуты:

    <img src="http://world-html.narod.ru/page/URL" align=". "> Выравнивает изображение к одной из сторон документа.
    <img src="http://world-html.narod.ru/page/URL" border=". "> Устанавливает толщину рамки вокруг изображения.
    <img src="http://world-html.narod.ru/page/URL" vspace=". "> Устанавливает поля сверху и снизу. От 0 до.
    <img src="http://world-html.narod.ru/page/URL" hspace=". "> Устанавливает поля слева и справа. От 0 до.
    <img src="http://world-html.narod.ru/page/URL" alt=". "> Всплывающая подсказка при наведении на картинку.

    Создаёт маркированный список. В нём содержатся элементы списка <li>. Допустимые атрибуты:

    <ul type=". "> Задаёт тип маркера. Допустимые значения:

    "disk" — маркер в виде закрашенного кружка.
    "circle" — маркер в виде кружка.
    "square" — маркер в виде закрашенного крадрата.

    Создаёт нумерованный список. В нём содержатся элементы списка <li>. Допустимые атрибуты:

    <ol type=". "> Задаёт тип маркера.
    <ol start=". "> Определяет с какого значения начинать список.

    Создает список определений. Содержат термины <dt> [одиночный] и определения <dd> [одиночный] .

    Отображает примеры кода.

    Открытие в браузере HTML файла, редактируемого в Sublime Text - Stack Overflow на русском

    Второй вариант

    Использование Build System — функции, позволяющей открывать редактируемые в Sublime Text файлы через другие программы.

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

    В моём браузере Pale Moon Portable на Windows 10 файлы открываются, когда в файле «билда» с расширением sublime-build прямые и обратные слэши скомбинированы следующим образом:

    $file — системная переменная . означающая открытый на данную минуту файл.

    Также в сравнении с ответом Виктора я добавил новый параметр selector. При значении "text.html.basic, text.xml" когда у нас включено автоматическое переключение между Build System: ( Tools > Build System > Automatic ), в браузере при вызове Build будут открываться только XML и HTML-файлы (а также HTM, XHTML). Значения параметра — начальная часть «областей видимости»: открываем пустой файл > View > Syntax > выбираем требуемый синтаксис > получаем scope в нашем пустом файле — как это сделать, подробно расписано здесь . — вставляем нашу область видимости напротив selector. В HTML, HTM, и XHTML область видимости — text.html.basic. в XML, соответственно, text.xml. Перечисление, как видно на примере, ведётся через запятую.

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

    ответ дан 23 апр в 9:17

    Первый вариант

    Для меня наиболее предпочтительный. SublimeServer — HTTP-сервер, реализованный как плагин для Sublime Text. С его использованием может отпасть нужда в Open Server, WAMP Server, Денвере, Mongoose или их альтернативах. Примеры преимуществ использования SublimeServer в сравнении с обычным открытием HTML-файла через Build System:

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

    Устанавливаем его как и все другие плагины через Package Control > Ctrl+Shift+P > SublimeServer: Start SublimeServer > в файле, где работаем, кликаем куда-нибудь правой кнопкой мыши, и в контекстном меню выбираем View in SublimeServer. Можно задать хоткей: Preferences > Key Bindings - User > в открывшийся файл Default(Ваша операционная система).sublime-keymap вставляем < "keys": ["alt+home"], "command": "sublimeserver_browser" >. где alt+home > выбранное вами сочетание горячих клавиш. В файле используется синтаксис JSON, следите за правильной расстановкой <фигурных>, [квадратных] скобок и запятых. Корректный пример файла sublime-keymap :

    ответ дан 28 июл в 8:09

    Третий вариант

    Файлы запускаются и из сайдбара, если установлен плагин Sidebar Enhacements . Кликаем правой кнопкой мыши по имени файла в сайдбаре > Open Run > файл откроется в сопоставленной ему программе, для HTML это обычно браузер по умолчанию.

    Если желаете открыть файл в другом браузере, требуется произвести настройки: кликаем правой кнопкой мыши по имени файла в сайдбаре > Open With > Edit Applications. > в открывшийся файл вставляем код и сохраняем его:

    • "caption": "Firefox Portable" — отображаемое имя Вашего браузера. Можно задать любое, какое удобно.
    • "id": "side-bar-files-open-with-firefoxportable" — необходимо написать side-bar-files-open-with-. а дальше задаёте имя по собственному усмотрению.
    • "E:\\Firefox\\FirefoxPortable.exe" — путь к исполняемому файлу браузера. Проще указывать абсолютный, нежели относительный. Слэши обратные и дублируются.

    "extensions":"html|htm" — в контекстном меню после клика правой кнопкой мыши по имени файла пункт Firefox Portable будет показываться только, если файл имеет расширение html или htm. расширения отделяются друг от друга через пайп . Параметр extensions может принимать и другие значения:

    "extensions": "" — пункт Firefox Portable будет показываться в контекстном меню, если мы в сайдбаре кликнем правой кнопкой мыши по файлу с любым расширением или папке.

    "extensions" :". *" — пункт Firefox Portable будет показываться в контекстном меню, когда мы в сайдбаре кликнем правой кнопкой мыши по файлу с любым расширением, но не папке.

    Кликаем в сайдбаре правой кнопкой мыши по файлу с расширением html или htm > Open With > Firefox Portable > файл откроется в портативной версии Firefox.

    Основные понятия

    ресурс для начинающих веб-разработчиков
    комплексные веб-услуги по созданию сайтов
    Справочный материал по основным языкам программирования и верстки сайтов. Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL. Использование веб-редактора Adobe Dreamweaver в разработке сайтов. Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики. Разработка веб сайтов под "ключ". Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

    Веб-инструмент

    Веб-мастерская

    Веб-услуги

    Веб-графика

    Веб-ресурсы

    Посмотрите в Google

    Подписка

    Хотите быть в курсе событий происходящих на сайте?

    Подпишитесь на получение самых последних новостей и статей, с уведомлением по E-mail .

    Опрос Основные понятия. Первый HTML-документ

    Основные понятия

    Для установления соединения с удаленным сервером используется сетевой адрес документа. Этот адрес зовется универсальным указателем ресурса — URL (Uniform Resource Locator). В ответ сервер посылает документы, чаще всего в формате HTML. Можно считать, что в нормальных условиях после запуска программы-браузера и ее подключения к серверу последовательно происходит шесть событий:

    1. Hа стороне пользователя браузер декодирует заданный URL и подключается к серверу.
    2. Браузер требует от сервера предоставить необходимый документ.
    3. Сервер преобразует переданную ему часть URL в имя файла и путь к нему.
    4. Сервер отсылает найденный файл документа на компьютер пользователя.
    5. Сервер разрывает установленное соединение.
    6. Браузер на компьютере пользователя отражает полученный документ. HTML (HyperText Markup Language)— язык разметки документа.

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

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

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

    Документы в формате HTML имеют расширение html и htm.

    Первый HTML-документ

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

    <html> — cообщает браузеру, что документ создан на HTML.

    <head> — отмечает вводную и заголовочную части HTML-документа.

    <body> — отмечает основной текст и информацию.

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

    HTML-документ начинается с тега <html> и заканчивается тегом </html>. Эти тэги сообщают браузеру, что текст между ними следует интерпретировать как HTML-текст. Поскольку документы HTML чисто текстовые, тэг HTML говорит о том, что файл написан на языке HTML (HyperTextMarkupLanguage - Язык гипертекстовой разметки).

    Создавая новый HTML-файл, в первую очередь необходимо ввести данную пару тэгов. Для этого наберите <html> в самом начале текста. Затем наберите его напарника </html> — в конце. Теперь весь текст, написанный между ними, будет принят браузерам за текст HTML. Вы заметили, что во втором тэге присутствует символ (/). Правый слэш ( / ) используется для обозначения закрывающихся тэгов. Большинство HTML-тэгов парные: один открывает ( <htm > ), другой закрывает ( </html> ). Их действие распространяется только на тот текст, который находится между ними. Открыв на браузере эту страницу, мы ничего не увидим. Пока мы не завершили работу над <head> и </head> .

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

    <title> Моя первая Web-страница </title> — между этими двумя тэгами необходимо ввести заголовок странички.

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> — эту строчку нужно вставить, если вы создаете свой документ в блокноте или другом простейшем текстовом редакторе.

    Теперь перейдем к тэгам <body> и </body>.

    Зона body /body — тело страницы, т.е. отображающаяся в браузере часть. Всё, что мы напишем и изобразим в этой зоне, увидит посетитель нашей страницы.

    И так приступаем к конкретной работе.

    Создаём в удобном для нас месте жесткого диска новую папку, пусть она будет называться htmtest. В этой папке создаем текстовой документ (блокнот).

    Для этого воспользуемся текстовым редактором блокнот. Для запуска блокнота, используем кнопку Пуск -> Все программы -> Стандартные -> Блокнот.

    Пишем в него следующее:

    <html>
    <head>
    <meta http - equiv= "Content - Type" content= "text/html; charset=utf - 8" >
    <title>Моя первая web страница</title>
    </head>

    <body>
    Привет всем! Это моя первая страничка.
    </body>
    </html>

    Теперь выбираем в меню Блокнот: Файл - > Сохранить как

    и сохраняем в папку htmtest наш файл как 1.html .

    Расширение файла html - показывает, что данный файл является интернет-страницей.

    Теперь заходим в папку htmtest, находим на диске наш файл 1.html и запускаем его, щелкнув два раза мышкой. У вас запуститься ваш браузер, например Internet Explorer и откроется вот такая СТРАНИЧКА .

    Понравилась статья или раздел сайта - порекомендуйте их друзьям.

    • Обсудить на форуме

    Урок 4: Создайте свой первый сайтrustutorial

    Урок 4: Создайте свой первый сайт

    После полученных в предыдущем уроке знаний вы уже через несколько минут создадите свой первый web-сайт.

    Как?

    В Уроке 1 мы узнали, что необходимо для создания web-сайта: браузер и Notepad (или аналогичная программа - текстовый редактор). Поскольку вы читаете этот текст, то ваш браузер уже открыт. Вам нужно открыть лишь дополнительное окно браузера (открыть браузер ещё раз), и вы сможете читать этот учебник и одновременно видеть ваш новый web-сайт.

    Также откройте Notepad (в Accessories в Programs - Start menu):

    Теперь мы готовы!

    Что я могу?

    Начнём с чего-нибудь попроще. Как насчёт страницы, на которой написано: "Ура! Это моя первая web-страница." Читайте дальше, и вы узнаете, как это легко сделать.

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

    Во-первых необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается тэгом <html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить тэг " <html> " в первой строке документа Notepad.

    Как вы, возможно, помните из предыдущего урока, <html> это открывающий тэг, который должен иметь и закрывающий тэг после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг " </html> " на пару строк ниже и вводите весь текст документа между <html> и </html> .

    Следующее, что необходимо, это "head" (голова или "шапка"), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head ( <head> и </head> ) находятся выше body ( <body> и </body> ).

    Ваш документ теперь должен выглядеть так:

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

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

    Ну ладно, но как мне добавить содержимое в мой web-сайт?

    Как вы уже видели ранее, в вашем HTML-документе есть две части: а head и body. В разделе head вы вносите информацию о странице, а body содержит информацию самой страницы .

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

    Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами "body".

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

    Буква p в <p> это сокращение от "paragraph" и означает именно это - параграф текста.

    Ваш HTML-документ должен теперь иметь такой вид:

    Готово! Вы создали свой первый настоящий web-сайт!

    Теперь нужно сохранить его на жёсткий диск, а затем открыть в вашем браузере:

    • В Notepad выберите "Save as. " в меню "File".
    • Выберите "All Files" в боксе "Save as type". Это очень важно - иначе вы сохраните файл как обычный текстовый документ, а не как HTML-документ.
    • Теперь сохраните ваш документ как "page1.htm" (расширение ".htm" указывает, что это HTML-документ. ".html" даст тот же результат. Я всегда использую ".htm", но вы можете выбрать любое из этих двух расширений). Где вы сохраните документ на жёстком диске - не имеет значения, главное запомнить это место, чтобы потом легко найти файлы.

    Теперь откроем браузер:

    • Выберите "Open" в меню "File" (CTRL+O).
    • Щёлкните "Browse" в появившемся диалоге.
    • Теперь найдите ваш HTML-документ и щёлкните "Open".

    Теперь вы должны увидеть страницу с текстом "Ура! Это моя первая страница." в вашем браузере. Поздравляем!

    Если вы хотите, чтобы весь мир увидел ваше творение, можете перейти в Урок 14 и вы узнаете, как выгрузить вашу страницу в Internet. Или наберитесь терпения и читайте дальше. Всё ещё только начинается.

    Учебники Кто сейчас на конференции: Статистика:

    Правила создания HTML-страниц, спецификация HTML и теги - учебник на

    Правила построения HTML-документов

    Всемирная паутина World Wide Web (WWW) соткана из Web-страниц, которые создаются с помощью так называемого языка разметки гипертекста HTML (HyperText Markup Language). Хотя многие говорят о программировании на этом языке, HTML вовсе не является языком программирования в традиционном понимании. HTML — язык разметки документа. При разработке HTML-документа выполняется разметка текстового документа точно так же, как это делает редактор при помощи красного карандаша. Эти пометки служат для указания формы представления информации, содержащейся в документе.

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

    Программа Netscape Navigator разработана компанией Netscape Communications Corporation. Как и у многих программных продуктов, существует ряд версий этой программы. Последней версией программы Netscape Communicator на момент написания книги являлась версия 4.7. Программа Internet Explorer разработана компанией Microsoft. Последняя версия этой программы — 5.0.

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

    встречались сообщения о войне между браузерами за пользователей. Сейчас эти два браузера сравнимы по популярности. Росту популярности браузера Microsoft способствует включение браузера в состав операционной системы Windows 98, однако, в конечном счете, выбор браузера остается за пользователем.

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

    Чтобы понять, что собой представляет язык разметки, вспомним старые добрые времена, когда многие работали с текстовыми редакторами типа WordStar. В них для выделения какой-либо фразы, например, полужирным шрифтом, в ее начале и в конце ставились специальные отметки (/ B и / b ):

    / B Этот текст будет выведен полужирным шрифтом/ b

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

    HTML работает точно так же. Если есть необходимость выделить текст на экране полужирным шрифтом, то это можно сделать аналогично:

    <B>Этот текст будет выведен полужирным шрифтом</B>

    Символы <B> включают полужирное начертание, а символы </B> выключают его. Такие символы, которые управляют отображением текста и при этом сами не отображаются на экране, в языке HTML принято называть тэгами (от английского слова tag — ярлык, признак).

    Все теги языка HTML выделяются символами-ограничителями (< и >), между которыми записывается идентификатор (имя) тега (в нашем примере это в), и, возможно, его параметры. Единственным исключением из этого правила являются теги комментария с более сложными ограничителями (<!-- и -->). Названия тэгов, а также их параметров можно записывать на любом регистре. Для единообразия в данной книге большинство тегов записывается прописными буквами.

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

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

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

    Ряд тегов в принципе не нуждается в завершающих тэгах. Примерами могут служить тег вставки изображений <IMG>, принудительного перевода строки <BR>, указания базового шрифта <BASEFONT> и др. Часто из самого предназначения тега можно догадаться, нуждается ли он в завершающем.

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

    Тэги могут записываться с параметрами или атрибутами (от англ. attribute). В этой книге будем чаще всего использовать термин параметр. Наборы допустимых параметров индивидуальны для каждого тэга. Общие правила записи параметров заключаются в следующем. После имени тега могут следовать параметры, которые отделяются друг от друга пробелами. Порядок следования параметров тега произволен. Многие параметры требуют указания их значений, однако некоторые параметры не имеют значений или могут записываться без них, принимая значения по умолчанию. Если параметр требует значения, то оно указывается после названия параметра через знак равенства. Значение параметра может записываться в кавычках, так и без них. Единственным случаем, в котором без кавычек не обойтись, является случай, когда в значении параметра имеются пробелы. В значениях параметров (в отличие от названий тегов и самих параметров) иногда важен регистр записи. Приведем пример записи тега с параметрами:

    <TABLE BORDER ALIGN="left">

    Здесь для тега <TABLE> задано два параметра. Первый параметр BORDER указан без значения. Второй параметр ALIGN имеет значение left.

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

    Все тэги, которые допустимо использовать в разделе <BODY> документа HTML, могут иметь параметры CLASS, ID, LANG, LANGUAGE, STYLE и TITLE. Использование этих параметров полезно, прежде всего, при стилевом оформлении документов, речь о котором пойдет во второй части книги.

    Параметры CLASS, ID, STYLE поддерживаются Internet Explorer, начиная с версии 3.0, и Netscape, начиная с версии 4.0. Эти параметры нужны при использовании стилей.

    Параметры LANG, LANGUAGE, TITLE — поддерживаются только Internet Explorer, начиная с версии 4.0. Эти параметры указывают, соответственно, используемый язык (например, для России: LANG=ru), язык записи скриптов (например, LANGUAGE=JavaScript), а также текст подсказки, выдаваемой при наведении указателя мыши на данный элемент (TITLE).

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

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

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

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

    Работу по созданию спецификации HTML взяла на себя организация, называемая World Wide Web Consortium (сокращенно — W3C). В ее задачу входило составление спецификации, отражающей современный уровень развития возможностей языка с учетом разнообразных предложений компаний-разработчиков браузеров. Так, в ноябре 1995 г. появилась спецификация HTML 2.0, призванная формализовать сложившуюся к концу 1994 г. практику использования HTML.

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

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

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

    Июль 1997 года ознаменовался выходом предлагаемой спецификации HTML 4.0, которая в декабре 1997 г. стала официальной рекомендацией. На сегодняшний день это последняя из принятых спецификаций.

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

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

    документа с помощью таблиц стилей, вместо того, чтобы задавать конкретные данные о форме представления вперемешку с содержанием документа. Для реализации этой идеи в спецификации HTML 4.0 ряд тэгов, используемых для непосредственного задания формы представления HTML-элементов, отменены. К отмененным по этой причине тэгам относятся <CENTER>, <FONT>, <BASEFONT>, <S>, <STRIKE>, <U>. Среди других отмененных тегов отметим <ISINDEX>, <APPLET>, <DIR>, <MENU>. Вместо отмененных тегов предлагаются альтернативные варианты реализации соответствующих возможностей, на что мы обращаем особое внимание в этой книге.

    Понятие отмененного (deprecate) тега состоит в следующем. Если в данной спецификации языка тег назван отмененным, то это означает, что браузеры должны пока продолжать поддержку таких тэгов, но их использование не рекомендуется. В следующих спецификациях эти тэги, возможно, будут переведены в разряд устаревших (obsolete). Устаревшие теги могут более не поддерживаться браузерами. В спецификации HTML 4.0 устаревшими названы всего три тэга: <ХМР>, <PLAINTEXT> и <LISTING>. Информацию о том, какие из тегов включены в спецификацию, можно получить из таблицы, приводимой в приложении П1.

    Официальные сведения о спецификации HTML всегда можно получить с Web-сайта Консорциума W3C по адресу http://www.w3.org/TR/. Спецификация 4.0 находится по адресу http://www.w3.org/TR/REC-htmI40-971218.

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

    Первым тэгом, с которого следует начинать описание документов HTML, является тег <HTML>. Он должен всегда начинать описание документа, а завершать описание документа должен тег </HTML>. Эти теги обозначают, что находящиеся между ними строки представляют единый HTML-документ. Сам по себе документ является обыкновенным текстовым ASCII-файлом. Без этих тегов браузер или другая программа просмотра, возможно, будет не в состоянии идентифицировать формат документа и правильно его интерпретировать.

    Чаще всего тег <HTML> используется без параметров. В предыдущих версиях использовался параметр VERSION, отмененный спецификацией HTML 4. 0. На смену этому параметру пришел тег <! DOCTYPE >.

    Большинство современных браузеров могут опознать документ и не содержащий тегов <HTML> и </HTML>, все же их употребление крайне желательно.

    Между парой тегов <HTML> и </HTML> располагается сам документ. Документ может состоять из двух разделов — раздела заголовка (начинающийся тэгом <HEAD>) и раздела содержательной части документа (начинающийся тэгом <BODY>). Для документов, описывающих фреймовые структуры, вместо раздела BODY используется раздел FRAMESET (с тэгом <FRAMESET>). Далее будут рассмотрены правила составления разделов документа HEAD и BODY. Построение документов, содержащих фреймы, рассматривается в главе 5.

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

    Раздел документа HEAD определяет его заголовок и не является обязательным тэгом, однако хорошо составленный заголовок может быть весьма полезен. Задачей заголовка является представление необходимой информации для программы, интерпретирующей документ. Тэги, находящиеся внутри раздела HEAD (кроме названия документа, описываемого с помощью тега <TITLE>), не отображаются на экране.

    Раздел заголовка открывается тэгом <HEAD>. Обычно этот тег следует сразу же за тэгом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные теги раздела заголовка.

    Тэг-контейнер <TITLE> является единственным обязательным тэгом заголовка и служит для того, чтобы дать документу название. Оно обычно показывается в заголовке окна браузера. Тег <TITLE> нельзя путать с названием файла документа; напротив, он представляет собой текстовую строку, совершенно независимую от имени и местоположения файла, что делает его весьма полезным. Имя же файла жестко определяется операционной системой компьютера, на котором он хранится. Также следует отличать название документа (с тэгом <TITLE>) от заголовков внутри документа, обычно размечаемых тэгами <Hx>.

    Обязательность названия документа, вообще говоря, носит характер настоятельной рекомендации. Документ без тега <TITLE> также будет отображаться браузерами. При этом различные браузеры в качестве заголовка окна будут выдавать различную информацию. Так ранние версии браузера Netscape выдавали строчку "No title". Другие браузеры либо не показывают ничего, либо отображают адрес загруженного файла, повторяя информацию панели Location браузера.

    Название документа записывается между тэгами <TITLE> и </TITLE> и представляет собой строку текста. В принципе, название может иметь неограниченную длину и содержать любые символы. кроме некоторых зарезервированных. На практике следует ограничиться одной строкой, имея в виду, что название появляется в заголовке окна браузера. Также следует помнить о том, что останется от названия документа при минимизации окна браузера. Можно рекомендовать ограничивать длину названия документа 60 символами. Увидеть, как отображается название в окне браузера, можно на любом рисунке в данной книге, где приводится пример отображения какого-либо документа.

    По умолчанию текст, содержащийся в названии документа, используется при создании закладки (bookmark) для документа. Поэтому, для большей информативности, избегайте безликих названий (Home Page, Index и т. д.). Подобные слова, используемые в качестве названия закладки, обычно совершенно бесполезны. Название документа должно кратко характеризовать его содержание. Заметим, что при отображении на экране документов с фреймовой структурой, когда в каждый из фреймов загружается отдельный документ, имеющий свое название, на экране будет видно только название главного документа. Тем не менее, задавать название отдельных документов, предназначенных для загрузки во фреймы, также настоятельно рекомендуется. Более подробно этот вопрос рассматривается в главе 5.

    Важность названия документа определяет следующий факт. Поскольку тег <TITLE> располагается практически в самом начале HTML-файла, то после начала загрузки документа первым делом отображается именно оно. Далее выполняется загрузка основного содержания документа, при этом браузер начинает форматирование документа в окне. Этот процесс, вообще говоря, в зависимости от содержания и структуры документа, а также скорости соединения, может затянуться. В течение достаточно продолжительного времени пользователь будет созерцать пустой экран, единственной информативной строчкой которого будет являться название документа. Весьма часто (при обрыве соединения или, если пользователь не желает дожидаться окончания загрузки документа) вся информация о документе на этом и заканчивается.

    Связь с другими документами

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

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

    К счастью, разработчики HTML предусмотрели эту проблему и добавили два тэга, <BASE> и <LINK>, которые включаются в заголовок для того, чтобы связь между документами не нарушалась.

    Тэг <BASE> служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер. Тег <BASE> работает аналогично команде path MS-DOS, что позволяет программе просмотра определить ссылку на искомый документ, даже если она находится в старшем по иерархии документе, расположенном на другом компьютере.

    Тэг <BASE> имеет один обязательный параметр HREF, после которого указывается полный URL-адрес документа. Ниже показан пример использования тега <BASE>.

    <TITLE>Указание базового адреса</TITLE>

    <IMG SRC=/gifs/news.gif" ALT="News">

    Тэг <BASE> указывает браузеру, где искать файл. В случае, если пользователь работает с локальной копией файла и его машина не отключена от сети, изображение пиктограммы News будет найдено и показано в окне браузера.

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

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

    Таблица 1.1. Параметры тега <LINK>

    Указывает тип и параметры присоединенной таблицы стилей

    Приведем примеры тега <LINK> с параметрами:

    Первая строка указывает на связь с файлом оглавления документа (toc.html — table of contents) с прямым отношением contents. Вторая строка описывает связь с URL-адресом автора документа (с обратным отношением made).

    Между документами может существовать множество различных отношений. Примеры других значений параметра REL: bookmark, copyright, glossary, help, home, index, toc, next, previous. Параметр REV может также принимать значения: author, editor, publisher, owner.

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

    Эта информация используется браузером для действий, которые не предусмотрены текущей спецификацией HTML. Тег <META> не потребуется вам для создания первых HTML-документов, но он вам наверняка понадобится, когда ваши страницы станут более сложными.

    <МЕТА HTTP-EQUIV="refresh" CONTENT="60" RL="www.my_host.ru/homepage.html">

    Браузеры Netscape Navigator и Internet Explorer поймут эту запись как инструкцию ожидать 60 секунд, а затем загрузить новый документ. Такая инструкция часто используется при изменении местоположения документов. Небольшой документ с приведенной строкой может быть оставлен на старом месторасположении документа для автоматической ссылки на его новое месторасположение.

    <МЕТА HTTP-EQUIV="refresh" CONTENT="60">

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

    Стало весьма популярным применение элемента <META> для решения некоторых типичных задач. В качестве примера можно привести указание ключевых слов, используемых поисковыми системами. Этот способ позволяет включать в индекс документа дополнительные слова, которые могут явно не входить в его содержание. Для этого в тэге <META> в качестве значения параметра NAME указывается имя некоторого свойства. А при помощи параметра CONTENT указывается значение данного свойства, например:

    <МЕТА NAME="author" CONTENT="Александр Сергеев">

    Спецификация HTML не определяет каких-либо конкретных имен свойств, записываемых в тэге <META>. Однако есть несколько часто применяемых свойств, например, description, keywords, author, robots и др.

    <МЕТА NAME="description" CONTENT="Описание возможностей языка HTML 4.0">

    <МЕТА NAME="keywords" CONTENT ="тэг, гипертекст, HTML, браузер">

    Приведенные теги <META> вполне могли бы быть указаны, например, для электронного варианта данной книги.

    Тэг <META> может иметь параметры, указанные в табл. 1.2.

    Таблица 1.2. Параметры тега <META>

    Определяет возвращаемое значение для свойства

    Еще одно важное предназначение тега <META> — это указание кодировки текста. Так, для текста на русском языке в кодировке Windows нужно записать следующую строчку:

    <МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">

    Другие элементы заголовка

    В разделе заголовка документа могут присутствовать еще два тега — <STYLE> и <SCRIPT>. Их назначение связано с использованием таблиц стилей в документе и записью скриптов. Эти вопросы подробно рассматриваются во второй части книги.

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

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

    Раздел документа BODY должен начинаться тэгом <BODY> и завершаться тэгом </BODY>, между которыми располагается все содержимое данного раздела. Строго говоря, наличие этих тегов не является обязательным, поскольку браузеры могут определить начало содержательной части документа по контексту. Однако их употребление рекомендуется.

    Тэг <BODY> имеет ряд параметров, ни один из которых не является обязательным. Перечень параметров приведен в табл. 1.3.

    Таблица 1.3. Перечень параметров тега <BODY>

    Определяет цвет уже просмотренной ссылки

    Использование параметров BACKGROUND и BGCOLOR, определяющих фон документа, подробно рассмотрено в главе 3.

    Параметр BGPROPERTIES, принимающий единственное значение FIXED, поддерживается только браузером Microsoft Internet Explorer.

    Параметры BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN и TOPMARGIN, задающие расстояния в пикселах между краями текста и соответствующими краями окна, а также параметр SCROLL, распознаются только браузером Microsoft Internet Explorer, начиная с версии 4.0.

    Параметры ALINK, LINK, TEXT и VLINK определяют цвета ссылок и текста документа.

    В языке HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах — красном, зеленом и синем — и обозначается RGB. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, что соответствует диапазону 0—255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Чтобы не запоминать совокупности цифр, вместо них можно пользоваться названиями цветов, которые приводятся в приложении П2. Ранние версии браузеров распознавали только названия 16 стандартных цветов, отмеченных в приложении звездочками. Современные версии браузеров распознают все 140 названий цветов.

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

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

    Некоторые HTML-тэги, которые могут появляться в разделе BODY, называют тэгами уровня блока (block level), в то время как другие последовательными (inline) тэгами или, называя по-другому, тэгами уровня текста (text level), хотя такое разделение тегов по уровням в известной степени условно.

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

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

    Логическое и физическое форматирование

    Для форматирования текста HTML-документов предусмотрена целая группа тэгов, которую можно условно разделить на теги логического и физического форматирования.

    Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тэг <CODE>), цитата (тэг <CITE>), аббревиатура (тэг <ABBR>) и т. д. (см. описания этих и других подобных тегов в следующем разделе). С помощью тегов <EM> и <STRONG> можно, например, отметить отдельные фрагменты как выделенные, или сильно выделенные. Заметим, что речь идет о структурной разметке, которая не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т. е. именем тега логического форматирования), но может быть легко переопределен.

    Тэги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора документа). Например, для отображения фрагмента курсивом можно использовать тег курсива <I>. Этот и другие, часто используемые теги физического форматирования описаны ниже в разделе "Тэги физического форматирования текста"этой главы.

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

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

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

    Тэги логического форматирования текста

    Тэг <ABBR> отмечает свой текст как аббревиатуру (ABBReviation). Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего времени не поддерживается ни одним браузером.

    Тэг <ACRONYM>. Так же, как и тег <ABBR>, используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы, т. е. произносимые слова, состоящие из аббревиатур. Тег <ACRONYM> возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе.

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

    Заметим, что тег <ACRONYM> распознается только браузером Microsoft Internet Explorer. Пример:

    <ACRONYM TITLE="Санкт-Петербургский государственный институт точной механики и оптики"> СПбГИТМО</ACRONYM> — один из ведущих технических вузов Санкт-Петербурга

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

    <CITE>Невское время</CITE> является одной из наиболее популярных городских газет Санкт-Петербурга

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

    Пример простейшего оператора языка программирования C:<BR>

    Есть еще одно различие в использовании тегов <CODE> и <PRE>. В коде программ часто бывает важно наличие нескольких идущих подряд пробелов. Их отображение будет сохранено только при использовании тега <PRE>.

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

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

    Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс (Time Zone). Например:

    Последней принятой спецификацией языка разметки HTML является версия <DEL DATETIME=1999-10-29T16:12:53+0.00>3.2</DEL> 4.0

    Текст, помеченный тэгом <DEL> обычно отображается перечеркнутым текстом. В спецификации HTML 4.0 этому тэгу отдается предпочтение перед тэгом физического форматирования <STRIKE> или <S>, обозначающих перечеркнутый текст. Однако тег <DEL> в настоящее время распознается только браузером Microsoft Internet Explorer.

    Тэг <DFN> отмечает свой текстовый фрагмент как определение (DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Пример:

    <DFN>Internet Explorer</DFN> — это популярный Web-браузер

    Тэг <DFN> поддерживается только браузером Microsoft Internet Explorer. Отображается по умолчанию курсивом.

    Тэг <INS> отмечает свой текст как вставку (INSertion). Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тег <INS> может использоваться как элемент уровня текста и как элемент уровня блока.

    Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего подробности внесенных дополнений.

    Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой пояс (Time Zone).

    Текст, помеченный тэгом <INS>, обычно отображается подчеркнутым текстом. Тег <INS> в настоящее время распознается только браузером Microsoft Internet Explorer.

    Тэг <EM> (EMphasis — выделение, подчеркивание) используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом. Пример:

    Пример выделения <EM>отдельных слов</EM> текста

    Применение данного тега предпочтительнее применения тега физического форматирования <I>.

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

    Чтобы запустить текстовый редактор, напечатайте: <KBD>notepad</KBD>

    Применение данного тега предпочтительнее применения тега физического форматирования <TT>.

    Тэг <Q> отмечает короткие цитаты в строке текста. В отличие от тега уровня блока <BLOCKQUOTE> при отображении не выполняется отделение размеченного текста пустыми строками. Обычно отображается курсивом. Тег <Q> (в отличие от <BLOCKQUOTE>) в настоящее время распознается только браузером Microsoft Internet Explorer.

    Тэг имеет параметр CITE, в качестве значения которого можно указать источник цитаты.

    Тэг <SAMP> отмечает текст как образец (SAMPle). Обычное использование этого тега — отметка текста, выдаваемого программами (sample output). Используется также для выделения нескольких символов моноширинным шрифтом.

    Применение данного тега предпочтительнее применения тега физического форматирования <TT>. Например:

    В результате работы программы будет напечатано: <SAMP>Hello, World!</SAMP>.

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

    Санкт-Петербург расположен в самой восточной оконечности <STRONG>Финского залива</STRONG> в устье реки <STRONG> Невы< /STRONG>

    Применение данного тега предпочтительнее применения тега физического форматирования <B>. Тегом <STRONG> обычно размечают более важные фрагменты текста, чем те, что размечены тэгом <EM>.

    Тэг <VAR> отмечает имена переменных программ. Обычно такой текст отображается курсивом. Пример:

    Задайте значение переменной <VAR>N</VAR>

    Отображение некоторых из примеров, приведенных при описании тегов логического форматирования текста, показано на рис. 1.1. На рисунке видно, как при наведении указателя мыши на текст, отмеченный тэгом <ACRONYM>, выдается подсказка.

    Рис. 1.1.Примеры форматирования текста

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

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

    Тэги физического форматирования текста

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

    Тэг <B> отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега <B> использовать тег логического форматирования <STRONG>. Например:

    Это <B>полужирный</B> шрифт.

    Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)

    Тэг <I> отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги <EM>, <DFN>, <VAR> или <CITE>, поскольку последние лучше отражают назначение выделяемого текста. Например:

    Тэг <TT> отображает текст моноширинным шрифтом. Для большинства случаев вместо этого тега лучше использовать теги <CODE>, <SAMP> или <KBD>. Пример:

    Это <TT>моноширинный</TT> шрифт.

    Тэг <U> отображает текст подчеркнутым. Отмененный тэг. Вместо него рекомендуется использовать теги <STRONG> или <CITE>. Например:

    Пример <U>подчеркивания</U> текста.

    Тэги <STRIKE> и <S>

    Тэги <STRIKE> и <S> отображают текст, перечеркнутый горизонтальной линией. Отмененный тэг. Вместо него следует использовать тег <DEL>. Например:

    Пример <STRIKE>зачеркнутого</STRIKE> текста.

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

    Тэг <BIG> выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать <STRONG> или теги заголовков, например, <H3>. Большинство браузеров поддерживают вложенные теги <BIG>, однако использовать такой подход не рекомендуется. Например:

    Шрифт <BIG>большего</BIG> размера.

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

    Шрифт <SMALL>меньшего</SMALL> размера.

    Тэг <SUB> сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:

    Пример шрифта для <SUB>нижнего</SUB> индекса.

    Тэг <SUP> сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:

    Пример шрифта для <SUP>верхнего</SUP> индекса.

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

    Тэг-контейнер <SPAN> является аналогом тега уровня блока <DIV>. Может использоваться в тех случаях, когда требуется отметить фрагмент текста для задания его свойств, и при этом не удается использовать никакой другой структурный тег форматирования.

    Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тэга: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги.

    Рис. 1.3. Использование вложенных тегов форматирования текста

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

    Это <B>полужирный</B> шрифт.

    А здесь текст <B><I>полужирный и курсивный</I></В>

    Тэг <FONT> указывает параметры шрифта. Он относится к тэгам физического форматирования уровня текста.

    Назначение параметров шрифта непосредственно в тексте документа нарушает основную идею разделения содержательной части документа и описания формы представления документа. Поэтому в спецификации HTML 4.0 данный тэг, а также тег <BASEFONT> отнесены к отмененным. Их дальнейшее применение не рекомендуется.

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

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

    Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных параметров: POINT-SIZE и WEIGHT, описание которых опускаем.

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

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

    Приведем пример использования параметра FACE:

    Текст, записанный шрифтом по умолчанию.

    <FONT FACE="Verdana", "Arial", "Helvetica">

    Пример задания названия шрифта.

    На рис. 1.4 показано отображение примера браузером Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana, при его отсутствии будет использован шрифт Arial и т. д.

    Рис. 1.4. Отображение примера браузером Netscape

    Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер "нормального" шрифта соответствует значению 3.

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

    Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). Последний способ часто используется в сочетании с заданием базового размера шрифта с помощью тега <BASEFONT>.

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

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

    Рис. 1.5. Окно настройки параметров шрифтов браузера Netscape

    Рис. 1.6. Назначение размеров шрифтов

    <TITLE>Назначение размеров шрифтов</TITLE>

    <FONT SIZE=1>Шрифт размера 1</FONT><BR>

    <FONT SIZE=-1>Шрифт размера 2</FONT><BR>

    <FONT SIZE=3>Шрифт размера 3</FONT><BR>

    <FONT SIZE=4>Шрифт размера 4</FONT><BR>

    <FONT SIZE=5>Шрифт размера 5</FONT><BR>

    <FONT SIZE=+3>Шрифт размера 6</FONT><BR>

    <FONT SIZE=7>Шрифт размера 7</FONT><BR>

    Этот параметр устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример документа с разноцветным текстом.

    <TITLE>Выбор цвета шрифта</TITLE>

    <FONT COLOR=green>Текст зеленого цвета</FONT><BR>

    <FONT COLOR=#FF0000>Текст красного цвета</FONT><BR>

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

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

    Заметим, что для тега <BASEFONT> не существует закрывающего тэга.

    В качестве параметров могут использоваться точно такие же параметры, что и для тега <FONT>, а именно: FACE, SIZE и COLOR. Назначение и правила записи параметров аналогичны.

    Браузер Netscape не допускает применение параметра FACE тега <BASEFONT>.

    Приведем пример использования тега <BASEFONT>.

    <TITLE>Назначение размеров шрифтов</TITLE>

    Текст, записанный шрифтом по умолчанию.

    <BASEFONT SIZE=2> <P>

    Шрифт размера 2.

    Шрифт размера 4.

    <TD>Текст внутри ячейки таблицы</TD>

    <P> Текст после таблицы

    В приведенном примере дважды переопределяется размер шрифта, используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается равным 2, далее — 4. Обратите внимание на отображение данного примера (рис. 1.7). Видно, что для таблиц назначение тега <BASEFONT> не действует. Это характерно для многих браузеров, хотя формально нарушает идею применения тэга.

    Рис. 1.7. Отображение примера С ТЭГОМ <BASEFONT> (браузером Netscape)

    Разделение на абзацы

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

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

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

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

    Браузеры обычно интерпретируют несколько стоящих подряд тегов абзаца <P> как один. То же самое относится и к тэгу перевода строки <BR>. Поэтому создать несколько пустых строк при помощи этих тегов не удается.

    Тэг <P> может задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра приведены в табл. 1.4. По умолчанию выполняется выравнивание по левому краю.

    Таблица 1.4. Значения параметра ALIGN

    Значение параметра ALIGN

    Выравнивание по ширине (по двум сторонам)

    Заметим, что выравнивание по ширине (ALIGN = JUSTIFY) долгое время не поддерживалось браузерами. Во многих описаниях языка HTML для значений параметра выравнивания указывается только три варианта (LEFT, CENTER и RIGHT). В настоящее время все популярные браузеры умеют выполнять выравнивание по ширине. Некоторые проблемы создания документов с выравниванием по ширине рассмотрены также в главе 8.

    Отсутствие выравнивания по ширине в настоящее время кажется удивительным. Этот режим применяется очень часто для печатных изданий. Достаточно взять в руки любую газету или внимательно присмотреться к абзацам данной книги — все они выровнены по ширине. Однако для HTML-документов до последнего времени выравнивание по ширине не допускалось. Всего лишь пару лет назад ни один браузер не имел такого режима. Так, читатели, до сих пор использующие браузер Netscape версии 3.x, не смогут увидеть ровные строчки в документе. Можно попытаться предугадать, какие же еще возможности появятся в будущем у браузеров, сравнив возможности мощных текстовых редакторов и современных браузеров. Примером не реализованных пока возможностей может являться автоматическая расстановка переносов и пр.

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

    Приведем пример использования принудительного перевода строки (рис. 1.8):

    <TITLE>Использование принудительного перевода строки</TITLE>

    Над омраченным Петроградом<BR>

    Дышал ноябрь осенним хладом.<BR>

    Плеская шумною волной<BR>

    В края своей ограды стройной,<BR>

    Нева металась, как больной<BR>

    В своей постеле беспокойной.

    <CITE>А.С.Пушкин. Медный всадник</CITE>

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

    В отличие от тега абзаца <P> при использовании тега <BR> не будет образована пустая строка.

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

    При использовании тега <BR> для разбивки текста, обтекающего изображения или таблицы, можно задавать параметр CLEAR, прекращающий обтекание текста. Об этом можно прочитать в главах 3 и 4.

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

    Для обеспечения неразрывности текста, располагаемого в ячейках таблиц, существует специальный параметр NOWRAP тега <TD>. Об этом можно узнать в главе 4.

    Размечая текст с помощью тега неразрывной строки <NOBR> можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру читателя место возможного перевода строки, что будет выполнено только при необходимости (так называемый "мягкий" перевод строки). Это можно осуществить, поставив в нужном месте текста тег <WBR> (Word BReak), который так же, как и тег <BR>, не нуждается в закрывающем тэге.

    Тэг <WBR> вообще не поддерживается браузером Netscape. Браузер Microsoft Internet Explorer распознает этот тег только в тексте, размеченном тэгами <NOBR>.

    Заголовки внутри HTML-документа

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

    Для разметки заголовков используются теги <HI>, <H2>, <H3>, <H4>, <H5> и <H6>. Эти теги требуют соответствующего закрывающего тэга. Заголовок с номером 1 является самым крупным (заголовок верхнего уровня), а с номером 6 — самым мелким. Теги заголовка являются элементами уровня блока, поэтому с помощью них нельзя размечать отдельные слова текста для увеличения их размера. При использовании тегов заголовков осуществляется вставка пустой строки до и после заголовка, поэтому тегов абзаца или перевода строки здесь не требуется.

    Тэги заголовков могут задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра совпадают с параметрами выравнивания тега абзаца <P> (см. табл. 1.4).

    Пример использования заголовков разного уровня с различным выравниванием (рис. 1.9):

    <H1>Заголовок размера 1</H1>

    <H2>Заголовок размера 2</H2>

    <H3 ALIGN=CENTER>Заголовок размера 3</H3>

    <H4 ALIGN=RIGHT> Заголовок размера 4</H4>

    <H5>Заголовок размера 5</H5>

    <H6>Заголовок размера 6</H6>

    Основной текст документа

    Рис. 1.9. Отображение заголовков различного размера

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

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

    Таблица 1.5. Параметры тега <HR>

    Параметр тега <HR>

    <HR ALIGN=CENTER WIDTH=50% NOSHADE>

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

    Браузер Netscape не позволяет использовать параметр COLOR тега <HR>.

    Использование предварительно отформатированного текста

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

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

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

    применением является вывод на экран больших блоков программного кода (Java, C++ и т. п.), не позволяющий браузеру переформатировать их.

    Текст внутри контейнера <PRE> может содержать элементы форматирования уровня текста, кроме следующих: <IMG>, <OBJECT>, <APPLET>, <BIG>, <SMALL>, <SUB>, <SUP>, <FONT>, <BASEFONT>. Недопустимо внутри преформатированного текста задавать элементы форматирования уровня блока, например, теги заголовков. Тег абзаца по логике вещей также не должен встречаться внутри преформатированного текста, однако если встречается, то будет реализовывать переход на новую строку (без образования пустой).

    Тэг <PRE> имеет необязательный параметр WIDTH, назначение которого — указывать браузеру максимальную длину строки преформатированного текста. В зависимости от этого значения браузер мог бы подобрать нужный шрифт и/или отступ для оптимального отображения преформатированного текста. В качестве значения по умолчанию предлагалось использовать 80. Другими рекомендованными значениями являются 40 и 132. Заметим, что читателям, имеющим значительный опыт работы со средствами вычислительной техники, эти числа говорят о многом. На деле же современные браузеры игнорируют значение параметра WIDTH.

    Существуют еще несколько тэгов, решающих близкую по смыслу задачу. К ним относятся теги <ХМР>, <PLAINTEXT> и <LISTING>. Все три упомянутых тега в спецификации HTML 4.0 отмечены как устаревшие. Это означает, что в будущих версиях браузеры прекратят их поддержку. Вместо этих тегов рекомендуется использовать тег <PRE>.

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

    <DIV STYLE="color: green">

    В этом примере фрагмент HTML-документа обрамляется тэгами <DIV> и </DIV> для задания некоторых его свойств. В данном случае все текстовые элементы выделенного фрагмента будут отображаться зеленым (green) цветом. Аналогом тега <DIV> уровня текста является элемент <SPAN>.

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

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

    ALIGN=CENTER тега <TABLE>.

    По существу тег <CENTER> является краткой формой следующей записи: <DIV ALIGN=CENTER>. Дальнейшее использование тега <CENTER> по причинам, отмеченным в предыдущем разделе, также нежелательно.

    Включение комментариев в документ

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

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

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

    Существует еще один тэг-контейнер для записи комментариев — <COMMENT>. Этот тег используется редко, поскольку поддерживается только браузером Microsoft Internet Explorer. Некоторые проблемы использования этого тега рассматриваются в главе 8.

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

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

    Пример отображения длинной цитаты приведен на рис. 1.10.

    Иногда полезно знать не только назначение тэга, но и принципы его реализации браузерами. Так, по существу единственное действие, которое выполняют браузеры, встретив тег <BLOCKQUOTE>, заключается в отделении текста пустыми строками и сдвиге его вправо. Эти сведения позволяют использовать данный элемент не только по прямому назначению, но и просто для тех случаев, когда требуется отобразить фрагмент текста с отступом. Конечно, это нарушает логику структурирования документа, однако на деле такой подход часто применяется. В частности, редактор HTML-документов Netscape Composer, входящий в состав пакета Netscape Communicator, имеет в панели инструментов кнопки "увеличить отступ" и "уменьшить отступ". Каждое нажатие кнопки увеличения отступа реализуется путем обрамления выделенного текста парой тегов <BLOCKQUOTE> и </BLOCKQUOTE>. Просматривая в дальнейшем исходный HTML-код созданного таким путем документа, можно долго вспоминать, что же вы там цитировали.

    Рис. 1.10. Так цитата выглядит в окне браузера Netscape

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

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

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

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

    В таких случаях можно вводить нужные символы в ваш HTML-документ при помощи специальных кодов. Эти коды состоят из символа амперсанда (&) и следующим за ним именем символа или его десятичным или шестнадцатеричным значением. Заканчиваться специальный символ должен знаком "точка с запятой".

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

    Таблица 1.6. Специальные символы HTML

    Запись специального символа

    Все символами могут быть также заданы своими кодами. Например, символ неразрывного пробела имеет код 160. Он может записываться в десятичном виде как &#160;.

    Ссылки на другие документы и файлы

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

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

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

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

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

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

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

    Приведем пример записи для текстового указателя ссылки:

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

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

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

    Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка. Например, если браузер загрузил страницу, находящуюся по адресу http://www.mysite.com/page. то относительный указатель /picture подразумевает адрес http://www.mysite.com/page/picture. т. е. подкаталог, расположенный на той же машине.

    Относительный указатель работает по-другому, если в HTML-документе используется тег <BASE>. Ниже в данной главе показывается, что в этом случае указатель дает адрес относительно URL-адреса, определенного в тэге <BASE>.

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

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

    Правила записи ссылок

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

    Тэг <A> имеет единственный параметр HREF, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным, например, http://www.server.com/home/index.htm. Этот тег является контейнером, поэтому необходимо поставить закрывающий тег </А>:

    Указатель ссылки может быть относительным или абсолютным. Для облегчения работы с относительными указателями ссылок введен тег <BASE>. Он располагается в начале документа в разделе HEAD и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тег документа, в котором используется относительная адресация. Если тег <BASE> отсутствует, то адресация строится относительно адреса текущего документа.

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

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

    <A NAME=chapter_5> </A>

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

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

    Теперь, если пользователь щелкнет кнопкой мыши на словах "Глава 5", браузер выведет соответствующую часть документа в окне просмотра.

    Ссылки на документы различных типов

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

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

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

    Ресурсы Интернета весьма разнообразны по форме и содержанию. Хотя HTML предполагает возможность создания своих собственных версий этих ресурсов с помощью механизма обработки данных форм, есть более простые пути к взаимодействию с системами UseNet, Telnet, FTP, e-mail и другими. Например, вы можете создать документ с использованием различных тегов форм, текстовых элементов и кнопкой для отправки электронного письма на ваш адрес. Однако будет намного проще для связи указать лишь свой адрес электронной почты. В этом случае упрощается обновление страницы, которое не будет связано с изменениями форм. Кроме того, многие браузеры имеют встроенную поддержку некоторых ресурсов, что дает возможность сократить время на установление связи с ними.

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

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

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

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

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

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

    <TITLE>Личная страница Александра Сергеева</TITLE>

    <H1 ALIGN=CENTER> Д обро пожаловать!</H1>

    О сновное содержание страницы

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

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

    Тэги, распознаваемые только браузером Netscape:

    <LAYER>, <ILAYER>, <MULTICOL>, <KEYGEN>, <SPACER>.

    Тэги, распознаваемые только браузером Microsoft Internet Explorer:

    <FIELDSET>, <LEGEND>, <MARQUEE>.

    Тэг, распознаваемый только браузером Mosaic: <SOUND>.

    Редко используемые тэги, дальнейшее употребление которых не рекомендуется:

    Тэги, актуальность которых крайне мала: <BDO>.