Часто веб-мастера сталкиваются с необходимостью в качестве ссылки использовать картинку. В данной статье рассмотрим, как сделать картинку ссылкой в HTML и как сделать картинку ссылкой в Joomla.
Несмотря на то, что CMS Joomla упрощает работу и не требует особых знаний HTML и CSS, думаю, что осваивая приемы работы веб-мастера, нужно обязательно изучать HTML и CSS. Поэтому в первой части статьи я покажу, как сделать картинку ссылкой в HTML, если вам это не интересно, можете сразу перейти ко второй части статьи, и почитать, как сделать картинку ссылкой в Joomla.
Как сделать картинку ссылкой в HTML
В данном примере рассмотрим, как можно сделать картинку ссылкой, редактируя html-код материала. Загрузите нужную картинку в папку для изображений на сервер и откройте статью для редактирования в HTML. В Joomla нужно кликнуть мышкой по кнопке «Редактировать HTML-код».
И так, начнем учиться делать картинку ссылкой в HTML.
1. Для создания ссылки в HTML используется тег . Атрибут данного тега — задает путь к документу, на который нужно перейти.
Как вставить картинку в html | HTML уроки
2. Для вывода изображения в HTML используется тег . Атрибут данного тега — задает путь к картинке.
3. Для того, чтобы картинка стала ссылкой, объединяем теги:
Для примера, кликнув по картинке ниже, вы попадете на страницу сайта со статьей «Как вставить картинку в статью Joomla»
Путь к картинке может быть относительным адресом или URL-адресом.
Если картинка находится в папке на вашем сайте, нужно указывать относительный адрес, например:
URL-адрес нужно указывать в том случае, если вы использует картинку с другого сайта.
Дополнительно можно использовать:
target=»_blank» — ссылка должна открываться в новом окне;
align=»left» — выравниваем картинку по левому краю;
alt=»Описание картинки» — альтернативный текст для картинки (выводится вместо картинки, если в браузере отключена загрузка изображений);
title=»Текст при наведении» — текст, который будет выводится при наведении курсора на картинку;
width=»200″ — ширина картинки;
height=»100″ — высота картинки;
border=»0″ — рамка вокруг картинки (по умолчанию вокруг картинки появляется рамка в 1 px, для того, чтобы убрать рамку, нужно поставить значение «0»).
Как сделать картинку ссылкой в Joomla
В данном примере рассмотрим, как можно сделать картинку ссылкой с помощью кнопки «Вставить/Редактировать ссылку» в редакторе Joomla. Допустим вам нужно, чтобы изображение в статье являлось ссылкой и вело на определенную страницу сайта. Для этого вам нужно выполнить следующие действия:
Картинки в html. Как вставить ссылку в картинку?
1. Загрузите нужную картинку в папку на сервер, где у вас хранятся изображения.
2. Откройте статью для редактирования, установите курсор в нужное место и кликните мышью по кнопке «Изображение» внизу редактора. Найдите и загрузите нужную картинку.
3. Кликните по картинке мышью (вокруг картинки образуется рамка). Затем кликните по кнопке «Вставить/Редактировать ссылку» в верхнем меню редактора (смотрите рис. сверху). Заполните поля: адрес ссылки — скопируйте адрес страницы, на которую будет вести ссылка;
цель — открыть в новом окне (_blank);
название — укажите название (будет видно, при наведении курсором на картинку)
4. Если все сделано правильно, кликнув по изображению, вы попадете на указанную в ссылке страницу. Для примера, кликнув по картинке ниже, вы попадете на страницу сайта со статьей «Как вставить картинку в статью Joomla»
Таким образом, вы можете сделать картинку ссылкой или с помощью кнопки в редакторе или редактируя html-код материала. Далее читайте о выводе картинки в модальном (всплывающем) окне в lightbox .
Источник: webadvisor.ru
Вставить картинку
Атрибут alt является обязательным атрибутом для тега . Об этом упоминается в официальной документации HTML: w3.org/TR/html5/embedded-content-0.html#alt (на англ).
Атрибут alt нужен для того, чтобы в случае отсутствия картинки, вместо самой картинки выводить указанный текст.
Также данный атрибут играет важную роль в SEO, т.к. многие пользователи ищут товары через поиск по картинкам. От значения атрибутов alt будет зависеть, по каким словам данная картинка будет выводится в поисковых системах.
Значение атрибута alt может быть пустым.
Картинка с описанием
Картинку с описанием можно вставить через тег , который появился в HTML 5.
src=»image.jpg» alt=»»> Описание картинки
Пример оформления CSS:
figure < text-align: center; border: solid 1px #ccc; border-radius: 2px; background: rgba(0,0,0,0.05); padding: 10px; margin: 10px 20px; display: inline-block; > figure > figcaption < text-align: center; display: block; >
В теге можно вставлять несколько картинок:
src=»/kookaburra.jpg» alt=»Kooaburra»> src=»/pelican.jpg» alt=»Pelican stood on the beach»> src=»/lorikeet.jpg» alt=»Cheeky looking Rainbow Lorikeet»> Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by href=»http://www.flickr.com/photos/rclark/»>Richard Clark
Обновлено: 01 ноября 2020 | История изменений
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
Источник: know-online.com
Вставляем на сайт картинку
Допустим вы решили вставить на сайт вот такую картинку :
Сначала вам нужно сохранить эту картинку у себя на компьютере. Для этого наведите курсор мышки на картинку и нажмите правую кнопку мышки. Выберите «Сохранить рисунок как. » Укажите место для сохранения картинки (Как я рекомендовал ранее — сделайте отдельную папку site на диске С например и туда сохраняйте все файлы уроков.)
Сохраните картинку там-же, где находится страничка, которую мы делаем — page.html Имя файла картинки оставьте тоже самое money-master.jpg
Опять же будеть внимательны! Имя файла не money-master.ipg, не money-master.jpq, а money-master.jpg
Для вставки на страницу картинки — используется тег . img это он аглийского слова image. изображение, картинка.В качестве параметра для этого тега, используется название картинки.Должен же компьютер знать какую картинку мы хотим вставить
В нашем случае для вставки картинки money-master.jpg вставляем в код страницы, в то место куда мы хотим вставить картинку, следующий код :
или более грамотно писать вот так , хотя код выше тоже будет работать.
через параметр src указывается имя файла-картинки.
src от английскогого слова source — ресурс, источник
img src= можно расшировать как изображение источник/название файла =
Таким образом код нашей страницы теберь будет выглядеть вот так
Моя первая интернет страница всего лишь за 5 минут
Сегодня замечательный день.
Я сделал свою первую интернет страничку.
я буду богатым и свободным человеком !
теги
вставлены чтобы расположить картинку на несколько строк ниже текста.
Теперь наша страница будет выглядеть вот ТАК.
Желательно в параметрах картинки указать ее размеры. Для этого используется параметр width (ширина картинки) и height (высота картинки).
(также будьте внимательны в написании. Не with, не witdh, не heihgt)
Т.е. например вот так :
размеры картинки указываются в пикселях.
Если вы хотите, чтобы при наведении мышки на картинку отображался какой-то текст, то это делается с помощью параметра alt
например вот так :
Этот текст также будет виден, если у вас выключено отображение графики в браузере (для экономии трафика например). Но этот параметр работает не во всех браузерах. В Internet Explorer работает.
аналог этой команды — параметр title=
внесите изменения в код и посмотрите что получится.
Таким образом код нашей страницы будет такой :
Моя первая интернет страница всего лишь за 5 минут
Сегодня замечательный день.
Я сделал свою первую интернет страничку.
я буду богатым и свободным человеком !
Если у вас вместо картинки показывается «крестик» или картинки не видно ,
то значит вы допустили одну из распространенных ошибок:
— сохранили файл не в той же папке, где находится html-файл.
— сохранили файл под другим именем, например не верно указали расширение файла. Должно быть jpg
— возможно файл сохранился как money-master.jpg.jpg (Зайдите в папку где лежат файлы через TotalCommander и проверьте. При необходимости переименуйте)
— допустили ошибку в параметре, написав например scr= вместо src=
— не верно указали имя файла или расширение после src=
Также перечитайте вот эту тему на форуме. Там разбираются все возможные ошибки при вставке картинки.
Источник: moneymaster.ru