| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |
Первая web-страница Разделители Для того чтобы визуально отделить часть
объектов html-документа от других, применяется тег <HR>. С его помощью можно отобразить в окне броузера горизонтальную черту заданного размера и цвета. В общем виде синтаксис директивы <HR>
выглядит следующим образом: <HR ALIGN="параметр" WIDTH="значение" SIZE="значение" COLOR="значение"> Атрибут ALIGN вам уже знаком, он определяет
положение горизонтальной черты на экране и может принимать одно из трех возможных значений: CENTER, LEFT и RIGHT (выравнивание черты по центру, левой и правой границам экрана). Атрибут WIDTH определяет
длину линии, причем его значение можно задавать либо в пикселах простым целым числом, либо в процентах от ширины экрана при помощи числа от 1 до 100 с добавлением символа %, например, WIDTH="268"
или WIDTH="80%". В последнем случае абсолютная длина линии будет меняться в зависимости от установленного пользователем экранного разрешения. Атрибут SIZE, значение которого — простое целое число,
задает толщину линии в пикселах. И наконец, атрибут COLOR определяет цвет заливки линии, в качестве его значения указывается либо шестнадцатеричный цифровой код, либо символьная нотация необходимого цвета.
Ниже приведен пример записи тега <HR>: <HR ALIGN="CENTER" WIDTH="80%" SIZE="1" COLOR="#0000FF"> Очевидно, что подобно директиве <BR>
команда <HR> не имеет закрывающего тега. По умолчанию, то есть в случае записи команды <HR> без указания каких-либо атрибутов, броузер отобразит двухцветную серо-белую вогнутую линию толщиной
в три пиксела и длиной во весь экран. Гиперссылки Гиперссылки устанавливают связь между каким-либо элементом текущего документа HTML и другой web-страницей либо
независимым объектом — файлом или изображением. В качестве гиперссылки может выступать не только часть текста, но и графический элемсйт. Как правило, текстовая гиперссылка выделяется на странице подчеркиванием
и цветом. О правилах представления в качестве гиперссылки графических изображений мы подробно побеседуем в пятом уроке. Что касается текстовых гинерссылок,то их можно разделить на четыре условных
категории: ссылки на документы, ссылки на разделы, ссылки на адрес электронной почты и на файловые объекты. Начнем по порядку. Ссылки на документы Реализовать
простую гиперссылку на другую web-страницу можно путем использования в html-документе тега <А>, синтаксис записи которого в общем виде выглядит следующим образом: <А HREF="URL"
TARGET="параметр" TITLE="альтернативный текст"> текст гиперссылки</А> В приведенном примере атрибут HREF указывает на адрес страницы, с которой вы планируете установить
гиперсвязь. Этот адрес может быть представлен как в виде полного URL (например, "http://www.server.ru/page.htinl"), если целевой документ физически
расположен на другом сервере, так и в виде сокращенного URL с указанием пути к искомой странице в пределах локального сервера (например, "/folder/page.html"). Если искомый документ расположен
водной директории с текущим, в качестве параметра атрибута HREF достаточно записать его название. Атрибут TARGET содержит директивы, описывающие правила открытия целевого документа в броузере, эти
директивы выделяются в коде символом подчеркивания. Одно из наиболее часто встречающихся значений атрибута TARGET="_blank" отображает открываемый по ссылке документ HTML в новом окне броузера.
И наконец, атрибут TITLE предназначен для создания так называемого альтернативного текста — всплывающей подсказки, появляющейся в небольшом прямоугольнике, если пользователь задержит курсор мыши
над гиперссылкой на несколько секунд. Такая подсказка может содержать, например, более подробное описание вызываемого документа. Следует помнить, что тег <А> является одной из немногих директив
HTML, не позволяющих организовать внутри нее вложение однотипных элементов. Иными словами, одну гиперссылку нельзя размещать внутри другой. Ссылки на разделы Иногда
возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на расположенный в пределах этой же страницы разделили участок текста. При активизации подобной гиперссылки броузер
отматывает экран таким образом, что искомый раздел или фраза оказываются в верхней его части. Процесс создания ссылки на раздел можно условно разделить на два этапа. Первый заключается в подготовке, так
называемой закладки —специальной метки с уникальным в пределах данного документа именем, присваиваемым закладке посредством атрибута NAME. Для этого в том участке текста, где необходимо разместить метку,
применяется следующая команда: <А NAME="имя_закладки">ключевое слово или заголовок раздела</А> Второй этап — создание самой ссылки при помощи такой команды:
<А HREF="#имя_закладки">текст ссылки</А> Помните, что для задания имени закладки лучше использовать латинские символы. При вызове раздела посредством гиперссылки имя закладки
предваряется символом #. Если вы хотите разместить ссылку на раздел какого-либо другого документа, описанный выше алгоритм в целом сохраняется, за исключением того, что в вызывающем теге перед именем
закладки указывается URL документа. В этом случае рекомендуется также использовать атрибут TARGET с параметром _blank. Подобная команда в обобщенном виде будет выглядеть следующим образом: <А
HREF="http://www.server.ru/document.php#имя_закладки" TARGET="_blank">текст ссылки</А> ВНИМАНИЕ
Помните, что броузеры не поддерживают режим отката при переходе— " по гиперссылке внутри документа. Иными словами, обратившись посредством ссылки к какому-либо разделу одной и той же страницы, при
нажатии кнопки НАЗАД вы попадете не на тот участок документа, который отображался до активизации гиперссылки, а но ту страницу, которая загружалась в броузер последней.
Ссылки на адрес электронной почты Наверняка в процессе работы во Всемирной сети вы не раз сталкивались с гиперссылками, при активизации которых автоматически запускается установленная на вашем
компьютере почтовая программа и на экране формируется уже готовый к отправке бланк электронного письма с заполненным адресным полем и иногда полем 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-сайта, а в качестве темы сообщения указана строка отзывы посетителей. Второй html-документ, составляющий тематический раздел Мои увлечения, предлагаю вам разработать
самостоятельно по аналогии с приведенным примером. Не забудьте включить в текст этой страницы ссылку на заглавную страницу сайта. Размещение страницы в Интернете Начиная
рассказ о процедуре публикации созданной нами домашней странички в сети Интернет, я предполагаю, что вы уже зарегистрировались на одном из сайтов, предлагающих своим посетителям бесплатный web-хостинг,
получив учетную запись и пароль для доступа к ресурсам сервера, а также что для загрузки страниц на сервер используется протокол передачи файлов FTP. Существует множество программ и утилит, облегчающих
пользователям размещение web-страниц во Всемирной сети. На мой взгляд, самая удобная, простая в использовании, надежная и дружественная из них — это программа CuteFTP. CuteFTP представляет собой
тридцатидвухразрядное приложение MS Windows, предназначенное для загрузки файлов на удаленный сервер. Эта программа является Shareware-продуктом, рассчитанным на 30-дневный бесплатный период эксплуатации,
по истечении которого необходима платная регистрация. Автор данной утилиты — программист из Сан-Антонио Алекс Кунадзе. При загрузке CuteFTP на экране появляется окно менеджера связи (FTP SiteManager)
В левом окне менеджера связи отображается список папок, где хранится информация о FTP-сайтах, с которыми устанавливает соединение программа. Вы имеете возможность добавлять, удалять и переименовывать папки
по собственному усмотрению при помощи кнопок Add folder, Delete folder и Rename folder. Для того чтобы внести информацию об используемом вами FTP-сервере в базу данных Cute FTP, необходимо
щелкнуть мышью на кнопке Add site, в результате чего на экране появится окно настроек удаленного хоста (Add Host) В поле 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 Рабочее пространство
приложения 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. Таким образом, в рамках этого урока вы не только создали свою первую домашнюю страничку, но и опубликовали ее в Интернете. 1>>>2>>>3>>>4 Обсудить в форуме...>>>>
| 
