- Преподавателю
- Информатика
- Методическая разработка урока Основы языка разметки гипертекста HTML
Методическая разработка урока Основы языка разметки гипертекста HTML
Раздел | Информатика |
Класс | - |
Тип | Другие методич. материалы |
Автор | Волгина Е.В. |
Дата | 15.12.2015 |
Формат | doc |
Изображения | Есть |
Государственное бюджетное профессиональное образовательное
учреждение Самарской области
«Борский государственный техникум»
МЕТОДИЧЕСКАЯ РАЗРАБОТКА УРОКА
Тема урока: Основы языка разметки гипертекста HTML
Дисциплина: Информатика
Разработала:
Волгина Е.В
преподаватель информатики и ИКТ 1-й категории
Е.В. Волгина
2015г
Цель: Изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании.
Задачи:
образовательная:
-
объяснить назначение языка разметки гипертекста HTML, основных тегов и их атрибутов;
-
сформулировать основные принципы создания WEB-страниц;
-
продемонстрировать использование этих команд на конкретных примерах оформления WEB-страниц;
-
сформировать навыки и умения создания простейших WEB-страниц
развивающая:
-
способствовать развитию информационной культуры;
-
способствовать развитию логического мышления, памяти, внимания, творческого воображения, познавательного интереса
воспитательная:
-
воспитать коммуникативные качества для рациональной и продуктивной работы;
-
воспитывать интерес к предмету
Тип урока: Комбинированный (урок изучения и первичного практического закрепления новых знаний)
Методы, применяемые на уроке:
-
объяснительно-иллюстративный;
-
личностно-ориентированный;
-
практический (самостоятельная работа обучающихся);
-
видеометод (использование ЦОР).
Виды контроля:
-
фронтальный опрос;
-
практическая работа;
-
самостоятельная работа
ТСО:
-
компьютеры, мультимедийный проектор, экран;
-
тематическая презентация Power Point
-
ЭОР
Программное обеспечение:
ОС Windows, браузер.
Продолжительность проведения занятия 45 минут.
План урока:
-
Организационный момент (3 мин)
-
Повторение. Актуализация опорных знаний (по вопросам) (5 мин)
-
Основной (изучение нового материала)
-
Теоретическая часть.
Изучение нового материала
-
Мотивационное начало урока (постановка цели урока и задач) (3мин)
-
Изложение нового материала на примерах использования тегов форматирования (с использованием презентации).
-
(17 мин)
-
Практическая часть.
Закрепление нового материала путем выполнения практического задания (работа за компьютером с использованием высокоскоростного доступа в Интернет) (10 мин)
-
Заключительный. Подведение итогов, выводы (5мин)
-
Домашнее задание (2 мин.)
Ход урока:
-
Организационный момент.
Приветствие учащихся. Проверка присутствующих и готовности обучающихся к уроку.
-
Актуализация опорных знаний.
Фронтальный опрос устный опрос по ранее изученной теме Web-сайт - гиперструктура данных
-
Web-обозреватель, обозреватель, браузер - программное обеспечение для просмотра Web -сайтов, то есть для запроса Web -страниц.
-
Web-страница (англ. Web.page) - документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью Web-браузера (Википедия)
-
Всемирная паутина (англ. World Wide Web) - распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).
-
HTML-редакторы - инструментальные средства высокого уровня, используемые для создания Web-страниц.
-
Изучение нового материала
-
Теоретическая часть (Используется презентация к уроку)
-
Мотивационное начало урока - постановка цели урока и задач
-
Слайд 1.
-
-
Изложение нового материала на примерах использования тегов форматирования:
-
-
язык разметки гипертекста HTML;
-
элемент (контейнер);
-
команды (теги), определяющие структуру WEB-документа;
-
команды (теги) форматирования текста;
-
атрибут
В 1989 году выпускник Оксфордского университета, бакалавр в области физики, сотрудник Европейского центра ядерных исследований Тим Бернерс-Ли (Tim Berners-Lee) разработал язык HTML (HyperText Markup Language - язык разметки гипертекста), ставший основным языком создания веб-документов и прототипом Всемирной паутины (World Wide Web, WWW).
Слайд 2.
Гипертекст - информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки).
Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому
Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом рассматривается более подробно.
Слайд 3
Такие, как правило, имеют расширение htm или html. Отдельный документ, выполненный в формате HTML, называется:
HTML-документом;
Web-документом;
Web-страницей.
Слайд 4.
Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL-адрес в Интернете.
Элемент - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста возможность вложения элементов.
Слайд 6
Тег - начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
Слайд 7
Атрибут - параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартный или произвольный. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами и влияют на внешний вид Web-страницы.
Слайд 8
Простой HTML -документ имеет следующую структуру:
<HEAD>
<TITLE>
Название Web-страницы
TITLE>
HEAD>
На этой странице можно разместить любую интересную информацию в Интернете.
Слайд 9
-обозначают начало и окончание HTML-документа.
<HEAD> HEAD> - теги, которые выделяют заголовок HTML-документа. В HTML-документе допускается только один заголовок, он должен находиться перед телом документа. Заголовок не влияет на внешний вид тела документа. Если заголовок указан, в нем обязательно должен присутствовать тег <TITLE> TITLE>
Текст, размещенный между тегами <TITLE> TITLE> - это заголовок страницы, который отображается не на странице, а в заголовке окна браузера.
- этот тег выделяет основную часть HTML-документа - его тело, в котором размещается вся отображаемая браузером информация. Кроме того, данный тег может содержать атрибуты, влияющие на внешний вид документа.
Слайд 10
-
Практическая часть.
2.1 Закрепление нового материала путем выполнения практического задания (индивидуальная работа на компьютере)
Web-страница создается в программе «Блокнот»
Слайд 11. Используя команды (теги), определяющие структуру WEB-документа, создаем простую Web-страницу.
Слайд 12. Созданный документ сохраняем согласно последовательному алгоритму
Слайд 13. Во вкладке /Файл/ выбираем /Сохранить как…/
Слайд 14. В появившемся диалоговом окне выбираем месторасположение нашей Web-страницы.
Слайд 15 Вводим имя файла с расширением html
Слайд 16. Выбираем одну кодировку из двух и сохраняем. На рабочем столе появляется иконка Web-страницы
Слайд 17. Откройте файл с помощью Internet и просмотрите результат
-
-
Самостоятельная практическая работа
-
При самостоятельном выполнении практического задания используется раздаточный материал:
-
таблица с основными тегами html (приложение 1).
-
инструкционная карта практического задания (приложение 2)
-
Подведение итогов
Проверка выполненной работы, анализ ошибок и их исправление, оценивание самостоятельной работы на ПК.
-
Домашнее задание
Выучить конспект, создать собственную страничку с помощью html-языка на свободную тему
Список использованной литературы
-
Семакин, И. Г. Информатика и ИКТ. Базовый уровень: учебник для 10-11 классов / И. Г. Семакин, Е. К. Хеннер. - 5-е изд. - М.: ВИНОМ. Лаборатория знаний, 2009. - 246 с.: ил. ISBN 978-5-9963-0098-3
-
Хуторский, А.В. Технология создания сайтов. Информатика и ИКТ. 10-11 кл.: метод. Рекомендации к элективному курсу А.В. Хуторского, А.П. Орешко. - М.: Дрофа, 2007. - 129, [2] c. - (Элективные курсы) ISBN 978-5-358-03118-0
-
HTML uchebnik_html.pdf - Adobe Acrobat Reader DC.,
-
HTML Экспресс-курс - Петюшкин В.В..pdf - Adobe Acrobat Reader DC.
Интерактивное издание
project.net.ru/others/article3/
Приложение 1
Назначение
Формат
Структура Web-страницы
Начало и конец страницы
Описание страницы, в том числе ее имя
Имя страницы
Содержание страницы
Форматирование текста
Заголовок (уровни от 1 до 6)
<H?> H?>
Абзац
Абзац с выравниванием
?>
?>
?>
Перевод строки
<BR>
Горизонтальный разделитель
<HR>
Выравнивание по центру
<CENTER> CENTER>
Нумерованный список
<OL>
Ненумерованный список
Форматирование шрифта
Жирный
Курсив
Подчеркнутый
Верхний индекс
Нижний индекс
Размер шрифта (от 1 до 7)
<FONT SIZE=?>
Цвет шрифта (задается названием цвета или его 16-ричным кодом)
Гарнитура шрифта
Приложение 2
СОЗДАНИЕ WEB-СТРАНИЦЫ
-
HTML-код страницы помещается внутрь контейнера <HTML>HTML>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.
Web-страница разделяется на две логические части: заголовок и содержание.
-
Заголовок Web-страницы заключается в контейнер <HEAD>HEAD>, содержит справочную информацию о странице (не отображаемой браузером) и название документа.
-
Название Web-страницы содержится в контейнере <TITLE>TITLE> и выводится в строке заголовка браузера. Например
Компьютер
-
Основное содержание страницы помещается в контейнер <BODY>BODY>, в него могут входить текст, графические изображения, таблицы, бегущие строки, звуковые файлы и т.д. Например,
<BODY>
Давайте знакомиться - Компьютер.
BODY>
Задание
-
Откройте программу Блокнот (Пуск/Программы/Стандартные/ Блокнот). Создайте Web-страницу со следующим содержанием
Название: Моя страница
Содержание страницы (текст)
Меня зовут ____. Я студент ______________ страница. Изучив основные тэги HTML я смог создать Web-документ Это моя первая Web-страница
-
Созданную Web-страницу необходимо сохранить в виде файла, имеющего расширение .htm или .html.
-
Дать файлу имя index.htm (т.е. имя под которым Web-страница храниться в файловой системе) и сохранить в своей папке
-
Открыть файл с помощью Internet и просмотреть результат.