Открытый урок поинформатике на тему Создание связанных Web-страниц средствами языка HTML

Тема урока «Создание связанных Web-страниц средствами языка HTML»
Цели урока:
закреплять и систематизировать знания, умения и навыки форматирования текста и вставки графических объектов при создании Web-страниц средствами языка HTML;
развивать познавательный интерес, логическое мышление, творческую активность при выполнении практических заданий;
воспитывать внимательность, усидчивость, информационную культуру обучающихся;
закрепить на представляемом материале знания по географии о природных зонах России (установить межпредметные связи).
Оборудование: текстовый редактор Блокнот, браузер Internet Explorer, доска, компьютер, компьютерная презентация, папка общего доступа с заготовками для создания страницы(графические изображения для фона, текст в формате MS Word); файл, содержащий страницу, созданную на прошлом уроке, карточки с практической работой.
План урока:I. Организационный момент. (1 мин)II. Актуализация знаний. (12 мин)III. Теоретическая часть. (12 мин)IV. Д/з (2 мин)
V. Физкультминутка (3 мин)
VI. Практическая часть. (15 мин)
VII. Итог урока. Рефлексия. (5мин)
Ход урока:
I. Орг. момент.Приветствие, проверка присутствующих. Объяснение хода урока.
II. Актуализация знаний.Как видно из текста на слайде (Слайд 1), сегодня мы с вами продолжаем знакомиться с основными приемами разработки Web-страницы с применением языка гипертекстовой разметки HTML. На прошлых уроках вы уже создавали свои странички, применяя различные стили форматирования текста и добавляя на них графические объекты. Давайте с вами вспомним основные понятия, пройденные нами ранее.
Что такое Web-сайт? (Web-сайт - группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образующих структуру)
С помощью какого языка создаются Web-страницы? (Языка Hyper Text Markup Language - HTML)
С помощью каких технологий можно создавать сайты? (Сайты могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов. Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора)Как называются управляющие команды, заключенные в угловые скобки, задающие вид web-страницы? (Теги)
Какие виды тегов вам известны? (Парные и одиночные)
На предыдущих уроках мы говорили, что во Всемирной паутине Web-сайты обычно содержат материалы по определенной теме или проблеме. Государственные структуры и организации обычно создают официальные web-сайты, на которых размещают информацию о своей деятельности. Коммерческие фирмы размещают на своих сайтах рекламу товаров или услуг. Любой пользователь Интернета может создать свой тематический сайт.
Вольф Анне было задано индивидуальное задание, заключающееся в разработки Web-сайта, содержащего тестирование по теме «Основы языка гипертекстовой разметки HTML».
А теперь вам предлагается выполнить следующее задание. Необходимо Исправьте ошибки, допущенные в программном коде:
<HTML>
<HEAD
<TITLE> Информатика < TITLE>
</HEAD>
<BODY>

<H1 ALING="center">
Файлы и файловая система
</H8>
</FOND>
<HR>;
 Файл - это определенное количество информации (программа или данные), имеющее имя и хранящееся в долговременной памяти. 
 Файловая система - это часть операционной системы, назначение которой состоит в том, чтобы обеспечить пользователю удобный интерфейс при работе с данными, хранящимися на диске, и обеспечить совместное использование файлов несколькими пользователями и процессами. <>
<img src="рисунок.png" ALIGN="right">
<A HREF="software.htm"> Программы </A>
</BODY>
</HTML
Посмотрите внимательно на программный код и скажите, все ли использованные теги вам известны?
Что еще нужно научиться делать, чтобы создать полноценный сайт? (Научиться делать гиперссылки)
III. Теоретическая часть.
Вот мы и подошли к теме урока «Создание гиперссылок на Web-страницах»
Гиперссылка - это ссылка, расположенная в тексте страницы сайта и дающая возможность перехода на другую страницу или ресурс.
На Web- страницу гиперссылки размещаются с помощью тега:
<A href=“адрес перехода”>текст-ссылка</A>
Если Web- страница размещена на локальном компьютере в одной папке вместе с Web- страницей, то вместо адреса указывается имя файла.
<A href=“FileName.htm”>текст-ссылка</A>
Если в Интернете, то прописываем полностью Интернет-адрес.
<A href=“http://www.server.ru/Web-сайт/FileName.htm”>текст-ссылка</A>
Во время практической части урока мы будем учиться создавать гиперссылки на Web-страницах. А сейчас немного расслабимся и проведем зарядку для глаз.
IV. Физкультминутка.
Зарядка для глаз: ребята встаньте, пожалуйста, и выполните упражнения
Упражнение выполняется только глазами. Посмотрите вверх, влево, вниз, вправо. Повторить еще 2 раза
Зажмурили сильно глаза, окрыли, удивились! Повторить еще 2 раза
Упражнение «ракушка»: помассировали ушки, немного потянули и прижали и отжали
Ленивая восьмерка: вытянули левую руку перед собой и смотрим на большой палец. Начинаем движение в левый верхний угол. Рисуем рукой ленивую восьмерку – знак бесконечности, а за движением руки смотрим глазами до ощущения «хватит». Повторить аналогично правой рукой. Продолжить двумя руками.
Посадили на нос воображаемую бабочку и начинаем рисовать глазами туже восьмерку влево вверх
V. Домашнее задание
1. Выучить параграф 3.7.5.
2. Найти информацию о природных зонах России: тайга, степь и лесостепь.
VI. Практическая часть.
Практическая работа по теме
«Создание связанных Web-страниц средствами языка HTML»
Цель работы: научиться создавать Web-сайты с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот.
Ход работы:
Откройте текстовый редактор Блокнот.
Создайте Web-страницу «Арктика», разместив на ней текст из файла Тексты для сайта (Рабочий стол\Практическая работа\Тексты для сайта.doc). Для этого в Блокноте введите следующий программный код:
<HTML>
<HEAD>
<TITLE> Арктика </TITLE>
</HEAD>
<BODY background="арктика.jpg" text="#0000AA" topmargin="60" Leftmargin="60" rightmargin="80">
<H1 align=center> Арктика </h1>
Пространства арктических пустынь покрыты льдом, щебнем и обломками камней. Землю здесь сковывает многолетняя мерзлота.
Среди полярных льдов и ледников встречаются своеобразные оазисы растительности — на небольших изолированных участках растут накипные мхи и лишайники, а также осоки и некоторые злаки.
 В условиях арктической пустыни встречаются и
некоторые виды цветковых растений: полярный мак, лисохвост, лютик, камнеломка и др.
Из животных здесь обитают лемминг, песец и белый медведь. На скалистых берегах летом гнездятся морские птицы, образуя «птичьи базары».



</BODY>
</HTML>
Сохраните результат работы под именем Арктика.htm в папке Практическая работа.
Откроем начальную страницу сайта (файл Природа.htm). Далее необходимо установить ссылку из основного файла Природа.htm на вновь созданную страницу с помощью тэга A с атрибутом HREF, который мы сегодня рассмотрели. Для страницы «Арктика» это выглядит так:

<A HREF="арктика.htm" style="color:#0000FF"> Арктика </A>
Сохраните изменения в файле Природа.htm выполнив команду [Файл-Сохранить].
Посмотрите получившуюся Web-страницу в браузере.
Создайте Web-страницу «Тундра» аналогично Web-страницу «Арктика», выполнив пункты № 2 – 5.
VII. Итог урока.
- Что нового узнали на уроке?
Рефлексия.
Выставление оценок.