Як вставити картинку в html

З цієї інструкції ви дізнаєтеся, як вставити картинку в html, які теги використовувати, що таке атрибути і як вони допомагають в позиціонуванні. Не дивлячись на те, що в усій сучасних cms є зручні функції додавання картинок, іноді буває потрібно вставити що-небудь «руками». Повісити банер в сайтбаре, змінити фотографію в шапці або логотип.

Як вставити картинку в html на фон

До того ж, ближче до кінця статті ми розповімо про те, як поставити картинку на фон сайту html, що теж дуже корисно і привабливо. Інструкція буде буяти наочними прикладами, так що додавайте це керівництво на сайті Kak Club в обране, що б не втратити і мати можливість підглядати як в шпаргалку. Ну що ж, давайте переходити до конкретики або про те як поставити пароль на папку читати.

1 - тег img.Щоб зрозуміти, як вставити картинку в таблицю html потрібно буде скористатися тегом img. У цей тег ви вставите посилання на вашу картинку, при цьому важливо пам'ятати, що тег не вимагає закриття. Тобто неправильно. Правильно так:

Складнощі виникають і з правильним розміщенням посилання. Можна вказувати абсолютний шлях до картинки або відносний, з урахуванням місця на хостингу, куди зображення залито. Зараз пояснимо докладніше. Якщо зображення знаходиться в головній директорії (в корені), то тег можна заповнити так:

Якщо зображення знаходиться, наприклад, в папці img (а саме так найчастіше і буває), то пишемо так:

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

Всі ці способи працюють і в повній мірі відповідають на питання як вставити зображення в html. Головне не забувати стежити за правильністю шляху, використовувати зображення в розширенні gif, png, jpg і пам'ятати про те, що важливе значення має регістр зазначеного назви фотографії. Primer.jpg і primer.jpg це два різних зображення, які можуть вас запитати.

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

Атрибути вставляються в сам тег і в них вказується позиція або яке-небудь цифрове значення. Наприклад, так:

align = 'left' повідомляє про те, що зображення буде вирівняно по лівому краю і буде обтікати текстом. Width і height говорять про відображуваних розмірах фотки, це потрібно якщо ви залили більшого розміру ніж потрібно і тепер хочете «підігнати» під дизайн сторінки. Тепер докладніше про те, які можна використовувати атрибути, що допомагають усвідомити, як вставити картинки в html. Ось назву, короткий опис і можливі значення кожного атрибута:

width - ширина зображення - пишеться саме значення в пікселях, без вказівки px
height - висота зображення
border - товщина рамки, навколо всього зображення. Вказується лише цифрове значення в пікселях, як з шириною і висотою. Якщо у вас фото буде посиланням (як це зробити розповімо трохи нижче), значить, рамка буде додана автоматично. Щоб позбутися її, необхідно вказати нульове значення, наприклад, так - border = '0 # 8242-
align - вказує, куди буде притиснуто або як вирівняно зображення і як воно буде обтікати текстовим контентом. Є 5 значень цього атрибуту - bottom, left, middle, right, top. Так що якщо бажаєте зрозуміти, як поставити картинку в html по центру, то вказуйте в тезі img наступне - align = 'middle'
alt - дуже важливий атрибут, вкрай необхідний для оптимізації, сторінки, для зручності роботи з нею пошукових машин. Це текст для зображення, за яким його будуть шукати користувачі в мережі. Не лінуйтеся заповнювати цей атрибут. Решта атрибути не такі важливі і використовуються вкрай рідко.
hspace - відступ від зображення по горизонталі
vspace - відступ від зображення по вертикалі
longdesc - якщо до фотографії є розширена анотація, то посилання на неї можна вказати в цьому атрибуті

Ну, ось ми і розглянули майже всі основні html теги вставити картинку, докладніше почитати про все це можна на зручному сайті htmlbook.

3 - зображення-посилання. У випадку з банером, підписом, або чим-небудь ще, необхідно щоб фотка вела на яку-небудь сторінку - ваш сайт, профіль і так далі. Як же зробити картинку посиланням? Дуже просто:

Прописали alt і додали target = '_ blank' щоб при кліці на фото сторінка вказаного сайту відкривалася в новому вікні. Якщо потрібно закрити посилання від індексації пошуковими системами, додайте noindex і nofollow. Наприклад, так:

4 - атрибути css. Звичайно, виникають завдання, для вирішення яких не достатньо використовувати зазначені атрибути і не досить знати, як вставити картинку в html код або як прибрати webalta, потрібно більш точне позиціювання. Це можна зробити, якщо вставити в тег img атрибут style = "і вказати в ньому потрібні команди css. Наприклад, ось так:

Можна перераховувати будь-яку кількість команд, головне розділяти їх крапкою з комою:

5 - зовнішній css файл. Вставляти css в тег img звичайно здорово, але майже завжди не зручно. На сайтах сотні зображень і в кожному вказувати css команди довго і не правильно. З цього підключаємо зовнішній css файл з усіма командами і, коли розбираємося, як вставити зображення в таблицю html використовуємо ідентифікатори або класи в зв'язці з div або span. Ось як буде виглядати ваш код:

А у вашому css файлі на хостингу прописуєте:

А потім, якщо потрібно буде змінити колір рамки, наприклад, то ви не витратите кілька днів на те, щоб руками «обійти» всі теги img і підправити колір. Ви просто змініть показники класу primercss у файлі css і на цьому робота закінчиться.

6 - зображення в фоні сайту. Ми вже докладно розповіли про те, як вставити картинку в клітинку таблиці html, але не пояснили, як додати зображення на фон. Хоча обіцяли. Робиться все дуже просто, більше часу витратите на підготовку патерну (повторюваного візерунка, розмістивши який стик в стик, отримаєте цілісний і гарний фон без швів). Припустимо картинку ви створили в фотошопі або згенерували онлайн на одному з сайтів з генерації патернів. Може бути навіть на цьому bgpatterns.com.

Заливайте патерн в папку img на хостингу і знаходите в html файлі тег body. Прописуєте туди pattern.jpg:

Зрозуміло, те, що вже в тезі прописано не видаляються, просто додаєте один атрибут. Або відкриваєте ваш файл css і прописуєте фон туди:

Якщо помітили, що ми ще прописали фон сайту. Який повинен співпадати з основним фоном патерну. Ми розповідаємо, як додати картинку в таблицю html з усіма нюансами і це один з них. Справа в тому, що якщо у якогось читача вашого портал Інтернет дуже слабкий, то патерн завантажиться з запізненням і фон заллється звичайним кольором. Щоб це процес не кидався в очі, краще вказати колір «як би підкладки» під зображенням, який збігається з колірною гамою зображення. Сподіваємося, стаття вам знадобилася, задавайте питання в коментарях.