Урок информатики и ИКТ «Вставка графических объектов в HTML - документ» 1 курс

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

Тип урока : комбинированный .

Формы работы : фронтальная, коллективная, индивидуальная на компьютере.

Аннотация: Данный урок предполагается использовать на интерактивных досках с программным обеспечением elite Panaboard, ресурсы урока предназначены для помощи в изучении темы «Язык разметки гипертекста».

Курс повышения квалификации

Информационно-коммуникационные технологии в деятельности образовательного учреждения

Курс профессиональной переподготовки

Информатика: теория и методика преподавания в профессиональном образовании

Курс добавлен 11.06.2022

Курс повышения квалификации

Педагогические основы деятельности учителя общеобразовательного учреждения в условиях ФГОС «Домашнее обучение. Лайфхаки для родителей»

Выбранный для просмотра документ Урок Федоренко.docx

Тема урока: Вставка графических объектов в html - документ

Предмет: Информатика и ИКТ

Класс: группа 1 курс

Ключевые слова : информатика, HTML , язык разметки гипертекста, задания на компьютере, создание web -страниц, урок по html

Тип урока : комбинированный.

Формы работы : фронтальная, коллективная, индивидуальная на компьютере.

· Закрепить навыки работы при создании HTML-документа: научить вставлять изображения в web-страницу;

1. Формирование представления о работе в web -среде;

2. Развивать познавательный интерес и логическое мышление у учащихся.

3. Воспитывать аккуратность четкость выполнения действий, а также усидчивость и трудолюбие.

1. Повторение (разминка):

1.1 повторение тегов (установить соответствие между тегами и действием)

- полужирное начертание шрифта

- установка шрифта

- начало нового абзаца

- переход на новую строку

<table> - начало таблицы

<tr>- начало строки

< td > - начало столбца

1.2 Отобрать парные теги , расположив их в три столбика

Одиночные : < hr >

Могут быть одиночными или парными <tr>, < td >

1.3 Вставить необходимые теги в шаблон html -документа :

2. Объяснение нового материала. Вставка изображений в html -документ.

На сайт можно ставить изображения в формате jpg, gif и png.

Для небольших изображений, не имеющих большого количества цветов, можно использовать формат gif.

Для больших же картинок требующих качественного отображения можно использовать png.

Для вставки изображения в HTML используется одиночный тэг <img>

img - это от английского слова image - изображение, картинка.

<img srс="xxx.jpg"> , где xxx.jpg - название файла изображения.

При этом, картинка должна храниться в какой-то специальной папке, например foto .

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

< img sr с font-size: 12pt; font-family: "Times New Roman", serif">foto / xxx . jpg ">

Если на другом сайте в папке image то будет так:

<img sr с MsoNormal" style="margin-bottom: 6pt; text-align: justify; line-height: normal"> Важно! Чтобы картинка появилась на вашей странице, правильно указывайте путь к ней, а ещё лучше – размещайте картинки в той же папке, что и ваша страничка.

Существуют атрибуты для этого тэга.

align - выравнивание по горизонтали

Имеет значения left и right

height (высота) и width (ширина) - размер изображения в пикселях

border - рамка вокруг изображения

< img sr с font-size: 12pt; font-family: "Times New Roman", serif">foto / xxx . jpg " border ="1"> - Создаёт рамку толщиной 1 пиксель

alt - для того, чтобы при наведении на картинку появлялась подсказка, т.е. краткое описание изображения или так называемый альтернативный текст

< img src =” foto / xxx . jpg ” height =”100” width =”100” alt =”моя картинка ”>

3. Закрепление материала. Рассмотрим пример создания web -странички, на которой находятся картинки с альтернативными текстом.

Нам необходимо создать html -документ Олимпиада, на котором в таблице 3х2 нужно расположить три изображения с альтернативными надписями и такими же подписями во второй строке.

ОЛИМПИЙСКАЯ СИМВОЛИКА

Зажжение

олимпийского огня

Олимпийский флаг

Талисманы олимпиады 2014

Рекомендации к выполнению задания.

1. Создайте свою папку в папке Мои документы.

2. Картинки находятся в папке foto , находящейся в сетевой папке Prepod . Откройте папку Prepod.

3. Необходимо загрузить папку foto в свою папку.

4. При вставке картинки, измените её размер с помощью атрибутов тега < img >.

5. C охраните html -файл в своей папке с именем Олимпиада.

Исходный html -код

< center >< h 1> ОЛИМПИЙСКАЯ СИМВОЛИКА </ h 1>

< td >< img alt ="Зажжение олимпийского огня" src =1. jpg widht ="300" height ="200">

< td >< img alt ="Олимпийский флаг" src =2. jpg widht ="300" height ="200">

< td >< img alt ="Талисманы олимпиады 2014" src =3. jpg widht ="300" height ="200">

<td><center> Зажжение олимпийского огня

<td><center> Олимпийский флаг

<td><center> Талисманы олимпиады 2014

Указом Президента РФ

от 30 января 1998 года было решено

«В целях повышения социальной значимости материнства

установить праздник ДЕНЬ МАТЕРИ

и отмечать его в последнее воскресенье ноября»

Мама - это значит нежность,

Это ласка, доброта,

Мама - это безмятежность,

Это радость, красота Мама - это зелень лета,

Это снег, осенний лист,

Мама - это лучик света,

Мама - это значит ЖИЗНЬ!

С годами, став взрослее,

в чувствах строже.

Вдруг сердцем начинаешь понимать:

Нет человека ближе и дороже.

Чем женщина, которой имя - Мать.

4. Домашнее задание . В преддверии международного Дня матери, создайте дома страничку следующего вида.

Используемые источники :

1. Информатика и ИКТ, Н.Д.Угринович, Бином, 2010г.

Выбранный для просмотра документ ‚ ¦®!.txt

Данный материал был скачан с сайта www . metod - kopilka . ru

. Орфография и форматирование автора материала.

Образовательно-информационный ресурс для учителей информатики,

учащихся и всех-всех, кто интересуется ИТ:

http://www.metod-kopilka.ru Методическая копилка учителя информатики

Организационные, методические и нормативные документы,

лабораторно-практические работы (комплекс занятий по MS Word, MS Excel,

MS Access, MS PowerPaint, Paint, Move Maker и др. прикладным программам),

📎📎📎📎📎📎📎📎📎📎