Приветствую тебя дорогой подписчик! Сегодняшний выпуск будет на тему — как сделать ссылку в html документе. Это азы веб дизайна и потому знать их просто необходимо, если вы хотите создать свой сайт в интернете.
Также эти знания пригодятся вам при устройстве на работу в качестве помощника веб дизайнера или верстальщика. Так что идем на кухню, завариваем кофе и приступаем к детальному изучению урока.
Прежде всего необходим каркас нашей страницы. Копируем этот код и вставляем в простой редактор блокнот.
|
1
|
Документ без названия
|
Далее нам нужно вставить вот такой участок кода между тегами body
|
1
|
<a href="https://smarticle.ru">База знаний интернет предпринимателя</a>
|
Тег парный, поэтому его всегда нужно закрывать, чтобы избежать ошибок браузера.
Текст между тегом будет считаться анкором ссылки. При продвижении блога статьями этот момент стоит учитывать.
Ничего сложного здесь нет. Картинку будем вставлять при помощи тега img
|
1
|
<img src="адрес нашего изображения" alt="альтернативный текст" width="размер в ширину" height="размер в высоту" />
|
Обязательно указывайте размеры картинок, чтобы браузер правильно их отобразил. Атрибут alt нужен для того, чтобы поисковики находили наши картинки по тем ключевым словам, которые мы указали или если пользователь зашел на сайт с отключенными картинками в настройках браузера. Не игнорируйте этот момент.
Советую прочитать заметку — как оптимизировать изображения на сайте
В нашем случае src является источником откуда будет браться наша картинка и переводится как source (источник). Это так, для грамотности, чтобы могли блеснуть эрудицией в компании программистов.
Аналогично как и в прошлом варианте нам нужно нашу картинку заключить в парный тег
|
1
|
|
Общий код для вставки вот такой
|
1
|
<a href="https://smarticle.ru" target="_blank" rel="noopener noreferrer"><img src="https://smarticle.ru/wp-content/uploads/2013/06/car.jpg" alt="машина" width="320" height="240" /></a>
|
Вот что получится в итоге
Делать кнопку мы будем при помощи атрибута input. Если вставить вот этот код, то мы получим просто кнопку, при нажатии на которую мы не получим никаких действий. Кнопка просто как кнопка.
|
1
|
<input class="button" type="button" value="Пример кнопки" />
|
Выглядеть будет следующим образом
Теперь нам нужно сделать так, чтобы при нажатии на кнопку, совершалось определенное действие, например пользователь смог перейти на сайт или на конкретную страничку. Для это нам потребуется следующий код.
|
1
|
<input class="button" type="button" value="Перейти на сайт" />
|
Вот, что получится.
Я подготовил для Вас обращение, с ним можете ознакомиться тут
Макс Метелев - автор, блоггер, актер местного театра, ведущий городских мероприятий. Делюсь только лучшим!
Всплывающая форма обратного звонка на сайте WordPress
Как проверить сайт на дубли страниц?
Как добавить Disqus комментарии на сайте WordPress?
11 важных правил первичной оптимизации сайтов
Nrelate — плагин внутренней перелинковки страниц сайта
Как сделать импорт CSV записей в WordPress?
24 плагина обязательных для установки на коммерческие сайты на 2016 год
Создаем красивую форму обратной связи самостоятельно
57 отличных примеров сайтов на WordPress
Как настроить рубрики wordpress с помощью Rich text tags?
Бизнес идея — сухая автомойка
18 способов где брать уникальный контент для сайта
101 полезный совет для начинающего блоггера
Как установить метрику на сайт MODx
Как правильно подключить шрифты в CSS на сайте?
Как ограничить доступ к админке wordpress?
Устанавливаем виджет яндекс пробки без информеров
Как добавить кнопку подписки на канал Youtube?
Как установить фон для сайта?
Как привлечь рекламодателей на сайт
Обучающий тренинг-центр База знаний для интернет предпринимателя. Здесь вы сможете получить полную, проверенную, а самое главное доступную информацию о Wordpress, SEO, научитесь востребованной профессии на рынке IT услуг. Все уроки бесплатные, мы не взымаем плату. Информация постоянно обновляется и пополняется свежими выпусками.
