Изучаем HTML
Ссылки на адрес электронной почты
Наверняка в процессе работы во Всемирной сети вы не раз сталкивались с гиперссылками, при активизации которых автоматически запускается установленная на вашем компьютере почтовая программа и на экране формируется уже готовый к отправке бланк электронного письма с заполненным адресным полем и иногда полем Subject. Подобные гиперссылки также можно реализовать с использованием тега <А>. В виде кода HTML ссылку на адрес электронной почты представляют следующим образом:
<А HREF="mailto:user-l@server.ru?cc=user-2@server.ru, user-3@server.ru&subject=тема_письма" >текст ссылки</А>
Давайте рассмотрим все перечисленные выше параметры атрибута HREF более подробно. Директива mail to: указывает на основной адрес электронной почты, куда следует отправлять созданное автоматически письмо. В минимальной записи атрибута HREF при реализации гиперссылки на адрес электронной почты можно указать только эту директиву и какой-либо адрес e-mail. Функция ?сс позволяет определить адреса пользователей, которым будет отправлена копия сообщения. Если таких адресов больше одного, они записываются подряд через запятую без пробелов. И наконец, с помощью функции Subject можно задать тему отсылаемого сообщения.
Простым примером организации гиперссылки на адрес электронной почты автора этой книги может служить приведенный ниже отрывок html-кода:
<А HREF="mailto:alvion@rednet.ru&subject=комментарии читателей">Жду писем!</А>
Ссылки на файловые объекты
Гиперссылка на некий файловый объект подразумевает организацию гиперсвязи документа HTML с каким-либо файлом, хранящимся на сервере, например архивом ZIP. При нажатии мышью на такой гиперссылке автоматически открывается сессия загрузки данного файла с удаленного сайта на локальный пользовательский компьютер. Мнемоника записи подобной команды выглядит следующим образом:
<А HREF="http://www.myserver.com/fi1es/archive.ziр">текст гиперссылки</А>
Иногда для реализации гиперсвязи с файловым объектом в записи URL этого объекта используется префикс "file://", однако такой подход применяется в основном для организации ссылок на файловый объект, расположенный на локальном компьютере. Если загрузку файла планируется осуществлять по протоколу FTP, используйте префикс "ftp://". Если искомый файл расположен в тойже директории, что и вызывающий его документ, в качестве значения атрибута HREF можно просто указать его имя.
Практикум
Чтобы закрепить в памяти все новые знания, полученные вами в данном уроке, постарайтесь незамедлительно реализовать их на практике, а именно — наполнить разработанную в самом начале урока заготовку для web-страницы текстовым содержимым.
Для этого создайте в текстовом редакторе Блокнот (Notepad) два независимых документа, содержащих информацию, которую вы хотели бы представить на своей домашней страничке. Один из них этих документов разместите на стартовой странице сайта, другой — на странице одного из тематических разделов, например рубрики «мое хобби». В качестве наглядного примера я предлагаю небольшой текст в составе файла index.html. Вот он:
ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!
Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность заглянуть на мою страницу во Всемирной сети. Здесь Вашему вниманию предложена информация о моих увлечениях, моей биографии, моих друзьях, работе и семье. В отдельной рубрике я предлагаю Вашему вниманию несколько собственных фотографий. Надеюсь, они Вам понравятся.
К сожалению, в настоящий момент моя домашняя страничка находится в стадии разработки, потому еще далеко не все ее разделы доступны для просмотра. Я искренне надеюсь, что этот ресурс будет постоянно обновляться и в ближайшем будущем многие из перечисленных рубрик займут свое законное место. Например, в течение ближайшей недели здесь будет опубликовано:
Заходите на мою страничку почаще! С уважением, Иван Иванов.
Теперь настало время подготовить рубрику «Мои увлечения». Для этого создайте внутри каталога, в котором хранится содержимое вашего сайта (C:\MySite),вложенную папку, которую озаглавьте «Hobby», а в ней разместите пустой файл с названием index.html, созданный в редакторе Notepad.
Итак, все приготовления закончены. Осталось, воспользовавшись информацией, которую вы почерпнули из этого урока, превратить ваш текстовый файл в полноценный документ HTML:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML><HEAD>
<TITLE>Mоя домашняя страничка</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"ALINK="#FF0000">
<H1 ALIGN="CENTER"> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</Н1>
<BR>
<Р ALIGN="JUSTIFY">
 : Спасибо Вам. уважаемый посетитель, за то, что Вы нашли
время и возможность заглянуть на мою страницу во Всемирной сети. Здесь Вашему
вниманию предложена информация о
<А HREF="/hobby/index.html" TITLE="Рассказ о моем хобби, в частности о
коллекционировании марок">моих увлечениях</А>,
моей биографии, моих друзьях, работе и семье. В отдельной рубрике я предлагаю
Вашему вниманию несколько собственных фотографий. Надеюсь, они Вам понравятся.
</Р><BR>
<Р ALIGN="JUSTIFY">
 :  :  : К сожалению, в настоящий момент моя домашняя страничка
находится в стадии разработки, потому еще
<STRONG>далекр не все ее разделы доступны для просмотра</STRONG>.Я искренне надеюсь, что этот ресурс будет постоянно обновляться и в ближайшем будущем многие из перечисленных рубрик займут свое законное место. Например, в течение ближайшей недели здесь будет опубликовано:</Р>
<UL TYPE="SQUARE">
<LI>Моя биография.</LI>
<LI>Рассказ о моей семье.</LI>
<LI>Несколько фотографий.</LI>
</UL>
<Р ALIGN="CENTER">
Заходите на мою страничку почаще! С уважением.
<EM><STRONG>Иван Иванов.</STRONG></EM>
</Р>
<BR>
<HR>
<Р ALIGN="CENTER">Aвтор страницы Иван Инванов. 2000.
E-mail: <A HREF="mailto:ivan@server.ru&subject=отзывы посетителей">
ivan@server.ru</A>
</Р>
</BODY>
</HTML>
Как становится видно из предложенного выше кода, вступительная фраза «Добро пожаловать на мою домашнюю страничку!» использована в качестве заголовка первого уровня, словосочетание «моих увлечениях» превращено в гиперссылку на заглавный документ рубрики «Хобби», фраза «далеко не все ее разделы доступны для просмотра» выделена жирным шрифтом, маркированный список реализован с помощью меток в виде залитых черным цветом квадратов, а имя разработчика странички помечено жирным и курсивным выделением, имитируя подпись. Более того, нижняя часть документа отделена горизонтальной чертой, под которой размещена ссылка на адрес электронной почты автора данного web-сайта, а в качестве темы сообщения указана строка «отзывы посетителей». Результат ваших трудов будет выглядеть в окне броузера так, как показано на рис. 4.4.
Рис. 4.4. Внешний вид домашней странички
Второй html-документ, составляющий тематический раздел «Мои увлечения», предлагаю вам разработать самостоятельно по аналогии с приведенным примером. Не забудьте включить в текст этой страницы ссылку на заглавную страницу сайта.
Размещение страницы в Интернете
Начиная рассказ о процедуре публикации созданной нами домашней странички в сети Интернет, я предполагаю, что вы уже зарегистрировались на одном из сайтов, предлагающих своим посетителям бесплатный web-хостинг, получив учетную запись и пароль для доступа к ресурсам сервера, а также что для загрузки страниц на сервер используется протокол передачи файлов FTP.
Существует множество программ и утилит, облегчающих пользователям размещение web-страниц во Всемирной сети. На мой взгляд, самая удобная, простая в использовании, надежная и дружественная из них — это программа CuteFTP.
CuteFTP представляет собой тридцатидвухразрядное приложение MS Windows, предназначенное для загрузки файлов на удаленный сервер. Эта программа является Shareware-продуктом, рассчитанным на 30-дневный бесплатный период эксплуатации, по истечении которого необходима платная регистрация. Автор данной утилиты — программист из Сан-Антонио Алекс Кунадзе.
При загрузке CuteFTP на экране появляется окно менеджера связи (FTP SiteManager), внешний вид которого показан на рис. 4.5.
Рис. 4.5. Интерфейс менеджера связи
В левом окне менеджера связи отображается список папок, где хранится информация о FTP-сайтах, с которыми устанавливает соединение программа. Вы имеете возможность добавлять, удалять и переименовывать папки по собственному усмотрению при помощи кнопок Add folder, Delete folder и Rename folder.
Для того чтобы внести информацию об используемом вами FTP-сервере в базу данных Cute FTP, необходимо щелкнуть мышью на кнопке Add site, в результате чего на экране появится окно настроек удаленного хоста (Add Host) (рис. 4.6).
Рис. 4.6. Окно настроек удаленного хоста, вкладка General
В поле Site Label вкладки General данного окна необходимо указать краткое название создаваемого вами соединения, в поле Host address — адрес удаленного FTP-сервера, например, в виде ftp.server.ru. В поле User ID записывается ваш логин (учетная запись для доступа к FTP), а в поле Password, соответственно, пароль. Меню Login type предлагает на выбор три режима авторизации на удаленной машине: обычный, анонимный и двойной. Меню Transfer type позволяет пользователю специфицировать режим передачи данных: ASCII для трансфера документов HTML, текстовых файлов и скриптов, Image — для загрузки графических изображений и, наконец, Auto-Detect — для автоматического переключения из одного режима в другой в зависимости от типа загружаемого файла.
В меню Host Type вы должны указать тип операционной системы, установленной на удаленном сервере, выбрав ее название из предложенного списка. Если версия операционной системы вам неизвестна, рекомендую оставить установленный по умолчанию режим Auto-Detect. В поле Initial Remote Directory вносится имя каталога на удаленном сервере, в котором вы должны размещать составляющиеваш сайт файлы. Если они заносятся в корневую директорию, данное поле можно оставить пустым. В поле Initial Local Directory необходимо записать путь к папке на локальном компьютере, в которой хранится загружаемый вами на сервер контент, в нашем случае это C:\MySite.
В общем случае установленные по умолчанию настройки во вкладке Advanced окна настройки удаленного хоста можно оставить без изменений, поскольку они описывают лишь технические параметры соединения, такие как номер порта сервера (пункт Port), количество повторов попыток установки связи в случае возникновения ошибок (поле Connection Retries), временную задержку между повторами (пункт Delay between retries) и некоторые другие. Здесь же можно записать комментарии, которые будут отображаться в поле Comments менеджера связи при выделении мышью одного из пунктов списка доступных FTP-серверов.Внесенные в настройки хоста изменения можно зафиксировать нажатием кнопки ОК, которая возвращает пользователя в окно менеджера связи.
В правом верхнем поле окна FTP Site Manager отображается список доступных вданный момент удаленных FTP-серверов. После закрытия меню Add host в немпоявится новая позиция, озаглавленная так, как было указано вами в поле SiteLabel. Имеется возможность удалять из имеющегося списка FTP-сервера с использованием кнопки Delete site, редактировать текущие настройки при помощи кнопки Edit site и импортировать ранее подготовленные списки сайтов посредством кнопки Import.
После того как все необходимые настройки были вами внесены и в списке окна менеджера связи появился ярлык нового соединения, необходимо выделить его щелчком мыши, установить соединение с Интернетом и нажать на кнопку Connect. Можно передавать файлы.
Если соединение с удаленным FTP-сервером будет установлено успешно, на экране появится всплывающее окно, сообщающее о начале сеанса связи. Чтобы окно исчезло, нажмите кнопку ОК. Лишь после этого пользователь получает доступ к главному окну программы CuteFTP, внешний вид которого показан на рис. 4.7.
Рис. 4.7. Внешний вид главного окна программы CuteFTP
Рабочее пространство приложения CuteFTP разделено на три независимых поля. В верхнем, расположенном непосредственно под панелью инструментов с функциональными кнопками, отображаются отдаваемые программой команды и отклики сервера. В левом поле, размещающемся ниже, показано содержимое директории на локальном компьютере, в которой хранятся объекты, предназначенные для публикации на сайте. Чуть выше имеются средства навигации, позволяющие сменить текущий диск и текущую папку. В правом поле отображается содержимое каталога на удаленном сервере, в который вы будете загружать составляющие ваш проект файлы, причем данное поле также снабжено средствами навигации.
Ниже подробно описано назначение функциональных кнопок, расположенных в панели инструментов (рис. 4.8).
Рис. 4.8. Панель инструментов программы CuteFTP
1 — вызов окна менеджера связи для установки соединения с одним из доступных FTP-серверов;
2 — быстрая установка соединения, вызывает окно Quick Connect, аналогичное диалоговому окну Add Host, но с незаполненными полями настроек, куда пользователь может оперативно внести необходимую информацию и начать сеанс связи;
3 — принудительный разрыв текущего соединения;
4 — возобновление разорванного соединения;
5 — приостановка процесса передачи данных;
6 — загрузка данных с локального компьютера на удаленный сервер;
7 — копирование данных с удаленного сервера на локальный компьютер;
8 — добавление файла в очередь. Процедура, противоположная предыдущей, позволяет установить файл в очередь и указать его приоритет на копирование;
9 — просмотр содержимого выделенного файла;
10 — редактирование выделенного файла. Эта опция позволяет вам вносить изменения в содержимое своего документа HTML без длительной процедуры его повторного копирования. Она применяется в основном в процессе отладки web-страниц непосредственно на сервере. Для того чтобы воспользоваться этой функцией, необходимо указать путь к используемому вами html-редактору в поле HTML Editor панели Options, которая находится в меню FTP Settings командной панели программы. Для того чтобы отредактировать какой-либо файл, отметьте его мышью в правом окне CuteFTP, затем щелкните мышью на данной кнопке и нажмите ОК во всплывающем меню. Запустится ваш html-редактор. Завершив редактирование, сохраните файл стандартными средствами и закройте его. Появившееся на экране меню предложит вам на выбор два варианта действий: UPLOAD или CANCEL. Если вы хотите, чтобы изменения вступили в силу, выбирайте UPLOAD;
11 — переименование выделенного файла.
12 — запуск выделенной программы или скрипта на исполнение;
13 — удаление выделенного файла;
Собственно говоря, уже этого небольшого количества встроенных функций CuteFTP вполне достаточно, чтобы поместить необходимые файлы на сервер.Для этого нужно лишь выделить в левом поле при помощи мыши все содержимое локального каталога (C:\MySite), включая субдиректории, и нажать кнопку загрузки данных на удаленный компьютер, обозначенную на рис. 4.8 цифрой 6. CuteFTP сообщит вам о завершении операции копирования. Затем можно разорвать соединение с FTP-сервером и вызвать свою страничку из адресной строки броузера посредством присвоенного вашему сайту URL.
Несмотря на всю простоту процедуры публикации собственного ресурса в Интернете, я остановлюсь чуть подробнее на других возможностях CuteFTP, которые могут вам пригодиться.
Итак, управлять режимом передачи файлов вручную можно посредством меню FTP > Transfer Type, где вам предлагаются на выбор три варианта пересылки данных: режим ASCII, Binary и Auto. С помощью меню Session можно открыть новыйсеанс CuteFTP (опция Spawn Session), сохранить настройки какого-либо соединения в базе данных менеджера связи (пункт Add to Database), а также сделатьтекущие директории на локальном диске или на удаленном сервере открывающимися по умолчанию при запуске программы (опции Save Local Path и SaveRemote Path). Меню Commands позволяет отдавать серверу не только команды, продублированные на панели инструментов, но и директивы, введенные вами с клавиатуры (меню Custom Commands > Define). И наконец, управлять отображением файлов и директорий в соответствующих окнах CuteFTP вы можете при помощи меню View.
Таким образом, в рамках этого урока вы не только создали свою первую домашнюю страничку, но и опубликовали ее в Интернете. В следующем уроке мы проиллюстрируем ваш сайт графическими изображениями.
Урок 5 Графика в web-дизайне
| На главную |