Никитенко Ольга Александровна КГУ «Средняя школа №13» г. Усть-Каменогорск Конспект урока по информатике Тема урока: Создание Web-страницы. Цель урока: Разобрать основные этапы создания Web-страниц. Задачи урока: обучающая: научиться создавать простейшие Web-страницы в текстовом редакторе Блокнот ; развивающая: развитие логического мышления, понятийного мышления, познавательного интереса. воспитательная: воспитание аккуратности, дисциплинированности, самостоятельности. Тип урока: урок - практическая работа. Вид урока: обычный, продолжительность – 45 мин. Используемые на уроке методы работы: фронтальная, индивидуально-групповая. Оборудование урока: 1.компьютеры; 2. раздаточный материал в виде карточек с заданиями. План урока: 1.Организационная часть (2 мин) 2.Актуализация знаний(3 мин) 3.Практическая работа (32 мин) 4.Подведение итогов урока (3 мин) 5.Домашнее задание (1 мин) Ход урока 1. Организационная часть. Сообщение темы и цели урока, план работы на уроке. 2. Актуализация знаний. Учитель задает вопросы: что такое гипертекст; что такоеWEB-страница, WEB-сайт; WEB-дизайн; Объяснение нового материала Форматирование шрифта. Практическая работа. Учитель проводит практическую работу, используя раздаточный материал. Для помощи ученикам также на каждом компьютере размещены справочные материалы: таблица безопасных цветов и обучалка с основными тегами. 3. Язык разметки гипертекста HTML Для подготовки html-файла можно использовать текстовый редактор Блокнот. <HTML> <HEAD> <TITLE> Название окна Web-страницы (свое)</TITLE> Никитенко Ольга Александровна КГУ «Средняя школа №13» г. Усть-Каменогорск </HEAD> <BODY ПАРАМЕТРЫ> <!--Дальше идет текст, например, такой.-- > Меня зовут Елена Мне 21 год. Я хочу стать Web-дизайнером. Это моя первая Web-страница. Тут я могу писать любой текст, например, про меня и мои интересы. Я помещу файл на сервере, и мою страницу смогут увидеть в разных концах мира. </BODY> </HTML> В середине пары тегов <BODY параметры>…</BODY> записывают (то есть программируют) то, что должно отображаться в окне браузера. Задание 1. Создайте с помощью текстового редактора приведенный выше html-файл и сохраните его в своей папке с названием FAIL 1.html. Тег <BODY> запишите так <BODY TEXT=”red”>. Откройте файл в браузере, т.е. перейдите в свою папку и дважды щелкните на файле file_1.html. Обратите внимание, что текст на экране расположен по другому, чем в файле: нет абзацев и абзацного отступа, текст выровнен по левому краю. Поэкспериментируйте с разными значениями параметров BGCOLOR и TEXT. Для переключения между режимом просмотра WEB-страницы в браузере и текстом HTML-файла используйте меню ВИД В виде HTML Задание 2. Отформатируйте текст в файле FAIL 1.html следующим образом и сохраните его в файле file 2.htm: <HTML> <HEAD> <TITLE> My Web-page </TITLE> </HEAD> <BODY BGCOLOR =”yellow” TEXT =”navy”> <CENTER><H1>Привет! </H1> <H2> Меня зовут Елена. </H2> </CENTER> <HR> <H3> Мне 21 лет. </H3> <H4> Я хочу стать Web-дизайнером. </H4> <HR> Это моя <B> вторая </B> попытка создать Web-страницу. Я уже умею пользоваться заголовками, формировать текстовые абзацы, вставлять линии. Позже я научусь вставлять <I> фотографии, картинки, звук </I> путем гиперссылок на соответствующие <U> графические, звуковые или видеофайлы </U>.<P> Я сохраню этот файл на диске и открою его в браузере. <P> Эту Web-страницу я буду усовершенствовать. Ее еще рано размещать на сервере. <HR> </BODY> </HTML> Просмотрите этот файл с помощью браузера и поэкспериментируйте с тегами форматирования текста. Поэкспериментируйте с размерами окна, в котором демонстрируется документ и удостоверьтесь, что браузер автоматически заменяет расположение текста, чтобы его можно было просматривать без горизонтальной линии прокрутки (текстовые редакторы этого не делают). 4. Подведение итогов урока – учащиеся должны предоставить работу учителю в виде созданной, по заданию Web-страничке. 5. Домашнее задание: повторить конспект. Никитенко Ольга Александровна КГУ «Средняя школа №13» г. Усть-Каменогорск