Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Разработка урока по информатике для 9 класса «Создание первой web-страницы».

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



Осталось всего 2 дня приёма заявок на
Международный конкурс "Мириады открытий"
(конкурс сразу по 24 предметам за один оргвзнос)


  • Информатика

Поделитесь материалом с коллегами:

Урок на тему

«Создание первой web-страницы».

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

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

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

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

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

Тема урока: Создание первой web-страницы.

Цели урока:

  • сформулировать основные принципы создания WEB -страниц;

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

  • продемонстрировать использование этих команд на конкретных примерах оформления WEB -страниц

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

Образовательные:

формировать навыки и умения создания простейших WEB -страниц.

Воспитательные:

воспитание информационной культуры учащихся, внимательности, аккуратности, и дисциплинированности ;

Развивающие:

развивать наглядно-образное мышление, логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.

Межпредметные связи: информатика, история

Место урока в учебном плане: урок проводится после изучения раздела «Возможности глобальной сети интернет».

Тип занятия: комбинированный.

Возраст учащихся: IX класс.

Оборудование урока:

  • мультимедийный проектор;

  • экран для проектора;

  • компьютеры;

  • текстовый редактор Блокнот;

  • программа-браузер Opera илиInternet Explorer.

Литературные и интернет – источники, использованные при подготовке урока.

  1. Макарова Н.В. Информатика. Базовый курс. Учебник для 7-9 классов. Питер, 2007.

  2. Гилярова М.Г. Информатика 9 класс. Поурочные планы по учебнику Макаровой Н.В. ИТД «Корифей», 2009.

  3. Печникова В.Н. Серия «Технический бестселлер. Создание Web-сайтов без посторонней помощи. М.: 2006.

  4. http://ru.wikipedia.org – Материалы свободной электронной энциклопедии.

  5. 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. Актуализация опорных знаний

С помощью языка HTML создается текстовый файл, имеющий расширение( .html), который называется HTML-файл. Этот файл отображается с помощью программ – браузеров, наиболее популярные из которых – Internet Explorer, Opera, Mozilla и Netscape, в виде Web-страницы. E:\На конкурс ИНФО 2010\хтмл.bmp







Рис.1. В свойствах изображения можно посмотреть расширение файла и программу браузер, с помощью которой файл открывается.


Основным понятием языка HTML является понятие тег. ТЕГ – инструкция браузеру, указывающие способ отображения информации.

Теги бывают одиночные и парные (открывающиеся < > и закрывающиеся >).

Каждый HTML- документ имеет определенную структуру, которая выглядит следующим образом:

………..

……….

html>

Структура HTML- документа содержит следующие обязательные элементы:

  • тег <html> и html> , которые отмечают начало и конец документа;

  • заголовок, ограниченный тегами <head> и head>

  • тело документа, ограниченное тегами <body> и body>

  • В заголовке, ограниченном тегами <head> и head>, с помощью тегов <title> …..title> определяется название документа, которое должно описывать его содержимое.

hello_html_75f39fff.png







Рис.2. Пример кода HTML «Web-странички» в окне программы Блокнот » в окне браузера.


Информация на Web-странице может быть представлена в различных формах:

текст

изображения

аудио

видео

Для того чтобы вставить эти элементы в HTML документ существуют дополнительные теги и атрибуты.

Сегодня мы рассмотрим, как добавлять текст и изображения на Web-страницу


Добавление текста на Web-страницу.

Основной текст, вставляется между тегами <body> и body>.

Выравнивание блока текста осуществляется с помощью атрибута align.

Атрибут align может принимать значения:

align ="left" - выравнивание по левому краю

align ="right" - выравнивание по правому краю

align ="center " - выравнивание по центру

align ="justify" - выравнивание по обеим краямтекст.bmp






Рис.3.Пример выравнивания текста по центру.


Элемент <br> разрывает текст и вставляет новую строку.

Элемент <p> задает абзац.

Элемент <div> задает раздел.p.bmp









Рис.4. Пример добавления абзаца в текст.


Добавление цвета на Web-страницу.

Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполняется с помощью атрибутов bgcolor=”цвет фона” и text=”цвет текста”.

hello_html_m7c4a3ab5.png








Рис.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=”………”> вставляем рисунок. В кавычках записывается название рисунка и его формат.

hello_html_469c322d.png







Рис.7. Пример добавления рисунка на «Web-страничку».


IV. Выполнение лабораторно-практической работы

Как уже было объявлено в начале урока, мы с вами должны создать Web-страницу посвященную Дню Победы «9 мая».

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

Учитель раздает ученикам методички с материалами лабораторно-практической работы

Методичка лабораторно-практической работы

1. Исходные файлы: находятся в папке Практическое задание

Перед выполнением задания скопируйте все файлы из папки Практическое задание

в свою рабочую папку.

2. Загрузить программу Блокнот (ПУСК – Программы – Стандартные)

3. По порядку записываем основные теги

html>

4. Между тегами и записать заголовок - День Победы «9 мая».

5. Изменение фона страницы и цвета текста: для этого добавить в тег

bgcolor –цвет фона; text – цвет текста.

6.После тега с помощью тега <img src=”………”> вставить рисунок - 65-летие Дня Победы. Для этого в кавычки записать название рисунка и формат.


65-летие Дня Победы.jpg





Рис.8. 65-летие Дня Победы.

7.Затем после вставки рисунка вставить текст стихотворения, находящийся в файле -Стихотворение о войне. Для этого необходимо открыть этот файл, скопировать и вставить текст. А для того чтобы наше стихотворение красиво выглядело перед каждым абзацем вставляем элемент <p> :

Пусть дни войны тянулись очень долго,

Пусть быстро мчались мирные года.

Победы под Москвой, под Курском и на Волге

История запомнит навсегда.

Пусть Вы сейчас отцы и деды,

Виски посеребрила седина.

Вовек Вам не забыть весну Победы,

Тот день, когда закончилась война.

Пусть многие сегодня не в строю,

Мы помним все, что делалось тогда

И обещаем Родину свою

Сберечь для дела, мира и труда.

8. Далее вставить по очереди фотографии:Домой с фронта.jpg

вечный огонь Возложение цветов.jpgВечный огонь.jpg

возложение цветов.


домой с фронта

Рис.8. Фотографии на Web-страницу.



9. Сохранить документ в своей рабочей папке под именем Моя первая Web-страница в формате .html, для этого выполнить команду Файл – Сохранить как. После этого открыть сохраненный файл и посмотреть, что у вас получилось.

Ваша Web- станица должна выглядеть так:

hello_html_m9151e97.png


Рис.8. Web-страница, созданная после выполнения лабораторно-практической работы.


V. Подведение итогов урока

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

Теперь вы сами сможете создавать свои Web- страницы.

Спасибо за работу!




57 вебинаров для учителей на разные темы
ПЕРЕЙТИ к бесплатному просмотру
(заказ свидетельства о просмотре - только до 11 декабря)


Автор
Дата добавления 29.02.2016
Раздел Информатика
Подраздел Конспекты
Просмотров623
Номер материала ДВ-494569
Получить свидетельство о публикации
Похожие материалы

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