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

План урока

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

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

Дата: 19.12.2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

План урока:

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

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

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

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

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

Ход урока

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

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

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

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

· 

· 

· 

· 

· 

· 

· 

· 

· 

· 

· 

· 

· 

· 

· 

· 

· 

· 

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

·Объяснение нового материала (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>…</HEAD> -  определяется с помощью элемента.

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

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

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

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

 <HTML>

<HEAD>

<TITLE> Название Web-страницы </TITLE>

</HEAD>

<BODY >

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

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

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

</BODY>

</HTML>

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

            <HEAD>

            <BASE rel="nofollow ugc" target="_blank" href="http://www.igf.ru/other/index.html">

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

            </HEAD>

            <BODY>

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

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

<HR>

<BR><BR><BR><A rel="nofollow ugc" target="_blank" href="../about_me.html">О себе</A>

<BR><BR><A rel="nofollow ugc" target="_blank" href="../parents.html">Мои родители</A>

<BR><BR><A rel="nofollow ugc" target="_blank" href="../friends.html">Мои друзья</A>

            </BODY>

</HTML>

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

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

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

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

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

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

• 1 слайд

  https://play.kahoot.it/v2/lobby?quizId=60f2e75a-7366-44a7-9040-d9d30f6babd0
  ПОИГРАЕМ!
  

• 2 слайд

  19 декабря 2019 г
  Тема урока:
  Основы сайтостроения
  

• 3 слайд

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

• 4 слайд

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

• 5 слайд

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

• 6 слайд

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

• 7 слайд

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

• 8 слайд

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

• 9 слайд

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

• 10 слайд

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

• 11 слайд

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

• 12 слайд

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

• 13 слайд

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

• 14 слайд

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

• 15 слайд

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

• 16 слайд

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

• 17 слайд

  Результат
  

• 18 слайд

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

• 19 слайд

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

• 20 слайд

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

Краткое описание документа:

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