Для всех учителей из 37 347 образовательных учреждений по всей стране

Скидка до 75% на все 778 курсов

Выбрать курс
Получите деньги за публикацию своих
разработок в библиотеке «Инфоурок»
Добавить авторскую разработку
и получить бесплатное свидетельство о размещении материала на сайте infourok.ru
Инфоурок Информатика КонспектыОсновы сайтосроения.Конспект урока. Презентация

Основы сайтосроения.Конспект урока. Презентация

Выбранный для просмотра документ План урока основы сайтостроения.docx

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


План урока

по информатике

подготовлен учителем Фандееевой А.К.


Дата: 19.12.2019

Класс: 11 класс


Тема урока: Основы сайтостроения.

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


Методы обучения: объяснительно-иллюстративный (рассказ с элементами беседы в сопровождении презентации) и практический (самостоятельная работа учащихся).


Цели и задачи урока:

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

  • познакомить учащихся со способами создания сайтов;

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

  • изучить с учащимися структуру Web-страницы (HTML-документа);

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

  • восприятие компьютера как инструмента информационной деятельности человека;

  • воспитывать уважение и умение сотрудничать с окружающими людьми;

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

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

  • формирование системного мышления, способности к анализу и обобщению;

  • освоение способов эффективного взаимодействия в процессе учебной коммуникации.


Материально-техническое оснащение:

телефоны с выходом в Интернет, планшетный ПК с выходом в Интернет, презентация, приложение Кahoot.

План урока:

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

  • Проверка знаний

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

  • Практическая работа

  • Подведение итогов и домашнее задание


Ход урока

  • Организационный момент (3 мин)

Приветствие, перекличка, проверка домашнего задания. Проверка знаний (5 мин)

  • На предыдущих уроках мы познакомились с самой востребованной службой глобальной сети – World Wide Web или Всемирной паутиной, освоили навыки использования почтовой службы. Давайте вспомним основные понятия. Поиграем! (слайд 1). На слайде url-адрес, https://play.kahoot.it, который Вы должны ввести в адресной строке. В открывшемся окне Вам предлагают придумать логин и ввести пин-код. Пин-код на доске. Логин – Ваша фамилия. После ввода данных Вы в игре. Можете увидеть свою фамилию на экране. Далее, после нажатия мной кнопки старт, мы начинаем. Вам будут предложены 5 вопросов. На принятие решения у Вас 20 секунд и четыре варианта ответа. Вы на телефоне выбираете ту фигуру, которая соответствует правильному варианту ответа на доске. После каждого вопроса на экран выводится рейтинг первых трех мест. В конце – победители и призеры. Готовы? Начнем!

На экране поочередно появляются вопросы и варианты ответов:




hello_html_5772759.png

hello_html_5b1643b8.png



Выставление оценок призерам и победителю.

  • Объяснение нового материала (14мин)(слайд 2)

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

Чтобы реализовать все эти возможности, был разработан специальный язык описания WWW-документов, названный HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста.

Этапы разработки веб-сайта (слайд 3)

Прежде чем сесть за компьютер, Вы должны на бумаге изобразить свою страницу, продумать структуру и содержание. Далее подготовить картинки, которые Вы будете использовать. Таким образом можно выделить следующие этапы сайтостроения (слайд 4):

  • Анализ и проектирование сайта

  • Информационное наполнение сайта

  • Креатив, или визуальная составляющая сайта

  • Написание кода

  • Тестирование

  • Публикация

  • Поддержка


Способы создания сайтов (слайд 5)

Существует несколько способов создания сайта: ручной и с помощью ПК.

1. Создание сайтов в блокноте

Каждый веб-ресурс – это набор специальных тегов, скриптов, приложений и так далее. Так вот в обычном блокноте, который есть в каждой операционной системе можно написать эти теги и сохранить документ с расширением *.htm. Что такое звездочка? ( Дети отвечают). Код пишется в текстовом документе. А сохраняется с раширением .htm Этот способ занимает огромное количество времени, он требует отличного знания в html-программировании. Вашим домашним заданием будет создать страницу с помощью html-программирования. Для этого воспользуетесь

2. Создать сайт помогут программы

Специализированные программы, такие как Front Page, Dreamweaver, KompoZer и т.д.

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

На помощь в дизайнерском оформлении вам на помощь придут готовые шаблоны для сайтов (множество бесплатных html-шаблонов можно найти в интернете, например, на internet-technologies.ru).

Для создания сайта надо добавить контент на страницы (текст, видео, картинки и так далее) и перелинковать их.

3. Бесплатные конструкторы сайтов

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

Например:

ucoz.ruСоздать сайт может практически каждый интернет-пользователь. Это занимает всего лишь несколько часов. Здесь я имею в виду и наполнение веб-ресурса.

narod.ruэто если вы хотите создать бесплатный сайт на яндексе (Freeware).

ru.jimdo.com - Благодаря этому сервису получаются красивые и многофункциональные ресурсы (условно-бесплатный конструктор) Shareware.

Tilda.com - позволит быстро создать и опубликовать сайт, требует регистрации.

Конструкторы позволяют создавать веб-сайты, не имея знаний по html верстке или программированию. Достаточно владеть основными навыками управления компьютером. На выбор предлагается огромное множество оформлений и дизайнов, которые можно применить к своему будущему проекту.

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

Если разрабатывается серьезный проект, то этот вариант не подойдет, так как в юридическом смысле Вы не будете владеть своим проектом.

(Слайд 6)


  • Документ, написанный на HTML, представляет собой текстовый файл, содержащий собственно текст, несущий информацию читателю, и теги разметки (markup tags). Слово «HTML» представляет собой сокращение от «HyperText Markup Language» - «язык разметки гипертекста». Основным понятием языка HTML является понятие тег.

  • Запишем! ТЕГ – инструкция браузеру, указывающая способ отображения информации заключенный в угловые скобки <>..


Виды тегов (слайд 7-8)

Запишем себе пример кода веб-страницы в тетрадь, комментируя каждую строку (слайд 9).

Заголовок … - определяется с помощью элемента.

Имя (заголовок) документа … - содержит "техническую" информацию о документе, для обозначения его названия.

Тело документа – в нем находится все то, что отображается на странице: текст, картинки, таблицы.


HEAD Определяет начало и конец заголовка документа


TITLE Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.



Название Web-страницы

Приветствую тебя, посетитель моего сайта.

Меня зовут Петя.

Это моя первая Web-страница.

Далее подробнее рассмотрим программное окно редактора KompoZer. (Слайд 9-17)

Дома попробуете сконструировать сайт с помощью он-лайн сервиса Тильда, ссылка на экране (слайд 18).


Сегодня мы будем писать наш сайт в редакторе Блокнот.


  • Практическая работа (20 мин)

Попробуем создать самостоятельно веб-странцу, используя справочник тегов. Ученик у доски пишет текст. Остальные в тетради. Далее проверяем на ПК.

В каталоге «Мои документы» создайте папку SITE. Откройте текстовый редактор Блокнот (Пуск - Все программы - Стандартные) и наберите текст, представленный на доске.

<TITLE>Домашняя страница Пети Иванова

HEAD>

<BODY>

<H1 ALIGN="center">Домашняя страница Пети Иванова

<H5 ALIGN="center">Дорогие друзья! Меня зовут Петя Иванов. Я рад приветствовать вас на своей домашней странице. Здесь я расскажу вам о себе , своей семье и друзьях.




О себе



Мои родители



Мои друзья

BODY>

HTML>


Выполните команду [Файл - Сохранить]. В разделе Тип файла укажите «Все файлы». В разделе Имя файла укажите index.html. В качестве места сохранения выберите папку SITE. Нажать кнопку «Сохранить». Затем запустите созданный и сохраненный файл (он должен запустится в браузере) или запустите браузер и откройте созданный файл командой [Файл - Открыть]. В заголовке окна браузера высветится название Web-страницы Домашняя страница Пети Иванова. Для переключения между режимом просмотра WEB-страницы в браузере и текстом HTML-файла используйте меню Вид → Просмотр HTML-кода.


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


  • Подведение итогов и домашнее задание. Рефлексия (слайд 19) (2 мин)

Итак, что мы узнали сегодня? (Как создаются веб-страницы, с использованием простого текстового редактора)

Чему научились? Выставление оценок.

  • Домашнее задание (слайд 20): Создать веб-страницу «Мои увлечения» с помощью языка HTML , используя http://www.5byte.ru/html/tag.php .





Выбранный для просмотра документ основы сайтостроения.ppt

библиотека
материалов
HTTPS://PLAY.KAHOOT.IT/V2/LOBBY?QUIZID=60F2E75A-7366-44A7-9040-D9D30F6BABD0 П...

Описание презентации по отдельным слайдам:

1 слайд HTTPS://PLAY.KAHOOT.IT/V2/LOBBY?QUIZID=60F2E75A-7366-44A7-9040-D9D30F6BABD0 П
Описание слайда:

HTTPS://PLAY.KAHOOT.IT/V2/LOBBY?QUIZID=60F2E75A-7366-44A7-9040-D9D30F6BABD0 ПОИГРАЕМ!

2 слайд 19 ДЕКАБРЯ 2019 Г Тема урока: Основы сайтостроения
Описание слайда:

19 ДЕКАБРЯ 2019 Г Тема урока: Основы сайтостроения

3 слайд Web-сайт это: Набор страниц, посвященных определенной тематике и связанных ме
Описание слайда:

Web-сайт это: Набор страниц, посвященных определенной тематике и связанных между собой гиперссылками

4 слайд Анализ и проектирование сайта Информационное наполнение сайта Креатив, или ви
Описание слайда:

Анализ и проектирование сайта Информационное наполнение сайта Креатив, или визуальная составляющая сайта Написание кода Тестирование Публикация Поддержка Этапы разработки веб-сайтов:

5 слайд 2 способа Ручной С использованием конструктора С помощью языка разметки HTML
Описание слайда:

2 способа Ручной С использованием конструктора С помощью языка разметки HTML С помощью специальных программ С помощью online-сервисов

6 слайд На Web – страницах находится информация: текстовая, графическая, звуковая, ви
Описание слайда:

На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Для того, чтобы создать Web – страницу нужно написать программу на языке HTML. Слово «HTML» представляет собой сокращение от «HyperText Markup Language» - «язык разметки гипертекста». Основным понятием языка HTML является понятие тег. ТЕГ – инструкция браузеру, указывающая способ отображения информации заключенный в угловые скобки <>..

7 слайд Даны теги, определить парные и одиночные теги:  ; ;  ; Одиночные Парные Приме
Описание слайда:

Даны теги, определить парные и одиночные теги: <H1> </H1>; <Br>; <Head> </Head>; Одиночные Парные Пример: <br> Пример:  <HTML> ….  </HTML>

8 слайд  Парные теги бывают: Пример:   ….   открывающиеся закрывающиеся
Описание слайда:

Парные теги бывают: Пример:  <HTML> ….  </HTML> открывающиеся закрывающиеся

9 слайд Название Web-страницы    Приветствую тебя, посетитель моего сайта. Меня зо
Описание слайда:

<HTML> <HEAD> <TITLE> Название Web-страницы </TITLE> </HEAD> <BODY > Приветствую тебя, посетитель моего сайта. Меня зовут Петя. Это моя первая Web-страница. </BODY> </HTML>

10 слайд - программа рассчитанная на работу в Windows, Linux,Mac Os. Для начала мы дол
Описание слайда:

- программа рассчитанная на работу в Windows, Linux,Mac Os. Для начала мы должны определиться с тематикой Веб- сайта, продумать дизайн, количество ссылок. Визуальный редактор Kompozer

11 слайд  Интерфейс визуального редактора Kompozer
Описание слайда:

Интерфейс визуального редактора Kompozer

12 слайд Оформление страницы Установка фоновой заливки страницы В главном меню редакт
Описание слайда:

Оформление страницы Установка фоновой заливки страницы В главном меню редактора необходимо выбрать: Формат Цвета и фон страницы

13 слайд Заголовок страницы Для изменения заголовка веб-страницы необходимо в главном
Описание слайда:

Заголовок страницы Для изменения заголовка веб-страницы необходимо в главном меню выбрать : Формат Заголовок и свойства страницы

14 слайд Наполнение веб-страницы Наполнение страницы осуществляется довольно просто и
Описание слайда:

Наполнение веб-страницы Наполнение страницы осуществляется довольно просто и напоминает работу в текстовом редакторе

15 слайд Добавление гиперссылок На панели инструментов существует иконка, с помощью ко
Описание слайда:

Добавление гиперссылок На панели инструментов существует иконка, с помощью которой добавляем гиперссылку, указывающую на расположенный в Интернете сайт

16 слайд Добавление изображений Необходимо щелкнуть по иконке «Изображение» на панели
Описание слайда:

Добавление изображений Необходимо щелкнуть по иконке «Изображение» на панели инструментов и выбрать картинку из папки локального или съемного диска

17 слайд Результат
Описание слайда:

Результат

18 слайд Конструкторы сайтов https://tilda.cc/registration/
Описание слайда:

Конструкторы сайтов https://tilda.cc/registration/

19 слайд Подведение итогов Чему научились? Что узнали нового? Что понравилось? Чему хо
Описание слайда:

Подведение итогов Чему научились? Что узнали нового? Что понравилось? Чему хотели бы научиться? Что было самым трудным ?

20 слайд Домашнее задание Создать веб-страницу «Мои увлечения» с помощью языка HTML ht
Описание слайда:

Домашнее задание Создать веб-страницу «Мои увлечения» с помощью языка HTML http://www.5byte.ru/html/tag.php

Курс повышения квалификации
Курс профессиональной переподготовки
Учитель информатики
Курс профессиональной переподготовки
Учитель математики и информатики
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Краткое описание документа:

Конспект открытого урока информатики в 11 классе на тему "Основы сайтосроения". Содержит описание применения информационых технологий в обучении детей. Использование разработанного теста в приложении Kahoot. Инструкция по работе с тестом. Изображение окна кахут. В презентации есть ссылка на разработаный кахут.

Проверен экспертом
Общая информация
Учебник: «Информатика (базовый уровень)», Семакин И.Г., Хеннер Е.К., Шеина Т.Ю.
Тема: § 13. Инструменты для разработки web-сайтов

Номер материала: ДБ-869107

Вам будут интересны эти курсы:

Курс повышения квалификации «Табличный процессор MS Excel в профессиональной деятельности учителя математики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Специфика преподавания дисциплины «Информационные технологии» в условиях реализации ФГОС СПО по ТОП-50»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

Репетиторы онлайн

✅ Подготовка к ЕГЭ/ГИА
✅ По школьным предметам

✅ На балансе занятий — 1

Подробнее