Попросили написать об этом. Тот, кто это знает, может не читать и смотреть другие публикации. Когда-то я тоже это не знал и искал – где бы почитать? 

Не люблю читать толстые книги. Потому что люблю знать только то, что мне необходимо. А в толстых книгах много “мусора”, который неизвестно, понадобится когда-нибудь или нет.

Поэтому, не советую учить, точнее, заучивать книги по программированию на PHP и HTML – коду. Когда что-т надо – просто ищите инфу и читайте. Хорошо, когда с примерами (картинками, текстом), тогда можно повторить шаг за шагом и знания придут. Так люблю делать я, так пишу для вас.

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

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

Эта картинка подошла бы для ссылки Предпросмотра. Ладно, о картинках хватит. Давайте о главном. Как выглядит ссылка? Например, ссылка для скачивания файла. Её конструкция такая:

< a href="https://www.my_site.com/files/file.zip" >Скачать файл < /a >

Слова — Скачать файл — и есть тот текст, который станет в этом html-коде ссылкой для скачивания нашего файла — file.zip.
Тег < a > — самый важный элемент HTML и предназначен для создания ссылок (любых). Если мы используем картинку, значит, нам надо использовать тег < img > вместе с тегом < a >. Таким образом, основным тегом является тег < a > (создающий ссылку), а вторым, вложенным в него, является тег < img >, создающий ссылку с помощью картинки. В теге < img > обязательно присутствует параметр crs, который показывает место, где лежит наш графический файл. Тег < a > обязательно имеет закрывающийся тег с обратным слешем < / a >. Тег < img > закрывающегося тега не имеет.

Как все это будет выглядеть? Смотрим, сложного ничего нет:

< a href="https://www.my_site.com/files/file.zip"><img src="https://www.my_ste.com/img/img.jpg" /></a>

Видите, что тег < img > вложен в тег < а >? Если не поняли, читайте и смотрите сначала 
Или просто скопируйте и замените на свои ссылки. С учетом — где лежит ваш архивный файл и где лежит ваша картинка для отображения ссылки.
Важно: между символом < и буквами не должно быть пробела, когда пишите код. Просто в тексте вынужден делать пробел.