Як вставити зображення в HTML: 6 кроків

Метод1З 1:

Вставити зображення в HTML

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

   • Якщо у вас є платний хостинговий аккаунт, закачайте зображення туди. Це надійніше безкоштовного сайту.
2. 
   Відкрийте новий документ в текстовому редакторі (наприклад, в Notepad), або сторінку на сайті, або профіль, де можна змінювати HTML.
3. 
   Почніть з тегуimg . тег img Одиночний, тобто йому не потрібен закриває тег, хоча, щоб домогтися відповідності стандартам XHTML, можна додати пробіл і слеш.

   • &#lt;img /&#gt;
4. 
   Є багато доступних елементів, але абсолютно необхідний тільки:src. Він вказує на місцезнаходження або URL-адресу зображення.

   • &#lt; img src=" URL зображення " /&#gt;
5. 
   Далі треба додати елементalt. він відповідає за текст, який буде показаний, якщо зображення з якихось причин не завантажиться. Цей текст також можуть використовувати сліпі користувачі, які використовують програми для читання екрану.

   • Якщо навести курсор на зображення, то запасний текст буде показаний в поясненні дії, але тільки в Internet Explorer. Кросбраузерное рішення ( працює в Firefoxі ін.) - використовувати елемент title на додаток доalt . Не робіть це, якщо не хочете пояснити дії.
   • Наприклад: &#lt;img src= "URL зображення" alt= "про всяк випадок" title= "пояснення дії"/ &#gt;
6. 
   Тепер елементамиheight і width можна задати розміри зображення, а також вказати пікселі або відсотки.зауважте, змінивши таким чином розмір, ви зміните розмір показуваного зображення, браузер все одно буде завантажувати вихідний розмір зображення. Якщо ваше зображення занадто велике, то змініть його розмір в програмі-редакторі зображень, підійде PicResize.com

   • &#lt; img src= "URL зображення" alt= "про всяк випадок" title= "пояснення дії" height= "50%" width= "50%" / &#gt;
   • &#lt; img src=" URL of image"alt=" про всяк випадок"title=" пояснення дії"height=" 25px "width=" 50px " / &#gt;