- Шульга Е. В.
- Уроки по HTML (основы)
- Просмотров: 4613
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>
В браузере:
