суровцева урок

ПЛАН-КОНСПЕКТ УРОКА
Web-страницы и Web-сайты. Структура Web-страницы.
ФИО(полностью) Суровцева Оксана Михайловна
Место работы МБОУ СОШ №40 г. Ангарск, Иркутской области
Должность учитель информатики
Предмет информатика
Класс 8
Тема
Web-страницы и Web-сайты. Структура Web-страницы. Создание простейшей Web-страницы
Цель: Познакомить учащихся с понятием web-страница, web-сайт, научится создавать простейшую web-страницу
Обучающие задачи: дать представление обучающимся о структуре web-страниц, познакомить с основными тегами
Развивающие задачи: продолжить развитие элементов логического мышления, внимания и памяти у обучающихся
Воспитательные задачи: продолжить формирование коммуникативной культуры, информационной культуры, внимательности,
аккуратности, дисциплинированности
Тип урока изучение нового материала
Формы работы учащихся индивидуальная, фронтальная
Необходимое техническое оборудование компьютеры с операционной системой Windows, предварительно сохраненные модули на урок,
проектор, экран, колонки
СТРУКТУРА И ХОД УРОКА
№
Этап урока
1
1
2
Организаци
онный
момент
2
Актуализа
ция знаний
Название
использу
емых
ЭОР
(с
указанием
порядково
го номера
из
Таблицы
2)
3
Деятельность учителя
(с указанием действий с ЭОР, например, демонстрация)
Деятельность
обучающихся
Время
(в
мин.)
5
6
Приветствует обучащихся.
Внимательно
Проверяет готовность к уроку.
слушают учителя,
Активизирует обучающихся на урок, объявляет тему урока, его цели, план урока.
записывают дату
и тему урока в
тетрадь
Тема «Разработка Web-сайтов» – одна из наиболее практически значимых, Предполагаемые
востребованных, так как умение создавать web-сайты становится все более ответы:
актуальным навыком пользователя интернета.
Реклама
Коммерция
Давайте с Вами подумаем какое назначение может быть у сайта, для чего он может Образование
быть создан?
Размещение
личной
информации,
статей,
материалов
7
2
2
3
Объяснение
нового
материала
Техноло
гия
WWW
Web-страницы. Web-страницы создаются с использованием языка разметки
гипертекстовых документов HTML (Hyper Text Markup Language). В обычный
текстовый документ вставляются управляющие символы - HTML-тэги, которые
определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web-страниц являются:
- малый информационный объем;
- возможность просмотра в различных операционных системах.
Для создания Web-страниц используются простейшие текстовые редакторы,
которые не включают в создаваемый документ управляющие символы
форматирования текста самого редактора. В качестве такого редактора в Windows
можно использовать стандартное приложение Блокнот.
Создание Web-страниц с использованием HTML-тэгов требует больших усилий,
времени и знания синтаксиса языка. Применение специальных инструментальных
программных средств (Web-редакторов) делает работу по созданию Web-сайтов
простой и эффективной. Процесс создания и редактирования страниц в Webредакторах очень нагляден, так как производится в режиме WYSIWYG (от англ.
"What You See Is What You Get" - "Что видишь, то и получишь").
Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-сайтов,
которые обычно содержат материал по определенной теме или проблеме.
Государственные структуры и организации (правительство, дума, школа и т. д.)
обычно создают официальные Web-сайты своих организаций, на которых
размещают информацию о своей деятельности. Коммерческие фирмы на своих
Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в
Интернет-магазине. Любой пользователь Интернета может создать свой
тематический сайт, на котором может разместить информацию о своих разработках,
увлечениях и т. д.
Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных
Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет
пользователю перемещаться по Web-страницам.
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо
тщательно протестировать, так как потенциальными посетителями вашего сайта
будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из
серверов Интернета. Многие провайдеры предоставляют своим клиентам
возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный
хостинг).
Внимательно
слушают учителя,
отвечают на его
вопросы, по ходу
делают записи в
тетради
14
Презента
ция
«Структу
ра Webстраницы»
Структура Web-страницы.
HTML-код страницы помещается внутрь контейнера <HTML></HTML>. Без этих
тэгов браузер не в состоянии определить формат документа и правильно его
интерпретировать. Web-страница разделяется на две логические части: заголовок и
отображаемое в браузере содержание.
Заголовок Web-страницы заключается в контейнер <HEAD></HEAD> и содержит
название документа и справочную информацию о странице (например, тип
кодировки), которая используется браузером для правильного отображения.
Тэги заключаются в угловые скобки и могут быть одиночными или парными.
Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов
называется контейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут
записываться как прописными, так и строчными буквами.
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот *.htm-файл может быть одновременно открыт
и в Notepad, и в IE. Сохранив изменения в Notepad,
просто нажмите кнопку Reload ('перезагрузить') в IE,
чтобы увидеть эти изменения реализованными в HTMLдокументе.
</P>
</body>
</html>
Созданную Web-страницу необходимо сохранить в виде файла под именем
e0001.htm.
В качестве расширения файла Web-страницы можно также использовать html.
Рекомендуется создать для размещения сайта специальную папку и сохранять все
файлы разрабатываемого сайта в этой папке.
4
5
6
7
Необходимо различать имя файла e0001.htm, под которым Web-страница хранится в
файловой системе, и имя Web-страницы (например, "Пример1"), которое
высвечивается в верхней строке окна браузера. Имя Web-страницы должно
соответствовать ее содержанию, так как оно в первую очередь анализируется
поисковыми системами.
Проведение практической работы №1 по теме «Создание начальной страницы Выполняют
сайта». (методические материалы раздаются обучающимся)
практическую
работу
Практичес
кая работа
Закрепление
пройденного
материала
Рефлексия
Подведение
итогов и
домашнее
задание
Создание
простейш
ей Webстраницы
А теперь закрепим знания, полученные на уроке (используется ЭОР Создание Учащиеся
простейшей Web-страницы)
работают с
модулем
Ребята, сегодня мы с вами познакомились с созданием простейших web-страниц. Говорят, что
Возникали ли у Вас трудности при работе? Определите и выберите листочки, на нового узнали на
каком уровне вы находитесь:
уроке;
- знаю и объясню другому
высказываются о
- знаю
трудностях,
- сомневаюсь, что знаю
возникших по
- не знаю
ходу работы.
Ответить контрольные вопросы (Задание 3) в Методических материалах.
Выставление оценок, задание на дом.
Отвечают на
вопросы.
Слушают учителя,
записывают
домашнее задание
20
5
1
1
ПЕРЕЧЕНЬ ИСПОЛЬЗУЕМЫХ НА ДАННОМ УРОКЕ ЭОР
Форма
предъявления
информации
№
Название ресурса
Тип, вид ресурса
(иллюстрация,
Гиперссылка на ресурс, обеспечивающий доступ к
презентация,
ЭОР
видеофрагменты,
тест, модель и
т.д.)
1
Технология WWW
Информационный
Флеш-ролик
http://85.142.23.53/packages/npc1c/0921C260-8C9D-4BD1AAFA28614DA7E1FE/1.0.0.2/INFORM_13_1_2_2_2_i_1_1.0.0.2.o
ms
2
«Структура Web-страницы»
Информационный
Презентация
3
Создание простейшей Web-
Практический
Флеш-ролик
страницы
http://85.142.23.53/packages/rbc/D2B15518-703B-4F00A5B79EB4E104755B/1.0.0.0/912_p_sozdanie_prosteyshey_veb_str
anitsy.oms
М Е Т О Д И Ч Е С К И Й М АТ Е Р И А Л
Задание 1. Подготовка шаблона
HTML-документ — это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы
с расширением *.html).
1. Запустите Блокнот и создайте начальный HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот *.htm-файл может быть одновременно открыт
и в Notepad, и в IE. Сохранив изменения в Notepad,
просто нажмите кнопку Reload ('перезагрузить') в IE,
чтобы увидеть эти изменения реализованными в HTML-документе.
</P>
</body>
</html>
2. Сохраните документ в под именем e0001.htm
3. Попробуйте открыть и просмотреть его через браузер.
Для удобства чтения введены дополнительные отступы, однако в HTML это совсем не обязательно. Более
того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах.
Поэтому наш документ мог выглядеть так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить')
в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах,
заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (поанглийски — tag, читается "тэг").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть
закрывающая метка вида </tag> с тем же именем, но с добавлением "/".
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body>
будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную
информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако,
нет ни одного атрибута. Мы добавим атрибуты в следующем разделе.
Обязательные метки
<html> ... </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTMLдокумент.
<head> ... </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см.
описание метки <title> ниже), в этот раздел может включаться множество служебной информации.
<title> ... </title>
Все, что находится между метками <title> и </title>, толкуется браузером как название документа.
Internet Explorer, например, показывает название текущего документа в заголовке окна и печатает его в левом
верхнем углу каждой страницы при выводе на принтер.
<body> ... </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет
содержание документа.
<H1> ... </H1> — <H6> ... </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок
первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> ... </P>
Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского
"выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>
4. Создайте простейшую Web- страницу:
<html>
<head>
<title>Пример 2</title>
</head>
<body>
<H1 ALIGN=CENTER>Привет!</H1>
<H2>Это чуть более сложный пример HTML-документа</H2>
<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P>
<P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P>
</body>
</html>
5. Сохраните документ под с именем e0002.htm
6. Просмотрите его через браузер.
Задание 3. Ответить на вопросы:
-
Что такое HTML?
Является ли HTML языком программирования, почему?
Назовите основные разделы HTML-документа?
Перечислите параметры тэга <BODY>, <P>, <Font>.