Для всех учителей из 37 347 образовательных учреждений по всей стране

Скидка до 75% на все 778 курсов

Выбрать курс
Инфоурок Информатика ВидеоурокиУрок "Процесс разработки WEb-сайта"

Урок "Процесс разработки WEb-сайта"

библиотека
материалов

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН

ТАЛДЫКОРГАНСКИЙ КОЛЛЕДЖ СЕРВИСА И ТЕХНОЛОГИЙ



Предмет ПРОГРАММИРОВАНИЕ


Тема занятия Процесс разработки Web-сайта

Тип урока комбинированный

Цели занятия

Учебная: познакомить учащихся со способами разработки Web-сайта

Развивающая: освоение и систематизация знаний, развитие познавательных интересов, интеллектуальных и творческих способностей путем освоения и использования методов информатики и средств ИКТ при изучении различных учебных предметов;

Воспитательная: воспитание чувства ответственности за результаты своего труда; формирование установки на позитивную социальную деятельность в информационном обществе;


ОБЕСПЕЧЕНИЕ ЗАНЯТИЯ

IBM PC, интерактивная доска

  1. Литература: Н.Т. Ермеков, Информатика 11 класс, Алматы, «Жазушы», 2016

Приветствие, проверка присутствующих)

Объяснение хода урока

II Повторение пройденного материала(20 мин)

Мини-КВН между двумя командами

III. Изложение нового материала.(при объяснении темы помогают учащиеся, им было дано опережающее задание) (20 мин)

IV. Закрепление нового материала (20 мин)

Решение задач по карточкам, самоконтроль. Совместное обсуждение типичных ошибок

V Подведение итогов урока, выставление оценок с комментарием ( 10 мин)

VI. Домашнее задание (5 мин)

VII Рефлексия (3 мин)

1 Повторение пройденного материала в виде мини-КВН между двумя командами

Эпиграфом урока я взяла слова известной раньше песни:

Кто весел – тот смеется,

Кто хочет – тот добьется,

Кто ищет – тот всегда найдет!

Как выяснилось, наши дети не знают кто автор этой прекрасной мелодии и из какого кинофильма эта песня. После того как ребята зарядились энергией они приступили к соревнованию команд. Оно состоит из следующих этапов:

  • Представление команд, пожелания друг другу

  • Тестирование на компьютере

  • Конкурс капитанов

  • Проверка домашнего задания (Узнать ответы на поставленные вопросы из любых видов источников информации)

Для проведения нашего мини-КВН было выбрано жюри в составе трех человек преподавателей. Помогать на протяжении всего урока будут технический консультант (отвечает за компьютер) и два информационных консультанта.

Представление команд

Команда «Серверы»

Мы мощные, сильные

В деле неутомимые.

Рады для Вас стараться-

Информацией запасаться!

Пожелание команде «Гиперссылки»

Пусть всегда удаются любые дела,

Чтоб жизнь интересной, счастливой была.

Команда «Гиперссылки»

Без нас в Интернете

Не обойдетесь Вы.

Путешествовать быстро поможем мы!

Пожелание команде«Серверы»

Будьте умными,

Но не умнее нас!

Будьте веселы,

Но не смешнее нас.

Будьте шустрыми,

Но только после нас!

Тестирование на компьютере

Тест на компьютере по теме «Термины Интернета» (15 вопросов)

Конкурс капитанов

Расшифровать адрес:

Задание капитану команды «Серверы»

http:/www.music.ru/Audio/r/Alex/FK/rindex.html

Ответ: левая часть www.music.ru это адрес узла, а через слеш –каталоги и подкаталоги в нем. Кончается именем файла. Адрес узла строится по доменному принципу. Домен верхнего уровня–самый правый. Ru- домен верхнего уровня в России. Music –домен второго уровня. Это может быть название сервера, фирмы или ее провайдера. Самая левая часть указывает на то, что мы надеемся увидеть wwwWeb страничка. http:/ это префикс (приставка). Она задает протокол-один из методов доступа к ресурсам. http:/ означает, что мы обращаемся к WWW.

Задание капитану команды «Гиперссылки»

ftp://ftp.cdrom.com/pub/Windows/desktop/icons

Ответ: левая часть ftp.cdrom.com это адрес узла, а через слеш каталоги и подкаталоги на нем. Кончается каталогом (тогда берется файл, заданный для данного каталога по умолчанию). Адрес узла строится по доменному принципу. Домен верхнего уровня–самый правый. Com – означает фирму. Cdrom –домен второго уровня. Это может быть название фирмы. ftp–файловый сервер. ftp:// протокол передачи файлов.

Проверка домашнего задания (Узнать ответы на поставленные вопросы из любых видов источников информации)

Вопросы команде Серверы:

  1. Почему телефонный разговор с соседним городом в течение нескольких минут стоит дороже, чем целый час работы в Интернете с компьютерами, находящимися на других континентах?

  2. Как назывался первый Web–браузер?

Ответ: первый Web–браузер назывался MoSaic был разработан в1993 году. Его автор Марк Адерссан.

Вопрсы команде Гиперссылки:

  1. Кто разработал HTML?

Ответ:Тим Бернес Ли в 1993 году.

  1. Что такое служба доменных имен DNS?

Ответ: DNS автоматически подменяет доменное имя компьютера IP адресом.

Подведение итого мини-КВН. Жюри сообщает итоги

2 Объяснение новой темы

Учащиеся помогают, демонстрируя презентации. (они получили опережающее задание).

Преподаватель: WWW–глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы –Web–браузеры. Вся информация в них отображается в виде Web страниц.

Web страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web страница, зависит во многом ее успех в Сети.

Пользователю приятно посещать те Web– страницы, которые имеют стильное оформление, не отягощены чрезмерной графикой.

Создать Web– страницу непросто, но, наверно, каждый человек хотел бы попробовать себя в роли дизайнера. На эту тему у нас запланировано 42 часа, а сегодня у нас первый урок. Тема очень многогранна. Сегодня мы познакомимся с процессом разработки Web– сайта, но не будем затрагивать вопросы его размещения. Это мы рассмотрим подробно, когда создадим сайт. Сейчас нам надо рассмотреть основы языка программирования Web– страниц –HTML, который является общепринятым стандартом WWW. Попытаемся создать небольшую Web –страничку в Блокноте. Познакомимся с возможностями популярных HTML –редакторов, а более подробно на следующих уроках с Front Page.

Объяснять новую тему мне будут помогать учащиеся. Желаю всем успеха!

Тема первой презентации «Процесс разработки Web-сайта». В тетрадь учащиеся записывают только заголовки, а основной текст имеется в текстовом и электронном виде, который они получают.

Существует два способа создания Web –страниц: с помощью языка HTML и с помощью редакторов HTML. Есть свои плюсы и минусы у каждого из способов. Первый способ более трудоемкий, но HTML код одинаково работает на разных платформах. Большинство пользователей выбирают второй способ. С HTML–редакторами работать удобнее, но некоторые ограничены в своих возможностях и генерируют большой код.

Следующий учащийся знакомит с основами языка HTML.

Преподаватель: Основные теги языка HTML имеются в приложении 1. Давайте их рассмотрим. Например, задание цвета шрифта. Используется тег FONT c параметром COLOR. Первые две цифры задают яркость красного цвета, вторые две– зеленого, третьи –синего. Чем больше число, тем выше яркость. Цвета. Используется 16 с/с. Число F –это 15. 15*15=255 .На следующих уроках мы попробуем их использовать в своих Web –страницах. А сегодня в конце урока создадим свою первую Web –страницу.

Слово предоставляется следующему учащемуся. Он знакомит с возможностями популярных редакторов HTML. Более подробно на следующих уроках мы познакомимся с HTML редактором Front Page.

Очень коротко о графике нам рассказывает еще один учащийся.

Закрепление материала. А сейчас надо выполнить практическое задание по карточкам:

Задание №1

Набрать в Блокноте текст и сохранить его как “имя файла.html”. В Internet Explorer он должен выглядеть следующим образом:

Мечтать! Летать! И думать о прекрасном!

Во сне касаться звёзд и облаков.

И верить в то, что это не напрасно.

Что в жизни нашей, будет всё легко.

Не думать о плохом, не жить вчерашним,

Не злиться на судьбу, когда идёт не в масть...

Признаться в чувствах, быть немного грешным..

И НАСЛАЖДАТЬСЯ ЭТОЙ ЖИЗНЬЮ ВСЛАСТЬ!!!

Задание №2

  1. Изменить цвет шрифта в задании №1 на красный

  2. Увеличить размер шрифта в первой строке

  3. Начертание текста во второй строке сделать курсивным

  4. Начертание текста в третьей строке сделать курсивным

Подведение итогов урока, выставление оценок с комментарием

Домашнее задание: конспект, Н.Т. Ермеков «Информатика» 11 класс, стр 286-296.

Набрать в Блокноте текст и сохранить его как “имя файла.html”. В Internet Explorer он должен выглядеть следующим образом:

Этот текст базового размера, этот увеличенный, этот еще и красный, а этот полужирный курсив, этот нормального начертания, этот опять не красный.

Рефлексия. На столах лежат кружочки со смайликами. По просьбе преподавателя учащиеся поднимают те смайлики, которыми могут оценить урок.

ПРИЛОЖЕНИЕ 1

Основные теги

Указывает программе просмотра страниц что это HTML документ.

Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.

Определяет видимую часть документа

Теги оглавления

Указание браузеру от какого базового адреса все ссылки (кроме ссылок явно прописанных полностью)

Указание браузеру от какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным указанием данного параметра)

Указание для поисковых роботов как следует сканировать данную страницу

Указание для поисковых роботов относится ли данная страница к мировым

Указание для поисковых роботов как следует сканировать данную страницу

Указание автора странички

Описание содержащийся информации (для поисковых машин)

Указание браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16 и д.р.)

Некоторые хостинги (восновном иностранные) автоматически перекодируют страници получаемые сервером в определенную кодировку. Поэтому уточняйте передпостановкой этого тега у поставщиков хостинга этот вопрос.

Ключевые слова странички (для поисковых машин)

Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа

Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.

Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.

Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.

Устанавливает цвет гиперссылок при нажатии.

Теги форматирования текста

	Обрамляет предварительно отформатированный текст. 

Создает самый большой заголовок

,

,

,
,
Создает заголовоки промежуточных размеров

Создает самый маленький заголовок

Создает жирый текст

Создает курсивный текст

Создает текст - имитирующий стиль печатной машинки. (нерекомендованный)

Создает текст - имитирующий стиль печатной машинки. (рекомендованный)

Название переменных отображается курсивом

Выделение цитат курсивом

Отображается курсивом в виде отдельного абзаца

Наклонный текст (воспринимается посковыми роботами как выделение)

Жирный текст (воспринимается посковыми роботами, как особо сильное выделение)

Устанавливает размер текста в пределах от 1 до 7.

Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

Создает гиперссылку на другие сайты.

Указывает в каком окне открывать гиперссылку. параметры Значение

_Blank Загрузка содержимого страницы, заданной ссылкой, в новое пустое окно

_Parent Загрузка содержимого страницы, заданной ссылкой, в окно, которое содержит ссылку

_Self Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя используемые фреймы

_Top Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя использованные фреймы

Создает гиперссылку на другую страницу.

Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу.

Создает гиперссылку на метку текущей страници.

Отмечает часть текста, как метку для гипперссылок на странице.

Создает гиперссылку на метку другой страници.

Форматирование

Создает новый параграф

Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center

Запрещает перевод строки.

Указывает где разбивать строку для переноса при необходимости.


Вставляет перевод строки.

Создает отступы с обеих сторон текста.

Создает список определений.

Определяет каждый из терминов списка

Описывает каждое определение

Создает нумерованный список

Определяет каждый элемент списка и присваивает номер

Создает ненумерованный список

Предваряет каждый элемент списка и добавляет кружок или квадратик.

Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей

Графические элементы

name Добавляет изображение в HTML документ

name Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

name Устанавливает толщину рамки вокруг изображения

name Устанавливает поля сверху и снизу

name Устанавливает поля сбоков

? Всплывающая подсказка при наведении на изображение

6


Курс повышения квалификации
Курс профессиональной переподготовки
Учитель математики и информатики
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Краткое описание документа:

Методическая разработка урока "Процесс разработки Web-сайта". Тема очень актуальна. Сейчас происходит настоящий бум - все создают, учат создавать Web-сайты. Сбылась мечта академика Ершова - все увлеклись изучением и программированием сайтов (хотя некоторые утверждают, что это не программирование).

Фронтальный опрос в виде мини-КВН между двумя командами. При объяснении темы урока учащиеся, получившие опережающее задание, показывают свои презентации.

Проверен экспертом
Общая информация
Учебник: «Информатика (базовый уровень)», Семакин И.Г., Хеннер Е.К., Шеина Т.Ю.
Тема: § 13. Инструменты для разработки web-сайтов

Номер материала: ДБ-318375

Вам будут интересны эти курсы:

Курс повышения квалификации «Табличный процессор MS Excel в профессиональной деятельности учителя математики»
Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс повышения квалификации «Облачные технологии в образовании»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс повышения квалификации «Специфика преподавания дисциплины «Информационные технологии» в условиях реализации ФГОС СПО по ТОП-50»
Курс повышения квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.