Конспект урока по Информатике «Основы языка гипертекстовой разметки документов HTML»


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

Цель: дать понятие о HTML, научить создавать HTML – документ; развивать память, логическое мышление, речь; воспитывать интерес к предмету.

Оборудование: ПЭВМ.

Ход урока.

  1. Организационное начало.

  1. Приветствие.

  2. Работа с дежурными.

II. Работа по осмыслению и усвоению нового материала.

    1. Объявление темы и цели урока.

— Тема урока » Основы языка гипертекстовой разметки документов HTML«. Сегодня мы узнаем, что же такое HTML и для чего он нужен, научимся создавать HTML – документы.

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

а) Что такое HTML?

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

Многие называют HTML языком программирования, это не совсем верно, HTML является языком разметки электронных документов.

Специальные программы для просмотра электронных документов, созданных по правилам языка разметки HTML, называют браузерами. Основная функция браузера заключается в интерпретации кода HTML и выходе визуального результата на экран монитора пользователя. Существует большое количество самых разнообразных браузеров, однако наибольшей популярностью пользуются 3 программы: Internet Explorer, Netscape Navigator и Opera.

Слово «гипертекстовый» в расшифровке названия языка HTML нуждается в отдельном пояснении.

Гипертекст представляет собой «многомерный» текстовый документ или объединение нескольких текстовых документов, содержащий гипертекстовые ссылки, построенный по принципу «нелинейного» структурированного материала за счёт применения гипертекстовых ссылок, позволяющих одним щелчком мыши перемещаться из одной «смысловой точки» гипертекстового документа в другую. Концепция гипертекста, лежащая в основе WWW, была предложена Теодором Хольмом Нельсоном в 60-х гг. XX века. Дальнейшим развитием гипертекста стала технология гипермедиа, позволяющая связывать гиперссылками не только текстовые фрагменты, но и данные иного типа (графику, звукозаписи, цифровое видео и пр.), когда щелчок мышью на выделенном слове или фразе приводит к демонстрации заданной разработчиком гипермедиа-документа иллюстрации, воспроизведению аудиозаписи, записку исполняемо й программы и пр. либо, например, те или иные участки изображения представляют собой ссылки на текстовые фрагменты или иные файлы данных.










































б) Структура HTML – документа.

Любой HTML – документ содержит 3 основных обязательных раздела: HTML, HEAD и BODY. Рассмотрим подробнее каждый из них.

Раздел HTML.

Данный раздел определяет специфику документа. Раздел описывается тегом-контейнером (группы символов) и даёт браузеру информацию о том, что документ разработан с помощью языка разметки HTML.

<HTML> начало документа

</HTML> конец документа

Раздел HEAD.

Раздел HEAD выполняет функцию рабочего заголовка HTML – документа. Данному разделу сопоставлен парный тег:

<HEAD> </HEAD> (пишется после <HTML>)

Рассмотрим теги HTML, которые указываются внутри раздела HEAD.

Название документа <TITLE>.

Парный тег <TITLE> </TITLE> предназначен для указания имени созданному электронному документу (визуальный заголовок HTML – страницы).

Например: <TITLE> Основы HTML. Создание HTML – документа </TITLE> (записывается после <HEAD>, но до </HEAD>).

Раздел BODY. (Тело, та информация, которая хранится в HTML – документе).

В данном разделе располагается содержательная часть, которая выводится браузером на экран монитора. Раздел описывается парным тегом <BODY> </BODY> (после тега <TITLE>).

Тег <BODY> имеет ряд параметров:

Параметр

Функция

BGCOLOR

Определение цвета фона (white, red, green, blue)

BACKGROUND

Указание фонового рисунка

TOP»> BOTTOM»>LEFT; «>


Определение размеров рисунка

TEXT

Определение цвета основного текста

LINK, ALINK, VLINK

Определение цвета гиперссылки

Например:

Теги <H1>, <H2>, …, <H6> — тег <H> с указанием цифр (от 1 до 6) задаёт определённый размер заголовка текста или его конкретного фрагмента. Тег <H1> — самый большой, а <H6> — самый маленький.

    1. Работа по выработке умений и навыков.

  1. Формулировка задания.

Составить HTML – документ с названием темы нашего урока. Указать, что мы с вами сейчас делаем.

  1. Оформление записи.

<TITLE> Основы HTML. Создание HTML – документа </HTML>

</HEAD>

<BODY> Мы записываем лекцию.

<H1> 1 вопрос. Что такое HTML? </H1>

<H2> 2 вопрос. Структура HTML – документа </H2>

</BODY>

  1. Оформление HTML – документа.

Можно выделить жирным начертанием <STRONG> </STRONG> или

<B> </B>

<CITE> и </CITE> — выделяет курсивом

или

<EM> и </EM>

<FONT FAGE = «тип шрифта»> </FONT>

<U> и </U> — делает текст подчёркнутым

<P> — выравнивание абзаца

<P ALING =»right«>

<OL> и </OL> — нумерованный список

<LI> — пункт перечня данных

    и
— маркированный список

    1. Итог урока.

— Верно ли, что HTML – язык программирования?

— Какие разделы содержит HTML – документ?

— Назовите ряд параметров для тега <BODY>.

— Как задаётся определённый размер заголовка?

— Назовите непарные теги.

VI. Задавание на дом.

Выучить лекцию.


Свежие документы:  Урок в 6 классе «Компьютер и информация»
<получить код>   

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

Хочешь больше полезных материалов? Поделись ссылкой, помоги проекту расти!

Ещё документы из категории Информатика:

Конспект урока по Информатике "Понятие модели и моделирование. Типы моделей" 9 класс
Конспект урока по Информатике "Арифметические операции в позиционных системах счисления" 8-10 класс
Урок по информатике "Условный оператор"
Конспект урока на тему «Работа с таблицами. Основные приемы работы с ТП Word»
Конспект урока по информатике «Компьютерные презентации»
Конспект урока Информатики "Способы задания множеств" 2 класс
Тест по теме «Информация»