Элемент <IMG>

Используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: маленькие пиктограммы, рисунки, графические объекты и карты изображений, занимающие большую часть окна браузера. Кроме того, элемент <IMG>поддерживает различные атрибуты.
Пример:<IMG src="URL" атрибуты>

src

Этот атрибут указывает на файл графики, задавая его URL.
Пример:<img src="http://ucoz.ru/img/image.jpg">

alt

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

Пример:<img src="http://ucoz.ru/img/image.jpg" alt="Тут нарисован логотип Ucoz">

width

Этот атрибут задает ширину области в пикселях, отводимой в окне под изображение.

Пример:<img src="http://ucoz.ru/img/image.jpg" alt="Тут нарисован логотип Ucoz" width="100">

height

Этот атрибут задает высоту области в пикселях, отводимой в окне под изображение

Пример:<img src="http://ucoz.ru/img/image.jpg" alt="Тут нарисован логотип Ucoz" width="100" height="50">

Как мы можем изменить свой материал, чтобы он выглядел привлекательней?
Самым действенным способом является изменение размеров.

Изменение размеров рисунка

Для того,чтобы вставить рисунок в сообщение нужно на панели редактора сообщений нажать img и в открывшейся панели ввести адрес рисунка и сообщение будет вставлено. Его можно отредактировать, расположив в центре, слева или справа,нажав соответствующие клавиши на панели редактора .... Вид кода рисунка без указания местоположения будет таким:

Теперь нам надо увеличить или уменьшить его размеры.
Открываем "Визуальный редактор"(упрощенная схема) и на панели нажимаем значок "вставка рисунка". Вводим адрес рисунка - insert- а потом указываем ширину и высоту такую, какую нам надо(она указывается в пикселях). Можно также вставить рисунок в рамку, сохраняем.
Можно также не входя в визуальный редактор просто добавить атрибуты рисунка.

Код с указанными размерами выглядит так:

Код с указанными размерами и расположением по центру:

Таким же образом редактируется и видео.

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

<IMG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

В таблице находится описание каждого параметра данной конструкции:

SRC	Имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Если файл находится в другом каталоге, укажите к нему путь. Вы можете перейти на закладку, в которой идет речь о путях.
ALIGN	Выравнивание изображения в документе: left - по левому краю. right - по правому краю. top или texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. middle - выравнивает базовую линию текущей текстовой строки с центром изображения. absmiddle - выравнивает центр текущей текстовой строки с центром изображения. bottom или baseline - выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки. absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
BORDER	Рамка вокруг рисунка. Значение по умолчанию - 0 (без рамки).
WIDTH	Ширина изображения в пикселях.
HEIGHT	Высота изображения в пикселях.
HSPACE	Горизонтальный отступ графического изображения в пикселях. Не обязательный параметр.
VSPACE	Вертикальный отступ в пикселях. Не обязательный параметр.
ALT	Это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой Обозреватель так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится на рисунке.
NAME	Определяет имя изображения. Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.
LOWSRC	Имя графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

Всегда задавайте размеры картинки в параметрах height и width, резервируя тем самым место в окне Обозревателя еще до загрузки изображения. Параметр alt можно не указывать, но вдруг у человека не загрузилась картинка, он хоть будет знать, что она собой представляет. 

Ссылка	<A HREF="URL"></A>
Ссылка на закладку	<A HREF="URL#***"></A>	(в другом документе)
	<A HREF="#***"></A>	(в том же документе)
На другое окно	<A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"> </A>
Определить закладку	<A NAME="***"></A>
Отношение	<A REL="***"></A>	(часто не поддерживается
Обратное отношение	<A REV="***"></A>	(часто не поддерживается
Графика	<IMG SRC="URL">
Выравнивание	<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT| RIGHT>
Выравнивание	<IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE| BASELINE|ABSBOTTOM>
Альтернатива	<IMG SRC="URL" ALT="***">	(выводится если картинка не изображается
Карта	<IMG SRC="URL" ISMAP>	(нужна также программа
Локальная карта	<IMG SRC="URL" USEMAP="URL">
Определение карты	<MAP NAME="***"></MAP>
Области карты	<AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
Размеры	<IMG SRC="URL" WIDTH=? HEIGHT=?>	(в точках)
Окантовка	<IMG SRC="URL" BORDER=?>	(в точках)
Отступ	<IMG SRC="URL" HSPACE=? VSPACE=?>	(в точках)
Заменитель в низком разрешении	<IMG SRC="URL" LOWSRC="URL">
Обновить	<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
Включить об'ект	<EMBED SRC="URL">	(вставить об'ект в страницу)
Размер об'екта	<EMBED SRC="URL" WIDTH=? HEIGHT=?>

Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:

<A HREF="URL" TARGET="Окно" TITLE="Подсказка">Название ссылки</A>

Параметры элемента <A> представлены в таблице:

HREF	URL (унифицированный локатор ресурсов) - адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички (например, http://lenininc.narod.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).
TARGET	Oпределяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения: _top - загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет). _blank - загружает гиперссылку в новом окне браузера. _self – загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать). _parent - загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.
TITLE	Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Параметр не обязательный.

пример ссылки:

<p align=center> <img border=0 src="015.jpg" Width="520" Height="390" alt="Мой рисунок"><br> <a href="002.htm" target="self" title="Пример ссылки">LINK</a>   </p>

Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем (традиционно - *.gif, *.jpg.). Для этого вместо названия ссылки нужно прописать графический элемент (Параметр TITLE должен быть только у рисунка):

<a href="URL" target="Окно">
<img border="0" src="Рисунок" width="Ширина" height="Высота" TITLE="Подсказка>
</a> 

Вы можете также создать ссылку на e-mail, в этом случае нужно в качестве URL’a прописать следующее: 
mailto:адрес электронной почты
Например:
<a href="mailto:lenin@zeos.net">Мое мыло</a>

Почтовая гиперссылка имеет несколько параметров (не обязательных): ?subject - Тема пиcьма &Body - Текст вашего сообщения &cc - Копии письма через запятую &bcc - Скрытые копии письма через запятую title="Выпадающая подсказка" Ставиться по желанию и распологаеться отдельно от параметров почтовой ссылки (смотрите расположение кавычек на примере ниже).  <a href="mailto:lenin@zeos.net ?subject=Поздравление &Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net" title="Пример почтовой гиперссылки">Мое мыло</a>

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

 Иногда возникает вопрос: как сделать ссылку на определенное место в том же или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Вот в этом нам и помогут закладки. 

Ссылка на закладку в том же документе имеет следующий вид:
<a href="#Имя закладки">Название раздела</a>

А так выглядит ссылка на закладку в другом документе:
<a href="Имя документа#Имя закладки">Название раздела</a>

Сама закладка будет такой:
<A NAME="Имя закладки"></a>

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

Для того, чтобы при наведении на ссылку курсором и при клике она меняла свой цвет в тег <BODY> нужно добавить еще несколько параметров.

text - цвет текста.
link - цвет ссылки.
vlink - цвет пройденой ссылки.
alink - цвет активной ссылки, когда подводиться к ней курсор.

<BODY text="black" link="blue" vlink="purple" alink="red">

Данные атрибуты определяют свойства для всего документа. Поместив такой код в HTML страницу, уже не надо будет назначать каждый раз цвет шрифту, т.к везде он будет таким, каким определен в теге <BODY>. 

Например:

пример, когда рисунок расположен слева

для этого пишем код:

пример, когда рисунок расположен справа

пишем код:

	текст
	текст