Методическое руководство «WWW-технологии, создание сайтов»

WWW-технология

в базовом курсе информатики

.

Пояснительная записка.

Данная разработка трех уроков по теме «WWW-технологии» к разделу «Информационные и коммуникационные технологии» учебной программы «Информатика 11классы».

В пределах трех уроков предполагается дать учащимся представление оWWW-технологии, ее возможностях. Показать возможности создания Web-сайтов для установки в Internet.

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

Почасовое планирование

Урок №1

Тема урока: Основы WWW-технологии.

План урока:

1)Повторение (5мин.).

2)Объяснение нового учебного материала по теме (15мин.).

3)Конспектирование материала (10мин.).

4)Ознакомление с-Web-страницей, практическая работа №1(10мин.).

5)Подведение итогов (5мин.).

Сценарий урока:

1)Повторение в форме собеседования (гипертекст,Internet, сервер).

2)Ученики получают опорный конспект.

3)Организация усвоения нового учебного материала – это лекция с обратной связью с опорой на эмпирический опыт учащихся. Учитель рассказывает новый материал, ученики следят по опорному конспекту.

4)Учащиеся конспектируют новый материал, пользуясь опорным конспектом.

5) Учитель раздает и комментирует практическую работу №1.

6) Учащиеся работают за компьютером.

7) Подведение итогов.

Обеспечение урока: опорный конспект, практическая работа №1.

Теоретический материал к уроку.

WORLDWIDEWEB – Всемирная паутина (кратко: WWW или Web)

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

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

Гипертекст это такая организация текста при которой, между отдельными объектами текста устанавливаются смысловые связи, которые называются ссылками.

ТехнологияWWWпозволяет создавать ссылки (их называютгиперссылками), которые реализуют переход не только внутри документа, но и на другой документ находящийся на любом компьютере, подключенном к сети Internet.

СерверыInternet, реализующие WWW-технологию, называются Web-серверами, а документы, реализованные по технологииWWW (т.е.Web-документы), называются Web-страницами.

Web-страница это минимальная единица информационного ресурса в сети Internet.

Web-сайт это несколько Web-страниц, связанных тематически.

WWW-это десятки миллионов серверов Internet, содержащих Web-страницы в которых используется технология гипертекста.

КаждаяWeb-страница во всемирной паутине имеет свой уникальный адрес. Он включает имя сервера, на котором данная страница опубликована и путь поиска страницы на жестком диске данного сервера. (WWW.intel.ru,WWW.rambler.ru).

Броузеры- программы для просмотра Web-страниц .

Одним из наиболее развитых средств просмотраWeb-страниц является программа InternetExplorer, входящая в стандартную поставку операционной системы Windows 98. Эта программа называется такжеобозревателем.

Опорный конспект.

WORLDWIDEWEB – Всемирная паутина (кратко:WWW или Web)

В основу технологии положена технология гипертекста.

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

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

СерверыInternet, реализующие WWW-технологию, называются Web-серверами, а документы реализованные по технологииWWW (т.е.Web-документы), называются Web-страницами.

Web-страница это минимальная единица информационного ресурса в сети Internet.

Web-сайт это несколько Web-страниц связанных тематически.

Броузеры- программы для просмотра Web-страниц (InternetExplorer).

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

1.Вызовите программу стандартного приложенияWindows БЛОКНОТ, откройте файл pr1.html в папке 11КЛ на диске USER:

<HTML>

<HEARD>

<TITLE>Моястраничка</TITLE>

</HEARD>

<BODY>

<H1ALIGN=CENTER>Привет, это моя домашняя страничка!</H>

<HR>

<H2>Мой город</H2>

<P>Я живу в Питере

<H3ALIGN=LEFT>Моя школа</H3>

<PALIGN=LEFT>Я учусь в гимназии

<H4ALIGN=CENTER>Мои увлечения</H4>

<PALIGN=CENTER>Мои увлечения-музыка и спорт

<H5ALIGN=RIGTH>Мои друзья</H5>

<PALIGN=RIGTH>Мои друзья учатся со мной в одном классе</P>

<BR>

<HR>

</BODY>

</HTML>

2.Ознакомится с текстом файла, закрыть БЛОКНОТ.

3.Просмотреть свой файл с помощью InternetExplorer:

-открыть файл pr1.html в окне обозревателя:

командаФайл/Открыть

в окне ОткрытиекнопкаОбзор

в поле команды Папка выбрать свою папку и открыть файл pr1.html

нажать кнопку ОК.

4.Дополнительное задание:

Создать фон для своей странички:

открытьPaint

закрасить рабочее поле Заливкой

сохранить файл под именем pic1.bmp в папке 11КЛ на диске USER.

5. Открыть файл pr1.html.

6. Заменить строку <BODY> на <BODYBACKGROUND=”pic1.bmp”>

7. Сохранить файл под тем же именем.

8. Просмотреть файл с помощью InternetExplorer.

Урок №2

Тема урока: Информационные ресурсы. Web-сайт..

План урока:

1)Повторение (5мин.).

2)Объяснение нового учебного материала по теме (10мин.).

3)Конспектирование материала (5мин.).

4)Выполнение практической работы №2 (20мин.).

5)Подведение итогов (5мин.).

Сценарий урока:

1)Повторение в форме собеседования (WWW,Web-страница, Web-сайт).

2)Ученики получают опорный конспект.

3)Организация усвоения нового учебного материала – это лекция с обратной связью с опорой на эмпирический опыт учащихся. Учитель рассказывает новый материал, ученики следят по опорному конспекту

4)Учащиеся конспектируют новый материал, пользуясь опорным конспектом.

5) Учитель раздает и комментирует практическую работу №2.

6) Учащиеся работают за компьютером.

7) Подведение итогов.

Обеспечение урока: опорный конспект, практическая работа №2.

Теоретический материал к уроку.

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

ЯзыкHTML (HiperTextMarkupLanguage – язык разметки гипертекста) является основой для создания Web-страниц .

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

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

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

Флаги разметки (тэги) – это определенная последовательность символов, заключенных между знаками <и >:

символ< - начало флага

символ> - конец флага

HTML-документ состоит из двух частей: заголовкадокумента и тела документа.

Тело странички заключается между флагами:

<BODY> и </BODY>.

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

Информация о документе, которая не выводится на экран, называется заголовками. Она заключается между флагами:

<HEAD> и </HEAD>.

Название странички располагается между флагами:

<TITLE> и </TITLE>.

Чтобы текст разбить на абзацы, нужно перед началом программы поставить флаг <p>. Перед началом абзаца программы поставить пустую строку.

Вместе с флагом параграфа можно задать параметры выравнивания:

по центру (CENTER)

по левому краю (LEFT)

по правому краю (RIGHT).

Фрагмент текста можно выделить полужирным шрифтом, выбрать цвет, увеличить в размере…

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

Опорный конспект:

ЯзыкHTML (– язык разметки гипертекста) является основой для создания Web-страниц

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

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

Флаги разметки (тэги) – это определенная последовательность символов, заключенных между знаками <и >:

символ< - начало флага

символ> - конец флага

HTML-документ состоит из двух частей: заголовкадокумента и тела документа.

Тело странички заключается между флагами:

<BODY> и </BODY>.

Информация о документе, которая не выводится на экран, называется заголовками. Она заключается между флагами:

<HEAD> и </HEAD>.

Название странички располагается между флагами:

<TITLE> и </TITLE>.

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

1. Вставить рисунок в страничку:

-скопировать рисунок формата bmp (например: sports.bmp) в папку 11КЛ на диске USER

-открыть файл pr1.html в БЛОКНОТе

-вставить после строки <H4ALIGN=CENTER>Мои увлечения</H4>

следующую строку <P ALIGN=CENTER><IMG SRC=”sports.bmp”>

-сохранить файл под именем pr2.html в папке 11КЛ на диске USER

-открыть файл двойным щелчком по пиктограмме.

2. Вставить бегущую строку:

-заменить в файле pr2.html строку <P>Я живу в Питере

на <MARQUEE>Я живу в Питере</MARQUEE>.

-сохранить файл под именем pr3.html в папке 11КЛ на диске USER

-просмотреть полученную страничку.

3. Закрасить поверхность бегущей строки в красный цвет:

-заменить вставленную строку на

<MARQUEEBGCOLOR=”#FF0000”> Я живу в Питере </MARQUEE>

-сохранить полученную страничку под именем pr4.html в папке 11КЛ на диске USER

-просмотреть ее.

4. Вставить в файл pr4.html после тэга <HR> гиперссылку, которая содержит адрес самой первой странички:

<HREF=”pr1.html”>Просмотрите свои первые опыты</A>

5 Сохраните файл под именем pr5.html.

6. Просмотреть файл в обозревателе.

7. Щелкните по гиперссылке для вызова странички с именем pr1.html.

8. Чтобы вернуться к 5-й страничке, вставьте гиперссылку в файле pr1.html:

<HREF=”pr5.html”>Вернитесь к 5-й страничке</A>.

Теперь по гиперссылке можно переходить между первой и пятой страницами документа.

Урок №3

Тема урока: Основы технологии разработки Web-страниц

План урока:

1)Самостоятельное ознакомление с новым учебным материалом по теме (10 мин.).

2)Выполнение практической работы №2 (30мин.).

3)Подведение итогов (5мин.).

Сценарий урока:

1) Учитель раздает и комментирует практическую работу №3.

2) Учащиеся самостоятельно знакомятся с материалом, который прилагается к практической работе №3.

3) Учащиеся работают за компьютером.

4) Подведение итогов.

Обеспечение урока: практическая работа №3.

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

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

Для создания фреймов используется тэг <FRAMESET> (который является парным), задающий параметры разметки окна на кадры и тэги <FRAME>(непарные), описывающие содержимое и параметры каждого фрейма.

Чтобы просмотреть свою работу во фреймах создайте файл – главную страницу, описывающую структуру из двух фреймов, разделяющих окно по вертикали (левый фрейм имеет ширину 200 пикселов, правому остается остальной экран):

<HTML>

<HEARD>

<TITLE>Оглавление</TITLE>

</HEARD>

<FRAMESET COLS=”200,*”>

<FRAME SRC=”list.html”>

<FRAME NAME=”Work”>

</FRAMESET>

</HTML>

2. Сохранить файл под именем main.html в папке 11КЛ на диске USER.

3. Создайте второй файл – перечень своих работ – содержимое первого (левого) фрейма:

<HTML>

<HEARD>

<TITLE>Список работ</TITLE>

</HEARD>

<BODY BGCOLOR=”FF00FF”>

<BASE TARGET=”Work”>

<H2>Вы можете посмотреть:</H2>

<P><AHREF=”pr1.html”>Первый пример</A></P>

<P><AHREF=”pr2.html”>Второй пример</A></P>

<P><A HREF=”pr3.html”>Третийпример</A></P>

<P><AHREF=”pr4.html”>Четвертый пример</A></P>

<P><A HREF=”pr5.html”>Пятыйпример</A></P>

<BODY>

</HTML>

4. Сохранить файл под именем list.html в папке 11КЛ на диске USER.

5. Просмотреть файл mail.html.

6. Проверить работу всех гиперссылок.

<BASETARGET=”Work”> указывает, что страницы, на которые указывают гиперссылки, следует открывать во фрейме с именем «Work», т. е. В правой части экрана.

Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/5426-metodicheskoe-rukovodstvo-www-tehnologii-sozd