Основы языка разметки гипертекста (HTML)

HTML (Hypertext Mark-up Language) язык гипертекстовой разметки, язык разметки гипертекста, язык HTML

Cпособ описания документов в WWW. Отметим, что язык HTML не является языком программирования, поэтому человека, работающего с этим языком правильнее называть дизайнером (designer) или разработчиком (developer), но не программистом (programmer). HTML использует набор тегов, вводимых в текстовые документы, которые указывают браузеру или другой программе, каким образом информация должна выводится на экран. С помощью тегов в документе могут быть определены (размечены) части, главы, разделы (section), абзацы, списки, рисунки, таблицы, колонтитулы, индекс, содержание и т. д. Внутри каждого блока можно изменять шрифт, размер символов, цвет текста, выделять текст курсивом и/или делать его полужирным. Просмотр HTML-документа осуществляется с помощью браузера. HTML является упрощённым подмножеством языка SGML (Standard Generalized Markup Language – стандартный язык обобщенной разметки (описания) [документов]), использует чистый ASCII-текст, текущая версия - 4.01 (общедоступный стандарт на HTML 4.0 принят в декабре 1997 г., а на 4.01 - 24.12.1999 г.), широко применяется для создания страниц WWW. Создателем HTML был Тим Бернерс-Ли (Tim Berners-Lee) при участии Дэна Конноли (Dan Connolly) и Карен Малдроу (Karen Muldrow). Развитием второй версии языка занималась рабочая группа HTML Working Group, созданная в 1994 г. при IETF (Internet Engineering Task Force – целевая группа инженерной поддержки Internet)

НТМL (Нуреr Техt Маrkup Lanquage) является стан­дартным языком, предназначенным для создания гипер­текстовых документов в среде WWW. НТМL-документы могут просматриваться различными браузерами (специальными программами, интерпретирующими такого рода гипертекстовые документы), наиболее известным из которых является Internet Explorer. В отличие от документов, например текстового процессора Microsoft Word, документы в формате HTML не организованы по принципу WYSIWYG (What You See Is You Get) — что видишь, то и получишь [при выводе на печать или монитор]. Когда документ создан с использованием НТМL, браузер должен интерпретировать HTML для выделения различных элементов документа и их первичной обработки с целью дальнейшего отображения в виде, задуманном автором. Данная технология не является исключительной особенностью HTML, она, например, используется в языке, предназначенном для верстки математических текстов ТеХ (LaТеХ), автором которого является Д. Кнут. Использование HTML позволяет форматировать документы для их представления с использованием заголовков, шрифтов, линий и других стандартных элементов на любой системе, предназначенной для их просмотра

Большинство документов имеют стандартные элементы, например, такие, как заголовки, параграфы или списки. Используя тэги (команды) HTML, можно обозначать данные элементы, обеспечивая браузеры информацией для их отображения, сохраняя в целом общую структуру и информационную полноту документов. В большинстве случаев (например, при использовании различных текстовых редакторов) автор строго определяет внешний вид документа. В случае HTML (основываясь на возможностях браузера) можно в определенной степени управлять внешним видом (но не его содержимым). НТМL позволяет отметить, где в документе должен быть заголовок или абзац, при помощи тэгов НТМL, а затем предоставляет браузеру интерпретировать эти тэги. Например, один браузер может распознавать тэг начала абзаца и представлять документ в нужном виде, а другой, не имеющий такой возможности, представит документ в одну строку. Пользователи некоторых браузеров имеют также настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа. Основное преимущество HTML заключается в том, что доку­мент может быть просмотрен на браузерах различных типов и на различных платформах

Общая структура тэга и его содержимого такова:

<ТЭГ параметр₁= значение₁ параметр₂=значение₂ параметр_к=значение_к> содержимое элемента </ТЭГ>

Например: <Н1> Это крупный заголовок </Н1>

Здесь <Н1> — открывающий заголовочный тэг, </Н1> — закрывающий

В названиях тэгов и параметров прописные и строчные буквы не различаются

Некоторые тэги могут не содержать параметров, отдельные из них не имеют закрывающихся.
   В самом общем виде структура НТМL - документа может быть представлена следующим образом:

<html>

<head> <!--Заголовок-->

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Новая страница 1</title>

</head>

<body> <!—Тело документа-->

</body>

</html>

Заголовок содержит служебную информацию, в частности, предназначенную для поисковых систем

Тэг <BODY> начинает собственно документ и может встречаться только один раз. Параметры данного тэга определяют общее оформление документа при его отображении в браузере (отступы от краев окна, цвет или изображение фона и др.)

Все, что записано вслед за закрытым </ВОDY>, браузер игнорирует.

Все тэги, которые предназначены для оформления документа, могут быть условно разделены на несколько групп:

ü       теги форматирования

ü       теги верстки таблиц

ü       теги верстки списков

ü       теги формирования гиперссылок

ü       теги вставки изображений

К тэгам форматирования текста можно отнести:

<P>...</P> — создает новый абзац. Абзацы отделяются друг от друга пустой строкой

<H1>...</H1>, <Н2>...</Н2> … <Н6>...</Н6> — заголовки разных уровней

<FONT>...</FONT> — изменяет шрифт, размер и цвет текста. Не рекомендуется злоупотреблять использованием этого тега, поскольку у пользователей могут отсутствовать некоторые экзотические шрифты, разумнее пользоваться стандартными. Вообще дизайнеры и полиграфисты рекомендуют использовать в документе не более трех разных шрифтов

<SUP>...</SUP> — верхний индекс

<SUP>...</SUP> — нижний индекс

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

<TABLE>...</TABLE> - охватывает всю таблицу целиком

<TR>...</TR> — формирует отдельные строки таблицы

<TD>...</TD> — формирует в строках таблицы ячейки

<TH>...</TH>— формирует отдельную строку в начале таблицы как заголовок

Пример:
<P>Для операций сложения, вычитания и умножения тип результата в зависимости от типа операнда будет таким:</P>

<CENTER>

<TABLE border="1"cellspacing="0"cellspacing="2">

<TR align="center">

<ТН>Операнд 1</ТН>

<ТН>Операнд 2</ТН>

<ТН>Результат</TH>

</TR>

<TR align="center">

<TD>Integer</TD>
<TD>Integer</TD>

<TD>Integer</TD>

</TR>

<TR align="center">

<TD>Integer</TD>
<TD>Real</TD>
<TD>Real</TD>

</TR>
<TR align="center">

<TD>Real</TD>
<TD>Integer</TD>
<TD>Real</TD>

</TR>
<TR align="center">

<TD>Real</TD>

<TD>Real</TD>

<TD>Real</TD>

</TR>

</TABLE>
</CENTER>

Браузер отобразит это примерно так:

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

Тэги верстки списков позволяют формировать маркированный и нумерованный списки

<UL>...</UL> — создает маркированный список

<OL>...</OL> — создает нумерованный список

<LI>...</LI> — создает отдельный элемент списка

Пример:
<CENTER><B>Контрольные вопросы и задания</В></CENTER>

<OL>

<LI>Какое определение называется рекурсивным? Приведите собственные примерырекурсивных определений.

<LI>Какой вспомогательный алгоритм (подпрограмма) называется рекурсивным? Приведите собственный пример

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

<LI>Что такое граничное условие и каково его назначение в рекурсивной подпрограмме?

<LI>Что такое рекурсивный спуск?

</OL>

Браузер отобразит это примерно так:

Контрольные вопросы и задания

1. Какое определение называется рекурсивным? Приведите собственные примерырекурсивных определений.
2. Какой вспомогательный алгоритм (подпрограмма) называется рекурсивным? Приведите собственный пример одержательных задач, где для решения может быть использован рекурсивный вспомогательный алгоритм.
3. Что такое граничное условие и каково его назначение в рекурсивной подпрограмме?
4. Что такое рекурсивный спуск?

Гипертекстовый документ невозможно представить себе без ссылок на другие документы (внутренние или внешние)

Ссылки формирует тэг <А>...</А> с обязательным параметром href.

Пример:

<A HREF="http://www.yandex.ru">ПГПУ</А>

Яndex

В качестве гиперссылки может выступать не только текст, но и рисунок или даже отдельный его элемент.

И, наконец, о вставке изображений. То, что мы обсуждали до сих пор, позволяет, так или иначе, оформлять текст и отдельные его элементы. Но без графики web-страницы были бы всё-таки неполноценными, имели довольно скучный вид.

Привлечение графических изображений дает возможность оформлять полноценные документы. В Internet могут быть использованы графические файлы в формате GIF, JPEG, PNG. Поэтому перед размещением графического изображения его нужно соответствующим образом подготовить, сохранив в одном из этих форматов, оптимизировать размер файла при максимально возможном качестве рисунка (рекомендуется не более 50 Кб). Вообще это длительная работа и своего рода искусство.

Тэг для отображения рисунков — <IМG>. Он не имеет закрывающегося тэга и содержит обязательный параметр src, значением которого является адрес файла с рисунком (относительный, т.е. на данном сайте, но, например, в другом каталоге, или абсолютный, если рисунок, например изображение счетчика, подгружается с другого сайта). Кроме того, ряд параметров этого тэга также желательно указывать, в частности, такие, как alt - значение — текст, раскрывающий содержания рисунка, Width, Height - ширина и высота рисунка.

Пример:

<IMG src="me.jpg" alt="Фото" width="349" height="245" align="right">

Результатом будет отображенный рисунок, если путь к файлу является правильным, или пустая рамка в противном случае. Заметим, что математические формулы также приходится отображать в виде рисунков, поскольку HTML пока не поддерживает их вёрстку, в этом случае приходится особое внимание уделять их позиционированию в тексте

Современные конструкторы и дизайнеры пользуются не только HTML, но и рядом его расширений, например, каскадными таблицами стилей (CSS)