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

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

Tема работы: Перенос файлов страницы на сервер.

Цель работы: Создать учетную запись пользователя на сервере www.chat.ru. Загрузить файлы страницы на сервер и проверить работу глобальных ссылок. Изучить ограничения, имеющимися в языке HTML, и некоторыми приемами для их преодоления. Ознакомиться с возможностью ввода символов, отсутствующих на клавиатуре, с помощью специальных последовательностей кодов.

Теоретическая часть:

Работа страницы локально (загрузка с винчестера) отличается от запуска ее с сервера. Отличие состоит в работе ссылок. Глобальная ссылка должна содержать полный адрес узла с которого она будет загружать страницу для просмотра. Например, http://www.chat.ru/~username/index5.html – адрес глобальной ссылки, а c:\student\p306\index5.html – адрес локальной ссылки. При переносе файлов страницы на сервер надо учитывать то, что все локальные ссылки на сервере работать не будут. Необходимо везде где есть локальные ссылки, в HTML коде заменить их на глобальные. И измененные файлы загрузить на сервер. При создании фреймов надо внимательно редактировать код индексного файла.

Ход работы:

Перенос файлов страницы на сервер.

1. Откройте Internet Explorer.

2. В строке универсального адреса ресурса (URL) наберите www.chat.ru.

3. Найдите ссылку РЕГИСТРАЦИЯ и щелкните по ней, и загрузите страницу регистрации.

4. Нажмите кнопку СОГЛАСЕН.

5. В открывшемся окне страницы заполните РЕГИСТРАЦИОННУЮ КАРТОЧКУ ПОЛЬЗОВАТЕЛЯ. Имя пользователя составьте по следующему принципу: ваши инициалы на латинском + ваш год рождения.

6. После заполнения формы нажмите кнопку ЗАРЕГИСТРИРОВАТЬ.

7. В случае удачной регистрации, появится страница со следующими ссылками:

Пройти к первой странице сервера
Пройти к странице управления параметрами пользователя
Пройти к странице документации и помощи;

8. Щелкните по ссылке Пройти к странице управления параметрами пользователя. Появится еще одна страница, которая будет содержать следующие ссылки:

Создание страницы new!
(создание страницы по шагам: размещение текста, картинок, счетчика посещений)

Управление файлами и каталогами
(создание, удаление, загрузка, загрузка архивов с перекодировкой)

Изменение анкетных данных
(смена пароля, переадресации (forward), дополнительной информации)

Удаление пользователя
(полное удаление - почтового ящика и страницы)

Выход из системы.

9. Щелкните по ссылке Управление файлами и каталогами. На странице появится диспетчер файлов.

10.Создайте в Блокноте индексный файл index.html (с этого файла будет загружаться страница). Сохраните этот файл в папке C:\STUDENT\имя группы\. Этот файл должен содержать данные о пользователе: Ф.И.О. студента, создавшего страницу, номер группы, курса, наименование учебного заведения, дату создания страницы, ссылку на страницу с именем index2.html. Пример адреса ссылки: http://www.caht.ru/~username/index2.html.

11.Создайте страницу с именем index2.html, поместите на ней таблицу, список, рисунок. Сохраните файл в папке C:\STUDENT\имя группы\.

12.Вернитесь в Internet Explorer к странице с диспетчером файлов. Щелкните по кнопке UPLOAD (загрузка).

13.Появится страница с заголовком File Upload. Щелкните по кнопке ОБЗОР и выберите из каталога C:\STUDENT\имя группы\ файл index.html. Щелкните по кнопке открыть.

14.В поле Sourse file Encoding, выберите кодировку Windows cp1251.

15.Щелкните по кнопке UPLOAD.

16.Таким же образом загрузите файл index2.html на сервер.

17.Загрузите файл рисунка.

18.Щелкните по кнопке File List и просмотрите какие файлы у вас загрузились на сервер.

19.Загрузите свою страницу с сервера в новом окне броузера, набрав в строке адреса: http://www.chat.ru/~username.

Исследовательская работа

Исследование методов создания абзацного отступа в документах HTML

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

1. Запустите текстовый редактор (например, Блокнот) и начните создание документа HTML. Введите теги структурных элементов и дайте документу заголовок, например Имитация абзацных отступов.

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

3. Откройте обозреватель Internet Explorer и откройте в нем созданный документ. Отрегулируйте ширину окна программы так, чтобы исследуемый абзац занимал несколько строк. Убедитесь, что он выводится без отступа.

4. Добавление пробелов. Вернитесь к редактированию документа. Разместите после эталонного абзаца горизонтальную линейку (тег <HR>). Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца несколько пробелов. Сохраните документ.

5. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Объясните, почему создать абзацный отступ таким образом не удается.

6. Метод элемента списка. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца тег <DD>. Сохраните документ.

7. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Правильно ли используется код HTML в полученном документе? Можно ли рекомендовать такой метод создания абзацного отступа? Почему?

8. Метод неразрывных пробелов. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца повторенную несколько раз комбинацию символов  . Сохраните документ.

Комбинации символов, начинающиеся со знака “&” (амперсанд) и заканчивающиеся точкой с запятой, служат в языке HTML для задания символов, которые отсутствуют на клавиатуре или не могут включаться в текст документа согласно спецификации языка HTML (например, “<”). Комбинация   задает неразбивающий пробел.

9. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Можно ли рекомендовать такой метод создания абзацного отступа? Почему?

10. Метод предварительно отформатированного текста. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца тег <PRE>, задающий предварительно отформатированный текст, и несколько пробелов. В конце абзаца добавьте тег </PRE>. Сохраните документ.

11. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Обратите внимание на способ обработки пробелов и символов конца строки в предварительно отформатированном тексте. В чем особенность используемого шрифта? Выскажите свое мнение об использовании этого метода создания абзацного отступа.

12. Метод невидимого изображения. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца тег <IMG>, укажите используемый файл изображения и задайте отступ по горизонтали в 10 пикселов (HSPACE="10"). Файл изображения должен представлять собой картинку в формате GIF, состоящую из одного пиксела (1х1), заданного прозрачным цветом. Сохраните документ.

13. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ.

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

Контрольные вопросы:

1. Глобальные и локальные ссылки.

2. Взаимодействие клиент-сервер.

Отчет должен содержать:

1. Тему, цель работы, ответы на контрольные вопросы и на вопросы хода выполнения работы, выводы.

2. Описание выполненных действий по пунктам.