|
|
|
КОНСПЕКТ УРОКА ДЛЯ 8 КЛАССА
Преподавателя информатики и ИКТ
Вяткиной Надежды Леонидовны
Тема: Создание WEB – страниц в формате HTML
ЦЕЛИ УРОКА:
1. Дидактическая:
познакомить обучающихся с основами HTML программирования.
2. Развивающая: Развивать знания обучающихся в области
информационных технологий.
3. Воспитательная: Показать важность знаний и умений в сфере
информационных компьютерных технологий.
Вид занятий (тип урока): изучение нового материала.
Организационные формы обучения: лекция.
Вид и формы контроля знаний: фронтальный опрос.
Домашнее задание
Ход занятия
1. Организационный момент.
2. Сообщение темы и цели занятия.
3. Изучение нового материала.
4.
Практическая работа
5. Подведение итогов занятия.
6. Домашнее задание.
ТРЕБОВАНИЯ К ЗНАНИЯМ И УМЕНИЯМ:
Обучающиеся
должны
знать:
- что такое Web-страница;
- как менять фон Web-страницы;
- принципы построения Web-страницы;
- способы форматирования информации в Web-странице.
Обучающиеся должны уметь:
-
создавать простейшие Web-страницы;
- просматривать Web-страницы;
- вставлять информацию через буфер обмена;
- вставлять рисунки из файла;
- работать с таблицами;
- делать границы таблицы невидимыми;
ХОД УРОКА
Организационный момент
1. Приветствие;
2. Проверка готовности учеников к уроку;
ОСНОВНЫЕ ПОНЯТИЯ
HTML
Термин HTML (HyperText Markup Language) означает язык
маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской
лаборатории физики элементарных частиц Тим Бернерс-Ли.
Прежде чем преступить к
созданию своих Web – страниц необходимо познакомиться с основными понятиями и
терминами данного раздела.
Сайт - это набор страниц в формате HTML которые лежат на Web – сервере.
Web – сервер – это постоянно подключенный к Интернету компьютер,
который передает эти странички по запросу пользователей.
Web – узел – это намного больше чем совокупность Web – страниц. Это и
система гиперссылок, связывающая узел в единое целое, и единое стилистическое
оформление узла, и своевременное обновление находящейся информации на узле, и
скорость загрузки отдельных страниц, и многое другое.
Домашняя страница – это Web – страница, которая передается сервером по запросу
пользователя, указавшего в запросе имя Web, но не задавшего имени конкретной
страницы.
Язык HTML расшифровывается как «язык гипертекстовой разметки».
Файл HTML – это обычный текстовый файл с расширение htm или html,
содержащий текст страницы, который мы видим в нашем браузере, и некоторые
управляющие записи – теги.
Интернет страницы можно создавать несколькими способами.
Мы рассмотрим первый способ создания
при помощи программ Блок
нот
и Internet
Explorer.
Запустите программу блокнот и используя специальные коды – теги, запишите
программный код для создания своей страницы (в ходе работы студенты пользуются инструкционной
картой с тегами).
Обязательные тэги HTML
<html> ... </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка
</html> должна завершать HTML-документ.
<head> ... </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо
наименования документа (см. описание метки <title> ниже), в этот раздел
может включаться множество служебной информации, о которой мы обязательно
поговорим чуть позже.
<title> ... </title>
Все, что находится между метками <title> и </title>, толкуется
браузером как название документа.Internet Exploerer, например, показывает название текущего документа в заголовке
окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер.
<body> ... </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело,
собственно, и определяет содержание документа.
<H1> ... </H1> — <H6> ... </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести
различных уровней. Заголовок первого уровня — самый крупный, шестого уровня,
естественно — самый мелкий.
<P> ... </P>
Такая пара меток описывает абзац. Все, что заключено между <P> и
</P>, воспринимается как один абзац. Метки <Hi> и <P> могут
содержать дополнительный атрибут ALIGN, например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>
Пример программы записанной в блокноте:
<HTML>
<HEAD>
<BODY>
<BR><CENTER><I><B><FONT SIZE=7><HR> КОЛЛЕДЖ
СЕРВИСА И ТУРИЗМА</B></BR></CENTER></I></FONT SIZE></HR>
</HTML>
</HEAD>
</BODY>
Внешний вид готового документа в Internet Explorer:
После того как программа была написана в Блокноте сохраняем файл с расширение
html, закрываем. Открываем программу Internet Explorer – Файл – Открыть – ищем
наш сохраненный текстовый документ – открываем.
ИНСТРУКЦИОННАЯ КАРТА
|
Теги |
Назначение |
|
<HTML> |
Открытие и закрытие документа |
|
<HEAD> |
Начало и конец заголовка |
|
<BODY> |
Начало и конец документа |
|
<BR></BR> |
Перевод строки |
|
<HR></HR> |
Горизонтальный разделитель |
|
<CENTER></CENTER> |
Выравнивание по центру |
|
<ADDRESS> |
Адрес автора |
|
<B></B> |
Жирный шрифт |
|
<I></I> |
Курсив |
|
<SUB> |
Верхний индекс |
|
<SUP> |
Нижний индекс |
|
<FONT SIZE= «х»></FONT> |
Размер шрифта от 1 до 7 |
|
<FONT COLOR= «х»> |
Цвет шрифта |
|
<FONT FACE= «ARIAL»> |
Гарнитур шрифта |
|
<UL> |
Создание маркированного списка |
|
<OL> |
Создание нумерованного списка |
|
<IMG SRC= «URL»> |
Вставка изображения |
|
<BODY BACKGROUND= «URL»> |
Фоновое изображение |
|
<BODY BGCOLOR= «x»> |
Цвет фона |
|
<BODY TEXT= «x»> |
Цвет текста |
|
<BODY VLINK= «x»> |
Цвет присмотра ссылки |
|
<BODY LINK= «x»> |
Цвет ссылки |
|
<BODY ALINK= “x”> |
Цвет активной ссылки |
ПРАКТИЧЕСКАЯ РАБОТА
Для закрепления темы ученики пробуют создать Web – страницы.
Темы выбираются произвольно.
ИТОГИ УРОКА
Закрепление материала:
1. Сколько способов создания HTML – страниц Вы знаете, и какие?
2. Какая функциональная кнопка изменяет вводимый текст в Internet Explorer?
3. Какие правила дизайна необходимо соблюдать при создании HTML-документа?
4. Какова последовательность действий при создании HTML-документа во FrontPage?
5. Как осуществляется подготовка текста HTML-документа средствами FrontPage?
ДОМАШНЕЕ ЗАДАНИЕ
Рабочие листы
к вашим урокам
Скачать
6 663 020 материалов в базе
Настоящий материал опубликован пользователем Вяткина Надежда Леонидовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Мини-курс
3 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.