Как да вмъкнете снимка в HTML на уебсайта си

10.03.2020

Добавянето на изображения към уебсайта или профила ви в социалната мрежа е чудесен начин да украсите страницата си. HTML (Hypertext Markup Language) се отличава с голям брой функции за уеб разработки, а кодът, необходим за добавяне на изображения, е много прост.

как да вмъкнете картина в html

И така, как да вмъкнете картина в HTML?

Качете вашата снимка на безплатен сайт за хостинг на изображения, като например Photobucket или TinyPic, които осигуряват постоянен достъп до изтегления файл. След копиране на линка към изображението ще се появи директно на хостинг сайта. Въпреки това, ако плащате за първокласни услуги на такава услуга, е по-добре да използвате допълнителни функции. Това е по-надеждно, тъй като при свободен хостинг на изображения, изображенията понякога не се отварят поради претоварване. След като качите снимка в някоя от онлайн услугите, отворете нов документ на компютъра си в текстов редактор (например в Notepad) или отидете в панела за редактиране на желаната страница на вашия сайт (където можете да промените HTML кода).

html как да вмъкнете снимка

Писане на етикети

Продължавайки да говорим за това как да вмъкнете картина в HTML, започнете с IMG тага. След това трябва да добавите интервал и наклонена черта преди затварящия символ. По този начин трябва да наберете следната комбинация - <img />. Освен това има много атрибути, но само един от тях е абсолютно необходим. Това е адресът или URL адресът на изображението ви. Той се посочва по следния начин - <img src = "URL_ на изображението ви" />.

Алтернативен текст

След това се опитвате да вмъкнете картина в HTML, трябва да добавите атрибута Alt. Това определя алтернативен текст в случай, че изображението не се зареди. Този текст е предназначен и за потребители с увредено зрение, които използват екранни четци. Ако задържите курсора на мишката на изображението алтернативен текст ще се появи в подсказка, но тази функция е налична само в Internet Explorer. За да го видите в други приложения, ще ви трябват специални приставки. За да въведете такава подсказка, въведете я в допълнение към Alt. (По желание можете да пропуснете тази стъпка). Ако използвате тази функция, връзката ще изглежда така:

<img src = "URL_your_of_article" alt = "pop-up_text" "title =" Подсказка "/>

поставете изображение в html

Размери и параметри на картината

Продължавайки да следвате инструкциите за вмъкване на картина в HTML, можете допълнително да посочите размера на изображението, като използвате атрибутите за височина и ширина, указващи в пиксели или в проценти. Моля, обърнете внимание, че картината ще се покаже поради преоразмеряване при зареждане. Първоначално браузърът ще използва действителния размер на изображението. Поради тази причина, ако вашата снимка е твърде голяма, по-добре е да я промените. размер с помощ програми за редактиране на снимки и не само адреса на връзката. Сега вашият код може да изглежда по следния начин:

<img src = "URL адрес на изображението ви" alt = "texttip text" title = "Подсказка" height = "50%" width = "50%" />

<img src = "URL на изображението ви" alt = "текст на подсказка" title = "Подсказка" height = "25px" width = "50px" />

Други атрибути

Стойността на тези атрибути е или положителна стойност на пиксела, или процент с оригинала (1-100%). Като говорим за това как да вмъкнете картина в HTML, можете да отбележите, че тя може да бъде поставена навсякъде в уеб страница с атрибут за подравняване - отгоре, отдолу, среда, дясно, ляво и т.н. Атрибутът HSPACE се използва за вмъкване на изображения хоризонтално от лявата и дясната страна, VSPACE - за зареждане вертикално между горната и долната част на страницата и по отношение на друго съдържание. Ако говорим общо за HTML - как да вмъкнем снимка и как да добавим съдържание към страницата, най-важното е да не се прекаляваме. В противен случай вашият ресурс ще изглежда немарлив и твърде "колоритен". GIF ще бъде най-доброто решение за показване на лого или анимация, а JPEG е по-подходящ за висококачествени изображения и снимки.