Урок по информатике в 9 классе по теме: «Знакомство с языком разметки

МОУ СОШ №20 г.Минеральные Воды.
Урок по информатике
в 9 классе по теме:
«Знакомство с языком разметки
гипертекстовых документов HTML»
Учитель информатики: Коляда Т.А.
2012-2013 уч.год.
Тема: «Знакомство с языком разметки гипертекстовых документов HTML»
Цели урока:
 Обобщить знания по теме «Коммуникационные технологии»;
 Научиться разрабатывать документы, предназначенные для публикации в; Интернете;
 Отработать навыки редактирования веб-страниц в кодах HTML;
 Восприятие компьютера как инструмента обработки и создания информационных
объектов;
 Формирование целостного восприятия окружающего мира.
Ход урока
I. Оргмомент. (проверка готовности учащихся класса и доски к уроку)
II. Проверка знаний.
Тест по теме «Информационные технологии», с использование перфокарт
1. Интернет-адрес - это?
А) адрес сервера;
Б) почтовый адрес;
В) адрес Интернета;
Г) адрес который имеет каждый компьютер подключенный к Интернету;
2. Интернет – это?
А) сводка меню программных продуктов;
Б) документ в котором хранится вся информация по сети;
В) глобальная компьютерная сеть, в которой локальные, региональные и корпоративные сети; соединены между собой
многочисленными каналами передачи информации;
Г) соединение нескольких компьютеров в одну локальную сеть.
3. Сервер – это?
А) сетевая программа, которая ведет диалог одного пользователя с другим;
Б) мощный компьютер, к которому подключаются остальные компьютеры;
В) компьютер отдельного пользователя, подключенный в общую сеть;
Г) стандарт, определяющий форму представления и способ пересылки сообщения.
4. Модем – это?
А) мощный компьютер, к которому подключаются остальные компьютеры;
Б) устройство, преобразующее цифровой сигналы компьютера в аналоговый телефонный сигнал и обратно;
В)программа, с помощью которой осуществляется диалог между несколькими компьютерами;
Г) персональная ЭВМ, используемая для получения и отправки корреспонденции.
5. Скорость передачи данных – это?
А) количество информации, передаваемой в одну секунду;
Б) количество байт информации, передаваемой за одну минуту;
В) количество байт информации, передаваемой с одного компьютера на другой;
Г) количество битов информации, передаваемой через модем в единицу времени.
6. Адресация – это?
А) способ идентификации абонентов в сети;
Б) адрес сервера;
В)почтовый адрес пользователя в сети;
Г) количество бод (символов/сек), пересылаемой информации Вашим модемом.
7. Локальные компьютерные сети – это?
А) сеть, к которой подключены все компьютеры Вашего села;
Б) сеть, к которой подключены все компьютеры Вашей страны;
В) сеть, к которой подключены компьютеры Вашего офиса, или кабинета информатики, или одного здания;
Г) сеть, к которой подключены все компьютеры.
8. Сетевой адаптер – это?
А) специальная программа, через которую осуществляется связь нескольких компьютеров;
Б) специальное аппаратное средство для эффективного взаимодействия персональных компьютеров сети;
В) специальная система управления сетевыми ресурсами общего доступа;
Г) система обмена информацией между различными компьютерами.
9. Домен – это?
А) часть адреса, определяющая адрес компьютера пользователя в сети;
Б) название программы, для осуществления связи между компьютерами;
В) название устройства, осуществляющего связи между компьютерами
Г) единица измерения информации.
10. Всемирная паутина - это?
А) компьютер отдельного пользователя, подключенный в общую сеть;
Б) перенесение информации с одного компьютера на другой с помощью дискет
В) передача информации между пользователями о состоянии работы компьютера;
Г) сотни миллионов Web-серверов Интернета, содержащих большое количество Web – страниц, в которых используется
технология гипертекста.
(сразу проверяются работы и выставляются оценки)
III. Изучение нового материала.
(на доске новые ключевые термины: Тэги, браузеры, контейнеры)
Использование инструментальных средств создания Веб-страниц недостаточно, если мы
хотим создать качественные по стилю и содержанию документы, предназначенные для
публикации в сети Интернет. Часто приходится форматировать введенные данные
непосредственно в Блокноте, где представлена программа языка гипертекстовой разметки HTML
(Hyper Text Markup Language). Если даже нет необходимости создавать страницы на языке
HTML надо знать основные тэги для внесения необходимых изменений в уже готовую
программу.
Для работы с HTML документом необходимо пройти подготовительный этап:
1. Создать персональную папку, где обязательным требованием является
использование для имени папки английские буквы;
2. Создать текстовой документ блокнот;
3. Открыть документ и сохранить его под новым именем с расширением html
или htm.
4. Закрыть документ;
5. Открыть html –документ;
6. Открыть блокнот, выполнив команду Вид/в виде html.
В папке должны находится два
Текстовой файл можно будет удалить после создания html-документа. Основными элементами
документа являются тэги (или дескрипторы).
Тэги – управляющие символы, которые определяют вид Web-страницы при её просмотре в
браузере.
Браузерами называются специальные программы для просмотра и создания Web-страниц.
(Примеры программ браузеров на стр. 189)
Контейнеры – это парные тэги содержащие открывающий и закрывающий тэг.
Каждый тэг ограничен угловыми скобками, и технология предполагает использование открытых
и закрытых тэгов, указывающих на начало и конец форматирования определенного блока.
Программа состоит из двух частей. В первой части задается заголовок страницы, которая
отображается в заголовке окна и первая загружается, при просмотре страницы. Выбор названия
заголовка имеет большое значение, т.к. именно по заголовку индексируется страница в
поисковых системах. Название заголовка должно отражать суть информационного наполнения
страницы.
(С помощью проектора на экран выводится общий вид программы)
Общий вид программы:
<html>
<head>
<title>Моя персональная страница</title>
</head>
<body>
Моя страница
</body>
</html>
Основное содержание программы помещается между тэгами <body></body>. Рассмотрим
основные тэги.
(Каждому ученику раздается данная таблица и проектируется на экран).
Таблица основных тэгов языка HTML
ТЭГИ
<html></html>
<head></head>
<title></title>
<body></body>
<body bgcolor=…>
<body text=…>
<body link=…>
<body vlink=…>
<body alink=…>
НАЗНАЧЕНИЕ
Указывает программе просмотра страниц, что
это HTML документ. Данные тэги обрамляют
документ
Определяет место, где помещается различная
информация, не отображаемая в теле документа.
Здесь располагается тэг названия документа и
тэги для поисковых машин
Помещает название в оглавление программы
просмотра страниц
Определяет видимую часть документа
Устанавливает цвет фона документа, используя
значение цвета в виде RRGGBB – пример:
FF0000 – красный цвет
Устанавливает цвет текста документа,
используя значение цвета в виде RRGGBB –
пример: 000000 – черный цвет
Устанавливает цвет гиперссылок, используя
значение цвета в виде RRGGBB – пример:
00FF00 – зеленый цвет
Устанавливает цвет гиперссылок на которых вы
уже побывали, используя значение цвета в виде
RRGGBB – пример: 333333 – серый цвет
Устанавливает цвет гиперссылок при нажатии
Для создания своей первой страницы недостаточно знать основные тэги. Необходимо научиться
форматировать текст соответствующим образом. Для этого используются тэги для
форматирования текста. Они представлены в следующей таблице:
(Каждому ученику раздается данная таблица и проектируется на экран).
Таблица тэгов для форматирования текста
ТЭГИ
НАЗНАЧЕНИЕ
<hl></hl>
…
<hl></hl>
<pre></ pre >
<b></b>
<i></i>
<tt></tt>
<cite></cite>
Задает размер заголовка
Обрамляет предварительно
отформатированный текст
Жирное начертание шрифта
Начертание Курсив
Имитация стиля печатной машинки
Используется для цитат, обычно наклонный
<strong></ strong >
<font size=…></font>
<font color=…></font >
<p>
<p align=…>
<br>
<blockquote>
</ blockquote>
<ol></ol>
<li>
<ul></ul>
<a href=”URL”></a>
текст
Используется для выделения наиболее важных
частей текста (наклонный и жирный текст)
Устанавливает размер текста в пределах от 1 до
7
Устанавливает цвет текста, используя значение
цвета в виде
Начало нового абзаца
Выравнивает абзац относительно одной из
сторон документа, значения:
Вставляет перевод строки
Создает отступы с обеих сторон текста.
Создает нумерованный список
Определяет каждый элемент списка и
присваивает номер
Создает ненумерованный список
Создает гиперссылку на другие документы или
часть текущего документа
Тэги состоят из ключевых слов и могут быть дополнены атрибутами, разделенным пробелами.
Описание атрибутов без использования ключевых слов не допускается
IV. Закрепление
Задания выводится на экран.
Задание 1.
Составить программу из готовых тэгов, вставив в неё заголовок страницы и
содержание программы.
Задание 2.
Дана программа на языке HTML определите какие тэги в ней используются и каково
их назначение
<html>
<head>
<title>компьютер</title>
</head>
<body>
<i>Компьютер и ПО </i>
<p><b>комплектующие</b>
</p>
</body>
</html>
Задание 3 (для более сильных учащихся)
Набрать данную программу в браузере Mozilla.
V. Домашнее задание: Практическое задание. Разработать страницу «Мое хобби» с
использованием лишь тэгов для форматирования текста.