Гипертекстовые ссылки и якоря

⇐ ПредыдущаяСтр 2 из 3Следующая ⇒

Способность Web-страниц содержать ссылки на другие Web-страницы – одна из наиболее привлекательных особенностей World Wide Web. Создать гипертекстовую ссылку в документе HTML очень просто. Для этого используются теги < A> и < /A>.

При создании гиперссылки обязателен атрибут HREF=. Его значением является адрес URL, на который указывает ссылка. Текст ссылки размещают между тегами < A> и < /A>. При отображении документа в броузере текст ссылки обычно подчёркивается и изображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу URL.

Гипертекстовые ссылки могут указывать на другую Web-страницу или на любой файл, имеющийся на WEB-узле. При щелчке на такой ссылке предоставляется возможность его загрузки или открытия.

Если Web-страница, на которую указывает ссылка, располагается на другом WEB-узле, то в качестве значения атрибута HREF= должен использоваться полный адрес URL документа, включая название протокола и web-узла. Такие ссылки называют внешними.

Если ссылка указывает на другую страницу того же самого WEB-узла, то достаточно указать только относительный путь поиска документа. В этом случае создаётся внутренняя ссылка. Использовать внутренние ссылки удобнее, так как в этом случае при переносе WEB-узла на другой сервер не требуется вносить изменения в отдельные документы.

Гипертекстовые ссылки могут указывать на определённое место внутри страницы, если в нужное место предварительно встроить якорь. Якорь также использует теги < A> и < /A>, но вместо атрибута HREF= для него обязательным является атрибут NAME=. Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать пробелов.

Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом #.

Задание.

Создать текстовый документ, Рис. 9:

Рис. 9 для задания 3

Просмотрите страницу в броузере, Рис. 10 и сделайте её размер в точности как на рисунке, тогда вы наглядно увидите, как работает ссылка на конец страницы, где стоит якорь.

Рис. 10 Просмотр страницы в броузере

Обратите внимание, как браузер подстраивает расположение символов под размер своего окна.

Рисунки на Web-страницах

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

Для размещения рисунков служит одиночный тег < IMG>.

Этот тег всегда должен содержать обязательный атрибут SRC=, значение которого составляет адрес URL файла изображения, записанный в абсолютной или в относительной форме. При загрузке документа рисунок также загружается и отображается в том месте документа, где расположен тег < IMG>.

Изображение переносится на Web-страницу с сохранением размера. Если при компоновке изображения необходимо его перемасштабировать, нужные размеры рисунка можно задать с помощью атрибутов WIDHT= (ширина) и HEIGT= (высота). Значения этих атрибутов определяют ширину и высоту изображения на Web-странице в пикселах.

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

Альтернативный текст – это, по сути, более или менее подробное описание изображения. Если броузер не может по той или иной причине показать рисунок, он вместо него выводит этот альтернативный текст. Альтернативный текст задаётся в теге < IMG> значением специального атрибута ALT=.

Задание.

Скопируйте в папку " Мои документы" рисунок " Будильник", находящийся по адресу Р: \ Студенты \ Кафедры \ Информационные технологии \ Для HTML. Создайте текстовый файл " Рисунок", Рис. 11:

Рис. 11 Для задания 4

Просмотрите страницу в броузере, Рис. 12:

Рис. 12 Просмотр страницы

Теперь добавляем текст – описание механизма будильника (папка HTML на диске Р: \) и альтернативный текст, Рис. 13:

Рис. 13 Добавление описания и альтернативного текста

Просмотрите станицу, Рис. 14:

Рис. 14 Всплывающая подсказка

Приятная особенность обозревателя Internet Explorer заключается в том, что он позволяет увидеть альтернативный текст и в том случае, когда рисунок отображается. При наведении указателя мыши на рисунок альтернативный текст отображается во всплывающем окне, Рис. 14.

Изображение переносится на Web-страницу с сохранением размера. Если при компоновке изображения необходимо его перемасштабировать, нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT (высота). Значения этих атрибутов определяют ширину и высоту изображения на Web-странице в пикселях.

Подкорректируйте размер изображения, Рис. 15:

Рис. 15 Устанавливаем размер рисунка

Теперь страница выглядит так, Рис. 16:

Рис. 16 Страница с изменённым размером рисунка

Изображение, как и текст, можно использовать в качестве ссылки. Для этого тег < IMG> должен быть помещён между тегами < А> и < /А>, определяющими ссылку. Изображение – ссылка отображается в синей рамке. При наведении на такой рисунок указатель принимает ту же форму, что и при наведении на текстовую ссылку. Этим приёмом на Web-страницах создают графические кнопки перехода.

Управление стилем шрифта

Для задания размера, цвета и начертания шрифта служит тег . Этот парный тег влияет на весь текст, заключенный между открывающим и закрывающим тегами. Тег должен иметь хотя бы один из трех возможных атрибутов: SIZE=; COLOR=; FASE=.

o Атрибут SIZE= задает размер шрифта, возможны 7 заданных параметров размера шрифта (от 1 до 7). Чем больше число, тем больше размер, по умолчанию – 3.

o Атрибут COLOR= задает цвет шрифта, который может быть задан либо ключевым словом (например, RED), либо шестнадцатеричным значением в системе RGB (например, #FF0000 тоже красный).

o Атрибут FASE= задает вид шрифта, этот атрибут лучше не использовать. Значением этого атрибута должно быть название одного из шрифтов, установленных на компьютере. Но для документа, размещённого в интернете, нельзя предсказать, какие шрифты доступны на компьютере пользователя.

Рис. 17 Стили шрифта

o Чтобы задать значения этих параметров для всего документа в целом, используют одиночный тег < BASEFONT>. Он содержит аналогичные атрибуты и задаёт значение вида, цвета и размера шрифта, используемое по умолчанию.

o Специальная группа тегов служит для изменения начертания шрифта. Теги  и  делают текст, заключенный между ними, полужирным. Теги  и  задают курсивное начертание,  и  подчёркивание, < S> и < /S> - вычёркивание текста.

Задание.

Создайте документ по образцу, Рис. 17

Просмотрите его в броузере, Рис. 18

Рис. 18 Просмотр задания

Определение элементов фразы

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

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

1. Тег < CITE> указывает, что соответствующий текст является цитатой из другого источника. Такой текст обычно изображается курсивом.

2. Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними. Так, тег < CODE> указывает на исходный текст компьютерной программы. Тег < KBD> оформляет текст, который должен быть (или был) введён с помощью клавиатуры. Этими тегами принято размечать команды пользователя и названия клавиш. Тег < SAMP> заключат в себе текст, который является примером вывода компьютерной программы. Тег < VAR> служит для оформления названий программных переменных или выбранных пользователем параметров компьютерной команды.

Текст, ограниченный любым из этих тегов, обычно изображается при выводе на экран моноширинным шрифтом. Кроме того, некоторые броузеры выводят текст, содержащийся между тегами < KBD> и < /KBD> , полужирным шрифтом.

3. Тег  предназначен для выделения текста. Выделенный текст обычно изображается курсивом. Более сильное выделение обозначается тегом . Такой текст изображается полужирным шрифтом. Так как здесь используется смысловое выделение вместо чисто оформительского, рекомендуется использовать теги  и  вместо тегов  и , соответственно.

Задание.

Создайте документ по образцу,

Рис. 19 Определение элементов фразы

Просмотрите его в броузере, Рис. 20

Рис. 20 Просмотр документа

Создание списков

При работе с текстовыми процессорами обычно используют два типа списков – упорядоченные (нумерованные) и неупорядоченные (маркированные). Язык HTML позволяет создавать целых пять разных видов списков. Правда, из этих пяти видов списков два (списки меню и списки каталога) считаются устаревшими и практически не употребляются. Таким образом, в настоящее время используют три вида списков: упорядоченные, неупорядоченные, и списки определений.

Упорядоченные и неупорядоченные списки создают примерно одинаковым образом. Список всегда располагается между открывающим и закрывающим тегами списка: < OL> и < /OL> в случае упорядоченного списка; < UL> и < /UL> в случае неупорядоченного.

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

Теги < OL>, < UL> и < LI> могут содержать атрибут TYPE=, значение которого указывает на способ пометки элементов списка. Упорядоченные списки можно нумеровать арабскими и римскими цифрами, латинскими буквами (как в верхнем, так и в нижнем регистре). Неупорядоченные списки помечаются маркерами в виде чёрного кружка (по умолчанию), белого кружка или квадратика.

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

Задание.

Создайте документ по образцу, Рис. 21.

Просмотрите его в броузере.

Рис. 21 Фрагмент кода для создания списков

Просмотрите его в броузере.

У вас должна получиться такая web-страница, Рис. 22:

Рис. 22 Готовая страница со списком.

Списки определений начинаются с тега < DL> и заканчиваются тегом < /DL>. Маркеры или нумерацию в этих списках не используют. Список состоит из определяемых терминов и соответствующих определений. Определяемые термины помечаются тегом < DT>, а определения - тегом < DD>. Закрывающие теги можно опускать. Предполагается, что определяемые термины и определения чередуются, хотя это и не требуется строго. Определения изображаются на экране с отступом от левого края.

Задание.

Создайте web-страницу, используя Рис. 23. Текст для этого задания вы можете взять по адресу P: \ Студенты\ Кафедры\ Информационные технологии\ Для HTML

Рис. 23 Фрагмент кода для задания 2.

Рис. 24 Готовая страница для задания 2.

⇐ Предыдущая 123 Следующая ⇒