Веб-Самоделкин

Теперь сохраним все выполненные изменения и откроем нашу веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.10.

Веб-страница после выполненных доработок

Как видно на рисунке, в соответствии с изменениями программного кода слово написано курсивом, слово – полужирным шрифтом, а над основным текстом появился заголовок. Кроме этого, изменился фон цвет фона страницы и цвет шрифта, которым отображается текст.

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

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

Страница, которая должна открываться по ссылке

Файл этой страницы в нашем примере будет называться . Здесь мы не приводим ее исходный код, поскольку имеющихся знаний уже вполне достаточно для того, чтобы создать ее без подсказок. Именно эта страница должна будет открываться после того, как мы добавим гиперссылку на страницу, с которой только что экспериментировали (см. рис. 2.10).

Для создания гиперссылок в языке программирования HTML предусмотрен парный тег , который используется совместно с атрибутом . Значением данного атрибута является тот адрес, на который ведет гиперссылка.

Поместим оба наши файла ( и ) в один каталог. Чтобы создать гиперссылку на страницу , изменим код страницы так, как показано на рис. 2.12.

Создание гиперссылки

Попутно мы познакомимся с еще одним тегом HTML-языка – . Характерной особенностью данного тега является то, что он применяется не парно, а индивидуально. Иначе говоря, здесь нет открывающего и закрывающего тега, он один. Этот тег предназначен для вставки разрыва строки (от английского слова «break»). После того тега текст будет продолжен с новой строки.

ВНИМАНИЕ

Учтите, что при вводе основного текста язык HTML не реагирует на нажатие клавиши Enter. Несмотря на то, что в текстовом редакторе текст веб-страницы после каждого нажатия Enter будет продолжен с новой строки, при просмотре этой страницы в окне Интернет-обозревателя текст будет идти в одной строке. Поэтому для осуществления перехода на новую строку используйте тег
.

В рассматриваемом примере мы добавили в программный код страницы новую строку, поэтому после слова вставлен тег .

Что касается ссылки, то она сформирована в новой строке текста. Вот ее код:

 

В данном коде вначале следует открывающий тег вместе со своим атрибутом , имеющим значение (очевидно, что значением атрибута является в имя страницы, на которую ведет ссылка). Обратите внимание: в скобки открывающий тег заключен вместе с атрибутом и значением атрибута.

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

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

Гиперссылка в тексте страницы

Как видно на рисунке, на нашей странице появилась новая фраза , которая начинается с новой строки. Причем последнее слово данной фразы представляет собой гиперссылку. Обратите внимание – по умолчанию гиперссылки в тексте выделяются подчеркиванием. Если все сделано правильно, то после щелчка мышью на данной ссылке откроется страница (см. рис. 2.11).

Однако в Интернете гиперссылки широко используются не только для того, чтобы переходить на страницы одного и того же сайта, но и для перехода на другие веб-ресурсы. Чтобы решить эту задачу, нужно в программном коде гиперссылки указать веб-адрес требуемого ресурса. Рассмотрим, как это делается, на конкретном примере.

Сделаем из нашей страницы гиперссылку на популярный портал www.mail.ru. Для этого подкорректируем программный код так, как это показано на рис. 2.14.

Ссылка на www.mail.ru