«Структура WEB-страниц»
методическая разработка по информатике и икт (9 класс) по теме

Приложение 2

ООО Учебный центр «ПРОФЕССИОНАЛ»

План-конспект урока

по информатике и ИКТ

на тему «Структура WEB-страниц»

Разработал: Бугаев Игорь Витальевич

                                   ФИО

Санкт-Петербург, 2017

Тема урока: «Структура WEB-страниц»

Дата проведения: 18.05.2017 года

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

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

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

1. Познакомить с основными возможностями языка HTML для создания Web-страниц, структурой Web-страницы.
2. Организовать деятельность учащихся по созданию собственной Web-страницу с использованием основных тегов языка HTML.
3. Формировать творческий подход при создании собственной Web -страницы.

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

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

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

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

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

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

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

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

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

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

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

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

План урока 

1. Организационная часть — 2 мин.
2. Актуализация опорных знаний, проверка д/р. – 6 мин.

3.  Введение новых понятий на уроке —15 мин.

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

5.  Завершение урока — 3 мин.

Ход урока

1. Организационный часть.

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

Меня зовут Бугаев Игорь Витальевич, сегодня я проведу у вас урок информатики и икт на тему «Структура Web-страницы»

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

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

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

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

Обращение к ученикам: Ребята, что такое ip-адресс?

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

Обращение к ученикам: Давайте выполним несложное задание. Делать будем все вместе. Такой тип заданий вам может встретится в ОГЭ.

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

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

Ответ: 203.133.133.64 ГВБА

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

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

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

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

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

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

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

Сегодня же мы с вами разберем тему «Структура Web-страницы» На уроке вы узнаете, что представляет собой процесс создания Web-страниц. И мы попробуем сделать свою первую страничку.  

Вопрос учителя: Ребята, а как вы думаете, чем отличается веб-страница, от веб-сайта?

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

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

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

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

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

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

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

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

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

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

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

Вопрос учителя: Молодцы, давайте выполним еще одно задание.

Задание 2:

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

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

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-страницы

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

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

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

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

Внимание:

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

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

5. Завершение урока.

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

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

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

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

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

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

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

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

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

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

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

Самоанализ Урока

Тема занятия была «Структура Web-страниц», возраст учащихся 15-16 лет, 9а класс.

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

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

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

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

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

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

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

Формы:

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

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

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