Web конструирование. Создание web-сайтов с использованием языка HTML.

Введение в WEB

 На первом уроке мы не будем широко углубляться во все тонкости этого, с первого взгляда не простого, процесса «строительства» сайта, а поговорим а таких простых вещах, которые всегда на слуху такие как — web-страница, браузер, гипертекст, гиперпространство и д.р. Так сказать сделаем не большое вводное занятие.

Итак приступим…

WEB-страница

Первое понятие с которым мы познакомимся Web-страница. Простым языком web-страница — это то, что мы видим в окне браузера, когда блуждаем по просторам интернета. На самом деле web-страница — это обычный текстовой документ, который открывается любой программой работающей с текстом. Этой программой может быть и обычный стандартный блокнот. Но как же так получается, что в окне браузера мы видим совершенно другое спросите вы меня. Тут всё очень просто, весь текст web-страницы описан командами (тегами), которые нашему тексту добавляют какие либо изменения, например, делают его другого цвета и размера. Так же наши команды (теги) могут добавлять какие либо новые элементы на страницу, например, списки и таблицы, ну а браузер читает все эти команды, и отображает web-страницу в том виде, в котором мы привыкли её видеть. Из этого всего выше сказанного можно сформулировать определение web-странице.

Web-страница это текстовой файл, в котором описано размещение материала на экран, состоит из совокупности элементов языка разметки гипертекста (тегов).

 Браузер

Ну думаю со словом браузер все из Вас, кто читает эту статью знакомы. Ну а если вдруг нет, то на всякий случай поясняю. Браузер это программа для просмотра web-страниц. На данный момент широкое применение получили следующие браузеры: Internet Explorer — стандартный браузер фирмы Microsoft, который поставляется с операционной системой Windows и больше ничего о нём сказать полезного не могу; Google Crome — новый и быстроразвивающийся  браузер корпорации google, один из самых быстрых и скоростных браузеров, за что получил большую популярность в сети; идём далее Safari — браузер, разработанный корпорацией Apple и входящий в состав операционной системы Mac OS X, а также бесплатно распространяющийся для операционных систем семейства Microsoft Windows; Opera — одно время был очень популярный браузер, но сейчас ещё более популярен стал его меньший брат Opera mini, который живёт почти в каждом мобильном устройстве, особенностью этого браузера является то, что весь контент пропускается через прокси-сервер Opera Software, на которых происходит переформатирование веб-страниц в формат подходящий для небольших экранов, а так же происходит сжатие данных, что позволяет ускорить процесс передачи в 2 раза, ну и соответственно снизить входящий трафик; и ещё один интересный образец  Mazilla Firefox — один из самых популярных браузеров, в сети данный браузер заслужил свою популярность  дополняя его различными, порой очень качественными, приложениями (дополнениями), например,  дополнение автоматической проверки орфографии или принудительный запрет к некоторым страницам в сети, так сказать родительский контроль получается. Все браузеры хороши но выбор остаётся за вами.

Гипертекст

Всемирная сеть WWW

Какие бывают WEB-страницы

Язык HTML

Структура документа HTML

Простейшая web страница

Презентация по теме введение в web конструирование.

Урок 1

Тема: Назначение и основные понятия HTML

Класс: 9

Учитель Тимакова Татьяна Александровна

Цели:

Ø дидактическая: познакомить обучающихся с основами HTML программирования.

Ø развивающая: развивать знания обучающихся в области информационных технологий.

Ø воспитательная: показать обучающихся  важность знаний и умений в сфере информационных компьютерных технологий.

Вид занятий (тип урока): комбинированный урок.

Оборудования: интерактивная доска, компьютеры.

Организационные формы обучения: лекция.

Литература:

1.Дунаев В.В. Сам себе Web-мастер. – СПб.: БХВ-Петербург, Арлит, 2000.

2.Курова И.А. Руководство по HTML. – М.: БИНОМ, 2001.

3.Угринович Н.Д. Информатика и информационные технологии. – М.: Лаборатория Базовых Знаний, 2002

4.Роббинс Д. Web-дизайн. Справочник.. — "КУДИЦ-ПРЕСС", 2008.

5.Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. "КУДИЦ-ПРЕСС", 2007.

Ход занятия

1.       Организационный момент.

2.       Сообщение темы и цели занятия.

3.       Изучение нового материала.

4.       Практическая работа

5.       Повторение изученного материала.

6.       Подведение итогов занятия.

7.       Домашнее задание.

Что необходимо для освоения HTML?

Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Как и многое другое в компьютерном мире, версии, или спецификации, HTML пронумерованы. Известны спецификации 2.0, 3.0, 3.2 и 4.0.

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

Для освоения HTML Вам  понадобятся две вещи:

Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов. Например, Internet Explorer. Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на  компьютере установлен Windows, то подойдет стандартная программа Блокнот.

Вы будете использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля.

Все  HTML-файлы Вы  будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы  будете  заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Блокноте, и в Internet Explorer. Сохранив изменения в Блокноте, просто нажмите кнопку ОБНОВИТЬ в Internet Explorer, чтобы увидеть эти изменения реализованными в HTML-документе.

Редакторы HTML

В настоящее время широко используются два типа редакторов HTML:

Редакторы типа "что видишь, то и получишь"    (WebPageMaker , Microsoft Front Page).    Пользователь не видит "внутренностей" документа, с    которым он работает, точно так же, как при работе с    текстовым процессором типа Microsoft Word. Cуществует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word  в HTML-документы.   

Редакторы HTML-текстов (Macromedia Dreamweaver, Web Editor и многие другие). В процессе    работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную,    либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.

Простой HTML-документ

HTML-документ — это просто текстовый файл с расширением *.html. Вот самый простой HTML-документ:

<html>

<head>

<title>

Пример 1

</title>

</head>

<body>

<H1>

Привет!

</H1>

<P> Меня зовут {Ф.И.О}

</P>

<P>Этот *.html-файл необходимо сохранить в программе Блокнот следующим образом: выполните команду ФАЙЛ-СОХРАНИТЬ, в окне сохранения документа в поле ИМЯ ФАЙЛА  наберите  1.html.  Откройте документ в Internet Explorer, выберите  команду ОБНОВИТЬ чтобы увидеть изменения.</P>

</body>

</html>

Для удобства чтения можно ввести дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах.

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется тегом (по-английски — tag, читается "тэг").

Большинство HTML-тегов— парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".

Теги можно вводить как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.

Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег. В нашем простейшем документе, однако, нет ни одного атрибута. Их мы рассмотрим на следующих уроках. Договоримся сохранять файлы на английском языке, короткими именами. Все задания, выполняемые на уроке сохраняйте под именами 1. html, 2.html  и т.д.

Практическая работа №1

Вызовите текстовый редактор Блокнот из папки "Стандартные". Наберите следующий ниже текст и сохраните под именем 1а.html в личной папке на сетевом диске.

<html>

<head>

<title>Моя персональная страничка (заголовок)</TITLE>

</head>

<body>

Добро пожаловать на мою личную страничку! Меня зовут (Укажите свою фамилию, имя и отчество).

</body>

</html>

Откройте теперь Internet Explorer. Используя меню Файл, команду Открыть, откройте свой файл 1a.html.

Домашнее задание: Откройте файл 1a.html. и дополните информацией о себе

• 1 слайд

  «Web – технологии.
  Основы языка HTML »
  Учитель информатики МБОУ СОШ № 55
  Тимакова Татьяна Александровна
  5 марта 2015 г.
  Муниципальное бюджетное общеобразовательное учреждение
  средняя общеобразовательная школа № 55 городского округа Самара
  

• 2 слайд

  Основы языка HTML
  Лекция
  Тимакова Т.А.«Web – технологии как инструмент образовательного процесса» 1
  

• 3 слайд

  Создание Web-сайтов реализуется с использованием специального языка гипертекстовой разметки – HTML (Hyper Text Markup Language).
  
  Термин "гипертекст" впервые был введён
  Тедом Нельсоном в 1969 году.
  
  Понятие гипертекста
  Гипертекст – электронный иерархический документ, содержащий в себе ссылки на другие документы (ресурсы).
  Тимакова Т.А. «Web – технологии как инструмент образовательного процесса» 2
  

• 4 слайд

  Главные причины популярности HTML:
  HTML текст – это обычный текстовый файл в формате ASCII
  Открытый код
  Отсутствие необходимости сжатия данных.
  Простота.
  Переносимость.
  Иерархичность (связность) документов (ресурсов)
  Наличие гиперссылок –
  основа для «плетения паутины»
  Интернет.
  8. HTML-документ –
  это гипертекст.
  Тимакова Т.А. «Web – технологии как инструмент образовательного процесса» 3
  

• 5 слайд

  Тимакова Т.А. «Web – технологии как инструмент образовательного процесса» 3
  

• 6 слайд

  Тимакова Т.А. «Web – технологии как инструмент образовательного процесса» 3
  Сеть World Wide Web представляет собой глобальный мировой ресурс информации, доступ к которому открыт для всех пользователей Интернет
  
  Приложения Microsoft Office позволяют сохранять текстовые документы, электронные таблицы, реляционные БД, презентации в формате Web-страницы
  
  World Wide Web
  и ее место в мировой сети
  

• 7 слайд

  Браузеры – универсальное клиентское приложение для Web-сервера
  Тимакова Т.А. «Web – технологии как инструмент образовательного процесса» 4
  

• 8 слайд

  Единый интерфейс представителей программ одного класса – одна из фундаментальных основ ИТ
  Тимакова Т.А.«Web – технологии как инструмент образовательного процесса» 5
  

• 9 слайд

  Понятие «тег»
  HTML-документ –
  это обычный текстовый документ, содержащий
  специальные разметочные указатели (тэги).
  HTML - файл имеет расширение
  .htm или .html
  Тег (иногда тэг, англ. tag — «ярлык, этикетка, бирка; метить») — метка как ключевое слово, в более узком применении идентификатор для категоризации, форматирования, описания, поиска данных и задания внутренней структуры.
  Тимакова Т.А. «Web – технологии как инструмент образовательного процесса» 6
  

• 10 слайд

  ПРАВИЛА ЗАПИСИ ТЭГОВ
  Тэги всегда заключаются в угловые скобки (т.е. ВСЕГДА начинается со знака «меньше» и оканчивается знаком «больше»
  Например: <BR> (новая строка, непарный тег)
  ТЕГ
  Непарный (одиночный)
  парный
  (контейнер)
  открывающий < >
  закрывающий </ >
  Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 7
  

• 11 слайд

  Структура HTML - страницы
  Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 8
  

• 12 слайд

  Комментарии
  <! -- комментарий -- > - такой полутэг используется для добавления комментариев на страничке, т. е. для полезных пояснений, которые не «транслируются» браузером.
  Пример:
  <H1> Заголовок </H1>
  <! –Здесь должно стоять название главы-- >
  <H2> Подзаголовок </H2>
  
  Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 9
  

• 13 слайд

  ПРИМЕР HTML-ДОКУМЕНТА
  <HTML>
  <HEAD>
  <ТIТLЕ> Моя первая HTML-страничка! </TITLE>
  </HEAD>
  <BODY>
  <BR>
  Это моя первая проба сил в Web-дизайне.
  <BR>
  Может быть, страничка пока еще получилась
  <BR>
  не очень красивой, но ведь она работает!!!
  </BODY>
  </HTML>
  Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 10
  

• 14 слайд

  Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 11
  Создайте свой сайт
  

• 15 слайд

  Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 12
  Практическая работа
  

• 16 слайд

  Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 13
  Практическая работа
  Упражнения для самостоятельной работы
  Задание 1. «Личная папка». Создать личную папку в доступном разделе локального компьютера
  Задание 2. «Структура HTML-страницы». Создать простейшую страницу со значение тега title =«Моя первая страничка» и телом страницы с текстом: «Оказывается, HTML – форматирование не такая уж и сложная вещь! ….».
  

• 17 слайд

  Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 14
  Домашнее задание
  «Работа с таблицами». Создать таблицу по образцу
  

• 18 слайд

  Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 14
  Спасибо за работу
  До новых встреч!
  

Основы языка разметки гипертекста

Угринович Н.Д. "Информатика и ИКТ. Базовый уровень: 10 класс"

Публикация во Всемирной паутине реализуется в форме WEB–сайтов.

Web-cайт является интерактивным средством представления информации. Сайт состоит из WEB–страниц, объединенных гиперссылками.

Для создания сайта существуют различные способы.

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

 2. С помощью конструктора сайтов (ucoz.ru, rusedu.net).

 3. Разработка сайта c помощью CMS (системы управления сайтом).

 4. Разработка собственного дизайн сайта и его создание на основе языка разметки HTML.

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

WEB–страницы могут быть интерактивными и содержать мультимедийные и динамические объекты.

Для разметки гипертекстовых документов был разработан специальный язык HTML (Hyper Text Markup Language). С момента рождения WWW HTML постоянно развивается. В настоящее время наиболее современной является версия 4.0

Вид WEB–страницы задается тэгами, которые заключаются в угловые скобки < >. Тэг — это команда, которую понимает браузер (программа просмотра web-страниц Internet Explorer, Opera и т.д.). Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (контейнер). Непарный тэг говорит о том, что в этом месте надо вставить какой-то элемент, например, рисунок или разделительную линию.

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

<HTML>  </HTML> - помещаются соответственно в начале и конце всего документа, чтобы обозначить текст как действительный документ на языке разметки гипертекста.

<HEAD> </HEAD> - внутри тегов заголовок помещается раздел заголовка WEB–страницы.

<TITLE> </TITLE> - название WEB-страницы, программа просмотра страницы выводит его на панель заголовка соответствующего окна

<BODY> </BODY> - определяют часть документа, которая будет показана пользователю в клиентской области окна программы просмотра Web.

Так страница выглядит в окне браузера Internet Explorer.

                                               

·        Тэг  позволяет задать общие свойства для всей страницы.

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

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

DHTML (Dynamic HTML) - динамический HTML, расширение языка HTML, позволяющее создавать таблицы стилей и включать в состав Web-документа небольшие программы-сценарии (script), которые исполняются Web-клиентом. и придания ему динамического характера, например движения картинок по документу. Для создания подобных сценариев используются специальные языки программирования. Наиболее распространенными являются два: язык JavaScript, разработанный компанией Netscape, и язык VBScript - разработка фирмы Microsoft. Для включения сценариев в документ используются специальные теги.

JavaScript и VBScript - Сценарии (scripts) являются еще одним расширением языка HTML. Сценарии представляют собой небольшие программы, текст которых включается в голову HTML-файла с помощью специальных тегов. При загрузке документа Web-клиент выделяет сценарии и передает их специальному модулю - интерпретатору языка, на котором написан сценарий, для проверки правильности программного кода и его подготовки к последующему исполнению. Исполнение программы может осуществляться непосредственно при загрузке документа или же при выполнении определенных условий (например, при поступлении команды пользователя) - это определяется самим сценарием.

Сценарии широко используются для повышения функциональности документа, поскольку позволяют:

·        придать динамику элементам Web-документа, например, организовать движение картинок;

·        организовать динамическое обновление части Web-документа в зависимости от определенных условий, например, через определенные промежутки времени или по командам пользователя;

·        организовать интерактивное взаимодействие с пользователем путем обработки определенных событий, например перемещения указателя "мыши" или нажатия каких-либо клавиш на клавиатуре.

Для создания подобных сценариев используются специальные языки программирования. Наиболее распространенными являются два: язык JavaScript, разработанный компанией Netscape, и язык VBScript - разработка фирмы Microsoft.

 Редактор для создания  web-страниц. HEFS

http://htmlbook.ru/  - справочник по HTML, CSS и верстке веб-страниц.

   Практическое задание:

 Создать небольшой сайт, состоящий из 4-5 страниц по одной из тем:

 

 "Устройство компьютера"

 "Виды компьютерной графики"

 "Виды компьютерных сетей"

 "Возможности современных компьютеров"

Электронные словари и программы-переводчики.

- примеры образовательных сайтов:

http://www.alleng.ru/edu/comp.htm

 - книги, учебники, пособия, справочники, ссылки на различные учебные сайты по всем предметам

http://school.xvatit.com/index.php?title

=Гипермаркет_знаний_-_первый_в_мире!

http://www.twirpx.com

/ - огромное количество книг, просто фантастика...

http://www.metod-kopilka.ru

/ - методический и информационный ресурс для учащихся и учителей

http://chernykh.net/content/view/12/36

/ - история компьютера

http://www.teachvideo.ru/

 - видеоуроки

http://translate.google.ru/

 - переводчик online

Таблица базовых цветов BgColor

 

Aliceblue F0F8FF	Antiquewhite FAEBD7	Aqua 00FFFF	Aquamarine 7FFFD4
Azure F0FFFF	Beige F5F5DC	Bisque FFE4C4	Black 000000
Blanchedalmond FFEBCD	Blue 0000FF	Blueviolet 8A2BE2	Brown A52A2A
Burlywood DEB887	Cadetblue 5F9EA0	Chartreuse 7FFF00	Chocolate D2691E
Coral FF7F50	Cornflowerblue 6495ED	Cornsilk FFF8DC	Crimson DC143C
Cyan 00FFFF	Darkblue 00008B	Darkcyan 008B8B	Darkgoldenrod B8860B
Darkgray A9A9A9	Darkgreen 006400	Darkkhaki BDB76B	Darkmagenta 8B008B
Darkolivegreen 556B2F	Darkorange FF8C00	Darkorchid 9932CC	Darkred 8B0000
Darksalmon E9967A	Darkseagreen 8FBC8F	Darkslateblue 483D8B	Darkslategray 2F4F4F
Darkturquoise 00CED1	Darkviolet 9400D3	deeppink FF1493	Deepskyblue 00BFFF
Dimgray 696969	Dodgerblue 1E90FF	Firebrick B22222	Floralwhite FFFAF0
Forestgreen 228B22	Fuchsia FF00FF	Gainsboro DCDCDC	Ghostwhite F8F8FF
Gold FFD700	Goldenrod DAA520	Gray 808080	Green 008000
Greenyellow ADFF2F	Honeydew F0FFF0	Hotpink FF69B4	Indianred CD5C5C
Indigo 4B0082	Ivory FFFFF0	Khaki F0E68C	Lavendar E6E6FA
Lavenderblush FFF0F5	Lawngreen 7CFC00	Lemonchiffon FFFACD	Lightblue ADD8E6
Lightcoral F08080	Lightcyan E0FFFF	Lightgoldenrodyellow FAFAD2	Lightgreen 90EE90
Lightgrey D3D3D3	Lightpink FFB6C1	Lightsalmon FFA07A	Lightseagreen 20B2AA
Lightskyblue 87CEFA	Lightslategray 778899	Lightsteelblue B0C4DE	Lightyellow FFFFE0
Lime 00FF00	Limegreen 32CD32	Linen FAF0E6	Magenta FF00FF
Maroon 800000	Mediumauqamarine 66CDAA	Mediumblue 0000CD	Mediumorchid BA55D3
Mediumpurple 9370D8	Mediumseagreen 3CB371	Mediumslateblue 7B68EE	Mediumspringgreen 00FA9A
Mediumturquoise 48D1CC	Mediumvioletred C71585	Midnightblue 191970	Mintcream F5FFFA
Mistyrose FFE4E1	Moccasin FFE4B5	Navajowhite FFDEAD	Navy 000080
Oldlace FDF5E6	Olive 808000	Olivedrab 688E23	Orange FFA500
Orangered FF4500	Orchid DA70D6	Palegoldenrod EEE8AA	Palegreen 98FB98
Paleturquoise AFEEEE	Palevioletred D87093	Papayawhip FFEFD5	Peachpuff FFDAB9
Peru CD853F	Pink FFC0CB	Plum DDA0DD	Powderblue B0E0E6
Purple 800080	Red FF0000	Rosybrown BC8F8F	Royalblue 4169E1
Saddlebrown 8B4513	Salmon FA8072	Sandybrown F4A460	Seagreen 2E8B57
Seashell FFF5EE	Sienna A0522D	Silver C0C0C0	Skyblue 87CEEB
Slateblue 6A5ACD	Slategray 708090	Snow FFFAFA	Springgreen 00FF7F
Steelblue 4682B4	Tan D2B48C	Teal 008080	Thistle D8BFD8
Tomato FF6347	Turquoise 40E0D0	Violet EE82EE	Wheat F5DEB3
White FFFFFF	Whitesmoke F5F5F5	Yellow FFFF00	YellowGreen 9ACD32

Урок-обобщение с ПД

 "Разработка тематического проекта Web-сайта"

Тимакова Татьяна Александровна, учитель информатики

Статья отнесена к разделу: Преподавание информатики

Используемый УМК:

Угринович Н.Д. “Информатика и информационные технологии. 10-11 классы”,

“ПРАКТИКУМ по информатике и информационным технологиям”,

методическое пособие для учителя “Преподавание курса “Информатика и информационные технологии”

презентация по теме “Разработка тематического Web-сайта” Тимакова Т.А.

Вид урока: урок c проектной деятельностью, на основе знаний полученных в ходе подготовки к проекту

Формы организации урока:

групповая (используя метод проектов);

фронтальная (общее обсуждение при повторении и при получении результатов по принципу сравнительного анализа)

Цель:

·        сформировать у учащихся творческий подход, способность к самостоятельному и инициативному решению проблем;

·        научить использовать типовые инструментально-технологические средства и эффективно работать в командах, что необходимо для личностного развития и профессионального самоопределения;

·        закрепить навыки создания Web-страниц;

·        освоить основные критерии создания веб-ресурсов и научить качественно оценивать веб-ресурсы общего назначения;

·        закрепить навыки структуризации и систематизации информации и отработать навыки оптимизации информационной деятельности

·        выполнить проектную работу по созданию сайта

Ход урока (2 ч.)

I. Организационный момент (3 мин.)

II. Сообщение темы и целей урока (2 мин.)

Презентация.

(Слайд 1) Титульный слайд

Тема сегодняшнего урока:

«Разработка тематического проекта web-сайта»

(Слайд 2) Создание Web-сайта

Цель урока - закрепить навыки по созданию web-страниц, сайтов различными инструментами (на языке HTML, FrontPage, MacroMedia Dreamweaver MX, MS Word) и дать сравнительный анализ этих способов.

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

    персональный сайт

    школьный сайт

    тематический (семейный, компьютер, архивный и т.д.)

III. Актуализация знаний

Повторение ранее изученного материала по данной теме (10 мин.)

- В ходе повторения вспоминаем основные понятия и определения, используем конкретные примеры:

(Слайд 3) Вопросы на повторение:

1.     Какие функции выполняют сервисные службы WWW?

2.     Назначение языка HTML

3.     Теги HTML

4.     Функциональные разделы документа

5.     Форматирование HTML документа

6.     Ссылки на другие документы и файлы

7.     Списки

8.     Графика

9.     Фреймы

10. Звук

11. Инструментальные средства создания Web-страниц

Учебное пособие по созданию Web-страниц

http://phys.pspu.ru/parshin/html/head3.shtml

(Слайд 4) Основные тэги HTML.

Практическая работа. Первая страница

1.     Запустить текстовый редактор Блокнот [Пуск - Программы - Стандартные - Блокнот].

2.     Ввести HTML-код, задающий структуру Web-страницы:

<HTML>

 <HEAD>

 <TITLE> Первое знакомство с тэгами HTML</TITLE>

 </HEAD>

 <BODY> …

</BODY>

 </HTML>

3.     Ввести команду [Файл - Сохранить].

4.     Файлу Web-страницы присвоить имя page1-1.htm.

5.     Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается Первое знакомство с тэгами HTML. Основная часть окна браузера - пуста.

(Слайд 5) Заголовки

Учащиеся должны ввести в текст страницы тэги заголовков различных уровней

Заголовки различных уровней:

<H1>Заголовок первого уровня</H1>…<H6>Заголовок шестого уровня</H6>

(Слайд 6) Форматирование шрифта

Ввести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий.

(Слайд 7) Списки

Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.

(Слайд 8) Внесение изменений и дополнений в Web-страницу.

В процессе создания web-страницы приходится добавлять новые тэги и просматривать получаемый результат:

Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].

Активизировать браузер с открытым в нем предыдущим вариантом страницы.

Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница.

(Слайд 9) Основные подходы к созданию сайта

Актуализация знаний.

Учащимся необходимо ответить на вопросы:

    В чем причина возникновения интереса к Интернет-ресурсам?

    Какие возможности предоставляет Интернет в области Web-конструирования?

    На кого должна быть ориентирована страница - на создателя или пользователя?

    Какие цели чаще всего преследуют создатели различных сайтов?

Попробуйте классифицировать по различным основаниям сайты, расположенные в сети.

(Слайд 10) Практическое задание:

Определите сайты, которые отвечают вашим интересам, дайте им оценку:

    по оформлению

    скорости загрузки,

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

Можно выбрать сайты, созданные профессиональными группами и образовательными порталами. Учащимся разрешается найти с помощью поисковых систем различные типы сайтов и сравнить их, назвать виды Web-сайтов. Вывод делается учащимися.

(Слайд 11) Виды сайтов

Учащиеся должны назвать типы найденных в интернете сайтов и прокомментировать, чем они характерны

(Слайд 12-15) Примеры корпоративных сайтов

(Слайд 16-19) Поисковые системы

(Слайд 20) Электронная почта

(Слайд 21) Энциклопедические системы

(Слайд 22-31) Создание сайта в интернете

Выводы делаются учащимися

(Слайд 32)

Инструментальные средства создания Web-страниц от простейших HTML-редакторов до систем с использованием технологии WYSIWYG (“What You See Is What You Get” - “Что видишь, то и получишь”

Front Page Express   (Microsoft Internet Explorer), 

Composer (Netscape Communicator) и 

Web-мастер (Сибкон Коммуникатор).

Macromedia Dreamweawer

Для достижения поставленной цели мы должны пошагово решить ряд вопросов:

(Слайд 33-40) Создание Web-страниц с помощью Microsoft Word

Показано поэтапное создание сайта, учащиеся могут повторить

(Слайд 41-54) Инструментальные средства разработки Web-страниц

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

Определить функции сайта

Наполнение страниц, их фон, используемая графика, звук, анимация или видео

Как будет осуществляться навигация, управление, ввод данных на страницах сайта, а так же отмена неправильно выполненных действий

Например:

Определение функций с выделением основных групп посетителей школьного сайта:

ученики,

учителя,

администрация школы,

родители,

и прочие, кто интересуется школой.

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

Для ученика: расписание, задания, методические рекомендации к урокам, возможность обсудить вопросы…

Для учителя: разместить материалы и задания, результаты проверок, возможности библиотеки, электронные учебники, организация интерактивных мероприятий или форумов;

Для родителей: программы обучения, планируемые мероприятия, электронные классные журналы, школьное меню…;

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

Возможность обмена сообщениями (форум или электронная почта).

IV. Подготовка к проектной работе (10 мин.)

Работая над проектом, ученики должны определить цель, задачи, этапы реализации.

Организационный момент

Учащиеся в классе делятся на четыре-пять групп (примерно по 3 ученика в каждой), дают название своей команды, выбирают тему проектного задания;

Для эффективной работы в проектной группе предлагается распределить роли примерно следующим образом: руководитель группы – ответственный за рекламу, web-дизайнер, web-мастер;

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

V. Работа в группах (30 мин.)

(Слайд 55) Темы задания:

ТЕМЫ ЗАДАНИЯ: “Мой город”, “Моя семья”, “Мои интересы”, “Моя малая родина”, “Моя школа”, “Мой класс”. (Название темы может модифицироваться самими учащимися, но с обязательной аргументацией)

Выполняя эти задания, учащимся раскрывают, например, темы проектов:

“Мой город” - история, проблемы, перспективы.

“Мои интересы” - как я смогу реализовать себя.

“Мой класс” – об одноклассниках, успехи, взаимопомощь, досуг, интересы.

Используются фотографии и возможности графических редакторов.

В ходе выполнения работ учащимся предлагаются критерии оценок для каждого вида работы.

Все работы сохраняются в именной тематической папке. Учащиеся имеют возможность редактировать свои работы.

Непосредственная работа в группах

Цель задания: подготовить информационно-содержательное наполнение сайта, и определить основные формы представления информации.

Программные средства: текстовый процессор WORD, НТМL, FrontPage (по выбору группы)

Этапы работы:

1. Определить цель создания сайта.

2. Определить предполагаемый контингент посетителей сайта.

3. В соответствии с целью создания сайта и предполагаемым контингентом продумать содержание сайта.

4. Определить возможные формы представления информации на сайте.

5. Сформулировать названия основных рубрик (страниц) сайта.

6. В текстовом процессоре WORD подготовить концепцию создания сайта.

Пояснения к выполнению задания:

1. Сайт может быть создан с различными целями, в связи с этим будет разным и его содержание.

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

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

4. В качестве форм предоставления информации можно рассмотреть обычную текстовую информацию, фотографии, телеконференции (продумайте тему), чат, доску объявлений (продумайте тему), фотографии, работы учащихся (например открытки, выполненные во Flash) и др.

5. В соответствии с отобранным материалом продумайте названия страниц (ссылок, пунктов меню) сайта.

6. Откройте текстовый процессор WORD и подготовьте письменную концепцию сайта, кратко описав все этапы работы (цель, контингент посетителей, формы представления информации, названия рубрик).

В процессе работы групп учитель, координирует проектную деятельность, т.е. решает возникшие организационные вопросы, технические проблемы, но не влияет на результат.

РЕКОМЕНДАЦИИ ГРУППАМ:

    WEB-ДИЗАЙНЕРУ ПО РАЗРАБОТКЕ ФИРМЕННОГО СТИЛЯ САЙТА

    РЕКОМЕНДАЦИИ ОТВЕТСТВЕННОМУ ЗА РЕКЛАМУ

    РЕКОМЕНДАЦИИ WEB-ПРОГРАММИСТУ ПО РАЗРАБОТКЕ HTML - КОДА

VI. Представление полученных результатов (10 мин.)

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

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

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

VII. Итог урока. (8 мин.)

Обобщение на основе сравнительного анализа результатов, полученных в ходе проектной деятельности.

Каждый из участников сыграл свою роль в работе над проектом, проявив наиболее ярко себя в том деле, которое получается у него лучше, кто-то успешно справился с организаторской работой, а кому-то удалась техническая часть. Самое главное, что вы были единой командой, которая постаралась достичь поставленной цели.

Проведем рефлексию. Давайте посмотрим, добились ли мы целей, поставленных в начале занятия

(по пунктам просматриваются все цели и задачи).

Попробуем подвести итоги, ответив на следующие вопросы:

Что нового для себя узнали вы на уроке?

Где могут пригодиться эти знания?

Знаниями из каких школьных предметов вы пользовались при выполнении заданий?

VIII. Оценка работы учащихся на уроке (5мин.)

(Слайд 56)

Необходимые ресурсы: компьютеры, мультимедийный проектор, пакет MS Office, презентация, MS FrontPage и другие редакторы для Web-сайта.

Источники информации:

http://informatics.belinter.net - Информатика с увлечением

      Данный ресурс содержит ряд презентаций по предмету "Информатика". Эти презентации могут быть использованы учениками и учителями для различных целей. Основные достоинства этого сайта:

      Применение данного информационного ресурса позволяет разнообразить процесс обучения и методику проведения уроков.

      Является незаменимым средством для подготовки учеников к самостоятельным и контрольным работам, зачётам и тестам.

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

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

      Позволяет отстающим ученикам догнать сверстников без конспекта и учителя.

      Освобождает учителя от рутинной работы по подготовке кабинета к каждому классу (зачастую начало новых тем в 8 и 9 совпадает, а классы чередуются, таким образом, к каждому классу приходится подготавливать доску и кабинет).

      Повышает самостоятельность и воспитывает самосознание учеников.

      Обучает пользователей основам работы в сети Интернет.

http://www.informika.ru - сервер ГосНИИ Информационных технологий и телекоммуникаций “Информика”.

    Федеральная компьютерная сеть RUNNET

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

    Единое окно доступа к образовательным ресурсам

http://som.fio.ru -сетевое объединение методистов

www.mto.ru - мультимедиатехнологии в образовании

http://www.ooipkro.ru - уроки по разным предметам

Учебник

HTML

Оглавление

1.    Введение

2.    Структура HTML-документа

3.    Форматирование текста

4.    Управление цветом

5.    Рисунки на Web-страничке

6.    Гиперссылки

7.    Таблицы

8.    Разметка Web-страницы при помощи таблицы

http://infoschool.narod.ru/html/index.htm