урок информатики "Структура Web-страницы"
план-конспект урока по информатике и икт (8 класс) на тему

Урок № __. Структура Web-страницы.

Тип урока: Урок изучения новых знаний и способов действий (комбинированный, учебный практикум).

Цель: Овладение учащимися основными приемами создания WEB-страниц на языке HTML.

Задачи урока: 

• Познакомить с основными возможностями языка HTML для создания Web-страниц, структурой Web-страницы.
• Воспитывать самостоятельность учащихся – умение планировать свою деятельность, разрабатывать стратегию и план рассуждений (Индивидуальная работа, Тест).
• Способствовать развитию памяти, внимания, мышления.
• Организовать деятельность учащихся по созданию собственной Web-страницу с использованием основных тегов языка HTML.
• Формировать творческий подход при создании собственной Web -страницы.

Знания, умения, навыки и качества, которые актуализируют/приобретут/закрепят/др. ученики в ходе урока:

Основные знания

Ученик должен знать/ понимать:

• набор необходимых инструментов для создания  Web-страницы /сайта;
• типичную структуру Web -страницы;
• структурные теги (название и назначение), HTML- код.

Основные умения

Ученик должен уметь:

• самостоятельно составлять и планировать технологическую последовательность операций;
• уметь самостоятельно находить и использовать нужную информацию;
• пользоваться средствами языка HTML для написания страницы: создавать страницу, редактировать и форматировать Web-страницу.

Развитие навыков:

Ученик должен:

• приобрести навыки применения средств ИКТ в повседневной жизни, при выполнении индивидуальных и коллективных проектов в учебной деятельности, при дальнейшем освоении профессий, востребованных на рынке труда;
• приобрести навыки работы c HTML.
• закрепить навыки решения заданий: IP-адрес, URL-указатель, пропускная способность.

Развитие личностных качеств и психических процессов:

• Продуктивные формы деятельности: рефлексивность; активность; глубина рассуждений; аргументированность; аналитичность; точность, уместность, выразительность, ясность речи; самостоятельность; организованность; коммуникативная культура; культура эмоций; гибкость; любознательность; систематизация полученных знаний.
•  Репродуктивные формы деятельности: внимание; память; мышление (логичность, ясность речи, понимание материала).

Для ученика: учебник Угринович Н.Д. 8 класс § 3.7.1, 3.7.2.

Для учителя: учебник 2ч. Шафрин Ю.А. § 15.2, 15.3, 15.5, 15.7, 16.1, 16.2, 16.4., учебник Угринович Н.Д. 8 класс § 3.7.1, 3.7.2., учебное пособие Симонович С.В. раздел 25, 26, учебник Семакин И.Г. 10 класс § 2.2, 15.3,

Необходимое оборудование и материалы:

проектор, компьютер, пакеты с заданиями (рисуночный тест, карточки со справочным материалом), электронная презентация.

Ход урока

1. Организационный момент.

Здравствуйте ребята! Садитесь!

Эпиграф «Если вам него сказать Миру, не стоит засорять Сеть!»

2. Актуализация опорных знаний, проверка д/р.

(Повторение основных понятий: Web-страница, Web-сайт, Web-сервер, гиперссылка, протокол передачи гипертекста, Web-браузер).

Вопрос учителя: Приходилось ли вам работать в системе Интернет?

Основой Интернет является система так называемых IP-адресов.

Обращение к ученикам: Докажите мое утверждение.

Ответ: Каждый компьютер, подключенный к Интернету, имеет уникальный физический адрес.

Задание 1: Петя записал IP-адрес школьного сервера на листке бумаги и положил его в карман куртки. Петина мама случайно постирала куртку вместе с запиской. После стирки Петя обнаружил в кармане четыре обрывка с фрагментами IP-адреса. Эти фрагменты обозначены буквами. Восстановите IP-адрес.

(выполняем в тетради, первый,
кто справится к доске)

Ответ: 203.133.133.64 ГВБА

Вопрос учителя: Объясните, почему вы выполнили задание именно так?

Ответ: IP-адрес – это уникальный в рамках всей сети адрес компьютера, составляемый из четырех десятичных чисел, - каждое в диапазоне от 0 до 255. Эти числа записываются через точку.

Вопрос учителя: Эта форма удобна для компьютеров, но неудобна для людей. Запоминать такие адреса трудно. Существует ли более удобная форма записи?

Ответ: Наряду с цифровыми IP-адресами в Интернете действует система символьных имен,  которая ставит в соответствие каждому физическому адресу символический (доменный) адрес, составленный из осмысленных буквенных обозначений, разделенных точкой. Она называется доменной системой имен (DNS – Domain Name System),

С точки зрения пользователя Интернет – это множество информационных услуг, которые он может получать от сети. WWW(World Wide Web – «Всемирная паутина») – это самая популярная служба Интернета. Популярность этой службы так велика, что многие полагают, что это и  есть Интернет.

Вопрос учителя: Какие возможности предоставляет пользователю служба WWW?

Ответ: WWW предоставляет возможность поиска и сбора информации. Работа в WWW похожа на виртуальное путешествие по миру с изучением интересных мест.

Вопрос учителя: Какую программу необходимо иметь на компьютере, чтобы можно было воспользоваться этой услугой?

Ответ: Web-браузер.

Вопрос учителя:  Назовите примеры Web-браузеров?

Ответ:  

Любой пользователь 21 века должен уметь представлять свою информацию в Internet. Тема, с которой мы сегодня познакомимся, называется: Структура Web-страницы. На уроке  вы узнаете, что представляет собой  процесс создания Web-страниц.  

Ваша задача на уроке «Создание Web–страницы с помощью языка HTML».

Запишите тему урока: «Структура Web-страницы.», число, домашнее задание § 3.7.1, 3.7.2 подобрать материал, для размещения на вашем сайте.

Вопрос учителя:  Что такое Web-страница и Web-сайт?

Ответ: Web-страница – основной структурный элемент «Всемирной паутины».

Web-страница - это документ «Всемирной паутины», который содержит текстовую и (или) графическую информацию, а также ссылки на другие документы Internet (необязательно на Web-страницы).

Сайт – это совокупность Web-страниц, принадлежащая частному лицу или организации и размещенная на каком-либо Web-сервере (от английского слова «site» - участок).

Вопрос учителя: В определении прозвучало слово сервер? Объясните что это такое?

Ответ: Сервер - находящийся в сети компьютер, на котором запущено программное обеспечение, позволяющее отвечать на запросы на получение документов и других данных. 

Вопрос учителя: Каким образом среди множества всех страниц найти нужную Web-страницу?

Ответ: Для хранения и поиска информации используется универсальная адресация, которая носит название URL (Uniformed Resource Locator – универсальный указатель ресурсов). URL-указатель содержит информацию не только о том, где находится ресурс, но и по какому протоколу к нему следует обращаться.

Вопрос учителя: А что такое протокол?

Ответ: Протокол – это набор соглашений о правилах формирования и форматах сообщений Интернета, о способах обмена информацией между абонентами сети.

Вопрос учителя: Какой протокол лежит в основе передачи гипертекстовых сообщений?

Ответ: HTTP (Hyper Text Transfer Protocol – протокол передачи гипертекста). Его основное назначение – обработка гиперссылок, поиск и переда документов клиенту.

Задание 2:

Доступ к файлу http.txt , находящемуся на сервере www.net осуществляется по протоколу ftp. В таблице фрагменты адреса файла закодированы буквами от А до Ж. Запишите последовательность этих букв, кодирующую адрес указанного файла.

Ответ: ftp:// www.net/ http.txt  ВАЖГЕБД

Вопрос учителя: Объясните, почему вы выполнили задание именно так?

Ответ: URL-адрес состоит из трех частей: протокола доступа, доменного имени сервера, пути к файлу и имени файла.

3. Введение новых понятий на уроке (формирование  новых  понятий  и способов действий - сообщение  нового теоретического  материала).

Web-страница – это файл в формате HTML (Hyper Text Markup Language – язык разметки гипертекста).  HTML – это специальный язык форматирования текстовых документов (его еще называют языком разметки гипертекстовых документов. Речь идет об электронных, а не о печатных документах. Электронные документы (Web-страницы) предназначены не для печати на принтере, а для просмотра на экране. Заранее неизвестно, на каком компьютере документ будут просматривать. Неизвестен размер окна программы просмотра и неизвестны шрифты, установленные на том компьютере, на котором документ будут просматривать. Язык специально создан, чтобы оформлять экранные документы, которые будут воспроизводиться (просматриваться) неизвестными средствами. Создание документа на HTML аналогично программированию. Автор документа берет обычный текст и вставляет в него специальные коды (их называют тегами). Когда документ будут просматривать, эти теги выполнят роль команд. Теги позволяют выполнять выравнивание строк документа, управлять цветом фона экрана и цветом текста. Они позволяют вставлять в текст иллюстрации и обтекать их текстом, а также выполнять еще много прочих функций оформления страницы.

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

Вопрос учителя: Что такое гиперссылки?

Ответ: Гипертекстовая ссылка – это выделенный фрагмент текста (или иллюстрация), с которыми связан сетевой адрес другой Web-страницы. Если на гипертекстовую ссылку навести указатель мыши, то он изменит форму. Если по гипертекстовой ссылке щелкнуть левой кнопкой мыши, произойдет переход к другой Web-возможно находящейся на другом сервере, может быть даже на другом континенте.

Для работы по созданию Web-сайтов можно применять специальные программные средства Web-редакторы (например, Microsoft FrontPage или Macromedia Dreamweaver), в которых процесс создания и редактирования страниц нагляден, - производится в режиме WYSIWYG (от англ. «What You See Is What You Get» — «Что видишь, то и получишь»).

Другой способ - использование простейшего текстового редактора (например, Блокнот). При этом Web–страница полностью создается вручную, путем вставки в требуемый текст необходимых тегов. Это трудоемкий и отнимающий много времени способ. Но, благодаря ему, вам становится понятной вся технология сайтостроения.

Именно этим мы сейчас и займемся.

Содержание нашей страницы мы будем набирать в текстовом редакторе Блокнот и оформлять с помощью команд языка HTML. Команды языка (теги) заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тэги (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги можно записывать как прописными, так и строчными буквами. HTML-код страницы помещается внутрь контейнера   … … … . Без этих тегов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание. Заголовок заключается в контейнер и содержит содержание страницы и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения. Название страницы, которое будет выведено в строке заголовка браузера помещается в контейнер . Содержание страницы помещается в контейнер . Созданную Web-страницу необходимо сохранить в виде файла под любым именем. (Имя стартовой страницы сайта чаще всего – index). В качестве расширения файла используют .htm или .html (например, index.htm). Необходимо различать имя файла (index.htm), под которым Web-страница хранится в файловой системе, и название Web-страницы, например «Компьютер», которое описывается тэгом <TITLE> высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, т.к. именно оно анализируется поисковыми системами.

Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров) . Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( “). Тег со всеми атрибутами желательно располагать на одной строке.

Параметры тега .

Bgcolor – изменяет цвет фона. Цвет задается словом или  кодом RGB

Text – задает цвет текста.

Background – помещает в качестве фона изображение из файла с картинкой.

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

Учитель задает вопросы учащимся: Что было не понятно при просмотре? Как вы думаете, трудоемкий ли процесс написание HTML-кода?

4. Самостоятельная работа учащихся, учебный практикум

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

Практическая работа. Создание Web-страницы

• Запустить текстовый редактор Блокнот.
• Ввести HTML-код страницы:

Здравствуйте, это моя первая страница.

Добро пожаловать!

• Сохранить созданный файл под именем index.htm

Внимание:

• Файл должен быть сохранен в специально созданной папке, в которой будут храниться все файлы вашего сайта.
• Файлу надо дать расширение .htm. Для этого при сохранении документа в строке  «Тип файла» выберите «Все файлы».

• Загрузить этот файл в окно браузера для просмотра.

• Откройте созданный файл в программе Блокнот. Измените цвет фона страницы, используя атрибуты тега .

Цвет вберите самостоятельно, используя таблицу.

• Используя материал § 3.7.3 самостоятельно измените форматирование текста на вашей странице.

5. Физмунутка
6. Закрепление материала

Учитель: Для прочности наших знаний по теме компьютерные коммуникации давайте выполним рисуночный тест.

Задание 3:

Рисуночный тест

7. Подведение итогов, коротко о главном.

После того, как учащиеся попробовали самостоятельно создать первую Web-страницу, учитель подводит итог и предлагает обсудить проблему сложности создания Web-страницы в редакторе Блокнот.

Примерные ответы учащихся:

· сложно запомнить написание основных структурных тегов;

· затраты времени на написание HTML-кода;

· невозможность визуализации тегов;

· невозможность мгновенно просмотреть Web-страницу, только с помощью браузера.

Вопрос учителя: для чего же нужно уметь создавать Web-страницу с помощью языка разметки гипертекста HTML, используя редактор Блокнот.

Вывод (должны сделать учащиеся): Редактор Блокнот позволяет создавать Web-страницу в «ручную» с помощью HTML-кода – языка разметки гипертекста. Все страницы в Интернете представлены, с помощью HTML-кода. Любой желающий, который хочет научиться создавать правильно и структурировано Web-страницу, должен научиться делать это в «ручную». Только так можно познать основы HTML-кода, осознать насколько это трудоемкий процесс для разработчиков.

Предлагаю дома подумать над вопросами: какая информация будет размещена на вашем сайте? Какая аудитория будет заинтересована в этой информации?

Предлагаю вашему вниманию слова Юрия Алексеевич Шафрина, автора многочисленных учебников, пособий, практикумов и информатике и информационным технологиям.

«Сеть не может заменить  или имитировать духовный мир человека.

Едва ли не самая главная опасность Сети состоит в том, что она незаметно вытесняет из жизни человека живое общение, которое сближает и духовно обогащает людей, заставляет их думать, приучает к ответственности перед партнером.

Исключительные возможности телекоммуникаций создают у некоторых людей иллюзию всемогущества и всеведения, вызывают соблазн заявить о себе всему миру и попытаться занять в нем место, совсем не соответствующее их масштабу и возможностям. Поэтому в Сети мы видим не только океаны важной и полезной для общества информации, не только сайты талантливых и интересных людей, но и множество «островков» ненужных, вздорных и даже вредных «произведений», которые могут дезориентировать малоопытного человека».

При первом обращении к Web-сайту у пользователя должно сложиться целостное впечатление обо всем сайте. С первого взгляда он должен определить назначение ресурса, какие интересные материалы на нем располагаются, чтобы решить для себя, стоит ли вновь возвращаться к этому ресурсу.

Возвращение  к эпиграфу: Если вам него сказать Миру, не стоит засорять Сеть!

Оценки за урок будут выставлены после проверки рисуночных тестов и практической работы.

Хочу отметить самых активных на уроке …

8. Дополнительные задания.

Задание 4. 

Для решения задачи давайте вспомним единицы измерения информации и расположим их в порядке возрастания (на доске карточки на магнитах).

Скорость  передачи  данных  через ADSL-соединение  равна 128000 бит/c.

Через  данное  соединение  передают  файл  размером 625  Кбайт.

Определите время передачи файла в секундах.  

Решение:

Ответ: 40с

Задание 5.

Расположите приведенные значения количества информации в порядке их возрастания.

1) 106 Кбайт

2) 106 бит

3) 1024 байта

4) 8000000 бит

Ответ: 3241                1024 байта, 106 бит, 8000000 бит, 106 Кбайт

Спасибо за урок! Можете быть свободны.

Мотивация учащихся

Создание учащимися собственных WEB-ресурсов приобретает все большую актуальность.

Для того чтобы создать собственную Web-страницу, ученик может воспользоваться специальными программами редактирования документов Всемирной паутины. Следует отметить, что эти программы часто ограничены в своих возможностях, содержат ошибки, иногда создают избыточный код, который поддерживается не всеми браузерами, хотя, по мнению учеников, они более просты в использовании, так как являются визуализированными. Написание HTML-кода для Web-страницы является трудоемким процессом и заключается в «ручном» способе создания кода документов Всемирной паутины на языке HTML - HyperText Markup Language (языка разметки гипертекста). В процессе ученик должен придти к выводу: для того, чтобы научиться создавать, программировать, «шлифовать» и раскручивать собственную Web-страницу, необходимо научиться делать это «вручную». Только так можно познать основы HTML-кода, его возможности, преимущества перед визуализированными готовыми программами-редакторами, осознать насколько это трудоемкий процесс для разработчиков.

.Внимание учащихся надо акцентировать на то, что созданный ими Web-сайт является не целью, а средством достижения более глобальных целей, таких как структурировать информацию, выделять главную, основополагающую мысль в любой последующей деятельности.

        Результатом данного урока являются устная работа на уроке, готовые Web-страницы учащихся, тестирование по теме раздела. Результаты анализируются учащимся самостоятельно.

На уроке использованы следующие методы и формы работы с учащимися:

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

Формы:

•        фронтальная работа, как наиболее целесообразная с точки зрения психологического комфорта учащихся на открытых уроках;

•        индивидуальная форма, позволяющая дать посильные задания учащимся;

•        коммуникативно-направленная индивидуальная работа.