This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ ––––––––––––––––––––– ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ “МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ПРИБОРОСТРОЕНИЯ И ИНФОРМАТИКИ”
––––––––––––––––––––– Кафедра “Персональные компьютеры и сети”
Б.М. Михайлов, Р.Ф. Халабия
ПРАКТИЧЕСКИЕ НАВЫКИ РАБОТЫ В ИНТЕРНЕТЕ
Учебно-методическое пособие по выполнению лабораторных работ
Москва 2009
УДК 004.738 ББК 32.973.202я73-5 Рекомендовано в качестве методических указаний редакционно-издательским советом МГУПИ Рецензенты: к.т.н., профессор Рощин А. В. Михайлов Б.М., Халабия Р.Ф. Практические навыки работы в Интернете: Учебно-методическое пособие по выполнению лабораторных работ. – М.: МГУПИ, 2009. - 50 с.
Данное учебно-методическое пособие посвящено основам работы в глобальной сети Интернет.
Основной целью является получение навыков
использования Интернет при поиске информации, в работе с электронной почтой и ftp-серверами. Кроме того, в пособии изложено практическое применение языка HTML. Методические
указания
предназначены
для
студентов
1 курса
специальности 230101 «Вычислительные машины, комплексы, системы и сети» .
Михайлов Б.М., 2009 Халабия Р.Ф., 2009 МГУПИ
2
Содержание 1 Лабораторная работа №1. Работа с FTP-серверами……………………………..4 2 Лабораторная работа №2. Поисковые системы и поиск информации в Интернете….…………………………………………………………………….....9 3 Лабораторная работа №3. Работа с электронной почтой……………………...15 4 Лабораторная работа №4. Язык разметки HTML………………………………23 Список рекомендуемой литературы………………………………………………40 Приложение А. - Бланк отчета по лабораторной работе №1…………………...41 Приложение Б. - Бланк отчета по лабораторной работе №2……………………43 Приложение В. - Бланк отчета по лабораторной работе №3……………………45 Приложение Г. - Бланк отчета по лабораторной работе №4……………………47 Приложение Д. - Пример оформления титульного листа отчета ..……………..49
1 Лабораторная работа №1. Работа с FTP-серверами 1.1 Цель лабораторной работы Цель работы – ознакомление и приобретение навыков работы с файловыми системами и ftp-клиентами. 1.2 Теоретические основы В Интернет есть много способов передачи информации c удаленного компьютера на локальный. Один из таких способов это File Transfer Protocol(FTP). FTP - это протокол передачи данных. Он предназначен для передачи файлов с удаленного компьютера на локальный, или наоборот. FTP можно использовать самостоятельно, а также через другие системы, например, WWW имеет FTP как часть своего протокола. FTP серверы разбросаны по всему миру, но для соединения с ними не требуется знания их физического расположения. В Интернет к серверу обращаются по адресу. Например, FTP сервер фирмы Borland имеет адрес ftp.borland.com. Итак, предположим, что Вам известен адрес нужного FTP сервера. Теперь неплохо было бы соединиться с ним. Это делается с помощью специальной программы, которая называется FTP клиент (см. табл. 1.1). FTP-клиент - это сервисная программа, с помощью которой можно произвести соединение с FTP сервером. Обычно эта программа имеет командную строку, но некоторые имеют оконный интерфейс и не требуют запоминания команд. Раньше, когда выход в Интернет имели только UNIXкомпьютеры, все FTP клиенты были одинаковы: командная строчка со стандартным набором команд и все. В настоящее время работа с программным обеспечением осуществляется с помощью манипулятора типа «мышь».
4
Таблица 1.1 - FTP-клиенты Название
Ссылка (URL) и примечание
1
2
CuteFtp
Версия: 5.0 Программа для работы с FTP серверами. Очень удобный интерфейс. Много функций. Если вы владелиц сайта, и часто обновляете его, то эта программа просто незаменима. Так же будет полезна тем, кто много скачивает файлов с FTP серверов и станет хорошим проводником по дереву каталогов в поисках файлов! http://www.cuteftp.com/
Internet Neighborhood
Версия: 4.5 Это 32 битный FTP клиент, для Win9x. Эта программы интегрирует FTP сервисы к вашему Windows Explorer-у. С IN вы с можете лазить по FTP, скачивать, закачивать, копировать, вставлять, использовать drag-drog функцию. С этой программой вы получаете ощущение работы с FTP, как со своим HDD. http://www.knoware.com/redirect/dci.html
WS FTP Pro
FTP Commander
Версия: 7.01 WS FTP - это одна из наиболее популярных FTP программ. В этой версии появилась возможность интегрировать WS FTP и Проводник (explorer), т.е. Вы сможете работать с FTP сайтами также, как с папкой "сетевое окружение"... Разумеется Вы можете и оставить старый "классический" интерфейс. Помимо этого, появилась возможность перебрасывать файлы с одной удаленной машины на другую, синхронизировать папки, работать с вебсайтом и т.д. http://www.ipswitch.com/ Версия: 5.01 Программа имеет стандартные функции для загрузки файлов с ftp-серверов. Позволяет удалять, переименовывать, копировать файлы; создавать и удалять директории на ftp-сервере. http://www.vista.ru/
FTP Voyager
Версия: 8.0 Позволяет использовать команды FTP работая в Windows Explorer. Коннект на FTP-сайт, поддерживается Drag-n-drop. Поддерживает много окон. Множество удобств. Интерфэйс напоминает CuteFtp. http://www.ftpvoyager.com/
5
Окончание табл. 1.1 1
2
AceFtp
Версия: 1.30 FTP клиент, с двуоконным интерфэйсом. В одном окне ваш жеский диск, в другом удаленный FTP сервер. Много настроек. Поддерживает функции drag & drop. Удобный интерфайс. http://freeware.aceftp.com/
Site Publisher
Версия: 1.1 Программа для синхронизации локальной и удаленной копии Вашего сайта по FTP. Т.е. Вы готовите локальную версию сайта, после чего, нажав одну кнопку обновляете сайт, не задумываясь над тем, какие файлы менялись, а какие нет - все это берет на себя программа. http://www.sitepublisher.net/
WebDrive
Версия: 2.2 Программа, подключающая FTP сервера как локальные диски и, позволяющая выполнять все файловые операции с ними из любой программы без использования специализированных FTP клиентов. http://www.webdrive.com/
Рассмотрим работу в программе Cute FTP, рабочее окно изображено на рисунке 1.1. Для быстрого доступа к серверу можно воспользоваться кнопкой «быстрой доступ» на панели инструментов. Для этого необходимо ввести URLадрес FTP-сервера (хоста), и пароль доступа к FTP-серверу.
6
Рисунок 1.1 - Главное окно программы CuteFTP
Рисунок 1.2 - Быстрый доступ к FTP-серверу 7
Рисунок 1.3 - Окно сервеса Site Manager программы CuteFTP Если же необходимо помнить все рабочие FTP-сервера, можно воспользоваться сервисом Site Manager. Этот сервис вызывается File-> Site Manager, после чего появляется окно (см. рис. 1.2). Далее заполняются все соответствующие поля и нажимается кнопка Соnnect. Для изменения информации служит кнопка Edit. Многие FTP-клиенты могут не подключаться к серверам по некоторым причинам. Этими причинами могут являться, что в данной программе необходимо настроить дополнительные параметры. В любом случае для уточнения параметров сети надо обратиться к администратору сети или вашему провайдеру. 1.3 Исходные данные для проведения лабораторной работы Исходными данными для выполнения работы являются браузер Internet Explorer и текстовый редактор Word Pad.
8
1.4 Порядок проведения лабораторной работы 1.4.1 С
помощью
трех поисковых
машин
Интернета найти
следующие сведения: Основные определения: домен, виртуальный сервер, WWW-сервер, FTPсервер, FTP-клиент, FTP- протоколы, протокол http, хост. Сервера, предоставляющие бесплатный хост. Десять
FTP-серверов,
соответствующих
теме
«Компьютерные
технологии». Принцип работы FTP-сервера. Сравнение FTP-клиентов. Порядок передачи файлов на сервер. Регистрация и резервирования места под сайт. 1.4.2 Зарегистрироваться и зарезервировать место под свой сайт на любом бесплатном хосте. 1.4.3 С помощью текстового редактора Word Pad ввести текст из примера, представленного ниже, и сохранить как «index.htm» на рабочий стол со следующими параметрами: заголовок документа должен быть «Лабораторная работа № 1 «Работа с FTP- серверами»»; тело документа должно содержать ФИО студента полностью, группу и номер зачётной книжки. 1.4.4 Созданный файл поместить на сервере, где вы зарезервировали место под сайт, и сделать его главным. 1.4.5 Через браузер загрузить вашу страницу с сервера и показать преподавателю.
9
Пример <TITLE> Заголовок документа Этот текст можно прочитать на экране
1.4.6 На
основании
найденной
информации
составить отчет по
лабораторной работе. Форма отчета представлена в приложении А. 1.5 Вопросы для самоконтроля 1) Назовите протоколы передачи файлов? 2) Назовите основные этапы закачки файлов на файловый сервер? 3)
Каковы
возможности,
предоставляемые
Интернета?
10
файловыми
серверами
2 Лабораторная работа №2. Поисковые системы и поиск информации в Интернете
2.1 Цель лабораторной работы Цель работы – Овладение навыками простого и расширенного поиска информации с помощью браузера Internet Explorer.
2.2 Теоретические основы Умение составлять
информационные запросы – серьезная проверка
информационной грамотности специалиста. При поиске точно названное ключевое слово может не дать точного результата. Поэтому необходим точный поиск, с использованием расширенной лексики и использованием специальных способов формирования запроса. Можно задать вопрос на так называемом «естественном языке» («где мне найти то-то и то-то»), но необходимо понимать: сознательное составление запроса сделает поиск более точным и информативным, сэкономит вам время и деньги. Введение запроса строчными буквами даст более расширенные результаты по сравнению с использованием прописных букв. Ввод нескольких слов без кавычек выдаст страницы, в которых имеется хотя бы одно из введенных слов, причем удаленность слов друг от друга будет большая, поэтому словосочетание необходимо брать в кавычки. Чтобы получить гарантию, что некоторое слово обязательно будет в результатах поиска, перед запрашиваемым словом ставится плюс (без пробела), чтобы исключить определенное слово из результатов, ставим минус. Используя знак звездочки *, можно расширить запрос до всех слов, содержащих введенную часть. Например, если ввести электротехни*, то в результатах
поиска
окажутся
страницы,
электротехнический и т. п.
11
содержащие
электротехника,
В Yandex можно запрашивать конкретную форму слова при поиске (исключив другие словоформы), поставив перед ним знак «!». Обычно используются следующие операторы: AND — и (и то и то — два термина вместе) OR — или (или тот термин или тот) NOT — не (не нужен такой-то термин) Как правило, поиск с использованием логических операторов, является особой разновидностью поиска и выносится в отдельный раздел, как например в Yandex при запросе Архитектура !AND! ЭВМ. Краткие советы по поиску информации в Интернет: Обдумайте
смысл
своего
запроса.
Возможно,
частично
ответ
вам уже известен. Чтобы найти информацию, ищите одновременно ключевые слова из вопроса и известный вам ответ. Используйте
проверенные
вами
поисковые
системы.
Если
вы
новичок в данной сфере, то вам не помешает уделить некоторое время
изучению
существующих
для
этого
сетевых
средств
и
принципов их работы. Число быть
документов, огромно.
полученных
Поэтому
в
решающее
результате значение
поиска,
для
может
оптимального
поиска информации имеет правильный набор ключевых слов. Описание того,
как
составлять
эффективные
запросы,
дается
в
самих поисковых ресурсах. Как правило, любая поисковая система имеет справочный раздел. Проверяйте орфографию в написании слова. Используйте синонимы, если список найденных страниц слишком мал. Ищите
больше,
чем
по
одному
слову.
Максимально
сужайте
предмет поиска. Не начинайте обычные слова с прописной буквы, кроме имен собственных. 12
Используйте ссылку «найти похожие документы», если один из найденных документов наиболее близок к искомому. Обратите внимание, что контекст документа уже может содержать ответ, т. е. не потребуется заходить в сам документ. При необходимости используйте
язык запросов и системы рас
ширенного поиска используемых поисковых систем. Еще раз напомним, что, используя незнакомую систему поиска, желательно изучить правила формирования запроса именно в ней. В ходе подготовки формируется план поиска информации и оформляется в виде текстового файла. Такой план включает: название искомых целей; искомые организации (фирмы) в аббревиатурах и полных названиях, на русском или иностранном языках; конкретные URL; ключевые слова для поиска. Обобщенная методика алгоритмизации информационного поиска может и должна применяться в качестве базы для обучения алгоритмам поиска (см. рис. 2.1).
13
Рисунок 2.1 – Алгоритм информационного поиска в сети Интернет
14
2.3 Исходные данные для проведения лабораторной работы Исходными данными для выполнения работы являются браузер Internet Explorer и текстовый редактор Word Pad.
2.4 Порядок проведения лабораторной работы 2.4.1 Составить сводную таблицу по ведущим поисковым машинам (Altavista, Yahoo!, Lycos, Google, Апорт, Яndex, Rambler, Direct Hit, Russia on the Net) 2.4.2 Найдите и составьте таблицу URL адресов отечественных и зарубежных публичных и электронных библиотек, энциклопедий. 2.4.3 Найдите и составьте таблицу перечня отечественных и зарубежных электронных
журналов
в
области
технических
наук
(специальность:
Вычислительная техника. Теория, технология и применения вычислительных машин и систем). 2.4.4 На
основании
найденной
информации
составить отчет по
лабораторной работе. Форма отчета представлена в приложении Б.
2.5 Вопросы для самоконтроля 1) Какие существуют виды поисковых систем? 2) Как начать поиск информации? 3) Что такое простой и расширенный поиск?
15
3 Лабораторная работа №3. Работа с электронной почтой
3.1 Цель лабораторной работы Цель работы – ознакомление и приобретение навыков работы с почтовыми системами и почтовыми клиентами.
3.2 Теоретические основы Электронная почта - это ваша персональная связь с миром Сети. Все те миллионы людей по всему свету, которые используют Сеть, имеют свой адрес электронной почты, или электронный адрес. Все возрастающее число "шлюзов" ("gateways") каждый день связывают с Сетью все больше и больше людей. Когда вы зарегистрировались в своей местной системе, с которой сейчас, в данный момент, работаете, она тоже автоматически сгенерировала для вас адрес. Основные
понятия,
на
которых
построена
электронная
почта,
соответствует концепциям построения обычной почты. Вы посылаете людям письма по их конкретным адресам. Они, в свою очередь, пишут вам на ваш почтовый адрес. Электронная почта имеет преимущества по сравнению с обычной почтой: скорость и сокращение стоимости пересылки послания. Электронная почта - это ваша связь для запроса помощи, ваша "спасательная линия" к Сети. Иногда Сеть сильно обманывает ожидания! Как бы вы ни старались, где бы вы ни искали, вы иногда не можете сказать, в чем причина ваших трудностей. Но если вы знаете, как использовать электронную почту, то получить помощь можно, просто нажав несколько клавиш: вы можете попросить помощи у вашего системного администратора или просто у знакомого в письме, направленном по электронной почте. Зарегистрировать свой почтовый ящик можно на любом почтовом сервере, которые обычно являются поисковыми (см. табл. 3.1) или узнать свой почтовый адрес у вашего администратора или провайдера.
16
Например, можно зарегистрировать свой почтовый ящик на бесплатном почтовом сервере http://www.mail.ru, нажав на ссылку регистрация в почте (см. рис. 3.1) . На появившийся странице надо нажать на кнопку начать регистрацию, и этом окно надо заполнить анкету, и после успешного заполнения у вас появиться почтовый ящик. Чтобы начать пользоваться почтовым ящиком, надо вернуться на главную страницу почтового сервера @mail.ru, набрать ваш логин и пароль, выданные при регистрации.
Рисунок 3.1 - Почтовый сервер @mail.ru
17
Таблица 3.1- Распространенные почтовые клиенты Название почтового клиента Outlook Express
Ссылка (URL) и примечание http://www.microsoft.com/ie/default.asp Cамый распространенный почтовый клиент, входит по умолчанию в операционную систему Windows http://www.ritlabs.com
The Bat
Универсальный почтовый клиент с расширенными возможностями http://home.netscape.com
Netscape Messenger
Альтернатива программе Outlook Express, входит в поставку пакета Netscape Communicator
Работать с электронной почтой можно прямо на сервере. Также можно воспользоваться специальными программами для работы с электронной почтой. Такие программы называют почтовыми клиентами (см. табл. 3.1). Настроив эти программы, можно автоматически забирать почту с любых электронных ящиков. Разберем настройку почтового клиента Outlook Express. Для работы в Outlook Express с почтовым ящиком c именами [email protected], [email protected], [email protected], или [email protected] необходимо настроить учетную запись. Запустив Outlook, выберите в меню пункт «Сервис», затем «Учетные Записи» (см. рис. 3.2). Чтобы создать новую учетную запись нажмите кнопку «Добавить» и выбрать «Почта». Запустится мастер подключения к Интернет, который поможет Вам заполнить все необходимые значения. Если Вы запускаете Outlook впервые, мастер запустится автоматически при старте программы.
18
Рисунок 3.2 - Учетные записи На первом шаге введите свое полное имя или имя учетной записи, и нажмите кнопку «Продолжить». Далее введите полное имя почтового ящика, включающее значок "@" и название домена ([email protected], [email protected], [email protected], или [email protected]). На следующей странице выберите тип сервера входящей почты - POP3 и введите имена входящей и исходящей почты : Сервер входящей почты (POP3-сервер): <точка><домен>, где домен - домен Вашего почтового ящика (для почтового ящика [email protected] - pop.mail.ru, [email protected] - pop.list.ru, [email protected] pop.bk.ru, [email protected] - pop.inbox.ru). Сервер исходящей почты (SMTP-сервер): <SMTP><точка><домен>, где домен - домен Вашего почтового ящика (для почтового ящика [email protected] smtp.mail.ru, [email protected] smtp.list.ru, [email protected] - smtp.bk.ru, [email protected] - smtp.inbox.ru). В качестве сервера для исходящей почты (Outgoing mail server) Вы можете указать SMTPсервер Вашего провайдера (его имя Вы можете узнать в службе поддержки пользователей Вашего провайдера. В качестве имени пользователя укажите имя почтового ящика без значка "@" и названия домена (для почтового ящика [email protected] - mailname,
19
[email protected] - listname, [email protected] - bkname, [email protected] inboxname). В поле "Password" укажите Ваш пароль к почтовому ящику [email protected], [email protected], [email protected], или [email protected]. Опция "Remember password" позволит Вашей почтовой программе запомнить пароль к Вашему почтовому ящику и не спрашивать его у Вас при каждой попытке скачать почту. Не рекомендуем Вам устанавливать эту опцию, если Вы не являетесь единственным пользователем компьютера. Опции "Подключение через защищенное соединение" (Secure Password Autentification - SPA) не должны быть включены: На следующем шаге на странице «Подключение» выбрать способ выхода в Интернет. Если у Вас уже есть учетная запись и хотите перенастроить ее на работу с Вашим почтовым ящиком, выберите ее «закладка Почта» и нажмите кнопку «Свойства». Далее следуйте инструкции для настройки новой учетной записи, описанные выше. 3.3 Исходные данные для проведения лабораторной работы Исходными данными для выполнения работы являются браузер Internet Explorer, текстовый редактор Word Pad и почтовый клиент Outlook Express.
3.4 Порядок проведения лабораторной работы 3.4.1 С
помощью поисковых машин Интернета найти:
Основные определения: сервер, почтовый сервер, электронный
почтовый адрес, электронный ящик, почтовый клиент, почтовые протоколы.
Историю развития почтовых серверов в Интернете.
Структуру почтового сервера.
Принципы работы электронной почты.
Сравнение почтовых ящиков по следующим критериям: Домены,
Размер
ящика,
Макс.
размер
20
письма,
Условия
существования,
Автоответчик, Фильтрация
Пересылка, СПАМА,
Проверка
Фильтры,
орфографии,
Сборщик
почты,
Антивирус, Переводчик,
Подтверждение прочтения.
Сравнение почтовых клиентов.
Настройку почтовых ящиков.
3.4.2 Настроить почтовый клиент установленный на вашей машине 3.4.3 Создать почтовый ящик на Mail.ru и провести настройку почтового ящика по следующим пунктам:
Зайти в адресную книгу, создать в ней папку «Преподаватель» и внести в нее адрес преподавателя, создать папку «Друзья» и внести в
неё
адреса
нескольких сокурсников.
Объединить
адреса
сокурсников в список с названием «Сокурсники»
Создать в почтовом ящике новую папку «Преподаватель».
Удалить из почтового ящика папку «Сомнительные»
Перенести письмо от преподавателя в папку «преподаватель». Для получения письма от преподавателя необходимо отправить письмо на указанный преподавателем адрес. В поле «тема» высылаемого письма должно быть написано «Ответ».
Добавить
фильтр,
автоматически
перемещающий
письмо,
пришедшее с адреса преподавателя в папку «Преподаватель».
Добавить такой фильтр, что бы на все письма, которые содержат слово «реклама» автоматически отсылалась информационное сообщение «Нет такого адреса».
Добавить фильтр, автоматически перемещающий все письма, чей размер более 1 Mb, в папку «большие». Кроме того, в ответ на такие письма автоматически посылать отправителю такого письма сообщение с текстом «не нужно присылать такие большие письма».
Настроить автоответчик так, что бы на каждое полученное письмо он отвечал отправителю «Ваше письмо получено». 21
Настроить время работы автоответчика на один месяц с текущего момента.
Настроить параметры безопасности так, что бы сервер Mail.ru отображал время предыдущего подключения при каждом входе в почтовый ящик.
Создать второй почтовый ящик на другом почтовом сервере (не на mail). Настроить параметр «сборщик почты» так, что бы он один раз в час забирал почту со второго ящика и помещал её в папку с названием «другая почта». При этом письмо должно быть удалено со второго почтового ящика.
Выслать Логин (Имя пользователя) и пароль от созданного почтового ящика для проверки на почтовый адрес преподавателя. При отправлении отчёта необходимо учитывать следующие требования. - В поле «от» должна быть указана фамилия студента, выполнившего лабораторную работу. - В поле «тема» должно быть написано «Л/р №3 настройка п/я», группа и номер зачётной книжки студента. - Имя и пароль почтового ящика указать в теле письма.
3.4.4 На
основании
найденной
информации
составить отчет по
лабораторной работе. Форма отчета представлена в приложении B.
3.5 Вопросы для самоконтроля 1) Назовите протоколы электронной почты? 2) Из каких элементов состоит адрес электронной почты? 3)
Каковы
возможности,
предоставляемые
Интернета? 22
почтовыми
серверами
4 Лабораторная работа №4. Язык разметки HTML 4.1 Цели лабораторной работы Цель работы – знакомство с основными понятиями языка HTML, структурой
HTML-документа,
обязательными
метками,
комментариями,
способами формирования текста, физическими и логическими стилями, работа с графическими изображениями и фреймами. Приобретение навыков создания Веб-документов. 4.2 Теоретические основы Документ HTML состоит из основного текста документа и тегов разметки, которые, как мы уже знаем, являются наборами обычных символов. Таким образом, документ HTML — это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор, хотя бы и тот простейший редактор Блокнот, который входит в состав Windows. Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега <НТМL> и заканчиваться соответствующим закрывающим тегом . Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML. Документ HTML состоит из раздела заголовков и тела документа, идущих именно в таком порядке. Раздел заголовков заключен между тегами и и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <TITLE> и , между которыми размещают «официальный» заголовок документа. Большинство броузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна броузера. Сам текст документа располагается в теле документа. Тело документа располагается между тегами и . Четыре перечисленных парных тега определяют основн ую структуру документа HTML. Они встречаются [или их наличие подразумевается) во всех документах HTML. На практике определить местоположение этих основных структурных тегов можно и при их отсутствии. Поэтому, если теги , и 23
, а также соответствующие им закрывающие теги опущены, то программа-броузер может сама определить то место, где они должны были находиться. Тег <TITLE>, определяющий заголовок документа, считается обязательным, но и его пропуск не вызовет катастрофических последствий в современных броузерах. Но все-таки при создании Web-страниц опускать все эти теги не рекомендуется, ведь заранее неизвестно, как поведет себя конкретный броузер, установленный на компьютере пользователя. Простейший правильный документ HTML (см. пример 1). Пример 1. <TITLE> Заголовок документа Этот текст можно прочитать на экране
Язык HTML предназначен для описания функциональных разделов документа. В большинстве обычных документов осноьными функциональными разделами являются заголовки и абзацы. Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от <Н1> и до <Н6> и . Реально на экране компьютера все эти заголовки изо бражаются шрифтами начертанием).
разного
размера
(обычно
полужирным
В соответствии с идеологией HTML текст, который действительно является заголовком, следует пометить с помощью одного из этих тегов. В составе языка имеются теги форматирования, изменяющие размер и начертание шрифта, но пользоваться ими в этом случае не рекомендуется. Для обозначения обычных абзацев в языке HTML используют тег <Р> (и соответствующий закрывающий тег ). Теги, описывающие 24
обычные абзацы, являются при наличии этих тегов броузеры между абзацами. В языке HTML
нет
никаких
необязательными. четко отслеживают
средств
для
создания
Однако границы абзацного
отступа («красной строки»), поэтому для удобочитаемости текста между абзацами броузер обычно вводит пустую строку. Важным средством создания разделителей в тексте являются горизонтальные полоскилинейки, визуально отделяющие разные части документа друг от друга. Горизонтальная линейка создается тегом . Это одиночный тег, не имеющий соответствующего закрывающего тега. При применении этих тегов важно принять во внимание, что все
кратные
(«лишние»)
пробелы
между
словами
и
переходы
на новую строку при воспроизведении документа HTML игнорируются. Если же надо осуществить переход на новую строку без создания абзаца, можно использовать тег . Рассмотрим все на примере 2. Пример 2 . <TITLE> Функциональные разделы документа
Главный заголовок
Подзаголовок
Эти строки изображаются слитно, несмотря на то, что в документе они отделены друг от друга.
Закрывающий тег абзаца не обязателен.
Тег начала абзаца более важен, чем реальный переход на новую строку
Текст
после
горизонтальной
линейки
25
разбит
на
две
строки.
Способность Web-страниц содержать ссылки на другие Web-страницы — одна из наиболее привлекательных особенностей World Wide Web. Создать гипертекстовую ссылку в документе HTML очень просто. Для этого используются теги <А> (и ). При создании гиперссылки обязателен атрибут HREF=. Его значением является адрес URL, на который указывает ссылка. Текст ссылки размешают между тегами <А> документа в броузере текст ссылки
и . При отображении обычно подчеркивается и
изображается синим цветом. Щелчок переходу по заданному адресу URL.
на
ссылке
приводит
к
Гипертекстовые ссылки могут указывать на другую Web-страницу или на любой файл, имеющийся на Web-узле. При щелчке на такой ссылке предоставляется возможность его загрузки или открытия. Если Web-страница, на которую указывает ссылка, располагается на другом
Web-узле,
должен
использоваться
название
протокола
то и
в
качестве
полный адрес
значения
адрес
URL
Web-узла.
атрибута документа,
Такие
ссылки
HREF= включая называют
внешними. Если ссылка Web-узла,
то
указывает на другую страницу того же самого
достаточно
указать
только
относительный
путь
поиска документа. В этом случае создается внутренняя ссылка. Использовать внутренние ссылки удобнее, так как в этом случае при переносе Web-узла целиком на другой вносить изменения в отдельные документы. Гипертекстовые ссылки внутри страницы, если в
сервер,
не
требуется
могут указывать на определенное место нужное место предварительно встроить
якорь. Якорь также использует теги <А> и , но вместо атрибута HREF= для него обязательным является атрибут NAME=. Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать пробелов.
26
Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом «#» (см. пример 3). Пример 3. <ТIТLE>Ссылки и якоря Новые версии стандартных программ операционной системы и самые свежие драйверы можно найти на Web-узле компании Microsoft . <Р>А теперь можно перейти к <А HREF="my.htm"> моей личной странице . <Р> 0 том как связаться с автором, рассказано <А HREF="#address"> в конце этой страницы Здесь располагается основное содержание страницы <А NAME="address">
Aдpec
электронной почты
Иллюстрации играют важнейшую роль в оформлении Web-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются броузером внутри Web-страницы. Для размещения рисунков в документе служит одиночный тег, . Этот тег всегда должен содержать обязательный атрибут SRC=, значение которого составляет адрес URL файла изображения, записанный в абсолютной или относительной форме. При загрузке документа рисунок также загружается и отображается в том месте документа, где расположен тег . На пример, . Изображение
переносится
на
Web-страницу
с
сохранением
размера. Если при компоновке изображения необходимо его перемасштабировать, нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота). Значения этих
27
атрибутов определяют ширину и высоту изображения на Web-странице в пикселах. Web-страница может отображаться броузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст. Альтернативный текст — это, по сути, более или менее подробное описание изображения. Если броузер не может по той иной причине показать рисунок, он вместо него выводит альтернативный текст. Альтернативный значением специального атрибута
текст ALT=.
или этот
задается в теге На пример,
SRC=”clock.jpg” ALT=”Будильник”> Изображение, как и текст, можно использовать в качестве ссылки. Для этого тег должен быть помещен между тегами <А HREF> , определяющими ссылку. Изображение-ссылка отображается в синей рамке. При наведении на такой рисунок указатель принимает ту же форму, что и при наведении на текстовую ссылку. Этим приемом на Web-страницах создают графические кнопка перехода. На пример, Язык HTML содержит теги, которые служат исключительно для оформления документа. Для задания размера, цвета и начертания шрифта служит тег . Этот парный тег влияет на весь текст, заключенный между открывающим и закрывающим тегами. Тег должен иметь хотя бы один из трех возможных атрибутов: SIZE=; COLOR=; FACE=. Атрибут S1ZE= задает размер шрифта. Предполагается, что возможны семь заранее значения не
заданных размеров шрифта соответствуют каким-либо
28
(от 1 до 7). Эти единицам измерения,
но чем больше значение, используется значение 3.
тем
крупнее
шрифт.
По
умолчанию
Атрибут COLOR= задает цвет шрифта, который может быть задан либо ключевым словом (например, RED — красный), либо шестнадцатеричным значением в это тоже красный).
RGB
системе
(например,
#FF0000
-
Атрибут FACE= задает вид шрифта. Значением этого атрибута должно быть название одного из шрифтов, установленных на компьютере. Но для документа, размещенного в нельзя предсказать, какие шрифты доступны на
Интернете, компьютере
пользователя, поэтому этот атрибут лучше не использовать. Чтобы задать значения этих параметров для всего документа в целом,
используют
аналогичные
одиночный
атрибуты
и
тег
задает
.
значение
вида,
Он
цвета
содержит и
размера
шрифта, используемое по умолчанию. Специальная шрифта. ними,
Теги
группа <В>
полужирным. и
--
тегов
и
Теги
служит
для
делают и
подчеркивание, a
текст, задают
<S>
изменения
начертания
заключенный курсивное
и
--
между
начертание,
вычеркивание
текста (пример 4). Рассматриваемые здесь теги по своему эффекту напоминают теги задающие оформление текста. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может отображаться по-разному в разных броузерах, но какой-то эффект гарантирован даже в том случае, когда по какой-либо причине нет возможности применить шрифтовые эффекты. Все эти теги парные и воздействуют на текст, который заключен между открывающим и закрывающим тегами. Закрывающий тег обязателен для каждого из открывающих тегов этой группы.
29
Пример 4 <TITLE>Управление стилем шрифта Этот текст использует нестандартный стиль шрифта, заданный по умолчанию.
FONT SIZE=-2 FACE="Times New Roman" COLOR="GREEN"> Этот текст мельче и использует другой шрифт и другой цвет.
<Р> <В>Полужирный шрифт и курсив используют для выделения фрагментов текста.
Использование подчеркивания не рекомендуется, так как подчеркнутый текст легко перепутать со ссылкой.
<S> Вычеркивание текста иногда применяют для разметки фрагментов, потерявших актуальность, но по каким-то причинам сохраняемых в документе.
Тег
<СIТЕ>
указывает,
что
соответствующий
текст
является
цитатой из другого источника. Такой текст обычно изображается курсивом. Так
как
язык
HTML
был
компьютерами, целая группа тегов текстов компьютерных программ
создан
людьми,
связанными
с
предназначена для представления и результатов взаимодействия
пользователя с ними. Так тег указывает на исходный текст компьютерной программы. Тег оформляет текст, который должен быть (или был) введен с помощью клавиатуры. Этими тегами принято размечать команды пользователя и названия клавиш. Тег <SAMP> заключает в себе текст, который является примером вывода компьютерной программы. Тег служит для оформления названий программных переменных или выбранных пользователем параметров компьютерной команды. Текст, ограниченный любым из этих тегов, обычно изображается при выводе на экран моноширинным шрифтом. Кроме того,
30
некоторые броузеры выводят текст, и , полужирным шрифтом.
содержащийся
между
тегами
Тег <ЕМ> предназначен для выделения текста. Выделенный текст обычно изображается курсивом. Более сильное выделение обозначается тегом <STRONG>. Такой текст изображается полужирным шрифтом. Так как здесь используется смысловое выделение вместо чисто оформительского, рекомендуется использовать теги <ЕМ> и <STRONG> вместо тегов и <В>> соответственно (пример 5). Пример 5. <TITLE>Элементы фразы<TITLE>
<СIТЕ> На сайт конгресса США были выложены все 445 страниц доклада специального прокурора L Кеннета Стара - это цитата из газеты "Московский комсомолец".
СОDЕ>Тексты программ, команды, <КВD>вводимые с клавиатуры , примеры <SАМР>вывода компьютерных программ и программные переменные обычно отображаются на экране примерно одинаково. <Р><ЕМ> Выделение и <SТРОNG> сильное выделение используется как смысловой эквивалент курсивного и полужирного начертания.
При работе с текстовыми процессорами обычно используют два типа списков — упорядоченные (нумерованные) и неупорядоченные (маркированные). Язык HTML позволяет создавать целых пять разных видов списков. Правда, из этих пяти видов два (списки меню и списки каталога) считаются устаревшими и практически не употребляются. Таким образом, в настоящее время используют три вида списков: упорядоченные, неупорядоченные и списки определений. Упорядоченные и неупорядоченные одинаковым открывающим
списки
создают
примерно
образом. Список всегда располагается между и закрывающим тегами списка: и в
случае упорядоченного списка;
и
— в случае неупорядоченного.
31
Внутри списка располагаются элементы списка. Их заключают между тегами
и
, хотя в данном случае закрывающий тег может опускаться, так как в этом случае ясно, где он должен располагаться. Теги ,
и
могут содержать атрибут TYPE=, значение которого указывает на способ пометки элементов списка. Упорядоченные списки можно нумеровать арабскими цифрами, римскими цифрами, латинскими буквами (как в верхнем, так и в нижнем регистре). Неупорядоченные списки помечаются маркерами в виде черного кружка (по умолчанию), белого кружка или квадратика (см. пример 6). Списки могут быть вложенными. Кроме того, элементы списков могут содержать гиперссылки, а также теги, используемые для форматирования и для выделения элементов фразы. Пример 6.
Внешние < LI >Принтер < LI >Сканер < LI >Монитор
Внутренние
Списки определений начинаются с тега
и заканчиваются тегом
. Маркеры или нумерацию в этих списках не используют. Список состоит из определяемых терминов Определяемые термины
и
соответствующих помечаются
определений. теп
, а определения — тегом
. Закрывающие теги можно опускать. Предполагается, что определяемые термины и oпрeделения чередуются, хотя это и не требуется строго. Oпpeдeлeния изображаются на экране с отступом от левого края (см. пример 7).
32
Пример 7
<STRONG>MIDI (Musical Instrument Digital lnterface)
Стандарт подключения к компьютеру музыкальных инструментов.
<STRONG>MPC (Multimedia PC)
Стандарт, описывающий требования к мультимедийному персональному компьютеру.
<STRONG>OLE (Object Linking and Embedding)
Технология связывания и внедрения объектов, стандарт компании Microsoft.
<STRONG>Plug and Play
Стандарт, по которому элемент оборудования содержит сведения о модели и компании-изготовителе и допускает настройку программными средствами.
Широкое распространение мультимедиа пришлось на период, когда служба World Wide Web уже существовала, так что язык HTML не сразу приспособился к появлению на Web-страницах мультимедийных объектов. Файлы аудио и видео до сих пор рассматриваются как «внешние» объекты, воспроизводимые через встроенные и вспомогательные приложения. Мультимедийные файлы видео и звука могут использовать различные форматы. Обычные форматы требуют полной загрузки файла, прежде чем станет возможным его воспроизведение. Современные потоковые форматы позволяют воспроизводить звук и видеоизображение в реальном времени по ходу загрузки данных. В потоковом формате в Интернете передаются радиотрансляции. Например, в России в таком формате вещает радиостанция «Серебряный дождь» (http://www.silver.ru). Самый простой способ вставить мультимедийный объект на Webстраницу — это использовать тег гиперссылки <А>. Создать такую ссылку проще всего, и в этом случае мультимедийный файл не отвлекает читателя от остального содержимого документа HTML.
33
В некоторых случаях требуется внедрить звуковой или мультимедийный файл непосредственно в Web-страницу, например, для того, чтобы иметь возможность воспроизводить этот файл автоматически. В настоящее время для этой цели удобнее всего применять тег <EMBED>, хотя он, строго говоря, не входит в стандарт HTML. Этот тег распознается двумя наиболее распространенными броузерами — Internet Explorer и Netscape Navigator, хотя возможность воспроизведения мультимедийного файла определяется исключительно наличием соответствующего встроенного приложения. Тег <EMBED> является одиночным, так что закрывающий тег не требуется. Его обязательным атрибутом является SRC=, значение которого представляет абсолютный или относительный путь поиска соответствующего файла. Возможно также использование атрибутов WIDTH= и HEIGHT=, задающих размеры (ширину и высоту) прямоугольной области на экране, «отведенной» под воспроизведение мультимедийного объекта (пример 8). <ТITLЕ>Мультимедиа в документе <Р><А HREF="music.wav">Щелкните здесь, чтобы послушать музыку <Р> Видеоролик, воспроизводимый в рамках страницы <EMBED SRC="file.avi" WIDTH="200" HEIGHT="200">
Таблица — это один из наиболее удобных способов представления больших объемов данных. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц. Таблица в языке HTML начинается с тега
и заканчивается закрывающим тегом
. Текст внутри таблицы должен быть заключен в специальные таблицы (заголовки, строки и ячейки).
теги,
определяющие
элементы
Между тегами
и
может один раз встретиться пара тегов
и
, определяющая заголовок
34
таблицы. Заголовок таблицы размещается непосредственно таблицей (по умолчанию) или непосредственно под таблицей.
над
Далее следуют теги
и
, определяющие строки таблицы. Закрывающий тег можно опускать, так как строка таблицы заканчивается таблицей.
перед
началом
следующей
строки
или
вместе
с
Каждая строка таблицы состоит из ячеек. Ячейки помечаются либо тегами <ТН>, содержащими заголовки столбцов и строк, либо тегами
, содержащими обычные данные. Эти теги также являются парными, но закрывающие теги и здесь могут опускаться, так как это не вызывает разночтений. Внутри ячеек могут содержаться любые данные и любые теги HTML, допустимые в разделе тела документа. Например, ячейка таблицы может
содержать
автоматически
вложенную
вычисляют
размеры
таблицу.
ячеек
и
всей
Броузеры таблицы,
хотя
эти свойства частично можно задать и при помощи атрибутов. Из специфических атрибутов таблиц можно, например, указать атрибут
BORDER=,
который
таблицы
и
отдельных
вокруг
позволяет ячеек.
создавать Значением
рамку этого
вокруг атрибута
является толщина внешней рамки в пикселах. Пример 9 <ТITLE> Та6лица
<САРТION>Основные
теги
таблицы
<ТR>
Открывающий
тег
<В>Закрывающий тег <ТD><В>Описание
TABLE
Обязателен<ТD>Начало и конец таблицы
CAPTION <ТD>Начало и конец заголовка таблицы
TR
Необязателен <ТD> Начало строки таблицы
TD <ТD>Начало ячейки таблицы
35
В примере 9, использованы и другие атрибуты, с помощью которых увеличены промежутки между ячейками и созданы ячейки увеличенной высоты. Язык HTML позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами. Для структура
создания которого
фреймов используют особый документ HTML, отличается от обычной. Такой документ не
содержит раздела «тела» документа и, на самом деле, не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов, заключенное между тегами . В этом описании указывают размеры и порядок размещения областей в окне броузера, а также задают документы, которые должны загружаться в каждую из этих областей. Тег
. Изображение
Язык HTML содержит теги, которые служат исключительно для оформления документа. Для задания размера, цвета и начертания шрифта служит тег . Этот парный тег влияет на весь текст, заключенный между открывающим и закрывающим тегами. Тег должен иметь хотя бы один из трех возможных атрибутов: SIZE=; COLOR=; FACE=. Атрибут S1ZE= задает размер шрифта. Предполагается, что возможны семь заранее значения не