Материал на проверке

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

2
0
Материал опубликован 27 September 2015

Размещение изображений в  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

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

в формате MS Powerpoint (.ppt / .pptx)
Комментарии

Уважаемые участники! Результаты конкурса будут объявлены до 7 декабря.

5 December 2018

Уважаемые участники! Поздравляем победителей и участников с завершением конкурса! Благодарим команду жюри за проделанную работу. ПОБЕДИТЕЛИ КОНКУРСА: Екатерина Зазыкина – Листовка «Всё в твоих руках!» Юлия Аношенкова – Листовка «Сохраним нашу природу – сохраним нашу Планету» Лада Кузнецова – Плакат «Чистота в лесу» Анастасия Хохлова – Рисунок «Роща наш дом, хватит мусорить в нем» Анушик Адамян – Листовка «Берегите планету, люди!» Амаду Анатов – Плакат «Берегите природу» Елизавета Шадрина – Листовка «Сохраняй! Сокращай! Соучаствуй!» ПРИЗЫ ПОЛУЧАЮТ: Екатерина Зазыкина – Листовка «Всё в твоих руках!» Юлия Аношенкова – Листовка «Сохраним нашу природу – сохраним нашу Планету» Лада Кузнецова – Плакат «Чистота в лесу» КУРАТОРЫ ПОБЕДИТЕЛЕЙ: Марина Назарова (г. Дубна, Московская обл.) Марина Баранова (пгт. Кардымово, Смоленская обл.) Татьяна Кожухарь (г. Воронеж) Инна Хохлова (г. Чита) Алина Пименова (г. Ногинск, Московская обл.) Любовь Кучуганова (г. Горно-Алтайск) Ирина Шадрина (пос. Элисенваара, респ. Карелия) В личных кабинетах участников автоматически сформированы наградные документы, которые можно скачать бесплатно. В ближайшее время администрация свяжется с призерами для уточнения данных. С уважением, администрация.

7 December 2018

Добрый вечер!Я оценила все 92 конкурсные работы.Почему меня исключили из состава жюри?

8 December 2018

Здравствуйте. Каждая работа оценивается по 6 обязательным критериям. Вы оценивали работу лишь по одному критерию, что является нарушением.

10 December 2018

Что нужно, чтобы получить приз?

23 December 2018

Информация была направлена вам в личном сообщении.

25 December 2018