3.4.3. Язык разметки гипертекстов html
К оглавлению1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1617 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
Документы, хранящиеся на WWW, подготавливаются на специальном языке HTML (Hypertext Markup Language - «Язык разметки гипертекстов»). В HTML текст кодируется в ASCII и поэтому может быть создан и отредактирован в любом текстовом редакторе. Кроме самого текста в документах имеются флаги разметки, которые интерпретируются клиентской программой просмотра (броузером) и позволяют воспринимать документ именно как гипертекст.
Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы:
• собственно текст;
• главы, параграфы, пункты, подпункты;
• абзацы.
Для каждого из этих элементов в HTML существуют определенные стили, описывающие, в каком виде пользователь увидит текст на экране. Пусть мы создали файл minihtml.php:
<BODY>
<ТIТLЕ>Пример НТМL-текста</ТITLЕ>
<Н1>Глава 1</Н1>
<Н2>Параграф 1.</Н2>
Добро пожаловать в HTML!
Это пример гипертекста.<Р>
<Н2>Параграф 2.</Н2><Р>
<А HREF="minihtml.php">npимep НТМL-текста</А>
</BODY>
Из данного примера видно, что
• заголовок документа начинается с <TITLE> и заканчивается </TITLE>;
• заголовок первого уровня (главы) выделяется символами <Н1> и </Н1>;
•заголовки последующих уровней (параграфы, пункты, подпункты и т.п.) -символами <Нх> и </Нх>, где х - числа 2,3, ...
• абзац - символами <Р>.
Не все стили поддерживаются всеми WWW-броузерами. Если программа просмотра не поддерживает стиль, то она его игнорирует.
Основной текст отделяется от сопроводительного символами
<BODY> </BODY>
Каждый HTML-документ должен иметь заголовок, который показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Практически во всех броузерах заголовок документа виден в верхней части экрана (окна).
Для выделения заголовка служат символы
<HEAD><TITLE>Заголовок</TITLE><HEAD>
HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом - размером и толщиной букв. Первый заголовок в каждом документе должен быть выделен <Н1>. Синтаксис заголовков:
<Ну> Текст заголовка</Ну>
где у - число от 1 до 6, определяющее уровень заголовка.
В отличие от документов, в большинстве текстовых процессоров прерывания строк и слов в HTML-файлах несущественны. Обрыв слова или строки может происходить в любом месте в исходном файле, при просмотре это прерывание будет проигнорировано. Напомним, что в нашем примере, первый параграф был представлен как
<Н2>Параграф 1.</Н2>
Добро пожаловать в HTML!
Это пример гипертекста.<Р>
В исходном файле два предложения находятся на двух разных строках. Программа просмотра игнорирует это прерывание строки и начинает новый абзац только,после знака <Р>.
Главное преимущество HTML состоит в его способности связываться с другими документами. Броузер выделяет (обычно цветом и/или подчеркиванием) ключевые слова, являющиеся гипертекстовыми ссылками (гиперссылками). Описывается ссылка на другой документ следующим образом:
<А НRЕF="имя файла">
Текст, который будет служить как обращение к другому документу</А>. Приведем пример такой гипертекстовой ссылки:
<А HREF="minihtml.php>примep HTML-текста</A>
Здесь ключевые слова «Пример HTML-текста» являются гиперссылкой на файл minihtml.php, который находится в той же директории, что и текущий документ. Также можно ссылаться на документ в любой директории, описав к нему полный путь. Например, ссылку на файл NJStais.php, лежащий в поддиректории AtlanticStates, можно описать так:
<А HREF="AtlanticStates/NJStats.phpI">New Jersey</A>
Это - так называемые относительные ссылки. Можно также использовать абсолютное имя файла (полный путь). В общем случае, использование ссылки по абсолютному имени файла более предпочтительно.
Ссылки на документы, хранящиеся на других серверах, записываются с указанием их URL:
<AHref="http://www.simteI.ru/news/snews.http">News</A>
Гиперссылки могут также использоваться для соединения с определенными разделами документов. Предположим, необходимо соединить документ А с первой главой документа В. Для этого надо создать именованную гиперссылку в документе В:
Здесь вы можете увидеть
<А NAME = "Глава 1">Главу 1</А> текст первой главы.
Теперь, описывая ссылку в документе А, надо включить не только имя файла documentB.php, но также и имя гиперссылки, отделяемое символом (#):
Здесь вы можете увидеть текст
<AHREF="documentB.php#Глава"> Главы 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>
</UL>
что дает на экране:
* Крупные города России:
+ Москва + Санкт-Петербург
* Крупные города Украины:
+Киев
Флаг <ADDRESS> используется для того, чтобы определить автора документа и способы контакта с ним (например, e-mail адрес). Обычно это последний пункт в файле.
что дает на экране: 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 формата вместе с текстом. Чтобы включить рисунок, надо описать гиперссылку на него:
<IMG SRC=image_URL>
где image_URL - URL .gif или .xbm файла, содержащего рисунок. Таким образом, синтаксис ссылки на рисунок аналогичен синтаксису гиперссылкн HREF. Форматирование положения рисунка задается включением в гиперссылку пункта "ALIGN = ":
<IMG ALIGN=top SRC=image_URL>
Также возможны типы выравнивания:
ALIGN = MIDDL
ALIGN = CENTER
Поскольку пересылка картинки замедляет загрузку основного WWW-документа, рекомендуется помещать рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам может решить - смотреть или не смотреть ему этот рисунок;
<А HREF = ima.ge_URL>Здесь</A> вы можете увидеть рисунок.
Рассмотрим более длинный пример HTML-документа:
<HEAD>
<ТITLЕ>;Более длинный пример</ТIТLЕ> </HEAD>
<BODY>
<Н1>Более длинный пример</Н1> Это простой HTML-документ. Это первый абзац. <Р>
Это второй абзац, он демонстрирует некоторые возможности HTML по выделению слов.
Это слово написано <I> наклонным </I> шрифтом.
Это слово написано <В> жирным </В> шрифтом.
Здесь вы можете увидеть картинку:
<IMG SRC="LOGO.G1F">P>
Это третий абзац, он демонстрирует использование гиперссылок.
Это гиперссылка на файл minihtml.php, содержащий простой пример HTML-документа:
<А HREF="minihtml.phpr>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>
Документы, хранящиеся на WWW, подготавливаются на специальном языке HTML (Hypertext Markup Language - «Язык разметки гипертекстов»). В HTML текст кодируется в ASCII и поэтому может быть создан и отредактирован в любом текстовом редакторе. Кроме самого текста в документах имеются флаги разметки, которые интерпретируются клиентской программой просмотра (броузером) и позволяют воспринимать документ именно как гипертекст.
Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы:
• собственно текст;
• главы, параграфы, пункты, подпункты;
• абзацы.
Для каждого из этих элементов в HTML существуют определенные стили, описывающие, в каком виде пользователь увидит текст на экране. Пусть мы создали файл minihtml.php:
<BODY>
<ТIТLЕ>Пример НТМL-текста</ТITLЕ>
<Н1>Глава 1</Н1>
<Н2>Параграф 1.</Н2>
Добро пожаловать в HTML!
Это пример гипертекста.<Р>
<Н2>Параграф 2.</Н2><Р>
<А HREF="minihtml.php">npимep НТМL-текста</А>
</BODY>
Из данного примера видно, что
• заголовок документа начинается с <TITLE> и заканчивается </TITLE>;
• заголовок первого уровня (главы) выделяется символами <Н1> и </Н1>;
•заголовки последующих уровней (параграфы, пункты, подпункты и т.п.) -символами <Нх> и </Нх>, где х - числа 2,3, ...
• абзац - символами <Р>.
Не все стили поддерживаются всеми WWW-броузерами. Если программа просмотра не поддерживает стиль, то она его игнорирует.
Основной текст отделяется от сопроводительного символами
<BODY> </BODY>
Каждый HTML-документ должен иметь заголовок, который показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Практически во всех броузерах заголовок документа виден в верхней части экрана (окна).
Для выделения заголовка служат символы
<HEAD><TITLE>Заголовок</TITLE><HEAD>
HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом - размером и толщиной букв. Первый заголовок в каждом документе должен быть выделен <Н1>. Синтаксис заголовков:
<Ну> Текст заголовка</Ну>
где у - число от 1 до 6, определяющее уровень заголовка.
В отличие от документов, в большинстве текстовых процессоров прерывания строк и слов в HTML-файлах несущественны. Обрыв слова или строки может происходить в любом месте в исходном файле, при просмотре это прерывание будет проигнорировано. Напомним, что в нашем примере, первый параграф был представлен как
<Н2>Параграф 1.</Н2>
Добро пожаловать в HTML!
Это пример гипертекста.<Р>
В исходном файле два предложения находятся на двух разных строках. Программа просмотра игнорирует это прерывание строки и начинает новый абзац только,после знака <Р>.
Главное преимущество HTML состоит в его способности связываться с другими документами. Броузер выделяет (обычно цветом и/или подчеркиванием) ключевые слова, являющиеся гипертекстовыми ссылками (гиперссылками). Описывается ссылка на другой документ следующим образом:
<А НRЕF="имя файла">
Текст, который будет служить как обращение к другому документу</А>. Приведем пример такой гипертекстовой ссылки:
<А HREF="minihtml.php>примep HTML-текста</A>
Здесь ключевые слова «Пример HTML-текста» являются гиперссылкой на файл minihtml.php, который находится в той же директории, что и текущий документ. Также можно ссылаться на документ в любой директории, описав к нему полный путь. Например, ссылку на файл NJStais.php, лежащий в поддиректории AtlanticStates, можно описать так:
<А HREF="AtlanticStates/NJStats.phpI">New Jersey</A>
Это - так называемые относительные ссылки. Можно также использовать абсолютное имя файла (полный путь). В общем случае, использование ссылки по абсолютному имени файла более предпочтительно.
Ссылки на документы, хранящиеся на других серверах, записываются с указанием их URL:
<AHref="http://www.simteI.ru/news/snews.http">News</A>
Гиперссылки могут также использоваться для соединения с определенными разделами документов. Предположим, необходимо соединить документ А с первой главой документа В. Для этого надо создать именованную гиперссылку в документе В:
Здесь вы можете увидеть
<А NAME = "Глава 1">Главу 1</А> текст первой главы.
Теперь, описывая ссылку в документе А, надо включить не только имя файла documentB.php, но также и имя гиперссылки, отделяемое символом (#):
Здесь вы можете увидеть текст
<AHREF="documentB.php#Глава"> Главы 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>
</UL>
что дает на экране:
* Крупные города России:
+ Москва + Санкт-Петербург
* Крупные города Украины:
+Киев
Флаг <ADDRESS> используется для того, чтобы определить автора документа и способы контакта с ним (например, e-mail адрес). Обычно это последний пункт в файле.
что дает на экране: 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 формата вместе с текстом. Чтобы включить рисунок, надо описать гиперссылку на него:
<IMG SRC=image_URL>
где image_URL - URL .gif или .xbm файла, содержащего рисунок. Таким образом, синтаксис ссылки на рисунок аналогичен синтаксису гиперссылкн HREF. Форматирование положения рисунка задается включением в гиперссылку пункта "ALIGN = ":
<IMG ALIGN=top SRC=image_URL>
Также возможны типы выравнивания:
ALIGN = MIDDL
ALIGN = CENTER
Поскольку пересылка картинки замедляет загрузку основного WWW-документа, рекомендуется помещать рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам может решить - смотреть или не смотреть ему этот рисунок;
<А HREF = ima.ge_URL>Здесь</A> вы можете увидеть рисунок.
Рассмотрим более длинный пример HTML-документа:
<HEAD>
<ТITLЕ>;Более длинный пример</ТIТLЕ> </HEAD>
<BODY>
<Н1>Более длинный пример</Н1> Это простой HTML-документ. Это первый абзац. <Р>
Это второй абзац, он демонстрирует некоторые возможности HTML по выделению слов.
Это слово написано <I> наклонным </I> шрифтом.
Это слово написано <В> жирным </В> шрифтом.
Здесь вы можете увидеть картинку:
<IMG SRC="LOGO.G1F">P>
Это третий абзац, он демонстрирует использование гиперссылок.
Это гиперссылка на файл minihtml.php, содержащий простой пример HTML-документа:
<А HREF="minihtml.phpr>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>