УРОК Тема: Цели урока:

реклама
УРОК № 21
«_06___» __02___2015 г
Класс: 11 «Б»
Тема: Размещение графики на Web-странице, цвета
Цели урока:
 научить учащихся красиво и рационально размещать графику на странице;
 научить использовать тэги HTML для изменения текста.
Задачи урока:
образовательная– Повторение основных понятий раздела программы.
 Развивающая – развитие приемов умственной деятельности (обобщение, анализ, синтез,
сравнение), памяти, творческой активности.
 Воспитательная – стимулирование познавательного интереса учащихся, развитие
уверенности в собственных силах.
Тип урока: комбинированный (изучение нового материала и практическая работа).
Оборудование: компьютер, браузер, блокнот, раздаточный материал.
Метод урока: объяснительно-демонстрационный
I.
Орг. момент. (1 мин)
II.
Актуализация и проверка знаний. (10 мин)
III.
Теоретическая часть. (14 мин)
IV.
Практическая часть. (15 мин)
V.
Выставление оценок (2 мин)
VI.
Итог урока. (2 мин)
VII.
Д/з (1 мин)
Ход урока:
I. Орг. момент.
Приветствие, проверка присутствующих. Объяснение хода урока.
II. Актуализация и проверка знаний. Тест «Проверь себя»
1. Информация во Всемирной паутине реализуется в виде:
б) ВЕБ-сайтов
в) тэгов
г) языка HTML
2. Пара тэгов, заключенная в угловые скобки:
а) браузер
б) гиперссылка
в) контейнер
3. ВЕБ-сайты создаются с помощью языка
а) HTML
б) Visual Basic
в) Turbo Pascal
4. Программа для просмотра ВЕБ-страниц
а) Web-редактор
б) Браузер
в) Turbo Pascal
5. Веб-страницы объединяются между собой с помощью …
а) тэгов
б) гиперссылок
в) Браузера
6. Все файлы, созданные для вашего сайта
должны размещаться на жестком диске
а) внутри одной папки
б) в разных папках
в) внутри одной папки, в которой созданы вложенные папки
7. Для каждой страницы вашего сайта должен быть создан
а) отдельный файл
б) отдельная папка
в) один файл для всех страниц
8. Веб-редактор – это программа для
а) создания веб-страниц
б) просмотра веб-страниц
в) создания гиперссылок
ІІІ Теоретическая часть
Для рационального размещения и удобства чтения текст на Web-странице помещается в
контейнер тэгов абзаца.
<p>Текст абзаца</p>
Абзацы на web-странице отделяются пустой строкой, что способствует улучшению восприятия
при чтении текста.
Для выравнивания текста абзаца в тэг <p> можно добавить параметры выравнивания
<p align=…>Текст абзаца</p>,
где значением атрибута align могут быть
center - выравнивание по центру,
left - выравнивание по левому краю, (задается по умолчанию),
right - выравнивание по правому краю,
justify - выравнивание по ширине.
Пример:
<html>
<head><title>Абзац</title></head>
<body>
<p align=center>Примеры форматирования абзаца<br>
<p align=left>Выравнивание текста по левому краю<br>
<p align=right>Выравнивание текста по правому краю<br>
<p align=justify>Данный текст, если он будет достаточно длинным, покажет нам как можно
выровнять текст по ширине страницы, т.е. будет выровнен по левому и правому краю. Если текст
короткий, то он просто выравнивается по левому краю.<br>
</body>
</html>
Для размещения на Web-странице заголовков и подзаголовков используется тэг
<h…> Текст заголовка </h…>,
где вместо многоточия ставится номер уровня заголовка в порядке убывания от 1 до 6.
Выравнивание заголовков производится с помощью уже известного атрибута align.
Пример:
<html>
<head><title>Форматирование текста</title></head>
<body>
<h1 align=center>Работа с текстом</h1>
<h2 align=center>Примеры форматирования заголовков</h2>
</body>
</html>
Для задания параметров текста используется тэг <font>, имеющий несколько атрибутов:
<font face=… size=… color=…> Текст </font>
Параметры атрибутов:
face - задает шрифт, которым будет напечатан текст, рекомендуется использовать стандартные
шрифты, т.к. других может просто не быть в компьютере, на котором пользователь будет
просматривать данную Web-страницу, например,
<font face=”Arial”>…</font> или <font face=”Monotype Corsiva”>…</font>
size - значение от 7 до 1 в порядке убывания, размер шрифта, по умолчанию размер шрифта равен
4, например,
<font size=7>…</font> или <font size=-2>…</font>
Размер шрифта +2 (-2) означает, что размер шрифта требуется увеличить (уменьшить) на 2
условных единицы относительно текущего размера. Этот способ удобно применять, когда
необходимо выделить небольшой фрагмент текста и вернуться к исходному размеру шрифта.
color - выделение текста некоторым цветом.
Цвет текста можно задать двумя способами:
А) написать английское название цвета, например,
<font color =”red”>…</font> или <font color =”yellow”>…</font>,
Б) задать шестнадцатеричный код цвета в формате “#FF0000” - красный или “#505050”, например,
<font color =#C0C0C0>…</font>
Более полный список цветов можно посмотреть в Приложении 1.
Пример:
<html>
<head><title>Пример форматирования текста</title></head>
<body>
<font face=”Monotype Corsiva” size=5 color=”blue”>Текст напечатан крупно, красивым шрифтом и
только <font size=7>одно слово </font> выделено <font color=#FF0000> красным</font></font>
</body>
</html>
Средства выделения текста (жирность, курсив, подчеркивание и их комбинации).
<b>…</b> - жирный (bold);
<i>…</i> - курсив (italic);
<u>…</u> - подчеркивание (underline).
Комбинация: <b><i><u>Жирный курсив с подчеркиванием</u></i></b>
ІV Практическая работа
Задание № 1. Создание простейшего файла HTML
1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.
2. Запустите программу Блокнот (Notepad).
3. Наберите в окне программы простейший файл HTML.
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
Расписание занятий на вторник
</BODY>
</HTML>
4. Сохраните файл под именем RASP.HTML (обязательно укажите тип файла HTML при сохранении)
в личной папке.
5. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera,
Mozilla Firefox или другую). Для этого, не покидая программу Блокнот (сверните окно на панель
задач), откройте личную папку и двойным кликом по файлу RASP.HTML откройте окно браузера.
Рис.1
На экране вы увидите результат работы, изображенный на рисунке 1.
Задание № 2. Управление расположением текста на экране
1. При необходимости откройте текст Web-страницы в Блокноте (1 щелчок правой клавишей мыши по
файлу RASP.HTML, в контекстном меню выбрать команду Открыть с помощью... и выбрать
программу Блокнот). При необходимости открыть файл в браузере – двойной клик по значку файла
левой клавишей мыши.
2. Внести изменения в файл RASP.HTML, расположив слова Расписание, занятий, на вторник
на разных строках.
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
Расписание
занятий
на вторник
</BODY>
</HTML>
3. Сохраните текст с внесенными изменениями в файле RASP.HTML (меню Файл | Сохранить). Если у
вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу
браузера и обновить эту страницу (кнопка ). Изменилось ли отображение текста на экране?
Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.
Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе
Блокнот и обновлять страницу при ее просмотре в программе браузера.
V Закрепление материала:
Файл с содержанием главной страницы называют ...( INDEX.HTML )
Вступительная страница сайта, которая рассказывает читателям для чего разработан сайт и
какую информацию он содержит называется…(главной)
Режим, при котором компьютер подключен к сети называется ... (Онлайн)
Файл, содержащий Веб- страницу имеет расширение...(html)
Технология HTML состоит в том, что в обычный текстовый документ
вставляются управляющие символы…(Тэги)
V Домашнее задание: повторение по теме
Скачать