На изучение Темы № 1 «Моя web-страничка» отводится 6 часов.
Учащиеся должны знать: общие вопросы сайтостроения, современные подходы в технологиях создания сайтов и web-дизайне, понятия «стиль» и «формат», структуру web-страницы, цветовую схему web-страницы.
Учащиеся должны уметь: представить концепцию сайта и поэтапно ее реализовать; создавать простейший сайт вручную.
Рассматривать вопросы дизайна необходимо наряду с выработкой технических навыков по созданию web-страниц. Сегодня web-ресурсы являются необходимым источником информации, а, кроме того, для многих учащихся могут стать средством творческой самореализации.
Формирование прикладных умений в создании web-сайта
Задачи занятия
Обучающая
ü познакомить учащихся с понятием проекта, проектной деятельности, её этапами, видами;
ü научить создавать мультимедийный Интернет-проект, закрепить навыки создания HTML-документов.
Воспитательная
ü стимулировать познавательный интерес учащихся, развивать уверенность в собственных силах;
ü формировать культуру и положительную мотивацию труда;
Развивающая
ü развивать приёмы умственной деятельности, памяти, творческой активности.
Основные понятия
üHTML-документ(страничка) - документ, написанный на языке разметки гипертекста (HTML). Заключается между флагами <HTML> и </HTML>.
üГипертекст - принцип организации информационных массивов, при котором отдельные информационные элементы связаны между собой ассоциативными отношениями, обеспечивающими быстрый поиск необходимой информации и/или просмотр взаимосвязанных данных.
üТег - элемент html, знак/команда языка разметки гипертекста, представляющий собой текст, который заключается в скобки <> и является одним из активных элементов, изменяющих представление информации, которая следует за ним. Тег определяет границы элемента в тексте, а также имеет некоторое количество атрибутов.
üWeb-сайт, Web-сервер- цепочка логически связанных документов, написанных на языке HTML.
üзаголовок – заключается в контейнер <HEAD></HEAD> и содержит название документа и справочную информацию о странице, которая используется для её правильного отображения.
üтело – основное содержание страницы помещается в контейнер <BODY></BODY> и может включать текст, таблицы, бегущие строки, ссылки на графические изрбражения и звуковые файлы и так далее.
Оборудование
ü персональные компьютеры;
ü мультимедийный проектор;
ü текстовый редактор Блокнот;
ü браузер Internet Explorer;
ü компьютерная презентация в среде MSPowerPoint;
ü безопасная таблица цветов;
Форма организации занятия
Практикум
Планируемые результаты
ü знают форму представления и управления информацией в сети Интернет;
ü владеют браузером Internet Explorer;
ü умеют проектировать на языке HTML на уровне не менее 3-х соответствующих элементов сайта;
ü знают и умеют применять при создании web-страницы основные принципы web-дизайна.
Хронометраж занятия
№ п/п
Вид деятельности
Время, мин
1
Организационный момент
2
2
Актуализация опорных знаний
4
3
Постановка задачи
2
4
Практикум
20
5
Подведение итогов
2
Ход занятия
1.Организационный момент
2.Актуализация опорных знаний
Теоретические основы темы
Вид Web-страницы задаётся тегами, которые заключаются в угловые скобки. Теги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тегов называется контейнером). Закрывающий тег содержит прямой слэш (/) перед обозначением. Теги могут записываться как прописными, так и строчными буквами.
Значения тегов разметки документа
Теги - специальные команды для расположения на экране текста, графики, видео и аудиофрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.
Основные теги разметки
<HEAD>и </HEAD>. Между этими тегами располагается информация о документе. <TITLE> и </TITLE>. В этих тегах заключается название странички, которое будет выведено в рамке окна программы просмотра. <BODY> и </BODY>. «Тело» документа (текст, графика и т.д.) располагается между этими двумя тегами.
Параметры тега <BODY>: BGCOLOR - цвет фона (<BODY BGCOLOR ="#FFFFFF">)
BACKGROUND – «обои» или бэкграунд
TEXT - цвет текста
LINK - цвет гипертекстовой связи (ссылки)
VLINK - цвет ссылки, уже посещенной в прошлом
ALINK - цвет активной ссылки
Тег для вставки в текст графической информации
НаWeb-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. НаWeb-страницах могут размещаться графические файлы трёх форматов –GIF,JPGиPNG. Если рисунок сохранён в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих целей можно использовать редакторPhotoEditor, который входит в пакетMicrosoftOffice.
Для вставки изображения используется тег <IMG> с атрибутомSRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файлWeb-страницы, то в качестве значения атрибутаSRCдостаточно указать только имя файла:
<IMG SRC=”file.gif”>
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла:
< IMG SRC= “C:\Мои документы \file.gif”>
Если файл находится на удалённом сервере в Интернете, то должен быть указанURL-адрес этого файла:
< IMG SRC= “http://www.server.ru/file.gif”>
Поясняющий текст выводится с помощью атрибутаALT, значением которого является текст, поясняющий, что должен был увидеть пользователь на рисунке:
<IMG SRC=”file.gif”ALT=”компьютер”>
Параметры графического изображения
WIDHT - ширина картинки в пикселях
HEIGHT- высота картинки в пикселях
ALIGN - выравнивание (ALIGN=LEFT - выравнивание по левому полю, ALIGN=RIGHT - по правому полю, ALIGN=TOP - по верхней границе, ALIGN=BOTTOM - по нижней границе, ALIGN=MIDDLE или CENTER - по центру)
HSPACE - горизонтальный отступ от графического изображения
VSPACE - вертикальный отступ
ALT - альтернативный текст, служит для обозначения изображения
3.Постановка задачи
Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерныхWeb-страниц. Сегодня на занятии мы начнём создать Web-сайт «Достопримечательности Мурманской области». Каждый из вас должен спроектировать и реализовать на языке HTML собственную Web-страничку о какой-либо достопримечательности. Затем мы соединим их в одно целое.
4.Практикум
Каждому ученику предоставляется папка, содержащая необходимую информацию о какой-либо достопримечательности Мурманской области (index.html, file.jpg, file.txt):
ü Памятник Алёше
ü Кандалакшский заповедник
ü Музей гномов
ü Музей флота Североморска
ü Петроглифы Канозера
ü Благовещенский собор
ü Корельский погост
ü Музей истории Кольских саамов
ü Мурманский океанариум
ü Полярный ботанический сад
ü Минералогический музей
ü Музей истории полярных олимпиад
ü Памятник Кириллу и Мефодию
Затем каждый ученик создаёт свою Web-страничку и отправляет её по локальной сети на сервер. Все странички оформляются в Web-сайт.
5.Подведение итогов
Публичная защита своей Web-странички. Обсуждение дизайна.
6.Информационные ресурсы
http://htmlbook.ru – Мержевич Влад
Краткий, но информационно насыщенный учебник по технологии создания сайтов, HTML, CSS, дизайне, графике и др. Выполнен в стиле расширенного справочника с примерами. Написан доступным языком. Подходит для углублённых занятий как под руководством учителя, так и индивидуально.
Сайт Интернет-университета информационных технологий. Курс лекций посвящён основам веб-технологий.
http://postroika.ru – Аленова Наталья
«Учебник (руководство) по HTML. Я писала это руководство в расчёте на людей начинающих, вспоминая, как когда-то начинала сама. Это не сухое изложение всего подряд, это попытка поработать на ассоциациях, сделать всё более легко запоминающимся. Мне кое-где не удалось избежать нудных моментов, но я старалась и буду стараться, дополняя и исправляя всё написанное время от времени».
http://html.manual.ru – Городулин Владимир
«HTML-справочник. Это не перевод скучной спецификации и не попытка написать учебник. Задача справочника – коротко и ясно описать действие всех элементов языка HTML, которые вы можете без опаски использовать при создании Интернет-страниц, не боясь, что какая-то версия какого-либо браузера сделает вам неприятный сюрприз».
