Конспект урока "Язык разметки гипертекста HTML" скачать бесплатно


Конспект урока "Язык разметки гипертекста HTML"


Кривенцов Л.А., учитель информатики __ Язык разметки гипертекста HTML
1
Муниципальное общеобразовательное учреждение
средняя общеобразовательная школа №4 г. Асино Томской области
Конспект урока по информатике
на тему:
«Язык разметки гипертекста HTM
учитель информатики
Кривенцов Л.А.,
первая квалификационная категория
2011
Кривенцов Л.А., учитель информатики __ Язык разметки гипертекста HTML
- 2 -
Тема урока: «Язык разметки гипертекста HTML»
Цели и задачи урока:
Сформулировать основные принципы создания WEB-страниц;
Познакомить учеников с основными командами оформления текста;
Продемонстрировать использование этих команд на конкретных примерах
оформления WEB-страниц;
Сформировать навыки и умения создания простейших WEB-страниц;
Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать
свою мысль;
Воспитывать аккуратность, внимательность, вежливость и дисциплинированность,
бережное отношение к своему здоровью.
Тип урока: усвоение новых знаний.
Оборудование: мультимедийная установка, программа презентаций Microsoft Office
PowerPoint 2003, браузер Internet Explorer 6.0 или более новый, раздаточный материал.
Ожидаемые результаты:
В конце урока ученики смогут:
Дать определение таким понятиям:
a. Браузер, гипертекст, тег, атрибут;
b. WEB-страница, WEB-сайт; WEB-дизайн;
c. Язык разметки гипертекста HTML;
Использовать команды языка HTML для форматирования текста;
План урока:
1. Организационный момент (2 мин)
2. Актуализация опорных знаний (5 мин)
3. Изложение нового материала на примерах использования тегов
форматирования (16 мин)
4. Закрепление нового материала путём выполнения практического
задания (10 мин)
5. Итоги урока. Проверка кроссворда. Вопросы учеников (5 мин)
6. Домашнее задание (2 мин.)
Ход урока:
1. Организационный момент.
Приветствие учащихся. Проверка присутствующих. Настрой на урок.
2. Актуализация опорных знаний.
Как вы можете определить понятие «Интернет»?
Что такое браузер?
Какие виды браузеров Вы знаете?
Как называются документы, которые мы можем просматривать в программе-
браузере?
Кривенцов Л.А., учитель информатики __ Язык разметки гипертекста HTML
- 3 -
3. Изложение нового материала на примерах использования тегов форматирования.
Систематизация понятий
a. Тег, атрибут, гипертекст;
b. WEB-страница, WEB-сайт; WEB-дизайн;
c. Язык разметки гипертекста HTML;
Команды (теги), определяющие структуру WEB-документа.
Команды (теги) форматирования текста.
У каждого учащегося имеется таблица с основными тегами html (приложение 1).
4. Закрепление нового материала путём выполнения практического задания.
Для подготовки html-файла можно использовать текстовый редактор Блокнот (текст
задания, приведённый ниже, представлен ученикам в виде текстового документа
задание.txt).
<HTML>
<HEAD>
<TITLE> Название Web-страницы </TITLE>
</HEAD>
<BODY атрибуты>
<!--Дальше идет текст, например, такой.-- >
Меня зовут ____. Мне __ лет.
Это моя первая Web-страница.
Тут я могу писать любой текст.
Я размещу эту страницу в Интернете.
</BODY>
</HTML>
В середине пары тегов <BODY атрибуты>…</BODY> записывают (то есть
программируют) то, что должно отображаться в окне браузера.
Практическое задание: сохраните представленный текстовый файл в свою папку
под названием index с расширением .html.
Тег <BODY> запишите так <BODY TEXT=”red”>. Откройте файл с помощью
браузера. Обратите внимание, что текст на экране расположен по другому, чем в задании:
нет абзацев и абзацного отступа, текст выровнен по левому краю. Поэкспериментируйте с
разными значениями параметров BGCOLOR и TEXT. Для переключения между режимом
просмотра WEB-страницы в браузере и текстом HTML-файла используйте меню Вид
Просмотр HTML-кода.
Просмотрите этот файл с помощью браузера и поэкспериментируйте с тегами
форматирования текста. Поэкспериментируйте с размерами окна, в котором
демонстрируется документ и удостоверьтесь, что браузер автоматически заменяет
расположение текста, чтобы его можно было просматривать без горизонтальной линии
прокрутки (текстовые редакторы этого не делают).
5. Итоги урока. Проверка кроссворда. Вопросы учеников.
Кривенцов Л.А., учитель информатики __ Язык разметки гипертекста HTML
- 4 -
В ходе всего урока учащиеся по мере поступления информации отгадывали
кроссворд (приложение 2). Учащиеся сами проверяют кроссворд (слайд с ответами на
доске) и выставляют количество набранных баллов.
6. Домашнее задание: выучить конспект, создать собственную страничку с помощью
html-языка на свободную тему.
Кривенцов Л.А., учитель информатики __ Язык разметки гипертекста HTML
- 5 -
Приложение 1.
Основные теги HTML.
В столбце «/» отмечается наличие парного (закрывающего) тега: + (необходим), -
(отсутствует), (имеется, но необязателен).
Тег
/
Описание и назначение
служебные
<HEAD>
+
«голова» html-документа, здесь располагается служебная
информация
<BODY>
+
«тело» документа
link цвет гиперссылки
alink цвет активной гиперссылки
vlink цвет посещённой гиперссылки
text цвет основного текста
bgcolor цвет фона страницы
background адрес графического файла, который будет
использован в качестве фона страницы
<TITLE>
+
заголовок странички
абзац
<P>
начало абзаца
align выравнивание (left, right, center,
justify)
<CENTER>
+
выравнивание содержимого по центру
<BR>
разрыв строки, переход на новую строку
<H1>..<H6>
+
заголовки (принимает значения в диапазоне 1-6)
align выравнивание
текст
<FONT>
+
размер и цвет текста
color цвет текста
face имя или список имён шрифтов через запятую
size размер
<B>
+
полужирное начертание
<I>
+
курсивное начертание
<U>
+
подчёркнутый текст
<S>
+
зачёркнутый текст
<SUP>
+
верхний индекс
<SUB>
+
нижний индекс
<MARQUEE>
+
бегущая строка
behavior тип движения (alternate, scroll,
slide)
bgcolor цвет фона
direction направление движения (left, right, up,
down)
height высота строки при вертикальном движении
Кривенцов Л.А., учитель информатики __ Язык разметки гипертекста HTML
- 6 -
width ширина строки при горизонтальном движении
scrollamount скорость в пикселях на движение
таблица
<TABLE>
+
вставка таблицы
align выравнивание таблицы
background адрес фонового изображения
bgcolor цвет фона
border толщина рамки
width и height
<TR>
+
строка таблицы
<TD>
+
ячейка таблицы
изображение или видеоклип
<IMG>
вставка изображения
src адрес графического изображения (файла)
align выравнивание изображения в окружающем тексте
(absbottom, absmiddle, baseline, bottom,
left, middle, right, texttop, top)
alt замещающий текст
border толщина рамки
width и height ширина и высота изображения
hspace и vspace горизонтальные и вертикальные поля
вокруг изображения
гиперссылка
<A>
+
гиперссылка
href адрес
target место загрузки документа:
_blank новое окно
_parent родительский фрейм
_self текущее окно или фрейм
_top во всё окно браузера
фрейм
<FRAMESET>
+
разбивает окно браузера на фреймы (кадры или подокна)
border толщина рамки
cols и rows количество частей по вертикали и
горизонтали
<FRAME>
загружает страницы во фрейм (кадр)
src адрес странички, размещаемой в кадре
scrolling отображение полос прокрутки (auto, no,
yes)
Кривенцов Л.А., учитель информатики __ Язык разметки гипертекста HTML
- 7 -
Приложение 2.
Кроссворд на тему: Язык разметки гипертекста HTML.
13
r
m
m
14
a
i
r
m
q
g
u
3
c
l
i
e
e
18
5
t
b
d
7
n
r
20
p
r
h
9
r
e
a
d
По горизонтали:
1. Тег, который загружает страницы во фрейм;
2. Атрибут, выполняющий размещение объектов (текста, изображений, таблиц) на странице;
3. Атрибут, задающий цвет фона странички;
4. Тег, подписывающий заголовок странички;
5. Тег, обозначающий строку таблицы;
6. Тег, который обозначает “тело” документа;
7. Тег, размещающий объекты по центру странички;
8. Один из наиболее популярных браузеров;
9. Атрибут, задающий толщину таблицы или рамки рисунка;
10. Тег, с помощью которого создаются гиперссылки.
Кривенцов Л.А., учитель информатики __ Язык разметки гипертекста HTML
- 8 -
По вертикали:
11. Атрибут, который позволяет сделать картинку фоном странички;
12. Тег, позволяющий изменять цвет текста;
13. Тег, с помощью которого создаются бегущие строки;
14. Тег, позволяющий размещать картинки на web-страничке;
15. Глобальная компьютерная сеть;
16. Один из наиболее популярных браузеров;
17. Язык гипертекстовой разметки;
18. Тег, обозначающий столбец таблицы;
19. Тег, необходимый для создания таблицы на web-страничке;
20. Тег, в котором располагается служебная информация.