Интернет и мировые сети. Учебно-методический комплекс (стр. 2 )

Методические рекомендации для преподавателя

Дисциплина «Интернет и мировые сети» является дисциплиной по выбору цикла «Общие математические и естественнонаучные дисциплины». Она преподается студентам, не имеющим опыта обучения в высших учебных заведениях, поэтому одна из задач преподавателя – научить студентов получать знания в новых для них условиях.

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

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

Семинар также включает в себя элементы собеседования.

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

Учитывая специфику образовательных и воспитательных задач учебной дисциплины «Интернет и мировые сети», применяются различные формы и методы обучения, широко используются разнообразные технические средства: схемы, плакаты, персональные компьютеры.

Методические указания для студентов

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

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

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

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

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

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

ПЛАНЫ ПРАКТИЧЕСКИХ (СЕМИНАРСКИХ) ЗАНЯТИЙ

Тема 1

Поиск ресурсов в глобальной сети Internet: поиск страниц в WWW – пространстве, поиск файлов, адресов электронной почты с использованием поисковых систем. Подбор материалов по описанию языка HTML, разработке WEB – страниц, программному обеспечению серверов Internet, языкам описания сценариев VBScript, JavaSript, технологиям серверной обработки информации (ASP, PHP). Создание "желтых страниц" по найденным адресам. Использование методов оптимизации процедуры поиска.

Тема 2

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

Тема 3

Разработка WEB – сайта по выбранной теме с использованием форм - стандартных интерфейсных элементов языка HTML: кнопок разного типа, строк ввода текста, меню и др. для пересылки информации на сервер.

Тема 4

Применение в WEB – страницах элементов языка Visual Basic Scripting Edition для разработки интерактивных программ, использование функций и подпрограмм.

Тема 5

Рассмотрение свойств объектной модели Internet Explorer для программирования WEB – страниц. Взаимосвязь между объектами Internet Explorer.

Тема 6

Разработка структуры сайта по выбранной теме с применением технологии ASP (активные серверные страницы) для использования распределенной компонентной объектной модели (DCOM) при разработке интерактивных WEB –страниц. Разработка программ серверной обработки информации Отладка программ программного обеспечения WEB – сайта Изучение основных режимов и настроек средств Internet Information Server для поддержки серверов Internet.

Лабораторная работа № 1

Создание простого HTML - документа

Основа основ

Основой каждой WEB - странички является HTML (сокращенно от англ. Hypertext Markup Language) язык разметки гипертекста.

Документ написанный на языке HTML, представляет собой текст, в который вставлены теги (markup tags) или иначе - коды разметки. Эти коды являются составными частями самого документа; они управляют форматированием и определяют макет готового документа, формируют ссылки на другие документы и делают многое другое.

HTML - коды разметки окружены специальными маркерами, с помощью которых они отделяются от основного текста документа. Вы просто печатаете их, используя два главных символа, с помощью которых и задаются инструкции по разметке. Этими символами являются угловые скобки, < и >. В большинстве случаев эти символы появляются при нажатии клавиш Shift + точка или Shift + запятая.

Следует отметить, что HTML-коды нечувствительны к регистру, то есть тег <body> ничем не отличается от тегов <Body>, <BODy>, <bOdY>. Но, как правило, разработчики Web-страниц печатают HTML-коды заглавными буквами, поскольку это позволяет легко отличать коды от основного текста, что облегчает редактирование.

Коды и теги. HTML-коды принято называть тегами

Теги, использующиеся для создания самых простых HTML-документов.

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

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

Каждый HTML-документ должен начинаться с тега <HTML> и заканчиваться тегом </HTML>. Все, что заключено между этими тегами, является HTML-документом.

Любой HTML-документ состоит из двух частей. Первая часть - заголовок, который находится между тегами <HEAD> и </HEAD>. В нем содержится информация о документе, которая не выводится на экран. Название странички располагается между тегами <TITLE> и </TITLE> и появляется в верхней рамке окна программы просмотра.

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

1. Создайте в папке Мои документы папку HP. В ней будут храниться все ваши HTML-документы.

2. Наберите в текстовом редакторе следующее:

<HTML>

<HEAD>

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

</HEAD>

<BODY>

Привет! Это мой первый документ HTML

</BODY>

</ HTML>

3. Сохраните этот файл под названием first. html в папке HP.

4. Просмотр HTML-документа

а) В Web-броузере Microsoft Internet Explorer откройте меню File (Файл) и выберите команду Open Page (Открыть страницу), Open или Open Local (Открыть страницу на локальном диске). На экране появится окно диалога с указанием имени файла.

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

в) Щелкните на кнопке Open, OK или Открыть. Web-броузер откроет ваш HTML-документ.

Документ кажется примитивным? Конечно, так оно и есть, но ведь это ваш первый HTML-документ.

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

Лабораторная работа № 2

Создание заголовков и форматирование текста документов

Заголовки <H1>,</h1>

Для выделения логических частей текста обычно используют заголовки (headings) и обозначают H1...H6. Цифра после буквы указывает уровень заголовка (всего их шесть). Заголовок уровня 1 самый крупный, а уровня 6 самый мелкий. Переносы в заголовках запрещены. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

align=left

align=center

align=right

Рассмотрите пример и объясните значение каждого из тегов.

<H1 align=center>Проекты нашего университета</h1>

<H2 align=left>Экономика</h2>

<H3 align=right>Театральная студия</h3>

<H4 align=center>Журналистика</h4>

<HR>

Горизонтальная линия (horizontal rule) - очень часто используемый элемент, который не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, вправо или по центру (см. выше) и по ширине - align=justify

Можно задать толщину линии:

size=Толщина в пикселах

Можно управлять длиной линии:

width=Длина в пикселах

width=Длина в процентах

Можно выбрать цвет:

color= «Цвет» (этот атрибут работает только в броузере Internet Explorer)

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

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

<P>, </p>

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

<BR>

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

Давайте усовершенствуем нашу страницу, используя заголовки и параграфы. Откройте файл first. html в текстовом редакторе и отредактируйте его так, как показано ниже.

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<H2 ALIGH = Center>Привет! Это мой первый документ HTML </h2>

<HR>

<H3>Мой город</h3>

<P>Я живу в Ставрополе</p>

<H3 ALIGN=Left> Вуз в котором я учусь</h3>

<P align=left>Я учусь в Ставропольском государственном университете

</p>

<H4 align=center>Мои увлечения</h4>

<P Align=center>Мои увлечения - музыка, спорт, живопись</p>

<H5 ALIGN=right>Мои друзья </h5>

<P align=right>Мои друзья учатся в разных вузах города.</p>

<BR>

<HR>

<H6 align=center>Design «Olvis»</h6>

</body>

</html>

Сохраните файл как first2.html. Просмотрите его в Web-броузере. Попробуйте поменять размеры заголовков и поэкспериментируйте с выравниванием заголовков и текста относительно экрана монитора. Найдите наиболее эстетичный и читаемый вариант. При желании дополните текст своими данными.

ЛАБОРАТОРНАЯ РАБОТА № 3

ВКЛЮЧЕНИЕ СПИСКОВ В HTML - ДОКУМЕНТ

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

маркированные списки (в HTML их принято называть ненумерованными);

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

списки словарного типа, или списки определений.

Маркированный или ненумерованный список (unordered list)

<UL> <LI> </ul>

<UL>

<LI> пункт 1 списка

<LI> пункт 2 списка

<LI> пункт 3 списка

</ul>

Элемент LI обозначает каждый из пунктов.

Вид ненумерованного списка

·  пункт 1 списка

·  пункт 2 списка

·  пункт 3 списка

Необязательным атрибутом тега <UL> является type, обозначающий тип маркера:

<UL type= «circle»> - кружок

<UL type= «disk»> - пустой кружок

<UL type= «square»> - квадратик.

Нумерованный список (ordered list)

<OL> <LI> </ol>

<OL type = «I»>

<LI> пункт 1

<LI> пункт 2

<LI> пункт 3

</ol>

I.  пункт 1

II. пункт 2

III. пункт 3

type = «» - в кавычках пишутся буквы или цифры: А - большие буквы (то есть будет А, В, С...); а - маленькие буквы (a, b, c...); I - римские цифры (I, II, III, IV...); 1 - арабские цифры ( 1,2,3...).

По умолчанию программа вставляет арабские цифры

Создайте файл ind4.html следующего содержания

<HTML>

<HEAD>

<TITLE> Советы по изготовлению страничек </title>

</head>

<BODY>

<H2 ALIGN = «Left»> Советы по изготовлению страничек </h2>

<OL>

<LI> По возможности вовсе избегайте пиктограммы «В процессе производства»

<LI> Используйте соответствующий язык

<LI> Не перегружайте вашу страницу большими изображениями

<OL>

<UL>

<LI> Избегайте драматического эффекта!

<LI> Проверяйте как можно чаще ссылки на вашей странице

<LI> Не забывайте обновлять свою страничку!

</ul>

<OL>

<LI> Перед тем как положить готовую страничку на сервер, надо:

<UL>

<LI> Проверить грамматические ошибки

<LI> Просмотреть свою страничку в различных программах просмотрах

</ul>

<LI> Для рекламы странички надо:

</ol>

</body>

</html>

Откройте файл в браузере. Попробуйте убрать <UL> и </ul> - увидите, в чем разница

Списки с определениями (definition lists) создаются при помощи тегов трех видов:

<DL> </dl>

<DT> - текст располагается без отступа от левого поля странички

<DD> - текст располагается с отступом от левого поля странички

Создайте в вашем редакторе файл ind5.html следующего содержания:

<HTML>

<HEAD>

<TITLE> Термины </title>

</head>

<BODY>

<DL>

<DT> Web server

<DD> Web server. Сервер, хранящий и пересылающий HTML - документы и другие информационные ресурсы Internet с использованием протокола HTTP. Его называют также HTTP - сервером. </p>

<DT> HOME PAGE

<dd> «Домашняя страница». Головная, начальная страница, локальный архив. Первая страница какого - либо Web - сервера или логически связанной группы HTML - документов. </p>

</dl>

</body>

</html>

ЗАДАНИЕ. СОЗДАЙТЕ СВОЙ СОБСТВЕННЫЙ HTML - документ, в котором должны присутствовать:

название странички;

заголовки нескольких уровней, выровненные по центру, левому и правому полю;

параграфы с текстом;

фрагменты выделенного текста (с помощью полужирного шрифта, курсива, размера шрифта, горизонтальной линии);

списки.

Сохраните этот файл и просмотрите.

Лабораторная работа №4

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

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

color ="red"

В табл. 1. представлены все допустимые названия цветов. На самом же деле цвет определяется не названием, а так называемым RGB-кодом, шаблоны которого уже упоминались выше. Любой цвет представляется в этом слу­чае как комбинация красного (R), зеленого (G) и синего (В) цветов, взятых в определенной пропорции.

Названия и коды цветов Таблица 1

Русское название	Английское название	RGB-код
аквамарин	aqua	#00FFFF
белый	white	#FFFFFF
желтый	yellow	#FFFF00
зеленый	green	#008000
каштановый	maroon	#800000
красный	red	#FF0000
оливковый	olive	#808000
пурпурный	purple	#800080
светло-зеленый	lime	#00FF00
серебристый	silver	#C0C0C0
серый	gray	#808080
сизый	teal	#008080
синий	blue	#0000FF
ультрамарин	navy	#000080
фуксиновый	fuchsia	#FF00FF
черный	black	#000000

Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается двухразрядным шестнадцатеричным числом. В десятичном ис­числении эти числа соответствуют диапазону от 0 до 255. Легко подсчитать что, комбинируя интенсивности трех базовых цветов, разработчик Web-страницы имеет возможность запрограммировать любой из доступных оттенков.

Если вы внимательно посмотрите на коды, приведенные в табл. 1, то обнаружите, что для формирования стандартных цветов используются или крайние значения интенсивности базового цвета 00 и FF, или среднее значе­ние 80. Многие современные приложения имеют средства для работы с цве­том, предоставляя пользователю возможность, выбрав в палитре цвет, уви­деть его численные характеристики. И наоборот, задав численные значения, получить новый оттенок. Нельзя, правда, сказать, что все подобные програм­мы совместимы между собой в смысле генерации цвета. Создав некоторый оттенок в одной программе, а потом, задав его RGB-код в другой, вы не обя­зательно получите тот же результат. Цветовые нюансы для Web-страниц лучше всего проверять на самих страницах. Труднее всего воспроизво­дится на компьютере подбор оранжевого цвета и требует визуального тестирования. Фрагмент HTML-файла для этого приведен ниже:

<TABLE border=3 width=200>

<TR>

<TD align="center" bgcolor="white" ><В>Код</b>

<TD align="center" bgcolor="white"><В>Цвет</b>

<TR><TD>#FFB000 <TD bgcolor=#FFB000>1

<TR><TD>#FFA800 <TD bgcolor=#FFA800 >2

<TR><TD>#FFA000 <TD bgcolor=#FFA000 >3

<TR><TD>#FF9800 <TD bgcolor=#FF9800 >4

<TR><TD>#FF9000 <TD bgcolor=#FF9000 >5

<TR><TD>#FF8800 <TD bgcolor=#FF8800 >6

<TR><TD>#FF8000 <TD bgcolor=#FF8000 >7

<TR><TD>#FF7800 <TD bgcolor=#FF7800 >8

<TR><TD>#FF7000 <TD bgcolor=#FF7000 >9

<TR><TD>#FF6800 <TD bgcolor=#FF6800 >10

<TR><TD>#FF6000 <TD bgcolor=#FF6000 >11

<TR><TD>#FF5800 <TD bgcolor=#FF5800 >12

</table>

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

bgcolor=#RRGGBB

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

Еще один аспект применения цвета. Выше упоминалось, что элемент HR, создающий горизонтальную линию, допускает использование ряда атрибу­тов. С их помощью линию можно превратить в цветной прямоугольник. Вот, например, прямоугольник светло-зеленого цвета, выровненный влево, высо­той 20 и шириной 18 пикселов:

<HR color="lime" size=20 width=18 align="left">

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

Осталось привести HTML-код, рисующий радугу на Web-странице:

<TABLE border=0 width=100% >

<TR><TD bgcolor=#FF0000> К

<TR><TD bgcolor=#FF7800 >0

<TR><TD bgcolor=#FFFF00 >Ж

<TR><TD bgcolor=#00FF00 >З

<TR><TD bgcolor=#43D8FB >Г

<TR><TD bgcolor=#0000FF >C

<TR><TD bgcolor=#8000CO >Ф

</table>

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

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

Задания к работе.

Создайте HTML - файл, чтобы получить следующую Web - страничку

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

 

Стандартные цвета

Аквамарин
Белый
Желтый
Зеленый
Каштановый
Красный
Оливковый
Пурпурный
Светло-зеленый
Серебристый
Серый
Сизый
Синий
Ультрамарин
Фуксиновый
Черный