Автор конспекта:
Автор(ы): — Коркачёва Дина Александровна

Место работы, должность: — МОУ ОСОШ № 1 г. Апатиты

Регион: — Мурманская область

Характеристика конспекта:
Уровни образования: — среднее (полное) общее образование

Класс(ы): — 11 класс

Предмет(ы): — Информатика и ИКТ

Целевая аудитория: — Учитель (преподаватель)

Тип ресурса: — конспект урока (занятия)

Краткое описание ресурса: — сценарий занятия в рамках целевой программы "Технология создания сайтов"

Муниципальное общеобразовательное учреждение

открытая (сменная) общеобразовательная школа № 1 г. Апатиты

СЦЕНАРИЙ ЗАНЯТИЯ

«HTML-проектирование: Достопримечательности Мурманской области»

в рамках реализации целевой программы

«Технология создания сайтов»

Автор:

Коркачёва Дина Александровна,

учитель информатики высшей категории

Место темы в целевой программе

На изучение Темы № 1 «Моя web-страничка» отводится 6 часов.

Учащиеся должны знать: общие вопросы сайтостроения, современные подходы в технологиях создания сайтов и web-дизайне, понятия «стиль» и «формат», структуру web-страницы, цветовую схему web-страницы.

Учащиеся должны уметь: представить концепцию сайта и поэтапно ее реализовать; создавать простейший сайт вручную.

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

Тема занятия

HTML-проектирование: «Достопримечательности Мурманской области»

Цель занятия

Формирование прикладных умений в создании web-сайта

Задачи занятия

Обучающая

ü познакомить учащихся с понятием проекта, проектной деятельности, её этапами, видами;

ü научить создавать мультимедийный Интернет-проект, закрепить навыки создания HTML-документов.

Воспитательная

ü стимулировать познавательный интерес учащихся, развивать уверенность в собственных силах;

ü формировать культуру и положительную мотивацию труда;

Развивающая

ü развивать приёмы умственной деятельности, памяти, творческой активности.

Основные понятия

ü HTML-документ (страничка) — документ, написанный на языке разметки гипертекста (HTML). Заключается между флагами и .

ü Гипертекст — принцип организации информационных массивов, при котором отдельные информационные элементы связаны между собой ассоциативными отношениями, обеспечивающими быстрый поиск необходимой информации и/или просмотр взаимосвязанных данных.

ü Тег — элемент html, знак/команда языка разметки гипертекста, представляющий собой текст, который заключается в скобки и является одним из активных элементов, изменяющих представление информации, которая следует за ним. Тег определяет границы элемента в тексте, а также имеет некоторое количество атрибутов.

ü Web-сайт, Web-сервер — цепочка логически связанных документов, написанных на языке HTML.

ü заголовок – заключается в контейнер и содержит название документа и справочную информацию о странице, которая используется для её правильного отображения.

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

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

ü персональные компьютеры;

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

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

ü браузер Internet Explorer;

ü компьютерная презентация в среде MS Power Point;

ü безопасная таблица цветов;

Форма организации занятия

Практикум

Планируемые результаты

ü знают форму представления и управления информацией в сети Интернет;

ü владеют браузером Internet Explorer;

ü умеют проектировать на языке HTML на уровне не менее 3-х соответствующих элементов сайта;

ü знают и умеют применять при создании web-страницы основные принципы web-дизайна.

Хронометраж занятия

№ п/п

Вид деятельности

Время, мин

1

Организационный момент

2

2

Актуализация опорных знаний

4

3

Постановка задачи

2

4

Практикум

20

5

Подведение итогов

2

Ход занятия

1. Организационный момент

2. Актуализация опорных знаний

Теоретические основы темы

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

Значения тегов разметки документа

Теги — специальные команды для расположения на экране текста, графики, видео и аудиофрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.

Основные теги разметки

и . Между этими тегами располагается информация о документе.
и . В этих тегах заключается название странички, которое будет выведено в рамке окна программы просмотра.
и . «Тело» документа (текст, графика и т.д.) располагается между этими двумя тегами.

Параметры тега :
BGCOLOR — цвет фона ()
BACKGROUND – «обои» или бэкграунд
TEXT — цвет текста
LINK — цвет гипертекстовой связи (ссылки)
VLINK — цвет ссылки, уже посещенной в прошлом
ALINK — цвет активной ссылки

Тег для вставки в текст графической информации

На Web-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. На Web-страницах могут размещаться графические файлы трёх форматов – GIF, JPG и PNG. Если рисунок сохранён в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office.

Для вставки изображения используется тег с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:

Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла:

Если файл находится на удалённом сервере в Интернете, то должен быть указан URL-адрес этого файла:

Поясняющий текст выводится с помощью атрибута 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://www.intuit.ru – П.Б. Храмцов, С.А. Брик, А.М. Русак, А.И. Сурин.

Сайт Интернет-университета информационных технологий. Курс лекций посвящён основам веб-технологий.

http://postroika.ru – Аленова Наталья

«Учебник (руководство) по HTML. Я писала это руководство в расчёте на людей начинающих, вспоминая, как когда-то начинала сама. Это не сухое изложение всего подряд, это попытка поработать на ассоциациях, сделать всё более легко запоминающимся. Мне кое-где не удалось избежать нудных моментов, но я старалась и буду стараться, дополняя и исправляя всё написанное время от времени».

http://html.manual.ru – Городулин Владимир

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

http://winchanger.narod.ru – А. Климов

Краткий справочник по тегам HTML-языка.

Файлы: HTML-проектирование.pptx
Размер файла: 437686 байт.