План-конспект по информатике на тему Разработка Web–сайтов с использованием языка разметки гипертекста HTML. Структура Web–страницы.

План–конспект на тему: Разработка Web–сайтов с использованием языка разметки гипертекста HTML. Структура Web–страницы.
Цели урока:
– Обобщить знания по теме «Коммуникационные технологии»;–познакомить учащихся с понятием web-страница, web-сайт,
–научится создавать простейшую web-страницу.
Задачи:
- обучающие: дать представление учащимся о структуре web-страниц, познакомить с основными тегами.
-развивающие: продолжить развитие элементов логического мышления, внимания и памяти у учащихся.
-воспитательные: продолжить формирование познавательного интереса к предмету;
продолжить формирование информационной культуры учащихся.
Тип урока: изучение нового материала.
Формы работы учащихся: индивидуальная, фронтальная.
Необходимое техническое оборудование: компьютеры с операционной системой Windows, предварительно сохраненные модули на урок, проектор, экран.
Ход урока:
1.Оргмомент (проверка готовности учащихся класса и доски к уроку)2. Проверка знаний
Тест по теме «Информационные технологии»1 вариант
1. Интернет-адрес - это?
А) адрес сервера;Б) почтовый адрес;В) адрес Интернета;Г) адрес который имеет каждый компьютер подключенный к Интернету;
2. Интернет – это?
А) сводка меню программных продуктов;Б) документ в котором хранится вся информация по сети;В) глобальная компьютерная сеть, в которой локальные, региональные и корпоративные сети; соединены между собой многочисленными каналами передачи информации; Г) соединение нескольких компьютеров в одну локальную сеть.
3. Сервер – это?
А) сетевая программа, которая ведет диалог одного пользователя с другим;Б) мощный компьютер, к которому подключаются остальные компьютеры;В) компьютер отдельного пользователя, подключенный в общую сеть;Г) стандарт, определяющий форму представления и способ пересылки сообщения.
4. Модем – это?
А) мощный компьютер, к которому подключаются остальные компьютеры;Б) устройство, преобразующее цифровой сигналы компьютера в аналоговый телефонный сигнал и обратно;В)программа, с помощью которой осуществляется диалог между несколькими компьютерами;Г) персональная ЭВМ, используемая для получения и отправки корреспонденции.
5. Скорость передачи данных – это?
А) количество информации, передаваемой в одну секунду;Б) количество байт информации, передаваемой за одну минуту;В) количество байт информации, передаваемой с одного компьютера на другой;Г) количество битов информации, передаваемой через модем в единицу времени.
2 вариант
1. Адресация – это?
А) способ идентификации абонентов в сети;Б) адрес сервера;В)почтовый адрес пользователя в сети;Г) количество бод (символов/сек), пересылаемой информации Вашим модемом.
2. Локальные компьютерные сети – это?
А) сеть, к которой подключены все компьютеры Вашего села;Б) сеть, к которой подключены все компьютеры Вашей страны;В) сеть, к которой подключены компьютеры Вашего офиса, или кабинета информатики, или одного здания;Г) сеть, к которой подключены все компьютеры.3. Сетевой адаптер – это?
А) специальная программа, через которую осуществляется связь нескольких компьютеров;Б) специальное аппаратное средство для эффективного взаимодействия персональных компьютеров сети;В) специальная система управления сетевыми ресурсами общего доступа;Г) система обмена информацией между различными компьютерами.
4. Домен – это?
А) часть адреса, определяющая адрес компьютера пользователя в сети;Б) название программы, для осуществления связи между компьютерами;В) название устройства, осуществляющего связи между компьютерамиГ) единица измерения информации.
5. Всемирная паутина - это?
А) компьютер отдельного пользователя, подключенный в общую сеть;Б) перенесение информации с одного компьютера на другой с помощью дискетВ) передача информации между пользователями о состоянии работы компьютера;Г) сотни миллионов Web-серверов Интернета, содержащих большое количество Web – страниц, в которых используется технология гипертекста.
(сразу проверяются работы и выставляются оценки)
3. Изучение нового материала
Постановка проблемы:
На сегодняшний день WWW содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают пользование ресурсами WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.
Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в сети.
Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера. Особую актуальность приобретает проблема разработки Web-сайтов и использование Internet-технологий в системе образования.
В разделе «Коммуникационные технологии»
Вопросы:
– Достаточно ли использования инструментальных средств для создания web–страниц?
– А что необходимо для создания качественных по стилю и содержанию документов предназначенных для публикации в сети Интернет? (специальная программа и знание основных тэгов языка HTML и тэгов для форматирования текста)
–Как вы думаете какова тема нашего сегодняшнего урока?
Сегодня мы с вами переходим к изучению новой темы «Создание web–сайтов с использованием языка разметки гипертекcта HTML. Структура Web-страницы.». Открываем тетради, записываем дату и тему урока.
Тема «Разработка Web-сайтов» – одна из наиболее практически значимых, востребованных, так как умение создавать web-сайты становится все более актуальным навыком пользователя интернета. Давайте с Вами подумаем какое назначение может быть у сайта, для чего он может быть создан? (Реклама, Коммерция, Образование, Размещение личной информации, статей, материалов)
Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web-страниц являются:- малый информационный объем;- возможность просмотра в различных операционных системах.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка.
Рассмотрим основные тэги.
(Каждому ученику раздается данная таблица и проектируется на экран).
Таблица основных тэгов языка 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 > Обрамляет предварительно отформатированный текст
 Жирное начертание шрифта
 Начертание Курсив
<tt></tt> Имитация стиля печатной машинки
<cite></cite> Используется для цитат, обычно наклонный текст
 Используется для выделения наиболее важных частей текста (наклонный и жирный текст)
 Устанавливает размер текста в пределах от 1 до 7
 Устанавливает цвет текста, используя значение цвета в виде
 Начало нового абзаца
 Выравнивает абзац относительно одной из сторон документа, значения:
 Вставляет перевод строки
<blockquote> </ blockquote> Создает отступы с обеих сторон текста.
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<a href=”URL”></a> Создает гиперссылку на другие документы или часть текущего документа
Тэги состоят из ключевых слов и могут быть дополнены атрибутами, разделенным пробелами. Описание атрибутов без использования ключевых слов не допускается4.Физкультминутка (видеоролик)
5.Практическая работа.
Для работы с HTML документом необходимо пройти подготовительный этап:
1. Создать персональную папку, где обязательным требованием является использование для имени папки английские буквы;2. Создать текстовой документ блокнот;3. Открыть документ и сохранить его под новым именем с расширением html или htm.4. Закрыть документ;5. Открыть html –документ;6. Открыть блокнот, выполнив команду Вид/в виде html.
В папке должны находится два

Проведение практической работы №3.8 из учебника «Создание начальной страницы сайта».
Практическая работа 3.8Разработка сайта с использованием языка разметки текста HTMLАппаратное и программное обеспечение. Компьютер с установленной операционной системой Windows или Linux, подключенный к Интернету.
Цель работы. Научиться создавать Web-сайты с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот.
Задание. В операционной системе Windows или Linux создать сайт с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот. Сайт «Компьютер» должен содержать начальную страницу и страницы «Программы», «Словарь» и «Анкета». Сохранить их в файлах с именами index.htm, software.htm, glossary.htm и anketa.htm в папке сайта.
Начальная страница сайта. Создадим начальную страницу Web-сайта «Компьютер».
В операционной системе Windows или Linuх запустить простейший текстовый редактор Блокнот.
Ввести тэги, определяющие структуру Web-страницы. Ввести заголовок Web-страницы: «Компьютер». Ввести заголовок текста, отображаемый в браузере: «Всё о компьютере».
<HTML>
<HEAD>
<ТIТLЕ> Компьютер </ТIТLЕ>
</HEAD>
<BODY>
Всё о компьютере
</BODY>
</HTML
Просмотреть получившуюся Web-страницу в браузере.
На начальной странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на начальную страницу текст, разбитый на абзацы с различным выравниванием.
<Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>
<Р ALIGN="right" Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</Р>
Пусть начальная страница сайта «Компьютер» будет содержать центрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев.

<Н1 ALIGN="center"> Все о компьютере </Н1>

<HR>
<Р ALIGN=" left">На этом сайте...</Р>
<Р ALIGN="right">Терминологический словарь _.</Р>
На начальной странице сайта «Компьютер» логично разместить изображение компьютера.
6.Закрепление изученного материала.
Тэги заголовка ________________________________________________
Тэги шрифта _____________________
Атрибуты шрифта:
____________ - гарнитура шрифта ____________ - размер шрифта
____________ - цвет шрифта
Выравнивание абзаца:
ALIGN=________ Выравнивание по центру
ALIGN=________ Выравнивание по правому краю
ALIGN=________ Выравнивание по левому краю
________ - тэг задания горизонтальной линии
7. Рефлексия.
Ребята, сегодня мы с вами познакомились с созданием простейших web-страниц. Возникали ли у Вас трудности при работе? Определите и выберите листочки, на каком уровне вы находитесь:
- знаю и объясню другому- знаю
- сомневаюсь, что знаю
- не знаю
8. Подведение итогов и домашнее задание.
Выставление оценок, задание на дом п. 3.7.1-3.7.3, контрольные вопросы в конце каждого пункта. Практическое задание. Разработать страницу «Мое хобби» с использованием лишь тэгов для форматирования текста.