Основные теги и их синтаксис

 

Работа с текстом

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

Теги для форматирования абзацев.

 

Основным из них является тэг <P> (c анг. Paragraph - абзац). Определяет текстовый параграф. Он является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком. Величиной промежутка можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента.

Синтаксис

<p> Текст </p>

 

Тег <BR>

Тег <BR> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <P>, использование тега <BR> не добавляет пустой отступ перед строкой.

 

Синтаксис

HTML	Текст<br> текст Текст<br> текст

 

Закрывающий тег не требуется.

Параметр ALIGN

Выравнивание блока текста по краю.

Синтаксис

 

<p align="left | center | right | justify">... </p>

Значения

left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.

 

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

 

right Выравнивание текста по правому краю. Строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать трудно. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.

 

justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. Этот прием применяется во всех официальных изданиях, так как этот способ является рекомендованным ГОСТом при оформлении статей, книг и других видов продукции.

 

 

Тег <FONT>

 

Тег <FONT> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Однако, он является единственным вариантом, при котором можно изменить стиль текста, если у вас нет возможности менять общий стиль сайта.

Синтаксис

<font> Текст </font>

Закрывающий тег: Обязателен.

Параметры:

color - устанавливает цвет текста:

Значение цвета можно задавать двумя способами.

1. По его названию. Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению.

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются добавлением новых разрядов, причем для отображения чисел до 255-ти включительно достаточно всего два разряда. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех компонентов цвета — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие (#rrggbb), где первые два соответствуют красному компоненту цвета, два средних — зеленому, а два последних — синему.

 

face - определяет гарнитуру шрифта:

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

Синтаксис

<font face="шрифт1, шрифт2,...">... </font>

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

serif — шрифты с засечками (антиквенные), типа Times;

sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель Arial;

cursive — курсивные шрифты;

fantasy — декоративные шрифты;

monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

 

size - задает размер шрифта в условных единицах:

Задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size="4"), так и относительной (например, size="+1", size="-1"). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size, но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.

Пример. Использование тега <FONT>

HTML 4.01IE 6IE 7IE 8Cr 4.0Op 10Sa 4Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>Тег FONT</title>

</head>

<body>

 

<p><font size="5" color="red" face="Arial">П</font>ервая буква этого предложения

написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>

 

</body>

</html>

 

 

Результат данного примера показан на рисунке ниже.

 

 

 

Тег <IMG>

 

Тег <IMG> предназначен для отображения на странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив, тег <IMG> в контейнер <A>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border="0" в тег <IMG>.

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

Синтаксис

HTML	<img src="URL" alt="альтернативный текст">

Параметры

align – определяет, как рисунок будет выравниваться по краю и способ обтекания текстом.

alt - альтернативный текст для изображения.

border - толщина рамки вокруг изображения.

height - высота изображения.

hspace - горизонтальный отступ от изображения до окружающего контента.

ismap - сообщает браузеру, что картинка является серверной картой-изображением.

src - путь к графическому файлу.

vspace - вертикальный отступ от изображения до окружающего контента.

width - ширина изображения.

usemap - ссылка на тег <MAP>, содержащий координаты для клиентской карты-изображения.

Закрывающий тег -не требуется.

Align

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>.

Синтаксис

<img align="bottom | left | middle | right | top">

Значения

В таблице перечислены возможные значение параметра align и результат его использования.

 

Значение	Описание	Пример
bottom	Выравнивание нижней границы изображения по окружающему тексту	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left	Выравнивает изображение по левому краю окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle	Выравнивание середины изображения по базовой линии текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right	Выравнивает изображение по правому краю окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

 

Наиболее популярные параметры — left и right, создающие обтекание текста вокруг изображения.

Значение по умолчанию: bottom

 

ALT

 

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

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

 

Синтаксис

 

HTML	<img alt="текст">

Любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

 

Border

 

Изображение, помещаемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или параметра link тега <BODY>.

Чтобы убрать рамку, следует задать параметр border="0".

Синтаксис

 

<img border="толщина рамки">

 

Height и width

 

Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <IMG>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы.

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

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

Синтаксис

HTML	<img height="значение"> <img height="значение">

Значения

Любое целое положительное число в пикселах или процентах.