БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

HTML. Изображения на страницах

Для того чтобы вставить изображение предназначен тэг IMG. Но сначала нужно сохранить выбранное изображение в папку images.

Возьмем документ

 <HTML>
<HEAD>
<TITLE>
Описание Ежика
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Ёжик</H1>
<P ALIGN="JUSTIFY">
Ёжик – лучший друг Кроша. Не по детски серьёзный, внимательный и совестливый.
В отличии от Кроша, Ёжик хорошо воспитан и не такой активный как его друг.
Имеет хорошую способность мирить тех кто в ссоре. Очень чувствительный к окружающим.
</P>
<P ALIGN="JUSTIFY">
Застенчив и скромен.
</P>
<P ALIGN="JUSTIFY">
Любит когда вещи лежат на своих местах и не любит беспорядок.
Всегда помогает своему лучшему другу, даже когда он не прав.
</P>
</BODY>
</HTML>
 

Результат:

результата исполнения кода

Вставим изображение Ежика после заголовка и в конце текста:

 <HTML>
<HEAD>
<TITLE>
Описание Ежика
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Ёжик</H1>
<P ALIGN="JUSTIFY">
<IMG SRC="images/ez_2.png">
Ёжик – лучший друг Кроша. Не по детски серьёзный, внимательный и совестливый.
В отличии от Кроша, Ёжик хорошо воспитан и не такой активный как его друг.
Имеет хорошую способность мирить тех кто в ссоре. Очень чувствительный к окружающим.
</P>
<P ALIGN="JUSTIFY">
Застенчив и скромен.
</P>
<P ALIGN="JUSTIFY">
Любит когда вещи лежат на своих местах и не любит беспорядок.
Всегда помогает своему лучшему другу, даже когда он не прав.
</P>
<IMG SRC="images/ez_3.png">
<IMG SRC="images/ez_4.png">
</BODY>
</HTML>
 

В браузере получим:

вставка изображения

Как изменить размер изображения

Все изображения, которые мы вставили имеют разный размер. Давайте изменим размер изображений, для этого у тэга IMG есть два атрибута:

HEIGHT - устанавливает высоту изображения в пикселях или процентах.

WIDTH - устанавливает ширину изображения в пикселях или процентах.

Замечание. Чтобы сохранить пропорции изображения достаточно указать значение только одного параметра WIDTH или HEIGHT.

Код будет выглядеть так:

 <HTML>
<HEAD>
<TITLE>
Описание Ежика
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Ёжик</H1>
<P ALIGN="JUSTIFY">
<IMG SRC="images/ez_2.png" WIDTH="100">
Ёжик – лучший друг Кроша. Не по детски серьёзный, внимательный и совестливый.
В отличии от Кроша, Ёжик хорошо воспитан и не такой активный как его друг.
Имеет хорошую способность мирить тех кто в ссоре. Очень чувствительный к окружающим.
</P>
<P ALIGN="JUSTIFY">
Застенчив и скромен.
</P>
<P ALIGN="JUSTIFY">
Любит когда вещи лежат на своих местах и не любит беспорядок.
Всегда помогает своему лучшему другу, даже когда он не прав.
</P>
<IMG SRC="images/ez_3.png" WIDTH="100">
<IMG SRC="images/ez_4.png" WIDTH="100">
</BODY>
</HTML>
 

А результат:

изменить размер изображения

Выравнивание и обтекание изображения

Так же как элемент P тэг IMG имеет атрибут ALIGN, который не только определяет как рисунок будет выравниваться по краю, но и способ обтекания текстом.

Для установки обтекания атрибут ALIGN имеет такие параметры:

LEFT - Изображение располагается по левому краю родительского элемента

Пример

 <HTML>
<HEAD>
<TITLE>
Описание Ежика
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Ёжик</H1>
<P ALIGN="JUSTIFY">
<IMG SRC="images/ez_2.png" WIDTH="100" ALIGN="LEFT">
Ёжик – лучший друг Кроша. Не по детски серьёзный, внимательный и совестливый.
В отличии от Кроша, Ёжик хорошо воспитан и не такой активный как его друг.
Имеет хорошую способность мирить тех кто в ссоре. Очень чувствительный к окружающим.
</P>
<P ALIGN="JUSTIFY">
Застенчив и скромен.
</P>
<P ALIGN="JUSTIFY">
Любит когда вещи лежат на своих местах и не любит беспорядок.
Всегда помогает своему лучшему другу, даже когда он не прав.
</P>
<IMG SRC="images/ez_3.png" WIDTH="100">
<IMG SRC="images/ez_4.png" WIDTH="100">
</BODY>
</HTML>
 

В браузере:

Выравнивание и обтекание изображения

RIGHT - Изображение выравнивается по правому краю родительского элемента.

Пример

выравнивание по правому краю

BOTTOM - Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию.

Пример:

выравнивается по базовой линии текстовой строки

MIDDLE - Середина изображения выравнивается по базовой линии текущей строки текста.

Пример:

выравнивание по базовой линии текущей строки текста

TOP - Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

Пример:

выравнивание по самому высокому элементу текущей строки

Как установить отступ от изображения до текста

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

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

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

Для примера увеличим отступ по горизонтали для первого изображения:

 <HTML>
<HEAD>
<TITLE>
Описание Ежика
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Ёжик</H1>
<P ALIGN="JUSTIFY">
<IMG SRC="images/ez_2.png" WIDTH="100" ALIGN="LEFT" HSPACE="50">
Ёжик – лучший друг Кроша. Не по детски серьёзный, внимательный и совестливый.
В отличии от Кроша, Ёжик хорошо воспитан и не такой активный как его друг.
Имеет хорошую способность мирить тех кто в ссоре. Очень чувствительный к окружающим.
</P>
<P ALIGN="JUSTIFY">
Застенчив и скромен.
</P>
<P ALIGN="JUSTIFY">
Любит когда вещи лежат на своих местах и не любит беспорядок.
Всегда помогает своему лучшему другу, даже когда он не прав.
</P>
<IMG SRC="images/ez_3.png" WIDTH="100">
<IMG SRC="images/ez_4.png" WIDTH="100">
</BODY>
</HTML>
 

В браузере:

отступ от изображения до текста

Добавить комментарий
  • Комментарии не найдены