Конспект урока по теме: "Создание веб-страницы через блокнот"
Оценка 4.7

Конспект урока по теме: "Создание веб-страницы через блокнот"

Оценка 4.7
Работа в классе
docx
информатика
8 кл
03.04.2017
Конспект урока по теме: "Создание веб-страницы через блокнот"
Создание веб-страницы через блокнот с помощью языка разметки HTML, с использованием тэгов. В данном материале описываются тэги, правила работы с тэгами, пример организации веб-страницы. А также цель работы, ход урока, инструкционная карта, домашнее задание, контрольные вопросы. Вид занятий (тип урока): изучение нового материала. Организационные формы обучения: лекция.
СОЗДАНИЕ ВЕБ-СТРАНИЦЫ.docx
КОНСПЕКТ  УРОКА ДЛЯ 8 КЛАССА Преподавателя информатики и ИКТ Вяткиной Надежды Леонидовны  WEB   – страниц в формате     Создание        Тема:   HTML ЦЕЛИ  УРОКА: 1.  Дидактическая: познакомить обучающихся с основами HTML  программирования. 2.  Развивающая: Развивать знания обучающихся в области информационных  технологий. 3.  Воспитательная: Показать важность знаний и умений в сфере  информационных компьютерных технологий. Вид занятий (тип урока): изучение нового материала. Организационные формы обучения: лекция. Вид и формы контроля знаний: фронтальный опрос. Домашнее задание Ход занятия 1.   Организационный момент. 2.       Сообщение темы и цели занятия. 3.       Изучение нового материала. 4.       Практическая работа 5.       Подведение итогов занятия. 6.       Домашнее задание. ТРЕБОВАНИЯ К ЗНАНИЯМ И УМЕНИЯМ: Обучающиеся должны знать: ­ что такое Web­страница; ­ как менять фон Web­страницы; ­ принципы построения Web­страницы; ­ способы форматирования информации в Web­странице. Обучающиеся должны уметь: ­ создавать простейшие Web­страницы;  ­ просматривать Web­страницы;  ­ вставлять информацию через буфер обмена;  ­ вставлять рисунки из файла;  ­ работать с таблицами;  ­ делать границы таблицы невидимыми;  ХОД УРОКА Организационный момент 1. 2. Приветствие; Проверка готовности учеников к уроку;   ОСНОВНЫЕ ПОНЯТИЯ HTML Термин  HTML  (HyperText  Markup  Language)   означает   язык   маркировки гипертекстов.   Первую   версию   HTML   разработал   сотрудник   Европейской лаборатории физики элементарных частиц Тим Бернерс­Ли. Прежде чем преступить к созданию своих Web – страниц необходимо  познакомиться с основными понятиями и терминами данного раздела. Сайт ­ это набор страниц в формате  HTML которые лежат на Web – сервере. Web – сервер –  это постоянно подключенный к Интернету компьютер,  который передает эти странички по запросу пользователей. Web – узел – это намного больше чем совокупность Web – страниц. Это и  система гиперссылок, связывающая узел в единое целое, и единое  стилистическое оформление узла, и своевременное обновление находящейся  информации на узле, и скорость загрузки отдельных страниц, и многое другое. Домашняя страница – это Web – страница, которая передается сервером по запросу пользователя, указавшего в запросе имя Web, но не задавшего имени  конкретной страницы. Язык HTML расшифровывается как  «язык гипертекстовой разметки». Файл HTML – это обычный текстовый файл с расширение htm или html,  содержащий текст страницы, который мы видим в нашем браузере, и  некоторые управляющие записи – теги. Интернет страницы можно создавать несколькими способами. Мы рассмотрим первый способ создания при помощи программ Блокнот   и                                                             Internet Explorer. Запустите программу блокнот и используя специальные коды – теги, запишите программный код для создания своей страницы (в ходе работы студенты  пользуются инструкционной картой с тегами). Обязательные тэги  HTML  ...  Метка  должна открывать HTML­документ. Аналогично, метка   должна завершать HTML­документ.  ...  Эта пара меток указывает на начало и конец заголовка документа. Помимо  наименования документа (см. описание метки  ниже), в этот раздел  может включаться множество служебной информации, о которой мы  обязательно поговорим чуть позже. <title> ...  Все, что находится между метками  и , толкуется браузером как название документа.Internet Exploerer, например, показывает название  текущего документа в заголовке окна и печатает его в левом верхнем углу  каждой страницы при выводе на принтер.   ...  Эта пара меток указывает на начало и конец тела HTML­документа, каковое  тело, собственно, и определяет содержание документа.

 ... 

 — 
 ... 
Метки вида  (где i — цифра от 1 до 6) описывают заголовки шести  различных уровней. Заголовок первого уровня — самый крупный, шестого  уровня, естественно — самый мелкий.

 ... 

Такая пара меток описывает абзац. Все, что заключено между 

 и 

,  воспринимается как один абзац. Метки  и 

 могут содержать  дополнительный атрибут ALIGN, например: Выравнивание заголовка по центру или Образец абзаца с выравниванием по правому краю

Пример программы записанной в блокноте:

 КОЛЛЕДЖ СЕРВИСА И ТУРИЗМА

  Внешний вид готового документа в Internet Explorer: После того как программа была написана в Блокноте сохраняем файл с расширение html, закрываем. Открываем программу Internet Explorer – Файл – Открыть – ищем наш сохраненный текстовый документ – открываем. ИНСТРУКЦИОННАЯ КАРТА Теги Назначение


Открытие   и   закрытие документа   и   конец Начало заголовка   и   конец Начало документа Перевод строки Горизонтальный разделитель
Выравнивание по центру
Адрес автора Жирный шрифт Курсив Верхний индекс Нижний индекс Размер шрифта от 1 до 7 Цвет шрифта Гарнитур шрифта
     
  • Элемент 1 
  • Элемент 2 
  • Элемент 3 
 
      Создание маркированного списка Создание
  1. Элемент  1
  2. Элемент  2
  3. Элемент  3
нумерованного списка Вставка изображения Фоновое изображение Цвет фона Цвет текста Цвет присмотра ссылки Цвет ссылки Цвет активной ссылки ПРАКТИЧЕСКАЯ РАБОТА Для закрепления темы ученики пробуют создать Web – страницы.  Темы выбираются произвольно. ИТОГИ УРОКА Закрепление материала: 1. 2. 3. 4. 5. Сколько способов создания HTML – страниц Вы знаете, и какие? Какая   функциональная   кнопка   изменяет   вводимый   текст   в   Internet Explorer? Какие   правила   дизайна   необходимо   соблюдать   при   создании   HTML­ документа? Какова последовательность действий при создании HTML­документа во FrontPage? Как осуществляется подготовка текста HTML­документа средствами FrontPage? ДОМАШНЕЕ ЗАДАНИЕ

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"

Конспект урока по теме: "Создание веб-страницы через блокнот"
Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
03.04.2017