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

Размещение изображения в тексте HSPACE – отступ в пикселях или % по горизонтали от картинки до других объектов документа. VSPACE – отступ в пикселях или % по вертикали от картинки до других объектов документа. <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=“tigr.jpg”> Вставка изображения <img src=“tigr1.jpg”> Если допущена ошибка в названии файла <img src=“tigr1.jpg” alt=“тигр”> Допущена ошибка в названии файла и добавлен атрибут alt <img src=“tigr.jpg” title=“тигр”> При наведении мышки на изображение всплывает подсказка

Дополнительные атрибуты Код для вывода подобного изображения с подсказкой: Тигра <img src=“tigra.jpg” alt=“tigra”> <img src=“tigra.jpg” alt=“Тигра”> <img src=“tigra.jpg” title=“Тигра”> <img src=“tigra.jpg” alt=“Тигра” title=“тигр”>