Структура файла в формате HTML

В первую очередь нам потребуется создать файл с расширением “htm” и открыть его для редактирования в редакторе HTML Reader.

Текст для HTML-документа набирается в том виде, в котором его должен показать браузер, а при выделениия фрагментов, которые предназначены для разметки документа (тэгов), используются угловые скобки (знаки “больше” и “меньше”), например: <BODY>.

Любой документ HTML начинается с открывающего тэга <HTML> и заканчивается соответствующим ему закрывающим тэгом </HTML>. Закрывающий тэг отличается от закрывающего наличием косой черты перед названием тэга. Часть документа, которая находится в пределах от открывающего до соответствующего ему закрывающего тэга, называется контейнером. Тэги, у которых есть закрывающий и открывающий варианты записи называются парными, а те, которые используются только в одном виде (например, тэг <BR>), называются непарными. Весь файл web-страницы — это по сути дела один большой контейнер HTML (так как начинается с <HTML> и заканчивается </html>).

Внутри контейнера HTML последовательно записываются два контейнера:

1. <HEAD> . . . </head> (заголовок документа). Внутри этого контейнера записываются параметры, общие для всей страницы. Для примера можно поместить сюда контейнер <TITLE>, позволяющий поместить текст для отображения в заголовке окна браузера.

2. <BODY> . . . </body> (тело документа). Этот контейнер содержит всё то, что должен показать браузер внутри своего окна при открытии документа. Если документ содержит только текст, то этот текст нужно записывать именно здесь, если есть другие элементы (графика, таблицы, ссылки и т. д.), то они вставляются в текст с помощью тэгов, которые будут рассмотрены позже.

Рассмотрим простейший пример текста, который может быть использован в качестве HTML-документа:

<HTML>

<HEAD>

<TITLE>Самая простая web-страница</title>

</head>

<BODY>

То, что вы сейчас читаете в окне браузера, записано в контейнере BODY внутри HTML-файла.

</body>

</html>

Способы оформления текста в HTML

Имеется несколько особенностей поведения большинства браузеров при отображении текста, набранного внутри контейнера BODY:

1. Пробелы между словами в количестве более одного заменяются одним пробелом &nbsp.

2. Символы перехода на новую строку игнорируются, а точнее заменяются пробелом. Браузер выполняет перевод строки автоматически в тот момент, когда строчка достигает правого края окна. Если есть необходимость вставить в каком-либо месте в тексте принудительный перевод на новую строку, то можно использовать непарный тэг <BR>. Он разрывает текущую строку, а текст, следующий за этим местом в HTML-файле, продолжает с новой строки.

3. Кроме тэга разрыва строки имеется тэг начала нового абзаца, <P>. Отличие его от <BR> состоит в том, что тэг абзаца кроме разрыва строки вставляет новую пустую строку. Обычно он используется как непарный, хотя не запрещено ставить в конце абзаца закрывающий тэг </p>.

Логические стили для оформления текста

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

1. Контейнер <H1> . . . </h1>. Сюда помещают те фразы, которые служат заголовками первого уровня, то есть, наиболее важные заголовки (например названия глав в книге). Внешне они чаще всего выглядят как текст увеличенного размера и полужирного начертания. Кроме этого контейнера есть и контейнеры H2, H3, ... H6, позволяющие использовать ещё пять уровней заголовков.

2. Возможно выделение текста с помощью уменьшенного и увеличенного шрифтов, для этого применяются контейнеры BIG и SMALL.

3. Если фрагмент текста должен быть показан как верхний индекс, то для его выделения используется контейнер SUP, а для нижнего индекса — SUB. Например, для того, чтобы записать y=x2, потребуется в HTML-текст поместить такую строчку: y=x<SUP>2</sup>.

Физические стили

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

1. Курсив. Текст, который должен быть выделен курсивом, помещается в контейнер <I>...</i>.

2. Полужирный — контейнер <B>...</b>.

3. Подчёркнутый — <U>...</u>.

4. Зачёркнутый — <S>...</s>.

Если требуется применить к тексту сразу два физических стиля, то можно один контейнер вложить в другой, например: <B><I>Полужирный курсив</i></b>.

Горизонтальное выравнивание текста

По умолчанию браузеры выравнивают текст по левому краю окна. Иногда, тем не менее, требуется поместить фрагмент текста по центру или по правому краю окна. В первом случае для центрирования текста (или других объектов) достаточно поместить фрагмент внутрь контейнера CENTER.

Если нужно указать левое или правое выравнивание, то можно использовать дополнительные возможности тэга <P>, например: <P ALIGN=RIGHT>Правое выравнивание</p>. Здесь дополнительный элемент ALIGN тэга P называется атрибутом, а RIGHT — значением атрибута. Вообще говоря, тэги могут содержать несколько атрибутов, разделённых пробелами, бывают атрибуты без значений (например: <FRAME SRC="f1.html" NORESIZE>, в этом тэге есть атрибут NORESIZE, для которого не требуется значение).

Кроме значения RIGHT у атрибута ALIGN есть, очевидно, и значение LEFT. Установленное в тэге <P> выравнивание будет действовать на протяжении всего абзаца, до тех пор, пока не встретится тэг </p> или следующий тэг <P>.

Атрибут ALIGN поддерживается не только для тэга абзаца, но и для тэгов всех шести заголовков (<H1>, ... <H6>), в результате заголовок будет выровнен по вашему желанию. Его действие распространяется только до соответствующего закрывающего тэга (</h1>, ... </h6>).

Списки

Довольно часто в тексте html-документа приходится перечислять какие-либо объекты или давать определения понятий. В таких случаях можно пользоваться средствами HTML для организации списков. Списки существуют не только в языке HTML, но и во многих текстовых редакторах. Наиболее часто используемые виды списков:

1. Нумерованный список. Каждый элемент такого списка имеет номер, который браузер проставит автоматически. По умолчанию первый элемент списка имеет номер 1, второй — 2 и т.д. Для вставки нумерованного списка нам потребуется контейнер OL (ordered list — нумерованный список), внутри которого можно перечислять элементы списка. Перед тем как записывать очередной элемент списка, нужно вставлять непарный тэг <LI> (list item — элемент списка). Общая структура списка имеет такой вид:

<OL>

<LI>Первый элемент

<LI>Второй элемент

…

<LI>Последний элемент

</ol>

Для нумерованных списков возможна настройка способа нумерации элементов. Кроме арабских цифр можно использовать римские, а также большие или малые латинские буквы. Для указания способа нумерации используется атрибут TYPE тэга <OL>. Этот атрибут может принимать одно из четырёх значений: 1 — арабские цифры, i или I — римские цифры, a — малые латинские буквы, A — большие латинские буквы. При необходимости можно начинать нумерацию элементов списка не с 1, а с произвольного номера. Чтобы указать начальный номер в списке, используют атрибут START тэга <OL>, например: <OL TYPE=1 START=5> (первый номер — 5). Этот атрибут работает только в случае нумерации арабскими цифрами.

2. Маркированный список. Иногда нумерация бывает не важна, но выделить для читателя отдельные элементы списка необходимо. В этом случае перед каждым элементом списка ставится небольшой значок (маркер), обычно это круг, квадрат и т. п. Такие списки создаются с помощью контейнера UL (unordered list — ненумерованный список), внутри которого также как для нумерованных списков перечисляются элементы с помощью тэгов <LI>.

Тип маркера указывается в атрибуте TYPE тэга <UL>. Возможно 3 вида маркеров: DISC — круг, CIRCLE — окружность, SQUARE — квадрат. При необходимости можно заказать для отдельного элемента списка маркер, отличающийся от других. Для этого атрибут TYPE нужно применять в тэге <LI> перед соответствующим элементом списка.

Гипертекстовые ссылки

Для выделения фрагмента, являющегося ссылкой, используется контейнер <A> (от слова anchor — якорь). Наиболее важный атрибут тэга <A> — это HREF, в качестве значения которого записывается адрес страницы, на которую нужно перейти. Ниже приведён пример вставки гиперссылки:

<A HREF="http://ngma.ru">Щёлкните сюда, чтобы перейти на главную страницу web-сайта НГМА</a>

В качестве адреса в атрибуте HREF записывается либо полный URL сайта или страницы, либо имя файла, содержащего страницу, если она лежит на том же компьютере, что и исходная. Если страница лежит на том же компьютере, в том же каталоге, что и просматриваемая, то в HREF достаточно указать имя файла. Если же она лежит в другом каталоге, то вместо имени протокола пишут «file://», а затем — полный путь к файлу и его имя.

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

1. Отмечаем то место в документе, на которое позже сделаем ссылку (устанавливаем «якорь»). Для этого вставляем в нужное место тэг <A> с атрибутом NAME. В качестве значения этого атрибута записываем в кавычках имя для того места, которое мы хотим отметить (лучше латинскими буквами). В дальнейшем браузер по имени будет искать позицию, на которую указывала ссылка. Тэг </a> можно поставить сразу за открывающим тэгом (контейнер в этом случае будет пустым), а можно поместить перед закрывающим тэгом какой-либо фрагмент документа, с ним и будет связано имя, указанное в атрибуте NAME. Пример: <A NAME="Chapter15">

2. При добавлении ссылки на «якорь», установленный в п. 1, в атрибуте HREF в кавычках пишут знак «#», за которым следует имя якоря, например: <A HREF="#Chapter15">Глава 15</a>.

Рисунки

Тэг IMG используется для вставки изображений в HTML-документ.

Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Элемент IMG не имеет конечного тэга.

Используемые атрибуты:

SRC – обязательный атрибут. Указывает адрес (URL) файла с изображением.

HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

HSPACE и VSPACE – определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

ALIGN – обязательный атрибут. Указывает способ выравнивания изображения в документе.

NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

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

USEMAP – применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты – "map1", то ссылка на нее будет выглядеть как "#map1". Обратите внимание: прописные и строчные буквы в данном атрибуте трактуются браузером как разные.

Пример 1:

<IMG src="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов.

Пример 2. Использование USEMAP:

<IMG src="/img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle" BORDER="0" USEMAP="#ButtonsMap">');

1 2 345

Не нашли, что искали? Воспользуйтесь поиском по сайту: