Логотип Инфоурока

Получите 30₽ за публикацию своей разработки в библиотеке «Инфоурок»

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

и получить бесплатное свидетельство о размещении материала на сайте 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 .





Просмотрено: 0%
Просмотрено: 0%
Скачать материал

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

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

  • 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. Инструкция по работе с тестом. Изображение окна кахут. В презентации есть ссылка на разработаный кахут.

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

5 479 852 материала в базе

Материал подходит для УМК

Скачать материал

Другие материалы

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

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

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

  • Скачать материал
    • 19.12.2019 2184
    • RAR 931 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Фандеева Анна Константиновна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

    Пожаловаться на материал
  • Автор материала

    Фандеева Анна Константиновна
    Фандеева Анна Константиновна
    • На проекте: 5 лет и 3 месяца
    • Подписчики: 3
    • Всего просмотров: 26878
    • Всего материалов: 22