Язык разметки гипертекстов html

Документы, хранящиеся на WWW, подготавливаются на специальном языке HTML (Hypertext Markup Language - «Язык разметки гипертекстов»). В HTML текст кодируется в ASCII и поэтому может быть создан и отредактирован в любом текстовом редакторе. Кроме самого текста в документах имеются флаги разметки, которые интерпретируются клиентской программой просмотра (броузером) и позволяют воспринимать документ именно как гипертекст.

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

• собственно текст;

• главы, параграфы, пункты, подпункты;

• абзацы.

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

<BODY>

<ТIТLЕ>Пример НТМL-текста</ТITLЕ>

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

<Н2>Параграф 1.</Н2>

Добро пожаловать в HTML!

Это пример гипертекста.<Р>

<Н2>Параграф 2.</Н2><Р>

<А HREF="minihtml.html">npимep НТМL-текста</А>

</BODY>

Из данного примера видно, что

• заголовок документа начинается с <TITLE> и заканчивается </TITLE>;

• заголовок первого уровня (главы) выделяется символами <Н1> и </Н1>;

•заголовки последующих уровней (параграфы, пункты, подпункты ит.п.) -символами <Нх> и </Нх>, где х - числа 2,3, ...

• абзац - символами <Р>.

Не все стили поддерживаются всеми WWW-броузерами. Если программа просмотра не поддерживает стиль, то она его игнорирует.

Основной текст отделяется от сопроводительного символами

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

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

<HEAD><TITLE>Заголовок</TITLE><HEAD>

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

<Ну> Текст заголовка</Ну>

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

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

<Н2>Параграф 1.</Н2>

Добро пожаловать в HTML!

Это пример гипертекста.<Р>

В исходном файле два предложения находятся на двух разных строках. Программа просмотра игнорирует это прерывание строки и начинает новыйабзацтолько,после знака <Р>.

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

<А НRЕF="имя файла">

Текст, который будет служить как обращение к другому документу</А>. Приведем пример такой гипертекстовой ссылки:

<А HREF="minihtml.html>примep HTML-текста</A>

Здесь ключевые слова «Пример HTML-текста» являются гиперссылкой на файл minihtml.html, который находится в той же директории, что и текущий документ. Также можно ссылаться на документ в любой директории, описав к нему полный путь. Например, ссылку на файл NJStais.html, лежащий в поддиректории AtlanticStates, можно описать так:

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

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

Ссылки на документы, хранящиеся на других серверах, записываются суказанием их URL:

<AHref="http://www.simteI.ru/news/snews.http">News</A>

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

Здесь вы можете увидеть

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

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

Здесь вы можете увидеть текст

<AHREF="documentB.html#Глава"> Главы 1 </А> документа В

Теперь «кликнув» в слово «Главы I» в документе А, можно перейти непосредственно в Главу 1 в документе В.

Техника соединения с разделами текущего документа аналогична описанной выше, только опускается имя файла. Вот, например, связь с Главой 1 внутри того же самого файла (Документ В):

Это <А HREF = "#Глава1">Глава 1</А> текущего документа.

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

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

Например:

<ul>

<LI> яблоки

<LI> бананы

</UL>

что дает на экране:

* яблоки

* бананы

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

Например:

<OL>

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

<LI> персики

<LI> виноград

</OL>

что дает на экране:

1. апельсины 2. персики 3. виноград

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

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

<ul> <LI> Крупные города России;

<UL>

<LI> Москва

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

</UL>

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

<UL>

<LI> Киев

</UL>

что дает на экране:

* Крупные города России:

+ Москва + Санкт-Петербург

* Крупные города Украины:

+Киев

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

<ADDRESS> Web-master Воронежского педуниверситета den@vspu.ac.ru</ADDRESS>

что дает на экране: Web-master Воронежского педуниверситета den@vspu.ac.ru

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

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

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

<ЕМ> служит для выделения слов. (Это выделенное слово.)

<С1ТЕ> служит для выделения заголовков книг, фильмов, цитат и т.п. (Это цитата.)

<CODE> служит для выделения программных кодов, текстов программ и
т. п. Изображается шрифтом фиксированной ширины. (The <stdio.h> header file)

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

<SAMP> используется для машинных сообщений. Изображается шрифтом фиксированной ширины. (Segmentation fault: Core dumped)

<STRONG> служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом. (Это очень важно.)

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

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

<В>, </В> жирный шрифт (этожирный шрифт)

<1>, </1> наклонный шрифт (это наклонный шрифт)

<ТТ>, </TТ> фиксированный шрифт (шрифт заданной ширины) (это fixed шрифт)

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

Этот текст снизу от линии.

Большинство программ просмотра могут показывать рисунки Х Bitmap (XBM) или GIF формата вместе с текстом. Чтобы включить рисунок, надо описать гиперссылку на него:

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

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

ALIGN = MIDDL

ALIGN = CENTER

Поскольку пересылка картинки замедляет загрузку основного WWW-документа, рекомендуется помещать рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам может решить - смотреть или не смотреть ему этот рисунок;

<А HREF = ima.ge_URL>Здесь</A> вы можете увидеть рисунок.

Рассмотрим более длинный пример HTML-документа:

<HEAD>

<ТITLЕ>;Более длинный пример</ТIТLЕ> </HEAD>

<BODY>

<Н1>Более длинный пример</Н1> Это простой HTML-документ. Это первый абзац. <Р>

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

Это слово написано <I> наклонным </I> шрифтом.

Это слово написано <В> жирным </В> шрифтом.

Здесь вы можете увидеть картинку:

Это третий абзац, он демонстрирует использование гиперссылок.

Это гиперссылка на файл minihtml.html, содержащий простой пример HTML-документа:

<А HREF="minihtml.htmr>ripHMep HTML-TeKcra</A>.<P>

<Н2>Заголовок второго уровня</Н2>

Дальнейший текст будет написан шрифтом фиксированной ширины: <Р>

<PRE> On the stiff mig up there Hunches a wet black rook Arranging and rearranging its feathers in the rain ...

</PRE> Это ненумерованный список, состоящий из двух элементов: <Р>

<UL>

<LI> смородина

<LI> черника

</UL>

Конец документа. <Р>

<ADDRESS> Web-master Воронежского педуниверситета

den@vspu.ac.ru</ADDRESS>

<231 232 233234235 236 237 >

Дата добавления: 2015-10-13; просмотров: 746;