план урока «язык гипертекстовой разметки html»


Методическая разработка урока по информатике
для обучающихся 10 класса по теме
«Язык разметки гипертекста HTML»
Тема урока: Язык разметки гипертекста HTML.
Цели: образовательная: дать понятие гипертекста.
развивающая: способствовать развитию кругозора, развитию аналитического
мышления, памяти, навыков обработки информации.
Задачи:
Образовательная: объяснить назначение перевода чисел из одной системы счисления в другую.
Развивающая: способствовать развитию информационной культуры; развивать эмоциональную сферу: формировать положительные эмоции к процессу обучения.
Воспитательная: воспитывать уважение и умение сотрудничать с окружающими людьми, трудолюбие и добросовестность, воспитывать интерес к занятиям информатикой как возможной области будущей практической деятельности.

Тип урока: Изучение новых знаний.
Формы и методы работы: лекция, эвристическая беседа, самостоятельная работа.
Оборудование: 1. Современные компьютеры.
2. Мультимедийный проектор.
Программное обеспечение: ОС Windows.
Список использованной литературы:
1. Дробахина АН. и др. Структурирование содержания профессиональной подготовки учителя информатики средствами современного гипертекста / А.Н. Дробахина, М.С. Можаров. - Новокузнецк, 2003.
2. Угринович Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угинович. – М.: БИНОМ. Лаборатория знаний, 2008.
3. Батурина Е.Г. Основы языка HTML (Hyper Text Markup Language). Методическое пособие/ Е.Г.Батурина. – Ульяновск: УлГУ, 2012. – 44с.
Продолжительность проведения: два урока по 45 минут.
Ход занятия
1.Организационный момент
Учитель: Здравствуйте, ребята! Мы живём в современном информационном мире, в котором Интернет – это мир общения, познания, увлечения. Тема нашего урока связана с Интернетом: Основы языка разметки гипертекста HTML.
2.Этап подготовки обучающихся к активному сознательному усвоению знаний.
Учитель: Предлагаю вспомнить некоторые понятия (беседа с обучающимися).
Web-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера (Википедия).
Всеми́рная паути́на (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).
Веб-обозрева́тель, обозрева́тель, бра́узер— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (Википедия).
3. Этап усвоения новых знаний.
Учитель: Что такое HTML? (рассказ учителя с элементами беседы)
Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.
Web-страницы можно создать с помощью языка HTML.
3.1. Понятие тега.
В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.
Теги заключаются в угловые скобки <> и могут быть одиночными или парными.
Парные теги содержат открывающий и закрывающий теги (контейнер).
Например, код Web-страницы помещается внутрь контейнера
<HTML>… </HTML>
Теги могут записываться как прописными, так и строчными буквами.
3.2. Понятие атрибута.
Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.
Например,
<FONT COLOR=“blue”>
<H1 ALIGN=“center”> Моё имя – Марина </H1>
</FONT>
3.3. Структура Web-страницы.
Создание простейших файлов HTML
Создайте папку, в которой Вы будете сохранять созданные Web-страницы.
Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:
<HTML>
<HEAD>
<TITLE> Лабораторная №1 </TITLE>
</HEAD>
<BODY>
Структура HTML-документа
</BODY>
</HTML>
Сохраните файл под именем index.html.
Для просмотра созданной Web-страницы загрузите браузер.
Откройте в меню браузера Файл (File), Открыть (Open), Обзор (Browse) и найдите созданный ранее файл index.html, загрузите его. Убедитесь, что название Web-страницы (Лабораторная №1) отразилось в верхней статусной строке браузера.
Управление расположением текста на экране
Внесите изменения в текст, расположив слова "Структура", "HTML", "документа" на разных строках:
<HTML>
<HEAD>
<TITLE> Лабораторная №1 </TITLE>
</HEAD>
<BODY>
Структура
HTML
документа
</BODY>
</HTML>
Сохраните внесенные изменения с помощью команд Файл (File), Сохранить (Save).
Просмотрите с помощью браузера новую полученную Web-страницу, используя клавишу F5 или с помощью кнопки Обновить (Refresh).
Предыдущие шаги не вызвали никаких видимых изменений в документе html – при отображении гипертекста браузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущие подряд пробелы. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца:
тег перевода строки <BR> отделяет строку от последующего текста или графики;
тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.
Оба тега являются одноэлементными (не требуют закрывающего тега), хотя если Вы хотите, чтобы абзацы имели разное форматирование, следует в конце абзаца поставить </P>.
Если Вы хотите, напротив, запретить переносы в какой-то части текста, следует заключить ее в тег <NOBR>...</NOBR>.
Внесите изменения в текст файла HTML:
<HTML>
<HEAD>
<TITLE> Лабораторная №1 </TITLE>
</HEAD>
<BODY>
Структура<P>HTML <BR>документа
</BODY>
</HTML>
Сохраните внесенные изменения в файле index.html. Просмотрите с помощью браузера обновленную страницу.
Существует команда, которая запрещает программе браузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла:
<PRE> Структура
HTML
документа </PRE>
В окне браузера эта фраза будет выглядеть так:
Структура
HTML
документа
PRE означает "предварительно отформатированный" текст, то есть текст в котором для выравнивания использованы пробелы, знаки табуляции.
Некоторые символы являются для HTML служебными и при "ручном" наборе HTML-документа вместо них следует использовать сочетания символов из таблицы:
Символ Обозначение в HTML
< &lt;
> &gt;
& &amp;
" &quot;
Для того чтобы вставить в текст один или несколько неизменяемых пробелов, используется сочетание символов &nbsp;
Форматирование фрагментов текста
Для форматирования текста абзацев используйте теги, приведенные в таблице:
Тег Пояснение Образец
<H1>...</H1> Заголовок 1 уровня Заголовок1
<H2>...</H2> Заголовок 2 уровня Заголовок2
<H3>...</H3> Заголовок 3 уровня Заголовок3
<H4>...</H4> Заголовок 4 уровня Заголовок4
<H5>...</H5> Заголовок 5 уровня Заголовок5
<H6>...</H6> Заголовок 6 уровня Заголовок6
<BIG>...</BIG> Большой Большой
<SMALL>...</SMALL> Маленький Маленький
<SUP>...</SUP> Верхний индекс Верхний индекс
<SUB>...</SUB> Нижний индекс Нижний индекс
<B>...</B> Жирный Жирный
<I>...</I> Курсив Курсив
<U>...</U> Подчеркнутый Подчеркнутый
<S>...</S> Перечеркнутый Перечеркнутый
Внесите изменения в файл index.html:
<HTML>
<HEAD>
<TITLE> Лабораторная №1 </TITLE>
</HEAD>
<BODY>
<B>Структура</B> <I>HTML</I> <U> документа</U>
</BODY>
</HTML>
Посмотрите новую полученную Web-страницу.
Попробуйте использовать вложение тегов:
<I><B>Структура</B></I> <I>HTML</I> <U> документа</U>
Изменение размера текста
Существует два способа управления размером текста, отображаемого браузером:
использование стилей заголовка;
задание размера текущего шрифта.
Внесите изменения в файл index.html:
<HTML>
<HEAD>
<TITLE> Лабораторная №1 </TITLE>
</HEAD>
<BODY>
<H1>Структура</H1> <I>HTML</I> <U>документа</U>
</BODY>
</HTML>
Просмотрите обновления через браузер.
Внесите следующие изменения в файл index.html:
<HTML>
<HEAD>
<TITLE> Лабораторная №1 </TITLE>
</HEAD>
<BODY>
<FONT SIZE="7">Структура</FONT> HTML-документа
</BODY>
</HTML>
Самостоятельно измените размер шрифта для текста "информационные ресурсы", используя тег <FONT>.
Гарнитура и цвет шрифта
SIZE в теге <BASEFONT> задает базовый (основной) размер шрифта Web-документа. Величина атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3. Например:
<BASEFONT SIZE = 4>
<P><I>Структура HTML-документа</I>
Тег FONT позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7, для этого также используется атрибут SIZE. Шрифты могут быть заданы относительно базового: size=+число size=-число.
Замечание: сумма базового размера шрифта и размера текущего шрифта должна быть не менее 1 и не более 7. Например, для основного шрифта, равного 3, размер текущего шрифта может находиться в пределах от -2 до +4. Например:
<BASEFONT SIZE = 4>
<P><Font size=+2><I> Структура HTML-документа </I></Font>
<P>4 основных структурных тега:<BR>
Тег BIG выводит текст шрифтом на один размер больше текущего. Тег SMALL выводит текст шрифтом на один размер меньше текущего.
Тег <FONT> предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать
<FONT FACE="ARIAL">.
Для изменения цвета шрифта в теге <FONT> можно использовать атрибут COLOR="X". Вместо Х надо подставить либо название цвета, либо его шестнадцатеричное значение (в кавычках и со знаком #). При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную (R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF. Примеры записи цвета в формате RGB приведены в таблице:
Цвет RRGGBB
black | черный 000000
white | белый FFFFFF
red | красный FF0000
green | зеленый 00FF00
blue | синий 0000FF
gray | серый A0A0A0
purple | фиолетовый FF00FF
yellow | желтый FFFF00
brown | коричневый 996633
orange | оранжевый FF8000
violet | лиловый 8000FF
Внесите изменения в файл index.html:
<HTML>
<HEAD>
<TITLE> Лабораторная №1 </TITLE>
</HEAD>
<BODY>
<U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="6">Структура</FONT></B></I></U>HTML-документа
</BODY>
</HTML>
Самостоятельно измените размер, цвет, гарнитуру текста документа и просмотрите обновления.
Выравнивание текста по горизонтали
С помощью тегов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле. Современными браузерами для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка.
ALIGN=CENTER – выравнивание по центру.
ALIGN=RIGHT – выравнивание по правому краю.
ALIGN=LEFT – выравнивание по левому краю.
Внесите изменения в файл index.html:
<HTML>
<HEAD>
<TITLE> Лабораторная №1 </TITLE>
</HEAD>
<BODY>
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B>структура</B></FONT><BR>
<FONT SIZE="6"><I>HTML-документа</I></FONT>
</P>
</BODY>
</HTML>
Просмотрите обновления.
Задание цвета фона и текста
Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.
Внесите изменения в файл index.html:
<HTML>
<HEAD>
<TITLE> Лабораторная №1 </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B>Структура</B></FONT><BR>
<FONT SIZE="6"><I>HTML-документа</I></FONT>
</P>
</BODY>
</HTML>
Просмотрите обновления.
Для создания в документе текстового раздела используется тег <div>...</div> с опцией align, указывающей способ выравнивания текста в разделе (так же, как в теге <p>). Указанный в теге <div> способ выравнивания текста используется по умолчанию во всех абзацах этого раздела, если в абзаце в явном виде не указан другой способ выравнивания. Для размещения части документа по центру окна браузера можно также использовать тег <center>...</center>.
Горизонтальная черта
Отделить часть текста горизонтальной чертой можно с помощью тега <HR>. Опция ALIGN со значением LEFT, RIGHT или CENTER определяет выравнивание черты на странице; опция SIZE="размер" – толщину линии в пикселах, а опция WIDTH="ширина" – ширину, указанную в пикселах (например, 600) или процентах (100%). Если указана опция NOSHADE, линия создается без трехмерных эффектов. Пример:

Эта черта создана тегом вида <HR ALIGN="CENTER" SIZE="1" WIDTH="50%">.
Вставка цитат
Tег BLOCKQUOTE предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный этим тегом, отступает от левого края документа на 8 пробелов.
Пример:
<BLOCKQUOTE>"Не имей сто рублей, а имей сто друзей"</BLOCKQUOTE>
4.Этап закрепления знаний.
4.1. Индивидуальная работа на компьютере:
Практическая работа:
Создание Web-страницы с использованием знаний языка разметки гипертекста HTML.
Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК.
Информационная переменка (физминутка).
4.2. Индивидуальное выполнение теста и взаимопроверка с последующим оглашением учителем правильных ответов.
Выполнение теста по теме «Основы языка разметки гипертекста».
Подведение итогов: обучающиеся выставляют сами себе оценки за выполнение теста и сообщают учителю.
5.Этап информации о домашнем задании.
Учитель. 1. Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.
2. Творческое задание - создать минисайт с помощью HTML-языка на свободную тему.
Спасибо за урок!

Приложенные файлы

  • docx HTML
    Батурина Евгения Георгиевна
    Размер файла: 42 kB Загрузок: 5