- 09.03.2022
- 118
- 0
Занятие проходит компьютерном классе в разделе темы “HTML” в 8 классе.
Третье занятие: ребята познакомились со структурой языка HTML, научились составлять структуру web–страницы и закрепили эти знания на практике в текстовом редакторе Блокнот.
Следующие занятия посвящены вставке графических объектов, гиперссылок, таблиц. После прохождения данного раздела ребята получат базовые навыки создания web-страниц.
Форма занятия – групповая.
Цели:
1. Закрепить знания по созданию структуры web-страницы, навыки создания документов HTML.
2. Научить форматировать текст с использованием тэгов-форматирования: цвет фона, цвет шрифта, размер шрифта, начертание.
3. Развивать логическое мышление, познавательный интерес, компьютерную грамотность, навыки самостоятельной работы при изучении нового материала.
4. Воспитывать информационно грамотную личность, умение доводить начатое дело до конца.
5. Соблюдение санитарно-гигиенических норм в классе и техники безопасности при работе на ПК.
Задачи:
1. Повторить структуру создания web-страницы (основные тэги).
2. Познакомит с тэгами форматирования текста.
3. Показать изменения в документа при разных значениях атрибутов.
Методы:
Ø частично-поисковый;
Ø демонстрационный;
Ø самостоятельная работа с дидактическим материалом;
Ø индуктивный метод;
Ø дедуктивный метод;
Ø словесный;
Ø наглядный;
Ø практический.
Приемы деятельности:
Ø постановка проблемы;
Ø актуализация знаний;
Ø эвристическая беседа;
Ø работа за ПК.
Оборудование:
Ø доска (маркеры);
Ø видеопроектор;
Ø компьютер;
Ø ученические ПК – 8 штук.
Программное обеспечение:
Ø Текстовый редактор Блокнот.
Оформление доски: тема урока, основные тэги-формтирования.
Дидактический материал:
Ø распечатка по теме HTML в тетрадях учеников;
Ø раздаточный материал для выстраивания структуры web-страницы;
Ø индивидуальные карточки для самостоятельной работы – 8 штук;
Ø карточки для практической работы на ПК.
Ход занятия
I. Организационный момент (3 мин)
Проверка подготовки детей к занятию: тетрадь, дневник, учебник, письменные принадлежности. Проверка отсутствующих учеников, причины.
Сообщение темы и цели занятия.
У: Сегодня на уроке мы с вами продолжим изучение языка HTML. На предыдущем занятии мы изучили и закрепили на практике структуру создания web-документа. И для того, чтобы продолжить изучать HTML дальше, а это научиться форматировать текст, вставлять графические объекты, таблицы, мы должны сначала вспомнить структуру языка HTML.
II. Повторение (15 мин)
1) Задача: Повторить структуру создания web-страницы
Самостоятельная работа (10 мин)
- Давайте повторим структуру создания web-страницы, это понадобиться нам сегодня для работы, т.е. мы будем составлять новые страницы. Таким образом, к концу занятия у нас с вами будет уже две web – странички: одна с текстовыми тегами, другая с рисунками.
Задание детям:
Индивидуальная работа по карточкам. Самостоятельно составить структуру web – страницы из предложенных тегов. Подобрать к заголовкам соответствующие текст и картинку. (Приложение 1)
- Сложите, пожалуйста, теги в правильном порядке, чтобы получилась web-страница. К предложенным заголовкам подберите соответствующие текст и картинку. Вставьте их в web - страницу.
Проверка выполнения задания: После того как задание будет выполнено, один из детей вслух произносит собранную им структуру, остальные проверяют у себя.
- У всех такая структура?
Если кто-то не согласен, то почему?
- Еще раз озвучьте правильную структуру.
Правильно:
<html>
<head>
|Заголовок страницы
</head>
<body>
|текст, картинки
</body>
</html>
2) Задача: Повторить порядок сохранения HTML документа
Фронтальный опрос (4 мин)
- Что необходимо сделать после создания web-страницы? (Сохранить)
- Как мы будем это делать? Продиктуйте мне, пожалуйста, а я запишу на доске порядок сохранения.
Ребята проговаривают процесс сохранения документа, педагог попутно задает уточняющие вопросы, акцентируя внимание на важных моментах.
Правильно:
Файл -> Сохранить как -> название документа. html расширение
Подведение итога по повторению (1 мин)
Итак, мы повторили структуру создания web-страницы и правила сохранения HTML документа. Это будет нам необходимо при изучении новой темы на занятии.
Педагог оценивает: как ребятами усвоен материал. Кто хорошо ориентируется в структуре web–страницы, а кому еще необходимо поработать.
Изучение нового материала (25 мин)
Задача: Научить вставлять рисунок в web–страницу и познакомить со средствами изменения при помощи атрибутов и их значений.
1) Беседа. (5 мин)
- Давайте с вами отвлечемся от компьютеров и просто вспомним… Вы наверняка встречали в своей жизни огромное множество изображений (рисунков, картинок).
- Какие примеры вы можете привести, где применяются рисунки?
- А как вы думаете, для чего вставляют картинки в текст?
- Кто-нибудь пробовал это делать раньше?
Обобщая ответы детей, педагог подводит итог:
- Итак, мы с вами выяснили, что изображение может использоваться: для красоты, для графического сопровождения текста, нести в себе различную информацию (кнопки, графики и т.д.), а также умение вставлять картинку в текст, это пригодится нам при создании собственного сайта.
2) Слайдовая презентация с комментариями педагога (20 мин)
Для знакомства детей с новым материалом используется специально подготовленная слайд-презентация. (Приложение 2)
Дети по ходу объяснения педагога фиксируют в тетради новый материал.
|
Слайды и комментарии |
|
Для вставки рисунка в web – страницу используется тег <img>, с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. В данном примере это “tiger” c расширением jpg. Видим рисунок. Ребята записывают в тетрадь. |
|
А теперь рассмотрим подробно каждый из атрибутов тега <img>. Итак: атрибут height (высота). Какое значение может принимать этот атрибут, и на какие параметры влияет? Ребята говорят свои версии. Посмотрим (на экране меняется картинка). Какие изменения вы заметили? Масштаб изменился пропорционально (высота - ширина) |
|
Если есть высота, значит должна быть и ширина, значение следующего атрибута влияет на ширину рисунка. width (ширина). Обратите внимание на экране значение ширины в 2 раза меньше высоты, посмотрим как изменится рисунок, он сужается по горизонтали. |
|
Следующий атрибут тега <img> - align (выравнивание). Мы уже с ним знакомы. Какие значения он может принимать? Правильно:(left, right, top, button, center) Видите, присвоено значение right, поэтому рисунок находится справа. |
|
Часто рисунки вставлены в рамки, язык HTML тоже позволяет нам сделать обводку, с помощью атрибута border. Этот атрибут может принимать значения от 0 до 10.Чем больше значение, тем толще обводка рисунка. |
|
Добавим текст. Обратите внимание, изменили значения некоторых атрибутов. Каких? Повлияло ли изменение на изображение? |
|
Следующий атрибут hspace значение данного атрибута указывает на расстояние от рисунка до текста по вертикали. Обратите внимание, как сдвинулся текст на экране. |
|
Расстояние от изображения до текста можно изменять не только по вертикали, но и по горизонтали, используя атрибут vspace. |
|
Необходимым атрибутом является alt (подсказка). Не каждый браузер поддерживает графику, изображения не отображаются, но пользователь имеет возможность прочесть о том, что изображено (значение атрибута alt). Подсказка также всплывает при наведении мышкой на изображение. |
IV. Закрепление нового материала
Задача: Закрепить полученные знания на практике
1) Задание: (4 мин)
Создать папку для рисунков, скопировать рисунки, переименовать.
Создать новый документ html. Вставить 4 рисунка, используя все атрибуты, но присваивая им различные значения. Добавить текст.
Детям раздаются карточки с заданиями для практической работы.
- Различные изображения (рисунки) вы можете найти в папке “Рисунки” на своих компьютерах. Там же вы найдете и демонстрацию PowerPoint “HTML. Рисунки”. Чтобы сделать вашу новую страничку интереснее можете закрасить фон страницы и изменить цвет текста. - Мы с вами это уже делали на предыдущих занятиях.
2) Физ. Минутка (3 мин)
1. Исходное положение (И.п.) - сидя на стуле.1-2-отвести голову назад и плавно наклонить назад, 3-4-голову наклонить вперед, плечи не поднимать. Повторить 4-6 раз. Темп медленный. |
|
2. Исходное положение (И.п.) - сидя на стуле.1-2-отвести голову назад и плавно наклонить назад, 3-4-голову наклонить вперед, плечи не поднимать. Повторить 4-6 раз. Темп медленный. |
|
|
3. И. п. - сидя, руки на поясе. 1-поворот головы направо, 2-И. п. 3-поворот головы налево, 4-И. п. Повторить 6-8 раз. Темп медленный. |
|
4. И.п. - стоя или сидя, руки на поясе.
1- махом левую руку занести через правое плечо, голову повернуть налево,
2-И.п.,
3-4 то же правой рукой.
Повторить 4-6 раз. Темп медленный.
3) Самостоятельная работа. (30 мин)
Ребята садятся за компьютеры, работают самостоятельно. Педагог следит за выполнением задания, делает комментарии, указывает на недочеты, оценивает, хвалит. В случае возникновения вопроса учащийся может обратиться к педагогу или сверстнику. Также он может самостоятельно просмотреть презентацию нового материала за своим компьютером.
V. Итог занятия. (10 мин)
Форма организации – рефлексия.
- Сегодня мы с вами научились вставлять изображения в web-страницу.
- Предлагаю вам оценить свою работу на занятии по 5-и бальной системе и прокомментировать свою оценку.
Педагог дает общую оценку работы на занятии, обращая внимание на успехи каждого.
- Полученные сегодня знания пригодятся нам при создании своего сайта. Теперь у нас уже есть две web-страницы, и мы сможем делать ссылки между ними, этим мы займемся на следующем занятии.
Рабочие листы
к вашим урокам
Скачать
6 672 284 материала в базе
«Информатика», Поляков К.Ю., Еремин Е.А.
Больше материалов по этому УМК
Настоящий материал опубликован пользователем Кучаева Юлия Юрьевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Мини-курс
6 ч.
Мини-курс
8 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.