Методическая разработка урока Основы языка разметки гипертекста HTML

Государственное бюджетное профессиональное образовательное
учреждение Самарской области
«Борский государственный техникум»

МЕТОДИЧЕСКАЯ РАЗРАБОТКА УРОКА

Тема урока: Основы языка разметки гипертекста 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 –документ имеет следующую структуру:
<br />Название Web-страницы <br />

На этой странице можно разместить любую интересную информацию в Интернете.

Слайд 9

Текст, размещенный между тегами – это заголовок страницы, который отображается не на странице, а в заголовке окна браузера.
- этот тег выделяет основную часть HTML-документа – его тело, в котором размещается вся отображаемая браузером информация. Кроме того, данный тег может содержать атрибуты, влияющие на внешний вид документа.

Слайд 10

Практическая часть.

2.1 Закрепление нового материала путем выполнения практического задания (индивидуальная работа на компьютере)
Web-страница создается в программе «Блокнот»

Слайд 11. Используя команды (теги), определяющие структуру WEB-документа, создаем простую Web-страницу.

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

Слайд 13. Во вкладке /Файл/ выбираем /Сохранить как/

Слайд 14. В появившемся диалоговом окне выбираем месторасположение нашей Web-страницы.

Слайд 15 Вводим имя файла с расширением html

Слайд 16. Выбираем одну кодировку из двух и сохраняем. На рабочем столе появляется иконка Web-страницы

Слайд 17. Откройте файл с помощью Internet и просмотрите результат
Самостоятельная практическая работа
При самостоятельном выполнении практического задания используется раздаточный материал:
таблица с основными тегами html (приложение 1).
инструкционная карта практического задания (приложение 2)

Подведение итогов
Проверка выполненной работы, анализ ошибок и их исправление, оценивание самостоятельной работы на ПК.

Домашнее задание
Выучить конспект, создать собственную страничку с помощью html-языка на свободную тему

Список использованной литературы

Семакин, И. Г. Информатика и ИКТ. Базовый уровень: учебник для 1011 классов / И. Г. Семакин, Е. К. Хеннер. 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.

Интерактивное издание
[ Cкачайте файл, чтобы посмотреть ссылку ]

Приложение 1
Назначение
Формат

Структура Web-страницы

Начало и конец страницы

Содержание страницы

Форматирование текста

Заголовок (уровни от 1 до 6)

Абзац

Абзац с выравниванием

Перевод строки

Горизонтальный разделитель

Выравнивание по центру

Нумерованный список

Ненумерованный список

Форматирование шрифта

Жирный

Курсив

Подчеркнутый

Верхний индекс

Нижний индекс

Размер шрифта (от 1 до 7)

Цвет шрифта (задается названием цвета или его 16-ричным кодом)

Гарнитура шрифта

Приложение 2
СОЗДАНИЕ WEB-СТРАНИЦЫ

HTML-код страницы помещается внутрь контейнера и выводится в строке заголовка браузера. Например

Компьютер

Основное содержание страницы помещается в контейнер , в него могут входить текст, графические изображения, таблицы, бегущие строки, звуковые файлы и т.д. Например,

Давайте знакомиться – Компьютер.

Задание
Откройте программу Блокнот (Пуск/Программы/Стандартные/ Блокнот). Создайте Web-страницу со следующим содержанием
Название: Моя страница
Содержание страницы (текст)
Меня зовут ____. Я студент ______________ страница. Изучив основные тэги HTML я смог создать Web-документ Это моя первая Web-страница
Созданную Web-страницу необходимо сохранить в виде файла, имеющего расширение .htm или .html.
Дать файлу имя index.htm (т.е. имя под которым Web-страница храниться в файловой системе) и сохранить в своей папке
Открыть файл с помощью Internet и просмотреть результат.

13PAGE 15

13PAGE 14815

Рисунок 10Рисунок 19сђЗаголовок 315