Конспект урока на тему Создание простейшей Web-страницы

Тема урока: Практическая работа №5. Создание простейшей Web-страницы.

Тип урока: комбинированный урок.

Цели урока:

образовательные:

• формировать знания учащихся по теме «Основы языка HTML»;

• формировать умение применять полученные теоретические знания по теме «HTML» при работе по созданию сайта.

развивающие:

• развивать познавательные и исследовательские способности учащихся;

• развивать логическое мышление.

воспитательные:

• воспитывать внимательность, аккуратность, прилежность и дисциплину.

Форма проведения урока: урок-лекция, урок-практикум.

Методы, используемые на уроке: лекция, беседа, демонстрация.

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

• телевизор

• доска

• карточки

• презентация

План проведения

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

2. Актуализация знаний - 4 мин.

3. Этап формирование новых знаний - 17 мин.

4. Первичное осмысление и применение изученного - 15 мин.

5. Подведение итога урока - 2 мин.

6. Информация о домашнем задании-1 мин.

Ход урока.

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

-Здравствуйте, ребята! Садитесь. Кто сегодня отсутствует?

(Учитель отмечает отсутствующих.)

2. Актуализация знаний

-Для того, чтобы узнать тему урока, предлагаю отгадать кроссворд, который нам и подскажет ее.(слайд2)

Вопросы:

1. Параллельные беседы в Интернете или целый мир виртуального общения(chat).(слайд3)

2. Всемирная система компьютерных сетей или глобальная сеть…(Internet).(слайд 4)

3. Один из российских поисковых указателей в сети Интернет(rambler).(слайд 5)

4. Электронная почта(e-mail).(слайд 6)

Выделены цветом буквы по горизонтали H T M L (слайд 7)

- Какое слово мы получили после того как отгадали кроссворд?

-Хорошо. Сегодня мы с вами познакомимся с языком гипертекстовой разметки документов HTML.(слайд 8)

Открываем тетради и записываем число и тему урока «Основы языка HTML».

-Сегодня мы познакомимся с понятиями «гипертекст», «HTML»,узнаем особенности языка HTML и будем пробовать создавать свои сайты.

-У кого-нибудь есть вопросы по предстоящей работе?

3. Основной этап урока

-Как вы понимаете словосочетание «Всемирная паутина»?

-Хорошо.(слайд 9)World Wide Web или всемирная паутина- самая массовая сегодня информационная служба Интернета., еще она считается гипертекстовой системой навигации в Интернете.

Давайте запишем это определение

-Прочитайте определение еще раз и скажите: все ли слова из него вам знакомы?

-Термин гипертекст придумал Нельсон в 1965году.(слайд 10)

Классическое определение гипертекста, которое дал Нельсон в 1987году,- это «форма письма, которое ветвится или осуществляется по запросу». Иначе, это «нелинейное письмо», которое «больше чем» текст(hypertext).(слайд11)

-Гипертекст- система взаимосвязанных текстов.

Запишем определение: гипертекст- это текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и прочее.

-(слайд12)Обратите внимание на текст, который представлен перед вами: "История валентинок"

В наше время

"валентинкой"

называют открытку возлюбленному в день Святого Валентина. Появлению "валентинок" предшествовали слова и песни, которые возлюбленные говорили или пели друг другу еще в средние века.
Первые письменные "валентинки" появились уже 15 веке.

Бумажные поздравления разрисовывались от руки или через трафарет цветными чернилами, их ажурно вырезали в виде кружева; нанимались специальные люди, владевшие искусством графики, для того, чтобы красиво написать текст любовного послания.

-Как вы думаете какие слова разметки в данном тексте будут ссылаться на другие документы?

-Верно, если мы обратимся к слову разметки «валентинкой»(слайд 13), мы перейдем к документу, который будет содержать изображения современных открыток-валентинок, причем этот документ может находиться на другом компьютере.(слайд 14)

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

-Как вы думаете, в чем отличия гипертекста от обычного текста?

-Хорошо. Основная идея гипертекстовых систем заключается в концепции автоматически поддерживаемых связей как внутри одного документа, так и между различными документами. Поддержка таких связей позволяет организовывать нелинейные текстовые структуры. Преимущества нелинейных документов очевидно - в отличие от линейного документа, например, статьи в журнале(пример статьи из газеты - сравнение газеты с гипертекстом), которая является одноуровневой, неизменяемой и имеющей ограниченный набор ссылок, гипертекстовый документ представляет собой гибкую структуру. Читатель по желанию может либо ограничиться поверхностной информацией одного уровня, либо при необходимости получать более полную информацию других уровней, не тратя времени на поиск нужных документов по ссылкам.(пояснение по примерам).

-У кого-нибудь есть вопросы?

-Хорошо. В форме чего происходит публикация информации во «Всемирной паутине»?

-Из чего состоит Web-сайт?

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

Web-страницы можно разделить на две группы(слайд 17)

• статические (они чаще всего имеют расширения *.htm или *.html) - те страницы, которые записаны на диск в готовом виде и не меняются;

• динамические (с расширениями *.shtml, *.asp, *.php, *.pl) - полностью или частично создаются на сервере в момент запроса (например, выбирают нужную информацию из базы данных и передают ее по каналам Интернет в виде Web-страницы).

Мы будем рассматривать только статические 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(раздает карточки с теоретическим материалом)

Мой первый шаг


Здравствуйте, это моя первая страница.


Добро пожаловать! :)

-небо

Этот тэг должен открывать документ.

- земля

- голова документа
- тело документа

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

(слайд 24)Обратите внимание:
(под запись)
<тэг1><тэг2><тэг3> ... тэг3>тэг2>тэг1>

Только такая очередность закрывающих тэгов верна(подзапись как замечание) (слайд 25) тэг, который мы открыли первым - закрываем последним, второй - предпоследним и т.д.

Т.е. следующая очередность нежелательна и не верна, она может привести к ошибкам на вашей страничке:

(слайд 26)<тэг1><тэг2><тэг3> ... тэг3>тэг1>тэг2>

-Верна ли очередность тэгов в данном примере?
(слайд 28) red>Доброе утро! B>FONT>

-А как нужно расставить тэги, чтобы верна их последовательность?

-Давайте поговорим, как создавать Web-страницы.(слайд 29)

Создание Web-страницы можно разбить на несколько этапов.(этапы на распечатках)

1. С помощью любого текстового редактора создаем текстовый файл, содержащий команды языка HTML. Здесь можно использовать Блокнот. Обратите внимание, что файл должен быть сохранен в виде простого текстового документа (без оформления) и иметь расширение *.htm или *.html. Русские буквы должны быть набраны в кодировке Windows.

Все странички сайта сохраняются в одной специально созданной папке.

2. Открыть файл в браузере. Для этого можно использовать два способа

• Открыть браузер, выбрать пункт меню Файл-Открыть и найти файл на диске.

• Найти файл в Проводнике (или через Мой компьютер) и «открыть» его, щелкнув дважды по значку. При этом запускается браузер, установленный по умолчанию.

3.Чтобы внести изменения в страницу, можно выбрать команду Просмотр источника (или Просмотр в виде HTML) из меню Вид или контекстного меню, которое появляется при нажатии на правую кнопку мыши. При этом исходный файл откроется в Блокноте или WordPad-е (для браузера Opera). После изменения файл необходимо сохранить, перейти в окно браузера (с помощью панели задач) и обновить документ (нажав на F5 или кнопку обновления).

5.Первичное осмысление и применение изученного

-Теперь я вам предлагаю самим попробовать создать страничку сайта, используя тэги которые уже вам известны: создайте Web - страницу, задайте цвет фона и напишите приветствующие слова на ней.

У кого будут вопросы по созданию страницы подзывайте меня.

6. Подведение итога урока:

-Подведем итоги урока. С каким видом текста мы сегодня познакомились?

-В каком виде может быть представлен гипертекст: печатном, электронном или др.?

6. Домашнее задание.

1. Внимательно изучить данный материал.

2. Продумать и набросать приблизительный эскиз Вашей будущей Web-страницы.

У кого-нибудь есть вопросы по выполнению домашнего задания?

Спасибо за урок. До свидания!

Карточки с теоретическим материалом для учащихся:

Структура документа HTML

Мой первый шаг

Здравствуйте, это моя первая страница.

Добро пожаловать! :)

Этапы создания Web-страницы:

1. Создаем на диске отдельную директорию (папку) для будущей страницы.

2. Создание текстового файла:

   1. пишем текстовый документ с помощью любого текстового редактора(например, Блокнота), содержащий команды языка HTML;

   2. сохраняем файл с расширением *.htm или *.html.(главную страницу называем index.html )

3. Просмотр созданной страницы:

   1. открываем браузер, выбираем пункт меню Файл-Открыть и находим файл на диске

или

1. 1. находим файл в Проводнике (или через Мой компьютер) и «открываем» его, щелкнув дважды по значку.

2. Редактирование страницы:

   1. открываем исходный файл *.html в текстовом редакторе (Блокноте);

   2. вносим изменения в страницу;

   3. сохраняем измененный файл;

   4. переходим в окно браузера;

   5. обновляем документ(нажав на F5 или кнопку обновления).