<![CDATA[Как вставить картинку в HTML]]>Чтобы добавить изображение на веб-страницу, используется тег <img>. Вот основные шаги:

1. Базовый синтаксис

<img src="путь/к/файлу.jpg" alt="Описание изображения">
  • src — путь к изображению (обязательный атрибут).
  • alt — текст, отображаемый, если изображение не загрузилось (важно для SEO и доступности).

2. Форматы изображений

Поддерживаемые форматы:

  • JPEG — для фотографий.
  • PNG — для изображений с прозрачностью.
  • GIF — для анимации.
  • SVG — векторные изображения (масштабируются без потерь качества).
  • WebP — современный формат с отличным сжатием.

Пример:

<img src="logo.png" alt="Логотип компании">

3. Пути к файлам

  • Относительный путь (файл в папке сайта):
    <img src="images/photo.jpg" alt="Фотография">
  • Абсолютный путь (файл на другом сайте):
    <img src="https://example.com/photo.jpg" alt="Внешнее изображение">

4. Размеры изображения

Можно задать ширину и высоту:

<img src="photo.jpg" width="300" height="200" alt="Картинка">

⚠️ Совет: Лучше использовать CSS для управления размерами:

<img src="photo.jpg" style="width: 300px; height: auto;" alt="Картинка">

5. Дополнительные атрибуты

  • title — всплывающая подсказка при наведении:
    <img src="photo.jpg" alt="Картинка" title="Наведите сюда">
  • loading="lazy" — отложенная загрузка (для ускорения страницы):
    <img src="big-image.jpg" alt="Большая картинка" loading="lazy">

6. Пример готового кода

<!DOCTYPE html>
<html>
<head>
  <title>Пример</title>
</head>
<body>
  <h1>Моя страница</h1>
  <img src="images/sunset.jpg" alt="Закат над морем" width="600" height="400">
</body>
</html>

7. Полезные советы

  • Храните изображения в отдельной папке (например, images/).
  • Используйте описательные имена файлов (например, dog-running.jpg вместо img123.jpg).
  • Оптимизируйте изображения перед загрузкой (сжатие через инструменты вроде TinyPNG или Squoosh).

Теперь вы знаете, как вставить картинку в HTML! 🎨

]]>https://forum.exlends.ru/topic/148/kak-vstavit-kartinku-v-htmlRSS for NodeSun, 20 Sep 2026 21:12:02 GMTTue, 10 Jun 2025 18:08:44 GMT60<![CDATA[Reply to Как вставить картинку в HTML on Sat, 20 Sep 2025 07:41:00 GMT]]>Ну насколько я знаю это не все функции.
Есть например align, что позволяет работать над выравниваени, относительно текста,
а ещё longdesc добавляет адрес с расширенным описанием для выбранного фото.
Касательно текста очень много дополнительных функций. Или здесь речь просто о самой вставке текста без всякий дополнений?)))

]]>https://forum.exlends.ru/post/742https://forum.exlends.ru/post/742Sat, 20 Sep 2025 07:41:00 GMT<![CDATA[Reply to Как вставить картинку в HTML on Sat, 20 Sep 2025 07:33:57 GMT]]>Всё, что касается изображений, моя самая любимая часть. Несмотря на то, что функции весьма ограничены, с ними можно поиграть и подобрать четкую форму и размер для картинки. Особенно если картинка в формате без фона SVG, PNG или WebP

]]>https://forum.exlends.ru/post/741https://forum.exlends.ru/post/741Sat, 20 Sep 2025 07:33:57 GMT