Инфоурок / Информатика / Конспекты / Конспект-урока"Вставка изображений в Web-страницы"
Обращаем Ваше внимание: Министерство образования и науки рекомендует в 2017/2018 учебном году включать в программы воспитания и социализации образовательные события, приуроченные к году экологии (2017 год объявлен годом экологии и особо охраняемых природных территорий в Российской Федерации).

Учителям 1-11 классов и воспитателям дошкольных ОУ вместе с ребятами рекомендуем принять участие в международном конкурсе «Я люблю природу», приуроченном к году экологии. Участники конкурса проверят свои знания правил поведения на природе, узнают интересные факты о животных и растениях, занесённых в Красную книгу России. Все ученики будут награждены красочными наградными материалами, а учителя получат бесплатные свидетельства о подготовке участников и призёров международного конкурса.

ПРИЁМ ЗАЯВОК ТОЛЬКО ДО 15 ДЕКАБРЯ!

Конкурс "Я люблю природу"

Конспект-урока"Вставка изображений в Web-страницы"




Московские документы для аттестации!

124 курса профессиональной переподготовки от 4 795 руб.
274 курса повышения квалификации от 1 225 руб.

Для выбора курса воспользуйтесь поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВА).

ДИПЛОМ от Столичного учебного центра: KURSY.ORG


библиотека
материалов

hello_html_m5545a809.gifУрок «Вставка изображений в Web-страницы»

Цель

  • Научить вставлять графические изображения в html-документ. Рассказать о дополнительных параметрах обработки картинок посредством языка HTML.

Ход урока

Графика всегда преобладала над другими видами представления информации. Она же не будет исключением и в сфере веб-программирования.

Включение картинок в веб-страницу всегда приводит к успешным проектам или просто к хорошему и красивому интерфейсу сайта.

С помощью какой же команды можно поместить графический элемент на html-страницу?

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

image.jpg

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

Вся информация, расположенная между кавычками является ссылкой (путь к картинке).

В нашем примере картинка лежит в том же папке, где и сама веб-страница.
Вставка изображений в веб-страницу
1. Если же картинка лежит в папке, которая лежит в вашей основной папке, то путь к ней будет выглядеть так:

image.jpg

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

image.jpg

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

<img src="http: // www. sait. com. ua / images/image.jpg">
На практике, для своего же удобства, картинку всегда нужно класть в одну 
папку с веб-страницей и никакой путаницы не будет.

Также важно знать, что IMAGE.jpg, image.JPG, image.jpg и IMAGE.JPG – это разные имена файлов и регистр имен всегда нужно учитывать.

Вместе с текстом картинка на веб-странице выглядит так:


Вставка изображений в веб-страницу
После вставки картинки возникает вопрос: что нужно сделать, чтобы весь текст располагался рядом с картинкой, а не только одна его строчка?

Вспомним об атрибуте "ALIGN", который отвечает за выравнивание и используется с множеством других тэгов.

Атрибут «align» есть и у картинок:

image.jpg

В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.
Вставка изображений в веб-страницу
Чтобы разместить картинку справа, а текст обтекает ее слева, надо прописать
"Right":

<img src="image.jpg" align="right">
Вставка изображений в веб-страницу
Но это еще не все параметры. 
Текст может располагаться:

  • внизу картинки - image.jpg

  • посередине - image.jpg

  • вверху - image.jpg
    Кроме параметра «ALIGN» для тэга < img > имеется еще несколько атрибутов:

VSPACE - определяет расстояние между текстом и рисунком по вертикали, задающееся в пикселях.

Например: image.jpg, где 20 – это 20 использованных пикселейэкрана монитора.

HSPACE - задает расстояние между текстом и рисунком по горизонтали. Расстояние задается тоже в пикселях.

Например: image.jpg.


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


ALT - краткое описание картинки. Если навести курсором мыши на рисунок и подержать его секунду, то выскочит описание картинки (работает только в Internet Explorer).

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

А без атрибута «ALT» им не будет видно на что нажимать - если картинка не отображается, при заданном «alt», можно увидеть надпись о предназначении картинки.

гонщик


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


BORDER – задает в пикселях толщину рамки вокруг картинки. image.jpg


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


WIDTH - ширина самой картинки в пикселях. Если ширину не задавать, то она будет равна реальной ширине картинки.

HEIGHT - высота самой картинки в пикселях. Если высоту не задавать, то она будет равна реальной высоте картинки.

Вопросы

1. Какой элемент отвечает за вставку графики в веб-страницу?

2. Назовите атрибуты, отвечающие за ориентацию картинки в документе.

3. С помощью какой команды можно сделать так, чтобы текст обтекал картинку с обеих сторон?

4. Атрибуты, отвечающие за расстояние между текстом и картинкой.

5. Какая команда задает картинке рамку?

Список использованных источников

1. Урок на тему: «Графика в HTML», Залюбовская М. Н., г. Воронеж.

2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.

3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.




Самые низкие цены на курсы переподготовки

Специально для учителей, воспитателей и других работников системы образования действуют 50% скидки при обучении на курсах профессиональной переподготовки.

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Обучение проходит заочно прямо на сайте проекта "Инфоурок", но в дипломе форма обучения не указывается.

Начало обучения ближайшей группы: 20 декабря. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru


Общая информация

Номер материала: ДВ-541160
Курсы профессиональной переподготовки
133 курса

Выдаем дипломы установленного образца

Заочное обучение - на сайте «Инфоурок»
(в дипломе форма обучения не указывается)

Начало обучения: 20 декабря
(набор групп каждую неделю)

Лицензия на образовательную деятельность
(№5201 выдана ООО «Инфоурок» 20.05.2016)


Скидка 50%

от 13 800  6 900 руб. / 300 часов

от 17 800  8 900 руб. / 600 часов

Выберите квалификацию, которая должна быть указана в Вашем дипломе:
... и ещё 87 других квалификаций, которые Вы можете получить

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

Получите наградные документы сразу с 38 конкурсов за один орг.взнос: Подробнее ->>