 |
Гиперссылки на Web-страницах
|
|
|
|
Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта.
Гиперссылка состоит из 2 частей: указателя ссылки и адресной части ссылки. Указатель ссылки – это то, что мА видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием.
Адресная часть гиперссылки представляет собой URL-адрес документа, на который указывает ссылка.
URL-адрес может быть абсолютным и относительным. Абсолютный адрес полностью определяет компьютер, каталог и файл, в котором располагается документ. Абсолютный адрес документа, располагающегося на локальном, компьютере, будет включать в себя путь к файлу и имя файла, например:
C: /Web-сайт/filename.htm
Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера Интернета, путь к файлу и имя файла, например:
http://www.host.ru/Web-сайт/filename.htm
Относительный URL-адрес указывает на месторасположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web-страницы связывать относительными ссылками. Это не позволит изменять адресную часть ссылок при перемещении Web-сайта в другой каталог локального компьютера или при его публикации в Интернете.
Прежде всего необходимо разместить на титульной странице тексты гиперссылок на каждую страницу сайта. Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Принято размещать гиперссылки в нижней части страницы, поэтому разместим их под введенным текстом в новом абзаце в одну строку разделенными несколькими пробелами. Такое размещение гиперссылок часто называют панелью навигации.
|
|
|
| Тэги и атрибуты | Обозначения |
| Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в каталоге сайта. | |
| Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ). | |
| <A> </A> HREF | Теперь для каждой гиперссылки определим адрес перехода. Для этого используется указанный контейнер с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки. <HTML> <HEAD> <TITLE>Компьютер </TITLE> </HEAD> <BODY> <FONT COLOR="BLUE"> <H1 ALIGN="CENTER"> Все о компьютере </H1> </FONT> <HR> <P ALIGN="LEFT"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P> <IMG SRC="COMPUTER.GIF" ALT="Компьютер" ALIGN="RIGHT"> <P ALIGN="right"> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P> <P ALIGN="CENTER"> [<A HREF="software.htm"> Программы </A>]   [<A HREF="glossary.htm"> Словарь </A>]   [<A HREF="hardware.htm"> Комплектующие </A>]   [<A HREF="anketa.htm"> Анкета </A>] </P> </BODY> </HTML> |
| <ADRESS> </ADRESS> | Вставить в титульную страницу код, создающий ссылку на адрес электронной почты. <HTML> <HEAD> <TITLE>Компьютер </TITLE> </HEAD> <BODY> <FONT COLOR="BLUE"> <H1 ALIGN="CENTER"> Все о компьютере </H1> </FONT> <HR> <P ALIGN="LEFT"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P> <IMG SRC="COMPUTER.GIF" ALT="Компьютер" ALIGN="RIGHT"> <P ALIGN="right"> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P> <P ALIGN="CENTER"> [<A HREF="software.htm"> Программы </A>]   [<A HREF="glossary.htm"> Словарь </A>]   [<A HREF="hardware.htm"> Комплектующие </A>]   [<A HREF="anketa.htm"> Анкета </A>] </P> <ADRESS> [<A HREF="mailto:mailbox@provaider.ru"> E-mail:mailbox@provaider.ru </A>] </ADRESS> </BODY> </HTML> |
|
|
|
Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
· нумерованные списки;
· маркированные списки (в HTML их принято называть ненумерованными);
· списки определений позволяют составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
На странице «Программы» разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка.
| Тэги и атрибуты | Обозначения |
| <OL></OL> | Сначала создадим главный нумерованный список основных категорий программного обеспечения. Список располагается внутри заданного контейнера. |
| <LI> TYPE | Каждый элемент списка определяется данным тэгом. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), «I» (римские цифры), «а» (строчные буквы) и др. <HTML> <HEAD> <TITLE>Программное обеспечение </TITLE> </HEAD> <BODY> <FONT COLOR="BLUE"> <H1 ALIGN="CENTER"> Программное обеспечение </H1> </FONT> <HR> <P ALIGN="LEFT"> <OL> <LI> Системные программы <LI> Прикладные программы <LI> Системы программирования </OL> </P> </BODY> </HTML> |
| <UL></UL> | Создадим теперь вложенный ненумерованный список для одного из элементов основного списка. Список располагается внутри заданного контейнера, а каждый элемент списка определяется аналогично нумерованному списку. C помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: “disc” (диск), “square” (квадрат) или “circle” (окружность). |
| <UL> <LI TYPE=“square”> текстовые редакторы; <LI> графические редакторы; <LI> электронные таблицы; <LI> системы управления базами данных. </UL> | |
| <DL></DL> | Страницу «Словарь» мы представим в виде словаря компьютерных терминов. Для этого используем контейнер списка определений. |
| <DT> <DD> | Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DT>, и определения, которое следует за тэгом <DD>. |
| Открыть в Блокноте файл glossary.htm, ввести заголовок «Компьютерные термины» и добавить следующий HTML-код, задающий список определений: <DL> <DT> Процессор <DD> Центральное устройство компьютера, производящее обработку информации в двоичном коде. <DT> Оперативная память <DD> Устройство, в котором хранятся программы и данные </DL> | |
| Вставить на страницы «Программы» и «Словарь» гиперссылки на все страницы. |
|
|
|
|
|
|
