Разработка web-сайтов с использованием языка разметки гипертекста HTML
учебно-методический материал по информатике и икт (8 класс) на тему

Демидова Людмила Альбертовна

На изучение этой темы в учебном плане отводится четыре учебных часа (три теоретических урока и один урок - практическая работа). Данный план-конспект является первым из трёх теоретических уроков по данной теме.

 

Скачать:

ВложениеРазмер
Microsoft Office document icon 1_urok_html.doc36.5 КБ

Предварительный просмотр:

ПЛАН-КОНСПЕКТ УРОКА № 1.

 «Разработка web-сайтов с использованием языка разметки гипертекста  HTML»
(На изучение этой темы в учебном плане отводится четыре учебных часа (три теоретических урока и один урок — практическая работа). План-конспект является первым из трёх теоретических  уроков по данной теме)

ФИО

Демидова Л.А.

Место работы

МБУ школа № 40

Должность

учитель информатики

Предмет

информатика

Класс

8

Тема урока

Разработка web-сайтов с использованием языка разметки гипертекста  HTML.

  1. Цель  урока:  формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.

8. Задачи

Обучающие:

  • сформировать систему знаний по технологии создания Web-сайтов;
  • обучить языку разметки гипертекста HTML для создания сайтов;
  • познакомить с этапами проектной деятельности.

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

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

  новую предметную область Web-технологий;

  • развить навыки работы на компьютере

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

развивать:

  • добросовестное отношение к работе;
  • чувства товарищества и личной ответственности за созданный сайт;
  • художественный и эстетический вкус;
  • воспитывать грамотного и корректного пользователя сети Интернет.

9. Тип урока: ознакомление учащихся с новым материалом.

10. Формы работы учащихся: фронтальная работа, индивидуальная работа, ИКТ.

11. Необходимое техническое оборудование: доска, ПК по числу групп, тетради, канцелярские принадлежности.

12. Программное обеспечение: стандартное приложение Windows Блокнот, Интернет-браузер.

Ход урока.

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

II. Актуализация опорных знаний учащихся

Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме.

III. Изучение нового материала

Общие сведения о Web-сайтах и языке HTML:

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

HTML – Hyper Text Markup Language - язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).

Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов.

Браузер – (browser) – программа для просмотра Web-страниц. Широко используют браузеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

Структура HTML-документа

Секция заголовка

Записываются meta-теги, содержащие информацию о названии страницы, об авторе и др.

Тело документа

Содержит непосредственно информацию страницы: тексты, рисунки, таблицы

Форматирование символов

Символы, заключенные между следующими тегами отображают:

…. - полужирный шрифт

…… - курсивный шрифт

…… - подчеркнутый шрифт

 - нижний индекс

 - верхний индекс

Параметры шрифта

Текст, заключенный между тегами  …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

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

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

IV.  Закрепление нового материала

Практические задания:

1. Работа у доски (формирование  HTML-документа). Индивидуальная работа учащегося при поддержке класса.

2. Создание первого HTML-документа. Освоение технологии работы. Индивидуальная и парная работа учащихся на ПК.

V.  Подведение итогов

-    сегодня мы с вами научились создавать простейшую web-страницу;

  • полученные сегодня знания пригодятся нам при создании своего сайта.

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

п. 3.7 

Записать предложенные учителем темы сайтов и начать подбирать материал.

Литература для учителя

  1. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2009 г.
  2. Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2008г.
  3. Томас А.Пауэл “Web-дизайн. Наиболее полное руководство. В подлинике”, 2-е издание, БХВ-СПБ, 2005 г.
  4. Захаркина В.В. “Основы создания Web-страниц”, методическое пособие, СПБ, 2000 г.

Литература для ученика

1. Н.Д. Угринович Информатиа и ИКТ: учебник для 8 класса, М: Бином. Лаборатория знаний, 2010г.

2. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2009 г.

  1. Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2008г.

Интернет ресурсы

  1. Блог учителя информатики Демидовой Л.А. demidova68.blogspot.ru 
  2. Создание сайта с нуля http://ab-w.net
  3. Курс видео уроков по HTML для начинающих http://projs.org/tutorials/free-course-html 

По теме: методические разработки, презентации и конспекты

Обобщающий урок «Разработка Веб-сайтов с использованием языка HTML»

Этот урок является заключительном  в  курсе “Разработка  Web-сайтов  с  использованием  языка  НТМL” . Он проведится его в  форме конкурса. Урок  стоит из ...

Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML"

Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML" Цели урока: Повторение основных принципов построения сайтов, структуры HTML-документа...

Разработка Web-сайтов с использованием языка разметки гипертекста HTML

Презентация для 8 класса "Разработка Web-сайтов с использованием языка разметки гипертекста HTML"...

Разработка Web-сайтов с использованием языка разметки гипертекста НТМL.

Ресурс рассказывает об основах языка разметки гипертекса, о структуре web страницы и о том, как можно просто и легко организовать простой сайт из набора страниц, связав его гиперссылками....

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

Тема занятия: «Создание сайта с использованием языка гипертекстовой разметки документов». Цель занятия: Ученики создадут Web-сайт, содержащий пять Web-страниц, знакомящий с основными ...

Разработка Web- сайта с использованием языка разметки гипертекста HTML

Раздел программы: Телекоммуникационные технологии.Тема урока: Разработка web- страницы  «Профессия будущего»Класс 11Тип урока:  Итоговый. (Закрепление полученных знаний)Вид урока...

Конспект занятия по теме: «Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML».

Цель занятия: воспитанники создадут Web-сайт, содержащий пять Web-страниц, знакомящий с основными тегами языка гипертекстовой разметки документов HTML. Учащиеся должны знать:определение следующих...