Создание веб-страниц с использованием HTML

HTML — главный и наиболее используемый при создании интернет-сайтов язык программирования веб-станиц Интернета (Всемирной паутины). Он был придуман Тимом Бернерс-Ли как язык описания гипертекстовых структур, пригодный для использования людьми, не являющимися специалистами в области компьютерной верстки и интернет-дизайна. К середине 1990;х гг. язык гипертекстовой разметки HTML был приведен в стандартизованную форму и спецификации языка были впервые опубликованы в 1995 г. в документе «Hypertext Markup Language- 2.0»^[1]. Этот стандарт остается ядром программных средств конструирования содержания веб-сайтов Интернета и сегодня.

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

Помимо этого, язык HTML позволяет задать и другие базовые параметры документа, который должен стать веб-страницей:

• • как должны выглядеть на экране компьютера пользователя те или иные элементы текста (включая обозначение границ абзаца, перехода с одной строки текста на другую, выравнивания фрагментов текста относительно границ экранного пространства, оформление информации в виде списка или в виде таблицы, обозначение гиперссылок на разные части текста или на какие-то другие веб-страницы в Интернете и т. д.);
• • как все смысловые, структурные и композиционные элементы текста должны быть размещены на двумерном пространстве веб-страницы наиболее оптимальным и эффективным образом (т.е. определять дизайн вебстраницы);
• • каким образом текстовые элементы будут совмещаться с информационными элементами другой модальности — картинками, диаграммами, видеороликами, анимацией и т. д.;
• • какие элементы в тексте документа потребуют определенных интерактивных действий пользователя (например, обозначение способов активизации компонентов веб-страницы, обозначающих гиперссылки);
• • в какой последовательности и в каком виде должны применяться правила дизайнерского оформления предъявляемого пользователю информационного материала для усиления эффективности его воздействия.

Все эти, а также некоторые другие параметры гипертекстовых материалов можно однозначно определить в языке HTML с помощью специальных команд, представляющих собой коды, составленные по определенным правилам и записанные в виде символьных последовательностей, которые называются тэгами (англ. tag — ярлык, этикетка, бирка). Набор тэгов языка HTML фиксирован и стандартизирован (хотя в него возможно добавлять новые тэги, которые, однако, должны подчиняться установленным принципам); совокупность всех тэгов определяет самые широкие возможности языка HTML по оформлению информации в Интернете.

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

Все тэги языка HTML имеют одинаковый формат: они начинаются знаком «» (закрывающая косая скобка). Сама компьютерная команда представлена символами, помещенными между этими знаками, при этом для обозначения закрывающего тэга используется знак «обратная косая черта», или «слэш» («/»), который ставится сразу после обозначающей начало тэга открывающей косой скобки.

Например, базовые тэги языка HTML, без которых невозможно создание веб-страницы и установление ее связей с другими страницами Интернета (гиперссылок), выглядят так:

• • тэг должен стоять в начале текста любого файла, который является страницей Интернета — веб-документом (это открывающий тэг); соответственно, в конце текста файла должен стоять парный ему закрывающий тэг — ;
• • тэг^[2] (он отмечает начало так называемого тела веб-документа, т. е. того, что будет выведено браузером на экран компьютера) ставится перед началом текста, который появится на экране пользователя; этот тэг тоже парный, поэтому обозначающий конец текста веб-страницы закрывающий тэг выглядит следующим образом: ;
• • тэгом

  обозначается текст, который должен выглядеть на компьютере пользователя как заголовок первого уровня (для него выбирается наиболее крупный размер шрифта; буквы или символы, отмеченные таким тэгом, будут иметь полужирное написание);

• • тэгом

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

• • открывающий тэг (им помечается так называемая голова вебдокумента) и парный к нему закрывающий обозначают информацию, которая предваряет тело веб-документа и обычно содержит его название (заголовок веб-документа, который соответствует тексту, помещенному между тэгами и; тэги заголовка должны находиться между тэгами, отмечающими голову документа); между тэгами и помещают также всю служебную информацию об особенностях оформления содержащейся в нем информации — например, о формате стилей, используемых в этом документе, и т. п.;
• • связь какого-то фрагмента веб-страницы с другими ее фрагментами либо с другими файлами или другими веб-страницами осуществляется с помощью тэгов (в первом случае) и во втором^[3]; особенностью этих тэгов является то, что в них обязательно указывается имя маркера или реквизиты адресата задаваемой этим типом тэгов гиперссылки.

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

Таблица 4.1

Коды основных элементов языка HTML.

Тэг.	Описание тэга.	Пример
	Обозначение начала и конца веб-документа.
	Обозначение головы и заголовка веб-документа.
	Обозначение начата и конца текста (тела) веб-документа.
	Обозначение границ абзаца.	Это мой университет. Он находится в Москве. Это мой родной город.
	Обозначение перехода на новую строку текста.	Я очень люблю поэмы А. С. Пушкина, особенно: Мой дядя самых честных правил, Когда не в шутку занемог…
	Обозначение абзаца, в котором текст выровнен по центру.	Mocквa — столица нашей Родины. Это мой родной город. Он очень красивый.
	Обозначение абзаца, в котором текст выровнен по правому краю.	Мой дядя самых честных правил, Когда не в шутку занемог … A. С. Пушкин.
	Обозначение абзаца, в котором текст выровнен по левому краю.	A. С. Пушкин Мой дядя самых честных правил, Когда не в шутку занемог…
. или. .	Обозначение абзаца, в котором находится заголовок текста (возможно до шести видов заголовков в зависимости от уровня заголовка, т. е. по уменьшению степени важности).	Москва — столица нашей Родины Это мой родной город. Главные достопримечательности Москвы. Это мой родной город. .
".	Используется для выделения фрагмента текста полужирным шрифтом.	Mocквa — столица нашей Родины.
	Используется для выделения фрагмента текста курсивом.	Москва — столица нашей Родины.
	Используется для выделения фрагмента текста подчеркиванием.	Москва — столица нашей Родины.
	Используется для перечеркивания текста.	У нас скидки! Старая цена 5000 py6., новая цена 1000 руб.
	Создает верхний индекс.	22 = 4.
	Создает нижний индекс.	Химическая формула воды: H20.
	Изменяет вид шрифта, а именно: увеличивает размер букв в отмеченном тэгом фрагменте текста на две единицы по сравнению со стандартным размером (стандартный размер шрифта равен 3).	У нас скидки! Старая цена 5000 руб., новая цена 1000 руб.
	Изменяет вид шрифта, а именно: определяет размер букв в отмеченном тэгом фрагменте текста (всего возможны семь градаций размеров шрифта 1, 2, 3, 4, 5, 6, 7).	MocKBa — столица нашей Родины.
	Изменяет вид шрифта, а именно: отмеченные тэгом фрагменты текста будут красного цвета (цвет задается либо RGB-обозначением в шестнадцатиричной системе, либо английским названием одного из 16 базовых цветов: BLACK — черный, BLUE — синий, NAVY — темносиний, LIME — светло-зеленый, GREEN — зеленый, SILVER — светло-серый, AQUA — голубой, OLIVE — оливковый, RED — красный, MAROON — коричневый, GREY — серый, FUCHSIA — цвет фуксии (растение), PURPLE — фиолетовый, YELLOW — желтый, WHITE — белый, TEAL — зеленовато-голубой).	Москва — столица нашей Родины.
	Задает цвет фона вебстраницы (bgcolor — background color), а также цвет текста (в данном случае — красный) во всем документе.	Это мой университет. Он находится в Mocквe.
	Позволяет использовать файл картинки (в данном случае графический файл с именем fon01. jpg) в качестве фона веб-страницы.	Это мой университет. Он находится в Mocквe.
	Изменяет вид шрифта, а именно: задает гарнитуру шрифта (рекомендуется использовать шрифты семейства Times New Roman, A rial, Tahoma, Courier; Courier New, которые чаще всего бывают установлены на всех компьютерах).	Mocквa — столица нашей Родины.
	Создает неупорядоченн ый список, при этом обязательно обозначение каждого из элементов этого списка с помощью тэга.	Столицы славянских стран: России — Москва, Полыии — Варшава, Бол гарии — София, Чехии — Прага, Словакии — Братислава,
	Создает упорядоченный список, при этом обязательно обозначение каждого из элементов этого списка с помощью тэга.	Славянские страны Восточной Европы: Бол гария, Польша, Сербпя Словакия Словения, Чехия, Хорватия
	Создаст ссылку на вебстраницу в Интернете.	Это ссылка на веб-сайт Московского университета.
	Создает ссылку на другой файл (в данном случае на другой файл в формате lit ml).	Это ссылка на файл с новыми материалами об университете.
	Ссылка на адрес электронной почты.	Это ссылка на электронный почтовый адрес филологического факультета МГУ им. М. В. Ломоносова.
	Вставка рисунка (графического элемента). В вебдокумент можно вставить изображение в форматах: gif, jpg (jpeg), png.	Это фотография моего университета.
	Вставка графического элемента с заданием параметров отображения картинки: ширины рисунка (width), высоты рисунка (height), расстояние от предыдущего элемента веб-документа до рисунка (по горизонтали — hspace — horizontal space), расстояние от других элементов рисунка по вертикали (vspace — vertical space) и способ выравнивания рисунка относительно текста (обтекание рисунка текстом) — выравненного вправо.	Это фотография моего университета шириной около 2 см и высотой около 1,8 см, выравненная Bnpaвo. vspace="15″ align="right" >

Все файлы веб-страниц должны иметь в самом начале кодифицированное обозначение типа файла как файла Интернета. Оно может выглядеть примерно следующим образом:

Примеры

Задание 1. Набрать в текстовом редакторе Блокнот следующий текст и сохранить его в файл с расширением htm.

Moй yниверситет.

Это мой университет. Он находится в Москве.

Это мой родной город.

Я очень люблю поэмы А. С. Пушкина, особенно эту:

Мой дядя самых честных правил, Когда не в шутку занемог…

Moй дядя самых честных правил, Когда не в шутку занемог…

A. С. Пушкин.

A. С. Пушкин.

Мой дядя самых честных правил, Когда не в шутку занемог…

Mocквa — столица нашей Родины.

Это мой родной город.

Москва — столица нашей Родины

Это мой родной город.

Главные достопримечательности Москвы.

.

.

.

Это мой родной город. Он очень красивый.

Mocквa — столица нашей Родины. Москва — столица нашей Родины.

Москва — столица нашей Родины.

У нас скидки! Старая цена 5000 pyб., новая цена 1000 руб.!</Р.

2² = 4.

Химическая формула воды: H₂0.

У нас скидки! Старая цена 5000 руб., новая цена 1000 руб.

Mocквa — столица нашей Родины.

Mocквa — столица нашей Родины.

Mocквa — столица нашей Родины. Столицы славянских стран:

• России — Москва,
• Польши — Варшава,
• Болгарии — София,
• Чехии — Прага,
• Словакии — Братислава,

Славянские страны Восточной Европы:

Болгария,

Польша,

Сербия

Словакия

Словения,

Чехия,

Хорватия

Это ссылка на веб-сайт Московского университета.

Это ссылка на электронный почтовый адрес филологического факультета МГУ им. М. В. Ломоносова Это фотография моего университета шириной около 6,5 см и высотой около 5 см, выравненная вправо.

• [1] URL: rfc-editor.org/rfc/rfcl866.txt (дата обращения: 30.01.2015).
• [2] От англ. body — главная, основная часть чего-то. URL: blip://classes.ru/dictionaryenglish-russian-Apresyan.htm (дата обращения: 30.01.2015).
• [3] От англ. anchor — якорь; англ. href — сокр. от hypertext reference — гипертекстовая ссылка.