Как сделать ссылку на логотип
Перейти к содержимому

Как сделать ссылку на логотип

  • автор:

Логотип сайта — ссылка на главную

в том числе с точки зрения индексации сайта? Где-то встречал что не рекомендуют основные изображения делать бэкграундом и заключать их внутрь ссылок.

Также встретил верстку

1 2 3 4
div class="bLogo"> img src="//sinst.fwdcdn.com/img/newImg/sinoptic-logo-ny-2016.png" alt="погода" /> a class="sLogo" href="//sinoptik.ua/">Прогноз погоды/a> /div>

Как на HTML сделать правильно?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Сделать Логотип как ссылка
Добрый времени суток! Редко прошу помощи на форуме, но тут такая ситуация что нужна помощь:cry.

Ссылка «На главную» в меню сайта
Есть сайт, есть ссылка "на главную" в меню сайта. По главному запросу в яндексе — главная на.

Как логотип сделать ссылкой на главную страницу?
Как логотип сделать ссылкой на главную страницу? Логотип выводится бэкграундом.

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

71 / 69 / 22
Регистрация: 24.11.2012
Сообщений: 502
Записей в блоге: 1
Вот так будет правильно:

1 2 3 4
a href="/"> img src="logo.png" alt="Logo" /> h1>Title/h1> /a>

А еще желательно чтобы вся шапка сайта была заключена в теги , чтобы прослеживалась четкая структура сайта.

Регистрация: 26.12.2015
Сообщений: 93

1 2 3
a href="/"> img src="путь к изображению"> /a>

вот так правильно. Индексация поисковиками здесь абсолютно ни причем.

Добавлено через 11 минут
h1 включать в логотип не надо, если seo интересует.

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

логотип-ссылка
Подскажите пожалуйста, как сделать, чтобы при нажатии на логотип сайта (картинка), открывалась его.

логотип как ссылка
Подскажите пожалуйста как логотип сделать ссылкой на главную страницу! Я добавила в код php строку.

Как при загрузке сайта вставить логотип сайта
Добрый день, форумчане-разработчики сайтов. Подскажите, пожалуйста, как на своем сайте сделать.

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

Логотип и ссылки в строку

Хочу чтобы логотип и ссылки были в одну строку. Я хочу это сделать с помощью флексов или гридов. как это сделать на моем примере?

html,body < min-height: 5026px; padding: 0; margin: 0; >*, *::before, *::after < box-sizing: border-box; >.container < width: 1060px; margin: 0 auto; >header < >nav li < >nav ul < margin: 0; list-style: none; padding: 0; display: flex; justify-content: flex-end; >.main-navigation a < font-family: 'Playfair Display', serif; text-transform: uppercase; color: #626262; text-decoration: none; font-size: 14px; padding-right: 20px; >#logo

minimø

введите сюда описание изображения

как должно выглядеть флоаты и инлайн блоки больше не юзаю

Отслеживать

задан 14 апр 2019 в 16:30

183 1 1 серебряный знак 12 12 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

li < list-style: none; >header < position: absolute; height: 15vh; z-index: 10; display: flex; justify-content: space-between; align-items: center; width: 80vw; left: 10%; background-color: #00a550; >nav.hMenu < display: flex; justify-content: center; >nav.hMenu a < padding: 7px 1vw; font-size: 16px; color: #fff; >nav.hMenu a:hover < box-shadow: 0 0 0 1px #fff; border-radius: 15px; >span.logo

Отслеживать

ответ дан 14 апр 2019 в 18:31

53 6 6 бронзовых знаков

Прокачав свои скилы решил ответить на свой вопрос сам.

.container < display: flex; justify-content: space-evenly; align-items: center; >.logo < display: flex; align-items: center; >.menu < display: flex; padding: 0; >li
Document
Logo
  • home
  • about
  • contact
  • Call

Логотип сайта и ссылка на главную — вечная дилемма

Недавний топик «Думай о ссылках» и один комментарий к нему вдохновили меня на первый мой мини-пост.

Логотип — линк на главную. Всегда ли?

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

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

По своей практике скажу, что мне доводилось убирать работающий линк с главной по желанию «начитанного» заказчика.

Как установить кликабельный логотип в шапку

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

Сайты в интернете не исключение и практически всегда имеют свой собственный логотип, который принято размещать в headere (шапке) страницы. Логотип практически всегда делают кликабельным, и как правило ссылка с лого ведет на главную страницу проекта. Вот именно размещением логотипа ссылкой в шапке, мы и будем сегодня заниматься.

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

У заготовки нет фона и она имеет размеры 350 пикс. на 100 пикс. В вашем случае размеры будут вероятнее всего другие.

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

  1. Загрузите изображение через «Загрузку файлов» и скопируйте ссылку
  2. Начните создание страницы (никакие поля заполнять не нужно)
  3. Вставьте изображение на страницу с помощью «Добавить/Изменить изображение, не забыв прописать описание.
  4. С помощью кнопки «Добавить/Изменить ссылку» привяжите к картинке ссылку.
  5. Отключите визуальный редактор и скопируйте готовый html код.
  6. Просто уйдите со страницы не закрепляя результат.

Полученный код выглядит вот так:

Можете просто скопировать его и заменить ссылки и значения на свои.

Далее перейдите на вкладку размещения рекламы и вставьте код логотипа во второе поле, (Нижеследующий код будет отображаться под меню сайта), нажмите кнопку «Обновить» что бы закрепить результат. Перейдите на сайт и посмотрите результат. Изображение логотипа будет кликабельно и расположено под меню. Остается изменить положение логотипа что бы установить его ссылкой в шапке.

Для этого вставленный ранее код нужно заключить в DIV контейнер и присвоить ему идентификатор. 🙂 Пожалуй проще будет показать чем объяснить. Результат:

Итак div имеется и нужно с помощью css указать ему положение на странице. Для этого в редактор css добавляем следующий код:

Свойство position указывает на то как элемент будет расположен на странице. В нашем случае элемент будет абсолютно позиционирован, и остальные элементы не будут взаимодействовать с ним.

Закрепите изменения кнопкой «Обновить» css редактора и перейдите на сайт посмотреть результат. Если вы все сделали правильно, логотип сместится вверх и немного вправо.

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

Спасибо за внимание, если все таки что то не понятно спрашивайте в комментариях. Обязательно постараюсь ответить.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *