А ми приступимо

Я вже говорив що є 3 способи як додати картинку на сайт, перший спосіб ми спробуємо реалізувати через звичайну кнопку, яка знаходиться в візуальному редакторі. Коли додаєш новина на сайт, до новини можна прикріпити картинку, це буде другий спосіб. А третій, ми спробуємо реалізувати через звичайний тег html <img>.

Тег <IMG> - Дозволяє вставляти на наш сайт картинки, і завантажує їх через спеціальний атрибут - src.

Перший варіант

Так ось, авторизуйтесь на сайті як адміністратор, і натисніть кнопку додати новину на сайт (читайте статтю за посиланням вище, якщо не знаєте як додавати новини на сайт). Повинна відразу відкритися форма з візуальним редактором, клацніть мишкою в тому місці, де хочете що-б стояла картинка, у мене це буде під текстом. Після цього натисніть на іконку зображення.

Повинно відкритися вікно, в якому потрібно вставити посилання на картинку. У нас є два варіанти як це зробити, взяти посилання з іншого сайту і вставити її в поле для посилання, на зображенні нижче стрілочка під номером №1. Другий варіант, піти в файловий менеджер і завантажити картинку з комп'ютера, стрілочка під номером №2. Під номером №3, стрілочка вказує на поле, яке потрібно заповнити, дати назву нашій картинці. Це дуже корисно для пошукових машин.

Поля під номером №4, допомагають задати висоту і ширину для зображенні. Стрілочка під номером №5, допомагає задавати навколо картинки кордон, в даному випадку межа чорного кольору. Стрілки під номером №6, вказують на відступи навколо картинки, яку відстань пропишіть в полях, на таке до картині наблизяться інші елементи, наприклад текст. Під номером №7, ми можемо вирівнювати нашу картинку, по лівому і правому караю, якщо ми вибираємо один з параметрів, картинка переміщається в потрібний край, а текст обтікає її з іншого боку. Якщо всі налаштування були налаштовані, натисніть кнопку під номером №8.

Картинка повинна була з'явиться біля тексту. Якщо натиснути на картинку, навколо неї з'являться маленькі квадратики. Дані квадратики допомагають нашу картинку збільшувати і зменшувати, раджу картинку розтягувати тільки за кути, що-б не порушувати пропорції зображення.

Другий варіант

Давайте розглянемо як вставити картинку за допомогою нашого тега. Запам'ятаємо відразу, що теги потрібно додавати тільки через html редактор, якщо це робити через візуальний, теги працювати не будуть. В принципі візуальний редактор спеціально і створений, що-б допомагати оформляти наші новини без знання тегів, але вам потрібно знати, що коли ми формуємо новина в візуальному редакторі, автоматично створюється код, який можна подивитися через html редактор, і при необхідності внести в нього зміни.

Все робимо за старою схемою, зайшли на сайт як адмін, натиснули кнопку додати новину на сайт, повинен відкритися візуальний редактор, над редактором знайдіть кнопки, які дозволяють переключаться між редакторами, нам потрібна кнопка під назвою панель HTML кодів.

Щёлкну по кнопці, відкриється HTML редактор. У ньому напишіть код такої конструкції. Дві дужки, одна відкривається інша закривається <>. Переможе цих дужок напишіть три букви img, ці букви скажуть браузеру що цей тег для картинки. Після трьох букв поставте пробіл і напишіть ще три букви src, і відразу після цих букв, ставимо одно = а за одно, дві подвійні лапки, переможе цих лапок потрібно вказати посилання на картинку. Якщо напишіть таку конструкцію і вставите посилання на картинку, картинка повинна з'явиться після додавання новини на сайт, або можна повернутись назад в візуальний редактор і подивитися.

Давайте трохи докладніше розберемо тег. Даний img тег одинарний, є парні теги, є одинарні. Ось так пишуться одинарні <img>, ось так пишуться парні <div> </ div> - парні ще називають контейнери. В даному випадку тег для картинки одинарний, запам'ятаємо що будь-який тег починається з відкриває і закриває дужки <>. За першою дужкою відразу пишеться назва тега, в нашому випадку це img, а за тегом йде пробіл і пишеться атрибут, після атрибута можна поставити пробіл і написати ще атрибут. Атрибутів можна писати скільки завгодно.

Атрибути додаються в тег через пробіл і допомагають розширити функції тега, у атрибута є ще значення. В даному випадку, в теги варто атрибут SRC, цей атрибут говорить браузеру, що потрібно довантажити до тегу посилання, яку ми вставимо переможе подвійних лапок. (Значення у атрибутів пишуться переможе подвійних лапок) Якщо раптом зараз не ясно що-да як працює, не переживайте все з часом прийде, просто не можливо зараз, описати всю схему роботи тегів, запам'ятайте що написано вище, а згодом знання розширяться.

третій варіант

Ну і останній варіант, це додати картинку, через кнопки під редактором. Зараз не важливо який редактор ви виберете, візуальний або HTML. Даний спосіб додавання картинки, буде працювати і так і так. Знайдіть під редактором поле, яке дозволяє вибрати картинку на комп'ютері і натисніть на кнопку огляд, має відкритися вікно, в якому знайдіть картинку на компі і додайте її на сайт. Якщо натиснути на плюс, можна додати кілька картинок в новина.

Вибравши картинки на компі, повинні з'явиться спеціальні коди. Ці коди потрібно розмістити в редакторі під текстом або над тестом, не має значення, головне що-б коди стояли в редакторі. Через ці коди, картинки будуть довантажувати в новина при перегляді її на сайті.

Ось і все, залишилося тільки зберегти або додати новину на сайт. Думаю тепер ви точно знаєте як додавати картинки на свій сайт, і до речі через тег img картинки можна додавати не тільки в новина на сайт, але і в шапку і в бічну колонку сайту. Все дякую за увагу, поки.

Важливо! Якщо раптом у вас вийшло налаштувати сайт за допомогою моїх уроків, і вам вже не в перший раз він допомагає розібратися з різними завданнями, тоді не забудьте подякувати Автора в коментарях! Після подяки Автор знає що праця була цінний і корисний, а той час, який було витрачено на урок, не витрачено в пусту і згодилося хорошим людям.
Дякую за увагу і розуміння.
Реклама:

Є багато різних варіантів як віддячити Автора.