Тема
урока «Создание связанных 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.
На прошлых уроках вы уже создавали свои странички, применяя различные стили
форматирования текста и добавляя на них графические объекты. Давайте с вами
вспомним основные понятия, пройденные нами ранее.
1.
Что такое Web-сайт? (Web-сайт -
группа Web-страниц, принадлежащих одному автору или одному
издателю и взаимосвязанных общими гиперссылками, образующих структуру)
2.
С помощью какого языка создаются Web-страницы?
(Языка
Hyper Text Markup Language - HTML)
3.
С помощью каких технологий можно
создавать сайты? (Сайты могут быть
созданы при помощи любого текстового редактора или специализированных
HTML-редакторов. Выбор
редактора, который будет использоваться для создания HTML-документов, зависит
исключительно от понятия удобства и личных пристрастий каждого автора)
4.
Как называются управляющие команды,
заключенные в угловые скобки, задающие вид web-страницы?
(Теги)
5.
Какие виды тегов вам известны? (Парные и
одиночные)
На предыдущих уроках мы говорили, что во
Всемирной паутине Web-сайты обычно
содержат материалы по определенной теме или проблеме. Государственные структуры
и организации обычно создают официальные web-сайты,
на которых размещают информацию о своей деятельности. Коммерческие фирмы
размещают на своих сайтах рекламу товаров или услуг. Любой пользователь
Интернета может создать свой тематический сайт.
Вольф Анне было
задано индивидуальное задание, заключающееся в разработки Web-сайта,
содержащего тестирование по теме «Основы языка гипертекстовой разметки HTML».
А теперь вам
предлагается выполнить следующее задание. Необходимо Исправьте ошибки,
допущенные в программном коде:
<HTML>
<HEAD
<TITLE> Информатика <
TITLE>
</HEAD>
<BODY>
<FONT
COLOR="blue">
<H1 ALING="center">
Файлы и файловая
система
</H8>
</FOND>
<HR>;
<P
ALIGN="left"> Файл - это определенное количество информации
(программа или данные), имеющее имя и хранящееся в долговременной памяти.
</P>
<P
ALIGN="right"> Файловая система - это часть операционной
системы, назначение которой состоит в том, чтобы обеспечить пользователю
удобный интерфейс при работе с данными, хранящимися на диске, и обеспечить
совместное использование файлов несколькими пользователями и процессами. <>
<img src="рисунок.png"
ALIGN="right">
<A
rel="nofollow ugc" target="_blank" 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.
Физкультминутка.
Зарядка для глаз:
ребята встаньте, пожалуйста, и выполните упражнения
1. Упражнение
выполняется только глазами. Посмотрите вверх, влево, вниз, вправо. Повторить
еще 2 раза
2. Зажмурили
сильно глаза, окрыли, удивились! Повторить еще 2 раза
3. Упражнение
«ракушка»: помассировали ушки, немного потянули и прижали и отжали
4. Ленивая
восьмерка: вытянули левую руку перед собой и смотрим на большой палец. Начинаем
движение в левый верхний угол. Рисуем рукой ленивую восьмерку – знак
бесконечности, а за движением руки смотрим глазами до ощущения «хватит».
Повторить аналогично правой рукой. Продолжить двумя руками.
5. Посадили
на нос воображаемую бабочку и начинаем рисовать глазами туже восьмерку влево
вверх
V.
Домашнее задание
1.
Выучить параграф 3.7.5.
2.
Найти информацию о природных зонах России: тайга, степь и лесостепь.
VI.
Практическая часть.
Практическая
работа по теме
«Создание
связанных Web-страниц
средствами языка HTML»
Цель работы:
научиться создавать Web-сайты с
использованием языка разметки текста HTML
в простейшем текстовом редакторе Блокнот.
Ход работы:
1. Откройте
текстовый редактор Блокнот.
2. Создайте
Web-страницу
«Арктика», разместив на ней текст из файла Тексты для сайта
(Рабочий стол\Практическая работа\Тексты для сайта.doc).
Для этого в Блокноте введите следующий программный код:
<HTML>
<HEAD>
<TITLE>
Арктика
</TITLE>
</HEAD>
<BODY
background="арктика.jpg"
text="#0000AA" topmargin="60" Leftmargin="60"
rightmargin="80">
<H1
align=center> <FONT color="#00008B" size=+10><U> Арктика
</U></FONT></h1>
<FONT
size=5><B><P ALIGN=justify>Пространства арктических пустынь
покрыты льдом, щебнем и обломками камней. Землю здесь сковывает многолетняя
мерзлота.
<P
ALIGN=justify>Среди полярных льдов и ледников встречаются своеобразные
оазисы растительности — на небольших изолированных участках растут накипные мхи
и лишайники, а также осоки и некоторые злаки.
<BR>
В условиях арктической пустыни встречаются и
некоторые
виды цветковых растений: полярный мак, лисохвост, лютик, камнеломка и др.
<P
ALIGN=justify>Из животных здесь обитают лемминг, песец и белый медведь. На
скалистых берегах летом гнездятся морские птицы, образуя «птичьи базары».
</B>
</P>
</FONT>
</BODY>
</HTML>
3. Сохраните
результат работы под именем Арктика.htm
в папке Практическая работа.
4. Откроем
начальную страницу сайта (файл Природа.htm).
Далее необходимо установить ссылку из основного файла Природа.htm на вновь
созданную страницу с помощью тэга A с атрибутом HREF, который мы
сегодня рассмотрели. Для страницы «Арктика» это выглядит так:
<FONT
size=7 color="#0000FF">
<A
rel="nofollow ugc" target="_blank" href="арктика.htm"
style="color:#0000FF"> <B>Арктика<BR></B></A></FONT>
5. Сохраните
изменения в файле Природа.htm
выполнив команду [Файл-Сохранить].
6. Посмотрите
получившуюся Web-страницу в браузере.
7. Создайте
Web-страницу
«Тундра» аналогично Web-страницу
«Арктика», выполнив пункты № 2 – 5.
VII.
Итог урока.
- Что
нового узнали на уроке?
Рефлексия.
Выставление
оценок.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.