Методическая разработка урока на тему "Создание простейшей Web-страницы"

Донецкий центр профессионально-технического образования строительства и архитектуры

МЕТОДИЧЕСКАЯ РАЗРАБОТКА

УРОКА ПО ИНФОРМАТИКЕ

НА ТЕМУ:

«Создание простейшейWeb-страницы»

Выполнила преподаватель информатики

Кашук Елена Борисовна

Донецк, 2017г.

Тема урока: Создание простейшей Web – страницы средствами приложения БЛОКНОТ.

Цель урока:

·        Познакомить учащихся со структурой простейшей WEB – страницы;

·        Изучить назначение языка разметки HTML;

·        Воспитывать чувство взаимопомощи и навыки коллективной работы;

·        Развивать логическое мышление.

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

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

Дидактическое обеспечение: вопросы для учащихся; раздаточный материал для групп.

Ход урока:

I.                  Орг. момент (5 минут)

II.               Мотивация изучения темы.

К первой половине 90-х гг. в глобальной телекоммуникационной сети Интернет были накоплены потрясающие объёмы информации, хранящиеся в самых разнообразных формах, начиная от файлов данных, текстов, документов, изображений, звуковых и видеофрагментов и кончая программами. Однако возможности воспользоваться этой информацией не было бы, если бы не появление и повсеместное распространение принципиально новой технологии – системы World Wide Web (Всемирной паутины). В основу этой технологии положена технология гипертекста, распространённая на все компьютеры, подключённые к сети Интернет.

III. Оглашение темы урока.

На сегодняшнем уроке мы рассмотрим понятие Web-страницы,  её структуру, изучим назначение языка разметки HTML и создадим на компьютере простейшую Web – страничку.

IV. Актуализация опорных знаний.

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

В самом деле, почему нет? В Интернет принимают всех!

Какими же знаниями и умениями нужно обладать, чтобы научиться создавать свои странички в Интернете?

·        Необходимо уметь запускать компьютерное приложение и завершать его работу;

·        Переключаться между экранными окнами приложений и переносить информацию через буфер обмена из одного окна в другое;

·        Писать и редактировать тексты на компьютере;

·        Редактировать графическую информацию.

Вопросы для учащихся:

1. Что представляет собой глобальная сеть Интернет?

Это глобальная информационная сеть, которая объединяет огромное количество региональных сетей и одновременно миллионы компьютеров во всех концах планеты с целью обмена данными и доступа информационным и технологическим ресурсам.

2. Какую функцию выполняет модем при подключении к Интернету?

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

3. Что такое серверы и какова их функция?

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

V.  Изучение нового материала.

На прошлом уроке мы рассмотрели историю WWW, понятие гипертекста и Web-страницы, а также назначение программ - браузеров.

Вопросы для учащихся:

1.     Что представляет собой World Wide Web?

WWW – это глобальная система распространения гипертекстовой информации по сети Интернет.

2.     Что такое гипертекст?

Гипертекст – это способ организации текста, графики и других данных, связанных между собой.

3.     Как работают программы – браузеры?

Браузер, выполняя программу, формирует на экране документ, который видит пользователь.

Что же представляет собой Web – пространство и сайт?

Web–пространство – это мировая совокупность сайтов. Сайт расположен на сервере, серверы соединены между собой при помощи каналов связи.

Сайт – это совокупность гипертекстовых страниц.

1.                Корпоративные сайты  представляют различные предприятия, фирмы.

2.                Школьные сайты представляют школы.

3.                Личные сайты представляют частных лиц.

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

В современном мире сайт становится визитной карточкой как организации, так и частного лица.

Сайт составляется из гипертекстовых страниц, которые записываются на специальном языке HTML (Hyper Text Markup Language).

HTML – это набор соглашений для разметки документов, которые определяют внешний вид документов на экране компьютера при доступе к ним с помощью программы браузера.

Этот язык не является языком программирования и служит для указания браузеру, в каком виде выводить на экран текст и графику.

HTML – документ – это обычный текстовый файл с расширением htm или html, составленный на языке HTML и содержащий информацию, которая предназначена для публикации в WWW.

Текстовый файл, составленный языком разметки HTML, можно набрать и отредактировать в обычном текстовом редакторе, а также в приложении БЛОКНОТ.

Как выполняется разметка документа с помощью HTML?

Документ разбивается на элементы: заголовки, абзацы, рисунки, таблицы и проч. Для каждого элемента задаётся команда языка HTML, называемая тегом.

Тег (в переводе – указатель, метка) – это фрагмент кода, который описывает определённый элемент документа HTML и заключается в угловые скобки < >.

Как правило, теги парные. Первый тег открывает описание команды, второй, отличающийся от первого наличием косой черты «/» перед ключевым словом (именем тега), закрывает его.

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

Для HTML – документа обязательными являются теги:

<HTML>…</HTML> - обозначают начало и конец HTML – документа.

<HEAD>…</HEAD> - заголовок документа.

<BODY>…</BODY> между этими тегами располагается непосредственно документ, т.е. тело.

<TITLE>…</TITLE> - между тегами заключено название документа.

Устройство простейшей HTML – программы (кода гипертекстовой страницы) рассмотрим на примере.

Вот текст HTML – программы, которая показывает эту страничку:

Текст HTML - программы	Комментарий
<HTML>     <HEAD> <TITLE>Первый HTML- документ</TITLE>    </HEAD>    <BODY>     <H1>Мой первый HTML-документ</H1>     <HR>     <P> Как хороши морские пейзажи. Сейчас на море штиль. Закат горит огнём. Глаз не оторвать.    </P>   </BODY> </HTML>	Начало HTML – кода Начало головной части Заголовок окна документа Конец головной части Начало тела программы Заголовок Горизонтальная линия Начало абзаца Абзац Конец абзаца Конец тела программы Конец HTML - кода

Задание для учащихся: открыть приложение БЛОКНОТ и создать по образцу простейшую Web-страничку.

В рассмотренном документе присутствуют теги <P> и </P>, между которыми помещается текст абзаца. Можно добавить тег <BR>, применяемый для разрыва строки (т.е. для перехода на новую строку). 

Задание для учащихся: добавить в имеющуюся страничку после каждой строки тег <BR>. Просмотреть исправленную страничку и сказать, что в ней изменилось.

Создание заголовков.

Заголовки делят документ на логически законченные блоки. Для задания заголовков используются парные теги <H1>…</H1> (заголовок первого уровня), <H2>…</H2> (заголовок второго уровня) и т.д. Всего предусмотрено 6 уровней заголовков. Чем выше уровень заголовка, тем крупнее шрифт.

Вставка изображений.

Трудно найти в WWW страницу, на которой не было бы изображений. Вставка изображения на Web-страницу выполняется одиночным тегом <IMG>. Внутри этого тега обязательно  записывается атрибут src (от слова source – источник), содержащий URL изображения.

Например, вы хотите разместить на странице картинку из файла Закат.jpg. Для этого необходимо сохранить файл с изображением в той же папке, что и сам HTML-документ, а в документ необходимо ввести тег  <IMG src=”Закат.jpg”>.

Задание для учащихся: добавить в имеющуюся страничку тег         <IMG src=”Закат.jpg”>. Просмотреть страничку и обратить внимание на произошедшие изменения.

Задание для самостоятельного выполнения: создать Web-страницу, непосредственно связанную со своей специальностью.

VI. Дебрифинг.

1.     Что нового вы узнали на сегодняшнем уроке?

2.     Какие трудности возникли при создании Web-страницы?

3.     Какая информация была наиболее полезной на данном уроке?

4.     Какие элементы, кроме рисунков, вы бы хотели добавить в Web-страничку?

Краткое описание документа:

На уроке рассматривается понятие Web-страницы, её структура. Текстовый файл, составленный языком разметки HTML, можно набрать и отредактировать в обычном текстовом редакторе, а также в приложении БЛОКНОТ. Документ разбивается на элементы: заголовки, абзацы, рисунки, таблицы и проч. Для каждого элемента задаётся команда языка HTML, называемая тегом. Тег (в переводе – указатель, метка) – это фрагмент кода, который описывает определённый элемент документа HTML и заключается в угловые скобки < >. Как правило, теги парные. Первый тег открывает описание команды, второй, отличающийся от первого наличием косой черты «/» перед ключевым словом (именем тега), закрывает его.Учащиеся создают на компьютере простейшую Web – страничку сначала по образцу. В качестве домашнего задания требуется создать Web-страницу, непосредственно связанную со своей профессией.