HTML_Основы языка разметки гипертекста (1005869), страница 2

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 2)

С://путь/filename.htm

Абсолютный адрес документа, находящегося на удален­ном компьютере в Интернете:

http://www.host.ru/filename.htm

Относительный URL-адрес файла указывает на документ, расположенный в той же папке, что и документ, в котором находится указатель соответствующей ссылки.

Документы одного сайта, если они не расположены где-то в сети, рекомендуется связывать относительными ссылка­ми, чтобы не «потерять» их при перемещении файлов с од­ного компьютера на другой.

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

<Р ALIGN="center">

[<А HREF="software.htm">Программы</A>] &nbsp

[<А HREF="glossary.htm">Словарь</A>] &nbs

[<А HREF="hardware.htm">Koмплектующие</A>] &nbsp

[<A HREF="anketa.htm">Aнкeтa</A>] </P>

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

Полезно на титульной странице сайта создать ссылку на адрес электронный почты. Для этого атрибуту ссылки HREF присвоить URL-адрес электронной почты и добавить контейнер <ADDRESS></ADDRESS>, кото­рый задает стиль абзаца, принятый для указания адреса, и содержащий адрес электронной почты.

8. Вставить в титульную страницу код, создающий ссылку на адрес электронной почты:

<ADDRESS>

<А HREF="mailto:mailbox@provaider.ru">E-mail:

mailbox@provaider.ru</A>

</ADDRESS>

По щелчку мыши по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке «Кому» будет указан соответствующий адрес.

Созданная титульная стра­ница Web-сайта «Компью­тер» содержит заголовок, изображение компьютера, текст, панель навигации и ссылку на адрес электронной почты.

Списки на Web-страницах

Довольно часто при размещении текста на Web-страни­цах удобно использовать списки, в различных вариантах:

• маркированные списки (в HTML их принято называть не­нумерованными);

• нумерованные списки;

• списки определений, позволяющие составлять перечни определений в так называемой словарной форме.

Возможно создание и вложенных списков, причем вкла­дываемый список может по своему типу отличаться от основного.

На странице «Программы» разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка.

Сначала создадим основной ненумерованный список основных категорий программного обеспечения.

Список рас­полагается внутри контейнера <ul></ul>, а каждый эле­мент списка определяется тэгом <LI>. С помощью атрибута type тэга <ul> можно задать вид маркера списка: "disc" , "square" и "circle" (по умолчанию "disc").

9. Открыть в Блокноте файл software.htm и добавить следую­щий HTML-код, задающий список:

<UL>

<LI>Системные программы

<LI>Прикладные программы

<LI>Системы программирования

</UL>

Создадим теперь вложенные списки, причем нумерован­ные, для элементов основного списка. Список располагается внутри контейнера <ol></ol>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута type тэга <ol> можно задать тип нумерации: арабские цифры, римские цифры, буквы (по умолчанию арабские цифры).

10. Добавить HTML-код, задающий вложенный список для элемента <LI> Прикладные программы:

<OL>

<LI>текстовые редакторы;

<LI>графические редакторы;

<LI>электронные таблицы;

<LI>системы управления базами данных.

</OL>

Страницу «Словарь» мы представим в виде терминологи­ческого словаря компьютерных терминов.

Для этого используем контейнер списка определений <dl></dl>. Внутри него текст оформляется в виде термина, который выделяется непарным тегом <DT> и определения, которое следует за тегом <dd>.

11. Открыть в Блокноте файл glossary.htm и добавить следую­щий HTML-код, задающий список определений:

<DL>

<DТ>Процессор

<DD>Центральное устройство компьютера,

производящее обработку информации в двоичном коде

< DТ>Оперативная память

<DD>Устройство, в котором хранятся

программы и данные

</DL>

Формы на Web-страницах

Для того чтобы посетители сайта могли не только про­сматривать информацию, но и отправлять сведения его ад­министраторам.

Формы представляют собой управляющие элементы раз­личных типов:

• текстовые поля,

• раскрывающиеся списки,

• флажки,

• переключатели и т.д.

Разместим на странице «Анкета» анкету для посетите­лей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую ин­формацию они хотели бы видеть на нашем сайте.

Вся форма заключается в контейнер <form></form>.

В первую очередь мы хотим выяснить имя нашего читателя и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.

Для получения этих данных разместим в форме два одно­строчных текстовых поля для ввода информации.

Текстовые поля создаются с помощью тэга <input> со значением атри­бута TYPE="text".

Атрибут NAME является обязательным и служит для идентификации полученной информации. Зна­чением атрибута SIZE является число, задающее длину поля ввода в символах.

Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки <br>.

12. Открыть в Блокноте файл anketa.htm и добавить следую­щий HTML-код, создающий текстовые поля для ввода данных, просмотреть страницу в браузере:

<FORM>

Пожалуйста, введите Ваше имя: <BR>

<INPUT TYPE="text" NAME="name" SIZE=30><BR>

E-mail: <BR>

<INPUT TYPE="text" NAME="e-mail" SIZE=30>

</FORM>

Далее, мы хотим выяснить, к какой пользовательской группе относит себя посетитель. Дадим ему возможность вы­брать один из нескольких предложенных вариантов: уча­щийся, студент, учитель.

Для этого необходимо создать группу переключателей («радиокнопок»).

Создается такая группа с помощью тэга <INPUT> со значением атрибута TYPE="radio". Все элемен­ты в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".

Еще одним обязательным атрибутом является value, ко­торому присвоим значения "schoolboy", "student" и "te­acher". Значения атрибута value должны быть уникальны­ми для каждой «радиокнопки», т.к. при ее выборе именно они передаются серверу.

13. Добавить HTML-код, создающий группу переключателей для выбора одного варианта, просмотреть страницу в браузере:

Укажите, к какой социальной группе вы себя относите:<BR>

<INPUT TYPE="radio" NAME="group"

VALUE= "schoolbоу">учащийся<ВR>

<INPUT TYPE="radio" NAME="group"

VALUE="student">студент<ВК>

<INPUT TYPE="radio" NAME="group"

VALUE= "teacher">учитель<ВР>

Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предло­женного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге со значением атрибута TYPE="checkbox".

Флажки, объединенные в группу, могут иметь одинако­вые значения атрибута NAME. Например, NAME="group".

Еще одним обязательным атрибутом является value, ко­торому присвоим значения "www","e-mail" и "ftp". Значе­ния атрибута VALUE должны быть уникальными для каждо­го флажка, т.к. при его выборе именно они передаются серверу.

14. Добавить HTML-код, создающий флажки для выбора не­скольких вариантов, просмотреть страницу в браузере:

Какие из сервисов Интернета вы

используете наиболее часто:<BR>

<INPUT TYPE="checkbox"

NAME="group" VALUE="www">

WWW<BR>

<INPUT TYPE="checkbox"

NAME="group" VALUE="e-mail">

e-mail<BR>

<INPUT TYPE="checkbox"

NAME="group" VALUE="ftp">

FTP<BR>

15. Добавить HTML-код, создающий раскрывающийся спи­сок для выбора одного варианта, просмотреть страницу в браузере:

<SELECT NAME="browsers">

OPTION SELECTED>

Internet Explorer

<OPTION> Netscape Navigator

<OPTION> Opera

<OPTION> Neo Planet

</SELECT>

<BR>

16. Добавить HTML-код, создающий текстовую область для ввода комментариев, просмотреть страницу в браузере:

Какую еще информацию вы

хотели бы видеть на нашем сайте?<ВR>

<TEXTAREA NAME="resume"

ROWS=4

COLS=30>

< / TEXTAREA>

<BR>

17. Добавить HTML-код, создающий кнопки, просмотреть страницу в браузере:

<INPUT TYPE="submit"

VALUE="Отправить ">

<INPUT TYPE="reset"

VALUE="Очистить">

Для того чтобы при щелчке по кнопке Отправить дан­ные из формы передавались на сервер и там обрабатыва­лись, необходимо указать, куда их отправить и какая про­грамма будет их обрабатывать. Эти параметры задаются с помощью атрибута action контейнера <form>.

<FORM ACTION="URL"X/FORM>

Атрибут ACTION определяет URL-адрес программы, рас­положенной на Web-сервере, которая обрабатывает получен­ные данные из формы. Атрибут ACTION будет выглядеть следующим образом:

ACTION="http:/www.mycompany.ru/cgi-bin/bd.exe"

Инструментальные средства создания Web-страниц

Создание Web-страниц непосредственно на HTML требует больших усилий, времени и досконального знания синтак­сиса языка.

Однако применение специальных инструмента­льных программных средств (HTML-редакторов) делает ра­боту по созданию Web-сайтов простой и эффективной.

Существует мощные инструментальные системы разра­ботки сайтов, например, Microsoft Frontpage или Macromedia Dreamweawer.

Для разработки отдельных Web-страниц мож­но использовать свободно распространяемые редакторы Frontpage Express (входит в состав Microsoft Internet Explorer), Netscape Composer (входит в состав Netscape Communicator) и текстовый редактор MS Word 97.

Тестирование и публикация Web-сайта

Прежде чем разместить Web-сайт на сервере в Ин­тернете, необходимо его тщательно протестировать.

Необходимо просмотреть, как выглядят страницы в наиболее распространенных браузерах Internet Explorer и Ne­tscape Navigator (а они могут выглядеть по разному).

Необхо­димо проверить:

• нормально ли читается текст на выбранном фоне;

• правильно ли расположены рисунки;

• правильно ли работают гиперссылки.

Для публикации Web-сайта многие провайдеры предо­ставляют возможность размещения Web-сайтов на своих серверах, кроме этого существует зна­чительное количество организаций, которые также предо­ставляют место для публикации.

Для публикации Web-сайта необходимо получить от про­вайдера необходимые сведения:

• URL-адрес сервера, на котором будет размещен сайт;

• имя пользователя и пароль, которые необходимы для до­ступа к серверу (обычно они те же, что и для подключе­ния к Интернету);

• в каком каталоге сервера должны быть размещены фай­лы вашего сайта.

Для публикации можно воспользоваться инструменталь­ным средством, которое использовалось для создания Web-сайта.

Публикация Web-документов в сети

При размещении Web-документов в сети они становятся доступными для всех пользователей сети. Для публикации в сети необходимо выполнить следующие действия:

• выбрать Сохранить как меню Файл;

• в диалоговом окне Сохранение документа в раскрывающемся списке окна Папка выбрать FTP-адрес файл-сервера, связанного с Вашим Web-узлом (под строкой Адреса Интернета (FTP));

• выбрать папку для сохранения документа и проверить имя файла;

• щелкнуть на кнопке Сохранить.

20

Характеристики

Список файлов учебной работы