Данное руководство включает:
4. Об использовании Internet Assistant.
5. Hypertext Markup Language (HTML).
5.6. Включение Java приложений (Applet).
6. Последовательность подготовки HTML документа.
Приложение 2. Таблица спецсимволов HTML.
Приложение 3. Ярлыки форматирования таблиц.
1. Нольден Маттиас. Знакомьтесь: World Wide Web: пер. с нем.-К, 1996
2. Симкин Стив, Барлетт Нейл, Лесле Алекс. Программирование на Java. Путеводитель: пер. с англ. -К.,1996.
3. Николаев А. Простое руководство по HTML. 1996.
4. Chuck Musicano & Bill Kennedy. HTML: The Definitive Guide. O'Reilly & Associates, Inc. 1996)
На WWW-сервере Центра Дистанционного Обучения при МГТУ им. Н.Э.Баумана размещаются различные материалы и документы, связанные с процессом обучения: лекции, учебники, методические разработки; материалы, посвященные научно-исследовательской деятельностью; тестовые и свободно распостраняемые версии программ (либо исходные тексты), связанные с вышеперечисленными темами.
Ответственность за содержание документов, размещенных на данном Web-сервере несут авторы материалов.
В различных операционных системах используется отличающаяся кодировка для кириллицы. В связы с этим, чтобы текст документов нормально читался необходима перекодировка в формат, поддерживаемый системой.
Исходный текст документа лучше всего представлять в ASCII-коде для DOS. Для форматирования необходимо использовать ярлыки HTML(HyperText Markup Language/Язык гипертекстовых ссылок). Ярлыки HTML описаны ниже.
Рисунки, графики и другая графическая информация должны быть представлены в форматах GIF(CompuServe), JPEG(Joint Photographic Experts Group), PCX(PC Paintbrush) или BMP(растры Windows).
Поскольку основные программы просмотра - броузеры поддерживают только форматы GIF и JPEG, предпочтительно передавать файлы изображений в этих форматах.
Для разметки страниц Web-сервера предназначен язык HTML (HyperText Markup Language). Существует международный стандарт HTML2, полностью описывающий все возможные ярлыки и их допустимые сочетания.
Если программы просмотра встречают флажок, который им незнаком, они делают вид что этого флажка вообще не было.
Файл, содержащий HTML документ должен иметь расширение .htm или .html
Для компоновки Web-страниц можно использовать любой текстовый редактор, сохраняющий "только текст", т.е. текст без символов форматирования, установки шрифтов и т.д. Например редактор Norton Commander-а, edit в DOS, Notepad или Write в Windows или vi в UNIX.
Графические и другие нетекстовые компоненты не вставляются в документ непосредственно и хранятся отдельно. Вместо этого в текст вставляется ссылка, указывающая программе просмотра имя файла, содержащего рисунок.
При разработке HTML документа следует учесть, что лучше, чтобы документ состоял не из одного монолитного файла, а был бы разбит на тематические части, соединенные ссылками. Также следует делать ссылки внутри одного файла для упрощения поиска.
4. Об использовании Internet Assistant.
Для конвертации документов, подготовленных в редакторе Microsoft Word 6.0/7.0 существует расширение Internet Assistant, позволяющее переводить документ из формата Word в формат HTML. При переводе практически сохраняется разметка страницы.
Internet Assistant позволяет также редактировать HTML документы. Однако это приложение не понимает кириллицы. Все русские буквы Internet Assistant представляет как спецсимволы (Таблица спецсимволов представлена в приложении 2).
Internet Assistant автоматически переводит содержашиеся в документе рисунки в формат GIF.
5. Hypertext Markup Language (HTML).
5.1. Общие принципы.
Для создания WWW документов был разработан специальный язык разметки гипертекста HTML. Страницы World Wide Web могут содержать ссылки на файлы, имеющие разные форматы (в том числе звуковые, видео, анимационные).
Но сам WWW-документ состоит исключительно из текста в формате ASCII, который не может быть сформатирован при помощи текстовых редакторов (например, в нем нельзя использовать заголовки разных уровней). Поэтому для редактирования текстов в формате HTML пользуются несколько иными способами форматирования, чтобы получить WWW-документы с таким внешним видом как они представлены в окне броузера.
В тело WWW-документа помещаются директивы(ярлыки), причем почти все директивы открываются объявлением имени директивы в угловых скобках, а закрывается область действия директивы тем же именем директивы в угловых скобках, но перед именем теперь добавляется косая черта, например:
<H1> Header1 </H1>.
Ярлыки HTML представлены в приложении 1.
Как правило WWW-документ состоит из двух частей:
заголовка (Head),
тела документа (Body).
В написании директив строчные и прописные буквы не различаются.
Собственно сам WWW-документ тоже заключается в директивы:
<HTML>
<Head> Заголовок </Head>
<Body> Собственно документ </Body>
</HTML>
Чтобы название документа выводилось в титульной строке броузера необходимо заголовок поместить в директивы<Title> и </Title>.
Чтобы создать пустой абзац необходимо воспользоваться директивой <P> которая не закрывается. Для проведения горизонтальной разделительной черты служит директива <HR>. <DD> - для табуляции, <BR> - для перевода строки.
Заголовки в HTML обрамляются директивами <Hx> и </Hx>, причем цифра, идущая после H обозначает размер одного из шести имеющихся форматов (единица - самый крупный формат).
<H3> Заголовок размера 3 </H3>
жирный (Bold) <B>,
наклонный (Italic) <I>,
с подчеркиванием (Underline) <U>.
В HTML существует такое понятие как списки. Они используются для представления больших упорядоченных и неупорядоченных массивов информации.
В HTML-документах используется три вида списков:
Неупорядоченные списки - это списки, использующие для выделения записей символы различного уровня. Например:
<UL>
<UL>
<LI> Первый подпункт
<LI> Второй подпункт
</UL>
1. Первый пункт
2. Второй пункт
3. Третий пункт
Директивы для формирования упорядоченных списков - <OL> и <LI> - применяются аналогично, и формат такого списка следующий:
<OL>
<LI> Второй пункт
<LI> Третий пункт
3. Списки-определения - это списки, состоящие из определяемой части, которая выделяется директивами <DT> и </DT>, и определяющей, которая смещается относительно первой при помощи табуляции <DD>. Обычно они применяются как:
<DL>
<DD> и ассоциированный или определяющий текст
Чтобы встроить в HTML-документ таблицы или другой предварительно сформатированный текст пользуются директивами <PRE> и </PRE>, между которыми и заключается предварительно сформатированный текст. Но для применения предварительно сформатированного текста необходимо использовать машинописную гарнитуру, иначе при использовании пропорциональных шрифтов текст сместится. Для создания таблиц можно применять директивы форматирования таблиц.
Таблица - конструкция HTML, связывающая текст и картинки в ряды, столбцы и ячейки. Таблица может содержать любые элементы HTML, включая multimedia и формы.
Таблица задается с помощью флажков <TABLE> и </TABLE>. Ряды данных задаются ярлыками <TR> </TR> Ячейки данных задаются ярлыками <TD> </TD> или <TH> </TH>. Например:
<TABLE>
<TR><TD> data1.1 </TD> <TD> data1.2 </TD> </TR>
<TR><TD> data2.1 </TD> <TD> data2.2 </TD> </TR>
</TABLE>
Выглядит эта конструкция так:
| data1.1 | data1.2 |
| data2.1 | data2.2 |
Таблица состоит из рядов ячеек, то есть ячейка обязательно должна
быть частью ряда и не выходить за его границы.Если указать разное количество
ячеек в разных рядах программа просмотра автоматически создаст недостающие
пустые ячейки в конце ряда.Чтобы получить разное число ячеек в разных рядах
надо указать параметр COLSPAN в ярлыке <TD>, т.е. <TD COLSPAN = 2>.
Аналогично указав параметр ROWSPAN можно объединить ячейки, соседствующие
по вертикали.
| cell 1.1 colspan = 2 | |
| cell 2.1 | cell 2.2 |
| cell 3.1 | |
Для выравнивания по вертикали можно использовать параметр VALIGN ярлыка <TABLE>. Этот параметр поддерживается только MS Internet Explorer и для совместимости с Netscape лучше использовать этот же параметр, но с ярлыками <TD>, <TR> <TH>.
Для выравнивания по горизонтали с помощью параметра ALIGN ярлыков
<TD>,<TH> и <TR>.
| td valign = | top | baseline | center | bottom |
| База__
Нижняя линия |
MMpp | __MMpp__ | MMpp | MMpp |
| tr align=left
*** |
| tr align=right
*** |
| tr align=center
*** |
<TD> и <TH> -это почти одно и то же. Netscape и Mosaic могут специальным образом (жирный шрифт, выравнивание) изобразить ячейки, обозначенные <TH> </TH>, но другие программы могут этого и не делать. Все параметры <TD> работают и для <TH>.Обычно программы просмотра автоматически определяют нужную ширину и высоту таблицы. Для того чтобы управлять шириной таблицы и ее частей используется параметр width ярлыков <TABLE> и <TD>. ширина может быть указана в пикселах или в процентах:
<TABLE WIDTH=400>
<TH WIDTH = "40%">
Ширина, указанная в процентах, для ярлыка <TABLE> определяется относительно границ окна программы просмотра, а для ярлыка <TD> - относительно ширины таблицы.
Параметры ярлыка <TABLE> CELLPADDING и CELLSPACING работают только в Netscape.
По умолчанию CELLPADDING = 1 CELLSPACING = 2.
Текстовая программа просмотра lynx полностью игнорирует табличные ярлыки. Поэтому для сохранения читабельности хорошо отделять содержимое отдельных ячеек ярлыками параграфов (<P>) .
Старые версии Netscape (до 2-ой) содержат ошибку, вызывающую аварийное завершение программы при попытке изменить размер окна, содержащего конструкцию "таблица в таблице". Поэтому лучше эту конструкцию не использовать.
Обычно программы просмотра сначала принимают все компоненты таблички и только потом целиком отображают ее на экране. Поэтому большие тексты лучше разбивать на несколько таблиц.
Полный синтаксис всех табличных ярлыков приведен в приложении 3.
В любом месте основной части документа можно ввести гипертекстовую ссылку на другой документ или файл. Причем не имеет значения где будет находиться этот файл, на местном компьютере или на удаленном сервере.
Чтобы можно было корректно следовать гипертекстовым ссылкам, они вводятся в HTML-документ с помощью унифицированного локатора ресурса (Uniform Resource Locator - URL). URL представляет собой правила, которые унифицируют синтаксис написания различных ссылок. Перед указанием пути ставится префикс, по которому броузер распознает, о каком виде связи (или протоколе) идет речь в данном случае. Этот префикс завершается двоеточием (:) и двумя косыми чертами (//).
Например для WWW-документов используется синтаксис:
http://path/document
или для Gopher-меню:
gopher://path/document
Если имеется ввиду определенный файл, то:
file://localhost/путь
или FTP-сервер
ftp://path/document
Для встраивания ссылок в текст HTML используется следующий синтаксис:
< A HREF="URL">Обозначение гипертекстовой ссылки</A>
Основная команда <A> (от слова "Anchor" - якорь).
Например:
<A HREF="file://localhost/d:\html\example1.htm">
Example 1 </A>
Чтобы встроить бинарный файл (например рисунок) в HTML-документ в нужном месте необходимо вставить ссылку на этот файл. Для этого надо воспользоваться директивой:
<img align=Позиция src="URL">
Аргумент align указывает позицию отбражаемого файла:
Bottom (Внизу)
Top (Вверху)
Middle (Посередине)
5.6. Включение Java приложений (Applet).
© Rachel Gollub rmg@eng.sun.com
Кроме того можно встроить Java-приложение (Applet) в HTML-документ. Он встраивается между директивой <Applet> и </Applet>. Там указываются параметры размещения апплета высота и ширина его окна, а так же его имя. Например:
<applet code="Appl.class" width=300 height=100 align=left>
<param name=text value="Hello, world!">
</applet>
или
<applet code="Clock2.class" width=170 height=150>
</applet>
Как видно из примера между директивами <Applet> могут располагаться директивы, которые передают параметры в код апплета.
6. Последовательность подготовки HTML документа.
Для получения HTML документа необходимо проделать следующее:
1. Создать минимальный документ вида:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
2. Вставить внутрь ярлыков <BODY> </BODY> исходный текст.
3. Разметить текст (выделить абзацы, заголовки и т.д.).
4. Конвертировать графические файлы в формат GIF.
5. Вставить ссылки на нетекстовые файлы ( графика, звук, Java-приложения ).
6. Вставить гипертекстовые ссылки (внуренние и внешние).
7. Перекодировать документ в форматы КОИ-8(UNIX), Основную(WIN1251) и альтернативную(ASCII).
8. Разместить перекодированные варианты в разных директориях.
9. Создать индексный файл index.html со ссылками на перекодированные варианты.
Ярлыки Структуры Документа
<HTML> ... </HTML>
HTML идентификатор определяет документ как содержащий HTML ярлыки.
<HEAD> ... <HEAD>
HEAD идентификатор определяет часть заголовка документа.
<BODY> ... </BODY>
Ярлык BODY опознает компонент тела HTML документа. Определенно, тело
документа может содержать связи, текст и форматированную информацию, заключенную
между ярлыками
< BODY > и < /BODY >.
Ярлыки привязки
<A> URL: Обозначение гипертекстовой ссылки </A>
URL (Uniform Resource Locator) - Унифицированный указатель ресурса
login Необязательное имя login. Если login не указан, принимается login anonimous, и login@hostname проходит как пароль.
path Путь к загружаемому файлу или просматриваемой директории.
TYPE= Тип передаваемых данных
A = ASCII
B = Двоичная передача
D = Просмотр директории
host Полностью определенное сетевое имя узла или IP адрес.
port Номер порта подсоединения. Если port = 0, то по умолчанию подключается порт 80.
path Абсолютный или относительный путь к пункту.
searchpart Необязательный критерий поиска
Где gopher-путь - один из
<gophertype><selector>
<gophertype><selector>%09<search>
<gophertype><selector>%09<search>%09<gopher+_string>
host Полностью определенное имя узла сети или IP адрес.
port Номер порта подсоединения. Если port = 0, то по умолчанию используется порт 70.
gophertype Односимвольное поле, обозначающее Gopher ресурс..
Email-адрес Действительный адрес электронной почты Internet.
newsgroup-name Название конференции. Например: comp.infosystems.www.misc.
usert (Необязательно) ID пользователя, необходимое для входа в систему.
password (Необязательно) Пароль для пользователя
host Полностью определенное имя узла сети или IP адрес.
port Номер порта подсоединения. Если port = 0, то по умолчанию используется порт 23.
или
WAIS://host[:port]/database?search
или
WAIS://host[:port]/database/wtype/wpath
host Полностью определенное имя узла сети или IP адрес.
port Номер порта подсоединения. Если port = 0, то по умолчанию используется порт 210.
database Название WAIS запрашиваеиой базы данных.
search Объект поиска
wtype Специфический документ в пределах базы данных WAIS.
wpath ID документа WAIS
Элементы форматирования блоков
Ярлык адреса определяет такую информацию как адрес, подпись и авторство, часто наверху или в конце документа. Обычно Адрес показан курсивом и может быть назначен. Ярлык Адреса подразумевает перенос параграфа до и после.
Ярлык цитаты используется, чтобы вставить текст, запрошенный из другого источника.
Обычно цитата представляется как небольшая дополнительная левая и правая врезка, и-или курсивом. Цитата прерывает параграф, и обычно выделяется сверху и снизу.
Разделяет текст горизонтальной линией.
Перевод строки определяет, что текст начинается с новой строки. Параметры новой строки при этом сохраняются старые.
Печать текста с сохранением пробелов и переносов строк, определенных в исходном ASCII тексте. Обычно используется для представления табличных данных.
Примечание: При выводе на экран не учитывается различия в размерар шрифтов, при этом возможно "съезжание" предварительно сформатированных данных, например формул. Для форматирования таких данных желательно применять таблицы.
Каждый HTML документ должен содержать ярлык TITLE. В названии необходимо
выразить общее содержание документа и может использоваться в списке истории
и как ярлык для окна, показывающего документ. В отличие от заголовков,
названия обычно не показываются при просмотре документа непосредственно.
Название необходимо объявить в пределах главы документа, и оно не
может содержать ссылки, признаки параграфа, или выделение. В документе
может быть только один заголовок.
Ярлыки Списка
Определение списка - список термов и соответствующих определений. Определение списка обычно заключается в форматировании отступов элементов слева и определение стиля размещения параграфа, включаемое после терма.
Директивный список используется, чтобы представить список пунктов, содержащих до 20 знаков каждый. Пункты в директивном списке могут быть устроены в колонках, обычно шириной 24 знака.
Директивный список должен начинаться с ярлыка <DIR > , за которым немедленно следует ярлык <LI> (list item).
Ярлык Списка используется, чтобы определять пункт в пределах списка.
Список Меню - список пунктов обычно с одной строкой в пункте. Стиль списка меню более компактен чем стиль неопределенного списка.
Список меню должен начинаться ярлыком < MENU >, за которым немедленно следует ярлык <LI> (list item).
Нумерованный список используется, чтобы представить пронумерованный список пунктов, отсортированных в необходимой последовательности или в порядке важности.
Нумерованный список должен начинаться ярлыком < OL >, за которым немедленно следует ярлык <LI> (list item).
Ненумерованный список используется, чтобы представить список пунктов, которые обычно отделяются отступами и-или отмечены маркерами.
Элементы форматирования символов
Этот ярлык определяет, что текст должен быть показан утолщенным шрифтом, где возможно.
Ярлык Цитаты указывает цитату; обычно выводимую курсивом.
Элементы Кода указывают пример кода; обычно выводится как монолитный.
Ярлык выделяет текст (обычно курсивом).
Italic определяет, что текст должен быть показан курсивом, где возможно.
Ярлык Клавиатуры обозначает текст, вводимый пользователем. Обычно выводится как монолитный.
Отмеченный ярлык обычно показываемый утолщенным шрифтом.
Ярлык Телетайпа определяет, что текст должен быть показан машинописным шрифтом.
Элементы Изображения
<IMG [ALIGN= TOP | MIDDLE | BOTTOM] [ALT=] SRC= [ISMAP] >
Ярлык Изображения используется, чтобы включить действующую графику в HTML документ. В этот ярлык не может вкладываться другой HTML текст.
ALIGN = TOP | MIDDLE | BOTTOM -Признак привязки по ВЕРХУ(TOP) , СЕРЕДИНЕ(MIDDLE) или ВНИЗУ(BOTTOM), который определяет, выровнены ли следующие линии текста с вершиной, серединой, или основанием изображения.
ALT= (Необязательно) Текст как альтернатива графике для представления в неграфических средах.
SCR= Значение признака SRC - URL вложенного документа. Вложенными
могут быть только изображения но, не HTML текст. Синтаксис SRC - такой
же, как у признака HERF ярлыка
< A >. SRC обязателен.
ISMAP
ISMAP ( карта) признак опознает изображение как карту изображения. Карты Изображения - графика, в которой некоторые области являются связаными с URL. Щелкая на различных областях,можно обращаться к различным ресурсам из одного рисунка.
Примечание. Спецсимволы позволяют броузеру выводить символы, которые
используются как служебные (угловые скобки и т.п.) а также символы с кодом
больше 127(Последние отображаются на экране по-разному в зависимости от
установленного шрифта и типа кодировки, воспринимаемой броузером).
| Знак | Имя | Синтаксис | Определение |
| < | lt | < | Знак меньше |
| > | gt | > | Знак больше |
| & | amp | & | Амперсанд |
| " | quot | " | Знак двойных кавычек |
| © | copy | © | Знак Copyright |
| Б | Aacute | Á | Заглавная A, правый штрих |
| А | Agrave | À | Заглавная A, левый штрих |
| В | Acirc | Â | Заглавная A, домик |
| Г | Atilde | Ã | Заглавная A, тильда |
| Е | Aring | Å | Заглавная A, круг |
| Д | Auml | Ä | Заглавная A, точки |
| Ж | AElig | Æ | Заглавная AE дифтонг (ligature) |
| З | Ccedil | Ç | Заглавная C, с хвостом |
| Й | Eacuete | É | ЗаглавнаяE, правый штрих |
| И | Egrave | È | Заглавная E, левый штрих |
| К | Ecirc | Ê | Заглавная E, домик |
| Л | Euml | Ë | Заглавная E, точки |
| Н | Iacute | Í | Заглавная I, правый штрих |
| М | Igrave | Ì | Заглавная I, левый штрих |
| О | Icirc | Î | Заглавная I, домик |
| П | Iuml | Ï | Заглавная I, точки |
| Р | ETH | Ð | Заглавная Eth, Исландская |
| C | Ntilde | Ñ | Заглавная N, тильда |
| У | Oacute | Ó | Заглавная O, правый штрих |
| Т | Ograve | Ò | Заглавная O, левый штрих |
| Ф | Ocirc | Ô | Заглавная O, домик |
| Х | Otilde | Õ | Заглавная O, тильда |
| Ц | Ouml | Ö | Заглавная O, точки |
| Ш | Oslash | Ø | Заглавная O, перечеркнутая |
| Ъ | Uacute | Ú | Заглавная U, правый штрих |
| Щ | Ugrave | Ù | Заглавная U, левый штрих |
| Ы | Ucirc | Û | Заглавная U, домик |
| Ь | Uuml | Ü | Заглавная U, точки |
| Э | Yacute | Ý | Заглавная Y, правый штрих |
| Ю | THORN | Þ | Заглавная THORN, Исландский |
| Я | szlig& | szlig; | Строчная sharp s, Немецкая (sz ligature) |
| б | aacute | á | Строчная A, правый штрих |
| а | agrave | à | Строчная A, левый штрих |
| в | acirc | â | Строчная A, домик |
| г | atilde | ã | Строчная A, тильда |
| е | aring | å | Строчная A, круг |
| д | auml | ä | Строчная A, точки |
| ж | aelig | æ | Строчная AE diphthong (ligature) |
| з | ccedil | ç | Строчная C, cedilla |
| й | eacuete | é | Строчная E, правый штрихи |
| и | egrave | è | Строчная E, левый штрих |
| к | ecirc | ê | Строчная E, домик |
| л | euml | ë | Строчная E, точки |
| н | iacute | í | Строчная I, правый штрих |
| м | igrave | ì | Строчная I, левый штрих |
| о | icirc | î | Строчная I, домик |
| п | iuml | ï | Строчная I, точки |
| р | eth | ð: | Строчная Eth, Исландская |
| с | ntilde | &ntild; | Строчная N, тильда |
| у | oacute | ó | Строчная O, правый штрих |
| т | ograve | ò | Строчная O, левый штрих |
| ф | ocirc | ô | Строчная O, домик |
| х | otilde | õ | Строчная O, тильда |
| ц | ouml | ö | Строчная O, точка |
| ш | oslash | ø | Строчная O, перечеркнутая |
| ъ | uacute | ú | Строчная U, правый штрих |
| щ | ugrave | ù | Строчная U, левый штрих |
| ы | ucirc | û | Строчная U, домик |
| ь | uuml | ü | Строчная U, точки |
| э | yacute | ý | Строчная Y, правый штрих |
| ю | thorn | þ | Строчная THORN, Исландский |
параметры
ALIGNBGCOLOR (только Internet Explorer и Netscape 3.0)
BORDERBORDERCOLOR (только Internet Explorer)
BORDERCOLORDARK (только Internet Explorer)
CELLPADDING (только Netscape)
CELLSPACING (только Netscape)
HSPACEVALIGN (только Internet Explorer)
VSPACEWIDTH
закрывающий ярлык </TABLE>, обязателен
параметры
ALIGN
BGCOLOR (только Internet Explorer и Netscape 3.0)
BORDERCOLOR (только Internet Explorer)
BORDERCOLORLIGHT (только Internet Explorer)
BORDERCOLORDARK (только Internet Explorer)
VALIGN
закрывающий флажок </TR>, может быть опущен
<TD> и <TH>
функция : Определяет ячейку в таблице
параметры
ALIGN
BGCOLOR (только Internet Explorer и Netscape 3.0)
BORDERCOLOR (только Internet Explorer)
BORDERCOLORLIGHT (только Internet Explorer)
BORDERCOLORDARK (только Internet Explorer)
COLSPAN
NOWRAP
ROWSPAN
VALIGN
WIDTH
закрывающий флажок </TD> или </TH>, может быть опущен.
параметры
ALIGN
VALIGN (только Internet Explorer)
закрывающий флажок </CAPTION>, обязателен.