Як зробити картинку посиланням

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

Посилання у великій статті можуть загубитися, а ось барвиста картинка привертає більше уваги.

Щоб вставити зображення на сайт, використовують тег . Тег має чотири обов'язкові атрибути:

• src - для вказівки шляху до файлу з картинкою та його відображення на екрані;
• width і height – розміри зображення. Ці атрибути дозволяють резервувати місце для зображення, щоб прибрати «стрибки» сторінки, поки зображення вантажиться;
• alt - альтернативний опис.

Адреса посилання задається у форматі URL за допомогою атрибуту href.

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

Як виділити зображення-посилання?

Якщо ви хочете виділити посилання, зробіть картинку, що збільшується, або підсвічуйте її кольором при наведенні курсору.

Щоб картинка-посилання змінювала колір, пропишіть її стан:

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

Щоб колір був напівпрозорим, а картинка просвічувала крізь нього, вкажіть властивість opacity.

Ця властивість визначає рівень прозорості елемента. Значення 0 відповідає повній прозорості, а значення 1 повної непрозорості. Вкажіть будь-яке число від 0 до 1, щоб отримати потрібний рівень прозорості.

На другому зображенні бачимо ефект якості hover при наведеному курсорі. Джерело

Щоб зображення збільшувалося при наведенні курсору, застосуйте властивість transform .

Тепер при наведенні курсору картинка збільшиться у півтора рази. Замість числа 1.5 вкажіть потрібне значення, щоб збільшити або зменшити картинку. Більше одиниці – збільшити, від 0 до 1 – зменшити. Наприклад, якщо потрібно зменшити картинку вдвічі, вкажіть для властивості transform значення 0.5.

Корисні матеріали

"Доктайп" - журнал про фронтенд. Читайте, слухайте та навчайтеся з нами.

Читати далі

HTML-коди популярних емодзи

Емодзі давно вийшли за межі месенджерів і соціальних мереж, ставши важливою частиною веб-дизайну та інтерфейсу користувача. Вони допомагають зробити ваш сайт живим, яскравим та емоційним. Але як додати емодзі до HTML-коду без втрати якості? У цій статті ми зібрали для вас список з 50 найпопулярніших емодзи з їхніми назвами, значеннями та HTML-кодами для вставки.

Ця таблиця стане справжнім помічником для початківців та досвідчених веб-розробників, які хочуть покращити користувальницький досвід та додати яскраві елементи на свої проекти. Дізнайтеся, як просто інтегрувати емоції у свій сайт за допомогою одного рядка HTML!

Що писати в атрибуті

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

Ми вже обговорили основні правила написання тексту для фотографій та зображень. На цей раз поговоримо про те, яким саме має бути опис, щоб у ньому був сенс.

Що таке Lazy Loading та як її включити на сайті

Лінива завантаження (буквально, lazy loading) - це можливість відкласти завантаження непотрібного прямо зараз медіаконтенту.

Лінива завантаження робить сайт швидше і заощаджує трафік, якщо у користувача мобільний інтернет з обмеженнями.

Знайомство з HTML

Привіт, майбутні фронтенд-розробники! Ласкаво просимо до захоплюючого світу веб-розробки. Перед тим, як рухатися далі, давайте розберемося з основами - мовою розмітки гіпертексту або просто HTML.

HTML (Hypertext Markup Language) – це стандартна мова, яка використовується для створення веб-сторінок. Уявіть, що ваша веб-сторінка – це книга. Тоді HTML - це скелет цієї книги, кістяк, який визначає структуру: де буде заголовок, абзаци, зображення тощо.

Спеціальні символи в HTML

HTML використовує спеціальні комбінації символів, щоб коректно відображати певні знаки на веб-сторінках. Наприклад, замість простого знака "менше" ми бачимо комбінацію <. У цій статті наведено список таких символів. Це невеликий довідник тих, хто хоче швидко знайти потрібний код.

Навіщо потрібний метатег viewport

Кожен із нас хоч раз у житті стикався з веб-сторінками, які здаються «зламаними» або дивно відображаються на мобільних пристроях. Однією з причин такої поведінки може бути відсутність маленького, але важливого елемента коду сторінки — метатега viewport .

Метатеги — це інструкції для браузера, як відображати вміст сторінки. Один з таких метатегів – viewport, який говорить браузеру, як масштабувати та відображати сторінку на різних пристроях, особливо на смартфонах та планшетах.

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

Атрибут class у HTML на прикладах

Атрибут класу використовується для додавання CSS-класів елементам HTML. Класи дозволяють застосовувати ті самі стилі CSS або поведінку JavaScript до різних елементів на сторінці.

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

Чим відмінності цитат

У HTML є різні теги для цитування та вказівки джерел. Основні їх: , і . Давайте розберемося в їх відмінностях.

Растрова та векторна графіка

Спробуймо розібратися, в чому відмінність растрової графіки від векторної.

Як відрізнити h1, h2 та h3

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

Часто здається, що заголовок це простий і зрозумілий тег. Але це враження оманливе, тому що не завжди великий та виділений текст на макеті є заголовком.

При верстці сайту важливо дотримуватись семантики, щоб усі теги використовувалися коректно і ресурс працював без помилок. Якщо наплутати рівні заголовків, то структура сторінки буде не семантічною, а скрінрідери неправильно прочитають сайт.

У статті розберемося, як правильно визначати заголовки за макетом, які з них краще робити прихованими і чому.

Як вставити в HTML посилання та картинку (фото) — теги IMG та A

Доброго дня, шановні читачі блогу KtoNaNovenkogo.ru. У черговій статті цієї рубрики ми продовжимо розглядати теги. Раніше ми дізналися що таке мова Html і теги за версією валідатора W3C), поговорили про оформлення коментарів і Doctype), а також торкнулися теми символів пробілу в Html коді та спецсимволів (мнемонік). Так, ще ми обговорили можливості завдання кольору Html .

Сьогодні я хочу докладніше зупинитися на тих елементах мови гіпертекстової розмітки, з якими ви найчастіше стикатиметеся в роботі над своїм веб-проектом. Я говорю про вставку зображень та гіперпосилань код веб-сторінок. Без цього дуже важко буде продуктивно працювати над дизайном сайту. Ці теги активно використовуються як при написанні та оформленні статей, так і в оформленні шаблону, натягнутого на каркас двигуна.

Як вставити картинку — html теги Img

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

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

З іншого боку, в оформленні використовуваного вами шаблону також активно застосовуються ті самі елементи - вставки посилань, картинок, контейнери, списки (тут про них йдеться), різні форми та таблиці (Tr, Th, Td, Table).

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

Для вставки картинок на сторінку служить HTML тег Img. Подана нижче картинка вставлена ​​за допомогою нього:

Атрибут Src дозволяє вказати ім'я та місце зберігання файлу зображення (тобто шлях до нього). При цьому може бути вказане відносне або абсолютне посилання на файл із зображенням.Шляхи задаються за допомогою символу '/', який є роздільником між назвами вкладених каталогів, у яких зберігаються файли малюнків.

Абсолютний шлях у Src буде починатися з http://vash_sait.ru (для мого блогу - https://ktonanovenkogo.ru). Далі, використовуючи '/' для поділу імен вкладених папок, прописується повний шлях до файлу картинки, закінчуючись наприкінці іменем та розширенням самого файлу. Наприклад, https://ktonanovenkogo.ru/image/finik.jpg

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

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

Задаємо ширину та висоту зображення за допомогою атрибутів Width та Height

Html атрибути Width і Height дозволяють встановити розмір області (ширину і висоту, відповідно), яка буде відводитися на сторінці під дане зображення. Вони вставляються всередині тега Img, наприклад, так:

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

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

Використовуйте при збереженні малюнків компактні формати растрової графіки типу GIF (для вставки схематичних картинок) або JPG (для вставки фотографій). але вони, проте, дозволяють трохи прискорити завантаження документа.

Справа в тому, що якщо браузер не знаходить Width і Height всередині html тегу Img, то йому знадобиться час на те, щоб дізнатися розмір картинки, завантажити його і тільки після цього продовжити завантажувати решту вмісту документа. , браузер автоматично резервує місце під зображення вказаних у цих атрибутах розмірів і продовжує завантажувати веб-сторінку далі.

Якщо графічні файли, що виводяться на цю сторінку дуже важкі і їх дуже багато, то вставка Height і Width дозволить користувачам приступити до читання тексту сайту, тоді як графіка ще завантажуватиметься.

Також, якщо ви не вкажете Width і Height всередині Img, то може виникнути ситуація, коли при маленькій картинці і дуже довгому альтернативному тексті (задається атрибутом Alt в тезі Img, про це піде нижче), до того як завантажиться графіка, тимчасово відбудеться зсув дизайн сайту, т.к. довгий альтернативний текст займатиме стільки місця, скільки йому знадобиться.

У випадку використання Width і Height місце для виведення альтернативного тексту буде обмежено розмірами, заданими в них розміру. Здебільшого, саме тому я намагаюся прописувати ці атрибути в тегу Img.

Alt та Title у html тегу Img

Дуже корисними з точки зору внутрішньої пошукової оптимізації сайту є атрибути Alt і Title. Читайте про просування та розкрутку сайту самостійно або в публікації «Як розкрутити сайт».

Перший задає, так званий, альтернативний текст для зображення. Цей текст можна побачити, якщо вимкнете показ графіки у вашому браузері. Alt і призначений для цього – розповісти пошуковим системам про те, що за малюнок тут мав би бути. Title призначений для інформування користувача про зміст картинки.

Вміст Title зі складу тега Img показується у спливному рядку, якщо користувач підведе мишу до малюнка. Обидва ці атрибути (якщо ви їх прописали) дозволяють включити зображення вашого веб-проекту у пошук за зображеннями Яндекс та Google Images. Тому не варто нехтувати цією можливістю і обов'язково прописувати хоча б Alt. Оформлення ваших зображень має бути приблизно таким:

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

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

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

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

Створюємо гіперпосилання за допомогою html тега посилання «A»

Посилання є одним з основних елементів організації документа в Html. Без них веб-сторінка була б просто сторінкою. Вони створюються з допомогою тега «А». Обов'язковим атрибутом є лише Href. Він задає URL (шлях), куди повинен перейти користувач, клацнувши по даному гіперпосиланню.

Посилання може вести як на внутрішню сторінку вашого ресурсу (дуже важливий момент внутрішньої оптимізації пов'язаний саме з перелінковуванням сторінок сайту)), так і на сторінку іншого проекту. Html тег A є парним і, відповідно, має елемент, що закриває. Текст гіперпосилання (анкор — тут про нього докладно написано в плані сприяння SEO просуванню) розміщується між тегами «A», що відкриває і закриває.

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

Анкор (якщо посилання використовується для внутрішньої перелінковки, цей текст повинен містити ключові слова, за якими ви хочете просувати статтю, на яку веде цей лінк)

Відкривання в новому вікні та посилання з картинки (зображення)

Ну, гаразд, це ми знову відволіклися на пошукову оптимізацію. Повернемося знову до тегів. Для html тега "A" є один дуже потрібний атрибут, який дозволить відкривати сторінку, на яку веде це посилання у новому вікні. Це може знадобитися, якщо ви з однієї сторінки посилаєтеся на безліч зовнішніх документів. В цьому випадку відвідувачеві було б зручніше, щоб ваша сторінка залишалася завжди відкритою.

Target для цієї мети має параметр, що дозволяє відкривати сторінку в новому вікні, яке називається _BLANK. Якщо Target не заданий у тегу A, посилання буде відкриватися в цьому ж вікні. Приклад використання атрибуту Target:

Зверніть увагу, що порядок проходження атрибутів усередині тегів ніяк не регламентований. З таким самим успіхом можна написати:

Як анкор для html тега посилання замість тексту може використовуватися зображення. У цьому випадку Img полягає в відкриває та закриває теги A:

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

Title можна використовувати і у випадку звичайного текстового анкору. У цьому випадку інформація прописана в ньому буде видно, якщо підвести курсор миші до гіперпосилання.

Створення якорів та хеш-посилань

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

Якщо поставити просте гіперпосилання на цю статтю, то після переходу по ній стаття відкриється на самому її початку і користувачеві доведеться самому відшукувати в ній те місце, на якому ви хотіли сконцентрувати увагу. стаття відкривалася саме на тому місці, де ви задумали і користувачеві не доведеться перелопачувати зайвий матеріал.

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

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

Нині такий спосіб вставки якорів вважається застарілим та валідатором Html коду буде розцінюватися, як груба помилка. Зверніть, будь ласка, на цю увагу. Тепер якір розставляються за допомогою додавання селектора ID в найближчий тег.

Припустимо, що для заголовка у статті це могло б виглядати так:

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

Гіперпосилання створюється стандартним чином, за винятком того, що в кінці Урла, який прописується в Href, ставиться знак ґрат (знак дієза або хеш-символ), а після нього йде ім'я мітки того якоря, який стоїть у потрібному місці тексту статті.

Хеш-посилання виглядатиме приблизно так:

За допомогою хеш-посилання ви перейдете не тільки на потрібну сторінку, але браузер автоматично прокрутить вікно до потрібного місця в тексті.

Якщо якір знаходиться в тому ж Html документі, що і хеш-посилання, можна вказати тільки якір.

Успіхів вам! До швидких зустрічей на сторінках блоґу KtoNaNovenkogo.ru

Коментарі та відгуки (48)

Атрибути Width та Height. дозволяють трохи прискорити завантаження сторінки із зображеннями.

Цікаво, яким чином?

Хотілося б почитати статтю про основи jooml'івських шаслонів, з чого складаються і як їх можна правити. Можливо якось у далекому майбутньому.

Максиме, дякую за таку втішну оцінку. Щодо шаблонів. Як створити власний шаблон я писати не планую (але й не зарікаюся), т.к. не маю в цьому достатньо досвіду. Та й ця тема дуже об'ємна.

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

Здрастуйте, Дмитре. Підкажіть будь ласка. Нині роблю сайт на джумлі. Розбиваю статті, тобто. так, щоб з'явилася кнопка читати повністю. Річ у тім, що з вимкнених зображеннях у браузері, цю кнопку видно, т.к. вона у вигляді gif картинки. Що можна зробити у цьому випадку? Дякую.

Дякую! Шукав синтаксис атрибуту title у малюнку, тут знайшов вичерпне пояснення. Так тримати!

Хотів висловити подяку, не вийшло. Дякуємо за пояснення атрибуту title у зображенні

привіт! як зробити щоб як посилання була прямокутна область розміром 100×400, причому щоб це була таблиця і малюнок. я хотів зробити так:

але подружжя ніякої реакції. що робити.

у тега картинки є атрибути width і height або чого подібна нитка?

Dims: тут, схоже, все визначається в шаблоні, який ви використовуєте. Потрібно там дивитися.

Михаїл: думаю, що це можна буде зробити тільки використовуючи контейнер DIV з прописаним у ньому класом, у файлі CSS вже задати розміри цього контейнера.

Дмитро привіт ще раз.

Знову повертаюся на ваш сайт.))

Скажіть а чи має значення мова в тексті якоря гіперпосилання

І так само в посиланні на якір. Дивлюся у вас латиницею.

imy_metki. навіть пояснення.))Значить є сенс?

І ще поки що далеко не відійшов.

А де статті потрібно вставляти якір?

Щоб вона відкрилася прямо з заголовка.

На початок заголовка чи рядка? Або просто в цей рядок, не має значення.

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

Alex: думаю, що в даному випадку положення якоря хеш-посилання не таке важливе, у будь-якому випадку можете поекспериментувати і внести, при необхідності, зміни.

Мені дуже допомогла ця стаття! Дуже багато корисного знайшла, зараз сиджу розробляю оформлення до сайту. ДЯКУЮ ВЕЛИКЕ АВТОРУ.

Дякую! Дуже класно пишіть, повчально та приємно написано.

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

Зберігаю, в index.html, відкриваю створений веб документ, але в сторінці є тільки місця під рис. , а самих малюнків немає. Ніхто нічого не може допомогти.

1) Щось не те в атрибуті src

Перевірте так: скопіюйте адресу та відкрийте у браузері – має відкритися.

2) Якщо адресу правильний, то м.б. до потрібної папки закрито доступ на сервері, де лежить сайт

А підкажіть, як унизу шаблону вставити посилання нагору. Все це потрібно робити в Index.php? Або якось ще? Це питання про Joomla.

Чудова стаття. А ось підкажіть, будь ласка, як зробити, щоб посилання докладніше було кнопкою. Кнопка в шаблоні http://www.sitesoveta.ru//templates/sunshine/images/readon.gif але з цією версією joomla вона не виводиться. http://www.sitesoveta.ru

Дякую. Начебто б і не «новенький», але стаття сприяла вирішенню питання, що виникло.

Буду дуже вдячний, якщо поясніть, як прописувати теги alt і title в joomla. Заздалегідь дякую.

Чи бачать пошукові системи текст, прописаний у title як анкор для посилання?

Нещодавно знадобилося використовувати такі атрибути в тезі img: атрибути hspace та vspace. Але Mazilla FireFox чомусь їх ігнорує (браузер регулярно оновлюється, версії 3.6). У результаті виходить, що відступів від картинки немає взагалі - ні горизонтальних, ні вертикальних, текст написаний впритул до картинки. І головне, навіть за умовчанням відображається також. Вже кілька разів перевіряла ще раз підключений модуль css (раптом я чогось «випадково» дописала зайвого), але я там тільки прописувала рамочку (атрибут border).

Загалом, якщо матимете час і можливість пояснити в чому причина, буду вдячна)))

Дякую за цікаву та зрозуміло написану статтю. Багато що тепер стало більш-менш зрозумілим. Тільки у мене ось яка проблема:

на своєму блозі розміщую партнерську кнопку з розмірами 88 на 31, а в результаті висота змінилася як належить, а ширину розтягнулася на всю панель.

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

Тепер у мене сайт дуже швидко завантажується, сайт на джумлі зроблений і на головній сторінці багато обкладинок з альбомів, я всім прописав ширину і висоту крім хедера і він найдовше завантажується, я намагався хедер прописати ширину і висоту не через CSS і нічого не вийшло. Підкажіть будь ласка якомога хедеру в джумлі атрибути WIDTH і HEIGHT задати щоб він швидко завантажувався?

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

Знайшов відповіді на всі свої питання, велике спасибі!

Хороша стаття, тільки ось як прописувати альти та титли в галереях, наприклад у Image gallery - sigplus (для Jooml-и)?

Якщо картинка є посиланням, IE малює навколо неї рамку, показуючи, що вона є посиланням. Як її прибрати?

Ура, вийшло! Дякую, Дмитре!

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

Шукав зовсім інший тег щось типу імг і урл разом.

Допоможіть будь ласка як проіндексувати сайт в пошуковій системі зроблений на webasyst ?

Здрастуйте. Підкажіть, що можна укладати в ?

Привіт Дмитро. Чому вставлена ​​картинка, яку позиціоную в різних місцях (праворуч, ліворуч, центр) у візуальному редакторі в адмінці відображається там куди її поставили, а на сайті вперто показується тільки по лівому краю?

Спробувала встановлювати і з вікна медіафайлу і за допомогою візуального редактора, результат той самий.

Скажіть, будь ласка, я так і не зрозумів, як задавати правильно ім'я мітці, щоб посилання відкривалося на певному абзаці. Сиджу, мучаюся, не можу зрозуміти, допоможіть

П'ять балів. Дякую! Легко, доступно і навіть для чайного гуртка зрозуміло :)) одним словом – виручили ВИ мене своїм керівництвом.

Прочитав із користю для себе. Дякую!

Валідатори дають помилку при застосуванні «/» у вказівці розташування малюнка «src=images/Pm.jpg». Як це оминути?

Але хотів би доповнити, що якщо немає можливості завантажити картинку на хостинг, можна використовувати послуги фотохостингу на зразок letpix.ru

Здрастуйте, підкажіть як реалізувати форму підписки на новини, через це зображення сам не можу наздогнати як це зробити.

Всім здраво, ось скажіть а як можна наприклад вставити зображення в анкету персонажа гри? а то у соклана в анці є картинки і не каже як вставив їх.

Чи потрібно прописувати тег title і alt до звичайного посилання - чи це буде переоптимізація?

Хочу зробити картинку як посилання.

підкажіть, а як дізнатися адресу картинки. Я закачав її на сервер. а ось яку адресу писати не знаю.

Ось на таку цікаву добірку HTML How to потрапив - https://www.youtube.com/playlist?list=PLvItDmb0sZw8vk9vQAXdcO78sXT6oE4c9

Пояснюють так, що незабаром у мене й бабуся верстати почне.

Ваш коментар чи відгук