Урок 10. Создание документа в html

В HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе (например, Emacs или vi на UNIX машинах, или любом редакторе на IBM PC).

Пример документа в HTML

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

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

<BODY>

<TITLE>Пример HTML-текста</TITLE>

<H1>Глава 1</H1>

<H2>Параграф 1.</H2>

Добро пожаловать в HTML! Здесь мы расскажем, как надо и как не надо писать гипертексты.

<H2>Параграф 2.</H2>

</BODY>

Итак, вы уже поняли, что заголовок документа начинается с <TITLE> и заканчивается </TITLE>. Заголовок первого уровня (главы) выделяется символами <H1> и </H1>. Заголовки последующих уровней (параграфы, пункты, подпункты) — символами <Hx> и </Hx>, где x — числа 2, 3, ... Абзац — символами <P> (в версиях HTML, действующих сейчас, символа </P> не существует! Но! Он может появится в последующих версиях!)

Внимание! HTML не различает, какими буквами набраны символы форматирования: <title> равносильно <TITLE> или <TiTlE>. Не все стили поддержаны всеми WWW-браузерами. Если браузер не поддерживает стиль, то он его игнорирует. (Поэтому не страшно, если вы уже сейчас начнете пользоваться при форматировании абзацев символом.

Основные элементы

Основной текст отделяется от сопроводительного символами: <BODY> </BODY>.

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

Каждый HTML-документ должен иметь заголовок, он показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Практически во всех браузерах заголовок документа виден в верхней части экрана (окна).

Для выделения заголовка служат символы:

<HEAD> <TITLE>

Заголовок

</TITLE> </HEAD>

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

HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом — размером и толщиной букв. Первый заголовок в каждом документе должен быть выделен <H1>. Синтаксис заголовков:

<Hx>

Текст заголовка

</Hx>

где x — число от 1 до 6, определяющее уровень заголовка.

Абзацы

В отличие от документов в большинстве текстовых процессоров, прерывания строк и слов в HTML-файлах не существенны. Обрыв слова или строки может происходить в любом пункте в вашем исходном файле, при просмотре это прерывание будет проигнорировано. Напомним, что в нашем примере, первый параграф был представлен как <H2>Параграф 1.</H2> Добро пожаловать в HTML! Здесь мы расскажем, как надо и как не надо писать гипертексты.

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

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

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

<A HREF="имя файла"> Текст, который будет служить как обращение к другому документу</A>.

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

Пример HTML-текста

Здесь ключевые слова “Пример HTML-текста” являются гиперссылкой на файл с расширением .html, который лежит в той же директории, что и текущий документ. Вы можете ссылаться на документ, лежащий в любой директории, описав к нему полный путь. Так, например, ссылку на файл NJStats.html, лежащий в поддиректории AtlanticStates можно описать как:

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

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

URL

Итак — URL это аббревиатура от Uniform Resource Locator. В него входит, кроме названия файла и директории: сетевой адрес машины и метод доступа к файлу. С помощью URL можно запускать удаленные программы, и передавать им значения. На этом принципе построены шлюзы в другие интернетовские сервисы: finger, archie. Здесь представлены несколько наиболее часто используемых типов URL. Допустим файл с именем “online15.zip” лежит на ftp сервере ftp.simtel.ru в директории /pub/doc/services/, тогда URL этого файла будет выглядеть так: file://ftp. simtel.ru/pub/doc/services/online15.zip. URL директории, в которой лежит файл: file://ftp.simtel.ru/pub/doc/services/, а URL корневой директории ftp сервера ftp.simtel.ru выглядит вот так: file://ftp.simtel.ru/

Gopher URL's не так разнообразны, как файловые. Это связано с ограниченностью этого сервиса. Для того чтобы описать, например, gopher сервер узла gopher.kiae.su необходим URL: gopher://gopher.kiae.su/

Некоторые gopher-сервера могут находиться на нестандартном номере порта (по умолчанию обычно используется 70 порт) тогда он должен указываться: gopher://gopher.banzai.edu:1234/, где 1234 — номер порта.

Если вы внимательно посмотрите на исходники какого-нибудь гипертекстового документа, и обратите внимание на то, как указаны ссылки на другие URL то заметите, что встречаются два вида:

1. <A Href="http://www.simtel.ru/news/snews.http">News</A>

2. <A Href="aaa.html">AAA</A>

Первый — это полный URL, а второй — частичный. Частичный URL указывает на документ который находится на том же сервере и в той же директории, что и документ в котором встречается эта ссылка.

Обращение к определенным разделам других документов

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

<A NAME = "Глава 1">Главу 1</a> Текст первой главы.

Теперь, описывая ссылку в документе A, надо включить не только имя файла documentB.html но также и имя гиперссылки, отделяемое символом (#): Здесь вы можете увидеть текст

<A HREF = "documentB.html#Глава1"> Главы 1 </A> документа B.

Теперь, “кликнув” в слово “Главы 1” в документе А, вы переходите непосредственно в Главу 1 в документе B.

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

Техника соединения аналогична описанной выше, только опускается имя файла. Вот, например, связь с Главой 1 внутри того же самого файла (Документ B) — это <A HREF = "#Глава1">Глава 1</A> текущего документа.

Дополнительные возможности форматирования

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

Списки

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

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

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

<UL><LI>список пунктов </UL>

Например:

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

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

Нумерованный список идентичен ненумерованному списку, только вместо <UL> используется <OL>.

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

Браузер автоматически нумерует элементы такого списка.

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

Список определений обычно состоит из чередования термина <DT> и определения <DD>. Обычно Web-браузеры определения располагает на новой строке. Приведем пример списка определений:

<DT> NCSA

<DD> NCSA (National Center for Supercomputing Applications)

<DT> CTC

<DD> CTC (Cornell Theory Center)

</DL>

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

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

Приведем пример вложенных списков:

<DD><UL> </DD>

<DD><LI> Крупные города России: </DD>

<DD><UL> </DD>

<DD><LI> Москва </DD>

<DD><LI> Санкт-Петербург </DD>

<DD></UL> </DD>

<DD><LI> Крупные города Украины: </DD>

<DD><UL> </DD>

<DD><LI> Киев </DD>

<DD></UL> </DD>

<DD></UL>

Авторский стиль редактирования

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

#!/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 *

Адреса

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

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

<ADDRESS> Введение в HTML/ НИИЯФ МГУ/ lenka@srdlan.npi.msu.su </ADDRESS>

Внимание! <ADDRESS> не используется для почтового адреса.

Стили

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

Зачем существуют два стиля, если они могут дать одинаковый результат на экране? В качестве ответа на этот вопрос сошлемся на аксиому: “Доверьтесь вашему браузеру”.

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

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

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

<DFN> — служит для описания определений.

<EM> — служит для выделения слов.

<CITE> — служит для выделения заголовков книг, фильмов, цитат.

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

<KBD> — используется для ввода с клавиатуры пользователя. Может быть изображено жирным шрифтом.

<SAMP> — используется для машинных сообщений. Изображается шрифтом фиксированной ширины.

<STRONG> — служит для особого выделения слов. Обычно выделяется жирным шрифтом.

<VAR> — используется для символьных переменных.

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

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

Вы можете задать:

<B>, </B> — жирный шрифт.

<I>, </I> — наклонный шрифт.

<TT>, </TT> — фиксированный шрифт (шрифт заданной ширины).

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

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

& lt; — левая скобка <

& gt; — правая скобка >

& amp; — &

& quot; — "

Замечание: Специальные символы чувствительны к регистру: нельзя использовать & LT; вместо & lt;.

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

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

Например:

Институт Ядерной Физики <BR> Московского Государственного Университета <BR>

даст на экране:

Институт Ядерной Физики

Московского Государственного Университета

Горизонтальная линия

Используя <HR> вы можете разделить текст горизонтальной чертой.

Внутренние рисунки

Большинство Web браузеров могут показывать рисунки X Bitmap (XBM) или GIF формата вместе с текстом.

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

Чтобы включить рисунок, надо описать гиперссылку на него:

<IMG SRC=image_URL>

где image_URL — URL .gif или .xbm файла, содержащего рисунок. Таким образом, синтаксис ссылки на рисунок аналогичен синтаксису гиперссылки HREF. Автоматически, рисунок выравнивается по нижнему краю сопровождающего его текста, но вы можете задавать взаимное расположение рисунка и текста:

¦ выравнивание по нижнему краю (делается браузером по умолчанию).

¦ выравнивание по верхнему краю.

Форматирование положения рисунка задается включением в гиперссылку пункта ALIGN =:

<IMG ALIGN=top SRC=image_URL>

Также возможны типы выравнивания:

ALIGN = MIDDL

ALIGN = CENTER

Если браузер не поддерживает рисунки

Некоторые WWW-браузеры, (например, используемые на VT100-терминалах) не могут показывать рисунки. Пользователи смогут увидеть только текст, заданный в пункте гиперссылки ALT =. Сопроводительный текст должен быть включен в кавычки. Например:

<IMG SRC="logo.gif" ALT = "logo.gif">

В этом случае пользователь увидит только текст "logo.gif".

Внешние рисунки, звуки и мультипликация

Если вы не хотите, чтобы рисунок замедлял загрузку основного WWW-документа, вы можете поместить рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам должен решить — смотреть или не смотреть ему этот рисунок. Рассмотрим более длинный пример HTML-документа:

<HEAD>

TITLE>Более длинный пример</TITLE>

</HEAD>

<BODY>

<H1>Более длинный пример</H1>

Это простой HTML-документ. Это первый абзац.

<P>Это второй абзац, он демонстрирует некоторые возможности HTML по выделению слов. Это слово написано <I>наклонным</I> шрифтом. Это слово написано <B>жирным</B> шрифтом.

Здесь Вы можете увидеть картинку: <IMG SRC="1_cool.gif">

<P>Это третий абзац, он демонстрирует использование гиперссылок. Это гиперссылка на файл minihtml.html, содержащий простой пример HTML-документа: <A HREF="minihtml.html">Пример HTML-текста</A>.<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>Irina Pankova (iii@vyt.hi.msu.au)</ADDRESS> </DD>