Презентация "Размещение изображений в HTML-документе"


Подписи к слайдам:
Размещение изображений в HTML. Обтекание.

Размещение изображений в  HTML-документе

Учитель информатики

МБОУ «Гимназия №5» г.Брянска

Нечаева Юлия Валерьевна

Цель урока:

  • Научиться представлять графические данные на HTML-страницах
  • Изучить атрибуты, используемые для представления изображений в HTML-документе.

Вставка изображений в html-документ

Вставка изображений в html-документ

Общая конструкция: <IMG SRC=“имя файла.расширение”>

  • <IMG> (не имеет закрывающегося тэга)
  • SRC=“имя файла.расширение” – указывает, где находится изображение.

!

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

Вставка изображений в html-документ

Если картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке.

!

<img src=“tigra.jpg”> полный путь

Вставка изображений в html-документ

Команда для вставки изображения в документ HTML:

  • <image>image.jpg</img>
  • <img src=“image.jpg”>
  • <body background=“image.jpg”>
  • <img src=“image.jpg”> 
  • <img url=“image.jpg”>

Вставка изображений в html-документ

Какой путь нужно прописать для вставки изображения tigra.jpg на сайт index.html?

<img src=“tigra.jpg”>

Какой путь нужно прописать для вставки изображения krolik.jpg на сайт index.html?

<img src=“work/images/krolik.jpg”>

work

site

index.html

tigra.jpg

images

krolik.jpg

Рамка вокруг изображения

  • BORDER = число в пикселях от 0 до 10 - определяет рамку вокруг изображения.

<img src=“tigra.jpg” border=0>

<img src=“tigra.jpg” border=5>

Изменение размеров картинки

Атрибуты:

  • WIDTH = ширина (в пикселях или в %)
  • HEIGHT = высота (в пикселях или в %)
  • Пример:

    <img src=“tigra.jpg” width=297 height=399>

Указывайте реальные размеры картинки – так сохраняется первоначальное качество изображения.

!

Изменение размеров картинки

Что произойдет, если размеры картинки tigra.jpg задать width=399 height=399? (Реальные размеры картинки высота – 399 пикселей, ширина – 297 пикселей)

Изменение размеров картинки

Ответ: Изображение увеличится в ширину

1

2

Пример изображения и результат действия тэга с измененными атрибутами

1

2

Размещение изображения

ALIGN – определяет способ выравнивания картинки по горизонтали.

Пример:

<p align=center>

<img src=“tigra.jpg”>

</p>

ALIGN

left

(по левому краю)

center

(по центру)

right

(по правому краю)

Изображение нужно помещать в абзац <p>…</p>, а затем абзац выравнивать по левому краю, по центру, правому краю.

!

Размещение изображения

align=left

align=center

align=right

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

align=left

align=right

align=bottom

align=middle

align=top

Использование атрибута ALIGN:

Текст обтекает справа

Текст обтекает слева

по нижней границе строки

по верхней границе строки

посередине строки

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

<img src=“tigra.jpg” align=left>

<p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p>

align=left

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

<<img src=“tigra.jpg” align=right>

<p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p>

align=right

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

<img src=“tigra.jpg” align=lbottom>

<p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p>

align=bottom

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

<img src=“tigra.jpg” align=middle>

<p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p>

align=middle

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

<img src=“tigra.jpg” align=top>

<p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p>

align=top

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

<img src=“tigra.jpg”>

<img src=“tigra.jpg” hspace=20 vspace=20>

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

Параметры тега <IMG> регулирующие отступы вокруг изображения:

  • width, height
  • rows, cols
  • hspace, vspace
  • hbuffer, vbuffer
  • iheight, iwidth

Дополнительные атрибуты

ALT (альтернативный текст)

    • определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен текстовый режим

TITLE 

    • определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title

Главное не путайте TITLE и ALT. Содержимое ALT отображается, если в браузере отключен показ картинок и, в отличие от TITLE, он является обязательным атрибутом.

!

Дополнительные атрибуты

Дополнительные атрибуты

Код для вывода подобного изображения с подсказкой:

Тигра

  • <img src=“tigra.jpg” alt=“tigra”>
  • <img src=“tigra.jpg” alt=“Тигра”>
  • <img src=“tigra.jpg” title=“Тигра”>
  • <img src=“tigra.jpg” alt=“Тигра” title=“тигр”>

Задание

  • Перейти в папку «html_изображения».
  • Открыть файл index.html с помощью блокнота.
  • Вставьте изображение tigr.jpg на Web-страницу.
  • Уменьшите размеры рисунка в 2 раза по ширине и высоте, написав width=30% и height=50%.
  • Увеличьте пространство вокруг рисунка, написав vspace=20 и hspace=20.
  • Тоже проделайте с рисунком tigr_2.jpg.
  • Вставьте на страницу текст.
  • Выровняйте изображение tigr.jpg по правому краю, чтобы текст обтекал его слева.
  • Выровняйте изображение tigr_2.jpg по левому краю, чтобы текст обтекал его справа.
  • Создайте подсказку, которая появится под указателем мыши при наведении на картинку, написав title=“тигр”.
  • Создайте вокруг рисунка рамку: border=5.