Новичкам при настройки сайта порой необходима вставить картинку на сайт, а как это сделать не знают. В этом уроке рассмотрим как вставлять картинку на сайт haystar, тремя способами. Я покажу все 3 варианта, через простой редактор, который помогает добавлять новости на сайт. К стати кого интересует можете почитать статью как добавлять новости на сайт, очень полезный урок для начинающих.
А мы приступим
Я уже говорил что есть 3 способа как добавить картинку на сайт, первый способ мы попробуем реализовать через обычную кнопку, которая находится в визуальном редакторе. Когда добавляешь новость на сайт, к новости можно прикрепить картинку, это будет второй способ. А третий, мы попробуем реализовать через обычный тег html ![]() .
Тег ![]() - Позволяет вставлять на наш сайт картинки, и подгружает их через специальный атрибут - src.
Первый вариант
Так вот, авторизуйтесь на сайте через соц.сайт, и нажмите кнопку добавить новость на сайт . Должна сразу открыться форма с визуальным редактором, щёлкните мышкой в том месте, где хотите что-бы стояла картинка, у меня это будет под текстом. После этого нажмите на иконку изображение.
iconka
Должно открыться окно, в котором нужно вставить ссылку на картинку. У нас есть два варианта как это сделать, взять ссылку с другого сайта и вставить её в поле для ссылки, на картинке ниже стрелочка под номером №1. Второй варианта, пойти в файловый менеджер и загрузить картинку с компьютера, стрелочка под номером №2.(смотри фотки) Под номером №3, стрелочка указывает на поле, которое нужно заполнить, дать название нашей картинке. Это очень полезно для поисковых машин.
Поля под номером №4, помогают задать высоту и ширину для картинке. Стрелочка под номером №5, помогает задавать вокруг картинки границу, в данном случае граница чёрного цвета. Стрелочки под номером №6, указывают на отступы вокруг картинки, какое расстояние пропишите в полях, на такое к картине не приблизятся другие элементы, к примеру текст. Под номером №7, мы можем выравнивать нашу картинку, по левому и правому караю, если мы выбираем один из параметров, картинка перемещается в нужный край, а текст обтекает её с другой стороны. Если все настройки были настроены, нажмите кнопку под номером №8.
Картинка должна была появится возле текста. Если нажать на картинку, вокруг неё появятся маленькие квадратики. Данные квадратики помогают нашу картинку увеличивать и уменьшать, советую картинку растягивать только за углы, что-бы не нарушать пропорции изображения.
shrina
Второй вариант
Давайте рассмотрим как вставить картинку при помощи нашего тега. Запомним сразу, что теги нужно добавлять только через html редактор, если это делать через визуальный, теги работать не будут. В принципе визуальный редактор специально и создан, что-бы помогать оформлять наши новости без знания тегов, но вам нужно знать, что когда мы формируем новость в визуальном редакторе, автоматически создаётся код, который можно посмотреть через html редактор, и при необходимости внести в него изменения.
Всё делаем по старой схеме, зашли на сайт как админ, нажали кнопку добавить новость на сайт, должен открыться визуальный редактор, над редактором найдите кнопки, которые позволяют переключатся между редакторами, нам нужна кнопка под названием панель HTML кодов.
panel
Щёлкну по кнопке, откроется HTML редактор. В нём напишите код такой конструкции. Две скобки, одна открывается другая закрывается <>. Промеж этих скобок напишите три буквы img, эти буквы скажут браузеру что этот тег для картинки. После трёх букв поставьте пробел и напишите ещё три буквы src, и сразу после этих букв, ставим равно = а за равно, две двойные кавычки, промеж этих кавычек нужно указать ссылку на картинку. Если напишите такую конструкцию и вставите ссылку на картинку, картинка должна появится после добавления новости на сайт, или можно вернутся назад в визуальный редактор и посмотреть.
img
Давайте немного подробнее разберём тег. Данный img тег одинарный, есть парные теги, есть одинарные. Вот так пишутся одинарные ![]() , вот так пишутся парные - парные ещё называют контейнеры. В данном случае тег для картинки одинарный, запомним что любой тег начинается с открывающей и закрывающей скобки <>. За первой скобкой сразу пишется название тега, в нашем случае это img, а за тегом идёт пробел и пишется атрибут, после атрибута можно поставить пробел и написать ещё атрибут. Атрибутов можно писать сколько угодно.
Атрибуты добавляются в тег через пробел и помогают расширить функции тега, у атрибута есть ещё значения. В данном случае, в теги стоит атрибут SRC, этот атрибут говорит браузеру, что нужно подгрузить к тегу ссылку, которую мы вставим промеж двойных кавычек. (Значения у атрибутов пишутся промеж двойных кавычек) Если вдруг сейчас не ясно что-да как работает, не переживайте всё со временем придёт, просто не возможно сейчас, описать всю схему работы тегов, запомните что написано выше, а со временем знание расширятся.
Третий вариант
Ну и последний вариант, это добавить картинку, через кнопки под редактором. Сейчас не важно какой редактор вы выберете, визуальный или HTML. Данный способ добавления картинки, будет работать и так и так. Найдите под редактором поле, которое позволяет выбрать картинку на компьютере и нажмите на кнопку обзор, должно открыться окно, в котором найдите картинку на компе и добавьте её на сайт. Если нажать на плюс, можно добавить несколько картинок в новость.
komp
Выбрав картинки на компе, должны появится специальные коды. Эти коды нужно разместить в редакторе под текстом или над тестом, не важно, главное что-бы коды стояли в редакторе. Через данные коды, картинки будут подгружаться в новость при просмотре её на сайте.
kod
Вот и всё, осталось только сохранить или добавить новость на сайт. Думаю теперь вы точно знаете как добавлять картинки на наш сайт, и кстати через тег img картинки можно добавлять не только в новость на сайт, но и в шапку и в боковую колонку сайта. Всё спасибо за внимание.
Владимир Д.
|
