Тема урока: «Язык разметки гипертекста 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.
Актуализация опорных знаний.
·
Как вы можете определить понятие «Интернет»?
·
Что такое браузер?
·
Какие виды браузеров Вы знаете?
·
Как называются документы, которые мы можем
просматривать в программе-
·
браузере?
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.
Итоги урока. Проверка кроссворда. Вопросы учеников.
В
ходе всего урока учащиеся по мере поступления информации отгадывали кроссворд
(приложение 2). Учащиеся сами проверяют кроссворд (слайд с ответами на доске) и
выставляют количество набранных баллов.
6.
Домашнее задание: выучить конспект, создать собственную страничку с помощью html-языка на свободную тему.
Приложение 1.
Основные теги HTML.
В столбце «/»
отмечается наличие парного (закрывающего) тега: + (необходим), - (отсутствует), ± (имеется, но необязателен).
|
Тег
|
/
|
Описание
и назначение
|
|
|
|
служебные
|
|
<HEAD>
|
+
|
«голова» html-документа, здесь располагается служебная информация
|
|
<BODY>
|
+
|
«тело» документа
c link – цвет гиперссылки
c alink – цвет
активной гиперссылки
c vlink – цвет посещённой
гиперссылки
c text – цвет основного
текста
c bgcolor – цвет
фона страницы
c background –
адрес графического файла, который будет использован в качестве фона страницы
|
|
<TITLE>
|
+
|
заголовок
странички
|
|
|
|
абзац
|
|
<P>
|
±
|
начало абзаца
c align – выравнивание
(left, right, center, justify)
|
|
<CENTER>
|
+
|
выравнивание
содержимого по центру
|
|
<BR>
|
–
|
разрыв строки,
переход на новую строку
|
|
<H1>..<H6>
|
+
|
заголовки (принимает
значения в диапазоне 1-6)
c align – выравнивание
|
|
|
|
текст
|
|
<FONT>
|
+
|
размер и цвет
текста
c color – цвет текста
c face – имя или
список имён шрифтов через запятую
c size – размер
|
|
<B>
|
+
|
полужирное
начертание
|
|
<I>
|
+
|
курсивное
начертание
|
|
<U>
|
+
|
подчёркнутый
текст
|
|
<S>
|
+
|
зачёркнутый текст
|
|
<SUP>
|
+
|
верхний индекс
|
|
<SUB>
|
+
|
нижний индекс
|
|
<MARQUEE>
|
+
|
бегущая строка
c behavior – тип движения (alternate, scroll, slide)
c bgcolor – цвет
фона
c direction – направление движения (left, right, up, down)
c height – высота
строки при вертикальном движении
c width – ширина
строки при горизонтальном движении
c scrollamount –
скорость в пикселях на движение
|
|
|
|
таблица
|
|
<TABLE>
|
+
|
вставка таблицы
c align –
выравнивание таблицы
c background –
адрес фонового изображения
c bgcolor – цвет
фона
c border – толщина рамки
c width и height
|
|
<TR>
|
+
|
строка таблицы
|
|
<TD>
|
+
|
ячейка таблицы
|
|
|
|
изображение или видеоклип
|
|
<IMG>
|
–
|
вставка
изображения
c src – адрес графического изображения (файла)
c align –
выравнивание изображения в окружающем тексте (absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top)
c alt – замещающий
текст
c border – толщина
рамки
c width и height – ширина и высота изображения
c hspace и vspace – горизонтальные и вертикальные поля вокруг изображения
|
|
|
|
гиперссылка
|
|
<A>
|
+
|
гиперссылка
c href – адрес
c target – место
загрузки документа:
ü
_blank – новое окно
ü
_parent – родительский фрейм
ü
_self – текущее окно или фрейм
ü
_top – во всё окно браузера
|
|
|
|
фрейм
|
|
<FRAMESET>
|
+
|
разбивает окно
браузера на фреймы (кадры или подокна)
c border – толщина
рамки
c cols и rows – количество частей по вертикали и горизонтали
|
|
<FRAME>
|
±
|
загружает
страницы во фрейм (кадр)
c src – адрес
странички, размещаемой в кадре
c scrolling – отображение полос прокрутки (auto, no, yes)
|
Приложение 2.
Кроссворд на тему: Язык разметки
гипертекста HTML.
|
|
|
|
|
|
|
|
|
|
|
|
|
11
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
12
|
|
b
|
|
|
|
|
|
|
|
|
|
|
|
13
|
|
|
1
|
f
|
r
|
a
|
m
|
e
|
|
|
|
|
|
|
|
|
|
m
|
|
14
|
|
o
|
|
c
|
|
|
|
|
|
|
|
|
|
|
2
|
a
|
l
|
i
|
g
|
n
|
|
k
|
|
|
|
|
|
|
|
15
|
|
|
|
r
|
|
m
|
|
t
|
|
g
|
|
16
|
|
|
|
|
|
i
|
|
17
|
|
q
|
|
g
|
|
|
|
r
|
|
m
|
|
|
|
|
|
n
|
|
h
|
|
u
|
|
3
|
b
|
g
|
c
|
o
|
l
|
o
|
r
|
|
|
|
4
|
t
|
i
|
t
|
l
|
e
|
|
|
|
|
|
u
|
|
z
|
|
|
|
|
|
e
|
|
m
|
|
e
|
|
18
|
|
|
|
n
|
|
i
|
|
|
|
5
|
t
|
r
|
|
l
|
|
|
|
t
|
|
|
|
d
|
|
l
|
|
|
|
|
|
n
|
|
19
|
6
|
b
|
o
|
d
|
y
|
|
|
|
|
l
|
|
|
|
7
|
c
|
e
|
n
|
t
|
e
|
r
|
|
20
|
8
|
o
|
p
|
e
|
r
|
a
|
|
|
|
|
|
t
|
|
a
|
|
|
|
h
|
|
|
|
|
|
|
|
|
|
|
|
|
9
|
b
|
o
|
r
|
d
|
e
|
r
|
|
|
|
|
|
|
|
|
|
|
|
|
l
|
|
|
10
|
a
|
|
|
|
|
|
|
|
|
|
|
|
|
|
e
|
|
|
|
d
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
По горизонтали:
1. Тег, который загружает страницы во фрейм;
2. Атрибут, выполняющий размещение объектов (текста, изображений, таблиц)
на странице;
3. Атрибут, задающий цвет фона странички;
4. Тег, подписывающий заголовок странички;
5. Тег, обозначающий строку таблицы;
6. Тег, который обозначает “тело” документа;
7. Тег, размещающий объекты по центру странички;
8. Один из наиболее популярных браузеров;
9. Атрибут, задающий толщину таблицы или рамки рисунка;
10. Тег, с
помощью которого создаются гиперссылки.
По вертикали:
11. Атрибут,
который позволяет сделать картинку фоном странички;
12. Тег,
позволяющий изменять цвет текста;
13. Тег, с
помощью которого создаются бегущие строки;
14. Тег,
позволяющий размещать картинки на web-страничке;
15. Глобальная
компьютерная сеть;
16. Один из
наиболее популярных браузеров;
17. Язык
гипертекстовой разметки;
18. Тег,
обозначающий столбец таблицы;
19. Тег,
необходимый для создания таблицы на web-страничке;
20. Тег, в
котором располагается служебная информация.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.