четвъртък, 18 декември 2025 г.

 Изображенията в HTML се добавят чрез единичния маркер

 

<img src="име на файл или URL" alt="поясняващ текст" />

Където :

 

src(от source) - указва мястото, от което да се зареди изображението. Ако изображението е в същата папка, където се намира html страницата ви, като стойност на src се записва "името на изображението.разширение". Например - <img src="logo.png" alt="primer" />

 

Ако изображението е от друго място просто указвате целия път до него, но малко повечко за URL ще научите в 9 урок .

 

alt (от alternative) - пуказва алтернативен текст, който ще се извежда ако изображението липсва. Атрибута не е задължителен, но се препоръчва употребата му, защото има и браузери, които не пуказват изображения, а само текст.

 

Други атрибути, които може да вмъкнете в маркера <img src="" /> са:

 

title="стойност" - извежда съобщение, при задържане на курсора върху изображението.

 

border="стойност" - указва рамка на изображението (стойността започва от 0).

 

width="стойност" - указва широчината на изображението. Стойността може да бъде както в пиксели, така и в проценти от страницата.

 

height="стойност" - указва височината на изображението. Стойността може да бъде както в пиксели, така и в проценти от страницата.

Може да добавим повече свободно пространство около изображението ако използваме атрибутите hspace="стойност" и vspace="стойност" като стойността е някакво число в пиксели. За да ви стане по-ясно разгледайте схемата :


Задача: 

Да се напише HTML код за таблица с 3 реда и 3 колони, като във всяка клетка има по едно изображение с размери 3 на 5 см.


Примерен код:

<table border="1">
    <tr>
        <td>
            <img src="https://via.placeholder.com/300x180"
                 alt="Снимка 1"
                 width="5cm"
                 height="3cm">
        </td>
        <td>
            <img src="https://via.placeholder.com/300x180"
                 alt="Снимка 2"
                 width="5cm"
                 height="3cm">
        </td>
        <td>
            <img src="https://via.placeholder.com/300x180"
                 alt="Снимка 3"
                 width="5cm"
                 height="3cm">
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://via.placeholder.com/300x180"
                 alt="Снимка 4"
                 width="5cm"
                 height="3cm">
        </td>
        <td>
            <img src="https://via.placeholder.com/300x180"
                 alt="Снимка 5"
                 width="5cm"
                 height="3cm">
        </td>
        <td>
            <img src="https://via.placeholder.com/300x180"
                 alt="Снимка 6"
                 width="5cm"
                 height="3cm">
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://via.placeholder.com/300x180"
                 alt="Снимка 7"
                 width="5cm"
                 height="3cm">
        </td>
        <td>
            <img src="https://via.placeholder.com/300x180"
                 alt="Снимка 8"
                 width="5cm"
                 height="3cm">
        </td>
        <td>
            <img src="https://via.placeholder.com/300x180"
                 alt="Снимка 9"
                 width="5cm"
                 height="3cm">
        </td>
    </tr>
</table>