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

Содержание

Тема: Вставка изображений на web страницы

Слайд 1


Слайд 2Тема: Вставка изображений на web страницы

Тема: Вставка изображений на web страницы

Слайд 3Цель урока: Сформировать навыки работы добавления графических объектов на web страницах

Цель урока: Сформировать навыки работы добавления графических объектов на web страницах

Слайд 4Ключевые слова:

Src
BORDER
WIDTH
HEIGHT

Ключевые слова:SrcBORDERWIDTHHEIGHT

Слайд 5Ситуация
Поступило предложение, необходимо вставить изображения на сайт по услугам Грузоперевозок
А

именно эту картинку
Ситуация Поступило предложение, необходимо вставить изображения на сайт по услугам ГрузоперевозокА именно эту картинку

Слайд 6Все картинки, фотографические снимки, иллюстрации, графики, схемы вставляются в документ при помощи

такого элемента, не требующий закрывающей части:


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

Слайд 7Где «image.jpg» - это собственно вставляемая картинки с ее именем и

расширением.
Вся информация, расположенная между кавычками является ссылкой (путь к картинке).
В нашем примере картинка лежит в том же папке, где и сама веб-страница.
Где «image.jpg» - это собственно вставляемая картинки с ее именем и расширением.Вся информация, расположенная между кавычками является

Слайд 81. Если же картинка лежит в папке, которая лежит в вашей

основной папке, то путь к ней будет выглядеть так:


1. Если же картинка лежит в папке, которая лежит в вашей основной папке, то путь к ней

Слайд 92. Если картинка лежит еще на уровень выше, а сама страница

находится в поддиректории, то ссылка будет другой:


2. Если картинка лежит еще на уровень выше, а сама страница находится в поддиректории, то ссылка будет

Слайд 103. Если картинка размещена на другом сайте, то путь прописывается полностью,

вот так:


3. Если картинка размещена на другом сайте, то путь прописывается полностью, вот так:

Слайд 11У данного тэга могут быть следующие атрибуты:
ALT="какой-то текст" - альтернативный текст. Текст,

который появляется вместо картинок при просмотре странички браузером с отключенной автоматической загрузкой изображений (отключают многие - для экономии времени на медленных линиях связи).


У данного тэга могут быть следующие атрибуты:ALT=

Слайд 12BORDER="n" - рамка вокруг рисунка, где n - ее толщина в пикселях.

При n="0" рамка не рисуется.
BORDER=

Слайд 13
WIDTH="n" - задается ширина изображения в пикселях или в процентах от ширины

экрана браузера (тогда после n следует знак %).
WIDTH=

Слайд 14HEIGHT="n" - высота изображения в пикселях или в процентах от высоты экрана.

HEIGHT=

Слайд 15HSPACE="n" - отступ слева и справа от картинки шириной в n пикселов

(т.е. свободное пространство между рисунком и текстом или чем-то иным).

VSPACE="n" - вертикальный отступ от картинки в пикселах.

ALIGN=CENTER - по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка. Применяя аттрибут ALIGN можно выравнивать текст по верхнему краю (TOP) или по центру рисунка ( CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение аттрибута LEFT или RIGHT, рисунок прижимается соответственно к левому или правому краю экрана.
HSPACE=

Слайд 171. Какой элемент отвечает за вставку графики в веб-страницу?
2. Назовите атрибуты,

отвечающие за ориентацию картинки в документе.
3. С помощью какой команды можно сделать так, чтобы текст обтекал картинку с обеих сторон?
4. Атрибуты, отвечающие за расстояние между текстом и картинкой.
5. Какая команда задает картинке рамку?

Вопросы

1. Какой элемент отвечает за вставку графики в веб-страницу?2. Назовите атрибуты, отвечающие за ориентацию картинки в документе.3.

Слайд 18Дом. задание
http://htmlbook.ru/practical/tsvet-fona-i-teksta-dokumenta

Дом. задание http://htmlbook.ru/practical/tsvet-fona-i-teksta-dokumenta

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

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


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

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

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

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