Цель работы: получение навыков практической работы с FTP-сервисом Internet, формирование умений создания простых HTML-документов
Литература
Спецификация HTML 4.01 (RUS)
Основы HTML
Основы HTML
Основы HTML. Основные тэги
Краткий справочник по HTML
Поясняющая информация
FTP-сервис разработан для того, чтобы позволить пользователю установить соединение с компьютером в Internet (работает по протоколу FTP- протокол передачи файлов (File Transfer Protocol)), просмотреть доступные на нем и скопировать на локальную машину или на сервер необходимые файлы.
Для работы с FTP-сервером требуется иметь специальное имя пользователя, зарегистрированное на сервере, и пароль для установления соединения. Однако существует весьма популярная разновидность этого сервиса, именуемая «анонимный FTP». Для работы с такими серверами в качестве имени используется anonymous, а в качестве пароля – любой выдуманный адрес электронной почты (пример: nnn@nnn.com).
WWW-страницы создаются с помощью специального языка HTML (HyperText Markup Language), являющегося по существу языком компоновки документов и спецификации гиперссылок. Средствами HTML задаются синтаксис и размещение специальных встроенных указаний (теги, заключенные в <> скобки), в соответствии с которыми браузер отображает содержимое документа: текст, изображения и данные других типов, поддерживаемые данным браузером. Базовый синтаксис и семантика языка HTML определены в стандарте HTML, который можно найти по адресу http://www.w3.org, там же есть ссылки на переводы этих стандартов на различные языки http://www.w3.org/Consortium/Translation/ .
В Internet существует большое количество русскоязычных описаний языка HTML, учебников по разработке WWW-страниц, специализированных серверов для WEB-мастеров и т.д. Большая подборка соответствующих материалов находится на сервере www.webclub.ru .
Рекомендую редактор Amaya официальный сайт http://www.w3.org/Amaya/
Локальные копии:
Для Windows - amaya-WinXP-11.3-pre.exe
Для Linux (Fedora...) - amaya_wx-11.3-pre-0.i386.rpm
Практические задания
Задание 1
Создать каталог (F7) на локальном диске в каталоге своей группы (\home\students\группа\имя), для локальной работы с сайтом.
Запустить редактор Amaya .
Создать главную страницу сервера (index.htm или index.html), на которой разместить информацию: - Фамилия И.О. студента - номер группы - название и ссылка на страницу своей кафедры - название и ссылка на страницу своего факультета - название и ссылка на сервер своего ВУЗа - ссылку на главную страницу курса "Интернет - технологии" не забудьте выставить кодировку UTF-8!!!
Разместить на этой странице какую-нибудь картинку (для вставки изображения щелкните по кнопке Insert Image и укажите нужное).
Подключиться к FTP серверу ipm.kstu.ru (IP 83.149.236.170), используя Krusader (аналог Total Commander) под своим логином и паролем (инструменты=>сетевое соединение). В целях безопасности не оставляйте свое имя и пароль постоянно прописанными в Krusader, а лучше его совсем не прописывать, а при каждом соединение вводить заново!!!
Скопировать страницу на сервере (все содержимое локального каталога копируем на сервер) и просмотреть в браузере, проверить работоспособность всех ссылок и открывание всех картинок. Просмотреть можно по адресу http://ipm.kstu.ru/students/группа/свой_логин/ . Если ссылка или картинка не открывается, щелкнуть правой кнопкой мыши по этому объекту, выбрать в появившемся меню свойства объекта, проверить появившийся URL на наличие ошибок и исправить.
Задание 2
Открыть в браузере перевод спецификации HTML 4.01, расположенный по адресу http://ipm.kstu.ru/internet/doc/.
Открыть первую страницу.
Выбрать режим работы с исходником страницы. В исходнике страницы укажите, в виде комментариев, для чего предназначена каждая группа тегов (каждый открывавший тег) и их свойства (атрибуты). Пояснение: <p> - открывающий тег. </p> - закрывающий тег. Примеры: <br> <!-- Перевод строки --> <font color=#0000a0 size=3> <!-- Шрифт, имеющий цвет=0000a0, размер=3 --> </font>
К сдаче лабораторной предоставляются: работающая страница на сервере с комментариями каждого тега и его свойств (атрибуты) в исходнике.
Цель работы: формирование умений создания HTML-документов с помощью фреймов, а также использования списков и таблиц.
Литература
Спецификация HTML 4.01 (RUS)
Основы HTML
Основы HTML
Основы HTML. Основные тэги
Краткий справочник по HTML
Поясняющая информация
Для формирования HTML-документов, содержащих кадры (фреймы) используются два тега: <frameset> и <frame>. Тег <frameset> задает количество и исходные размеры столбцов и строк кадров. Горизонтальное деление экрана задается при помощи атрибута row, вертикальное - атрибута cols. Значения атрибутов могут быть выражены в процентах или пикселях.
Внутри тега <frameset> должны быть ссылки на все документы, входящие в состав сложной страницы. Делается это с помощью тега <frame>.
Пример Web-страницы с двумя вертикальными фреймами
На рисунке представлен пример Web-страницы с двумя вертикальными фреймами. Левый кадр служит в качестве оглавления, правый является целевым кадром, в который выводится содержимое всех ссылок левого фрейма. В левый кадр выводится файл frame2.htm, в правый - frame1.htm. Ниже приведен исходный код документа.
<HTML> <HEAD> <TITLE>Пример фреймов</TITLE> </HEAD> <frameset cols="30%,*"> <frame name="toc" src="frame2.htm"> <frame name="main" src="frame1.htm"> </frameset> </HTML>
В теге <frame> указывается атрибут name, присваивающий имя кадру. Он необходим для указания целевого кадра для вывода содержимого гиперссылок. Чтобы документ, полученный по гиперссылке, загружался в поименованный кадр, в теге определения гиперссылок задается атрибут target:
<A HREF=”URL документа” target=”имя кадра”.
Ниже приводится упрощенный исходный код документа frame2.htm, в котором вывод всех документов по ссылкам определен в кадр с именем main, т.е. правый фрейм исходного документа frame.htm.
<HTML> <HEAD> <TITLE>Файл frame2.htm</TITLE> </HEAD> <BODY > <A HREF="file.htm" target="main"> Поиск файлов</A> <A HREF="index.htm" target="main"> Автоматические индексы</A> <A HREF="tema.htm" target="main"> Тематические каталоги</A> </BODY> </HTML>
Практические задания
Задание
Создать страницу ссылок на ресурсы сети, обязательно с использованием фреймов. Имена файлов должны иметь маленькие латинские буквы! В левом фрейме создать рубрики, оформить созданные ссылки в виде списка (тег <UL>) - поисковые системы - каталоги - литература в правом фрейме соответственно создать ссылки с названием и кратким описанием ресурсов. - для поисковых систем, ссылки оформить в виде таблицы из двух колонок и нескольких строк. В левой колонке поместить рисунки-логотипы поисковых систем, в правой - гиперссылки на эти системы. (ссылки www.yandex.ru, www.rambler.ru, www.aport.ru, www.google.com, www.filesearch.ru). Пример:
