Перейти на главную   
  helloworld.ru - документация и книги по программированию  
helloworld.ru - документация и книги по программированию    
    главная     хостинг     создание сайтов    
Поиск по сайту:  
Смотрите также
Языки программирования
C#
MS Visual C++
Borland C++
C++ Builder
Visual Basic
Quick Basic
Turbo Pascal
Delphi
JavaScript
Java
PHP
Perl
Assembler
AutoLisp
Fortran
Python
1C

Интернет-технологии
HTML
VRML
HTTP
CGI
FTP
Proxy
DNS
протоколы TCP/IP
Apache

Web-дизайн
HTML
Дизайн
VRML
PhotoShop
Cookie
CGI
SSI
CSS
ASP
PHP
Perl

Программирование игр
DirectDraw
DirectSound
Direct3D
OpenGL
3D-графика
Графика под DOS

Алгоритмы
Численные методы
Обработка данных

Системное программирование
Драйверы

Базы данных
MySQL
SQL

Другое

Хостинг


Друзья
demaker.ru
Реклама

Лучший хостинг. Аренда серверов




helloworld.ru

Введение в язык HTML

Перед Вами учебник генерации документов в стандарте HTML. HTML - "hypertext markup language", язык описания гипертекстовых документов, используемый в WWW ( World Wide Web).

Принятые сокращения

WWW
World Wide Web - мировая паутина (кратко Web).
SGML
Standard Generalized Markup Language -- Стандарт описания различных гипертекстовых языков.
DTD
Document Type Definition -- это спецификация гипертекстового языка, написанная с использованием SGML.
HTML
HyperText Markup Language -- HTML это SGML DTD. На практике, HTML - это коллекция стилей ( указанных в терминах языка HTML), которые определяют различные компоненты WWW документов. HTML был изобретен Тимом Бернерсом-Ли ( Tim Berners-Lee) работавшим тогда в CERN'е. Он тепереь директор W3 Consortium ( консорциума W3).

Что мы не описываем

Предполагается, что Вы уже знаете:

  • по меньшей мере как использовать NCSA Mosaic или другой просмотрщик WWW страниц;
  • как работают Web серверы и просмотрщики;
  • как размещать HTML документы на WWW сервере, или использовать их на своем компьютере.

Созданеие HTML документов

HTML документы - это файлы в обычном ( также известный как ASCII) текстовом формате, который может создаваться любым текстовым редактором ( к примеру - NE, Лексикон, Emacs и др.). Пара просмотрщиков Web ( tkWWW for X Window System и CERN's Web для компьютеров NeXT) включают простейшие HTML редакторы, позволяющие работать в стиле WYSIWYG. Сечас имеется несколько WYSIWIG редакторов (например HotMetal for Sun Sparcstations, HTML Edit for Macintoshes). Вы можете попробовать один из них перед тем, как разбираться в деталях HTML.

Вы можете просматривать документы в процессе работы над ними используя, например, NCSA Mosaic. Откройте его, используя команду Open Local в меню File.

После редактирования HTML файла, сохраните изменения. Вернитесь в NCSA Mosaic и сделайте Reload ( перегрузите) документ. Изменения отражаются на экране дисплея.

Минимально возможный HTML документ

Перед Вами клише HTML документа :

    <TITLE>Простейший HTML пример</TITLE>
    <H1>Это заголовок первого уровня</H1>
    Добро пожаловать в мир HTML. 
    Это первый параграф.<P>
    А это второй.<P>
Нажмите здесь, если хотите увидеть форматированную версию приведенного примера.

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

  • <TITLE> tag ( термин, пометка, описание элемента - будем использовать слово tag) (и соответствующий ему </TITLE> tag), которые определяют заголовок документа.
  • <H1> tag заголовка (и соответствующий </H1>)
  • <P>tag - разделитель параграфов

HTML tag-и состоят из знака меньше (<), за ним следует имя tag-а и оканчивается знаком больше (>). Tag-и обычно парные, заключительный tag выглядит также, как и начальный за исключением slash'а (/), предшествующего тексту внутри скобок. Например : <H1> информирует просмотрщика о начале заголовка первого уровня </H1> говорит о том, что заголовок завершен.

Основным исключением из правила пар является <P> tag. Tag </P> не существует.

Замечение: HTML не различает больших и малых букв. <title> еквивалентно <TITLE> или <TiTlE>.

Не все tag-и поддерживаются всеми просмотрщиками WWW. Если просмотрщик не поддерживает tag, то он его игнорирует.

Основные элементы языка

Название документа

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

В версиях NCSA Mosaic для X Window System and Microsoft Windows, поле названия документа находится в верху экрана, прямо под строкой меню. В NCSA Mosaic for Macintosh, текст определенный, как <TITLE> появляется в заголовоке окна.

Заголовки

HTML имееет 6 уровней заголовков, пронумерованных от 1 до 6, где первый выделен наиболее сильно. Заголовки показываются фонтами типа Large или Bold чаще, чем применяемыми для обычногог текста. Первый заголовок каждого документа нужно обозначать <H1>. Синтаксис tag-а заголовка :

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

где y это число между 1-им и 6-ю, определяищими уровень заголовка.

Например, код для строки заголовка ``Заголовок'' определяется так :

    <H3>Заголовок</H3>
Название документа в сравнении с первым заголовком

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

Параграфы

В отличие от большинства текстовых процессоров, в HTML файлах разбиение на строки не принципиально. Переход на новую строку может произойти в любой точке Вашего файла, последовательные пробелы превращаются в один. (Есть пара исключений, например, пробел который следует за <P> или <Hy> tag, игнорируется.) Заметьте, что в нашем примере первый параграф записывается как :

    Добро пожаловать в HTML.
    Это первый параграф. <P>

В исходном файле между предложениями есть перевод строки. А Web просмотрщик игнорирует этот перевод строки и начинает новый параграф только когда достигается <P> tag.

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

    <TITLE>Это простейший HTML пример</TITLE><H1>Заголовок первого 
    уровня</H1>Добро пожаловать в мир HTML. Это первый параграф.<P>
    А это второй.<P>
будет давать тот же результат, что и наш первый пример.

Однако, чтобы сохранить читаемость HTML файлов, заголовки должны быть на различных строках и параграфы отделены пустой строкой (В дополнении к <P> tag-у).

NCSA Mosaic берет <P> в конце текущего параграфа и вставляет пустую строку.

HTML+, развивает текущий стандарт HTML, где <P> становится ``контейнером'' текста, также как текст заголовков первого уровня ``содержится'' внутри <H1> ... </H1>:

    <P>
    Это параграф в HTML+.
    </P>

Вся разница заключается в том, что </P> заключительный tag может быть всегда пропущен. ( То есть, если просмотрщик видит <P>, то он предполагает существование </P> в конце предыдущего параграфа.) Другими словами, в HTML+, <P> является указателем начала параграфа.

Преимуществом этого изменения в том, что Вы можете устанавливать параметры форматирования параграфа. Например, в HTML+, Вы можете отцентрировать параграф, определив:

    <P ALIGN=CENTER>
    Это центрированных параграф. Это HTML+, пока Вам это не доступно.

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

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

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

Одиночный гипертекстовый связующий HTML tag: <A>, его называют anchor (якорь). Чтобы включить anchor в свой документ:

  1. Начните anchor с <A . (После A стоит пробел.)
  2. Определите документ, на который будет указывать ссылка, введя параметр HREF="имя_файла" и, после этого, закрывающую скобку: >
  3. Наберите текст, который будет служить гипертекстовой ссылкой в текущем документе.
  4. Завершите anchor набрав tag: </A>.

Вот пример гипертекстовой ссылки:

    <A HREF="MaineStats.html">Maine</A>

Это выражение делает слово ``Maine'' гипертекстовой ссылкой на документ MaineStats.html, который находится в той же директории, что и первый документ. Вы можете сделать ссылку и на документ из другой директории, указав относительный путь из текущего документа к документу, на который делается ссылка. Например, ссылка на файл NJStats.html расположенный в поддиректории AtlanticStates будет выглядеть так:

    <A HREF="AtlanticStates/NJStats.html">New Jersey</A>

Это называется относительной ссылкой. Вы можете использовать также полное имя файла. Для указания пути используйте стандартный синтаксис UNIX.

Относительные ссылки в сравнении с абсолютными путями до файлов

В основном Вы должны использовать относительные ссылки, потому что

  1. Вам меньше набирать текста.
  2. Легче переместить группу документов в другое место, потому что относительные ссылки останутся корректными.

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

Uniform Resource Locator

World Wide Web использует Uniform Resource Locators (URLs) для указания расположения файлов на других серверах. URL включает тип (способ) доступа к ресурсу (gopher, WAIS, ...), адрес сервера и местоположение файла. Синтаксис:

scheme://host.domain[:port]/path/filename

где scheme является одним из:

file
файл Вашей локальной системы или файл ``анонимного'' FTP-сервера
http
файл World Wide Web сервера
gopher
файл Gopher сервера
WAIS
файл WAIS сервера
news
группа новостей Usenet
telnet
Telnet связь

Значение Port может быть опущено. (Не указывайте это, пока кто-нибудь явно не укажет Вам на необходимость использования).

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

    <A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> 
    NCSA's Beginner's Guide to HTML</A>

Это сделает текст ``NCSA's Beginner's Guide to HTML'' ссылкой на оригинал этого документа.

Дополнительную информацию по URL смотрите:

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

Ссылки (anchors) также могут быть использованы для перехода к определенным частям других документов. Предположим, вы хотите сделать ссылку из документа А на некоторую часть документа В. (Назовем этот файл documentB.html.) Во-первых, Вам необходимо создать named anchor (именованный якорь, ссылка с именем) в документе В. Например, чтобы создать anchor с именем ``Jabberwocky'' в документе В, наберите:

    Это <A NAME = "Jabberwocky">некоторый текст</a>

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

    Это моя <A HREF = "documentB.html#Jabberwocky">ссылка</A> на документ В.

Теперь нажатие на слово ``ссылка'' в документе А отправит читателя сразу к словам ``некоторый текст'' в документе В.

Ссылки на конкретные места в текущем документе

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

К примеру, для ссылки на ``Jabberwocky'' anchor изнутри того-же самого файла (документ В), надо использовать:

    Это <A HREF = "#Jabberwocky">ссылка на Jabberwocky</A> изнутри документа В.

Дополнительные Tag-и языка

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

Списки

HTML поддерживает ненумерованные, нумерованные и списки-определений.

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

Для создания ненумерованного списка,

  1. Начните с открытия списка с помощью <UL> tag-а.
  2. Наберите <LI> tag и, за ним, элемент списка. (Закрывающий tag </LI> не нужен.)
  3. Наберите tag, закрывающий список </UL>.

Ниже представлен пример списка из двух элементов:

    <UL>
    <LI> яблоки
    <LI> бананы
    </UL>

На выходе увидим:

  • яблоки
  • бананы

Элемент <LI> может содержать в себе множество параграфов. Не забудьте разделять параграфы с помощью <P>.

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

Нумерованный список (также называемый "порядковым" списком. От него происходит название tag-а) идентичен ненумерованному списку, исключая использование <OL> вместо <UL>. Элементы определяются использованием tag-а <LI>. Следующий HTML текст

    <OL>
    <LI> апельсины
    <LI> персики
    <LI> виноград
    </OL>

будет приводить к выводу:

  1. апельсины
  2. персики
  3. виноград

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

Список определений обычно содержит описание термина (абревиатура DT) и его определение (абревиатура DD). Web просмотрщик обычно начинает определение с новой строки.

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

    <DL>
    <DT> NCSA
    <DD> NCSA, the National Center for Supercomputing Applications,
         (Национальный центр приложений для суперкомпьютеров),
         расположен на территории University of Illinois 
         at Urbana-Champaign. NCSA - один из участников
         National MetaCenter for Computational Science and Engineering
         (Национальный центр компьютерной науки и инженерии).
    <DT> Cornell Theory Center
    <DD> CTC расположе на территории Cornell University in Ithaca,
         New York. CTC также участник National MetaCenter
         for Computational Science and Engineering.
    </DL>

Вывод выглядит следующим образом:

NCSA
NCSA, the National Center for Supercomputing Applications, (Национальный центр приложений для суперкомпьютеров), расположен на территории University of Illinois at Urbana-Champaign. NCSA - один из участников National MetaCenter for Computational Science and Engineering (Национальный центр компьютерной науки и инженерии).
Cornell Theory Center
CTC расположе на территории Cornell University in Ithaca, New York. CTC также участник National MetaCenter for Computational Science and Engineering.

<DT> и <DD> могут содержат множество параграфов (разделенных tag-ом <P>), списков, или другой определяющей информации.

Вложенные списки

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

Пример вложенного списка:

    <UL>
    <LI> A few New England states:
        <UL>
        <LI> Vermont
        <LI> New Hampshire
        </UL>
    <LI> One Midwestern state:
        <UL>
        <LI> Michigan
        </UL>
    </UL>

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

  • A few New England states:
    • Vermont
    • New Hampshire
  • One Midwestern state:
    • Michigan

Преформатированный текст

Используйте <PRE> tag (который соответствует слову ``преформатированный'') для генерации текста выводимого фонтом фиксированной ширины с сохранением пробелов, переводов каретки и символов табуляции. (То есть, несколько последовательных пробелов не будут преобразованы в один и новые строки будут начинаться в тех же позициях, что и в исходном HTML файле). Это очень удобно для листингов программ. Например, следующие линии:

    <PRE>
      #!/bin/csh                           
      cd $SCR                             
      cfs get mysrc.f:mycfsdir/mysrc.f   
      cfs get myinfile:mycfsdir/myinfile   
      fc -02 -o mya.out mysrc.f           
      mya.out                              
      cfs save myoutfile:mycfsdir/myoutfile 
      rm *                                
    </PRE>

изобразятся, как:

      #!/bin/csh                           
      cd $SCR                             
      cfs get mysrc.f:mycfsdir/mysrc.f   
      cfs get myinfile:mycfsdir/myinfile   
      fc -02 -o mya.out mysrc.f           
      mya.out                              
      cfs save myoutfile:mycfsdir/myoutfile 
      rm *

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

Заметим, так как <, >, and & имеют специальное значение в HTML Вы должны использовать их в escape-последовательностях (&lt;, &gt;, и &amp;, соответственно) для ввода этих символов. Смотри раздел Специальные символы, если хотите получить более подробную информацию.

Расширенные цитаты

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

Например:

    <BLOCKQUOTE>
    У меня есть мечта. Эта мечта берет начало в американской
    мечте. <P>
    Я мечтаю о том, что однажды нация поднимется и определит настоящее
    значение своей веры. Мы убеждены, что каждый человек должен чувствовать
    что все были рождены равными. <P>
    </BLOCKQUOTE>

В результате получим:

У меня есть мечта. Эта мечта берет начало в американской мечте.

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

Адреса

<ADDRESS> tag обычно используются для обозначения автора документа и средств связи с автором (например, E-mail адреса). Обычно это последний элемент файла.

Например, последняя строка online версии этого руководства:

    <ADDRESS>
    A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
    </ADDRESS>

В результате:

A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu

Замечание: <ADDRESS> - это не для почтового адреса. Смотри ``принудительный перевод строки'' на странице 10, если хотите хотите узнать, как представлять почтовые адреса.

Символьное форматирование

Вы может кодировать отдельные слова и предложения специальными стилями. Есть два типа стилей: логический и физический. Tag Логические стили присваивает тексту некоторое значение, в то время, как Физические стили стиль устанавливает появление специальной секции. Например в предыдущем предложении слова ``логические стили'' являются ``определением''. Такой же эффект (форматирование этих слов фонтом Italic) может быть достигнут через разные tag-и, которые будут означать только ``вывести эти слова фонтом Italic''.

Физический против логического: где только возможно, используйте логические стили

Затем нужны физические и логические стили, если они производят один и тот же эффект на экране? Последующая пара параграфов введет нас в философию SGML, которую можно выразить фразой: "Доверая своему просмотрщику".

В идеальном мире SGML, содержание отделяется от представления. Так, tag SGML заголовков первого уровня определяются как заголовки первого уровня, но не устанавливают, что заголовок первого уровня должен быть, например, выведен фонтом times-bold размера 24 пункта отцентрированным и на верху страницы. Преимуществом такого подхода (подобно концепции "стилей" большинства текстовых процессоров) является то, что если Вы решите изменить заголовок первого уровня на выровненный влево 20 пунктовый фонт Helvetica, все, что Вам нужно сделать, это изменить определение заголовка первого уровня в программе вывода (н., Ваш просмотрщик WWW).

Другим преимуществом логических tag-ов это то, что они помогают согласованному построению Ваших документов. Легче определить что-то, как <H1>, чем запоминать, что заголовок первого уровня выводится фонтом times-bold размера 24 пункта или еще чем-то в этом роде. Это справедливо и для символьных стилей. Например, рассмотрим tag <STRONG>. Большинство просмотрщиков преобразуют его в bold текст. Однако, возможно читатель предпочтет, чтобы эти части выводились на красном фоне. Логические стили предлагают такую гибкость.

Логические стили

<DFN>
Для определения слова. Обычно выводится фонтом italic. (NCSA Mosaic World Wide Web просмотрщик.)
<EM>
для усиления. Обычно выводится фонтом italic. (Не дай залезть себе в карман.)
<CITE>
для заголовков книг, фильмов и т.д. Обычно выводится фонтом italic. (Руководство для начинающих по HTML)
<CODE>
для кусков компьютерного кода. Выводится фонтом фиксированной ширины. (<stdio.h> заголовочный файл)
<KBD>
для текста, который пользователь должен ввести с клавиатуры. Должен выводится фонтом bold фиксированной ширины, но многие просмотрщики выводят его фонтом plain (простым фонтом) фиксированной ширины (Введите passwd для изменения свего пароля.)
<SAMP>
для ссобщений от программ. Выводится фонтом фиксированной ширины. (Segmentation fault: Core dumped.)
<STRONG>
для особо важных фрагментов. Обычно выводится фонтом bold. (Важно)
<VAR>
для переменных метасинтаксиса, когда пользователь заменяет переменную конкретным значением. Обычно выводится фонтом italic. (rm filename удаляет файл.)

Физические стили

<B>
bold text
<I>
italic text
<TT>
typewriter text, еквивалентен фонту фиксированной ширины.

Использование символьных Tag-ов

Для применения символьного стиля,

  1. Начните с <tag>, где tag - желаемый символ определяемого tag-а, для обозначения начала соответствующего текста.
  2. Введите этот текст.
  3. завершите отрывок выражением </tag>.

Специальные символы

Escape последовательности

Четыре символа набора ASCII - знак меньше (<), знак больше (>), амперсанд (&) и двойные кавычки (") имеют специальное значение внутри HTML и следовательно не могут быть использованы в тексте в своем обычном значении. (Скобки используются для обозначения начала и конца HTML tag-ов, а амперсанд используется для обозначения escape-последовательности).

Для использования одного из этих символов в HTML документе Вы должны внести вы должны ввести вместо него escape-последовательность:

&lt;
escape-последовательность для <
&gt;
escape-последовательность для >
&amp;
escape-последовательность для &
&quot;
escape-последовательность для "

Дополнительные escape-последовательности поддерживающие акцентированные символы. Например: Additional escape sequences support accented characters. For example:

&ouml;
escape-последовательность для lowercase o с умляутом: ö
&ntilde;
escape-последовательность для lowercase n с тильдой: ñ
&Egrave;
escape-последовательность для uppercase E с grave accent: È

Доступен полный список поддержанных символов.

Замечание: В отличии от остального HTML, escape-последовательности чуствительны к регистру. Вы не можете, например, использовать &LT; вместо &lt;.

Принудительный перевод строки

<BR> tag заставляет просмотрщик переводить сроку без дополнительного промежутка между ними (для сравнения, большинство просмотрщиков выводят дополнительную пустую строку, если встречают tag параграфа: <P>, для более четкого выделения начала следующего параграфа.

Одно из использований <BR> - при форматированиии адресов:

    National Center for Supercomputing Applications<BR>
    605 East Springfield Avenue<BR>
    Champaign, Illinois 61820-5518<BR>

Горизонтальные разделители

<HR> tag производит горизонтальную линию во всю ширину окна просмотрщика.

Встроенные изображения

Большинство просмотрщиков могут выводит встроенные изображения (такие как, изображения после текста) в форматах X Bitmap (XBM) или GIF. Каждое изображение требует времени для обработки и замедляет процесс вывода документа, так что Вы не должны включать слишком много или чрезмерно большие изображения.

Для включения изображения используйте:

    <IMG SRC=image_URL>

где image_URL это URL на файл изображения. Синтаксис для IMG SRC URL идентичен тому, который используется в anchor HREF. Если файл изображения это GIF файл, то часть image_URL соответствующая имени файла должна заканчиваться на .gif. Имена файлов X Bitmap должны заканчиваться .xbm.

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

Добавьте ALIGN=TOP опцию если Вы хотите, чтобы просмотрщик выровнял текст с верхом изображения, как показано в этом параграфе. Полный tag встроенного изображения с верхним выравниванием:

    <IMG ALIGN=top SRC=image_URL>

ALIGN=MIDDLE выравнивает текст с центром изображения.

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

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

    <IMG SRC = "UpArrow.gif" ALT = "Up">

где UpArrow.gif изображение стрелки вверх. Используя NCSA Mosaic и другие графические просмотрщики пользователи увидят картинку "стрелка вверх". Используя просмотрщик типа Lynx (или другой для терминала VT100), пользователь увидит слово "Up".

Внешние изображения, звуки и анимация

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

Для включения ссылки на внешнее изображение, используйте:

    <A HREF = image_URL>описание ссылки</A>

Используйте аналогичный синтаксис для ссылок на внешние файлы анимации и звука. Единственное отличие заключается в расширении подсоединяемого файла. Например:

<A HREF = "QuickTimeMovie.mov">описание ссылки</A>

определяет ссылку на QuickTime видео. Некоторые общие типы файлов и их расширения:

Тип файла
Расширение
Простой текст
.txt
HTML документ
.html
GIF image
.gif
TIFF image
.tiff
XBM bitmap image
.xbm
JPEG image
.jpg or .jpeg
PostScript файл
.ps
AIFF звук
.aiff
AU звук
.au
QuickTime видео
.mov
MPEG видео
.mpeg or .mpg

Уверены ли Вы, что интересующая Вас аудитория имеет необходимые просмотрщики? Большинство UNIX станций не могут, например, показывать QuickTime movies.

Исправление ошибок

Избегайте вложенных tag-ов

Рассмотрим отрывок HTML файла:

    <B>Это пример с <DFN>перекрывающихся</B> HTML tag-ов.</DFN>

Слово ``перекрывающиеся'' (overlapping) содержится внутри и <B> и <DFN> tag-ов. Как просмотрщик форматирует это? Вы не узнаете это, пока не посмотрите, разные просмотрщики по разному реагируют на подобные конструкции. В общем, избегайте перекрывающихся tag-ов.

Вложенные ссылки и символьные tag-и, но больше ничего

Вполне возможно вставлять ссылки (anchors) внутрь другого HTML элемента:

    <H1><A HREF = "Destination.html">Мой заголовок</A></H1>

Не вставляйте заголовки или другие HTML внутрь ссылки:

    <A HREF = "Destination.html">
    <H1>Мой заголовок</H1>
    </A>

Хотя большинство современных просмотрщиков справятся с этим примером, но это запрещено официальной спецификацией HTML и HTML+, и не будет работать с будущими просмотрщиками.

Символьные tag-и модифицируют представление других tag-ов:

    <UL><LI><B>Элемент списка (фонт - bold)</B>
        <UL>
        <LI><I>Элемент списка (фонт - italic)</I>
    </UL>

Однако, избегайте вставки других типов HTML элементов. Например, соблазнительно вставить заголовок внутрь списка для увеличения размера фонта:

    <UL><LI><H1>Болшой заголовок</H1>
        <UL>
        <LI><H2>Что-то немного меньшее</H2>
    </UL>

Хотя некоторые просмотрщики, такие как, NCSA Mosaic for the X Window System, благополучно форматируют эту конструкцию, непредсказуемо (потому что это не определено), как это обработает другой просмотщик. Для совместимости с другими просмотрщиками, избегайте подобных конструкций.

В чем разница между вложением <B> внутрь tag-а <LI> как противоположности вложению <H1> внутрь <LI>? Опять таки, это вопрос из SGML. Семантическое значение <H1> в тои, что оно является главным заголовком документа за которым должно следовать содержание. Так что, нет смысла искать <H1> внутри списка.

Символы форматирования также обычно не аддитивны. Вы можете ожидать, что:

    <B><I>некоторый текст</I></B>

будет выводиться фонтом bold-italic. Некоторые просмотрщики делают это; другие интерпретирую только tag последнего уровня вложенности (здесь, это italics).

Проверьте свои ссылки

Если <IMG> tag ссылается на несуществуюшее изображение, вместо него подставляется "пустое" (dummi). Если это произошло, проверьте что ссылаетесь ли Вы на реально существующее изображение, что ссылка корректна с точки зрения правил URL и что атрибуты доступа к файлу установлены правильно (можно читать всем).

Большой пример

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

    <HEAD>
    <TITLE>Большой пример</TITLE>
    </HEAD>
    <BODY>
    <H1>Большой пример</H1>
    Это простой документ. Это первый параграф. <P>
    Это второй параграф, который показывает специальные эффекты. Это слово выводится фонтом
    <I>italics</I>. Это слово выводится фонтом <B>bold</B>.
    Это встроенное изображение в формате GIF: <IMG SRC = "myimage.gif">. 
    <P>
    Это третий параграф, демонстрирующий ссылки. Это гипертекстовая ссылка
    слова <A HREF = "subdir/myfile.html">foo</A>
    с документом "subdir/myfile.html". (Если Вы попробуете перейти по
    по этой ссылке то получите сообщение об ошибке.) <P> 
    <H2>Заголовок второго уровня</H2>
    Этот текст должен выводиться фонтом фиксированной ширины: <P>
    <PRE>
        On the stiff twig up there
        Hunches a wet black rook
        Arranging and rearranging its feathers in the rain ...
    </PRE>
    Это ненумерованный список с двумя элементами: <P>
    <UL>
    <LI> клюква
    <LI> черника
    </UL>
    Это конец моего документа. <P>
    <ADDRESS>Me (me@mycomputer.univ.edu)</ADDRESS>
    </BODY>
Нажмите здесь для просмотра форматированной версии.

В дополнении к уже обсуждавшимся tag-ам, в этом примере также используются <HEAD> ... </HEAD> и <BODY> ... </BODY> tag-и, которые разделяют в документе вводную информацию о нем и основной текст документа. Эти таги ничего не меняют в представлении форматированного документа, но являются очень полезными для некоторых целей (например, NCSA Mosaic for Macintosh 2.0, позволяет Вам просматривать только заголовки частей документа, чтобы решить, нужно ли Вам загружать оставшиеся части) и мы очень рекомендуем Вам использовать эти tag-и.

Если Вам требуется больше информации

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

Заполняемые выходные формы

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

Руководство по стилям

Следующие документы подскажут Вам как писать ``хорошие'' HTML файлы:

Другие вводные документы

Определенная информация имеется в следующих руководствах:

Дополнительные ссылки


Это руководство было создано в NCSA находящегося в University of Illinois в Urbana-Champaign. Copyright by the Board of Trustees of the University of Illinois.

Перевод выполнен Антониной Ю. Кубарчук при содействии Д.Босенко.











helloworld.ru © 2001-2016
Все права защищены
Rambler's Top100 TopList Rambler's Top100