Ученики на Учителя.com


Разработка открытого урока "Знакомство с языком HTML. Основные понятия" 8 класс

Разработка открытого урока
класс: 8
Раздел: «Web - программирование и дизайн»
Тема: «Знакомство с языком HTML. Основные понятия.»
Форма проведения – Урок-Презентация
Тип урока – урок с применением информационных технологий
Вид урока – комбинированный
Межпредметные связи:
С дисциплинами «Информатика», «Английский язык»
(профессиональный), Основы алгоритмизации и
программирования, Компьютерные сети»
Оборудование и средства обучения: демонстрационный экран,
компьютер с лицензионным программным обеспечением. На
компьютере - установленная ОС Windows 9x или выше и пакет
Microsoft Office, доска.
Подготовка: презентация, созданная в POWER POINT с
основным теоретическим материалом и тестовыми вопросами
Цель урока:
1. Развитие практико-ориентированных ключевых
профессиональных компетенций специалистов
специальности 2203 «Программное обеспечение
вычислительной техники и автоматизированных систем»
таких, как:
a) информационная культура;
b) ответственность за выполняемую работу;
c) способность самостоятельно и эффективно решать
проблемы в области профессиональной
деятельности;
d) готовность применения информационных технологий
в дальнейшей профессиональной деятельности;
e) понимание сущности и социальной значимости
своей будущей профессии.
2. Формирование представления о языке гипертекстовой
разметки HTML
3. Познакомить учащихся с терминологией HTML, основными
конструкциями HTML, структурой HTML – документа и
основными элементами языка HTML.
4. Формирование умений и навыков, которые носят
общенаучный и общеинтеллектуальный характер
5. Вызвать интерес к изучению данной дисциплины
Задачи урока:
1. Воспитательная – развитие познавательного интереса,
воспитание информационной культуры
2. Развивающая - развитие внимания и логического
мышления
3. Учебная – изучить и закрепить основные понятия,
конструкции, термины и элементы языка HTML.
План урока
1. Организационный момент.
2. Объяснение целей и задач урока.
3. Комбинированный опрос.
4. Изложение нового материала. Составление краткого
конспекта лекции.
• История НТМL
• Терминология
• Основы форматирования HTML-документа.
• Изображения в HTML-документах.
• Организация гиперссылки.
5. Тестовый контроль. Взаимопроверка.
6. Подведение итогов урока.
Ход урока
1. Организационный момент
2. Объяснение целей и задач урока. Мотивационное начало
– 3 мин.
Добрый день!
На сегодняшнем занятии наша с вами задача познакомимся с
языком, который используют для написания Web – сайтов. Вы
ознакомитесь с краткой историей развития этого языка,
терминологией, основными конструкциями этого языка, его
структурой и основными элементами. На следующем уроке вам
придется на практике закреплять полученные знания,
поэтому просьба слушать внимательно и делать записи в
тетрадях.
3. Повторение материала предыдущего занятия.
Комбинированный опрос.
На прошлом занятии мы с вами рассматривали основные
принципы и этапы создания сайтов, а так же моменты,
которые нужно учитывать при оформлении сайта.
К доске пойдет один из вас и зарисует на доске этапы
разработки сайта. А пока он работает у доски, остальные
ответят на ряд вопросов.
Ответ: несколько страниц в одном стиле
по одной тематике, соединенные
гиперссылками.
Ответ: Одинаковое шрифтовое
оформление, фон, заголовки и другие
элементы для создания эффекта
неделимости сайта на страницы.
Ответ: Плоская полносвязная,
Линейная последовательная,
Древовидная (иерархическая),
комбинированная.
Ответ: Отвечает студент у доски, из
аудитории его дополняют и
поправляют.
Ответ: При помощи цветового
оформления и сочетания цветов.
Что такое Web –
Сайт?
Что значит «в
одном стиле»?
Какие структуры web
сайтов вы можете
назвать?
Какие работы
выполняются на каждом
из этапов?
Как можно
воздействовать на
эмоции человека с
помощью сайта?
Ответ: Программы – генераторы кода и
web – конструкторы (Front page?
Macromedia Dream Weaver, блокнот,
Word и т. д.)
3. Изложение нового материала
Наше занятие будет организована по следующему плану:
1.История НТМL
2.Терминология
3.Основы форматирования HTML-документа.
4.Изображения в HTML-документах.
5.Организация гиперссылки.
История HTML
HTML - язык разметки гипертекста
Гипертекст - специальным образом организованный
текст, позволяющий пользователю осуществлять по
указателям мгновенный переход к связанным ресурсам.
1969 - Чарльз Гольдфарб создает прототип языка для
разметки технической документации GML
1986 - определен стандарт SGML
(Standard Generalized Markup Language)
1989 - Тим Бернерс-Ли разработал систему разметки
гипертекстовых документов HTML
1993 - разработан стандарт HTML 1.2
1995 - разработан стандарт HTML 2.0
1997 - разработаны стандарты HTML 3.2 и HTML 4.0
Терминология
Элемент- это конструкция языка HTML предписывающая
способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно
матрешкам
Тег- единица разметки, стартовый или конечный маркер
элемента.
Запись стартового тега в общем виде: <тег>
Запись конечного тега в общем виде: </тег>
Теги определяют границы действия элементов
Атрибут - параметр или свойство элемента.
Запись атрибута в общем виде:
имяАтрибута="значение"
Все атрибуты записываются внутри стартового тега.
С помощью каких
инструментов
можно создавать
сайты?
Запись стартового тега с атрибутом в общем виде:
<тег имяАтрибута="значение">
Атрибуты внутри стартового тега разделяются
пробелами.
Наиболее распространенные атрибуты:
1.align - выравнивание
2.width - ширина в пикселах или процентах от ширины
окна браузера
3.height - высота в пикселах или процентах от ширины
окна браузера
4.color - Указывает цвет в формате RGB или
стандартный цвет.
HTML-документ - текстовый документ содержимое
которого размечено при помощи элементов языка HTML.
Такие документы обычно имеют расширение HTM, HTML.
HTML-код - - совокупность всех элементов языка HTML
использованных для разметки документа.
Гиперссылка- объект интерпретируемого документа
служащий указателем на другой элемент, документ или файл.
URL – (Universal Resource Locator) универсальный
указатель ресурса
Запись URL в общем виде:
протокол://имяСервера.имяДомена/путь
Например: http://mu-mu.ru/gerasim.htm
3.Структура гипертекстового документа.
<HTML>
<Head>
<TITLE>Заголовок</TITLE>
</head>
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
Последний абзац документа
</BODY>
</HTML>
4.Изображения в HTML-документах.
Вставка картинки
Запись элемента в общем виде: <IMG SRC=“ИмяФайла”>
Пример: <IMG SRC=“leo1.gif”>
Использование атрибута align:
5.Организация гиперссылки.
Запись элемента в общем виде:
<А HREF=“Адрес”>Текст ссылки</A>
Пример:
<А HREF=“http://www.aport.ru”>Поисковая система Аппорт</A>
Внешний вид документа с сылкой:
Тестовый контроль –
Для проверки того, как вы усвоили материал предлагаю
вам тест, в котором вам нужно будет отвечать на вопросы,
выбирая правильный ответ. У каждого из вас есть листочек,
на котором вам надо написать свою фамилию. Вам нужно
Текст располагается справа
Текст располагается слева
по нижней границе строки
по верхней границе строки
Поисковая система Аппорт
будет написать номер вопроса и рядом с ним поставить
номер ответа. Вам дается на эти вопросы 3 минуты.
Вопросов всего будет 5.
1. Универсальный указатель ресурса
a) HTML
b) Гиперссылка
c) Атрибут
d) URL
2. Конструкция языка HTML предписывающая способ
интерпретации помещенных внутри нее данных
a) Гипертекст
b) Элемент
c) Тег
d) URL
3. Атрибут color:
a) Указывает цвет в формате RGB или стандартный
цвет
b) Указывает ширину в пикселах или процентах от
ширины окна браузера
c) Указывает ширину в пикселах или процентах от
ширины окна браузера
d) Указывает выравнивание объекта относительно
другого
4. Единица разметки, стартовый или конечный маркер
элемента
a) Элемент
b) Тег
c) Гиперссылка
d) Width
5. Тег, указывающий, на гиперссылку
a) <Head>
b) <Body>
c) <A>
d) <Title>
После выполнения теста учащиеся меняются листочками и
оценивают работы. В конце сдают преподавателю.
Подведение итогов.
Итак, сегодня на уроке мы рассмотрели основные понятия
языка и его терминологию, историю развития языка, узнали
основные теги и способ организации гиперссылки.
Скачать материал

Информатика - еще материалы к урокам: