Презентация "Размещение изображений в 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 - определяет рамку вокруг изображения.

Изменение размеров картинки Атрибуты:

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

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

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

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

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

Размещение изображения ALIGN – определяет способ выравнивания картинки по горизонтали. Пример: <img src=“tigra.jpg”>

ALIGN

left

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

center

(по центру)

right

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

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

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

align=left

align=center

align=right

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

align=left
align=right
align=bottom
align=middle
align=top

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

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

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

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

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

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

Размещение изображения в тексте <img src=“tigra.jpg” align=left> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле.

align=left

Размещение изображения в тексте <<img src=“tigra.jpg” align=right> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле.

align=right

Размещение изображения в тексте <img src=“tigra.jpg” align=lbottom> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле.

align=bottom

Размещение изображения в тексте <img src=“tigra.jpg” align=middle> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле.

align=middle

Размещение изображения в тексте <img src=“tigra.jpg” align=top> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле.

align=top

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

Размещение изображения в тексте Параметры тега <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.

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

Подписи к слайдам:

Информатика - еще материалы к урокам:

Предметы

Похожие материалы