Вставка гипертекстовых ссылок.
В отличие от простого текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Справочные системы многих программных продуктов построены именно по принципу гипертекста. При щелчке левой кнопкой мыши на некотором выделенном цветом и подчеркнутом фрагменте текущего документа - гипертекстовой ссылке - происходит переход к заранее назначенному документу или фрагменту документа.
На Web-страницах гипертекстовые ссылки широко используются для перехода к определенному фрагменту текущей страницы, к следующей или любой странице сайта или к документу другого сайта.
Для задания перехода по гиперссылке в языке HTML используются теги <а></а> с атрибутом href, значением которого является адрес перехода. В качестве адреса может использоваться имя файла другого документа или URL-адрес.
Каждый компьютер, подключенный к Интернету, имеет свой уникальный адрес, который может быть представлен или в числовом виде, например, 204.146.46.133, или определенным сочетанием символов, например, www.microsott.com. Поскольку каждый компьютер имеет свою уникальную структуру каталогов и файлов-, то и каждая Web-страница также имеет уникальный адрес, называемый URL (Uniform Resource Locator - Унифицированный указатель ресурсов). Как видно из названия, URL может указывать не только на страницы Web, но также и на другие ресурсы Интернета, например, FTP (File Transfer Protocol - Протокол передачи файлов) - хранилища файлов. В самом общем виде URL включает в себя указатель на протокол, который применяется для доступа к ресурсу - http, ftp и др. - и символьный адрес компьютера в сочетании с именем конкретного файла в структуре каталогов этого компьютера. Например, URL-адрес http://www.chat.ru/user/faq.html состоит из указателя на протокол http, который применяется для доступа к Web, имени компьютера www.chat.ru и имени файла-документа faq.html, который находится в каталоге user.
Из сказанного следует, что каждой Web-странице соответствует свой HTML-файл. Однако вы можете заметить, что во многих URL-адресах отсутствует имя файла, например, http://www.microsoft.com. Тем не менее, в окне браузера все же появляется конкретная страница. Дело в том, что администраторы Web-серверов могут указать на своих узлах некоторые HTML-файлы, которые выводятся по умолчанию, если имя файла в URL явно не задано. Обычно эти файлы имеют имена index.html или index.htm.
8.1. Cоздадим переход по ссылке с конца текущего документа spisok.html напервую страницу вашего сайта, т.е. к файлу Км.html. Чтобы сообщить посетителю сайта о возможности вернуться к первой странице, необходимо предусмотреть между открывающим <а> и закрывающим </а> тегами соответствующий текст:
8.2. Вставьте в файле spisok.html пустую строку перед закрывающим тегом </body> и введите в ней следующий код:
<center><a href=>”Км.html”>Ha первую страницу</а></ center >
8.3. Сохраните и проверьте работу, если вы все правильно сделали, то вы попадете на вашу первую страничку.
8.4. Теперь создадим гиперссылку для перехода с первой страницы - Км.html - на вторую - spisok.html. Для ссылки логичней всего будет использовать текстовый фрагмент нашей деятельности, так как список на второй странице раскрывает содержание именно этого фрагмента текста. Для чего:
8.4.1. Откройте в программе Блокнот (Notepad) файл Км.html
8.4.2. Отредактируйте этот файл, вставив тег <center> <a href=:spisok.html"> </a> за тегом <h1 align=center > Добро пожаловать на страничку группы Км! </h1>
8.4.3. А тег <а href=" spisok.html”> между текстом «Здесь вы узнает» и «о нашей учебе и жизни в колледже», а закрывающий тег </а> - после него
8.4.4. Установите для непросмотренной ссылки белый цвет (white), для просмотренной светло-зеленый (lime), а для ссылки в момент щелчка мышью - красный (red). Для чего отредактируйте файл Км.html, добавив в тег <body> атрибуты link=white, vlink=lime, alink=red так, чтобы этот тег имел следующий вид:
<body bgcolor=blue text=yellow link=white, vlink=yellow,alink=red>
8.4.5. Проверьте работу переходя с одной странички на другую.
Создание таблицы.
До сих пор мы создавали документы, в которых текст располагался в одной колонке. На практике иногда бывает необходимо расположить текст в двух или трех колонках. Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может эффектно выделить фрагмент текста, на который вы хотите обратить внимание читателя. Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну, и конечно же, таблица нужна для отображения информации в табличном виде. Часто таблица используется для В представления меню.
Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, представим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Ведь сайт может содержать десятки страниц. Поэтому очень важно иметь возможность быстро выбирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана так, чтобы оно постоянно оставалось в поле зрения пользователя.
Каждая таблица начинается тегом <table> и заканчивается тегом </tаble>. Строки таблицы образуются парой тегов <tr></tr>, между которыми располагаются пары тегов <td></td>. Каждая пара этих тегов образует один столбец. Между открывающим <td> и закрывающим </td> тегами помещается текст или любое другое содержимое ячейки
9.1. Создадим новую страницу нашего сайта, В окне программы Блокнот (Notepad) выберите команду меню Файл ðСоздать (File ð New)
9.2. В заголовке документа укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны
<title>Meню> </title>
<body bgcolor=esilver>
9.3. Вставьте пустую строку между открывающим <body> и закрывающим </body> тегами и, начиная с нее, введите код.
<table>
<tr><td>Главная страница</td></tr>
<tr><td>Чем мы занимаемся? </td></tr>
<tr><td>О нашей группе</td></tr>
<tr><td>Новости</td></tr>
<tr><td>Расписание </td></tr>
<tr><td>Развлечения</td></tr>
<tr><td>Наши партнеры</td></tr>
<tr><td>Клуб досуга</td></tr>
<tr><td>Связь с нами</td></tr>
</table>
9.4. Сохраните документ в папке Web под именем menu.html
9.5. Запустите его.
9.6. Используя атрибут align=center выравняйте таблицу по центру
9.7. Добавьте в тег <tаble> атрибут border=1, чтобы показать рамку и ячейки таблицы толщиной 1 пиксел
9.8. Установите для таблицы ширину 140 пикселов, добавив атрибут width=l40 в открывающий тег <table>
9.9. Выделить данные в ячейках полужирным начертанием и выравнять по центру ячеек, вместо тегов <td></td> используйте теги <th></th>
9.10. В тегах <td> и <th> вы можете использовать следующие атрибуты:
•align - для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;
• width - для указания ширины ячейки в пикселах;
• height - для определения высоты ячейки;
• valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.
9.11. Проверьте, как работают эти атрибуты, после чего верните таблицу в прежнее состояние.
9.12. Поэкспериментируйте с цветами и подберите подходящие, с вашей точки зрения, для таблицы, вставив атрибут bgcolor соответственно в тег <th>, <tr> или <table>.
9.13. Создадим ссылки из двух первых пунктов меню на соответствующие страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тегами <а></а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню - Главная страница - следует указать файл Km.html, т.е. href=" Km.html”, а для второго - Чем мы занимаемся? -файл spisok.html,т.е.href="spisok.html”
<tr><th><a href="km.html" target="frame">Главная страница</a></th></tr>
<tr><th><a href="spisok.html" target="frame">Чем мы занимаемся?</a></th></tr>
9.14. Проверьте работу. Щелкните мышью на первой ссылке - Главная, страница Если файл был загружен в то же самое окно браузера, то нажмите кнопку Назад (Back) на панели инструментов или просто закройте окно, если файл был загружен в новое окно. На экране снова отобразится файл menu.html.
9.15. Щелкните мышью на второй ссылке - Чем мы занимаемся? В окне браузера появится файл spisok.html. Закройте окно