Этот документ является примером для написания документов на HTML.
HTML документы - это документы, написанные в обычном текстовом формате (который также известен как ASCII). Они могут быть созданы в любом текстовом редакторе, который вам нравится.
Вы можете смотреть, как в действительности выглядят ваши документы в процессе их создания, с помощью NCSA Mosaic (и некоторых других Web просмоторщиков). Откройте документ с помощью команды Open Local меню File.После того, как вы отредактируете HTML файл, сохраните изменения. Вернитесь к NCSA Mosaic и перегрузите(Reload) документ. Изменения будут отображены на вашем экране.
Перед вами простейший пример HTML документа:
<TITLE>The simplest HTML example</TITLE>
<H1>This is a level-one heading</H1>
Welcome to the world of HTML.
This is one paragraph.<P>
And this is a second.<P>
Просмотреть этот пример в форматированном виде.
HTML использует специальные таги для того, чтобы сказать Web просмоторщику, как отображать текст. Предыдущий пример использует:
HTML таги состоят из левой скобки (<), собственно названия тага и закрывающей правой скобки (>). Таги обычно парные, т.е. <H1> и </H1>. Закрывающий таг выглядит подобно открывающему, за исключением символа (/) предваряющего текст в скобках. В нашем примере, <H1> говорит Web просмоторщику, что начинается заголовок первого уровня; </H1> говорит просмоторщику, что заголовок закончился.
Одним из исключений правила парности является таг <P>. Не существует тага типа </P>.
ЗАМЕЧАНИЕ: HTML не чувствителен к регистру. <title> эквивалентно <TITLE> или <TiTlE>.
Не все таги поддерживаются всеми World Wide Web просмоторщиками. Если просмоторщик не поддерживает таг, он его просто игнорирует.
Каждый HTML документ должен иметь титул. Титул обычно отображается отдельно от документа и используется в основном для идентификации документа в других контекстах (например, WAIS поиск). Используйте около полудюжены слов, которые объясняют цели документа.
Формат тага титула:
<TITLE>Текст титула </TITLE > Вы можете получить дополнительную информацию об использовании титулов.
В HTML есть шесть уровней заголовков, пронумерованных от 1 до 6, где 1 имеет наибольшее выделение. Заголовки отображаются шрифтами большего размера и/или более жирными шрифтами, чем используются для отображения обычного текста. Для заголовка первого уровня надо использовать таг <H1>. Синтаксис заголовочных тагов следующий:
<Hy>Текст заголовка </Hy >
где y это число от 1 до 6, определяющее уровень заголовка.l
Например, кодировка заголовка ``Headings'' следующая:
<H3>Headings</H3>
В отличие от документов большинства текстовых процессоров, клавиша Return в HTML файлах не имеет большого значения. Перенос строки может встречаться в любой точке вашего исходного документа; несколько пробелов будут объединены в один. Обратите внимание, что в рассмотренном нами простейшем примере первый параграф кодируется следующим образом:
Welcome to HTML.
This is the first paragraph. <P>
В исходном файле между документами есть перевод строки. Web просмоторщик его игнорирует и начинает новый параграф только тогда, когда ему встретится таг <P>.
Важно: Вы должны разделять параграфы с помощью тага <P>. Просмоторщик игнорирует все пустые строки в исходном файле. HTML практически целиком основывается на тагах формата, и без <P>, документ становится одним большим параграфом. (Исключение составляет текст, отмеченный как ``preformatted," предназначенные для этого таги описываются ниже.) Например, следующее будет отображено аналогично тексту нашего простейшего примера:
<TITLE>The simplest HTML example</TITLE><H1>This is a level
one heading</H1>Welcome to the world of HTML. This is one
paragraph.<P>And this is a second.<P>
Основная мощь HTML происходит из его возможности связать части текста с другими документами. Просмоторщик выделяет эти части текста, чтобы подчеркнуть, что они являются гипертекстовыми ссылками.
Чтобы сделать гипертекстовую ссылку, выполните следующую последовательность шагов:
A стоит пробел.)
Вот пример гипертекстовой ссылки:
<A HREF="MaineStats.html">Maine</A>
Это выражение делает слово ``Maine'' гипертекстовой ссылкой на документ MaineStats.html, который находится в той же директории, что и первый документ. Вы можете сделать ссылку и на документ из другой директории, указав относительный путь из текущего документа к документу, на который делается ссылка. Например, ссылка на файл NJStats.html located in the subdirectory AtlanticStates будет выглядеть так:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
Это называется относительной ссылкой. Вы можете использовать также полное имя файла. Для указания пути используйте стандартный синтаксис UNIX.
Ссылки также могут быть использованы для перехода к определенным частям других документов. Предположим, вы хотите сделать ссылку из документа А на специфическую секцию документа В. (Назовите этот файл documentB.html.) Во-первых, вам надо поставить именной таг NAME в документе В. Например, чтобы установить таг, называющийся ``Jabberwocky'' в документе В, наберите:
Here's <A NAME = "Jabberwocky">some text</a>
Таким образом вы отметили место в документе В, на которое хотите сделать ссылку.
Теперь, когда вы будете создавать ссылку из документа А, включите в нее не только имя файла с документом В, но и конкретное место в нем, отделив название места символом (#).
This is my <A HREF = "documentB.html#Jabberwocky">link</A> to document B.
Теперь переход по слову ``link'' в документе А отошлет читателя непосредственно к словам ``some text'' в документе В.
Все действия аналогичны случаю для внешних документов, за исключением того, что опускается имя файла.
Например, ссылка на место в документе В, называющееся "Jabberwocky", будет выглядеть следующим образом:
This is <A HREF = "#Jabberwocky">Jabberwocky link</A> from within Document B.
Всего описанного ранее достаточно для написания простейших HTML документов. Для более сложных документов в HTML есть таги для списков, заранее отформатированных секций, показа специальных символов и т.п.
HTML поддерживает ненумерованные, пронумерованные и списки-определения.
Чтобы сделать ненумерованный список:
Ниже представлен пример списка из двух элементов:
<UL>
<LI> apples
<LI> bananas
</UL>
Результат выглядит следующим образом:
Элементы списка <LI> могут содержать несколько параграфов. Просто разделите параграфы с помощью соответствующего тага <P>.
Пронумерованные списки идентичны ненумерованным списком, единственно, что надо использовать <OL> вместо <UL>. Элементы списка указываются с помощью того же тага <LI>. Следующий HTML код
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
произведет такой отформатированный вывод:
Список-определение обычно состоит из термина (его аббревиатура DT) и его определения (аббревиатура DD). Web просмоторщики обычно начинают определение с новой строки.
Ниже приведен пример списка-определения:
<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications,
is located on the campus of the University of Illinois
at Urbana-Champaign. NCSA is one of the participants in the
National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca,
New York. CTC is another participant in the National MetaCenter
for Computational Science and Engineering.
</DL>
Его вывод выглядит следующим образом:
<DT> и <DD> элементы могут содержать несколько параграфов, списков или другую определяющую информацию,
Списки могут быть вложенными, хотя на практике вам, вероятно, придется ограничиться тремя уровнями вложенности. Вы также можете использовать несколько параграфов, каждый из которых будет содержать вложенный список, в одном элементе списка.
Пример вложенного списка:
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
</UL>
<LI> One Midwestern state:
<UL>
<LI> Michigan
</UL>
</UL>
Этот вложенный список отображается так:
Используйте таг <PRE> для того, чтобы пробелы, новые строки и символы табуляции имели значение. (Т.е. несколько пробелов будут отображены как несколько пробелов, и переводы строки будут именно там, где они стоят в исходном файле.) Этот стиль полезен для листингов программ. Например, следующие строки
<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 тагов внутри заранее отформатированных секций.
Обратите внимание, что так как символы <, >, and & имеют специальное значение в HTML, вам надо использовать их escape-последовательности (<, >, и &) для того чтобы отобразить эти символы. См. раздел Специальные символы для более подробной информации.
Используйте так <BLOCKQUOTE> для включения цитат в отдельные блоки на экране. Большинство просмоторщиков обычно отделяют их от окружающего текста.
Пример:
<BLOCKQUOTE>
I still have a dream. It is a dream deeply rooted in the
American dream. <P>
I have a dream that one day this nation will rise up and
live out the true meaning of its creed. We hold these truths
to be self-evident that all men are created equal. <P>
</BLOCKQUOTE>
Результат будет следующий:
I still have a dream. It is a dream deeply rooted in the American dream.I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.
Таг <ADDRESS> обычно используется для указания автора документа и его email адреса. Это обычно последняя часть документа.
Например, последняя строка 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> не используется для почтовых адресов, которые форматируются специальным образом.
Вы можете отображать отдельные слова или выражения специальными стилями. Существует два типа стилей: логический и физический. Логические стили используются для отображения текста в соответствии с его значением, в то время, как физические стили определяют специфическое отображение некоторой части текста. Например, в предыдущем предложении слова "Логические стили" были отформатированы как "определение" ("definition''). Тот же самый эффект (наклонное написание текста) мог бы быть достигнут посредством использования тага, который бы определил формат этих слов как "italic".
Если и физические, и логические стили дают одинаковый эффект, зачем нужны оба типа стилей? Мы посвятим несколько параграфов философии SGML, которая кратко заключается в следующем:"Доверяй своему просмоторщику."
В идеальном мире SGML содержание отделено от его представления. Таким образом, SGML таг, отвечающий за заголовок первого уровня, указывает только на то, что это будет заголовок первого уровня, но не то, каким именно шрифтом и где его отображать. Последнее указывается в установках используемого вами просмоторщика. Поэтому, смена шрифта, используемого для вывода заголовка первого уровня, не приведет к изменению соответствующих тагов.
Другое преимущество логических стилей заключается в том, что они помогают визуализировать содержание ваших документов. Значительно легче использовать таг <H1>, чем запоминать, что заголовок первого уровня должен выводиться каким-то определенным шрифтом. Аналогично дело обстоит и со стилями для форматирования символов. Например, рассмотрим таг <STRONG>. Большинство просмоторщиков отображают его жирным шрифтом. Однако, вполне вероятно, что читатель предпочитает отображение такого текста красным цветом. Логические стили предоставляют возможность использования таких вариантов .
Чтобы применить символьный стиль,
Четыре ASCII символа -- (<), (>), (&) и (") -- имеют специальное значение в HTML и, поэтому, не могут быть использованы "в качестве текста".
Чтобы использовать один из этих символов в HTML документе, вы должны использовать его escape последовательность:
Дополнительные escape-последовательности поддерживают т.н. "иностранные" символы. Например:
Полный список поддерживаемых символов может быть найден на CERN.
ЗАМЕЧАНИЕ: В отличие от всего остального HTML, escape-последовательности чувствительны к регистру. Вы не можете, например, использовать < вместо <.
Таг <BR> вызывает перевод строки без появления дополнительной пустой строки. (В противоположность этому, большинство просмоторщиков форматируют таг параграфа <P> с использованием дополнительной пустой строки.)
Одно из использований <BR> состоит в форматировании адресов:
National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois 61820-5518<BR>
Таг <HR> вызывает показ горизонтальной линии во всю ширину окна просмоторщика.
Большинство Web просмотрщиков могут отображать встроенные в текст иллюстрации в формате .XBM или .GIF . Каждая картинка требует времени на ее обработку и замедляет загрузку документа, поэтому не стоит включать в документ большого количества иллюстраций или иллюстраций большого размера.
Чтобы вставить картинку используйте следующую конструкцию:
<IMG SRC=image_URL>
где image_URL это URL файла с картинкой. Синтаксис для IMG SRC URL идентичен синтаксису, использующемуся в конструкции HREF. GIF файлы должны иметь расширение .gif; X Bitmap файлы должны иметь расширение .xbm .
По умолчанию текст выводится рядом с нижней частью картинки.
Добавьте опцию ALIGN=TOP, если вы хотите выравнять текст по веру картинки. Таким образом, полный таг для вставки картинок такой (с выравниванием по верху):
<IMG ALIGN=top SRC=image_URL>
ALIGN=MIDDLE выводит текст по центру.
Некоторые World Wide Web просмоторщики, в основном те, которые работают на терминалах VT100, не могут отображать картинки. Опция ALT позволяет вам определить, какой текст будет выводиться в этой ситуации на месте картинки. Например:
<IMG SRC = "UpArrow.gif" ALT = "Up">
где UpArrow.gif будет заменена в текстовых просмоторщиках, таких как lynx, на слово "Up."
Вы можете подключить внешний образ (который, например, может быть более подробным вариантом встроенной иллюстрации), используя конструкцию HREF:
<A HREF = image_URL>link anchor</A>
Используйте аналогичный синтаксис для подключения внешних звуков и анимации. Единственное отличие заключается в расширении подсоединяемого файла. Например:
<A HREF = "QuickTimeMovie.mov">link anchor</A>
Некоторые общие типы файлов и их расширения:
Имейте ввиду аудиторию для которой вы создаете свой документ. Например, большинство UNIX просмоторщиков не могут показывать QuickTime movies.
Перед вами пример более серьезного документа:
<HEAD>
<TITLE>A Longer Example</TITLE>
</HEAD>
<BODY>
<H1>A Longer Example</H1>
This is a simple HTML document. This is the first
paragraph. <P>
This is the second paragraph, which shows special effects. This is a
word in <I>italics</I>. This is a word in <B>bold</B>.
Here is an in-lined GIF image: <IMG SRC = "myimage.gif">.
<P>
This is the third paragraph, which demonstrates links. Here is
a hypertext link from the word <A HREF = "subdir/myfile.html">foo</A>
to a document called "subdir/myfile.html". (If you
try to follow this link, you will get an error screen.) <P>
<H2>A second-level header</H2>
Here is a section of text that should display as a
fixed-width font: <P>
<PRE>
On the stiff twig up there
Hunches a wet black rook
Arranging and rearranging its feathers in the rain ...
</PRE>
This is a unordered list with two items: <P>
<UL>
<LI> cranberries
<LI> blueberries
</UL>
This is the end of my example document. <P>
<ADDRESS>Me (me@mycomputer.univ.edu)</ADDRESS>
</BODY>
Просмотреть этот пример в форматированном виде.
Это руководство не является полной спецификацией HTML. Ниже приведены возможные источники более подробной информации.
Эта часть HTML позволяет пользователю передавать некоторую информацию World Wide Web серверу. На нашем сервере можно найти более подробную информацию.
Следующие документы помогут вам написать свой "хороший" HTML:
National Center for Supercomputing Applications / pubs@ncsa.uiuc.edu
Tanaev A.