Как правильно использовать якоря html?

Как создать якорь в html?

Если для кого-то непонятен термин ЯКОРЬ, то в данной теме я расскажу об этом, а так же как создать якорь в html и его использовать. Ведь использование якоря html не только удобно, но и необходимо для SEO. В глазах поисковиков это выглядит как плюс вашему сайту, если конечно он создан в качестве внутренней перелинковки. Ну о данном факте могут не знать только начинающие. Данная статья поможет вам сделать якорь на странице html и как сделать якорь на другую страницу, а также представлю несколько видов якорей.


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

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

СДЕЛАТЬ ЯКОРЬ В ПРЕДЕЛАХ ОДНОЙ СТРАНИЦЫ.

Якорь html выглядит из двух частей, это указатель и метка. Указатель можно сделать так:

1
<a href="#metka">>Параграф 1</a>

То есть вы заключаете в тег то слово или часть текста, которое делаете кликабельным и от него будет переброс к метке, а в том месте, куда вы хотите сделать переброс, указываете метку, которые можно сделать двумя способами:

1 способ создания якоря html:

1
<a name="metka">Текст</a>

2 способ вставить якорь в html:

1
<a id="metka">Текст</a>

Иными словами в указателе стоит имя metka, вот по имени метки и происходит переброс. Имейте в виду, что имена меток не должны повторяться, а если такое произойдет, то будет путаница с переходами. То бишь будут 2 указателя ссылаться на одну и ту же метку. Страшного ничего нет, но переход будет не к тому месту, в который вы ожидали.

ЯКОРЬ html В ПРЕДЕЛАХ СВОЕГО ИЛИ ДРУГОГО САЙТА

В данном случае указатель будет выглядеть чуток иначе:

1
<a href="myborder.ru/site1#metka">Текст</a>

Как вы заметили сделать якорь в html не так уж и сложно.

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

После открытия метки мы не видим несколько предложении, иногда это неудобно. Так вот, чтобы такого не было, применяют якорь с отступом.

ЯКОРЬ html С ОТСТУПОМ 4 ВАРИАНТА

1 вариант вставить якорь на сайте:

1
2
3
4
5
6
#link-C {
	padding-top: 55px;
	margin-top: -55px;
	-webkit-background-clip: content-box;
	background-clip: content-box;
}

2 вариант вставки якоря:

Если элемент содержит заливку или фон, то метод может работать некорректно. Так же может работать некорректно, если код содержит border-top или padding-top.

1
2
3
4
5
6
#link-B:before {
	display: block;
	content: "";
	height: 55px;
	margin: -55px 0 0;
}

3 вариант вставить якорь в html:

1
2
3
4
5
6
7
8
#link-D {
	border-top: 55px solid transparent;
	margin-top: -55px;
	padding: 15px; /* можно использовать пэддинги */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

4 вариант добавить якорь в html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#link-E {
	position: relative; /* псевдоэлемент позиционируется относительно него */
	border-top: 55px solid transparent;
	margin-top: -55px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}
#link-E:before {
	content: "";
	position: absolute;
	top: -2px; 
	left: 0;
	right: 0;
	border-top: 2px solid #ccc;
}

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

Думаю, как и мне, чтобы поставить якорь html, вам должен подойти какой-нибудь вариант обязательно.

Как сделать якорь на wordpress?

Меня иногда спрашивают: как можно создать якорь в wordpress? Вопрос конечно звучит банально, но без ответа оставлять нельзя. Поэтому нужно сказать, что в разных CMS якоря оформляются одинаково и сделать якорь как в вордпресс или в любой другой системе будет так же одинаково, к тому же сделать якорь в лендинге тоже идентичный, потому как написан он на языке html и CSS и если ваш сайт их поддерживает, то можете смело использовать представленные варианты.

Удачного создания якоря html!

Атрибуты тега

NAME — атрибут позволяющий задать имя якоря на веб странице.

HREF — указывает адрес документа, на который необходимо перейти (или необходимо скачать).

TARGET — позволяет указать имя окна или фрейма, куда браузер будет загружать документ, может принимать следующие значения:

  •  _blank — загружает документ в новом окне браузера.
  • _self — загружает документ в текущее окно браузера.

TITLE — атрибут позволяет задать пояснение (подсказку) для ссылки. Данная подсказка будет отображаться если пользователь задерживает курсор над ссылкой.

REL — атрибут позволяющий определить отношение между текущим документом и документом, на который ведет ссылка.

4. Как сделать якорную ссылку.

Создание якорной ссылки довольно просто (даже для тех, кто не разбирается в HTML) и состоит из двух частей. Во-первых, вам нужно создать сам якорь, а во-вторых, ссылку, которая на него указывает.

№1. Определяем адрес статьи в блоге.


Для этой страницы постоянная ссылка выглядит так:https://saitsamy.blogspot.com/2019/08/blogger_32.html

№2. Создаем якорь.

Вы можете создавать якорные ссылки для:

  • Меню
  • Навигации внутри страницы
  • Навигации по блогу и переход между страницами

Пример посмотрим для меню.Допустим есть два раздела и меню будет двухстрочное.Тогда два якоря будут выглядеть следующим образом:<a href=»https://saitsamy.blogspot.com/2019/08/blogger_32.html» name=»anchorname1″></a><a href=»https://saitsamy.blogspot.com/2019/08/blogger_32.html» name=»anchorname2″></a>Красным цветом выделена постоянная ссылка сообщения, которую скопировали с панели в боковом меню.Синим цветом выделено индивидуальное имя якоря.Якоря с одинаковыми именами не приемлемы и как видно в первом случае это: «anchorname1», во втором «anchorname2». Различие в цифре. Якорей делают сколько необходимо. Лимита нет.

№3. Создаем ссылку.

Меню на два раздела. Понадобится две ссылки. Как выглядят и чем отличаются:<a href=»https://saitsamy.blogspot.com/2019/08/blogger_32.html#anchorname1″>№2. Создаем якорь</a><a href=»https://saitsamy.blogspot.com/2019/08/blogger_32.html#anchorname2″>№3. Создаем ссылку</a>Красным цветом выделена постоянная ссылка нашего сообщения.Зеленым цветом выделено названия из нашего ‘Меню’.Синий цвет названий якорей.Цифры идентичны, как номер якоря с номером ссылки в меню anchorname2 соответствует #anchorname2Названия могут быть любыми и не совпадать с названиями разделов. Пример приведен для ясности.Перед словом anchorname стоит значок #.

№4. Расставляем якоря и ссылки по местам.

Меню:.Еще раз. Это делается для ясности. Когда понимаешь смысл, то к готовому Меню подставляешь атрибуты кода во вкладку HTML.

Первый якорь

Ссылки расставляем вплотную к местам назначения, не обращая внимания на посторонний код.

Второй якорь

Теперь определяемся с ссылками и Меню готово.

Ссылки в меню

Меню готово и можно проверить, что вопрос, как сделать ссылку на определенную часть страницы, не такой уж и сложный, что бы его успешно не решить.Важно: имя для якорной ссылки, на каждой странице разное.В этом сообщение имя anchorname, в следующем, например, kotikНо лучше пользоваться ключами. Это одно из тех мест куда можно вставлять ключевые слова

Как сделать якорь с привязкой по времени для видеоролика.

Это не совсем якорь и называется по-другому, но я решила, что для кого-то это будет полезная информация. Тем более, что URL выглядит почти так же так же, как и ссылка с якорем.

Идея состоит в том, чтобы отправить ссылку на видео, которое будет начинаться с нужного вам времени. И после того, как по вашей ссылке перейдут, ролик начнётся не сначала, а с заданного времени

Например, начало там не важно,  или ролик очень длинный, и некоторые зрители просто не досмотрят до самого нужно и закроют видео, так ничего и не поняв

Первый способ получить ссылку с привязкой ко времени

Это можно сделать прямо на ЮТубе. Или на любом сайте, если там стоит ролик с видеохостинга YouTube.

Как только видео дойдёт до нужной минуты (или часа, зависит от длины ролика) — кликайте на ролик правой кнопкой мыши. И вы увидите список, выбирайте: Получить URL видео с привязкой ко времени.

После этого появится ссылка на привязанное ко времени видео. Копируйте URL и отправляйте, туда, куда хотели. Выглядеть ссылка будет примерно вот так https://www.youtube.com/watch?v=EgjfrkEnFxA?t=11m56s

– это время привязки в секундах.  Можете его подкорректировать при желании, не обязательно ждать пока сервис сгенерирует нужное время.

А если ролик идёт несколько часов, такое тоже бывает. А вы хотите, чтобы знакомый перешёл сразу же в видео на нужный момент через 2 часа, 30 минут и 23 секунды. Тогда вам после ссылки нужно разместить вот такой код  — t=02h30m23s

Второй способ как получить ссылку на ролик с привязкой ко времени

Если первый способ можно применять на любом сайте, где есть видео с ЮТуба. То этот способ подходит, только в том случае если вы находитесь на YouTube.

Спускаемся под видео. Жмём на слово – Поделиться. И как только видео дойдёт до нужного времени, сразу же ставим галочку рядом со словом – Начало. В окошечке рядом мы видим как меняется время. А выше всего этого вы можете скопировать ссылку, с привязкой ко времени.

А здесь ссылочка уже выглядит по-другому, вот так 

В этому случае сервис показывает время в секундах.

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

Задача бизнеса

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

Попытки, которые надо было сделать, что бы прийти к оптимальному варианту:

  1. Самый банальный способ — создаем ссылку из gif файла. У формата есть поддержка анимации, альфа канала и прочее… чего ещё надо?!

  2. Все прогрессивные люди советуют анимацию хранить в видео форматах, чем мы хуже !? К сожалению, mp4 как общепринятый стандарт мне не подходил по условию задачи. Поскольку якорь, должен скролится, то было бы неплохо, если б фон не зависел от текущего положения анимации в документе. С mp4 такого нельзя, фон запекается вместе с изображением, если он не назначен дизайнером, будет белым. В моём случаи страница сайта сделана секционной, и это будет бросается в глаза при прокрутке. Хотя если вы планируете тоже в своих проектах использовать зацикленные анимации, то я бы вам рекомендовал подключать их именно через тег video. Особенно если у вас однотонный фон.

Первое что необходимо иметь это — секвенция кадров (от англ. «sequence» (последовательность, ряд)), или по-простому – раскадровку. Находим в загашниках аниматоров, или если повезло, просим сделать последовательную раскадровку понравившейся анимации.

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

После этого, нам необходимо собрать всё это дело в спрайт(Один большой совмещенный файл).

Тут кому как удобнее – можете воспользоваться, скажем, плагином для gulp сборщика


Тут всё предельно просто. В поле padding-ов ставим 0, в поле “Choose files” перетаскиваем наши кадры.

! Важно чтобы элементы были правильно пронумерованы или названы в правильной последовательности;! Все файлы должны быть одинаковых масштабных размеров. Получаем готовый результат, который скачиваем

Получаем готовый результат, который скачиваем.

Ну что ж не беда, значит, сожмем кадры первоисточника по очереди, а потом сделаем спрайт.

Меня терзало сомнение, а не испортиться ли качество анимации после сжатия, но обошлось. Наверное, это было связано с тем, что при частоте 25-40мс на кадр глаз не успевает заметить серьезные дефекты.

После компрессии файл стал весить на 1.2мБ меньше, что уже хорошо.

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

Надо сделать описание, что б всем было понятно, в чём тут магия.

1) Параметрами width и height задаем область видимости одного кадра (напомню, что все кадры у нас имели одинаковые width и height).

2) Задаем в фоновое изображение — адрес расположения спрайта позиционированного слева по оси Х и отцентрированного относительно Y.

3) Пишем вызов анимации. Анимация у нас линейная, бесконечно повторяемая. Длительность анимации равна коррекционное время * количество кадров. Значение steps равно количеству кадров. Коррекционное время подбирается по собственным ощущениям и количеству кадров в наличии, в моем случаи, это в пределах 30мс – 45мс на кадр.

4) Для ключевого описания анимации достаточно прописать только конечное положение анимации. Считается оно из следующей формулы = (-1px)*количество кадров*width каждого кадра. *Если вы допустите неточность в данном подсчете, то вы очень быстро увидите свою ошибку. Тут всё должно быть до пикселя.

Собственно анимация готова. Можно продолжать радоваться жизни.

Половина дела сделана, можно идти пить чай. Если у вас простенькая анимация, и размер файла не превышаем 100кБ, не стоит заморачиваться.

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

Если же вам выпал хардкорный вариант, где разговор уже про мегабайты тут следует подумать.

*СпойлерКогда выкатил в продакшен вариант, описанный выше, показатель Performance от Google Lighthouse рухнул от 80 до 20 за пару часов. Так что пока у нас нет общедоступных 5G сетей, а Илон Маск продолжает запускать спутники Neuralink прийдеться что-то выдумывать что бы достигать приемлемых результатов.

5. Внимание.

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

№1. Неработающие якорные ссылки.

Это может показаться очевидным, но вам нужно проявлять особую осторожность при создании и размещении ссылок на вашем сайте. Неработающие ссылки — это две вещи: разочарование и вред. Первое довольно очевидно

Если ссылка не работает, то пользователь никуда не уйдет, кроме вашей страницы 404 (ваша страница 404 также важна, но вы не хотите, чтобы на нее стекались люди).Неработающие ссылки также наносят ущерб поисковой оптимизации (SEO), поскольку они посылают негативные сигналы таким поисковым системам, как Google, а это означает, что существует потенциал для снижения рейтинга поиска страниц, на которых они сидят. Тщательно создайте свою якорную ссылку или не делайте этого вообще.

№2. Не переусердствуйте.

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

Конечно, если есть слишком много ссылок на выбор, пользователи могут перейти в неправильное место или просто плюнуть и покинуть ваш сайт в гневе и печали.Также важно учитывать опыт пользователей мобильных устройств. Если одна из ваших веб-страниц заполнена ссылками — будь то виджет меню, маркированный список или вплетенный в основной текст — вы также рискуете получить

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

Особенности использования якорей HTML

  1. 1.При клике на якорной ссылке у вас в адресной строке браузера автоматически к адресу страницы припишется знак # и название якоря.

    Поэтому если вы решите воспользоваться кнопкой «Назад» для возврата на предыдущую страницу, то вас перекинет сначала на эту же страницу, и только после повторного нажатия «Назад» вы вернётесь на предыдущую страницу.

    Так же этот нюанс нужно учитывать при работе скриптами, которые используют атрибут href.

  2. 2.Якорь в HTML может быть видимым и невидимым. Если вы размещаете внутри HTML тега с якорем какой то текст, то он будет видимым. Если в теге с якорем ничего нет, то он будет невидимым.

Пожалуй, это все основные моменты, касающиеся использования якорей в HTML страницах. Если у вас есть ещё какая то ценная информация по данной теме – не стесняйтесь, пишите свои комментарии!

Успехов вам!

С уважением Юлия Гусарь

Навигация по статье

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

Как установить якорь в статье с помощью плагина TinyMCE Advanced

Плагин TinyMCE Advanced

Установите и активируйте модуль, через загрузчик в админпанели, а затем перейдите: Настройки — TinyMCE Advanced. Здесь, нам нужно всего лишь добавить кнопку Якорь в наш редактор, делается это путём перетаскивания, с помощью мышки, нажал и переместил на панель инструментов. Раз и два, готово. Кнопка Якорь пришвартовалась:

Кнопка Якорь

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

Вот, вроде я уже давно написал о данном плагине и забыл установить его (зная, что откладывая на потом, это потом может не наступить ни когда или наступит, но через пару лет), а сегодня исправил свою оплошность. А теперь, пора вернутся к нашим «баранам».

После всех настроек, не забудьте сохранить сделанные изменения. Далее, дело остаётся за малым — приступить к написанию шедевра (статьи) или можно заняться редактированием ваших старых записей и делать удобную навигацию. Для того, чтобы установить якорь в статье, выберите нужный заголовок и перед ним установите курсор и нажмите кнопку Якорь на панели инструментов визуального редактора:

Установить курсор и нажать кнопку Якорь

Откроется окошко, где нам нужно присвоить якорю уникальный id (идентификатор), можно использовать цифры или буквы, а можно то и другое вместе:

Идентификатор для якоря

Нажимаем, ок и у нас перед заголовком появится иконка с настоящим якорем:

Иконка якоря перед заголовком


А если мы перейдем во вкладку Текст, то мы увидим наш заголовок с присвоенным идентификатором b1:

Якорь закинут

Хорошо, якорь мы забросили, следующий шаг, это создать ссылку на него.

Навигация в статье. Как сделать ссылку на якорь

Сделать это можно следующим способом, составьте меню к статье, то есть, содержание (обычно в самом начале сообщения), текст может быть любой. Например:

Выделите нужный текст мышкой и нажмите на кнопку Вставить/изменить ссылку (как обычно делаете при вставке ссылки) и в поле URL вставляете знак решётки # и наш id якоря  — b1. Получится ссылка на установленный якорь:

Делаем ссылку на якорь

Нажимаете добавить ссылку и всё. Готово. Принцип работы думаю теперь вам понятен. Устанавливаете якорь к нужному заголовку и делаете в содержание (меню, план) ссылку на него. После публикации статьи ваш посетитель нажмет на нужную ссылку и перейдёт к интересующему его материалу, то есть, к заголовку. Вот, как то так.

В заключение

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

Процесс оптимизации слона

Первое что пришлось сделать, это поумерить свою хотелку и пересобрать анимацию с 91кадра до 73кадров. Спрайт остался всё ещё тяжелым (5,17Мб), но с ним, оказывается, может теперь работать Squoosh (Там стоит какое-то ограничение по ширине загружаемого файла <16300px)

*Тут внимательный читатель мог бы предложить определять window.navigator.userAgent, а потом отдавать png спрайт как альтернативу обладателям уникальных браузеров, что бы все видели анимацию, но идея не получила одобрения в силу здравого смысла.

Поскольку в моем случае так называемая якорная ссылка состоит из элемента анимации и кнопки, а как не крути это серьезные размеры для веба, следует ещё предусмотреть момент её отображение.

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

Чтобы избежать данного эффекта, ставим блоку обертке на начальном этапе значение display:none; и только когда изображение загрузилось, показываем его пользователю. Код выглядит приблизительно так.

HTML

CSS

JS

Если вам хочется что б ваша анимация загружалась пораньше (не знаю, зачем это может понадобиться), можно добавить в тег ‹head›

И вместо генерации и отслеживания копии изображения средствами JS, можно разместить копию данного изображения со значениями стилей:

В процессе рендеринга страницы, браузер сначала “увидит” обращение к картинке и пойдет за ней по src, а уже потом из кеша будет подставлять это же изображение в свойство background-image для второго элемента. (Приоритет выдачи картинок для тега img обычно выше, чем для background-image) * Автор понимает, что это очень экзотический метод обмана браузера, и не рекомендует его к использованию.

Прокрутка до якоря с отступом сверху

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

Весь скрипт в этом случае будет выглядеть так:

XHTML

<script> jQuery(document).ready(function() { jQuery(«.scrollto a»).click(function () { elementClick = jQuery(this).attr(«href») destination = jQuery(elementClick).offset().top — 100; jQuery(«html:not(:animated),body:not(:animated)»).animate({scrollTop: destination}, 1100); return false; }); }); </script>

1 2 3 4 5 6 7 8 9 10

<script>

jQuery(document).ready(function(){

jQuery(«.scrollto a»).click(function(){

elementClick=jQuery(this).attr(«href»)

destination=jQuery(elementClick).offset().top-100;

jQuery(«html:not(:animated),body:not(:animated)»).animate({scrollTopdestination},1100);

returnfalse;

});

});

</script>

Абсолютная и относительная адресация в HTML

В языке HTML есть два способа адресации (написания пути к файлу), данные типы адресаций применимы не только к ссылкам но и к другим тегам использующие пути (например: вставка изображений, подключение скриптов JS, подключение стилей CSS и тп.). Каждый из данный способов адресации по своему уникален и их использование во многом отличается.

Абсолютная адресация

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

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

Относительная адресация

При создании сайта всегда предпочтительно использовать относительную адресацию на веб страницах. При данном методе адресации у вас должна буть четко выстроенная физическая структура сайта, весь материал необходимый для работоспособности вашего ресурса должен находиться в одной папке. Для определения правильной физической структуры вашего сайта вы должны четко осознавать в какой папке какие данные хранятся и давать всем каталогам и файлам осмысленные имена (например: страница «Об авторе» можно назвать author.html, страница с контактами contact.html и тп.).

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


С этим читают