Как вставить картинку в сообщение

Как вставить картинку в сообщение

Средства мультимедиа универсальны. Вы можете обмениваться не только текстовыми сообщениями, но и аудиофайлами, видеофайлами, картинками…Прикрепить картинку на собственном сайте можно с помощью специальных HTML-тегов.


Инструкция

1. Для вставки картинки на сайт впишите ее адрес внутрь тегов. Должна получиться конструкция как на иллюстрации, где http:// и далее - адрес картинки.картинку в сообщение"" src="/"https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab4cffe52552aab4d03c.jpg"" srcset=""https://st03.kakprosto.ru/tumb/340/images/article/2011/4/13/1_52552aab4cffe52552aab4d03c.jpg 340w,https://st03.kakprosto.ru/tumb/550/images/article/2011/4/13/1_52552aab4cffe52552aab4d03c.jpg 550w,https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab4cffe52552aab4d03c.jpg 680w"" sizes=""(max-width: 414px) 340px, (max-width: 668px) 550px, 680px"">

2. Отрегулируйте размер картинки в сообщении с помощью тегов width (ширина) и height (высота). Теги будут выглядеть примерно так, как на иллюстрации. 500 – ширина в пикселях.картинку в сообщение"" src="/"https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab4e59852552aab4e5d5.jpg"" srcset=""https://st03.kakprosto.ru/tumb/340/images/article/2011/4/13/1_52552aab4e59852552aab4e5d5.jpg 340w,https://st03.kakprosto.ru/tumb/550/images/article/2011/4/13/1_52552aab4e59852552aab4e5d5.jpg 550w,https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab4e59852552aab4e5d5.jpg 680w"" sizes=""(max-width: 414px) 340px, (max-width: 668px) 550px, 680px"">

3. Для оформления цветной рамкой перед шириной вставьте еще один тег: style. На иллюстрации 5 – толщина рамки в пикселях. Тег вставляется после тега размера.картинку в сообщение"" src="/"https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab4f80b52552aab4f849.jpg"" srcset=""https://st03.kakprosto.ru/tumb/340/images/article/2011/4/13/1_52552aab4f80b52552aab4f849.jpg 340w,https://st03.kakprosto.ru/tumb/550/images/article/2011/4/13/1_52552aab4f80b52552aab4f849.jpg 550w,https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab4f80b52552aab4f849.jpg 680w"" sizes=""(max-width: 414px) 340px, (max-width: 668px) 550px, 680px"">

4. Чтобы отрегулировать расстояние между двумя картинками, расположенными по горизонтали («на одной строке»), вставьте между ними такой код с иллюстрации. Расстояние будет равно двум пробелам.картинку в сообщение"" src="/"https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab51a2c52552aab51a6a.jpg"" srcset=""https://st03.kakprosto.ru/tumb/340/images/article/2011/4/13/1_52552aab51a2c52552aab51a6a.jpg 340w,https://st03.kakprosto.ru/tumb/550/images/article/2011/4/13/1_52552aab51a2c52552aab51a6a.jpg 550w,https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab51a2c52552aab51a6a.jpg 680w"" sizes=""(max-width: 414px) 340px, (max-width: 668px) 550px, 680px"">

5. Можете оформить картинку, чтобы при наведении курсора появлялась подсказка. Тег будет выглядеть так, как на иллюстрации.картинку в сообщение"" src="/"https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab52a2952552aab52a6d.jpg"" srcset=""https://st03.kakprosto.ru/tumb/340/images/article/2011/4/13/1_52552aab52a2952552aab52a6d.jpg 340w,https://st03.kakprosto.ru/tumb/550/images/article/2011/4/13/1_52552aab52a2952552aab52a6d.jpg 550w,https://st03.kakprosto.ru/tumb/680/images/article/2011/4/13/1_52552aab52a2952552aab52a6d.jpg 680w"" sizes=""(max-width: 414px) 340px, (max-width: 668px) 550px, 680px"">