Синтаксис
<img border="толщина рамки">
height и width
Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <IMG>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы.
Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным.
Синтаксис
HTML |
<img height="значение"> <img height="значение"> |
Значения
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
Исходная высота изображения.
src
Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF, PNG и JPEG.
Синтаксис
<img src="URL">
Значения
В качестве значения принимается полный или относительный путь к файлу.
hspace и vspace
Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.
Синтаксис
<img vspace="отступ по вертикали">
Значения - Любое целое положительное число в пикселах.
Значение по умолчанию - 0
Пример. Использование тега <IMG>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег IMG</title>
</head>
<body>
<p><a href="#"><img src="images/girl.png"
width="189" height="255" alt="lorem"></a>
Это ссылка, представленная элементом <IMG></p>
</body>
</html>
<UL> и <LI>
Тег <UL> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <LI>. Если к тегу <UL> применяется таблица стилей, то элементы <LI> наследуют эти свойства.
Синтаксис
<ul>
<li>элемент маркированного списка</li>
</ul>
Параметры - type - Устанавливает вид маркера списка.
<ul type="disc | circle | square">...</ul>
Для маркированного списка маркеры могут принимать один из трех видов: кружок (disc), окружность (circle) и квадрат (square). Значения параметра type и получаемый вид показан в таблице.
<ul type="disc"> ... </ul> |
Чебурашка Крокодил Гена Шапокляк |
<ul type="circle"> ... </ul> |
Чебурашка Крокодил Гена Шапокляк |
<ul type="square"> ... </ul> |
Чебурашка Крокодил Гена Шапокляк |
Значение по умолчанию - disc
Закрывающий тег - Обязателен.
<OL> и <LI>
Тег <OL> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <LI>. Если к тегу <OL> применяется таблица стилей, то элементы <LI> наследуют эти свойства.
Синтаксис
<ol>
<li>элемент нумерованного списка</li>
<li>элемент нумерованного списка</li>
</ol>
Параметры type Устанавливает вид маркера списка.
start Число, с которого будет начинаться нумерованный список.
Закрывающий тег - Обязателен.
Тег <LI> определяет отдельный элемент списка. Внешний тег <UL> или <OL> устанавливает тип списка — маркированный или нумерованный.
Синтаксис
<ul>
<li>элемент маркированного списка</li>
</ul>
<ol>
<li>элемент нумерованного списка</li>
</ol>
Параметры
type - Устанавливает вид маркера нумерованного или маркированного списка.
value - Число, с которого будет начинаться нумерованный список.
Закрывающий тег - Не обязателен.
<HR>
Отображает горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег <HR> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
Синтаксис
<hr>
Параметры
align - Определяет выравнивание линии.
color - Цвет линии.
noshade - Рисует линию без трехмерных эффектов.
size - Толщина линии.
width - Ширина линии.
Закрывающий тег - Не требуется.
Пример. Использование тега <HR>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег HR</title>
</head>
<body>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
<hr>
</body>
Результат данного примера показан на рисунке ниже.
Вид горизонтальной линии в браузере
align
Выравнивание линии по краю родительского элемента. В качестве родителя обычно выступает окно браузера.
Синтаксис
<hr align="center | left | right">
Значения
color – Задает цвет линии.
center - Выравнивание по центру.
left - Выравнивание линии по левому краю.
right - Выравнивание по правому краю.
Значение по умолчанию - center
color
Задает цвет линии, созданной с помощью тега <HR>. Одновременно, использование этого параметра запрещает трехмерные эффекты, словно был добавлен параметр noshade.
Синтаксис
<hr color="цвет">
Для задания цвета линии применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.
Значение по умолчанию - Нет.
size
Устанавливает толщину линии в пикселах.
Синтаксис
<hr size="число">
Значения
Любое целое положительное число. Нулевое или отрицательное значение устанавливает толщину линии в один пиксел.
Значение по умолчанию - 2
width
Устанавливает ширину линии в процентах или пикселах. При использовании процентов за 100% берется ширина родительского элемента. Как правило, в качестве родителя выступает окно браузера.
Синтаксис
<hr width="число">
Значения - Любое допустимое значение в пикселах или процентах.
Значение по умолчанию - 100%
Пример использования:
<!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>Тег HR, параметр width</title>
</head>
<body>
<hr noshade size="4" width="75%">
<hr noshade size="2" width="60%">
<hr noshade size="1" width="50%">
<hr noshade size="1" width="38%">
<hr noshade size="1" width="25%">
<hr noshade size="1" width="10%">
</body>
</html>
Результат данного примера показан ни рисунке ниже.
Вид линий разной ширины
Тег <A>
Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь.
Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы, но это работает не корректно в случае, когда страница сверстана <DIV> элементами. Об этом элементе будет рассказано в дальнейшем.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения параметра href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход.
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Синтаксис
<a href="URL">...</a>
<a name="идентификатор">...</a>
<a id="идентификатор">...</a>
<a id="идентификатор" name="идентификатор" href="URL">...</a>
<a id="идентификатор" href="URL">...</a>
Параметры
accesskey - Активация ссылки с помощью комбинации клавиш.
href - Задает адрес документа, на который следует перейти.
name - Устанавливает имя якоря внутри документа.
id - Устанавливает имя элемента внутри документа. Отличается сильно от предыдущего элемента, так как в этом случае ссылка обязана содержать элемент href, а так же должна быть
rel - Отношения между ссылаемым и текущим документами.
tabindex - Определяет последовательность перехода между ссылками при нажатии на кнопку <Tab>.
target - Имя окна или фрейма, куда браузер будет загружать документ.
title - Добавляет всплывающую подсказку к тексту ссылки.
Закрывающий тег - Обязателен.
Пример. Использование тега <A>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег А</title>
</head>
<body>
<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
<p><a href="tip.html">Как сделать такое же фото?</a></p>
</body>
</html>
accesskey
Параметр accesskey позволяет активировать ссылку с помощью некоторого сочетания клавиш с заданной в коде ссылки буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.
Internet Explorer: Alt + s
Chrome: Alt + s
Opera: Shift + Esc, s
Safari: Alt + s
Firefox: Shift + Alt + s
Синтаксис
<a accesskey="c">...</a>
Обязательный параметр - Нет.
Значения - Цифра (0-9) или латинская буква (a-z).
Значение по умолчанию - Нет.
Пример. Использование параметра accesskey
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег А, параметр accesskey</title>
</head>
<body>
<p><a href="images/xxx.jpg" accesskey="x">Посмотрите на мою фотографию!</a></p>
</body>
</html>
URL
Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью параметра target.
Синтаксис
<a href="URL">...</a>
Обязательный параметр - Обязателен для ссылок.
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию - Нет.
Пример. Использование параметра href
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег А, параметр href</title>
</head>
<body>
<p><a href="knob.html">Относительная ссылка</a></p>
<p><a href="http://www.htmlbook.ru/html/example/knob.html">Абсолютная ссылка</a></p>
</body>
</html>
name
Параметр name используется для определения якоря внутри страницы. Вначале следует задать в соответствующем месте закладку и установить ее имя при помощи параметра name тега <А>. Имя ссылки на закладку начинается символом #, после чего идет название закладки.
Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже на другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.
Между тегами <a name=...> и </a> текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке.
Синтаксис
<a name="закладка">...</a>
Обязательный параметр - Обязателен для якорей.
Значения - Любой текст с учетом регистра.
Значение по умолчанию - Нет.
Пример. Создание якоря с помощью параметра name
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег А, параметр name</title>
</head>
<body>
<p><a name="top"></a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p><a href="#top">Наверх</a></p>
</body>
</html>
tabindex
Параметр tabindex определяет последовательность перехода между ссылками при нажатии на кнопку <Tab>.
Синтаксис
<a tabindex="число">...</a>
Обязательный параметр - Нет.
Значения
Любое целое положительное число, начиная с нуля. Значения выстраиваются последовательно и переход между ссылками происходит от меньшего значения к большему.
Значение по умолчанию - Нет.
Пример. Переход между ссылками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег А, параметр tabindex</title>
</head>
<body>
<p><a href="link1.html" tabindex="1">Ссылка 1</a></p>
<p><a href="link3.html" tabindex="3">Ссылка 3</a></p>
<p><a href="link2.html" tabindex="2">Ссылка 2</a></p>
<p><a href="link4.html" tabindex="4">Ссылка 4</a></p>
</body>
</html>
target
По умолчанию, при переходе по ссылке документ открывается в текущем окне, фрейме или в новом окне. При необходимости, это условие может быть изменено параметром target тега <А>. В XHTML применение этого параметра запрещено.
Синтаксис
<a target="имя окна">...</a>
Обязательный параметр - Нет.
Значения
В качестве значения используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
_blank - Загружает страницу в новое окно браузера.
_self - Загружает страницу в текущее окно.
_parent - Загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top - Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.
Значение по умолчанию - _self
Пример. Открытие ссылки в новом окне
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег А, параметр target</title>
</head>
<body>
<p><a href="link1.html" target="_blank">Загрузить страницу в новом окне</a></p>
</body></html>
title
Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке.
Синтаксис
<a title="текст">...</a>
Обязательный параметр - Нет.
Значения
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.
Значение по умолчанию - Нет.