урок по теме: Основы языка разметки гипертекста HTML
методическая разработка по информатике и икт (10 класс)

Изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании.

Скачать:

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

Тема « Основы языка разметки гипертекста HTML »

Тема урока : Основы языка разметки гипертекста HTML.

Цель : Изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании.

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

Развивающая : способствовать развитию информационной культуры; развивать эмоциональную сферу: формировать положительные эмоции к процессу обучения.

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

Тип урока : Урок усвоения новых знаний.

Оборудование : 1. Современные компьютеры.

2. Мультимедийный проектор.

Оснащение: Презентация Power Point.

Раздаточный материал для обучающихся.

Программное обеспечение: ОС Windows, браузер.

Список использованной литературы:

2. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угринович. – М.: БИНОМ. Лаборатория знаний, 2008

Продолжительность проведения : два урока по 45 минут.

(Демонстрация презентации, 1 слайд).

2.Этап подготовки обучающихся к активному сознательному усвоению знаний.

Учитель : Предлагаю вспомнить некоторые понятия (беседа с обучающимися).

Web-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера (Википедия).

Всеми́рная паути́на (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).

Веб-обозрева́тель, обозрева́тель, бра́узер — программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (Википедия).

3. Этап усвоения новых знаний.

Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.

Web-страницы можно создать с помощью языка HTML.

Теги заключаются в угловые скобки <> и могут быть одиночными или парными.

Парные теги содержат открывающий и закрывающий теги (контейнер).

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

Теги могут записываться как прописными, так и строчными буквами.

(Демонстрация презентации, 2-3 слайды).

3.2. Понятие атрибута.

Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.

Моё имя – Марина

(Демонстрация презентации, 4 слайд).

3.3. Структура Web-страницы.

На этой странице можно разместить любую интересную информацию в Интернете.

(Демонстрация презентации, 5 слайд).

3.4. Создание Web-страницы.

Для редактирования файла index.htm необходимо открыть его в Блокноте.

(Демонстрация презентации, 6-7 слайды).

3.5. Атрибуты фона Web-страницы.

Оформление конспекта обучающимися.

(Демонстрация презентации, 8 слайд).

3.6. Теги и атрибуты форматирования текста на Web-странице.

… тег размера шрифта заголовков

… тег форматирования шрифта

FACE =“Arial” атрибут задания гарнитуры шрифта

SIZE =4 атрибут задания размера шрифта

COLOR =“Red” атрибут задания цвета шрифта

ALIGN =“left” атрибут задания выравнивания текста

тег для создания горизонтальной линии

контейнер для разделения текста на абзацы

Оформление конспекта обучающимися.

(Демонстрация презентации, 9 слайд).

3.7. Тег и атрибут вставки изображений на Web-странице.

Оформление конспекта обучающимися.

(Демонстрация презентации, 10 слайд).

3.8. Теги и атрибуты гиперссылки на Web-странице.

Указатель тег с атрибутом для создания гиперссылки

Оформление конспекта обучающимися.

(Демонстрация презентации, 11-12 слайды).

3.9. Теги и атрибуты для создания списков на Web-странице.

…

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

…

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

… контейнер для создания списка терминов

тег для создания термина

тег для создания определения

(Демонстрация презентации, 13 слайд).

3.10. Теги и атрибуты для создания интерактивных форм на Web-странице.

контейнер для создания формы

Тег со значением атрибута TYPE=“text” создают текстовое поле

Тег со значением атрибута TYPE=“radio” создают группу переключателей

Тег со значением атрибута TYPE=“checkbox” создают флажки

контейнер для реализации раскрывающего списка

тег элемента списка

Просмотр интерактивных форм на Web-странице.

(Демонстрация презентации, 14 слайд).

4.Этап закрепления знаний.

4.1. Индивидуальная работа на компьютере:

(Демонстрация презентации, 15 слайд)

Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК.

Информационная переменка (физминутка).

4.2. Индивидуальное выполнение теста и взаимопроверка с последующим оглашением учителем правильных ответов.

(Демонстрация презентации, 16 слайд).

Подведение итогов: обучающиеся выставляют сами себе оценки за выполнение теста и сообщают учителю.

5.Этап информации о домашнем задании.

Источник

Планы вводных уроков по теме «Основы языка разметки гипертекста HTML» (9-й класс, по программе Н.В. Макаровой)

Класс: 9

«Язык разметки гипертекста HTML и его назначение»

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

Цель урока: Сформировать представление о гипертексте и языке HTML.

Информация на экране	Деятельность учителя	Деятельность учащихся	Время
Тема урока

«Язык разметки гипертекста HTML и его назначение»

Презентация (Приложение 1)Организационный этап2 мин.Приветствие учеников.

Объяснение цели и задач урока, ознакомление с основными вопросами темы урока.Приветствие учителя.

Вопросы при необходимости.Контроль знаний по пройденной теме, примерный вопросы теста см. в (Приложении 3).10 мин.Объяснение задания для проверки знаний.

Наблюдение за работой учеников.

Проверка результатов выполнения работы. Выставление оценок.Выслушивают задание, задают вопросы.

Приступают к выполнению задания на ПК.

После выполнения задания подзывают учителя для проверки результатов и выставления оценокСлайды презентации «Язык разметки гипертекста HTML и его назначение»

Презентация (Приложение 1).Объяснение нового материала28 мин.Объявляет тему урока. Дает историческую справку о термине «гипертекст» и языке разметки гипертекста HTML.

Дает представление о преимуществах HTML.Записывают тему урока в тетрадь. Задают вопросы, отвечают на вопросы, рассуждают по теме, записывают самое главное (Приложение 2).

«Основы языка HTML: тэги, атрибуты, комментарии».

Тип урока: урок изучения нового материала.

Цель урока: Сформировать представление о структуре HTML-документа.

Межпредметные связи: английский язык.

Информация на экране	Деятельность учителя	Деятельность учащихся	Время
Тема урока

«Основы языка HTML: тэги, атрибуты, комментарии»

Презентация (Приложение 4)Организационный этап2 мин.Объяснение цели и задач урока, ознакомление с основными вопросами темы урока.Вопросы при необходимости. Запись темы урока в тетрадьСлайды презентации:

«Основы языка HTML: тэги, атрибуты, комментарии»

Источник

Методическая разработка урока «Основы языка разметки гипертекста HTML»

Государственное бюджетное профессиональное образовательное

учреждение Самарской области

«Борский государственный техникум»

МЕТОДИЧЕСКАЯ РАЗРАБОТКА УРОКА

Тема урока: Основы языка разметки гипертекста HTML

преподаватель информатики и ИКТ 1-й категории

способствовать развитию информационной культуры;

способствовать развитию логического мышления, памяти, внимания, творческого воображения, познавательного интереса

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

воспитывать интерес к предмету

Тип урока: Комбинированный ( урок изучения и первичного практического закрепления новых знаний)

Методы, применяемые на уроке:

практический (самостоятельная работа обучающихся);

видеометод (использование ЦОР).

компьютеры, мультимедийный проектор, экран;

тематическая презентация Power Point

Продолжительность проведения занятия 45 минут.

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

Повторение. Актуализация опорных знаний (по вопросам) (5 мин)

Основной (изучение нового материала)

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

Мотивационное начало урока (постановка цели урока и задач) (3мин)

Изложение нового материала на примерах использования тегов форматирования (с использованием презентации).

Закрепление нового материала путем выполнения практического задания (работа за компьютером с использованием высокоскоростного доступа в Интернет) (10 мин)

Заключительный. Подведение итогов, выводы (5мин)

Домашнее задание (2 мин.)

Приветствие учащихся. Проверка присутствующих и готовности обучающихся к уроку.

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

Всемирная паутина (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).

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

Теоретическая часть (Используется презентация к уроку)

Изложение нового материала на примерах использования тегов форматирования:

язык разметки гипертекста HTML ;

команды (теги) форматирования текста;

В 1989 году выпускник Оксфордского университета, бакалавр в области физики, сотрудник Европейского центра ядерных исследований Тим Бернерс-Ли (Tim Berners-Lee) разработал язык HTML (HyperText Markup Language — язык разметки гипертекста), ставший основным языком создания веб-документов и прототипом Всемирной паутины (World Wide Web, WWW).

Гипертекст — информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки).

Гиперссылка — фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому

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

Такие, как правило, имеют расширение htm или html. Отдельный документ, выполненный в формате HTML, называется:

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

Тег — начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.

Простой HTML –документ имеет следующую структуру:

На этой странице можно разместить любую интересную информацию в Интернете.

-обозначают начало и окончание HTML-документа.

Текст, размещенный между тегами TITLE > TITLE > – это заголовок страницы, который отображается не на странице, а в заголовке окна браузера.

— этот тег выделяет основную часть HTML-документа – его тело, в котором размещается вся отображаемая браузером информация. Кроме того, данный тег может содержать атрибуты, влияющие на внешний вид документа.

2.1 Закрепление нового материала путем выполнения практического задания (индивидуальная работа на компьютере)

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

Слайд 13. Во вкладке /Файл/ выбираем /Сохранить как…/

Слайд 15 Вводим имя файла с расширение м html

Слайд 17. Откройте файл с помощью Internet и просмотрите результат

Самостоятельная практическая работа

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

таблица с основными тегами html (приложение 1).

инструкционная карта практического задания (приложение 2)

Проверка выполненной работы, анализ ошибок и их исправление, оценивание самостоятельной работы на ПК.

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

Семакин, И. Г. Информатика и ИКТ. Базовый уровень: учебник для 10—11 классов / И. Г. Семакин, Е. К. Хеннер. — 5-е изд. — М.: ВИНОМ. Лаборатория знаний, 2009. — 246 с.: ил. ISBN 978-5-9963-0098-3

Хуторский, А.В. Технология создания сайтов. Информатика и ИКТ. 10-11 кл.: метод. Рекомендации к элективному курсу А.В. Хуторского, А.П. Орешко. – М.: Дрофа, 2007. – 129, [2] c. – (Элективные курсы) ISBN 978-5-358-03118-0

Источник

План конспект урока на тему : Языка разметки гипертекста HTML»»

Тема: « Языка разметки гипертекста HTML »

Обобщить знания по теме «Коммуникационные технологии»;

Научиться разрабатывать документы, предназначенные для публикации в; Интернете;

Отработать навыки редактирования веб-страниц в кодах HTML;

Восприятие компьютера как инструмента обработки и создания информационных объектов;

Формирование целостного восприятия окружающего мира.

Оргмомент. (проверка готовности учащихся класса и доски к уроку)

Тест по теме «Информационные технологии», с использование перфокарт

Г) адрес который имеет каждый компьютер подключенный к Интернету;

А) сводка меню программных продуктов;

Б) документ в котором хранится вся информация по сети;

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

Г) соединение нескольких компьютеров в одну локальную сеть.

А) сетевая программа, которая ведет диалог одного пользователя с другим;

Б) мощный компьютер, к которому подключаются остальные компьютеры;

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

Г) стандарт, определяющий форму представления и способ пересылки сообщения.

А) мощный компьютер, к которому подключаются остальные компьютеры;

Б) устройство, преобразующее цифровой сигналы компьютера в аналоговый телефонный сигнал и обратно;

В)программа, с помощью которой осуществляется диалог между несколькими компьютерами;

Г) персональная ЭВМ, используемая для получения и отправки корреспонденции.

Скорость передачи данных – это?

А) количество информации, передаваемой в одну секунду;

Б) количество байт информации, передаваемой за одну минуту;

В) количество байт информации, передаваемой с одного компьютера на другой;

Г) количество битов информации, передаваемой через модем в единицу времени.

А) способ идентификации абонентов в сети;

В)почтовый адрес пользователя в сети;

Г) количество бод (символов/сек), пересылаемой информации Вашим модемом.

Локальные компьютерные сети – это?

А) сеть, к которой подключены все компьютеры Вашего села;

Б) сеть, к которой подключены все компьютеры Вашей страны;

В) сеть, к которой подключены компьютеры Вашего офиса, или кабинета информатики, или одного здания;

Г) сеть, к которой подключены все компьютеры.

Сетевой адаптер – это?

А) специальная программа, через которую осуществляется связь нескольких компьютеров;

Б) специальное аппаратное средство для эффективного взаимодействия персональных компьютеров сети;

В) специальная система управления сетевыми ресурсами общего доступа;

Г) система обмена информацией между различными компьютерами.

А) часть адреса, определяющая адрес компьютера пользователя в сети;

Б) название программы, для осуществления связи между компьютерами;

В) название устройства, осуществляющего связи между компьютерами

Г) единица измерения информации.

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

Б) перенесение информации с одного компьютера на другой с помощью дискет

В) передача информации между пользователями о состоянии работы компьютера;

Г) сотни миллионов Web-серверов Интернета, содержащих большое количество Web – страниц, в которых используется технология гипертекста.

(сразу проверяются работы и выставляются оценки)

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

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

Использование инструментальных средств создания Веб-страниц недостаточно, если мы хотим создать качественные по стилю и содержанию документы, предназначенные для публикации в сети Интернет. Часто приходится форматировать введенные данные непосредственно в Блокноте, где представлена программа языка гипертекстовой разметки HTML (Hyper Text Markup Language). Если даже нет необходимости создавать страницы на языке HTML надо знать основные тэги для внесения необходимых изменений в уже готовую программу.

Для работы с HTML документом необходимо пройти подготовительный этап:

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

Создать текстовой документ и сохранить его с расширением html или htm.

Основными элементами документа являются тэги (или дескрипторы).

Браузерами называются специальные программы для просмотра и создания Web-страниц. (Примеры программ браузеров на стр. 189)

Контейнеры – это парные тэги содержащие открывающий и закрывающий тэг.

Каждый тэг ограничен угловыми скобками, и технология предполагает использование открытых и закрытых тэгов, указывающих на начало и конец форматирования определенного блока. Программа состоит из двух частей. В первой части задается заголовок страницы, которая отображается в заголовке окна и первая загружается, при просмотре страницы. Выбор названия заголовка имеет большое значение, т.к. именно по заголовку индексируется страница в поисковых системах. Название заголовка должно отражать суть информационного наполнения страницы.

(С помощью проектора на экран выводится общий вид программы)

(Каждому ученику раздается данная таблица и проектируется на экран).

Таблица основных тэгов языка HTML

Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB – пример: 000000 – черный цвет

Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB – пример: 00FF00 – зеленый цвет

Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB – пример: 333333 – серый цвет

Устанавливает цвет гиперссылок при нажатии

Для создания своей первой страницы недостаточно знать основные тэги. Необходимо научиться форматировать текст соответствующим образом. Для этого используются тэги для форматирования текста. Они представлены в следующей таблице:

(Каждому ученику раздается данная таблица и проектируется на экран).

Таблица тэгов для форматирования текста

Вставляет перевод строки

Создает отступы с обеих сторон текста.

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

Определяет каждый элемент списка и присваивает номер

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

Создает гиперссылку на другие документы или часть текущего документа

Тэги состоят из ключевых слов и могут быть дополнены атрибутами, разделенным пробелами. Описание атрибутов без использования ключевых слов не допускается

Задания выводится на экран.

Составить программу из готовых тэгов, вставив в неё заголовок страницы и содержание программы.

Дана программа на языке HTML определите какие тэги в ней используются и каково их назначение

Задание 3 (для более сильных учащихся)

Набрать данную программу в браузере Mozilla.

Источник