HayqSystem

HTML

HTML5 Աշխատանք պատկերների հետ

28 02 2024

HTML5 Աշխատանք պատկերների հետ ։ img տարրն օգտագործվում է HTML-ում պատկերները ցուցադրելու համար: Այս տարրը մեզ ներկայացնում է երկու կարևոր ատրիբուտ.

HTML5 Աշխատանք պատկերների հետ

1․ src. ճանապարհ դեպի պատկեր: Սա կարող է լինել հարաբերական կամ բացարձակ ուղի ֆայլային համակարգում կամ ինտերնետային հասցե

2․ alt: պատկերի տեքստային նկարագրություն: Եթե զննարկիչը ինչ-ինչ պատճառներով չի կարող ցուցադրել պատկերը (օրինակ, եթե src հատկանիշը սխալ ուղի ունի), ապա բրաուզերը ցուցադրում է այս տեքստային նկարագրությունը հենց պատկերի փոխարեն:

alt հատկանիշը նույնպես կարևոր է, քանի որ որոնիչները կարող են ինդեքսավորել պատկերը՝ հիմնվելով տեքստի նկարագրության վրա:

Օրինակ, եկեք որոշ պատկերային ֆայլ դնենք նույն թղթապանակում, որտեղ ունենք index.html ֆայլը: Եվ այնուհետև ցուցադրեք այն վեբ էջում.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project HTML5</title>
    </head>
    <body>
        <img src="test.png" alt="UI / UX" />
    </body>
</html>

Իմ դեպքում պատկերի ֆայլը կոչվում է test.png և այն գտնվում է նույն թղթապանակում, ինչ վեբ էջի index.html: Պետք է հաշվի առնել, որ img-ը դատարկ տարր է, այսինքն՝ փակող թեգ չի պարունակում։

Օգտագործման ոճային առանձնահատկությունները, դուք կարող եք համատեղել պատկերները տեքստի հետ.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project HTML5</title>
    </head>
    <body>
        <img src="test.png" alt="UI / UX" style="float:left; margin-right:10px;"/>
        <h1>Lorem Ipsum</h1>
        <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry....
    </body>
</html>