Предполагается, что Вы уже знаете:
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 документа :
<TITLE>Простейший HTML пример</TITLE>
<H1>Это заголовок первого уровня</H1>
Добро пожаловать в мир HTML.
Это первый параграф.<P>
А это второй.<P>
Нажмите здесь,
если хотите увидеть форматированную версию приведенного примера.
HTML использует термины гипертекста для информирования просмотрщика о способе вывода текста. Вышеприведенный пример использует :
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 в свой документ:
A стоит пробел.)
Вот пример гипертекстовой ссылки:
<A HREF="MaineStats.html">Maine</A>
Это выражение делает слово ``Maine'' гипертекстовой ссылкой на документ MaineStats.html, который находится в той же директории, что и первый документ. Вы можете сделать ссылку и на документ из другой директории, указав относительный путь из текущего документа к документу, на который делается ссылка. Например, ссылка на файл NJStats.html расположенный в поддиректории AtlanticStates будет выглядеть так:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
Это называется относительной ссылкой. Вы можете использовать также полное имя файла. Для указания пути используйте стандартный синтаксис UNIX.
В основном Вы должны использовать относительные ссылки, потому что
Однако, используйте абсолютные пути, когда ссылаетесь на документы относящиеся к другой группе. Например, пусть Ваша группа документов содержит документацию пользователя. Ссылки внутри этой группы должны быть относительными. Ссылки на другие документы (относящиеся, например, к дополнительному програмному обеспечению) должны содержать полный путь. Таким образом, если Вы переместите документацию в другую директорию, ни одна из связей не будет требовать обновления (изменения).
World Wide Web использует Uniform Resource Locators (URLs) для указания расположения файлов на других серверах. URL включает тип (способ) доступа к ресурсу (gopher, WAIS, ...), адрес сервера и местоположение файла. Синтаксис:
scheme://host.domain[:port]/path/filename
где scheme является одним из:
Значение 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> изнутри документа В.
Всего описанного ранее достаточно для написания простейших HTML документов. Для более сложных документов в HTML есть tag-и для различных списков, заранее отформатированных секций, цитат, расширенного выделения, форматирующих символов и т.п.
HTML поддерживает ненумерованные, нумерованные и списки-определений.
Для создания ненумерованного списка,
Ниже представлен пример списка из двух элементов:
<UL>
<LI> яблоки
<LI> бананы
</UL>
На выходе увидим:
Элемент <LI> может содержать в себе множество параграфов. Не забудьте разделять параграфы с помощью <P>.
Нумерованный список (также называемый "порядковым" списком. От него происходит название tag-а) идентичен ненумерованному списку, исключая использование <OL> вместо <UL>. Элементы определяются использованием tag-а <LI>. Следующий HTML текст
<OL>
<LI> апельсины
<LI> персики
<LI> виноград
</OL>
будет приводить к выводу:
Список определений обычно содержит описание термина (абревиатура 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>
Вывод выглядит следующим образом:
<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>
И вложенный список будет выглядеть на экране так:
Используйте <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-последовательностях (<, >, и &, соответственно) для ввода этих символов. Смотри раздел Специальные символы, если хотите получить более подробную информацию.
Используйте <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 текст. Однако, возможно читатель предпочтет, чтобы эти части выводились на красном фоне. Логические стили предлагают такую гибкость.
Для применения символьного стиля,
Четыре символа набора ASCII - знак меньше (<), знак больше (>), амперсанд (&) и двойные кавычки (") имеют специальное значение внутри HTML и следовательно не могут быть использованы в тексте в своем обычном значении. (Скобки используются для обозначения начала и конца HTML tag-ов, а амперсанд используется для обозначения escape-последовательности).
Для использования одного из этих символов в HTML документе Вы должны внести вы должны ввести вместо него escape-последовательность:
Дополнительные escape-последовательности поддерживающие акцентированные символы. Например: Additional escape sequences support accented characters. For example:
Доступен полный список поддержанных символов.
Замечание: В отличии от остального HTML, escape-последовательности чуствительны к регистру. Вы не можете, например, использовать < вместо <.
<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 видео. Некоторые общие типы файлов и их расширения:
Уверены ли Вы, что интересующая Вас аудитория имеет необходимые просмотрщики? Большинство UNIX станций не могут, например, показывать QuickTime movies.
Рассмотрим отрывок HTML файла:
<B>Это пример с <DFN>перекрывающихся</B> HTML tag-ов.</DFN>
Слово ``перекрывающиеся'' (overlapping) содержится внутри и <B> и <DFN> 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.
Перевод выполнен Антониной Ю. Кубарчук при содействии Д.Босенко.
©
ПТТ-Телепорт Москва
[Last accessed 27.10.2001]