Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Другие методич. материалы / Открытый урок "WEB-программирование. Создание и редактирование документов HTML." - Урок, презентации, флипчарт.
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Открытый урок "WEB-программирование. Создание и редактирование документов HTML." - Урок, презентации, флипчарт.

Выберите документ из архива для просмотра:

695.5 КБ ++Откр_Урок_2016_ВЕБ.docx
1.86 МБ 3+ВопросыМозговой штурм.ppsx
61.75 КБ 5+Практическое задание.ppsx
164.39 КБ 6+SWOT.ppsx
197.03 КБ 1_Группа_Что такое web-страница и сайт.ppsx
141.98 КБ 2_Группа_Осн_тэги_ HTML.ppsx
99.21 КБ 3_Группа_Что такое хостинг.ppsx

Выбранный для просмотра документ ++Откр_Урок_2016_ВЕБ.docx

библиотека
материалов

ТЕМА УРОКА: WEB-программирование. Создание и редактирование документов HTML.

РАЗДЕЛ ПРОГРАММЫ: Интернет-ресурсы

Цели урока ознакомить студентов с основными приемами, необходимыми для создания web-страниц, основными задачами языка разметки гипертекста HTML и показать некоторые возможности в овладении этих приемов на примере программ Блокнот и браузер. Освоение методологии и технологии создания сайтов и ссылок на сайтах. Разработка web-страниц и оформление интерфейса.

  • Образовательные: закрепить понятия о языках разметки гипертекста; рассказать о способах выполнения действий с командами-тэгами для создания web-страниц, развитие умения работать по алгоритму, развитие умения создавать гипертекстовые документы.

  • Развивающие: развитие умения работать по инструкции, развитие умения применять полученные знания на практике.

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

ВРЕМЯ ПРОВЕДЕНИЯ: __________________________________

ТИП УРОКА: Практическое занятие

ВИД УРОКА: Урок-тренинг

ТЕХНОЛОГИЯ УРОКА: Технология развивающего обучения, информационные технологии обучения.

ОБОРУДОВАНИЕ И НАГЛЯДНОСТИ УРОКА: Персональные компьютеры, интерактивная доска Promethean, ПО Activinspire, стандартная программа Блокнот, язык HTML, раздаточные карточки, практикумы, бумага А3, фломастеры, жетоны для оценки, лист оценки, флипчарт, смайлики.

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ: операционная система Windows 7, язык разметки гипертекста HTML, браузер, программное обеспечение интерактивной доски ActivinspireStudio, программы Блокнот,MS Power Point, MS Excel.

МЕТОДЫ УРОКА: Групповая работа, диалог, мозговой штурм,музыкальная разминка, интерактивный метод, исследовательская беседа, самооценка, SWOT-анализ.

МЕЖПРЕДМЕТНАЯ СВЯЗЬ: Информатика, педагогика, использование интерактивных технологии, изобразительное искусство, основы алгоритмизации и программирования, компьютерные сети.



ПЛАН УРОКА:

  1. Организационный момент. Приветствие, проверка посещаемости, деление на группы. (2мин)

  2. Проверка домашнего задания. Защита презентации. (6 мин.):

3.Вопросы-Ответы «Мозговой штурм». (2 мин.)

4. Музыкальная разминка «Путешествие во времена года». (2 мин.)

5.Практическая часть. Создание главной страницы для веб-сайта на тему: «Времена года». (25мин).

6. Закрепление урока. (2мин.)

7. SWOT-анализ по теме: «Web-сайты. Зачем они нужны». Защита постера.(3мин.)

8. Обратная связь. Смайлики. (1мин)

9. Итог урока. Оценка студентов. Награждение лучших сотрудников веб-студии.(1мин).

10. Домашнее задание. (1мин.)

11. Провожаем гостей. Студенты встают с места, читают стихи о знаний и провожают гостей. После прочтения дарят шоколадки гостям.(1мин.)













ХОД УРОКА

I. ОРГАНИЗАЦИОННЫЙ МОМЕНТ. (2 мин.)

1.1. Приветствие и проверка студентов по журналу.

Объявление темы и цели урока.

Студенты вместе с преподавателем громко читают эпиграф М.Горького.:


1.2.«Чем больше знает человек, тем он сильнее!» -

1.3. Студенты все вместе читают стихи про знание:


«В знаний сила!»

В знании сила, писатель сказал,
Должны мы с ним согласиться,
Ведь, если не знаешь чего-то,
Тогда не нужно этим хвалиться.

Знание – столь драгоценная вещь – 
Всю жизнь собирай по крупицам,
И, если стремление к знанию есть,
Мы можем этим гордиться.


1.4.Деление на группы:

Студенты из шкатулки выбирают шоколадки. По видам шоколадок делятся на три группы – веб-студии: «ЛИСТОПАД», «САКУРА», «BLUE OCEAN». В каждой группе назначаются менеджер, веб-дизайнер, верстальщик(макетчик) и программист. Менеджеры знакомят своих сотрудников. Менеджерам раздаются листы оценки и жетоны для оценки друг-друга: (I группа (ЛИСТОПАД) оценивает II группу, II группа (САКУРА) III группу и III группа (Blue ocean) I группу.)


Критерии оценки: - пять.

- четыре.

- три.

II. ПОВТОРЕНИЕ ИЗУЧЕННОГО МАТЕРИАЛА

  1. Проверка домашнего задания. (6 мин):

Работа с интерактивной доской и ПО Activinspire –Представители с каждой группы защищают свою презентацию подготовленные дома по заданным темам:

I группа - ЛИСТОПАД – «Что такое web-страница и сайт?»,

II группа - САКУРА – «Основные теги для создания web-страниц в HTML»,

III группа -Blue ocean – «Что такое хостинг?».

Менеджеры с каждой группы оценивают друг-друга и записывают на лист оценки.


  1. «Мозговой штурм». Вопросы-Ответы.

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


Вопросы по тэгам HTML для I группы -ЛИСТОПАД:

  1. Язык разметки гипертекста – HTML,

  2. Тэг начала сайта - ,

  3. Название документа - ,

  4. Тело документа - ,

  5. Цвет фона страницы - <BG COLOR>.


Вопросы по тэгам HTML для II группы - САКУРА:


  1. Тег изображения - ,

  2. Горизонтальная линейка ,

  3. Разрывает текстовый поток и вставляет пустую строку - <BR>,

  4. Тег абзаца - <P>,

  5. Полужирный текст - .


Вопросы по тэгам HTML для III группы -Blue ocean:

  1. Курсивный текст - ,

  2. Шрифт - ,

  3. Цвет шрифта - <FONT COLOR>,

  4. Размеры шрифта - <H1>,<H2>, <H3>, <H4>, <H5>, <H6>,

  5. Тэг гиперссылки - .


  1. Музыкальная разминка «Путешествие во времена года». (2 мин.)

А теперь у нас будет музыкальная разминка на тему «Путешествие во времена года». Наше путешествие начинается с осени, поскольку новый учебный год всегда начинается с осени.

Сопроводительные вопросы :

  1. С какого времени года начинается новый год в европейских странах? – С Зимы – 1 января «Праздник Новый год».

  2. А в Казахстане? – С Весны – Новый год начинается 22 марта. Это праздник «Наурыз». День весеннего равноденствия.

  3. А в какое время года начинается новый учебный год – С Осени. – 1 сентября –День знания.

  4. Как будет на казахском, русском и на английском название времен года. Начнем мы с осени, т.к. новый учебный год мы начинаем всегда с осени.

Итак, Осень – Күз – Autumn. Зима – Қыс –Winter. Весна – Көктем – Spring. Лето – Жаз – Summer.


Эти информации нам дальше нужны будут для выполнения практической работы. Поэтому прошу Вас не забывать эти данные. А сейчас разминка. Студенты встают с места, вместе с преподавателем делают разминку под музыку.


5.Практическая часть. (25мин).

Прежде чем начать практическое задание, проведем небольшой тренинг по созданию главной страницы сайта. Мы уже проходили основные тэги HTML и создавали несколько отдельных страниц на учебной практике. Это тэги: , , , ,
, ,

, , , ,

< table>, < td>, < tr> и т.д. На сегодняшнем уроке мы повторили их описания.

Давайте все вместе попробуем создать главную страницу для сайта.

У вас на рабочем столе находится папка «Тренинг_Практика» hello_html_mc383f4e.png. В нем находятся заготовки – это различные фото и одна страница для практической работы. Наша задача – мы должны создать «Главную страницу» сайта и гиперссылки для перехода от одной страницы к другой и обратно. Для этого выполняем следующие действия:


  1. Открываем стандартную программу Блокнот (Пуск – Все программы – Стандартные - Блокнот) и создаем в нем следующий документ HTML:


<HTML> (файл HTML)

<HEAD> (начало документа)

<TITLE> Группа 07-13 TITLE> (название документа)

HEAD>

<body> (начало содержимого страницы)

<body bgcolor="#ffffoo"> (цвет фона страницы)

(цвет шрифта)

<H1 ALIGN="center"> Группа 07-13 H1> (Слово « Группа 07-13 » размером H1 по центру)

FONT>

<HR> (горизонтальная линия)

<tabl align="center"> (Создание таблицы по центру страницы)

<tr> (создание строки таблицы)

<td height="300" width="400" border="2"> (Создание столбца таблицы, высоты и ширины )

07 (Вставка картинки)

07

07

td>

tr>

tabl> (конец создания таблицы)

<BR> (разрыв строки)

<HR> (горизонтальная линия)

<P ALIGN ="center"> (Создание абзаца по центру)

[<A HREF="07-13.htm"> Наша группа A>] &nbsp (Создание гиперссылки)

P> (Конец абзаца)

<BR>

<HR>

HTML> (конец HTML документа)


  1. Сохраняем как Index.htm (Файл – Сохранить как – Рабочий стол – Тренинг_практика)

Примечание: Если создаем страницу на казахском языке выбираем m следующие команды: (Файл – Сохранить как – Рабочий стол – Тренинг_практика – Кодировка – 1200(UTF-16 LE)


Результат смотрим на любом доступном браузере.

hello_html_m1277093b.png hello_html_6f1faf52.png

Главная страница Вторая страница сайта


Примерно такое же у нас будет практическое задание.

Практическое задание для 3-групп: Уважаемые команды – веб-студии, к нам поступило следующее задание от одной из школы нашего города, послушайте пожалуйста внимательно:

«Создать веб-сайт на тему «Времена года» на трех языках (казахском, русском и английском ). Сайт должен содержать следующие страницы: Главная страница и четыре страницы – «Осень», «Зима», «Весна», «Лето», которые должны открываться в порядке: «Осень», «Зима», «Весна», «Лето», поскольку учебный год начинается с осени. В главной странице должны быть картинки времен года в виде таблицы, слово «Времена года», ссылки для перехода на остальные четыре страницы, горизонтальные линии и название веб-студии. На остальных страницах должны быть картинка соответствующая времени года, название времени года, горизонтальные линии, гиперссылки для перехода на остальные страницы, включая главную страницу, стихи на казахском, русском или английском языках, соответственно времени года. Пожалуйста, в каждой веб-студии есть менеджер (управляет всеми), верстальщик (создает макет сайта), дизайнер (создает дизайн сайта), и программист (пишет программу для сайта). Ваша задача: Поскольку вами уже подготовлены внутренние четыре страницы в данное время каждая веб-студия создает только главную страницу с гиперссылками.

Итак, ваши задания:

I группа –Веб-студия «Листопад» вы будете создавать сайт «Времена года» на русском языке. После завершения на интерактивной доске ваш менеджер с командой должны показать и объяснить ход создания главной страницы и прочесть информации на страницах «Осень» и «Зима».

II группа – Веб-студия «Сакура» вы будете создавать сайт «Времена года – Жыл мезгілдері» на казахском языке. После завершения ваш менеджер вместе с командой на интерактивной доске показывает и объясняет ход создания главной страницы и прочитаете информации на странице «Весна - Көктем».

III группа – Веб-студия «Blue ocean» ваша задача: Создать сайт «Времена года - Seasons» на английском языке. После завершения менеджер вместе с командой на интерактивной доске показываете и объясняет ход создания главной страницы и прочитаете информации на странице «Лето - Summer».

На интерактивной доске ход практической работы будет показывать один желающий студент.


Оценивается менеджерами группы, оценку записывают в лист оценки.

Дополнительно, преподаватель награждает в трех номинациях медалями:

«Лучший менеджер», «Лучший дизайнер», «Лучший программист».


Сценарий практической работы:


  1. Открыть Блокнот: Написать следующий HTML код:


Времена года

Времена года

</B></I></SPAN><I><B>Осень</B></I><SPAN ><I><B>

</B></I></SPAN><I><B>Зима</B></I><SPAN ><I><B>

</B></I></SPAN><I><B>Весна</B></I><SPAN ><I><B>

</B></I></SPAN><I><B>Лето</B></I><SPAN ><I><B>


[ Осень ]  

[ Зима ]  

[ Весна ]  

[ Лето ]  



I

ГРУППА


  1. Сохранить документ в Блокноте под именем index.htm

  2. Посмотреть результат в любом доступном браузере.

  3. Открыть страницу «Осень» через контекстное меню, с помощью команды «ОТКРЫТЬ С ПОМОЩЬЮ» - выбрать БЛОКНОТ. В открывшемся коде HTML добавить следующую строку:

[ Главная страница ]  

  1. Это же действие повторить для страниц «Зима», «Весна», «Лето».


  1. Закрепление урока. (3мин.)

Для каждой группы задаются задания на флипчарте по созданию документа HTML(таблицы).

Задание для I группы: «Найдите спрятанные слова».

  1. Тэг для создания Таблицы. <Table>

  2. Тэг создания строки в таблице.

  3. Тэг создания столбца в таблице.


    Задание для II группы: «Расположите в правильном порядке тэги HTML для создания таблицы ».

    hello_html_617f017b.png


    Задание для III группы: «Закончите определения». Напишите ответы на доске.

    1.Какие атрибуты наиболее часто используются в тэге < table>- создание таблицы.

    1.Align

    2.Bgcolor .

    3.Border.

    2. Какие атрибуты наиболее часто используются в тэге <td> - создание столбца.

    1. Height.

    2.Width .



    9. SWOT-анализ по теме: «Web-сайты. Зачем они нужны» (3мин).

    Итак, мы рассмотрели различные понятия: Веб-страницы, HTML коды, браузеры, тэги и т.д. Все эти определения объединяет одно понятие – это WEB-сайты, которых можно размещать в сети интернет и находить интересующие нас информации, ответы на наши различные вопросы. А теперь, давайте проанализируем: Зачем же нам нужны эти WEB-сайты.


    Ваша задача: Каждая группа должна нарисовать, написать постеры по заданной теме и представители с каждой группы должны защитить свои постеры по принципу SWOT-анализа.








    hello_html_44b082d8.png

    hello_html_3174a265.png


    I группаВеб-студия «Листопад» - «Опишите сильные (положительные) стороны заданной темы»,

    II группаВеб-студия «Сакура» - «Опишите слабые стороны и угрозы заданной темы»,

    III группаВеб-студия «Blue ocean» - «Опишите возможности и развитие заданной темы».


    8. Обратная связь. Смайлики. (1мин)

    Студенты должны прикрепить свои смайлики по усвоению материала на свои постеры.


    9. Итог урока. Оценка студентов. (1мин).

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


    10.Домашнее задание. (1мин.)

    Создать сайт на тему «Моя группа», состоящий из четырех страниц , одна из них которая является главной страницей.


    11.Провожаем гостей. (1мин.)

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

    Ведь только знание делает нас
    Свободными и сильными,
    Нельзя жажду к знаниям нам терять,
    Не
    знание – есть бессилие!

    Весь смысл нашей жизни-
    В усилии больше познать,
    И покорить неизвестность!
    --- Как долго должны мы предмет
     
    изучать, чтоб стать эрудитами?
    --- Вечность!
     













    МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН

    Актауский технологический колледж сервиса







    Согласовано: Утверждаю:






    Открытый урок


    по теме:

    WEB-программирование.

    Создание и редактирование документов HTML.






    В группе ______

    Курс ___

    По специальности:





    Дата проведения: _____________



    Преподаватель: Агзамова С.Е.












    г.Актау – 2016г.


Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Автор
Дата добавления 19.08.2016
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров281
Номер материала ДБ-160283
Получить свидетельство о публикации

Комментарии:

11 месяцев назад

Спасибо большое Инфоурок! Спасибо коллегам, Ваши материалы очень помогают мне в работе!

Похожие материалы

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