УРОК Тема: Цели урока:
advertisement
УРОК № 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 Домашнее задание: повторение по теме
