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

МБОУ «Большецарынская средняя общеобразовательная школа №1»

Конспект урока

на тему:

«Создание простой Web-страницы»

учитель:

Васкеева Екатерина Михайловна

п. Большой Царын, 2015

Тема урока: «Создание простой Web-страницы»

Тип урока: Урок «открытия» нового знания

Цель урока: Создание простой Web-страницы

Тип занятия: комбинированный

Планируемые результаты:

личностные:

• формирование ответственного отношения к учению на основе мотивации к обучению и познанию;

• формирование осознанного, уважительного и доброжелательного отношения к другому человеку, его мнению;

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

метапредметные:

• умение определять понятия, создавать обобщения, классифицировать, строить рассуждение, умозаключение и делать выводы;

• умение создавать, применять различные продукты для решения учебной задачи;

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

предметные:

• знать: основные теги, где создаются Web-страницы;

• уметь: создавать Web-страницы, форматировать Web-страницы.

Технические средства: компьютеры IBM/PC

Программное обеспечение: операционная система WINDOWS 7/Vista,

программа Блокнот, Браузер Internet Explorer

План урока:
1. Орг. момент.
2. Актуализация знаний.
3. Постановка цели урока.
4. Объяснение нового материала.
5. Первичное закрепление.

6. Самостоятельная работа с проверкой.

7. Рефлексия деятельности.

Ход урока:

Этап урока

Действия учителя

Деятельность учащихся

УУД

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

Приветствие, проверка присутствующих. Объяснение хода занятия.

Проверяют готовность к уроку

Саморегуляция. Планирование учебного сотрудничества с учителем и сверстниками.

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

На сегодняшний день мы свою жизнь не представляем без Интернета.

Отвечают на вопросы:

1) Для чего он вам нужен? (искать инф-ю, общаться)

2) Что же такое Интернет? (глобальная информационная система)

3) К какой сети относится интернет? (глобальная)

4) Что такое World Wide Web? (система документов, связанных между собой гиперссылками)

5) С помощью чего мы заходим в интернет? (с помощью браузеров)

6) Что такое браузер? (программа, предназначенная для просмотра Web-страниц)

7) Что такое Web-сайт? (совокупность взаимосвязанных страниц)

8) А что такое Web-страница? (отдельный документ имеющий собственный адрес)

9) Как может быть представлена информация на Web-странице? (в виде текстов, рисунков, аудио и видеоклипов)

Умение выражать свои мысли.

3. Постановка цели урока

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

Отвечают на вопросы: Хотели бы вы сами создать свой сайт, со своим дизайном и по своей теме?

Планирование, целеполагание. Смыслообразование. Самостоятельное выделение и формулирование познавательной цели.

Как вы думаете, чем мы сегодня займемся?

Итак, тема нашего урока «Создание простой Web-страницы»

Учащиеся отвечают (созданием web-страниц)

Формулируют цель урока.

4. Объяснение нового материала.

Итак, как же создается простейшая веб-страница?

Для ее создания используют Язык HTML (HyperText Markup Language, язык разметки гипертекста) – это язык, на котором создаются Web-страницы. HTML-документы могут просматриваться различными типами Web- браузеров. Когда документ создан с использованием HTML, Web-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Web-страницы могут быть созданы с помощью

1. обычного текстового редактора;

2. редактора, способного сохранять в формате HTML;

3. специализированного редактора;

4. специализированной системы.

Кроме полезного текста в HTML-документах используются специальные управляющие последовательности символов – тэги.

Чаще всего тэги используются попарно, окружая размеченные фрагменты текста. Такие тэги называются контейнерами. Закрывающийся тэг отличается от начального только присутствием символа «/», добавляемого перед именем тэга. При интерпретации тэгов браузер не делает различия между строчными и прописными буквами. Поэтому сами тэги можно набирать на любом регистре.

Оценивание усваемого содержания

5. Первичное закрепление

Итак, посмотрите на экран. Что это за сайт?

Правильно, сайт нашей школы МБОУ «БЦСОШ №1». Из чего он состоит? Как мне кажется здесь не хватает кое-какой информации. Информации о наших дорогих выпускниках 2016! Сегодня мы с вами будем создавать персональные личные карточки на языке HTML.

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

Будем выполнять работу поэтапно. Нашу Web-страничку мы будем создавать в самом простом текстовом редакторе – блокноте.

Открываем блокнот.

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

Каждый HTML документ имеет свою структуру.

<title>Личная карточка ученикаtitle>

<head> Личная карточка ученика head>

…

текст

…

Идет объяснение тэгов.( )

Весь основной материал будет располагаться в <body>

Я предлагаю вам заполнить карточку своими данными по схеме:

1 блок

ФИО:

Дата рождения:

Место рождения:

Домашний адрес:

E-mail:

Хобби:

2 блок

Самое запоминающееся событие в детстве:

Самое значительное событие в моей жизни:

Мне нравится заниматься:

Первое впечатление о школе:

Самое яркое событие, связанное со школой:

Кем я хотел стать в 7 лет и почему:

Первая награда:

В будущем я бы хотел добиться:

Вместе с учителем, последовательно заполняют страничку, используя основные тэги. (Объясняя)

<h1> h1> размер заголовка от 1 до 6

выравнивание

размер шрифта, цвет

<body bgcolor="#00CED1" text="#DC143C"> цвет фона страницы, цвет текста

<b> b> полужирный

<I> I> курсив

<U> U> подчеркивание

<br> переход на новую строку

<p align="right"> <img src="Koala.jpg" width=30% heath=30%> p> вставка изображения, изменение размера

Для тех, кто успеет, создаем бегущую строку.

после заголовка

height=30 width=100%

hspase=5 vspase=5 align=middle

bgcolor=yellow

direction=left loop=infinite behavior=scroll

scrollamount=5 scrolldelay=100>

Запишите Вашу фамилию, имя

Рассматривают сайт нашей школы.

Картинки, текст, гиперссылки и т.д.

Выполняют задания

Аргументация своего мнения и позиции в коммуникации; учет разных мнений.

Оценивание усваемого содержания

6. Самостоятельная работа с проверкой. Самоанализ и самоконтроль.

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

Выполняют задание. Проверяют.

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

7. Рефлексия деятельности

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

Беседа с учащимися. Выставление оценок.

Подумать над темой вашего сайта, собрать необходимую информацию и принести.

Отвечают на вопросы:

Какую тему мы изучили на уроке?

Где создаются html страницы?

Что используют для ее создания?

Назовите основные тэги, которые используются для создания сайта?

Какие трудности вы испытывали во время урока?

Где можно применить новые знания?

Записывают домашнее задание

Рефлексия способов и условий действия; контроль и оценка процесса и результатов деятельности. Самооценка. Адекватное понимание причин успеха или неуспеха в УД; следование в поведении моральным нормам и этическим требованиям. Выражение своих мыслей полно и точно; формулирование и аргументация своего мнения, учет разных мнений.