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

Абсолютные и относительные ссылки

Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: «планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41». А может просто сказать «да вот его квартира, слева от меня». В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором — относительную.

Абсолютные ссылки используются для перехода на другой сайт. Они соответствуют требованиям обозначения URL-адреса , т.е. содержат протокол передачи данных (например http:// ), доменное имя сайта и путь к конкретной странице сайта. Если путь не указан, то по умолчанию откроется главная страница. В примере выше указана абсолютная ссылка, ведущая на главную страницу сайта.

Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки ��

Ссылка на документ в той же папке

Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html

Поскольку они соседи, то ссылка со страницы index.html может быть очень короткой и содержать просто название страницы : about.html

Как подключить гугл шрифты Google Fonts

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

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

Как подключить гугл шрифты

Конечно, в первую очередь нас интересуют русские шрифты, поэтому заходим на сайт и выбираем во вкладке «Language» Cyrillic или Cyrillic Extended.

Таким образом, мы отфильтровали все шрифты и оставили только русскоязычные. На момент написания статьи кириллических 113, а расширенных кириллических 78.

Далее, во вкладке «Сategories» можно поставить фильтр на отображение шрифтов, которые не имеют засечек, выбрать рукописный и так далее.

Выпадающий список в «Font properties» позволяет задать дополнительные настройки и отфильтровать шрифты по ширине, толщине и другим параметрам, а галочка напротив «Show only variable fonts» позволяет отсеять не вариативные шрифты, в которых не предусмотрены сразу несколько видов толщины, наклона или курсива.

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

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

Если список вас устраивает, то переходите во вкладку Embed. Тут вас ждет дальнейшая инструкция по подключению.

Если вы планируете подключать шрифты в шапке сайта, то разместите между тегами «head» полученную строку. В моем случае это:

Для использования Google Fonts в CSS, у нужного класса или тега нужно указать:

font-family: 'Roboto', sans-serif;

Кроме того, шрифт можно импортировать через CSS. Перейдите во вкладку «@import» и скопируйте предложенную строку в свою таблицу стилей.

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

Вот и все, теперь вы знаете, как подключить шрифты Google к своему сайту. Если есть вопросы, задавайте их в комментариях.

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

08/10/2022 Дмитрий Давыдов

8 комментариев

Полезная информация. пару месяцев искала ее назад. Много времени потратила.

Здравствуйте, спасибо за ваш комментарий, впереди еще много интересного, подписывайтесь на rss или twitter чтобы не пропустить новые статьи

А в какой последовательности необходимо подключать шрифт с помощью такой ссылки? Я имею в виду в head содержится много ссылок и как выбрать правильно расположение для данной? Я слышал, что порядок подключения играет роль. Например, все css подключают в начале, а js-файлы в конце.

Сss подключают первыми, так как они отвечают за отображение страницы. Js подключают позже, так как он используется, чаще всего, после того, как отобразилась страничка. Иногда, есть возможность подключить js в конце страницы, как и css, иногда это играет ключевую роль и нельзя. Все зависит от конкретного случая. Шрифт гугл, ну подключите после основного файла стилей. В данном случае это не критично и вы не заметите разницы, где бы не расположили. Но все css подключать до использования js. Все это связано с тем, что команды выполняются синхронно, друг за другом. И если скрипты «Тяжелые» то их загрузка может занять слишком много времени. Поэтому, сначала подключают то, что отвечает за основное оформление, а потом второстепенные функции. Как-то так, надеюсь, что общая картина понятна. Конечно, есть возможность грузить скрипты асинхронно и это ускорит их загрузку, но это уже другая история.

Сергей, если вы используете шрифт в своем файле стилей, то подключать шрифт надо ДО подключения своего файла стилей.

remenergo.pro

Спасибо, полезная информация, как раз искал — что лучше @import или link для шрифтов. Раньше все время подключал через импорт якобы, чтобы код чище был, а оказывается это влияет на скорость, будем исправлять.

Зачёркивание и подчёркивание символьными средствами ( ̶т̶а̶к̶ ̶, т̱а̱к̱ или т̲а̲к̲)

Если социальная сеть, платформа для блогов или форум предоставляют возможность размечать текст при помощи HTML или BBCode, перечёркивать или подчёркивать текст не составляет труда: можно пользоваться тегами s и u обеих разметок или назначать стили в HTML. Но что делать, если у нас есть только голый текст? Или, например, нам нужно зачеркнуть/подчеркнуть слово в заголовке страницы, отображаемом в заголовке вкладки или всего браузера, или оформить слово в заголовке форумного поста — короче говоря, всюду, где не работает разметка?

Можно рискнуть и воспользоваться средствами Юникода.

II. Нужные символы

Богатство Юникода содержит разнообразные способы создания композитных знаков, но мы упомянем три символа, удовлетворяющие нашу потребность в большинстве случаев.

1. Зачёркивание. Символ Юникода под номером U+0336 (в десятеричной нотации 822). В статье по ссылке можно увидеть и другие, более экзотические виды зачёркивания с соответствующими символами, но нам пока хватит и такого, тем более что он наиболее симулирует эффект привычных тегов. Если вставить по такому символу после каждого знака в тексте, ̶в̶ы̶г̶л̶я̶д̶е̶т̶ь̶ ̶э̶т̶о̶ ̶б̶у̶д̶е̶т̶ ̶в̶о̶т̶ ̶т̶а̶к̶ ̶ (для пущей убедительности лучше прихватывать дополнительные обрамляющие пробелы).

2. Пунктирное подчёркивание. Символ Юникода под номером U+0331 (в десятеричной нотации 817). Подчёркнутый им текст в̱ы̱г̱л̱я̱д̱и̱т̱ ̱в̱о̱т̱ ̱т̱а̱к̱.

3. Почти сплошное подчёркивание. Символ Юникода под номером U+0332 (в десятеричной нотации 818). Подчёркнутый им текст в̲ы̲г̲л̲я̲д̲и̲т̲ ̲в̲о̲т̲ ̲т̲а̲к̲.

III. Как вводить вручную

Некоторые способы перечислены в этой статье. Обратите внимание на упомянутый там ключ реестра. Судя по моему опыту, в разных приложениях работают разные способы: в одних работал шестнадцатеричный метод, в других десятеричный. Потестируйте сами после редактирования реестра и перезагрузки. Вот нужные нам три кода (в случае шестнадцатеричных кодов первый плюс означает одновременное нажатие, второй — собственно плюс на цифровой клавиатуре; начальный ноль, судя по тестам, можно набирать или пропускать по вкусу):

1. Зачёркивание: Alt + +(0)336 или Alt + (0)822
2. Пунктирное подчёркивание: Alt + +(0)331 или Alt + (0)817
3. Почти сплошное подчёркивание: Alt + +(0)332 или Alt + (0)818

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

IV. Сетевые сервисы автоматизации

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

V. Букмарклеты

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

1. Оформление всего текста в любом активном текстовом поле

Достаточно совсем простого кода (он работает даже в IE8):

(function(e)< e = document.activeElement; e.value = e.value.replace(/(.)/g, '$1\u0336'); >)() 

Можете сохранить букмарклеты cо следующим кодом у себя в закладках или избранном (в Firefox работает простое перетаскивание кода букмарклета в закладки, потом только отображаемое название хорошо бы подправить; в других браузерах, возможно, придётся вставлять код в свойства любой готовой или заново создаваемой закладки):

javascript:(function(e))() 

Подчеркнуть всё пунктиром:

javascript:(function(e))() 

Подчеркнуть всё почти сплошной линией:

javascript:(function(e))() 

2. Оформление выделенного текста в любом активном текстовом поле

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

(function(e,t,s1,st,s2,sy,sx)< e = document.activeElement; t = e.value; s1 = e.selectionStart; s2 = e.selectionEnd; st = t.substring(s1, s2).replace(/(.)/g, '$1\u0336'); sy = e.scrollTop; sx = e.scrollLeft; e.value = t.substring(0, s1) + st + t.substring(s2, t.length); e.selectionStart = e.selectionEnd = s1 + st.length; e.scrollTop = sy; e.scrollLeft = sx; e.focus(); >)() 

Можете сохранить букмарклеты cо следующим кодом у себя в закладках:

javascript:(function(e,t,s1,st,s2,sy,sx))() 

Подчеркнуть выделенное пунктиром:

javascript:(function(e,t,s1,st,s2,sy,sx))() 

Подчеркнуть выделенное почти сплошной линией:

javascript:(function(e,t,s1,st,s2,sy,sx))() 

VI. Подводные камни

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

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

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

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

В общем, будьте осторожны, тестируйте и проверяйте.

Буду благодарен за дополнения и исправления.

P.S. Так это выглядит у меня в Firefox. А так в IE8.