Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Другие методич. материалы / Методическая разработка урока "Основы языка разметки гипертекста HTML"

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


  • Информатика

Поделитесь материалом с коллегами:


Государственное бюджетное профессиональное образовательное

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

«Борский государственный техникум»








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



Тема урока: Основы языка разметки гипертекста HTML

Дисциплина: Информатика






Разработала:

Волгина Е.В

преподаватель информатики и ИКТ 1-й категории

Е.В. Волгина






2015г

Цель: Изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании.

Задачи:

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

  • объяснить назначение языка разметки гипертекста HTML, основных тегов и их атрибутов;

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

  • продемонстрировать использование этих команд на конкретных примерах оформления WEB-страниц;

  • сформировать навыки и умения создания простейших WEB-страниц

развивающая:

  • способствовать развитию информационной культуры;

  • способствовать развитию логического мышления, памяти, внимания, творческого воображения, познавательного интереса

воспитательная:

  • воспитать коммуникативные качества для рациональной и продуктивной работы;

  • воспитывать интерес к предмету

Тип урока: Комбинированный (урок изучения и первичного практического закрепления новых знаний)

Методы, применяемые на уроке:

  • объяснительно-иллюстративный;

  • личностно-ориентированный;

  • практический (самостоятельная работа обучающихся);

  • видеометод (использование ЦОР).

Виды контроля:

  • фронтальный опрос;

  • практическая работа;

  • самостоятельная работа


ТСО:

  • компьютеры, мультимедийный проектор, экран;

  • тематическая презентация Power Point

  • ЭОР

Программное обеспечение:

ОС Windows, браузер.


Продолжительность проведения занятия 45 минут.


План урока:


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

  2. Повторение. Актуализация опорных знаний (по вопросам) (5 мин)

  3. Основной (изучение нового материала)

  1. Теоретическая часть.

Изучение нового материала

  • Мотивационное начало урока (постановка цели урока и задач) (3мин)

  • Изложение нового материала на примерах использования тегов форматирования (с использованием презентации).

  • (17 мин)

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

Закрепление нового материала путем выполнения практического задания (работа за компьютером с использованием высокоскоростного доступа в Интернет) (10 мин)

  1. Заключительный. Подведение итогов, выводы (5мин)

  2. Домашнее задание (2 мин.)






Ход урока:


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

Приветствие учащихся. Проверка присутствующих и готовности обучающихся к уроку.

  1. Актуализация опорных знаний.

Фронтальный опрос устный опрос по ранее изученной теме Web-сайт – гиперструктура данных

  1. Web-обозреватель, обозреватель, браузер — программное обеспечение для просмотра Web -сайтов, то есть для запроса Web -страниц.

  2. Web-страница (англ. Web.page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью Web-браузера (Википедия)

  3. Всемирная паутина (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).

  4. HTML-редакторы – инструментальные средства высокого уровня, используемые для создания Web-страниц.


  1. Изучение нового материала

  1. Теоретическая часть (Используется презентация к уроку)

    1. Мотивационное начало урока - постановка цели урока и задач

hello_html_m4167612f.png

Слайд 1.


    1. Изложение нового материала на примерах использования тегов форматирования:

  • язык разметки гипертекста HTML;

  • элемент (контейнер);

  • команды (теги), определяющие структуру WEB-документа;

  • команды (теги) форматирования текста;

  • атрибут

Вhello_html_44204061.png 1989 году выпускник Оксфордского университета, бакалавр в области физики, сотрудник Европейского центра ядерных исследований Тим Бернерс-Ли (Tim Berners-Lee) разработал язык HTML (HyperText Markup Language — язык разметки гипертекста), ставший основным языком создания веб-документов и прототипом Всемирной паутины (World Wide Web, WWW). 








Слайд 2.

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

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

Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом рассматривается более подробно.

hello_html_m63cf07ca.png

Слайд 3

Такие, как правило, имеют расширение htm или html. Отдельный документ, выполненный в формате HTML, называется:

HTML-документом;

Web-документом;

Web-страницей.

hello_html_mcf236a5.png

Слайд 4.


Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL-адрес в Интернете.

Элемент — конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста возможность вложения элементов.

hello_html_3ec49c9f.png

Слайд 6

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

hello_html_m7952ba3e.png

Слайд 7

Атрибут — параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартный или произвольный. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами и влияют на внешний вид Web-страницы.

hello_html_m7bcc6cbb.png

Слайд 8

Простой HTML –документ имеет следующую структуру:

<HEAD>

<TITLE>

Название Web-страницы

TITLE>

HEAD>

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

hello_html_m6d8d7549.png

Слайд 9


-обозначают начало и окончание HTML-документа.

<HEAD> HEAD> - теги, которые выделяют заголовок HTML-документа. В HTML-документе допускается только один заголовок, он должен находиться перед телом документа. Заголовок не влияет на внешний вид тела документа. Если заголовок указан, в нем обязательно должен присутствовать тег <TITLE> TITLE>

Текст, размещенный между тегами <TITLE> TITLE> – это заголовок страницы, который отображается не на странице, а в заголовке окна браузера.

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

hello_html_4ddae090.png

Слайд 10



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


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

Web-страница создается в программе «Блокнот»

hello_html_m20209caa.png

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

hello_html_618d8625.png

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

hello_html_791a05d1.pnghello_html_m40da6ca3.gif

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

hello_html_m50265233.pnghello_html_m40da6ca3.gif

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

hello_html_m21bcb563.pnghello_html_m621100cf.gif

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

hello_html_m2a069e5.gifhello_html_2ec6e34a.pnghello_html_2d3958e7.png

hello_html_36258fde.gifhello_html_m763085f2.png

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

hello_html_3fed98a7.png

Слайд 17. Откройте файл с помощью Internet и просмотрите результат

    1. Самостоятельная практическая работа

При самостоятельном выполнении практического задания используется раздаточный материал:

  • таблица с основными тегами html (приложение 1).

  • инструкционная карта практического задания (приложение 2)


  1. Подведение итогов

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


  1. Домашнее задание

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






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


  1. Семакин, И. Г. Информатика и ИКТ. Базовый уровень: учебник для 10—11 классов / И. Г. Семакин, Е. К. Хеннер. — 5-е изд. — М.: ВИНОМ. Лаборатория знаний, 2009. — 246 с.: ил. ISBN 978-5-9963-0098-3

  2. Хуторский, А.В. Технология создания сайтов. Информатика и ИКТ. 10-11 кл.: метод. Рекомендации к элективному курсу А.В. Хуторского, А.П. Орешко. – М.: Дрофа, 2007. – 129, [2] c. – (Элективные курсы) ISBN 978-5-358-03118-0

  3. HTML uchebnik_html.pdf – Adobe Acrobat Reader DC.,

  4. HTML Экспресс-курсПетюшкин В.В..pdf – Adobe Acrobat Reader DC.


Интерактивное издание

http://project.net.ru/others/article3/
















Приложение 1

Назначение

Формат

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

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

Описание страницы, в том числе ее имя

Имя страницы

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

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

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

<H?> H?>

Абзац

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

?>

?>

?>

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

<BR>

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

<HR>

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

<CENTER> CENTER>

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

<OL>

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

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

Жирный

Курсив

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

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

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

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

<FONT SIZE=?>

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

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














Приложение 2

СОЗДАНИЕ WEB-СТРАНИЦЫ


  1. HTML-код страницы помещается внутрь контейнера <HTML>HTML>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.

Web-страница разделяется на две логические части: заголовок и содержание.

  1. Заголовок Web-страницы заключается в контейнер <HEAD>HEAD>, содержит справочную информацию о странице (не отображаемой браузером) и название документа.

  2. Название Web-страницы содержится в контейнере <TITLE>TITLE> и выводится в строке заголовка браузера. Например

Компьютер

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

<BODY>

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

BODY>

Задание

  1. Откройте программу Блокнот (Пуск/Программы/Стандартные/ Блокнот). Создайте Web-страницу со следующим содержанием

Название: Моя страница

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

Меня зовут ____. Я студент ______________ страница. Изучив основные тэги HTML я смог создать Web-документ Это моя первая Web-страница

  1. Созданную Web-страницу необходимо сохранить в виде файла, имеющего расширение .htm или .html.

  2. Дать файлу имя index.htm (т.е. имя под которым Web-страница храниться в файловой системе) и сохранить в своей папке

  3. Открыть файл с помощью Internet и просмотреть результат.





Автор
Дата добавления 13.01.2016
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров421
Номер материала ДВ-336411
Получить свидетельство о публикации

Похожие материалы

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