"Знакомство с языком разметки гипертекстовых документов HTML"

МБОУ СОШ с.Бай-Даг Эрзинского кожууна Республики Тыва

Урок по информатике

в 9 классе по теме:

«Знакомство с языком разметки гипертекстовых документов HTML»

Учитель информатики: Оюн О.Т.

2013-2014 уч.год.

Тема: «Знакомство с языком разметки гипертекстовых документов 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>

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

<head></head>

Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тэг названия документа и тэги для поисковых машин

<title></title>

Помещает название в оглавление программы просмотра страниц

<body></body>

Определяет видимую часть документа

<body bgcolor=…>

Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB – пример: FF0000 – красный цвет

<body text=…>

Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB – пример: 000000 – черный цвет

<body link=…>

Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB – пример: 00FF00 – зеленый цвет

<body vlink=…>

Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB – пример: 333333 – серый цвет

<body alink=…>

Устанавливает цвет гиперссылок при нажатии

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

(Каждому ученику раздается данная таблица и проектируется на экран).

Таблица тэгов для форматирования текста

ТЭГИ

НАЗНАЧЕНИЕ

<hl></hl>

…

<hl></hl>

Задает размер заголовка

<pre></ pre >

Обрамляет предварительно отформатированный текст

<b></b>

Жирное начертание шрифта

<i></i>

Начертание Курсив

<tt></tt>

Имитация стиля печатной машинки

<cite></cite>

Используется для цитат, обычно наклонный текст

<strong></ strong >

Используется для выделения наиболее важных частей текста (наклонный и жирный текст)

<font size=…></font>

Устанавливает размер текста в пределах от 1 до 7

<font color=…></font >

Устанавливает цвет текста, используя значение цвета в виде

<p>

Начало нового абзаца

<p align=…>

Выравнивает абзац относительно одной из сторон документа, значения:

<br>

Вставляет перевод строки

<blockquote>

</ blockquote>

Создает отступы с обеих сторон текста.

<ol></ol>

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

<li>

Определяет каждый элемент списка и присваивает номер

<ul></ul>

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

<a href=”URL”></a>

Создает гиперссылку на другие документы или часть текущего документа

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

IV. Закрепление

Задания выводится на экран.

Задание 1.

Составить программу из готовых тэгов, вставив в неё заголовок страницы и содержание программы.

Задание 2.

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

<html>
<head>
<title>компьютер</title>
</head>
<body>
<i>Компьютер и ПО </i>
<p><b>комплектующие</b>
</p>
</body>
</html>

Задание 3 (для более сильных учащихся)

Набрать данную программу в браузере Mozilla.

V. Домашнее задание: Практическое задание. Разработать страницу «Мое хобби» с использованием лишь тэгов для форматирования текста.

Автор: Оюн Ольга Таржайевна