ОТКРЫТОГО УРОКА по дисциплине «Информатика» на тему «Создание простой начальной страницы сайта»

Министерство образования и науки Республики Казахстан

РГКП «Семипалатинский  финансово-экономический колледж 

имени Р. Байсеитова»

МАТЕРИАЛЫ ОТКРЫТОГО УРОКА по дисциплине «Информатика»

на тему «Создание простой начальной страницы сайта»

в группе  2 основного курса    ВТ-2

Подготовила: преподавателем  специальных дисциплин  Конкашева К.С.

г.Семей

2017-2018   учебный год

Рассмотрено на заседании цикловой комиссии специальных дисциплин - 1

Протокол №______«_____» ______________20___ж.

Председатель цикловой (предметной) комиссии __________   Мукушева Л.А.

ПОУРОЧНЫЙ ПЛАН № 18

1.      Адресная категория
1.1. Наименование специальности и квалификации	1304000Вычислительная техника и программное обеспечение (по видам) 130404 3Квалификация «Техник по защите информации», «Техник- программист».
1.2. Курс, группа	2осн. Курс ВТ-2.
1.3. Наименование учебного модуля/дисциплины, изучаемого раздела	Информатика
1.4. Тема занятия	Тема курса 10.3 Web-страницы и сайты, основные возможности  и внешний вид визуального  редактора. Тема урока  № 18 Создание простой начальной страницы сайта.
1.5. Организационная форма занятия	групповая
1.6. Знания и умения студентов, необходимые для выполнения деятельности по модулю/теме	•          дать представление о назначении HTML-редактор. •          познакомить учащихся инструментами создания информационных объектов для интернета.
1.7. Возможности учебного занятия интеграция профессиональных умений и умений трудоустройства	- навыки общения; - умение воспринимать информацию; - умение применять информацию на практике.
2. Цель занятия
2.1. Способствовать развитию следующих умений трудоустройства и поиска работы, которым обучатся студенты на данном занятии	- умение слушать; - умение общаться с партнерами; - прислушиваться к мнению других.
2.2. Обучение профессиональным умениям, которыми овладеют обучающиеся в процессе учебного занятия	- умение правильно организовать рабочее место; - умение работать с литературой; - умение работать с приборами; - умение работать в коллективе; - мыслить логически.
3. Описание результата занятия
3.1. К концу занятия обучающиеся должны: знать и уметь	Пользования службами Интернет, выполнения настройки компьютерной сети, работы в сети Интернет, создания Интернет – приложений, сайты, разработки HTML страницы; осуществлять поиск и просмотр информации в Интернет.
3.2. Критерии качества	Способствовать формированию знаний учащихся об основах HTML программировании, основы HTML – программирования.
4. Фаза планирования
4.1. Учебно-методическое оснащение, справочная литература	С.Симонович Спец.информатикаСтр. 407- 412 Повторение т.к.8-10
4.2. Техническое оснащение, материалы	УПМ, ПК
4.3. Описание последовательности действий студентов	дать представление о назначении компьютерных сетей, их видах; познакомить учащихся со структурой локальных сетей; научить выделению различных типов топологий локальных сетей.
4.4. Роль преподавателя	- сообщение основных понятий по теме; - пояснение терминов и порядка их применения.
5. Реализация плана
5.1. Описание плана занятий, содержание действий преподавателя и студентов (таблица)	Таблица «Содержание и организация взаимодействия преподавателя и студентов»
6. Оценка
6.1. Оценка качества выполненных заданий	Определение степени усвоения новых понятий и терминов.

Преподаватель  ___________________ Конкашева К.С.

     подпись                         Ф.И.О.

Содержание и организация взаимодействия преподавателя и студентов

№	Основные этапы занятия	Виды и последовательность действий	Деятельность студентов			Совместная деятельность преподавателя и студентов	Деятельность преподавателя
			индивидуальная	групповая	межгрупповая		консультация	инструктирование	контроль
1.	Этап ориентирования и планирования	Тема и цель урока		Х		Х			Х
2.	Этап выполнения работы	Подготовка рабочего места		Х			Х
		Подготовка материалов		Х			Х
		Технологический процесс: конспектирование, работа с конспектом, работа на интерактивной доске	Х Х Х				Х Х Х		Х Х Х
3.	Этап оценки и анализа конечных и промежуточных результатов	Оценка работы по критериям качества: Определить термин	Х				Х

Своя игра

Цель нашей игры: систематизировать знания и умения, полученные на уроках информатики и применить их в новых условиях, а также у каждого из вас есть возможность определить пробелы в знаниях и более качественно подготовиться промежуточной зачетной  работе. Для сегодняшней игры вам понадобиться и смекалка, и эрудиция, и быстрота реакции и умение анализировать.

Тип: комплексное применение знаний и способов действий.

Оборудование и наглядный материал:

1. Презентация для игры, оформлена как в телевизионной передаче «Своя игра» »

Предварительная подготовка к викторине:

1. Подготовить презентацию с заданиями

Организационная часть

Правила игры: Студент  выбирает тему из предложенных и стоимость вопроса если не ответит на вопрос  то кто  первый  поднявши   руку  имеет право ответа, если он  ответили верно – стоимость вопроса зачисляется ему на  счет.

В конце 1 раунда преподаватель  подводит промежуточные итоги, в конце 2 раунда – всей игры.

И так, приступим к игре.

Задания к игре:

1 раунд

	Устройства компьютера
100	Кладешь в него денежку и получаешь неплатежеспособную	Ответ Сканер
200	Устройство, преобразующее коды в видеосигналы.	Видеокарта
300	Большая, белая, шумящая коробка.	Системный блок
400	Что называется на  компьютерном жаргоне камнем?	Процессор
Программное управление компьютером
100	На каком языке разрабатывались программы в 40—50-х гг. ХХв., и что он из себя представлял?	Машинный язык
200	Что такое данные?	это информация, представленная в удобной для компьютера форме
300	Что называют программой?	последовательность команд, которую выполняет компьютер
400	В состав чего входят микропрограммы, выполняемые до загрузки операционной системы?	BIOS.
Компьютерные вирусы
100	Существуют ли вирусы для сотового телефона?	Да
200	С каким событием связано действие вируса США?	С аварией на Чернобыльской АЭС
300	Что дословно означает brandmauer?	Ответ «Огненная стена»
400	Какой тип вирусов заражает документы Microsoft Word?	Макровирусы
Операционные системы
100	О какой компьютерной программе идет речь в песне? Он мне дорог с давних лет И его милее нет — Этих окон негасимый свет.	Операционная система Windows
200	Что такое драйверы?	специальные программы, обеспечивающие управление работой устройств компьютера
300	Какой диск называется системным?	Диск, с которого производится загрузка операционной системы
400	Название чего может быть переведено с английского языка на русский как «мелкомягкая»?	ответ Microsoft
Файловая система
100	Оно есть как у файла, так и у человека.	Имя
200	Зуб бывает коренной, а каталог?	Корневой
300	Как называются программы, отображающие файловую систему и позволяющие управлять ею?	Файловые менеджеры
400	Какой ключ необходимо ввести после имени команды в операционной системе MS-DOS, для того чтобы получить справочную информацию по команде?	/?

2-раунд

Системы счисления
100	Что называется основанием системы счисления?	Количество цифр в системе счисления
200	Какое минимальное основание имеет система счисления, если в ней записаны числа 328 и 465?	9
300	Как обозначается число 500 в римской системе счисления?	D
400	Найдите сумму чисел 16 и 12 в семеричной системе счисления.	317
Основы логики
100	Чему равно выражение 2+2*2 = ?	6
200	В автобусе висит объявление «Проезд и провоз багажа 35 тенге». С точки зрения науки логики, сколько должен заплатить пассажир за проезд без багажа?	35 тенге
300	Определите истинность высказывания: 2 x 2 = 4 или 3 х 3 = 10.	Истина
400	Какой знак сравнения нужно поставить между выражениями? 57        75 .	78125  > 16807
Мир графики
100	Что является минимальным объектом, используемым в растровом графическом редакторе?	Точка (пиксель)
200	Сколько байт выделяется на кодирование цвета одного пикселя 256-цветного изображения?	1 байт
300	В каком формате хранятся графические изображения в коллекции Microsoft Clip Gallery?	WMF
400	Какой формат графических файлов не рекомендуют использовать для размещения изображений на web-страницах?	BMP
История
100	Кто предложил современную организацию ЭВМ?	Джон фон Нейман
200	В каком веке появилась первая счетная машина Блеза Паскаля «Паскалина»?	В 17 веке  1642 г.
300	Кем была написана первая программа?	Адой Лавлейс
400	Кто предложил принцип хранимой программы?	Джон фон Нейман.

Тема курса 10.3 Web-страницы и сайты, основные возможности  и внешний вид

визуального  редактора.

Тема урока  № 18 Создание простой начальной страницы сайта.

 Цель этапа: формировать знания учащихся по теме «Основы языка HTML».

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

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

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

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

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

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

- (слайд12)

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

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

- Из чего состоит 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

Для создания HTML страницы не требуется никаких специальных программ. Подойдет любой текстовый редактор умеющий сохранять файлы в обычном текстовом формате. Таким редактором, например, являются Notepad (Блокнот), входящий в стандартные средства Windows. Итак, давайте рассмотрим основные элементы из которых состоит любая HTML страница. Для начала необходимо дать определение тега.

(слайд 20) HTML Тег:

Это специальное указание того как нужно отображать элемент (текст, картинка и т.п.) на странице. Можно рассматривать тег как команду содержащую название и параметры.

Тег выглядит следующим образом:

<ТЕГ>элемент страницы</ТЕГ>

(слайд 21) Тэгов много, и они разные. Существуют (слайд 22)обязательные и необязательные тэги, парные и одиночные(пояснения на примере) .

Запишем замечание: если есть открывающий тэг, то должен быть и закрывающий.

Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы сайта.(рисунок и текст на распечатках)

(слайд 23) Рассмотрим структуру HTML(раздает карточки с теоретическим материалом)

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body> 

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

<br>

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

</body>

</html>

<html> -небо

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

</html> - земля

<head> </head> - голова документа

<body> </body> - тело документа

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

Все тэги, расположенные между <body> </body> - непосредственное содержание документа, в котором можно менять цвет текста, фона, как делать текст крупнее-мельче, вставлять картинки, таблицы и многое другое

<тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).

(слайд 24)Обратите внимание:

(под запись)

<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>

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

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

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

-Верна ли очередность тэгов в данном примере?

(слайд 28) <B><FONT COLOR=red>Доброе утро! </B></FONT>

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

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

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

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

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

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

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

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

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

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

- создайте Web – страницу, задайте цвет фона и напишите приветствующие слова на ней.

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

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

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

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