Введение в язык HTML

Лекция №15. Современные программные средства.

Назначение языка. Теги.

Опр. 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.

Минимально возможный HTML документ

Клише HTML документа:

<TITLE>Простейший HTML пример</TITLE>

<H1>Это заголовок первого уровня</H1>

Добро пожаловать в мир HTML.

Это первый параграф.<P>

А это второй.<P>

HTML использует термины гипертекста для информирования просмоторщика о способе вывода текста. Вышеприведенный пример использует:

· <TITLE> tag (термин, пометка, описание элемента - будем использовать слово tag) (и соответствующий ему </TITLE> tag), которые определяют заголовок документа.

· <H1> tag заголовка (и соответствующий </H1>)

· <P>tag - разделитель параграфов

Опр. HTML tag-и состоят из знака меньше (<), за ним следует имя tag-а и оканчивается знаком больше (>). Tag-и обычно парные, заключительный tag выглядит также, как и начальный за исключением slash'а (/), предшествующего тексту внутри скобок. Например: <H1> информирует просмотрщика о начале заголовка первого уровня </H1> говорит о том, что заголовок завершен.

Правило: Основным исключением из правила пар является <P> tag. Tag </P> не существует. HTML не различает больших и малых букв. <title> эквивалентно <TITLE> или <TiTlE>. Не все tag-и поддерживаются всеми просмотрщиками WWW. Если просмотрщик не поддерживает tag, то он его игнорирует.

Основные элементы языка. Название документа

Каждый HTML документ должен иметь название. Оно обычно располагается отдельно от документа и используется преимущественно для идентификации документа (например, WAIS поиск). Можно обходиться полудюжиной слов для описания цели (сути) документа.

Заголовки

HTML имееет 6 уровней заголовков, пронумерованных от 1 до 6, где первый выделен наиболее сильно. Заголовки показываются фонтами типа Large или Bold чаще, чем применяемыми для обычного текста. Первый заголовок каждого документа нужно обозначать <H1>. Синтаксис tag-а заголовка: <Hy>Текст заголовка </Hy >,

где y - это число между 1-им и 6-ю, определяющие уровень заголовка.

Например, код для строки заголовка ``Заголовок'' определяется так: <H3>Заголовок</H3>

Параграфы

В отличие от большинства текстовых процессоров, в HTML файлах разбиение на строки не принципиально. Переход на новую строку может произойти в любой точке Вашего файла, последовательные пробелы превращаются в один. (Есть пара исключений, например, пробел который следует за <P> или <Hy> tag, игнорируется.) Заметьте, что в нашем примере первый параграф записывается как: Это первый параграф. <P>

В исходном файле между предложениями есть перевод строки. А Web просмотрщик игнорирует этот перевод строки и начинает новый параграф только когда достигается <P> tag.

Вы должны отделять параграфы с помощью <P>. Просмотрщик игнорирует пробелы и пустые строки в исходном тексте. HTML почти всегда полагается на инструкции форматирования и без <P> tag-а весь документ становится одним большим параграфом. (Исключение составляет текст, определенный как ``предформатированный'', который описан ниже).

Например: <TITLE> Это простейший HTML пример</TITLE><H1> Заголовок первого уровня</H1>Добро пожаловать в мир HTML. Это первый параграф.<P>. А это второй.<P>

будет давать тот же результат, что и наш первый пример.

Однако, чтобы сохранить читаемость HTML файлов, заголовки должны быть на различных строках и параграфы отделены пустой строкой (В дополнении к <P> tag-у).

HTML+, развивает текущий стандарт HTML, где <P> становится ``контейнером'' для текста, также как текст заголовков первого уровня ``содержится'' внутри

<H1>... </H1>: <P>. Это параграф в HTML+.</P>

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

Преимуществом этого изменения в том, что Вы можете устанавливать параметры форматирования параграфа. Например, в HTML+, Вы можете отцентрировать параграф, определив: <P ALIGN=CENTER>

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

Основная мощь HTML происходит из его возможности связывать части текста (и даже изображения) с другими документами. Просмотрщик выделяет эти области (обычно цветом и/или подчеркиванием) показывая, что это гипертекстовая ссылка (часто сокращаемое до гиперссылки или просто ссылки).

Одиночный гипертекстовый связующий HTML tag: <A>, его называют anchor (якорь). Чтобы включить anchor в свой документ:

1. Начните anchor с <A. (После A стоит пробел.)

2. Определите документ, на который будет указывать ссылка, введя параметр HREF="имя_файла" и, после этого, закрывающую скобку: >

3. Наберите текст, который будет служить гипертекстовой ссылкой в текущем документе.

4. Завершите anchor набрав tag: </A>.

Вот пример гипертекстовой ссылки:

<A HREF="MaineStats.html">Maine</A>

Это выражение делает слово ``Maine'' гипертекстовой ссылкой на документ MaineStats.html, который находится в той же директории, что и первый документ. Вы можете сделать ссылку и на документ из другой директории, указав относительный путь из текущего документа к документу, на который делается ссылка. Например, ссылка на файл NJStats.html расположенный в поддиректории AtlanticStates будет выглядеть так:

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

Это называется относительной ссылкой. Вы можете использовать также полное имя файла. Для указания пути используйте стандартный синтаксис UNIX.

Относительные ссылки в сравнении с абсолютными путями до файлов

В основном используются относительные ссылки, потому что

a) Меньше набирать текста.

b) Легче переместить группу документов в другое место, потому что относительные ссылки останутся корректными.

Значение Port может быть опущено. (Не указывайте это, пока кто-нибудь явно не укажет Вам на необходимость использования).

К примеру, для включения ссылки на этот пример в свой документ, Вы должны использовать:

<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">

NCSA's Beginner's Guide to HTML</A>

Ссылки на конкретные места в других документах

Ссылки (anchors) также могут быть использованы для перехода к определенным частям других документов. Предположим, вы хотите сделать ссылку из документа А на некоторую часть документа В. (Назовем этот файл documentB.html.) Во-первых, Вам необходимо создать named anchor (именованный якорь, ссылка с именем) в документе В.

Например, чтобы создать anchor с именем ``Jabberwocky'' в документе В, наберите:

Это <A NAME = "Jabberwocky">некоторый текст</a>

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

Это моя <A HREF = "documentB.html#Jabberwocky"> ссылка</A> на документ В.

Теперь нажатие на слово ``ссылка'' в документе А отправит читателя сразу к словам ``некоторый текст'' в документе В.

Ссылки на конкретные места в текущем документе

Техника построения ссылок такая-же, за исключением того, что имя файла не требуется.

К примеру, для ссылки на ``Jabberwocky'' anchor изнутри того-же самого файла (документ В), надо использовать:

Это <A HREF = "#Jabberwocky">ссылка на Jabberwocky</A> изнутри документа В.

Дополнительные Tag-и языка

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

Списки.

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

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

Правило: Для создания ненумерованного списка,

1. Начните с открытия списка с помощью <UL> tag-а.

2. Наберите <LI> tag и, за ним, элемент списка. (Закрывающий tag </LI> не нужен.)

3. Наберите tag, закрывающий список </UL>.

Пример: пример списка из двух элементов:

<UL>

<LI> яблоки

<LI> бананы

</UL>

На выходе увидим:

· яблоки

· бананы

Элемент <LI> может содержать в себе множество параграфов. Не забудьте разделять параграфы с помощью <P>.

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

Нумерованный список (также называемый "порядковым" списком. От него происходит название tag-а) идентичен ненумерованному списку, исключая использование <OL> вместо <UL>. Элементы определяются использованием tag-а <LI>.

Пример: Следующий HTML текст

<OL>

<LI> апельсины

<LI> персики

<LI> виноград

</OL>

будет приводить к выводу:

1. Апельсины

2. Персики

3. Виноград

Встроенные изображения

Большинство просмотрщиков могут выводит встроенные изображения (такие как, изображения после текста) в форматах 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 выравнивает текст с центром изображения.

Внешние изображения, звуки и анимация

Вы можете пожелать иметь открытое изображение, как отдельный документ, когда пользователь переходит по ссылке, выбрав встроенную версию изображения, включенного в Ваш документ. Оно может рассматриваться как внешнее и это очень полезно, если не хотите замедлять загрузку главного документа с большими встроенными изображениями.

Для включения ссылки на внешнее изображение, используйте:

<A HREF = image_URL>описание ссылки</A>

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

<A HREF = "QuickTimeMovie.mov">описание ссылки</A>

определяет ссылку на QuickTime видео

Литература: 2осн.., [187-195]; 9 доп., [395-398], 2осн., [197-201], [205-207]; 9доп., [402-405].

Контрольные вопросы:

1. Что такое тэг?

2. Какова структура Web- страницы?

3. Какие форматы графических файлов могут быть использованы?

4. Что такое Anchor –область?

5. Виды ссылок, используемых в документах?

6. Теги и атрибуты, создания нумерованных списков?

7. Теги и атрибуты, создания маркированных списков?

Дата добавления: 2014-01-06