ПЛАН-КОНСПЕКТ УРОКА 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>.