KNOWLEDGE HYPERMARKET


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


пермаркет Знань>>Інформатика 8 клас>>Інформатика>> Інформатика: Поняття комп'ютерної графіки


План-конспект уроку з курсу «Інформатика 8 клас» з теми «Знакомство с языком разметки гипертекстовых документов HTML»



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


В папке должны находится два

1602-10.jpg


Текстовой файл можно будет удалить после создания 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. Домашнее задание: Практическое задание. Разработать страницу «Мое хобби» с использованием лишь тэгов для форматирования текста.



Виконав: вчитель інформатики СЗШ № 166 Солом’янського району м. Києва Мещерінов Володимир Володимирович

Предмети > Інформатика > Інформатика 9 клас > Поняття комп'ютерної графіки > Поняття комп'ютерної графіки. Конспект уроку і опорний каркас