Статьи

Как и когда использовать ссылки на HTML-страницах

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


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

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

[img_assist | nid = 2207 | title = Карта архитектуры контента | desc = | link = none | align = none | width = 490 | height = 359]

Затем эта структура будет реплицирована с использованием папок. Ниже представлено представление папки вышеупомянутой карты:

[img_assist | nid = 1971 | title = Представление папки выше CAM | desc = | link = none | align = none | width = 136 | height = 182]

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

[img_assist | nid = 1972 | title = Окончательная структура папок | desc = | link = none | align = none | width = 151 | height = 266]

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

[img_assist | nid = 1974 | title = Карта сайта на основе окончательной структуры папок | desc = | link = none | align = none | width = 456 | height = 456]

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


<ul>
<li>Home</li>
<li>Advice Corner</li>
<li>Bookings</li>
<li>Contact Us</li>
<li>Pets</li>
<li>Products</li>
</ul>

Это дает нам хороший, семантический неупорядоченный список, который позже можно превратить в панель навигации с помощью CSS. Далее пришло время добавить наш код ссылки к приведенному выше, чтобы ссылки действительно работали. Если вы еще не создали структуру папок, описанную ранее, сделайте это сейчас. В каждой из папок, упомянутых в неупорядоченном списке, добавьте пустой файл index.html и следующий код, изменив текст заголовка для каждого документа в соответствии с разделом, в котором он находится.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pets</title>
</head>
<body>
<h1>Pets</h1>
</body>
</html>

Отлично, теперь у нас есть верхний и первый уровень страниц, давайте подключим нашу навигацию.

<ul>
<li><a href="index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li><a href="pets/index.html" title="Take home your best friend">Pets</a></li>
<li><a href="products/index.html" title="View our unique product catalogue">Products</a></li>
</ul>

Ваш заполненный файл index.html, расположенный в корневом каталоге, теперь должен выглядеть примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to John's Pet Store</title>
</head>
<body>
<h1>Welcome to John's Pet Store</h1>
<ul>
<li><a href="index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li><a href="pets/index.html" title="Take home your best friend">Pets</a></li>
<li><a href="products/index.html" title="View our unique product catalogue">Products</a></li>
</ul>
</body>
</html>

Идите головой и проверьте свою навигацию. Если вы все проследили, чтобы знать, все должно работать идеально. На данный момент мне нужно упомянуть кое о чем, что вы
заметите, если вы набрали или прочитали код выше, если вы еще не читали код, сделайте это сейчас 🙂 Вы заметите, что я использовал атрибут title, который дал более информативное значение того, куда идет ссылка и что вы можете надеяться найти там. Это служит двойной цели. Если пункты меню где
изображения, а не просто текст, как они есть, ссылки могут создать реальную проблему для пользователей вспомогательных технологий, поскольку они не будут указывать, куда ведут эти ссылки. Конечно, вы можете использовать атрибут alt тега image, но использование атрибута title в тексте ссылки обеспечивает предсказуемые результаты в разных браузерах и, на мой взгляд, сохраняет ссылку и описание вместе как единое целое. При тестировании текущей навигации вы также заметите, что для возврата к главной целевой странице, чтобы снова получить доступ к навигации, необходимо использовать кнопку «Назад» в браузере. Это будет исправлено в ближайшее время.

Давайте еще немного расширим навигацию, чтобы включить дополнительные элементы навигации в разделе «Домашние животные». Мы расширим это, чтобы у вас был прямой доступ к различным имеющимся животным, а также к целевой странице для области домашних животных. Итак, наша расширенная навигация теперь будет выглядеть следующим образом:

<ul>
<li><a href="index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li><a href="pets/index.html" title="Take home your best friend">Pets</a>
<ul>
<li><a href="pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
<li><a href="pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
<li><a href="pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
<li><a href="pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
</ul>
</li>
<li><a href="products/index.html" title="View our unique product catalogue">Products</a></li>
</ul>

Код или скопируйте и вставьте его поверх текущей навигации на домашней странице. Кроме того, вам нужно будет скопировать файл index.html из корневой папки домашних животных в каждую из подпапок, а затем переименовать заголовки для каждой из них, чтобы отобразить правильную страницу, и снова протестировать навигацию:

<h1>Pets - Fish</h1>

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