Материал опубликовал

Россия, Крым респ., Симферополь

Материал размещён в группе «Интересное в информатике!»

#11 класс #Информатика и ИКТ #ФГОС #Методические разработки #Урок #Учитель-предметник #Школьное образование #УМК И. Г. Семакина

Урок информатики на тему «Создание простейшей Web-страницы с использованием текстового редактора»

Конкурсная работа

Всероссийский педагогический конкурс на лучшую методическую разработку «Урок информатики и ИКТ по ФГОС»

Тема: «Создание простейшей Web-страницы с использованием текстового редактора»

Класс: 11

Дата проведения:

Тип урока: урок приобретения новых навыков

Цель урока:

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

Планируемые образовательные результаты:

Предметные – формирование навыков создания Web-страниц, изучение команд языка HTML.

Метапредметные – развитие умения планировать результаты учебной деятельности, понимания востребованности Web-технологий в современном мире.

Личностные – развитие навыков концентрации внимания, развитие системного мышление, усидчивости.

Задачи:

Познакомиться со структурой html-документа.

Изучить команды для установления расположение текста на экране.

Изучить команды форматирования текста.

Отработать приёмы размещения графики на Web-страницах.

Научиться создавать таблицы.

Изучить построение гиперсвязей.

Материалы урока: персональный компьютер ученика, текст практической работы с пошаговой инструкцией, программа Блокнот, браузер.

Ход урока

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

II. Актуализация знаний.

Деловая игра по теме «Анализ наиболее успешных сайтов»

Роли: Руководитель группы аналитиков, докладчик.

Функции руководителя группы аналитиков – организация работы по анализу причин успеха сайтов, имеющих наибольший рейтинг, докладчика – представление отсчёта о проделанной работе.

Игровая цель: выявление причин успеха Web-сайтов, имеющих наибольший рейтинг.

Дидактические цели:

Формирование у учащихся знаний об основных принципах дизайна сайтов.

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

Умение представлять результаты анализа в вербальной форме и при помощи компьютерных программ MS Word, MS PowerPoint.

Совершенствование навыков выступления в аудитории.

Воспитательные цели:

Развитие творческого мышления.

Выработка установки на практическое использование полученных знаний, умений и навыков.

Воспитание индивидуального стиля поведения в процессе взаимодействия с людьми.

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

В качестве примерных вопросов, на которые должны ответить участники игры, можно предложить следующие:

Соответствует ли анализируемый сайт принципам Web-дизайна, как их понимают участники игры? Если нет, то в чём заключается расхождение?

В чём причина популярности того или иного сайта? Что определяет его успех в большей степени?

Какие недостатки можно выделить по каждому из рассмотренных сайтов?

После того как проведён анализ предложенный сайтов и по его результатам создан отчёт, докладчик выступает с сообщением. В данной игре возможно назначение участникам ролей сторонника докладчика, оппонента, критика и конформиста.

Игровой конфликт – противоречие, которое обусловлено разностью позиций игроков.

Способ генерирования событий – смешанный.

Выводы: обосновать основные правила Web-дизайна.

Профессиональный сайт должен корректно отображаться на экране.

Web-страница должна идентично отображаться в различных браузерах (Internet Explorer, Google Chrome, Opera, Yandex и др.).

Все страницы сайта и интегрированные в них графические элементы должны быть минимальными по объёму.

Web-страница обязательно должна включать навигационные элементы.

Весь проект должен быть выдержан в одном дизайнерском стиле.

Использовать только корректные цветовые схемы.

III. Постановка цели и задач

На прошлом уроке мы познакомились с тэгами языка HTML. В ходе деловой игры, рассмотрели правила оформления Web-страниц. Сегодня нам предстоит научиться применять наши знания на практике.

Давайте поставим цели и задачи нашего урока.

Учащиеся ставят цели и задачи урока. Учитель корректирует.

IV. Практическая работа

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

Справка:

HTML (от англ. HyperText Markup Language) – язык гипертекстовой разметки, при помощи которого создаются Web-страницы.

Задание № 1. Создание простейшего файла HTML

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

2. Запустите программу Блокнот (Notepad).

3. Наберите в окне программы простейший файл HTML.

Учебный файл HTML

Расписание занятий на вторник

4. Сохраните файл под именем INDEX.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.

5. Для просмотра Web-страницы используйте любой браузер (Internet Explorer, Google Chrome, Opera, Mozilla Firefox, Yandex или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу INDEX.HTML откройте окно браузера.

Результат работы показан на рисунке 1.

Рис. 1 Результат работы

Задание № 2. Управление расположением текста на экране

1. При необходимости откройте текст Web-страницы в Блокноте (1 щелчок правой клавишей мыши по файлу INDEX.HTML, в контекстном меню выбрать команду Открыть с помощью... и выбрать программу Блокнот). При необходимости открыть файл в браузере – двойной клик по значку файла левой клавишей мыши.

2. Внести изменения в файл INDEX.HTML, расположив слова Расписание, занятий, на вторник на разных строках.

Учебный файл HTML

Расписание

занятий

на вторник

3. Сохраните текст с внесенными изменениями в файле INDEX.HTML (меню Файл | Сохранить). Если у вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу браузера и обновить эту страницу (кнопка). Изменилось ли отображение текста на экране? Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.

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

Задание № 3. Некоторые специальные команды форматирования текста

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

фрагмент текстового файла. Тег перевода строки
отделяет строку от последующего текста или графики. Тег абзаца

тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.

Оба тега являются одноэлементными, тег

– двойной, т.е. требуется закрывающий тег.

1. Внесите изменения в файл INDEX.HTML

Учебный файл HTML

Расписание

занятий

на вторник

2. Сохраните внесенные изменения, переключитесь на панели задач на программу браузера, обновите Web-страницу.

Как изменилось отображение текста на экране?

Задание № 4. Выделение фрагментов текста

1. Внести изменения в текст файла INDEX.HTML

Учебный файл HTML

Расписание

занятий

на вторник

2. Посмотрите полученную Web-страницу.

Возможно использование комбинированных выделений текста.

Расписание занятий на вторник

Но при этом необходимо помнить следующее правило использования комбинированных тегов:

<Тег_1><Тег_2> ... – правильная запись.

<Тег_1><Тег_2> ... – ошибочная запись.

Обратите внимание на «вложенность» тегов, она напоминает «вложенность» скобок.

Задание № 5. Задание размеров символов Web-страницы

Существует два способа управления размером текста, отображаемого браузером:

использование стилей заголовка,

задание размера шрифта основного документа или размера текущего шрифта.

Используется шесть тегов заголовков: от

до

(тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

1. Внесите изменения в файл INDEX.HTML

Учебный файл HTML

Расписание

занятий на вторник

В результате выполнения, должен получиться результат, представленный на рисунке 2.

Рис. 2 Результаты работы

Задание № 6. Установка размера текущего шрифта

Тег шрифта позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.

1. Внесите изменения в текст INDEX.HTML

Учебный файл HTML

Расписание

занятий на вторник

2. Самостоятельно измените размер текста «занятий на вторник», используя тег .

3. Измените оформление текста HTML-документа, используя тег выделения фрагментов и тег перевода строки и абзаца.

Задание № 7. Установка гарнитуры и цвета шрифта

Тег предоставляет возможности управления гарнитурой, цветом и размером текста. Изменение гарнитуры текста выполняется простым добавлением к тегу атрибута FACE. Например, для отображения текста шрифтом Arial необходимо записать:

Для изменения цвета шрифта можно использовать в теге атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB.

1. Внесите изменения в файл INDEX.HTML

Учебный файл HTML

Расписание занятий на вторник

Задание № 8. Выравнивание текста по горизонтали

1. Внесите изменения в файл INDEX.HTML

Учебный файл HTML

Расписание

занятий на вторник

Задание № 9. Задание цвета фона и текста

При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, – они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в теге

. Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета непросмотренных и просмотренных ссылок.

1. Внесите изменения в файл INDEX.HTML

Учебный файл HTML

Расписание

занятий на вторник

2. Просмотрите изменения Web-страницы в браузере.

Таблица 1. Коды основных цветов в HTML

Задание № 10. Размещение графики на Web-странице

Тег позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег является одиночным. Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.

Для выполнения следующего задания поместите файл с именем CLOCK.JPG (или другим именем) в рабочую папку.

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

1. Внесите изменения в файл INDEX.HTML

Учебный файл HTML

Расписание

занятий на вторник

2. Просмотрите изменения вашей Web-страницы в браузере.

На экране вы увидите, что показано на рисунке 3.

Рис.3 Результат работы

Задание № 11. Создание таблицы

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

таблицу.

Таблица состоит из трех основных частей:

названия таблицы,

заголовков столбцов,

ячеек таблицы.

Таблица в Web-документе заполняется по строкам (слева направо по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).

1. Запустите программу Блокнот и наберите текст следующей Web-страницы. Применяйте приемы копирования при создании таблицы, работая в программе Блокнот.

5 класс

Понедельник

Урок	5 "А"	5 "Б"	5 "В"
1	Русский язык	Литература	История
2	Математика	Информатика	Английский язык
3	История	Математика	Информатика

2. Сохраните файл в личной рабочей папке под именем 5.HTML

3. Для просмотра созданной Web-страницы в окне личной рабочей папки двойным щелчком левой клавиши мыши загрузите браузер.

На экране вы увидите то, что показано на рисунке 4.

Рис. 4 Результат работы

Задание № 12. Создание ссылки на другой HTML-документ

Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу.

Опишем ссылку:

5 класс

После имени файла (5.HTML) между символами «>» и «<» располагается текст («5 класс»), на котором должен быть произведен щелчок для перехода к этому файлу.

1. Внесите изменения в файл INDEX.HTML

Учебный файл HTML

Расписание

занятий на вторник