Документы, хранящиеся на WWW, подготавливаются на специальном языке HTML (Hypertext Markup Language — «Язык разметки гипертекстов»). В HTML текст кодируется в ASCII и поэтому может быть создан и отредактирован в любом текстовом редакторе. Кроме самого текста в документах имеются флаги разметки, которые интерпретируются клиентской программой просмотра (броузером) и позволяют воспринимать документ именно как гипертекст.
Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы:
• собственно текст;
• главы, параграфы, пункты, подпункты;
• абзацы.
Для каждого из этих элементов в HTML существуют определенные стили, описывающие, в каком виде пользователь увидит текст на экране. Пусть мы создали файл minihtml.html:
Пример НТМL-текста
Глава 1
Параграф 1.
Добро пожаловать в HTML!
Это пример гипертекста.
Параграф 2.
npимep НТМL-текста
Из данного примера видно, что
• заголовок документа начинается си заканчивается ;
• заголовок первого уровня (главы) выделяется символамии ;
•заголовки последующих уровней (параграфы, пункты, подпункты ит.п.) -символамии , где х — числа 2,3, …
• абзац — символами .
Не все стили поддерживаются всеми WWW-броузерами. Если программа просмотра не поддерживает стиль, то она его игнорирует.
Основной текст отделяется от сопроводительного символами
Каждый HTML-документ должен иметь заголовок, который показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Практически во всех броузерах заголовок документа виден в верхней части экрана (окна).
Для выделения заголовка служат символы
Заголовок
HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом — размером и толщиной букв. Первый заголовок в каждом документе должен быть выделен . Синтаксис заголовков:
Текст заголовка
где у — число от 1 до 6, определяющее уровень заголовка.
В отличие от документов, в большинстве текстовых процессоров прерывания строк и слов в HTML-файлах несущественны. Обрыв слова или строки может происходить в любом месте в исходном файле, при просмотре это прерывание будет проигнорировано. Напомним, что в нашем примере, первый параграф был представлен как
Параграф 1.
Добро пожаловать в HTML!
Это пример гипертекста.
В исходном файле два предложения находятся на двух разных строках. Программа просмотра игнорирует это прерывание строки и начинает новыйабзацтолько,после знака .
Главное преимущество HTML состоит в его способности связываться с другими документами. Броузер выделяет (обычно цветом и/или подчеркиванием) ключевые слова, являющиеся гипертекстовыми ссылками (гиперссылками). Описывается ссылка на другой документ следующим образом:
Текст, который будет служить как обращение к другому документу. Приведем пример такой гипертекстовой ссылки:
примep HTML-текста
Здесь ключевые слова «Пример HTML-текста» являются гиперссылкой на файл minihtml.html, который находится в той же директории, что и текущий документ. Также можно ссылаться на документ в любой директории, описав к нему полный путь. Например, ссылку на файл NJStais.html, лежащий в поддиректории AtlanticStates, можно описать так:
New Jersey
Это — так называемые относительные ссылки. Можно также использовать абсолютное имя файла (полный путь). В общем случае, использование ссылкипоабсолютному имени файла более предпочтительно.
Ссылки на документы, хранящиеся на других серверах, записываются суказанием их URL:
News
Гиперссылки могут также использоваться для соединения с определенными разделами документов. Предположим, необходимо соединить документ А с первой главой документа В. Для этого надо создать именованную гиперссылку в документе В:
Здесь вы можете увидеть
Главу 1 текст первой главы.
Теперь, описывая ссылку в документе А, надо включить не только имя файла documentB.html, но также и имя гиперссылки, отделяемое символом (#):
Здесь вы можете увидеть текст
Главы 1документа В
Теперь «кликнув» в слово «Главы I» в документе А, можно перейти непосредственно в Главу 1 в документе В.
Техника соединения с разделами текущего документа аналогична описанной выше, только опускается имя файла. Вот, например, связь с Главой 1 внутри того же самого файла (Документ В):
Это Глава 1 текущего документа.
Для более сложных документов HTML имеет некоторые дополнительные возможности форматирования Так, HTML поддерживает ненумерованные и нумерованные списки. Ненумерованный список.
- cписок пунктов
Например:
что дает на экране:
* яблоки
* бананы
Нумерованный список идентичен ненумерованному списку, только вместо
- используется
- .
Например:
что дает на экране:
1. апельсины 2. персики 3. виноград
Программа просмотра автоматически нумерует элементы такого списка. Списки могут быть произвольно вложены, хотя практически было бы разумнее ограничиться тремя уровнями вложенных списков.
Приведем пример вложенных списков:
- Крупные города России;
что дает на экране:
* Крупные города России:
+ Москва + Санкт-Петербург
* Крупные города Украины:
+Киев
Флагиспользуется для того, чтобы определить автора документа и способы контакта с ним (например, e-mail адрес). Обычно это последний пункт в файле. Например, последняя строка документа может выглядеть так:
Web-master Воронежского педуниверситета den@vspu.ac.ru
что дает на экране: Web-master Воронежского педуниверситета den@vspu.ac.ru
Можно описывать специальными стилями отдельные слова или предложения. Имеются два типа стилей: логический и физический. Логические стили определяют текст согласно заданному значению, в то время как физические стили определяют некоторые участки текста.
Логические стили:
служит для описания определений. (Это определение.)
служит для выделения слов. (Это выделенное слово.)
служит для выделения заголовков книг, фильмов, цитат и т.п. (Это цитата.)
служит для выделения программных кодов, текстов программ и
т. п. Изображается шрифтом фиксированной ширины. (Theheader file)
используется для ввода с клавиатуры пользователя. Может быть изображено жирным шрифтом (но в большинстве browser изображается специальным шрифтом) (Введите passwd)
используется для машинных сообщений. Изображается шрифтом фиксированной ширины. (Segmentation fault: Core dumped)
служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом. (Это очень важно.)
используется для символьных переменных. (Это переменная.)
Существуют физические способы выделения — автор задает стиль написания текста, описывая шрифт в исходном HTML-документе. Можно задать:
,жирный шрифт (этожирный шрифт)
,наклонный шрифт (это наклонный шрифт)
,фиксированный шрифт (шрифт заданной ширины) (это fixed шрифт)
Используя флагможно разделить текст горизонтальной чертой:
Этот текст снизу от линии.
Большинство программ просмотра могут показывать рисунки Х Bitmap (XBM) или GIF формата вместе с текстом. Чтобы включить рисунок, надо описать гиперссылку на него:
гдеimage_URL — URL .gif или .xbm файла, содержащего рисунок. Таким образом, синтаксис ссылки на рисунок аналогичен синтаксису гиперссылкн HREF. Форматирование положения рисунка задается включением в гиперссылку пункта ALIGN = :
Также возможны типы выравнивания:
ALIGN = MIDDL
ALIGN = CENTER
Поскольку пересылка картинки замедляет загрузку основного WWW-документа, рекомендуется помещать рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам может решить — смотреть или не смотреть ему этот рисунок;
Здесь вы можете увидеть рисунок.
Рассмотрим более длинный пример HTML-документа:
;Более длинный пример
Более длинный пример Это простой HTML-документ. Это первый абзац.
Это второй абзац, он демонстрирует некоторые возможности HTML по выделению слов.
Это слово написанонаклоннымшрифтом.
Это слово написаножирнымшрифтом.
Здесь вы можете увидеть картинку:
P
Это третий абзац, он демонстрирует использование гиперссылок.
Это гиперссылка на файл minihtml.html, содержащий простой пример HTML-документа:
ripHMep HTML-TeKcra.
Заголовок второго уровня
Дальнейший текст будет написан шрифтом фиксированной ширины:
On the stiff mig up there Hunches a wet black rook Arranging and rearranging its feathers in the rain …
Это ненумерованный список, состоящий из двух элементов:
Конец документа.
Web-master Воронежского педуниверситета
den@vspu.ac.ru
Статьи к прочтению:
Что такое язык разметки HTML и гипертекст
Похожие статьи:
-
Язык гипертекстовой разметки html
Все страницы в системе World Wide Web созданы с помощью специального языка, который называется языком гипертекстовой разметки документов – Hyper Text…
-
World Wide Web, или как ее обычно называют, WWW — это распределенная компьютерная система, основанная на гипертексте. Информация в ней хранится на…