Среда, 22.11.2017, 22:54
Приветствую Вас Гость | RSS

Веб-планета

Уроки HTML'а. Урок # 13.

Цвет ссылки
Вы можете изменить цвет текста ссылки. Мы уже говорили как заменять цвета простого текста с помощью тега <body>. Это было на на первом уроке, где также описано как изменить цвет ссылок во всем документе. Но можно заменить цвет ссылки еще и тегом <font>. Посмотрите:

<a href="http://cray.vision.krg.kz/~Sam/dlab"><font color="green">Design Lab</font></a>

Поглядите как будет выглядеть такая ссылка на практике:

Design Lab

Использование изображений для ссылок
В качестве средства ссылок на другие веб-страницы, можно использовать не только текст, но и изображения. В предыдущей главе рассказано о том, как помещать изображения на веб-страницу. Теперь вы узнаете, как сделать их так сказать ссылочными :). Это означает, что, когда вы кликаете мышью на изображении, на экран выводится другой веб-документ, ссылкой на который и служило это изображение.
Так же, как вы ссылались на другой документ с помощью текста, вы можете сослаться на него с помощью изображения. Нужно только вместо текста ссылки задать изображение. По умолчанию браузеры обнаруживают изображение с синей рамкой. Кликнув мышью в любом месте этого изображениея, посетители переходят на соответствующий документ. В качестве ссылок на веб-документы вы можете использовать любые виды изображений, рисунков и пиктограмм.
Очень популярны также изображения-карты. В качестве изображения-карты может применяться веб-графика любого типа. Такое изображение открывает различные файлы в зависимости от того, на каком фрагменте был произведен щелчок мышью. На следующих уроках вы узнаете об этом поподробее.
Давайте представим что нужно вставить графический рисунок Design Laboratory на страничку. Посмотрите на это:


Как вы видите синего бордюра обрамляющего картинку нет. В тег <img> я добавил ключевое слово border="0", дающее команду "отключить обрамление". Посмотрите теперь на код изображения:

<a href="http://cray.vision.krg.kz/~Sam/dlab"><img border="0" src="dlab.gif"></a>

Обратите внимание, якорь остался тем же, он ссылается на сайт Design Laboratory, но вместо текста я ввел тег <img>. Вот так просто задаются графические ссылки.
Якоря
Теперь вы большой знаток по HTML-ссылкам, умеете отсылать посетителей своей домашней страницы к любому другому файлу в Интернете. Однако есть еще несколько способов применения тегов <a> и </a>. Особо стоит отметить их использование в качестве внутренних ссылок и указателей.
Предположим, вы взяли большую книгу и хотите прочесть в ней только главу 26. Вместо этого вы обратитесь к оглавлению, найдете, где начинается нужная глава, и сразу отправить туда.
Так же работают якорные теги. Если у вас большой HTML-документ, в различных его местах нужно поставить якоря. Так, если бы толстая книга существовала в виде одного большого HTML-файла, логично было бы установить якорь в начале каждой главы. В начале HTML-файла нужно сделать оглавление, ссылающееся на каждый якорь в вашем файле (или на каждую главу). Если посетитель кликнет на якоре с меткой "глава 26", браузер автоматически перенесет его на якорь "глава 26" в том же файле; ему не придется просматривать бесчисленное количество страниц с информацией. Не забывайте, что якоря предназначены только для работы в одном большом HTML-файле. Чтобы организовать несколько файлов, применяйте гипертекстовые ссылки.
Давайте возьмем в качестве примера веб-узел, использующий якорные теги. Поглядите на этот сайт. Здесь вы найдете онлайновую книгу HTML Quick Reference. Этот узел содержит полный текст книги. Он разбит на несколько отдельных HTML-файлов, но в каждом HTML-файле есть несколько подразделов. Вы можете просмотреть оглавление и кликнуть на заголовке того раздела, который вас интересует, после чего немедленно увидите нужную часть HTML-страницы.
Якоря действуют так же, как и ссылки на другие документы в Интернете, только ссылки происходят на внутренние метки документа. Как и с обычными ссылками, вы можете использовать сколько угодно якорей и тегов, но не переборщите.
Разработчики веба часто называют применяемые таким образом якорные теги флажками.
Создание якоря и присвоение ему якоря
Работа с якорными тегами документа содержит два важных этапа. Во-первых, определите, на какие разделы HTML-документа вы хотите сослаться. Во-вторых, введите теги <a href="..">, указывающие на эти разделы.
Вы можете вводить именные якоря в любом месте ваших веб-страниц. Каждый тег позволяет непосредственно перейти в нужное место с помощью ссылки. В данном примере я помещу четыре якорных тега и ссоветствующие им ссылки.

<a href="#raz1">Переход к разделу 1</a><br>
<a href="#raz2">Переход к разделу 2</a><br>
<a href="#raz3">Переход к разделу 3</a><br>
<a href="#raz4">Переход к разделу 4</a><br>
<br>
<a name="raz1">Раздел 1</a><br>
Ваш текст<br>
...<br>
...<br>
...<br>
Ваш текст<br>
<a name="raz2">Раздел 2</a><br>
Ваш текст<br>
...<br>
...<br>
...<br>
Ваш текст<br>
<a name="raz3">Раздел 3</a><br>
Ваш текст<br>
...<br>
...<br>
...<br>
Ваш текст<br>
<a name="raz4">Раздел 4</a><br>
Ваш текст<br>
...<br>
...<br>
...<br>
Ваш текст<br>

"<a href="#raz1">Переход к разделу 1</a>" - этой строчкой мы обозначили якорным тегом имя Переход к разделу 1. Чтобы перейти на этот тег, посетитель должен кликнуть на флажке с именем raz1. Посмотрите, к чему привел этот код, и немного "подрессеруйтесь" :).

Переход к разделу 1
Переход к разделу 2
Переход к разделу 3
Переход к разделу 4

Раздел 1
Ваш текст
...
...
...
Ваш текст
Раздел 2
Ваш текст
...
...
...
Ваш текст
Раздел 3
Ваш текст
...
...
...
Ваш текст
Раздел 4
Ваш текст
...
...
...
Ваш текст

Задать якорь, как вы убедились, довольно легко.
Ссылка на якорь
После того как вы установили все необходимые якоря, настала пора составить оглавление, содержащее ссылки на каждый из якорей.
Ссылка на якорь очень напоминает стандартную ссылку. Для этого используется тег <a href="...">. Отличие в том, что вам надо сообщить браузеру, что это ссылка на якорь внутри документа. Это делается с помощью значка #. Для задания ссылки на раздел нашей "золотой" страничке, я использовал тег:

<a href="#raz4">Переход к разделу 4</a><br>

Символ # указывает браузеру, что следует искать флажок, а не страничку. Для посетителей текст такой ссылки будет выглядеть так же, как и текст любой другой ссылки. Однако при клике на таком тексте он перейдет не на отдельный HTML-файл, а на якорь, расположенный в той-же странице что и ссылка на него.
Компоновка ссылок в виде списков
Применяя на веб-странице ссылки, важно распологать их организованно, в определенном порядке, чтобы они были понятны и ими было легко пользоваться. Каждый раз, добавив очередной фрагмент HTML, убедитесь, что страница осталась огранизованной и читаемой.
Ссылки часто компонуют в виде списка. Раньше мы уже говорили о списках. Упоминалось и о том, что списки могут представлять собой множество отдельных фрагментов информации в четком маркированном виде. Списки очень удобны, если вы хотите использовать целый ряд ссылок. Например, у каждого есть своя подборка интересных веб-страниц. В нашем списке мы перечислим ряд мест, которые любит посещать веб-народ. Если бы эти ссылки не были расположены в виде спика, они представляли бы собой бесполезныю мешанину. Итак, смотрите:

  • Design Laboratory - сайт для веб-народа. Большая коллекция графики, софтины и прочеих полезностей для вебмастеров.
  • ADG Design - проект моего "односельчанина" :) Дмитрия Давыденко. Самый универсальный проект для веб-народа.
  • WebMaster - сайт для веб-народа. Коллекция клипартов, графики, скриптов и прочих инструментов.

  • Ну думаю достаточно... Посмотрите на код и все станет ясно:

    <li><a href="http://cray.vision.krg.kz/~Sam/dlab">Design Laboratory</a> - сайт для веб-народа. Большая коллекция графики, софтины и прочеих полезностей для вебмастеров.<br>
    <li><a href="http://dweb.ru">AGS Design</A> - проект моего "односельчанина" :) Дмитрия Давыденко. Самый универсальный проект для веб-народа.<br>
    <li><a href="http://gif.lgg.ru">WebMaster</a> - сайт для веб-народа. Коллекция клипартов, графики, скриптов и прочих инструментов.<br>

    Полезные советы
    Умение пользоваться гиперссылками является мощным средством веб-страниц. Однако наряду с увеличением гибкости появляется опасность сделать веб-страницу более запутанной и сложной для посетителей.
    Ниже я приведу ряд полезных советов относительно применения ссылок. Некоторые из них вытекают просто из здравого смысла, другие же покажутся менее очевидными. Следуя этим советам, вы не усложните веб-страницу при использовании ссылок.
    Пусть ссылок будет не слишком много
    Нельзя представить себе ничего более замкнутого, чем веб-страница, содержащая текст из 200 слов, из которых 180 являются ссылками на другие веб-ресурсы. Поскольку текст на ссылки подчеркивается, слишком большое число ссылок в абзаце (или на странице) делает его нечитаемым, и вряд ли это понравится посетителям.
    Посещение веб-страниц во многом напоминает разглядывание витрин магазинов. Если у магазина некрасивая, беспорядочная ветрина, вам вряд ли захочется тудай зайти. Помните об этом при использовании ссылок. Если вы все же хотите ввести множество ссылок, подумайте о создании простого (но хорошо организованного) списка в конце страницы.
    Текст ссылок должен быть понятным
    Постарайтесь сделать так, чтобы смысл был понятен. Я проиллюстрирую этот совет (ссылки выделены жирным шрифтом). Такой абзац содержит непонятную ссылку:

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

    А вот тот же текст с понятной ссылкой:

    Московский Ледовый Цирк - это сплошной праздник. Посещение этого цирка доставит удовольствие отдельным зрителям и целым семьям любого возраста и положения. Вы непременно захотите увидеть палатку цирка - самую большую цирковую палатку в мире на сегодняшний день.

    Ссылки не должны нарушать плавности повествования, как это было в первом примере ("Кликните на..."). Как будто посетители и так не знают, что нужно кликнуть на ссылку. Но вообще на первый взгляд это мелочи, но статистика показывает, что это очень важный элемент.
    Предупреждения о ссылках на большие документы
    Когда вы ссылаетесь на большие рисунки, файлы, звуковые файлы или видеоклипы (или даже на очень большие текстовые файлы), лучше честно предупредить об этом визиторов, поскольку загрузка больших файлов может занять много времени. Более подробно этот вопрос мы обсудим когда будем говорить о мультимедийности страницы.
    Поддерживайте ссылки в действующем состоянии
    Когда вы приобретете опыт в создании веб-страниц, на них, скорее всего, бедет целый ряд ссылок на различные части Веба. Эти ссылки со временем устаревают. Веб-страницу, на которую вы ссылаетесь, могут удалить или перенести на другой узел. В среднем раз в несколько месяцев некоторые ваши ссылки будут терять актуальность.
    Посетители вашей веб-страницы будут разочарованы, если попытаются воспользоваться такой ссылоки и узнают, что этой страницы больше нет. Периодически проверяйте ссылки на своей веб-странице, чтобы точно знать, что они актуальны. Иначе их лучше не использовать.
    Итог занятия
    На этом занятии мы закончили разоговор о ссылках. Вспомнили и научились по-другому задавть цвета ссылок, научилсиь применять изображения вместо текста ссылок, изучили якоря, научились компоновать ссылки в виде списков, узнали какие вещи желательно соблюдать используя ссылки на своей веб-странице.
    Меню сайта
    Шаг 1: Создаем сайт
    Шаг 2: Размещаем в интернет
    Шаг 3: Раскручиваем сайт
    Мини-чат
    РЕКЛАМА
      -------------------------
      Форма входа
      Наш опрос
      Оцените мой сайт
      Всего ответов: 44
      Друзья сайта
    • Официальный блог
    • Сообщество uCoz
    • FAQ по системе
    • Инструкции для uCoz
    • Статистика
      Copyright MyCorp © 2017
      Создать бесплатный сайт с uCoz
      Каталог ссылок, Top 100.