Презентация, доклад на тему Вставка изображения

Вопросы:Что называют файлом?Из каких частей состоит имя файла?Как формируется полное имя файла?Какие расширения графических файлов вы знаете?

Слайд 1Вставка изображений на веб-страницу
8 класс

Вставка изображений на веб-страницу8 класс

Слайд 2Вопросы:
Что называют файлом?
Из каких частей состоит имя файла?
Как формируется полное имя

файла?
Какие расширения графических файлов вы знаете?
Вопросы:Что называют файлом?Из каких частей состоит имя файла?Как формируется полное имя файла?Какие расширения графических файлов вы знаете?

Слайд 3Вставка изображений
Для вставки изображений на веб-страницу используется тег IMG с обязательным

атрибутом src, последний указывает адрес размещения исходного изображения.
Вставка изображенийДля вставки изображений на веб-страницу используется тег IMG с обязательным атрибутом src, последний указывает адрес размещения

Слайд 4Возможные значения атрибута src
- в случае, когда изображение

хранится в той же папке, что и файл веб-страницы


Например, если файл веб-страницы 1.html и файл изображения kat.jpg находятся в одной папке веб, то нужно написать следующий код:


Возможные значения атрибута src - в случае, когда изображение хранится в той же папке, что и файл

Слайд 5Возможные значения атрибута src
- в случае, когда

изображение находится не в папке размещения файла веб-страницы


Например, если файл веб-страницы 1.html находится в папке веб, а файл изображения kat.jpg находятся в другой папке рисунки, то нужно написать следующий код:

Возможные значения атрибута src - в случае, когда изображение находится не в папке размещения файла веб-страницыНапример, если

Слайд 6Возможные значения атрибута src
- в

случае, если вы ссылаетесь на изображение, размещённое в сети Интернет


Например, если файл веб-страницы 1.html находится в папке веб, а файл изображения находятся в сети Интернет, то нужно написать следующий код:

Возможные значения атрибута src - в случае, если вы ссылаетесь на изображение, размещённое в сети ИнтернетНапример, если

Слайд 7Атрибуты тега
Атрибут alt задаёт отображение альтернативного текста в случаях, когда

изображение не может быть отображено.


Например, строчка
изображение кота
выведет текст «изображение кота», если рисунок не откроется
Атрибуты тега Атрибут alt задаёт отображение альтернативного текста в случаях, когда изображение не может быть отображено.Например, строчка

Слайд 8Атрибуты тега
При помощи атрибутов height и width можно задать высоту

и ширину изображения в пикселях.


Например, строчка

покажет изображение, в котором размеры будут соответствовать 100 пикселям по высоте и 50 – по ширине.

При этом изображение может деформироваться!
Атрибуты тега При помощи атрибутов height и width можно задать высоту и ширину изображения в пикселях.Например, строчка

Слайд 10Атрибуты тега
Атрибут align задаёт выравнивание изображения по краям веб-страницы.
Возможные значения:
left

- картинка будет прижата к левому краю, текст обтекает ее справа
right - картинка прижата к правому краю, текст обтекает слева
top – текст располагается вверху
bottom - текст располагается внизу картинки
middle - текст располагается посередине

Атрибуты тега Атрибут align задаёт выравнивание изображения по краям веб-страницы.Возможные значения:left - картинка будет прижата к левому

Слайд 11ALIGN=“LEFT”

ALIGN=“LEFT”

Слайд 12ALIGN=“RIGHT”

ALIGN=“RIGHT”

Слайд 13ALIGN=“TOP”

ALIGN=“TOP”

Слайд 14ALIGN=“BOTTOM”

ALIGN=“BOTTOM”

Слайд 15ALIGN=“MIDLLE”

ALIGN=“MIDLLE”

Слайд 16Атрибуты тега
VSPACE - задает расстояние между текстом и рисунком (по

вертикали). Расстояние задается в пикселях.
HSPACE - задает расстояние между текстом и рисунком по горизонтали. Расстояние задается в пикселях.
ALT - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки.
WIDTH - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).
HEIGHT - высота самой картинки (тоже в пикселях)
Атрибуты тега VSPACE - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. HSPACE

Слайд 17Атрибуты тега
Атрибут border задаёт толщину обрамления изображения.
BORDER - рамка

вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.

Например, строчка

покажет изображение с чёрной рамкой шириной 10 пикселей.
Атрибуты тега Атрибут border задаёт толщину обрамления изображения. BORDER - рамка вокруг самой картинки (в пикселях). Можно

Слайд 18BORDER=

BORDER=

Слайд 19Атрибуты тега

Атрибуты тега

Слайд 20BACKGROUND=“question.jpg”

BACKGROUND=“question.jpg”

Слайд 21Попробуем сами
Найдите в сети Интернет изображение с кошкой/собакой/хомяком (ваше домашнее животное);
Сохраните

картинку в своей папке на локальном диске Е;
Зная тег и атрибуты для вставки изображения, создайте web-страницу о вашем домашнем животном;
Результат работы сохраните в свою папку на локальном диске Е под именем img.html;
Не забудьте поэкспериментировать с другими атрибутами и посмотреть результаты.
Попробуем самиНайдите в сети Интернет изображение с кошкой/собакой/хомяком (ваше домашнее животное);Сохраните картинку в своей папке на локальном

Что такое shareslide.ru?

Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.


Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть