Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Другие методич. материалы / Web конструирование. Создание web-сайтов с использованием языка HTML.

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

  • Информатика

Название документа Введение в WEB.docx

Поделитесь материалом с коллегами:

Введение в 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 конструирование.

Название документа Назначение и основные понятия HTML.docx

Поделитесь материалом с коллегами:

Урок 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-документ:

Пример 1

Привет!

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

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

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

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

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

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

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















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

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

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

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

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

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



Название документа Основы HTML.pptx

Поделитесь материалом с коллегами:

«Web – технологии. Основы языка HTML » Учитель информатики МБОУ СОШ № 55 Тима...
Основы языка HTML Лекция Тимакова Т.А.«Web – технологии как инструмент образо...
Создание Web-сайтов реализуется с использованием специального языка гипертекс...
Главные причины популярности HTML: HTML текст – это обычный текстовый файл в...
Тимакова Т.А. «Web – технологии как инструмент образовательного процесса» 3
Тимакова Т.А. «Web – технологии как инструмент образовательного процесса» 3 С...
Браузеры – универсальное клиентское приложение для Web-сервера Тимакова Т.А....
Единый интерфейс представителей программ одного класса – одна из фундаменталь...
Понятие «тег» HTML-документ – это обычный текстовый документ, содержащий спец...
ПРАВИЛА ЗАПИСИ ТЭГОВ Тэги всегда заключаются в угловые скобки (т.е. ВСЕГДА на...
Структура HTML - страницы Тимаковы Т.А. «Web – технологии как инструмент обра...
Комментарии  - такой полутэг используется для добавления комментариев на стра...
ПРИМЕР HTML-ДОКУМЕНТА  	 		 Моя первая HTML-страничка!  	 	 	  Это моя первая...
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 11...
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 12...
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 13...
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 14...
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 14...
1 из 18

Описание презентации по отдельным слайдам:

№ слайда 1 «Web – технологии. Основы языка HTML » Учитель информатики МБОУ СОШ № 55 Тима
Описание слайда:

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

№ слайда 2 Основы языка HTML Лекция Тимакова Т.А.«Web – технологии как инструмент образо
Описание слайда:

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

№ слайда 3 Создание Web-сайтов реализуется с использованием специального языка гипертекс
Описание слайда:

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

№ слайда 4 Главные причины популярности HTML: HTML текст – это обычный текстовый файл в
Описание слайда:

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

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

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

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

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

№ слайда 7 Браузеры – универсальное клиентское приложение для Web-сервера Тимакова Т.А.
Описание слайда:

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

№ слайда 8 Единый интерфейс представителей программ одного класса – одна из фундаменталь
Описание слайда:

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

№ слайда 9 Понятие «тег» HTML-документ – это обычный текстовый документ, содержащий спец
Описание слайда:

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

№ слайда 10 ПРАВИЛА ЗАПИСИ ТЭГОВ Тэги всегда заключаются в угловые скобки (т.е. ВСЕГДА на
Описание слайда:

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

№ слайда 11 Структура HTML - страницы Тимаковы Т.А. «Web – технологии как инструмент обра
Описание слайда:

Структура HTML - страницы Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса» 8 <HTML> начало контейнера HTML-документа <HEAD> начало контейнера заголовка <TITLE> начало контейнера строки – названия страницы … строка названия страницы </TITLE> конец контейнера строки – названия страницы </HEAD> конец контейнера заголовка <BODY> начало контейнера тела страницы … тело (всё содержимое) страницы </BODY> конец контейнера тела страницы </HTML> конец контейнера HTML-документа

№ слайда 12 Комментарии  - такой полутэг используется для добавления комментариев на стра
Описание слайда:

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

№ слайда 13 ПРИМЕР HTML-ДОКУМЕНТА  	 		 Моя первая HTML-страничка!  	 	 	  Это моя первая
Описание слайда:

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

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

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

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

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

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

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

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

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

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

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

Название документа Основы языка разметки гипертекста.docx

Поделитесь материалом с коллегами:

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

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

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

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


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

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

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

hello_html_3a02ee22.png


hello_html_3a02ee22.png


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

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

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

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

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

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







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

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

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

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

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

hello_html_1ac14d38.png

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

hello_html_332ba9f.png

hello_html_1819d0c2.png

hello_html_1819d0c2.png<BODY> BODY>

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

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

hello_html_1819d0c2.png - параметры шрифта.



Устанавливает цвет текста документа, используя значение цвета в виде 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 и верстке веб-страниц.

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



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

hello_html_4a4a4731.png

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

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

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

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

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

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

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



Название документа Таблица базоых цветов.docx

Поделитесь материалом с коллегами:

Таблица базовых цветов 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


Название документа Урок обобщеня с ПД.docx

Поделитесь материалом с коллегами:

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

"Разработка тематического проекта 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

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

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

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


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

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

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

Заголовок первого уровня

Заголовок шестого уровня

(Слайд 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.docx

Поделитесь материалом с коллегами:

Учебник

HTML

Оглавление

  1. Введение

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

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

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

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

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

  7. Таблицы

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



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



Выберите курс повышения квалификации со скидкой 50%:

Автор
Дата добавления 06.02.2016
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров797
Номер материала ДВ-422051
Получить свидетельство о публикации
Похожие материалы

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