Тема урока: Практическая работа №5. Создание простейшей Web-страницы.
Тип урока: комбинированный урок.
Цели урока:
образовательные:
- формировать знания учащихся по теме «Основы языка HTML»; формировать умение применять полученные теоретические знания по теме «HTML» при работе по созданию сайта.
развивающие:
- развивать познавательные и исследовательские способности учащихся; развивать логическое мышление.
воспитательные:
- воспитывать внимательность, аккуратность, прилежность и дисциплину.
Форма проведения урока: урок-лекция, урок-практикум.
Методы, используемые на уроке: лекция, беседа, демонстрация.
Оборудование:
- телевизор доска карточки презентация
План проведения
Организационный момент – 1 мин. Актуализация знаний – 4 мин. Этап формирование новых знаний – 17 мин. Первичное осмысление и применение изученного – 15 мин. Подведение итога урока – 2 мин. Информация о домашнем задании-1 мин.Ход урока.
| Организационный момент -Здравствуйте, ребята! Садитесь. Кто сегодня отсутствует? (Учитель отмечает отсутствующих.) Актуализация знаний -Для того, чтобы узнать тему урока, предлагаю отгадать кроссворд, который нам и подскажет ее.(слайд2)
Вопросы: Параллельные беседы в Интернете или целый мир виртуального общения(chat).(слайд3) Всемирная система компьютерных сетей или глобальная сеть…(Internet).(слайд 4) Один из российских поисковых указателей в сети Интернет(rambler).(слайд 5) Электронная почта(e-mail).(слайд 6)Выделены цветом буквы по горизонтали H T M L (слайд 7) - Какое слово мы получили после того как отгадали кроссворд? -Хорошо. Сегодня мы с вами познакомимся с языком гипертекстовой разметки документов HTML.(слайд 8) Открываем тетради и записываем число и тему урока «Основы языка HTML». -Сегодня мы познакомимся с понятиями «гипертекст», «HTML»,узнаем особенности языка HTML и будем пробовать создавать свои сайты. -У кого-нибудь есть вопросы по предстоящей работе? Основной этап урока -Как вы понимаете словосочетание «Всемирная паутина»? -Хорошо.(слайд 9)World Wide Web или всемирная паутина - самая массовая сегодня информационная служба Интернета., еще она считается гипертекстовой системой навигации в Интернете. Давайте запишем это определение -Прочитайте определение еще раз и скажите: все ли слова из него вам знакомы? -Термин гипертекст придумал Нельсон в 1965году.(слайд 10) Классическое определение гипертекста, которое дал Нельсон в 1987году,- это «форма письма, которое ветвится или осуществляется по запросу». Иначе, это «нелинейное письмо», которое «больше чем» текст(hypertext).(слайд11) -Гипертекст - система взаимосвязанных текстов. Запишем определение: гипертекст - это текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и прочее. -(слайд12)Обратите внимание на текст, который представлен перед вами: "История валентинок" В наше время "валентинкой" называют открытку возлюбленному в день Святого Валентина. Появлению "валентинок" предшествовали слова и песни, которые возлюбленные говорили или пели друг другу еще в средние века. Бумажные поздравления разрисовывались от руки или через трафарет цветными чернилами, их ажурно вырезали в виде кружева; нанимались специальные люди, владевшие искусством графики, для того, чтобы красиво написать текст любовного послания. -Как вы думаете какие слова разметки в данном тексте будут ссылаться на другие документы? -Верно, если мы обратимся к слову разметки «валентинкой»(слайд 13), мы перейдем к документу, который будет содержать изображения современных открыток-валентинок, причем этот документ может находиться на другом компьютере.(слайд 14) Если мы обратимся к слову разметки «красиво написать текст любовного послания»(слайд 15), мы перейдем к документу, который будет содержать информацию о том как правильно писать валентинку, причем этот документ тоже может находиться на другом компьютере. -Как вы думаете, в чем отличия гипертекста от обычного текста? -Хорошо. Основная идея гипертекстовых систем заключается в концепции автоматически поддерживаемых связей как внутри одного документа, так и между различными документами. Поддержка таких связей позволяет организовывать нелинейные текстовые структуры. Преимущества нелинейных документов очевидно – в отличие от линейного документа, например, статьи в журнале(пример статьи из газеты - сравнение газеты с гипертекстом), которая является одноуровневой, неизменяемой и имеющей ограниченный набор ссылок, гипертекстовый документ представляет собой гибкую структуру. Читатель по желанию может либо ограничиться поверхностной информацией одного уровня, либо при необходимости получать более полную информацию других уровней, не тратя времени на поиск нужных документов по ссылкам.(пояснение по примерам). -У кого-нибудь есть вопросы? -Хорошо. В форме чего происходит публикация информации во «Всемирной паутине»? -Из чего состоит Web-сайт? -Запишем: (слайд 16)Web-страницы — это обычные текстовые файлы, в которых с помощью специальных команд задается оформление страницы и расположение материала. Все рисунки, анимация и т. п. должны быть записаны в виде отдельных файлов. Web-страницы можно разделить на две группы(слайд 17)
Мы будем рассматривать только статические Web-страницы, которые создаются на языке HTML (Hypertext Markup Language — язык разметки гипертекста). (слайд 18)HTML (HyperText Markup Language) –это специальный язык форматирования текстовых документов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли - Что такое HTML страница? Давайте запишем: (слайд 19) HTML страница - это обычный текстовый файл имеющий расширение. html (Показывает как выглядит страница сайта в IE и как выглядит этаже страница в редакторе) Для создания HTML страницы не требуется никаких специальных программ. Подойдет любой текстовый редактор умеющий сохранять файлы в обычном текстовом формате. Таким редактором, например, являются Notepad (Блокнот), входящий в стандартные средства Windows. Итак, давайте рассмотрим основные элементы из которых состоит любая HTML страница. Для начала необходимо дать определение тега. (слайд 20)HTML Тег: Это специальное указание того как нужно отображать элемент (текст, картинка и т. п.) на странице. Можно рассматривать тег как команду содержащую название и параметры. Тег выглядит следующим образом: (слайд 21) Тэгов много, и они разные. Существуют (слайд 22)обязательные и необязательные тэги, парные и одиночные(пояснения на примере) . Запишем замечание: если есть открывающий тэг, то должен быть и закрывающий. Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы сайта.(рисунок и текст на распечатках) (слайд 23) Рассмотрим структуру HTML(раздает карточки с теоретическим материалом)
|
Карточки с теоретическим материалом для учащихся:
Структура документа HTML
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
