HTML - это просто. Часть 2

В первой части статьи мы познакомились с основными понятиями языка HTML и научились форматировать текст (см. «МБ» №29’2006). Сегодня мы разберём разбивку текста на параграфы и научимся вставлять картинки.

Параграфы
Форматирование текста не ограничивается изменениями шрифта, его размера и стиля написания. Для более масштабного форматирования применяется парный составной тэг <p>, обозначающий границы параграфов. На практике он применяется для выравнивания текста и для присвоения параграфу стиля из CSS (но об этом – чуть позже). Параграфу можно присвоить всплывающую подсказку, но эта функция используется крайне редко. Тэг <p> может иметь следующие параметры:
align="left" – выравнивание по левому краю;
align="right" – выравнивание по правому краю;
align="center" – выравнивание по центру;
align="justify" – выравнивание по обоим краям;
title="help" – всплывающая подсказка при наведении на параграф.
К примеру, вы хотите выровнять эпиграф по правому краю, а контент страницы – по центру (см. рис 1). Для этого прописываем:

<p align="right">Эпиграф</p>
<p align="center">Выравнивание по центру</p>

Заметьте, что при использовании параграфов для перехода на следующую строку не нужно использовать тэг <br> – новый абзац начинается автоматически. Параграфы можно вкладывать друг в друга, что удобно при оформлении цитат или примечаний. Предположим, основной текст выровнен по обоим краям, а вам необходимо вставить фразу в середину параграфа с выравниванием по правому краю (см. рис 2). В этом случае можно использовать следующий код:

<p align="justify">Текст страницы 1
<p align="right">Цитата 1</p>
Текст страницы 2
</p>

Стоит добавить, что использовать закрывающий тэг </p> не обязательно. Если вы забудете его поставить, – ничего страшного в этом нет. Главное – правильно разграничить зоны действия тэгов.

Заголовки
Для того, чтобы выделить какой-либо участок текста (заголовок, название главы, подраздела) крупным жирным шрифтом используются составной парный тэг <hX>. Он имеет шесть уровней заголовков от <h1> до <h6>, где число справа от буквы h обозначает размер шрифта: от самого крупного до самого мелкого. Так, тэг <h1> создает заголовок, написанный очень крупными буквами, а тэг <h6> – наоборот, маленькими. Тэг <h> является составным, и может иметь точно такие же параметры, как и тэг <p>.

Списки
Если вам необходимо добавить на свою страничку маркированный список, выручит парный составной тэг <li>. Все, что вам нужно, – это заключить элементы списка в этот тэг. По умолчанию маркером выступает жирная точка, но вы можете заменить ее на другие символы, воспользовавшись параметром «type»:
<li type="circle"> – полый кружок;
<li type= "square"> – квадрат.

Если заключить весь список в парный тэг <ol>, то его элементы будут пронумерованы. Если, при этом задать параметр type, нумерация заменится на последовательность букв. Существует пять значений параметра type тэга <ol>:
type="1" – арабские цифры;
type="A" – заглавные буквы;
type="a" – строчные буквы;
type="I" – заглавные римские буквы;
type="i" – строчные римские буквы.
Параметр type тэга <li>, если он есть, при этом теряет свое влияние.
Если список нужно начать не с единицы, в теге <ol> прописывается параметр start="x", где x – начало отсчета нумерации.
Если необходимо создать сложный список с подклассами, можно воспользоваться функцией отступа, аналогичной по действию клавише действию клавиши «Tab». Для этого элемент списка заключается в парный простой тэг <ul>. Если необходимо сделать отступ на две единицы, то элемент заключается в тэг дважды.

Графические форматы
Графика уже давно стала неотъемлемой частью сайта. Картинки, фотографии, схемы – это далеко не полный список того, что можно поместить на своей страничке. Стоит добавить, что графика применяется и в дизайне страницы – это всевозможные градиенты, линии, фоновые рисунки.
Существует три основных графических формата, наиболее часто используемых при создании страничек. Каждый из них имеет свои сильные и слабые стороны, поэтому область их применения различна. Формат JPEG является на сегодня самым удобным форматом для хранения цветных изображений. Однако, здесь есть подводные камни – при использовании высокой (или даже средней) степени сжатия на рисунке появляются артефакты, шум, теряется контрастность изображения, а главное – урезается цветовая информация. Конечно, заметить погрешности сжатия можно только при детальном рассмотрении изображения. Для хранения же, скажем, семейного архива фотографий этот формат отлично подойдет.
Тем, кто более требователен к качеству изображения, подойдет формат PNG. Он бережно относится к цветовой гамме, сохраняя практически все различимые глазом оттенки и полутона изображения. Размер PNG-файла часто бывает даже меньше размера JPEG-файла – при точной передаче всей палитры рисунка.
Для различных схем, диаграмм и элементов оформления лучше всего подойдет GIF – формат индексированных цветов. К сожалению, GIF умеет работать только с 256-цветной палитрой, но для векторных рисунков и отсканированного текста такой гаммы вполне хватит. Главный плюс GIF – отсутствие ухудшения качества изображения при неплохой степени сжатия (если, конечно, вы не конвертируете в GIF 32-битную фотографию). Еще одно очень интересное свойство этого формата заключается в его способности к созданию прозрачного фона картинки, что является настоящей находкой для дизайнера (впрочем, PNG также не лишен этой возможности).
В формате GIF, кстати, рисуется почти вся анимация на страничках – всевозможные баннеры, «живые» кнопки, реклама и многое другое. Для создания более продвинутой анимации можно воспользоваться форматом Macromedia Flash, однако его использование требует от дизайнера определенных навыков (в том числе – в программировании).

Вставляем картинки
За добавление на страничку картинок отвечает непарный составной тэг <img>. В параметре src приписывается путь к картинке, которую необходимо вставить. Простейший код для вставки изображения выглядит следующим образом:

<img src="image.jpg">

В нашем случае рисунок image.jpg находится в одной папке со страничкой. Если изображение находится в другой папке, то путь к нему прописывается с использованием знака / (например foto/image.jpg). Если рисунок находится на уровень выше странички, то перед именем рисунка ставятся две точки и знак / (../image.jpg). И последний вариант – использование картинок с другого сайта (например, рекламного баннера). В этом случае путь к картинке прописывается полностью (http://www.megabyte-web.ru/megabyte.png).
Рассмотрим дополнительные параметры, которые может использовать тэг <img>:
align="left" – выравнивание картинки по левому краю;
align="right" – выравнивание картинки по правому краю;
align="center" – выравнивание по центру.
Существуют и другие значения параметра align, отвечающие за расположение первой строки текста относительно картинки: "bottom" – первая строка в нижней части картинки, "middle" – первая строка посередине и "top" – первая строка в верхней части картинки.
border="1" – толщина рамки, обрамляющей картинку (в пикселях);
width="640" – ширина картинки;
height="480" – высота картинки;
vspace="10" – отступ текста от картинки снизу и сверху;
hspace="10" – отступ текста от картинки слева и справа;
alt="рис. 1" – текст, который отображается на месте картинки, если она не загрузилась (например, если браузер – текстовый, или загрузка графики в браузере отключена).
Для того, чтобы картинки лучше смотрелись на вашей страничке, рекомендуется делать отступы посредством параметров vspace и hspace. Для картинок с белым фоном можно использовать границу толщиной в один пиксель, хотя это – дело вкуса.

Гиперссылки (Hyperlinks)
Гиперссылка (ссылка, линк) – это участок текста или объект (кнопка, картинка), при клике по которому осуществляется переход на другую web-страницу или другой участок текущей страницы. Несколько гиперссылок, сгруппированных рядом, обычно называют навигационным меню. Гиперссылки облегчают просмотр сайта, позволяют структурировать и классифицировать материал. Если гиперссылка представляет собой участок текста, то она, как правило, выделяется другим шрифтом/цветом, если гиперссылка является объектом – при наведении на нее меняется вид курсора мыши. Гиперссылка задается составным парным тэгом <a>, который имеет следующие параметры:
href="www.megabyte-web.ru" – данный параметр как раз и задает путь к web-ресурсу, будь то другая Интернет-страничка, картинка либо zip-архив. Значением является либо полный, либо относительный путь к ресурсу (правила написания пути описаны выше, в разделе о картинках).
name="part" – задает имя элемента, заключенного в тэг <a>. Это необходимо, например, при создании ссылки на определенный участок страницы (например, необходимо сделать ссылку на конкретную главу книги – браузер пролистает страницу до нужного места). Для этого первое слово (или предложение) искомого текста заключается в тэг <a>.

<a name=«glava1»>Глава 1</a>

Далее строится стандартная ссылка, но, с одним отличием. После пути файла ставится знак # и пишется значение параметра name. К примеру, ссылка на шестую главу книги Чехова будет выглядеть примерно так:

<a href="http://www.site.ru/chechov.htm#glava6">Глава 6</a>

Главное, не забыть прописать вспомогательные тэги <a> с параметром name.

Перейдём к другим параметрам:
target="_blank" – открывает ссылку на новой странице;
target="_self" – открытие в том же окне (по умолчанию);
title="Мегабайт" – краткое пояснение к ссылке.
Для быстрой отправки писем существуют почтовые ссылки, которые имеют следующий общий вид:

<a href="mailto:адрес_ящика">

Они позволяют в один клик вызвать диалог отправки письма при помощи вашей текущей почтовой программы.

Пауза №2
На этом мы заканчиваем вторую часть знакомства с HTML. В следующей части мы с вами научимся делать таблицы и… Но об этом – в следующий раз.


Рекомендуем почитать: