Разработка урока по информатике Работа с графическими изображениями в html

Цели урока:

Образовательная:

Закрепить навыки создания документов HTML:

структуру создания web-страницы;

научить использовать рисунок для оформления web-страницы;

показать изменение изображения при разных значениях атрибутов;

Развивающая: Развитие познавательного интереса, логического мышления. Развитие координации и внимания при работе с клавиатурой и мышью.

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

Вид урока: комбинированный

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

Межпредметная связь: иностранный язык

Методическое обеспечение урока: интерактивный плакат, материалы сайта www.html.ru

Содержание и ход урока:

1. Организационный момент

Приветствие

Проверка наличия учащихся в классе

2. Актуализация знаний по пройденной теме:

Задача: Повторить структуру создания web-страницы

Вспомни теги! (учащиеся по порядку называют теги, и объясняют их значение)

Работа с интерактивным плакатом. Разноуровневые здания.

3. Сообщение темы:  Итак, мы повторили структуру создания web-страницы и правила сохранения HTML документа. Это будет нам необходимо при изучении новой темы на занятии.

Флипчарт  с комментариями педагога. Учащиеся  по ходу объяснения педагога фиксируют в тетради новый материал.

Для вставки рисунка в web – страницу используется тег , с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. В данном примере это “tiger” c расширением jpg. Видим рисунок. Ребята записывают в тетрадь.

А теперь рассмотрим подробно каждый из атрибутов тега . Итак: атрибут height (высота). Какое значение может принимать этот атрибут, и на какие параметры влияет? Ребята говорят свои версии. Посмотрим (на экране меняется картинка). Какие изменения вы заметили? Масштаб изменился пропорционально (высота - ширина)

Если есть высота, значит должна быть и ширина, значение следующего атрибута влияет на ширину рисунка. width (ширина). Обратите внимание на экране значение ширины в 2 раза меньше высоты, посмотрим как изменится рисунок, он сужается по горизонтали.

Следующий атрибут тега - align (выравнивание). Мы уже с ним знакомы. Какие значения он может принимать?

Правильно:(left, right, top, button, center)

Видите, присвоено значение right, поэтому рисунок находится справа.

Часто рисунки вставлены в рамки, язык HTML тоже позволяет нам сделать обводку, с помощью атрибута border. Этот атрибут может принимать значения от 0 до 10.Чем больше значение, тем толще обводка рисунка.

Следующий атрибут hspace значение данного атрибута указывает на расстояние от рисунка до текста по вертикали. Обратите внимание, как сдвинулся текст на экране.

Расстояние от изображения до текста можно изменять не только по вертикали, но и по горизонтали, используя атрибут vspace.

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

Ответы на вопросы учащихся.

4. Закрепление нового материала:

Задача: Закрепить полученные знания на практике. Создать папку для рисунков, скопировать рисунки, переименовать.

Создать новый документ html. Вставить  рисунок, используя все атрибуты, но присваивая им различные значения. Добавить текст.

Учащимся  раздаются карточки с заданиями для практической работы.

Различные изображения (рисунки) вы можете найти в папке “Рисунки” на своих компьютерах. Учащиеся, работают самостоятельно. Педагог следит за выполнением задания, делает комментарии, указывает на недочеты, оценивает, хвалит. В случае возникновения вопроса учащийся может обратиться к педагогу или сверстнику

5. Подведение итога и выставление оценок.

Форма организации – рефлексия.

- Сегодня мы с вами научились вставлять изображения в web-страницу.

- Предлагаю вам оценить свою работу на занятии по 5-и бальной системе и прокомментировать свою оценку.

Педагог дает общую оценку работы  на занятии.

- Полученные сегодня знания пригодятся нам при создании своего сайта. Теперь у нас уже есть две web-страницы, и мы сможем делать ссылки между ними, этим мы займемся на следующем занятии.

6. Домашнее задание: Используя теги для вставки изображения, создать макет веб страницы, которая будет содержать автобиографические данные, вставить Ваше фото на страницу.

Приложения:

1. Интерактивный плакат.

2. Карточка рефлексии.

3. Практическая работа

Оценка учащегося  за работу на уроке

Фамилия ___________________________ группа_______

1. Оцените свою работу :        ______________________________

2. Что было для тебя трудного при изучении темы «Работа с графическими изображениями в html»?__________________________________________________

3. Оцени по пятибалльной  шкале понятность изложения темы «Работа с графическими изображениями в html»

Разработка открытого урока на тему: Работа с графическими изображениями в html.

Я.Г. Каримова

преподаватель информатики

Саркандский гуманитарный колледж

Цели урока: Образовательная: Закрепить навыки создания документов HTML:

• структуру создания web-страницы;

• научить использовать рисунок для оформления web-страницы;

• показать изменение изображения при разных значениях атрибутов;

Развивающая: Развитие познавательного интереса, логического мышления. Развитие координации и внимания при работе с клавиатурой и мышью.

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

Вид урока: комбинированный

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

Межпредметная связь: иностранный язык

Методическое обеспечение урока: интерактивный плакат, материалы сайта www.html.ru.

Содержание и ход урока:

1. Организационный момент

Приветствие

Проверка наличия учащихся в классе

1. Актуализация знаний по пройденной теме:

Задача: Повторить структуру создания web-страницы

• Вспомни теги! (учащиеся по порядку называют теги, и объясняют их значение)

• Работа с интерактивным плакатом. Разноуровневые здания.

1. Сообщение темы: Итак, мы повторили структуру создания web-страницы и правила сохранения HTML документа. Это будет нам необходимо при изучении новой темы на занятии.

Флипчарт с комментариями педагога. Учащиеся по ходу объяснения педагога фиксируют в тетради новый материал.

1. Для вставки рисунка в web – страницу используется тег , с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. В данном примере это “tiger” c расширением jpg. Видим рисунок. Ребята записывают в тетрадь.

2. А теперь рассмотрим подробно каждый из атрибутов тега . Итак: атрибут height (высота). Какое значение может принимать этот атрибут, и на какие параметры влияет? Ребята говорят свои версии. Посмотрим (на экране меняется картинка). Какие изменения вы заметили? Масштаб изменился пропорционально (высота - ширина)

3. Если есть высота, значит должна быть и ширина, значение следующего атрибута влияет на ширину рисунка. width (ширина). Обратите внимание на экране значение ширины в 2 раза меньше высоты, посмотрим как изменится рисунок, он сужается по горизонтали.

4. Следующий атрибут тега - align (выравнивание). Мы уже с ним знакомы. Какие значения он может принимать?

Правильно:(left, right, top, button, center)

Видите, присвоено значение right, поэтому рисунок находится справа.

1. Часто рисунки вставлены в рамки, язык HTML тоже позволяет нам сделать обводку, с помощью атрибута border. Этот атрибут может принимать значения от 0 до 10.Чем больше значение, тем толще обводка рисунка.

2. Следующий атрибут hspace значение данного атрибута указывает на расстояние от рисунка до текста по вертикали. Обратите внимание, как сдвинулся текст на экране.

3. Расстояние от изображения до текста можно изменять не только по вертикали, но и по горизонтали, используя атрибут vspace.

4. Необходимым атрибутом является alt (подсказка). Не каждый браузер поддерживает графику, изображения не отображаются, но пользователь имеет возможность прочесть о том, что изображено (значение атрибута alt). Подсказка также всплывает при наведении мышкой на изображение.

Ответы на вопросы учащихся.

1. Закрепление нового материала:

Задача: Закрепить полученные знания на практике. Создать папку для рисунков, скопировать рисунки, переименовать.

Создать новый документ html. Вставить рисунок, используя все атрибуты, но присваивая им различные значения. Добавить текст.

Учащимся раздаются карточки с заданиями для практической работы.

- Различные изображения (рисунки) вы можете найти в папке “Рисунки” на своих компьютерах. Учащиеся, работают самостоятельно. Педагог следит за выполнением задания, делает комментарии, указывает на недочеты, оценивает, хвалит. В случае возникновения вопроса учащийся может обратиться к педагогу или сверстнику

1. Подведение итога и выставление оценок.

Форма организации – рефлексия.

- Сегодня мы с вами научились вставлять изображения в web-страницу.

- Предлагаю вам оценить свою работу на занятии по 5-и бальной системе и прокомментировать свою оценку.

Педагог дает общую оценку работы на занятии.

- Полученные сегодня знания пригодятся нам при создании своего сайта. Теперь у нас уже есть две web-страницы, и мы сможем делать ссылки между ними, этим мы займемся на следующем занятии.

6. Домашнее задание: Используя теги для вставки изображения, создать макет веб страницы, которая будет содержать автобиографические данные, вставить Ваше фото на страницу.

Приложения: 1. Интерактивный плакат.

1. Карточка рефлексии.

2. Практическая работа

Оценка учащегося за работу на уроке

Фамилия ___________________________ группа________

  Оцените свою работу : ______________________________

2. Что было для тебя трудного при изучении темы «Работа с графическими изображениями в html»?__________________________________________________

 3. Оцени по пятибалльной шкале понятность изложения темы «Работа с графическими изображениями в html»

___________________________________________________________________

Практическая работа

Работа с графическими изображениями в html

Сначала вам нужно сохранить эту картинку у себя на компьютере. Для этого наведите курсор мышки на картинку и нажмите правую кнопку мышки. Выберите "Сохранить рисунок как..." Укажите место для сохранения картинки (Как я рекомендовал ранее - сделайте отдельную папку site на диске С например и туда сохраняйте все файлы уроков.)

Сохраните картинку там-же, где находится страничка, которую мы делаем - page.html Имя файла картинки оставьте тоже самое picture.jpg.

Опять же будеть внимательны! Имя файла не picture.jpg Для вставки на страницу картинки - используется тег . img это он аглийского слова image. изображение, картинка.В качестве параметра для этого тега, используется название картинки. Должен же компьютер знать какую картинку мы хотим вставить

В нашем случае для вставки картинки picture.jpg вставляем в код страницы, в то место куда мы хотим вставить картинку, следующий код :

picture.jpg

Таким образом код нашей страницы теберь будет выглядеть вот так

Моя первая интернет страница всего лишь за 5 минут

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

я буду богатым и свободным человеком !

picture.jpg"