Тема урока: Создание вебсайтов
– раскрыть назначение веб-сайтов и смысл их использования
– обобщить и систематизировать знания о структуре веб–
– вспомнить с учащимися основные теги и атрибуты для создания гиперссылок
– применение методов построения структуры страницы на основе изученных тегов
– развитие умения, используя язык разметки гипертекста, создать веб-
– актуализация сведений из полученного ранее опыта
– развитие процессов мышления и познавательных интересов
– развитие грамотной речи
– формирование навыков самоорганизации
– способствовать воспитанию информационной культуры учащихся
– формирование настойчивости в достижении поставленной цели, умения работать
– воспитывать аккуратность, внимательность, дисциплинированность
Тип урокаурок повторения и обобщения изученного ранее материала
( комбинированный урок)
Формы работы с учащимися
– практическая работа за компьютером
Необходимое техническое оборудование
Планируемые образовательные результаты урока
– закреплять навыки построения структуры – файла, знания работы в среде языка
– сформировать навыки работы с разными видами тегов
– понимать учебную задачу
– составлять план действий и осуществлять решение учебной задачи
– слушать вопросы учителя и отвечать на них
– проявлять интерес к изученному материалу
– развивать следующие качества: прогнозирование, творчество, логическое мышление.
информационным ресурсам. Любой протокол это набор правил, которые
используются компьютерами для обмена информацией. Среди протоколов
Интернета самый распространенный – HTTP (Hyper Text Transfer Protoсol).
Используются FTP (для присоединения и загрузки файлов), FILE (для доступа к
файлам на локальных дисках), протокол для электронной почты и некоторые
Язык HTML (HyperText Markup Language, язык разметки гипертекста) —
это язык, на котором создаются страницы. HTMLдокументы могут
просматриваться различными типами Wбраузеров. Когда документ создан с
использованием HTML, Wбраузер может интерпретировать HTML для
выделения различных элементов документа и первичной их обработки.
Использование HTML позволяет форматировать документы для их представления
с использованием шрифтов, линий и других графических элементов на любой
системе, их просматривающей.
Web-страницы могут быть созданы с помощью
1) обычного текстового редактора;
2) редактора, способного сохранять в формате HTML;
HTML-документы сохраняются на диске как обычные текстовые документы
в формате . Для распознавания Web-страниц по их именам общепринято
обозначать такие файлы использованием расширений .(для Windows 3.1)
или .(для Windows 95/98//Macintosh
Кроме полезного текста в HTML-документах используются специальные
управляющие последовательности символов —
Чаще всего тэги используются попарно, окружая размеченные фрагменты
текста. Такие тэги называются контейнерами. Закрывающийся тэг отличается от
начального только присутствием символа “/” добавляемого перед именем тэга.
При интерпретации тэгов браузер не делает различия между строчными и
прописными буквами. Поэтому сами тэги можно набирать на любом регистре.
Зачастую параметр (атрибут) является необязательной величиной и его можно
III. Выполнение лабораторнопрактической работы.
1. Исходные файлынаходятся в папке
Перед выполнением задания скопируйте все файлы из папки ЦВЕТЫ
2. Загрузить программу ПУСК – Программы – Стандартные
3. Открыть готовый текстовый файл « »
Замечание. На каждом шаге будете добавлять новый тэг – он выделен жирным
шрифтом. Остальные тэги остаются без изменения.
Кто разрабатывает сайты? Сложно ли создавать сайты?
Ответьте на вопросы
Web-страница имеет расширение: Укажите правильный вариант ответа: xls txt html Вопрос 3.
Для создания Web-страниц используются Web-редакторы: Укажите правильный вариант ответа: DreamWeaver Word Paint Вопрос 7.
Что такое гиперссылка? Укажите правильный вариант ответа: Текст, выделенный полужирным шрифтом Указатель на другую Web-страницу Выделенный фрагмент текста Вопрос 9.
Для просмотра Web-страниц в Интернете используют программу: Укажите правильный вариант ответа: MS Word Блокнот Google Chrome Вопрос 10.
Установите соответствие тэга на совершаемое им действие Тэг Действие Содержит основное содержание Web- страницы Начало и конец Web- страницы Создание гиперссылки Горизонтальный разделитель Создание маркированного списка Создание абзаца Содержит название Web- страницы Вставка рисунка
Установите соответствие тэга на совершаемое им действие Тэг Действие Цвет шрифта Полужирный шрифт Размер шрифта Размер заголовка Курсивный шрифт Абзац с выравниванием Вставка формы Цвет фона
Деловая игра “Анализ наиболее успешных сайтов” Задание. Ваши друзья Web-дизайнеры попросили оценить их творчество – созданные ими Web-сайты. Чтобы разработать критерии оценки и помочь вам качественно оценить сайты, они нашли в Интернете статью Якоба Нильсена – успешного программиста и инженера, работающего в сфере Web-дизайна, кратко сформулировали критерии оценки Web-сайтов и выписали их в таблицу. Свободная энциклопедия “Википедия”, статья про Якоба Нильсена
Официальный портал мэра и правительства г. Москвы Официальный сайт ГБОУ Школа №14 9 4 г. Москвы Официальный сайт МБОУ Лицей №60 г. Уфы Сайт свободной энциклопедии «Википедия» Сайт «Памятники Воинской славы в городе Уфе Деловая игра “Анализ наиболее успешных сайтов”
Создание страницы “Мой фотоальбом” 5) Создать Web -страницу «Мой фотоальбом» – foto . html . На ней могут присутствовать: – Заголовок «Мой фотоальбом»; Создана таблица из нескольких столбцов и строк; Различные фотографии, рисунки, расположенные внутри ячеек таблицы; – Фон Web -страницы; – Гиперссылка «Назад» на главную страницу Web -сайта.
Создание страницы “Гостевая книга” 6) Создать Web -страницу «Гостевая книга» – gosti . html . На ней могут присутствовать: – Заголовок «Гостевая книга»; – Личные фотографии, рисунки; Формы: текстовое поле и текстовая область, предназначенные для ввода пожеланий и комментариев посетителями сайта в результате его просмотра; – Фон Web -страницы; – Гиперссылка «Назад» на главную страницу Web -сайта.
Урок понравился, у меня все получилось Урок понравился, но у меня не все получилось Урок не понравился, у меня не все получилось
Урок практикум по теме : «Способы создания сайтов. Основы HTML»
ЦЕЛИ И ЗАДАЧИ УРОКА:
1. Создайте папку site (Файл-Создать-Папку).
2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).
3. Наберите следующий HTML-код:
4. Сохраните под именем index.htm в папке site.
5. Закройте текстовый редактор Блокнот.
6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:
7. Откройте двойным щелчком файл index.htm для просмотра в браузере. Проанализируйте полученный результат.
8. Оформим фразу “Давайте знакомиться – ” как заголовок. Для этого откроем HTML-код нашей страницы:
9. Зададим выравнивание заголовка “по центру”:
10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами
11. Добавим на нашу страницу картинку.
12. Вставим гиперссылки и посмотрим на полученную страницу
1 СТРАНИЦА САЙТА
13. Откройте текстовый редактор Блокнот .
14. Наберите следующий HTML-код:
15. Сохраните под именем index1.htm в папке site.
16. Закройте текстовый редактор Блокнот.
17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:
18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат.
19. Оформим фразу “ ” как заголовок. Для этого откроем HTML-код нашей страницы:
20. Зададим выравнивание заголовка “по центру”:
21. Создадим главный нумерованный список основных категорий ПО
22. Добавим вложенный список.
23. Добавим на нашу страницу картинку.
24. Вставим гиперссылки и посмотрим на полученную страницу
2 СТРАНИЦА САЙТА
ГПОУ «Шилкинский многопрофильный лицей»
УРОК ПО ИНФОРМАТИКЕ
Тема: «Создание сайтов»
Группа ЭТП 2
Преподаватель: Д. В. Рохлецова
Тема урока: Создание Webсайтов.
Тип урока: урок закрепления и развития умений и навыков.
Технология: проектное обучение с применением современных информационно
Оборудование и программное обеспечение:
операционная система MS Windows XP, MS Office.
Дидактическое сопровождение: презентация к уроку, плакаты, карточки с заданиями,
Цель урока: формирование у обучающихся знания об основных правилахWeb
дизайна,закрепление иразвитие знаний, умений и навыков создания простейшего Web
сайта с использованием языка разметки гипертекста HTML.
1) Образовательная создать условия для дальнейшего ознакомления с технологией
создания Webсайтов, укрепить и применить приобретенные знания, умения и
навыки при создании простейшего Webсайта с помощью языка HTML на практике.
2) Развивающая способствовать расширению кругозора обучающихся, развитию
их эстетического восприятия и творческих способностей; развитию логического
мышления: анализу, синтезу, обобщению; развитию памяти, внимательности.
3)Воспитательная содействовать воспитанию активности обучающихся, стремления
к реализации себя в обществе; содействовать совершенствованию навыков делового
взаимодействия, выработки собственной точки зрения и аргументированного её
отстаивания; способствовать воспитанию организованности, самостоятельности и
стремления представить результаты своих творческих работ в хорошем и качественном
Подготовка к уроку:
1) Для урока были подготовлены презентация к уроку. Слайды презентации
демонстрируются обучающимся с помощью проектора. Также в качестве
наглядного дидактического материала используются плака
2) Для проверки и оценки теоретических знаний обучающихся по данной теме были
подготовлены несколько вопросов для теста и интерактивное задание для установления
соответствия указанного тэга на выполняемое им действие.
3) В качестве раздаточного материала обучающимся были подготовлены учебные
пособия с теорией по языку HTML и основным правилам Webдизайна, карточка с
таблицей для оценивания сайта по основным критериям (см. Приложение 1, 2),
карточка с инструкцией и рекомендациями по созданию простейшего Webсайта (см.
Вступительное слово учителя.
Постановка темы, цели и задач урока.
Актуализация знаний. Повторение
1) Тестовый контроль на знание основныхпонятий по созданию Webсайтов;
2) Интерактивное задание на знание основныхтэгов языка HTML (установление
соответствияуказанного тэга на выполняемое им действие).
Здоровьесберегающий элемент урока.
Физкультминутка (12 мин).
Закрепление и применение
приобретенных знаний, умений и
навыков на практике. Творческая работа
Индивидуальная (парная) практическая работа
обучающихся за компьютером. Создание Web
Подведение итогов творческой работы
Рефлексивный анализ обучающимися своей
творческой деятельности. Совместное
оценивание созданных Webсайтов.
Подведение итогов урока. Выставление
Анализ урока и деятельности обучающихся на
Домашнее задание. Заключительное
Работа с конспектом лекции, дополнительной
литературой, доработка сайтов
1. Организационный этап.
– Здравствуйте, ребята! Я рада приветствовать всех на этом уроке!
2. Вступительное слово учителя. Мотивация обучающихся. Постановка темы,цели и
Преподаватель формулирует тему урока и ставит перед обучающимися цели и
– Сегодня мы продолжим с вами изучать одну из интересных тем
информатики«СозданиеWebсайтов». К сегодняшнему дню мы уже знаем с вами, что
представляют собой Webсайты и для каких целей они создаются. Знаем, какими
способами можно создавать Webсайты. И выбрали для себя один из способов — язык
разметки гипертекста HTML. Сегодня на уроке наша основная задача – на основе
полученных знаний и умений создать вебсайт «Визитная карточка».
– Кто разрабатывает Webсайты? Web-сайты могут разрабатываться как web-
программистами и webдизайнерами, так и обычными пользователями Интернета, так
как вопрос создания сайтов становится в наше время всё более актуальным. Интернет
всё прочнее входит в нашу жизнь и предоставляет возможности дополнительного
заработка тем, кто владеет собственными сайтами, и тем, кто занимается
профессиональным их созданием.
– А сложно ли создавать сайты? Нам предстоит выяснить это на данном
практическом занятии. Каждый из вас продолжит создание персонального Webсайта, в
котором можно будет разместить информацию о себе, своей семье и друзьях, о своих
интересах и увлечениях, фотографии, формы и т.д. На дом вам было дано задание
подобрать соответствующую информацию о себе, фотографии, рисунки и всё то, что вы
хотели бы представить на своём сайте
– Каждому из вас предоставляется возможность проявить все свои
творческие и дизайнерские способности при создании и оформлении сайта. В
конце урока мы вместе оценим ваши проектывыделим среди них самые лучшие и
«не очень», обсудим трудности, с которыми вы, может быть, столкнетесь при
3. Актуализация знаний. Повторение пройденного материала.
(фронтальный) теоретический опрос обучающихся.
– Для проверки вашей готовности к созданию сайтов проведем небольшой тест на
проверку знаний основных понятий по созданию Webсайтов. Для этого я вам
подготовила несколько вопросов с вариантами ответами, среди которых вы выбираете
правильный. И подготовила интерактивное задание на знание основных тэгов языка
HTML, в котором нужно будет установить соответствие указанного тэга на
совершаемое им действие.
Преподаватель открывает соответствующие слайды презентации
(сценария) урока и проводит индивидуальный (фронтальный) теоретический
1) Тестовый контроль на знание основных понятий по созданию Webсайтов.
Вопрос: Публикации во Всемирной паутине
o Создания гиперссылок наWeb-
Вопрос: Web-страницы сайта объединяются
Вопрос: Web-сайт можно создать с помощью
Школьный алгоритмический язык
Вопрос: Что такое гиперссылка?
o Указатель на другуюWebстраницу
Вопрос: Для просмотраWebстраниц в
2) Интерактивное задание на знание основных тэгов языка HTML (установление
соответствия указанного тэга на выполняемое им действие).
Содержит основное содержание Webстраницы
Начало и конец Webстраницы
Содержит название Webстраницы
4. Здоровьесберегающий элемент урока. Физкультминутка (12 мин).
Прежде чем начать и правильно настроиться на нелегкую работу по созданию
персонального сайта, провести с обучающимися небольшую физкультминутку. Для
этого заранее был подготовлен видеоролик с физкультминуткой длительностью в 1
минуты, опубликованный в сети Интернет на сайте «Videouroki.net».
Так как компьютер для нас является не только средством для развлечений, но и
инструментом для серьёзной работы, напомнить обучающимся, что при работе за
компьютером они всегда должны помнить правила поведения и техники безопасности
в кабинете информатики.
5. Закрепление и применение приобретенных знаний, умений и навыков на
практике. Творческая работа обучающихся. Индивидуальная (парная) практическая
работа обучающихся за компьютером. Создание простейшего Webсайта «Визитная
Обучающимся в помощь раздаются учебные пособия с теорией по языку
HTML, карточка с инструкцией по созданию Webсайта, карточка с примерным
планом представления Webсайта и анализа своей творческой деятельности.
Тема для сайта была подобрана таким образом, чтобы каждый обучающийся мог
проявить свои знания, творческие и дизайнерские способности при создании и
Роль преподавателя во время такой работы сводится к наблюдению за работой
обучающихся и оказанию оперативной помощи при возникновении сложных ситуаций,
к обсуждению какихто общих вопросов и разбору характерных ошибок.
6. Подведение итогов творческой работы обучающихся.
обучающимися своейтворческой деятельности. Совместное обсуждение и оценивание
В конце урока каждый обучающийся должен сохранить окончательный вариант
созданного Webсайта, может оценить его по желанию, используя таблицу с критериями
оценивания сайта. Продемонстрировать созданный персональный сайт своим
одноклассникам и учителю, провести анализ своей творческой деятельности по
представленному в учебном пособии плану или в свободной форме. В ходе
демонстрации проекта обучающиеся могут задавать друг другу какиелибо возникшие
вопросы по представленному сайту, выделять его достоинства и недостатки, высказывать
свои пожелания подальнейшему развитию сайта. При выборе наиболее лучших сайтов
учитывается общее мнение учителя и обучающихся.
Примерный план для представления Webсайта и анализа своей творческой
1) Цель и основная идея создания вашего сайта.
2) Из каких информационных блоков состоит ваш сайт?
3) Соответствует ли ваш сайт основным принципам Webдизайна?
4) Что определяет успех вашего сайта в большей степени — техническая или
содержательная сторона, дизайн?
5) С какими трудностями вы столкнулись при создании сайта?
6) Всё ли вам удалось успеть сделать? Каковы перспективы развития вашего сайта?
7) Совпадает ли ваша личная оценка за сайт с оценкой одноклассников и учителя?
Считаете ли вы -другому? И почему?
7. Подведение итогов урока. Выставление оценок. Анализ урока и деятельности
– Итак, ребята, мы подошли к заключительному этапу нашего урока.
– Сегодня на уроке мы с вами выяснили, каким должен быть сайт, чтобы он стал
интересен для большого числа пользователей и часто посещаем ими.
– Сегодня на уроке вы сумели соединить в единое целое все приобретенные
знания, умения по технологии создания сайтов с помощью языка HTML, и
использовали их при создании персонального сайта.
– Создание сайта – дело для вас новое, и, естественно, не всё у всех сразу
получается. И в этом нет ничего страшного, так как вы только учитесь этому.
– Кто из вас считает, что разработка и создание Webсайтов — это
довольно трудный и непосильный труд? И почему?
– А кто посчитал это очень увлекательным и интересным делом, и при огромном
своём желании мог бы заняться в будущем профессиональным созданием Webсайтов?
Вопрос каждой группе: понравилось ли вам работать с сайтами? Какие трудности
8. Домашнее задание. Заключительное слово учителя.
Продолжить работу по созданию персонального Webсайта и довести его до
– Ребята! Яжелаю вам продолжить работу по созданию персонального Webсайта
и довести его до совершенства. И если вы разместите свой сайт в сети Интернет, то не
забывайте о нём. Ведь сайт подобен посаженному нами саженцу. Подобно дереву, при
хорошем уходе, он даёт новые побеги — темы, растёт и развивается. И без
постоянного его обновления, сайт может превратиться в одно из засохших деревьев
Интернета — видимость есть, а жизни в нём нет.
– Урок окончен! Успехов вам, ребята! Было приятно с вами работать! До свидания!