Методическая разработка "Изучение основ HTML"

Министерство образования и науки РФ

Муниципальное бюджетное образовательное учреждение «Караваевская средняя общеобразовательная школа»

Костромского муниципального района

Костромской области

Веричева Е.Е.

ИЗУЧЕНИЕ ОСНОВ HTML

Методическая разработка для учителей информатики

Караваево

Аннотация

Методическая разработка посвящена методике организации и проведения уроков информатики в 9 классе по теме «Основы HTML» и ориентирована на авторскую программу по информатике и информационным технологиям Н.В.Макаровой. Разработка предназначена для учителей информатики. Составлена на основе практического опыта учителя информатики и может быть использована для подготовки уроков информатики по теме «Основы HTML» и для проведения самостоятельного элективного курса.

Е.Е. Веричева, «Изучение основ HTML», методическая разработка для учителей информатики, Караваево, 2014.

Содержание

Введение 4

Методика преподавания теме «Основы HTML» 5

1. Общая характеристика темы «Основы HTML» 5

2. Методика проведения уроков по теме «Основы HTML» 8

2.1. HTML-файл. Структурные теги 8

2.2. Теги форматирования символов 10

2.3. Оформление текста на web-странице 12

2.4. Тег описания графического файла 13

2.5. Размещение графики на web-странице. Маркированный и нумерованный списки 14

2.6. Тег определения гиперссылок 16

2.7. Гиперссылки в web-документах 18

2.8. Контрольная работа по теме «Основы HTML» 18

Заключение 20

Список использованных источников 24

Приложения 25

Содержание предмета «Информатика и информационные технологии» направлено на воспитание информационной культуры учащихся. Использование различных технических устройств, компьютерных информационных технологий, осуществление поиска и извлечение информации из различных источников, владение основами аналитической переработки информации, оценивание полученных результатов и выводов, создание итогового продукта из переработанной информации – все это показатели владения информационной культурой.

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

Широкое распространение компьютерной сети Интернет существенно изменило объем и содержание информации, с которой приходится сталкиваться. Человек не только получил новое средство связи, реально объединяющее страны, но и средства, позволяющие удовлетворять большинство своих потребностей, и помимо удовольствия извлекать практическую пользу из мира компьютерных сетей.

Одним из основных сервисов Интернета с полным основанием можно считать сеть информационных ресурсов World Wide Web (WWW). Информация в WWW представлена в виде так называемых гипертекстовых  или гипермедийных  документов (web-страниц), которые могут содержать отформатированный текст, графику, таблицы, аудио и видеофрагменты и так далее. Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши. Активными могут быть фрагменты текста, целые изображения и их части. Щелчок по активной зоне вызывает загрузку целевого документа.

Большинство web-страниц создаются при помощи языка HTML (Hyper Text Markup Language). HTML – это стандартный язык разметки документов во Всемирной паутине. Он интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

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

Поэтому тема школьного курса информатики «Основы HTML» является актуальной и требует особого рассмотрения. Она позволяет, с одной стороны, способствовать овладению информационной культурой. При создании web-сайта учащийся ищет необходимую информацию, анализирует, сопоставляет, делает выводы, обрабатывает ее с помощью информационных и коммуникационных технологий, создает проект из переработанной информации и оценивает полученные результаты. С другой стороны, тема «Основы HTML» способствует развитию творческой активности учащихся, их самовыражению, формирует самостоятельность.

1. Общая характеристика темы «Основы HTML»

Цель темы «Основы HTML» состоит в формировании умений создавать статические web-страницы с использованием основных тегов языка разметки гипертекста HTML.

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

• способствовать формированию представления о структуре гипертекстового документа;

• способствовать формированию умения создавать web-страницу с текстом.

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

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

• в рамках элективного курса способствовать формированию умения создавать web-страницу, содержащую карту изображения;

• в рамках элективного курса способствовать формированию умения создавать web-страницу, содержащую таблицу.

К опорным понятиям теме относятся: Интернет, программа-браузер и ее управляющие элементы; домена и правило образования адреса в Интернете; технология поиска информации в Интернете.

Новыми понятиями темы являются: язык разметки гипертекста HTML, тег, основные теги HTML, атрибуты тегов, форматы графических файлов gif и jpeg, средства создания html-документов.

По завершению темы «Основы HTML» учащийся должен знать:

• назначение языка HTML;

• основные теги языка HTML;

• технологию оформления web-документов.

Учащиеся должны уметь:

• работать в среде редактора HomeSite или Блокнот;

• включать графическую иллюстрацию в web-документ;

• сделать гиперссылку в web-документе;

• сделать карту изображений в web-документе (для элективного курса);

• включать таблицу в web-документ (для элективного курса).

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

Тесно связана с такими темами курса информатики как «Обработка графической информации», «Обработка текстовой информации», «Коммуникации в глобальной сети Интернет». Содержание темы «Основы HTML» позволяет интегрировать эту тему с любым другим предметом: историей, биологией, литературой и так далее.

В качестве программного обеспечения темы может быть использован Блокнот или любой редактор для составления web-страниц, например HomeSite. На изучение данной темы в курсе 9 классе отводится 8 часов.

Тематическое планирование темы «Основы HTML» (8 часов)

При увеличении часов по информатике в 9 классе за счет регионального компонента, компонента образовательного учреждения или использование данного материала для проведения элективного курса в 7-8 классе возможно дополнительное выделение учебного времени по теме «Основы HTML».

Тематическое планирование темы «Основы HTML» (15 часов)

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

• практикум «Информатика. Часть 2». Н.В.Макарова;

• электронные учебники по HTML-конструированию. А.А.Дуванов;

• дифференцированные задания;

• интегрированные задания;

• компьютерное тестирование;

• индивидуальные домашние задания;

• тематические презентации;

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

• творческие проекты.

Тема урока: «Язык разметки гипертекста HTML. HTML-файл. Тег, структурные теги. Теги, управляющие внешним видом web-документа».

Тип урока: урок изучения нового учебного материала.

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

Методическая цель:

активизация познавательной деятельности учащихся через фронтальную и практическую работы.

Цели образования:

Обучающая цель: формировать представление об основах языка разметки гипертекста HTML, понятии html-файла, тега, структурных тегах web-страницы: html…html, head…head, title…title, body…body, парных тегах, тегах управления внешним видом web-страницы, позволяющем задавать выравнивание текста, средстве создания html-файла HomeSite.

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

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

Здоровьесберегающая цель: соблюдать санитарно-гигиенических норм работы за компьютером; создавать комфортных психологических условий для обучения и воспитания учащихся.

Материально-техническое обеспечение урока: персональный компьютер, программное обеспечение HomeSite, доска, марке для доски, раздаточный материал с текстом практическая работа.

Ход урока

1. Активизация познавательной деятельности учащегося (мозговой штурм).

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

2. Усвоение новых знаний и способов деятельности (фронтальная беседа).

В водной лекции объясняется назначение, история создания и основы языка разметки гипертекста HTML. Уточняются понятие гипертекста, гиперссылки. Вводятся новые понятия тег, парные и непарные теги, структурные теги (html…html,head…head,title…title, body…body), формулируются правила записи парных и непарных тегов. Рассматриваются теги, управляющие внешним видом web-страницы (p…p - тег абзаца , br - тег принудительного перехода на новую строку, hr - тег горизонтальной линии, h1…h1 - тег заголовка документа), средства создания html-файлов HomeSite и знакомство с его интерфейсом.

Необязательно использовать html-редактор HomeSite, можно Блокнот. Текст печатается в Блокноте и при его сохранении вместо расширения txt задается html или htm.

3. Закрепление новых знаний (практическая работа).

Для освоения структуры языка HTML учащимся предлагается выполнить практическую работу.

Практическая работа «Основные теги HTML»

1. Запустите html-редактор HomeSite.

2. Используя вкладки «Common» и «Fonts», введите html-код web-страницы:

История мороженого

Мороженое

Взял мороженщик лепешку,

Всполоснул большую ложку,

Ложку в банку окунул,

Мягкий шарик зачерпнул.

С.Маршак

На Руси мороженое известно с давних пор. Наши предки лепили разные смешные фигурки из творога со сметаной и сладостями, выставляли их на мороз, а потом лакомились.

Творожно-сметанные фигурки делали крестьяне в деревнях, а в богатых домах подавали самое настоящее мороженое.

Рецепт мороженого в Европу их древнего Китая привез венецианский путешественник Марко Поло, и лакомство стали готовить в домах знатных людей.