В HTML документы записываются
в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом
редакторе (например, Emacs или vi на UNIX машинах, или любом редакторе на IBM
PC).
Любой гипертекст похож на
книгу и может быть разбит на отдельные структурные элементы:
Собственно документ
Главы, параграфы, пункты, подпункты
Абзацы
Для каждого из этих элементов в HTML существуют определенные
стили, описывающие в каком виде пользователь увидит текст на экране. Пусть мы
создали файл minihtml.html:
<BODY> <TITLE>Пример HTML-текста</TITLE> <H1>Глава 1</H1>
<H2>Параграф 1.</H2> Добро пожаловать в HTML!
Здесь мы расскажем, как надо и как не надо писать гипертексты.<P>
<H2>Параграф 2.</H2><P> </BODY>
Итак, Вы уже поняли, что:
Заголовок документа начинается с <TITLE> и заканчивается
</TITLE>.
Заголовок первого уровня (Главы) выделется символами <H1>
и </H1>)
Заголовоки последующих уровней (параграфы, пункты, подпункты и т.п.) -
символами <Hx> и </Hx>), где x - числа 2,
3, ...
Абзац - символами <P> (В версиях HTML, действующих
сейчас, символа </P> не существует! НО! Он может появится в
последующих версиях!)
NOTE: HTML не различает,
какими буквами набраны символы форматирования: <title>
равносильно <TITLE> или
<TiTlE>.
Не все стили поддержаны всеми WWW-browsers. Если browser не поддерживает
стиль, то он его игнорирует. (Поэтому не страшно если Вы уже сейчас начнете
пользоваться при форматировании абзацев символом </P>. Ниже мы более
подробно остановимся на этом вопросе.)
Каждый HTML-документ должен
иметь заголовок, он показывается отдельно и используется, прежде всего, для
идентификации документа (например, при поиске). Заголовок должен описывать цель
документа и содержать не больше 5-6 слов.
Практически во всех browsers заголовок документа виден в верхней
части экрана (окна).
HTML имеет шесть
уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является
заголовком высшего уровня). По сравнению с нормальным текстом, заголовки
выделяются шрифтом - размером и толщиной букв. Первый заголовок в каждом
документе должен быть выделен <H1>. Синтаксис заголовков:
<Hy> Текст
заголовка</Hy> где
y - число от 1 до 6, определяющее уровень заголовка.
В отличие от документов в больши нстве
текстовых процессоров, прерывания строк и слов в HTML-файлах не существенны.
Обрыв слова или строки может происходить в любом пункте в вашем исходном файле,
при просмотре это прерывание будет проигнорировано. Напомним, что в нашем
примере, первый параграф был представлен как
<H2>Параграф 1.</H2>
Добро пожаловать в HTML!
Здесь мы расскажем, как надо и как не надо писать гипертексты.<P>
В исходном файле два предложения находятся на двух разных
стороках. Web browser игнорирует это перерывание строки и начинает новый абзац
только, после знака < P>. Однако, чтобы сохранить удобочитаемость в
исходных HTML-файлах, мы рекомендуем заголовки размещать на отдельных строках, а
абзацы отделять пустыми строками (в дополнение к < P>).
Также заметим, что хотя в действующих версиях HTML нет признака
форматирования < /P>, мы Вам рекомендуем его употреблять, поскольку он
может быть введен в последующих версиях. К ошибке это не приведет, поскольку все
незнакомые символы browser просто игнорирует. В противном случае, Вам в
последствии, может быть, придется переделывать Ваши HTML-документы. В версии
HTML+ предлагается, по аналогии с описанием заголовков, использовать как
открывающий, так и закрывающий знаки абзаца:
<P>Это абзац в HTML+.</P>
Преимущество этого изменения в том, что Вы будете способны
форматировать абзац. Например, располагать его в цетре строки, выделив его
символами:
Главное преимущество
HTML состоит в его способности связываться с другими документами. Browser
выделяет (обычно цветом и/или подчеркиванием) ключевые слова, являющиеся
гипертекстовыми ссылками (гиперссылками). Описывается ссылка на другой документ
следующим образом:
<A HREF="имя файла">
Текст, который будет служить как обращение к другому
документу</A>.
Приведем приме р такой гипертекстовой ссылки:
<A HREF="minihtml.html">Пример HTML-текста</A>
Здесь ключевые слова `Пример HTML-текста' являются гиперссылкой
на файл minihtml.html, который лежит в той же директории, что и
текущий документ. Вы можете ссылаться на документ, лежащий в любой директории,
описав к нему полный путь. Так, например, ссылку на файл
NJStats.html, лежащий в поддиректории AtlanticStates
можно описать как:
Это так называемые относительные ссылки. Вы также можете
использовать абсолютное имя файла (полный путь). В общем случае, использование
ссылки по абсолютному имени файла более предпочтительно.
URL это абревиатура от Uniform Resource Locator. В него
входит, кроме названия файла и директории: сетевой адрес машины и метод доступа
к файлу.С помощью URL можно запускать удаленные программы, и передавать им
значения. На этом принципе построены шлюзы в другие интернетовские сервиса:
finger, archie, ..... Здесь представлены несколько наиболее часто используемых
типов URL. Допустим файл с именем "online15.zip" лежит на ftp сервере
ftp.simtel.ru в директории /pub/doc/services/ тогда URL этого файла будет
выглядeть так: 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 то заметите, что встречаются два вида:
Первый - это полный URL, а второй - частичный. Частичный URL указывает на
документ который находится на том же сервере и в тойже директории, что и
документ в котором встречается эта ссылка.
Гиперссылки могут также использоваться для соединения с
определенными разделами документов. Предположим, мы хотим соединить документ А с
первой главой документа В, для чего нам необходимо создать именнованную
гиперссылку в документе B.
Здесь вы можете увидеть <A NAME = "Глава
1">Главу 1</a>
Текст первой главы.
Теперь, описывая ссылку в документе A, надо включить не только
имя файла "documentB.html"но также и имя гиперссылки, отделяемое символом (#):
Здесь вы можете увидеть текст<A HREF = "documentB.html#Глава1"> Главы
1 </A> документа B.
Теперь "кликнув" в слово"Главы 1" в документе А, вы переходите
непосредственно в Главу 1 в документе B.
Список определений обычно
состоит из чередования термина ( DT ) и определения ( DD
). Обычно Web browsers определения располагает на новой строке. Приведем
пример списка определений:
<DL>
<DT> NCSA
<DD> NCSA (National Center for Supercomputing Applications).
<DT> CTC
<DD> CTC (Cornell Theory Center).
</DL>
что дает:
NCSA
NCSA (the National Center for Supercomputing Applications)
Как мы уже говорили
выше, в общем случае, текст документа формируется browser, игнорируя пробелы и
переносы строк. Используя <PRE> можно описать в тексте
заданный авторский стиль. (То есть пробелы и пустые строки показаны как пробелы
и пустые строки, и строки будут прерываться там же что и в исходном 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> могут использоваться
гиперссылки. Однако, в пределах < PRE> , необходимо избегать
использовать другие методы форматирования HTML-документов. Заметим, что
поскольку <, >, и & имеют специальное значение в HTML, необходимо
использовать вместо них симвлды ( & lt; , & gt;
, и & amp; , соответственно).
Используя < BLOCKQUOTE> ,
можно включить в текст отдельную цитату. Большинство browsers отделяет такую
цитату от окружающего текста. Например:
<BLOCKQUOTE>
Для того чтобы перейти в другой каталог на том же диске, можно нажать
комбинацию
клавиш [Alt-F10]. После этого на экране изображается дерево каталогов на
диске. Клавишами перемещения курсора следует выделить нужный катлог и нажать
[Enter]. <P>
Можно также набрать первые буквы имени того катлога, в который надо перейти.
Norton Commander постарается сам выделить нужный каталог. <P>
</BLOCKQUOTE>
Что дает на экране:
Для того чтобы перейти в другой каталог на том же диске, можно
нажать комбинацию клавиш [Alt-F10]. После этого на экране изображается дерево
каталогов на диске. Клавишами перемещения курсора следует выделить нужный катлог
и нажать [Enter].
Можно также набрать первые буквы имени того катлога, в который
надо перейти. Norton Commander постарается сам выделить нужный каталог.
Можно описывать специальными стилями отдельные
слова или предложения. Имеются два типа стилей: логический и физический.
Логические стили определяют текст согласно заданному значению, в то
время как физические стили определяют некоторые участки текста.
Зачем существуют два стиля, если они могут дать одинаковый
результат на экране? В ка честве ответа на этот вопрос сошлемнся на аксиому:
"Доверьтесь вашему browser."
В идеале, в SGML, содержание
отделяется от заглавия. Таким образом, SGML определяет
строку как заголовок, но не определяет, что заголовок должен быть написан,
например, жирным шрифтом с размером букв 24 пункта, и должен быть расположен в
верхней части страницы. Преимущество этого подхода (это подобно в концепции
стиля в большинстве текстовых процессоров) - в том, что если Вы решаете заменить
стиль заголовка - все, что Вы должны сделать - это измененить определение
заголовка в Web browser.
Другое преимущество стилей в том, что, например, удобнее
определить что - нибудь как < H1> чем помнить, каким шрифтом
надо описывать заголовок. Это же истинно и для отдельных символов. Например,
рассмотрим <STRONG> . Большинство browsers рассматривают это
как жирный шрифт в тексте. Однако, возможно, что читатель предпочел бы что этом
разделе это выделялось, например, другим цветом. Таким образом, стили дают
пользователю большую свободу в выборе шрифтов.
служит для описания определений. (Это определение.)
< EM >
служит для выделения слов. (Это выделенное слово.)
<CITE>
служит для выделения заголовков книг, фильмов, цитат и т.п. (Это
цитата)
<CODE>
служит для выдлеления программных кодов, текстов программ и т.п.
Изображается шрифтом фиксированной ширины. (The <stdio.h>
header file)
<KBD>
используется для ввода с клавиатуры пользователья. Может быть изображено
жирным шрифтом (но в большинстве browser изображается специальным шрифтом).
(Введите passwd)
<SAMP>
используется для машинных сообщений. Изображается шрифтом фиксированной
ширины. (Seg mentation fault: Core dumped.)
<STRONG>
служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом (Это
очень важно )
<VAR>
используется для символьных переменных. (Это переменная.)
Символы <, >, & и "
имеют в HTML особое значение, как символы форматирования. Но иногда нам
необходимо использовать их в тексте по своему прямому назначению. Для их
введения в текст, Вы должны использовать:
& lt;
- левая скобка <
& gt;
- правая скобка >
& amp;
- &
& quot;
- "
ЗАМЕЧАНИЕ:Специальные символы чувствительны к
регистру: НЕЛЬЗЯ использовать < вместо <.
Большинство Web browsers могут
показывать рисунки X Bitmap (XBM) или GIF формата вместе с текстом.
Поскольку каждый рисунок занимает много времени на отображение
на экране (что замедляет показ документа) то мы не рекомендуем Вам включать
слишком большое количество или чрезмерно большие по размеру рисунки в Ваш
HTML-документ.
Чтобы включить рисунок, надо описать гиперссылку на него:
<IMG SRC=1259/image_URL>
где image_URL - URL
.gif или .xbm файла, содержащего рисунок. Таким
образом, синтаксис ссылки на рисунок аналогичен синтаксису гиперссылки HREF.
Автоматически, рисунок выравнивается по нижнему краю
сопровождающего его текта, но Вы можете задавать взаимное расположение рисунка и
текста:
- это
выравнивание по нижнему краю (делается browser по умолчанию).
- это
выравнивание по верхнему краю.
Форматирование положения рисунка задается включением в
гиперссылку пункта "ALIGN = ":
Некоторые
WWW-browsers, (напоимер, используемые на VT100-терминалах) не могут показывать
рисунки. Такие пользователи смогут увидеть только текст, заданный в пункте
гиперссылки "ALT = ". Сопроводительный текст должен быть включет в кавычки.
Например:
<IMG SRC="1259/LOGO.GIF" ALT = "logo.gif" >
В этом случае пользователь lynx увидит только текст "logo.gif":
Если Вы не
хотите, чтобы рисунок замедлял загрузку основного WWW-документа, Вы можете
поместить рисунок в отдельный документ, написав на него гиперссылку. В этом
случае пользователь сам должен решить - смотреть или не смотреть ему этот
рисунок:
<A HREF = image_URL>Здесь</A> Вы можете
увидеть рисунок.
<B>Это пример <DFN>наложения стилей</B> в
HTML-документе</DFN>
Слова "наложения стилей" определены одновременно как
<B> и <DFN>. Как будут реагировать на это
browser? Очевидно, что разные browser - по разному, и предсказать, каким на
самом деле увидет Ваш текст пользователь, нельзя. Поэтому рекомендуем Вам
избегать такого наложения стилей.
Когда Вы описываете ссылку
<IMG> на рисунок, которого не существует, он заменяется
фиктивным изображением. Проверьте, что рисунок существует, что в гиперссылке
указан правильный URL, и что у пользователей
есть права на использование этого файла.