Разработка 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. На прошлых уроках вы уже создавали свои странички, применяя различные стили форматирования текста и добавляя на них графические объекты. Давайте с вами вспомним основные понятия, пройденные нами ранее.

1. Что такое Web-сайт? (Web-сайт - группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образующих структуру)

2. С помощью какого языка создаются Web-страницы? (Языка Hyper Text Markup Language - HTML)

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

4. Как называются управляющие команды, заключенные в угловые скобки, задающие вид web-страницы? (Теги)

5. Какие виды тегов вам известны? (Парные и одиночные)

На предыдущих уроках мы говорили, что во Всемирной паутине Web-сайты обычно содержат материалы по определенной теме или проблеме. Государственные структуры и организации обычно создают официальные web-сайты, на которых размещают информацию о своей деятельности. Коммерческие фирмы размещают на своих сайтах рекламу товаров или услуг. Любой пользователь Интернета может создать свой тематический сайт.

Вольф Анне было задано индивидуальное задание, заключающееся в разработки Web-сайта, содержащего тестирование по теме «Основы языка гипертекстовой разметки HTML».

А теперь вам предлагается выполнить следующее задание. Необходимо Исправьте ошибки, допущенные в программном коде:

Информатика < TITLE>NG="center">

Файлы и файловая система

D>

;

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

рисунок.png" ALIGN="right">

Программы

BODY>

HTML

Посмотрите внимательно на программный код и скажите, все ли использованные теги вам известны?

Что еще нужно научиться делать, чтобы создать полноценный сайт? (Научиться делать гиперссылки)

III. Теоретическая часть.

Вот мы и подошли к теме урока «Создание гиперссылок на Web-страницах»

Гиперссылка - это ссылка, расположенная в тексте страницы сайта и дающая возможность перехода на другую страницу или ресурс.

На Web- страницу гиперссылки размещаются с помощью тега:

<A href="адрес перехода">текст-ссылкаA>

Если Web- страница размещена на локальном компьютере в одной папке вместе с Web- страницей, то вместо адреса указывается имя файла.

href="FileName.htm">текст-ссылка

Если в Интернете, то прописываем полностью Интернет-адрес.

<A href="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). Для этого в Блокноте введите следующий программный код:

Арктика

арктика.jpg" text="#0000AA" top; ">

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

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

В условиях арктической пустыни встречаются и

некоторые виды цветковых растений: полярный мак, лисохвост, лютик, камнеломка и др.

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

3. Сохраните результат работы под именем Арктика.htm в папке Практическая работа.

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

арктика.htm" style="color:#0000FF"> Арктика

5. Сохраните изменения в файле Природа.htm выполнив команду [Файл-Сохранить].

6. Посмотрите получившуюся Web-страницу в браузере.

7. Создайте Web-страницу «Тундра» аналогично Web-страницу «Арктика», выполнив пункты № 2 - 5.

VII. Итог урока.

- Что нового узнали на уроке?

Рефлексия.

Выставление оценок.