Html теги для вставки картинок, атрибути картинок в html
В даному матеріалі я вам розповім про дуже важливі тегах HTML, для вставки картинок і графіки на сторінку, адже без цього складно створити гарний і хороший сайт.
Картинки зроблять твій сайт унікальним і буде виділяти із загальної маси. Однак пам'ятай, що надмірне використання графіки на сайті може бути поганим фактором.
Чи не награмождай html-сторінку картинками, сторінка повинна бути легкою і не відлякувати відвідувачів. Відвідувач завжди повинен засвоювати головну інформацію і не відволікатися, вставляй картинки в HTML тільки там, де в цьому є необхідність.
на сторінці Атрибути тега BODY я вже говорив, що картинки можуть бути фоном html-сторінки, а зараз я вам розповім, як ці ж картинки можна використовувати на більш високому рівні, ніж фон.
Якщо картинка і html-сторінка знаходяться в різних папках або каталогах, то треба написати шлях до зображення щодо сторінки. Наприклад, наша html-сторінка знаходиться в папці або каталозі news, в цьому ж каталозі або папці знаходиться підкаталог (папка) pop, в якому і розташована наша картинка image.jpg, то для її вставки треба писати так:
Крім атрибута src у тега є ще парочка необов'язкових, але важливих атрибутів:
- width - ширина картинки (можна вказувати пікселі або відсотки);
- height - висота картинки (можна вказувати пікселі або відсотки).
Якщо не вказувати дані атрибути, браузер завантажить реальні розміри картинки. Однак не варто перестаратися зі значеннями даних атрибутів, адже збільшення довжини або ширини картинки може її спотворити, що зіпсує її, наприклад фотографію людини, де зміняться пропорції людини.
Як я вже написав, розміри картинки можна вказувати як в пікселах, так і у відсотках. Наведу просто приклад:
ще приклад html-коду:
Бувають випадки, коли в браузері відключена можливість відображення графіки, в тому числі і картинок, і щоб ваша сторінка не втратила сенс, застосовують атрибут alt, в якому ми пишемо альтернативний текст, якщо картинка не під вантажилася на сторінку. html-код на прикладі:
Цей приклад вставить замість картинки текст, в область, під яку було зарезервовано місце під зображення, проте повторюся, це необов'язковий атрибут, але йому є місце.
Далі важливий атрибут align, за допомогою якого, як ти вже здогадався, можна управляти розташуванням картинки щодо тексту на html-сторінці. Далі його значення:
- left - картинка розташується зліва, а текст, який поруч - справа;
- right - картинка розташується справа, а текст, який поруч - зліва.
а браузер виведе наступне:
Текст, радом з картинкою.
HTML-код для значення right:
на html-сторінці буде так:
Текст, поруч з картинкою.
Для того, щоб текст не обтікав картинку, можна використовувати раніше згаданий тег BR на сторінці Форматування тексту в HTML. Кстате, тег BR має атрибут clear, зі своїми значеннями значення:
- left - НЕ обтікати текстом, який вирівняний по лівому краю;
- right - НЕ обтікати текстом, який вирівняний по правому краю;
- all - НЕ обтікати текстом, який вирівняний по лівому і правому краях.
Без атрибута align текст обтічники за замовчуванням праворуч картинки і майже впритул. Якщо ти хочеш щоб текст не обтукал впритул картинку, можна використовувати ось такі атрибути:
- vspace - робить верхнє і нижнє поля в пікселях;
- hspace - робить бічні поля (зліва і справа) в пікселях.
Наведу простий html-код на прикладі:
Що вийде з цього прикладу спробуй подивитися сам.
Навколо картинки ще можна сжделать рамку за допомогою атрибута border і вказувати в пікселях її величину. Чим більше значення, тим більше рамка навколо зображення. HTML-код буде таким:
на html-сторінці буде ось так:
Я написав основні теги HTML, необхідні для вставки картинок на html-сторінку. Далі я розповім тобі, як створити посилання в HTML, а також як зробити картинку посиланням.
Євген:
А як зробити щоб вставити картинку з прямого посилання на картинку з інтернету?
Кирило Шерстюк:
Чому я не бачу картинку?
Знижки для новачків:
Підпишіться на цікаві оновлення мого блогу, щоб бути в тренді останніх тенденцій розробки і просування сайтів: