Разработка урока по информатике для 9 класса «Создание первой web-страницы».


Урок на тему
«Создание первой web-страницы».
Современному человеку требуется определенный набор знаний и умений, которые он применяет в жизни. Одним из таких умений является умение работать с компьютером.
В наше время, когда идет бурное развитие информационных технологий, большое значение приобрела проблема изучения сетевых технологий
Все больший вес в жизни людей занимает Internet и технологии, которые предъявляют все больше требований к знанию учащихся в этой области.
В процессе обучения от учащихся потребуется не только умение создать свой Web-сайт, но и сделать его визуально и информационно привлекательным, что невозможно без мобилизации творческих возможностей и необходимости самостоятельного поиска нестандартных (не шаблонных) решений.
Изучение данного направления в школьном курсе способствует развитию творческих способностей, профессиональному образованию и самоопределению школьников.
Тема урока: Создание первой web-страницы.
Цели урока:
сформулировать основные принципы создания WEB -страниц;
познакомить учеников с основными командами оформления текста и вставки рисунков;
продемонстрировать использование этих команд на конкретных примерах оформления WEB -страниц
Задачи урока:
Образовательные:
формировать навыки и умения создания простейших WEB -страниц.
Воспитательные:
воспитание информационной культуры учащихся, внимательности, аккуратности, и дисциплинированности ;Развивающие:
развивать наглядно-образное мышление, логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.
Межпредметные связи: информатика, история
Место урока в учебном плане: урок проводится после изучения раздела «Возможности глобальной сети интернет».
Тип занятия: комбинированный.
Возраст учащихся: IX класс.Оборудование урока:
мультимедийный проектор;
экран для проектора;
компьютеры;
текстовый редактор Блокнот;
программа-браузер Opera илиInternet Explorer.
Литературные и интернет – источники, использованные при подготовке урока.
Макарова Н.В. Информатика. Базовый курс. Учебник для 7-9 классов. Питер, 2007.
Гилярова М.Г. Информатика 9 класс. Поурочные планы по учебнику Макаровой Н.В. ИТД «Корифей», 2009.
Печникова В.Н. Серия «Технический бестселлер. Создание Web-сайтов без посторонней помощи. М.: 2006.
http://ru.wikipedia.org – Материалы свободной электронной энциклопедии.
http://images.yandex.ru – Фотографии взяты из поисковой системы Яндекс - картинки.
План урока:
Урок рассчитан на 45 минут.
I. Организационный момент – 1 мин.
II. Постановка целей и задач урока – 4 мин.
III. Актуализация опорных знаний – 20 мин.
IV. Выполнение лабораторно-практической работы по теме – 15 мин.
V. Подведение итогов урока – 5 мин.
ХОД УРОКА
I. Организационный момент
Учитель приветствует класс и объявляет тему урока.
II. Постановка целей и задач урока.
Как известно, основной объем информации, доступной в сети Интернет, размещается во «всемирной паутине» - World Wide Web (WWW) – информационной системе, подобной гигантской библиотеке. В этой библиотеке информация представлена в виде связанных между собой документов, которые называются Web- страницами.
И наверняка каждый из вас задавал себе вопрос, как самому создать свою Web-страницу? Сделать это можно с помощью языка разметки гипертекста – HTML
( аббревиатура английских слов Hyper Text Markup Language ).
Сегодня мы с вами создадим свою первую Web-страницу. Она будет посвящена празднику дню Победы «9 мая».
III. Актуализация опорных знаний
1508760982345С помощью языка HTML создается текстовый файл, имеющий расширение( .html), который называется HTML-файл. Этот файл отображается с помощью программ – браузеров, наиболее популярные из которых – Internet Explorer, Opera, Mozilla и Netscape, в виде Web-страницы.
Рис.1. В свойствах изображения можно посмотреть расширение файла и программу браузер, с помощью которой файл открывается.
Основным понятием языка HTML является понятие тег. ТЕГ – инструкция браузеру, указывающие способ отображения информации.
Теги бывают одиночные и парные (открывающиеся < > и закрывающиеся </ >).
Каждый HTML- документ имеет определенную структуру, которая выглядит следующим образом:
<html>
<head>
………..
</head>
<body>
……….
</body>
</html>
Структура HTML- документа содержит следующие обязательные элементы:
тег <html> и </html> , которые отмечают начало и конец документа;
заголовок, ограниченный тегами <head> и </head>
тело документа, ограниченное тегами <body> и </body>
В заголовке, ограниченном тегами <head> и </head>, с помощью тегов <title> …..</title> определяется название документа, которое должно описывать его содержимое.
110871022860
Рис.2. Пример кода HTML «Web-странички» в окне программы Блокнот » в окне браузера.
Информация на Web-странице может быть представлена в различных формах:
текст
изображения
аудио
видео
Для того чтобы вставить эти элементы в HTML документ существуют дополнительные теги и атрибуты.
Сегодня мы рассмотрим, как добавлять текст и изображения на Web-страницу
Добавление текста на Web-страницу.
Основной текст, вставляется между тегами <body> и </body>.
Выравнивание блока текста осуществляется с помощью атрибута align.
Атрибут align может принимать значения:
align ="left" - выравнивание по левому краю
align ="right" - выравнивание по правому краю
align ="center " - выравнивание по центру
718185260985align ="justify" - выравнивание по обеим краям


Рис.3.Пример выравнивания текста по центру.
Элемент <br> разрывает текст и вставляет новую строку.
Элемент <p> задает абзац.
1108710240030Элемент <div> задает раздел.
Рис.4. Пример добавления абзаца в текст.
Добавление цвета на Web-страницу.
Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполняется с помощью атрибутов bgcolor=”цвет фона” и text=”цвет текста”.
84201087630
Рис.5. Пример добавления цвета фона и текста на «Web-страничку».
Для определения цвета как значения существует два варианта:
словесное указание цвета (например: red-красный)
цифровое обозначение в шестнадцатиричной записи (например: #ffffff-белый)
Название цвета Цвет Код Название цвета Цвет Код
Black (черный) #000000 Silver (серебряный) #C0C0C0
Maroon(темно-бордовый) #800000 red (красный) #FF0000
Green (зеленый) #008000 Lime (лайм) #00FF00
Olive (оливковый) #808000 Yellow (желтый) #FFFF00
Navy (темно-синий) #000080 Blue (синий) #0000FF
Purple (пурпурный) #800080 Fuchsia (фуксия) #FF00FF
Teal (бирюзовый) #008080 Aqua (морская волна) #00FFFF
Gray (серый) #808080 White (белый #FFFFFF
Рис.6. 16 ключевых цветов.
В HTML существует 216 цветов образующих безопасную палитру, в них входят 16 ключевых цветов. И у каждого цвета есть свои оттенки.
Добавление рисунков на Web-страницу.
На каждую Web-страницу можно поместить любое количество рисунков. Вы можете использовать готовые графические изображения или создать их сами.
Стандартные форматы Web-графики – GIF, JPG и PNG.
Для начала необходимо скопировать наш рисунок в папку, где будет находиться наша Web-страница. Затем с помощью тега <img src=”………”> вставляем рисунок. В кавычках записывается название рисунка и его формат.

8420103810
Рис.7. Пример добавления рисунка на «Web-страничку».
IV. Выполнение лабораторно-практической работы
Как уже было объявлено в начале урока, мы с вами должны создать Web-страницу посвященную Дню Победы «9 мая».
Весь необходимый материал находится в папке Практическое задание. Просмотрите файлы, находящиеся в папке и подумайте как будет выглядеть ваша Web-страница.
Учитель раздает ученикам методички с материалами лабораторно-практической работы
Методичка лабораторно-практической работы
1. Исходные файлы: находятся в папке Практическое задание
Перед выполнением задания скопируйте все файлы из папки Практическое задание
в свою рабочую папку.
2. Загрузить программу Блокнот (ПУСК – Программы – Стандартные)
3. По порядку записываем основные теги
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
4. Между тегами <title> и </title> записать заголовок - День Победы «9 мая».
5. Изменение фона страницы и цвета текста: для этого добавить в тег <body>
bgcolor –цвет фона; text – цвет текста.
6.После тега <body> с помощью тега <img src=”………”> вставить рисунок - 65-летие Дня Победы. Для этого в кавычки записать название рисунка и формат.

2261235-300990
Рис.8. 65-летие Дня Победы.
7.Затем после вставки рисунка вставить текст стихотворения, находящийся в файле -Стихотворение о войне. Для этого необходимо открыть этот файл, скопировать и вставить текст. А для того чтобы наше стихотворение красиво выглядело перед каждым абзацем вставляем элемент <p> :<p>Пусть дни войны тянулись очень долго,
<p>Пусть быстро мчались мирные года.
<p>Победы под Москвой, под Курском и на Волге
<p>История запомнит навсегда.
<p>Пусть Вы сейчас отцы и деды,
<p>Виски посеребрила седина.
<p>Вовек Вам не забыть весну Победы,
<p>Тот день, когда закончилась война.
<p>Пусть многие сегодня не в строю,
<p>Мы помним все, что делалось тогда
<p>И обещаем Родину свою
<p>Сберечь для дела, мира и труда.
22612353206758. Далее вставить по очереди фотографии:
вечный огонь 3880485118745-2476571120
возложение цветов.
домой с фронта
Рис.8. Фотографии на Web-страницу.
9. Сохранить документ в своей рабочей папке под именем Моя первая Web-страница в формате .html, для этого выполнить команду Файл – Сохранить как. После этого открыть сохраненный файл и посмотреть, что у вас получилось.
Ваша Web- станица должна выглядеть так:

Рис.8. Web-страница, созданная после выполнения лабораторно-практической работы.V. Подведение итогов урока
Сегодня перед нами стояла задача создать Web-страницу посвященную Дню Победы «9 мая». Для осуществления данной мы разобрали основные принципы создания WEB –страниц, познакомились с основными командами оформления текста и вставки рисунков; разобрали примеры оформления WEB –страниц. И успешно решили поставленную задачу.
Теперь вы сами сможете создавать свои Web- страницы.
Спасибо за работу!

Приложенные файлы

Добавить комментарий