Ученики на Учителя.com


Конспект урока "Основы языка HTML" 11 класс

Урок информатики в 11 классе
Обсерваторской средней школе Зеленодольского района РТ
по теме «Основы языка HTML»
Тевелевой Елены Львовны
Цели:
Знакомство с историей создания языка HTML;
Изучение логической структуры Web-документа;
Ознакомление с основными структурными тегами;
Задачи:
Научить учащихся составлять простейший Web-документ и просматривать его в
браузере;
Показать простейшие приемы цветового оформления Web-документа;
Оборудование: компьютеры, мультимедийный проектор, учебная презентация «Основы
языка HTML», технологические карты для практической работы и таблицы цветов по
количеству учащихся;
Ожидаемые результаты:
Теоретические знания – основные исторические этапы создания технологии
WWW; структура гипертекстового документа; основные структурные теги;
Практические навыки – приемы работы по созданию и редактированию Web-
документов;
Этапы урока:
1. Введение (4-5 минут)
Историческая справка
В 1986 году Международная организация по стандартизации (ISO) приняла стандарт
обобщенного метаязыка Standard Generalized Markup Language (SGML), позволяющего
строить системы логической структурной разметки любых разновидностей текста.
Управляющие коды, вносимые в текст при такой разметке, лишь задавали его логическую
структуру, т.е. создавали ссылки от документа к документу и не несли никакой
информации о внешнем виде документа.
Слайд 1 «Историческая справка».
В 1989 году сотрудник Европейского центра
ядерных исследований в Женеве (CERN) Тим
Бернес-Ли начал работу по созданию
информационной системы, которая должна была
объединить все информационные ресурсы центра:
базы данных научных отчетов; результаты
экспериментов; компьютерные программы обработки
данных; списки почтовых адресов и т.д.
Предложенная Бернесом гипертекстовая технология,
позволяла легко переходить от одного документа к
другому.
В основе технологии WWW лежат три составные
части:
Язык гипертекстовой разметки - разработчики WWW выбрали систему SGML в
качестве основы языка гипертекстовых документов. Этот язык был назван Hyper Text
Markup Language (HTML);
Универсальный способ адресации ресурсов в сети URL – Uniform Resource Locator;
Протокол обмена гипертекстовой информацией HTTP - Hyper Text Transfer
Protocol;
Слайд 2 «Первый сайт»
В декабре 1991 года американский физик Пол Кунз из
Стенфордского университета создал первый сайт на основе
WWW-технологии. В январе 1992 года Тим Бернес-Ли на
конференции во Франции, где присутствовало более 200
физиков из разных стран рассказал о системе WWW, затем
продемонстрировал как с ее помощью можно связаться с
заокеанским сайтом Кунза в США.
Информация в системе WWW организована в виде
страниц. Каждый желающий может разместить
информацию о себе на так называемой «домашней
страничке» (от англ. home page), поместив ее сервере своего
провайдера или на серверах бесплатно предоставляющих место под такую страничку.
Несколько страниц, находящихся на одном сервере и объединенных по смыслу,
образуют сайт (от англ. site – место, участок). В настоящее время большинство компаний,
государственных и частных учреждений и предприятий, общественных организаций и
просто частных пользователей имеют свои представительские сайты в Интернете.
Слайд 3 «Первый графический браузер»
Для просмотра страниц в системе WWW имеются
специальные программы, устанавливаемые на
пользовательских компьютерах, так называемые
браузеры (от англ. browse – рассматривать). Самые
первые браузеры имели текстовый интерфейс,
похожий на командную строку DOS. В начале 1993 г.
в Национальном центре суперкомпьютерных
программ (NCSA) Иллинойского университета
группа программистов под руководством Марка
Андриссена разработала первый браузер с
графическим интерфейсом, работающий в различных операционных системах. Браузер
был назван Mosaic. В 1994 г. разработчики
Mosaic создали компанию Netscape
Communication и вскоре выпустили первый
коммерческий браузер Netscape Navigator. В
1995 г. компания Microsoft выпустила первую
версию браузера Internet Explorer, а уже в 1996 г.
третья версия браузера Internet Explorer, стала
понемногу теснить господствующий на рынке
Netscape Navigator.
Такова краткая история создания и развития
системы WWW.
2. Объяснение новой темы с использованием учебной презентации «Основы языка
HTML» (5 - 8 минут).
Гипертекст создаваемый с помощью языка HTML представляет собой обычный текст,
включающий в себя элементы, управляющие внешним видом этого текста (цветом,
стилем, размером и т.д.). Эти элементы состоят из особых текстовых фраз, называемых
тегами. Внешне теги выделены в тексте треугольными скобками. По своему значению
теги близки скобкам «begin – end» (начало – конец) в языках программирования, которые
задают области действия определенной группы команд.
Слайд 4 «Структура web-документа».
Весь гипертекстовый документ можно представить как один большой элемент с
именем «HTML». По структуре он состоит из двух частей: заголовка документа и тела
документа, где содержится отображаемый на экране текст.
Парные теги <html> </html> являются внешними для всех остальных. Без этих тегов
браузер не может определить формат документа и правильно его отобразить.
Заголовок документа включает парные теги: <head> </head> и <title> </title>. Теги
<head> </head> являются внешними по отношению к тегам <title> </title>. Между тегами
<title> </title> обычно располагается название страницы, отображаемое в строке
заголовка при просмотре документа в браузере.
Тело документа отображается с помощью парных тегов <body> </body> между,
которыми помещается основное содержание web-страницы (тексты, таблицы, графические
объекты, бегущие строки, баннеры и т.д.), включающее сведения о форматировании
текста.
Итак, структура web-документа:
<html>
<head>
<title> Работа с изображениями в HTML </title>
</head>
<body>
</body>
</html>
Слайд 5 «Параметры тега <body>»
Тег <body> имеет несколько параметров:
Цвет фона документа bgcolor=#RRGGBB
Текстура фона background=file_name
Цвет текста text=# RRGGBB
Цвет текста ссылки link=# RRGGBB
Цвет текста активной ссылки alink=# RRGGBB
Цвет текста просмотренной ссылки vlink=# RRGGBB
Слайд 6 «Таблица цветов»
Значение цвета указывается либо его буквенным обозначением, либо 6-ти разрядным
шестнадцатеричным числовым кодом RRGGBB, где RR – интенсивность красного цвета,
GG – интенсивность зеленого цвета, BB – интенсивность синего. Интенсивность может
изменяться от значения 00 до FF.
Слайд 7 «Выравнивание»
Парный тег <h> служит для выделения заголовков (headings). Цифра после буквы
показывает уровень заголовка (всего их может быть шесть). Вместе с заголовком можно
задать и выравнивание текста, задав значение параметру align:
по центру – center;
по левому краю – left;
по правому краю – right.
Слайд 8 «Редактирование»
Тег <font> указывает параметры шрифта. Для него могут задаваться следующие
параметры:
Face – устанавливает тип шрифта для отображения текста;
Заголовок
документа
Тело
документа
Пример: <font Face=”Arial”, “Verdana” > текст </font>.
Size – устанавливает размер шрифта, относительно установленного в
браузере по умолчанию;
Пример: <font size=+n> текст </font> или <font size=-n> текст </font>, где n число
пунктов (от 1 до 7), на которое увеличивается или уменьшается размер шрифта
(1пункт=
72
1
дюйма или 0,353 мм). Принято считать, что размер «нормального» шрифта
соответствует значению 3.
Color – устанавливает цвет шрифта, задаваемый с помощью
стандартных имен или в формате RRGGBB (см. выше);
3. Практическая работа ( 30 – 35 минут)
Учащиеся занимают рабочие места за компьютерами, получают таблицу цветов
(Приложение 1), технологическую карту (Приложение 2) и приступают к выполнению
практической работы.
Учитель корректирует работу учащихся и отвечает на возникающие вопросы (как
показывает 4-х летний опыт, вопросов почти не бывает).
4. Оценивание результатов выполнения практической работы (1 минута).
5. Домашнее задание (1 минута):
продумать тематику странички сайта – подготовить текст, подобрать
иллюстрации;
внести текст в готовый макет страницы, изображения в папку сайта;
Приложение 1.
Основные цвета
Буквенное
обозначение
RRGGBB
формат
Соответствующий
цвет
AQUA
#000000
Черный
BLACK
#0000ff
Светло – синий
BLUE
#00ff00
Зеленый
FUCHSIA
#00ffff
Голубой
GRAY
#800000
Светло – красный
GREEN
#ff00ff
Сиреневый
LIME
#ffff00
Светло – желтый
MAROON
#ffffff
Белый
NAVY
#000080
Синий
OLIVE
#008000
Светло – зеленый
PURPLE
#008080
Сине – зеленый
RED
#800000
Коричневый
SILVER
#800080
Темно – синий
TEAL
#808000
Оливковый
WHITE
#808080
Темно – серый
YELLOW
#c0c0c0
Светло – серый
#ff0000
Красный
Урок 1. Практическая работа. Приложение 2
Что и как делаем?
Содержание текстового документа
Отображаемый вид в браузере
Подготовительный этап:
Создать в своей рабочей папке специальную папку «Site_Familia», в которую будут сохранены все созданные документы.
1. Открыть приложение «Блокнот».
2. Записать основные разметочные теги.
3. Сохранить, созданный документ в папку
сайта в двух видах:
html-документа (имя файла – Familia.htm,
тип файла – «все файлы»);
текстового документа (имя файла –
Familia.txt, тип файла – «текстовые
документы (*.txt)»);
4. Открыть на экране одновременно два окна:
первое окно – текстовый документ в
«Блокноте»;
второе окно – браузер Internet Explorer;
<html>
<head>
<title>
Работа с изображениями в HTML
</title>
</head>
<body>
</body>
</html>
1. В теге <body> определить цвет фона и цвет
текста, задав значения соответствующим
параметрам.
2. Определить размер и месторасположение
названия web-документа, оформив его
парным заголовочным тегом <h> </h>.
3. Оформить название web-документа цветом,
отличным от цвета остального текста,
применив к нему парный тег <font> </font>.
4. Набрать необходимый текст.
5. Сохранить изменения, внесенные в html-
документ (имя файла – Familia.htm, тип файла
– «все файлы»);
6. Для просмотра внесенных изменений в
браузере, нажать кнопку «Обновить».
<html>
<head>
<title> Работа с изображениями в HTML
</title>
</head>
<body bgcolor=#808000 text=#993300>
<h1 align="center">
<font color=#00ffff>
Все о картинках
</font>
</h1>
Для размещения на web-страницах
картинок используются графические файлы
форматов GIF, JPEG и PNG.
</body>
</html>
Экспериментальная часть:
Изменяя 6-ти разрядный шестнадцатеричный числовой код #RRGGBB найти оптимальное сочетание цветов текста и фона на странице, используя
правило «контраста».
Отображается в строке
заголовка браузера при
просмотре страницы.
Скачать материал

Информатика - еще материалы к урокам: