IMG IMG- ի նկարների եւ օբյեկտների օգտագործումը
HTML- ի HTML- ի պիտակը կառավարում է վեբ էջում պատկերների եւ այլ ստատիկ գրաֆիկական օբյեկտների տեղադրումը: Այս ընդհանուր տեքստը աջակցում է մի քանի պարտադիր եւ լրացուցիչ հատկանիշներ, որոնք հարստացնում են գրավիչ, պատկերակիր ուղղված կայք մշակելու ունակությանը:
HTML ձեւաչափի ամբողջական ձեւի օրինակն այսպիսին է.
Պահանջվող IMG Tag հատկությունները
ՊԵԿ-ը: Վեբ էջում ցուցադրելու համար անհրաժեշտ է ստանալ միակ հատկանիշը, SRC հատկանիշն է: Այս հատկանիշը նույնականացնում է ցուցադրվող պատկերը ֆայլի անունը եւ վայրը:
ALT. Գրավոր XHTML եւ HTML4 գրելու համար անհրաժեշտ է նաեւ ALT հատկանիշը: Այս հատկանիշն օգտագործվում է ոչ պատկերային բրաուզերների համար, որոնք նկարագրում են տեքստը: Բրաուզերները այլընտրանքային տեքստը ցուցադրում են տարբեր ձեւերով: Ոմանք այն ցուցադրում են որպես թռուցիկ, երբ դուք մկնիկը դրոշի վրա եք դնում, մյուսները ցուցադրում են այն հատկություններով, երբ դուք պատկերն եք սեղմում, իսկ ոմանք այն չեն ցուցադրում:
Օգտագործեք ենթագրերի տեքստը , լրացուցիչ մանրամասներ նկարագրելու համար, որոնք համապատասխան կամ կարեւոր չեն վեբ էջի տեքստում: Բայց հիշեք, որ էկրանին ընթերցողներին եւ այլ տեքստի միայն բրաուզերների համար տեքստը կարդացվելու է էջում մնացած տեքստի հետ: Խառնաշփոթությունից խուսափելու համար օգտագործեք նկարագրող ենթատեքստ տեքստը (օրինակ, «Վեբ դիզայնի եւ HTML- ի մասին», պարզապես «լոգոն»):
HTML5- ում ALT հատկանիշը միշտ չէ, որ պահանջվում է, քանի որ կարող եք օգտագործել վերնագիր, դրա նկարագրությունը ավելացնելու համար: Կարող եք նաեւ օգտագործել ARIA- DESCRIBEDBY հատկանիշը, որը ցույց է տալիս ID- ն, որը պարունակում է ամբողջական նկարագրություն:
Անտառային տեքստը նույնպես չի պահանջվում, եթե պատկերը զուտ դեկորատիվ է, օրինակ `գրաֆիկական վեբ էջի կամ պատկերիկների վերեւում: Բայց եթե վստահ չեք, ներգրավեք ստորին տեքստը միայն դեպքում:
Առաջարկվող IMG նկարագրությունները
ԾԱՆՈԹՈՒԹՅՈՒՆ եւ բարձրություն : Դուք պետք է մուտք գործեք սովորություն, օգտագործելով WIDTH եւ HEIGHT հատկանիշները: Եվ դուք միշտ պետք է օգտագործեք իրական չափը եւ ձեր նկարները չափափոխեք զննարկիչով:
Այս ատրիբուտները արագացնում են էջի մատուցումը, քանի որ զննարկիչը կարող է տարածքի տեղադրումը տեղավորել պատկերում, այնուհետեւ շարունակել ներբեռնման մնացած բովանդակությունը, այլ ոչ թե սպասել ամբողջ պատկերը ներբեռնելու համար:
Այլ Օգտակար IMG հատկանիշներ
TITLE : Նկարը համաշխարհային հատկանիշ է, որը կարող է կիրառվել ցանկացած HTML տարրի նկատմամբ : Ավելին, TITLE- ի հատկանիշը թույլ է տալիս լրացուցիչ տեղեկություններ ավելացնել պատկերը:
Բրաուզերի մեծ մասը աջակցում է TITLE հատկանիշին, սակայն դրանք տարբեր ձեւերով: Ոմանք տեքստը ցուցադրում են որպես թռուցիկ, մինչդեռ մյուսները ցուցադրում են այն տեղեկատվական էկրաններում, երբ օգտագործողը պատկերի վրա աջ կտտացնում է: Դուք կարող եք օգտագործել TITLE- ի հատկանիշը պատկերի մասին լրացուցիչ տեղեկություններ գրելու համար, սակայն հաշվի չառնել այս տեղեկատվությունը թաքնված կամ տեսանելի: Դուք պետք է անպայմանորեն չօգտագործեք այն, որոնման շարժիչների համար հիմնաբառեր թաքցնելու համար: Այս պրակտիկան այժմ տուգանում է որոնման շարժիչների մեծամասնության կողմից:
USEMAP եւ ISMAP : Այս երկու հատկանիշները սահմանում են հաճախորդի կողմը () եւ սերվերի կողմը (ISMAP) պատկերը քարտեզները ձեր պատկերների համար:
LONGDESC- ը : Նկարը աջակցում է URL- ների պատկերը ավելի երկար նկարագրությանը: Այս հատկությունը ձեր պատկերներն ավելի մատչելի դարձնում է:
Ստորագրված եւ ապօրինի IMG հատկանիշները
Մի քանի ատրիբուտներ այժմ հնացած են HTML5- ում, կամ հին HTML4- ով: Լավագույն HTML- ի համար դուք պետք է գտնեք այլ լուծումներ այնպիսի հատկանիշների օգտագործման փոխարեն:
ՍԱՀՄԱՆԻ . Նկարը սահմանում է պատկերի շուրջ ցանկացած սահմանի պիքսելների լայնությունը: HTML4- ում CSS- ն հօգուտ հին է եւ հնացած է HTML5- ում:
ԱԼԻԳ . Այս հատկանիշը թույլ է տալիս տեղադրել նկարը տեքստի ներսում եւ դրա շուրջ տեքստի հոսքը: Պատկերը կարող եք աջ կամ ձախ ուղղել: Այն հերքվել է HTML4- ի CSS- ի գունային գույքի օգտին եւ հնացած է HTML5- ում:
HSPACE եւ VSPACE : The HSPACE- ը եւ VSPACE հատկանիշները հստակ տարածում են հորիզոնական (HSPACE) եւ ուղղահայաց (VSPACE): Սպիտակ տարածքը կցուցադրվի գրաֆիկայի երկու կողմերում (վերեւի եւ ներքեւի կամ ձախից եւ աջից), այնպես որ, եթե դուք միայն պետք է մի տարածք, ապա պետք է օգտագործել CSS- ը: Այս ատրիբուտները հենվել են HTML4- ի շահերից, CSS- ի շուկայական արժեքի օգտին, եւ դրանք հնացած են HTML5-ում:
LOWSRC- ը : LOWSRC հատկանիշը այլընտրանքային պատկեր է ապահովում, երբ ձեր պատկերը աղբյուրը այնքան մեծ է, որ այն չափազանց դանդաղ է ներբեռնում: Օրինակ, դուք կարող եք ունենալ 500KB պատկեր, որը ցանկանում եք ցուցադրել ձեր վեբ էջում, սակայն 500KB- ը երկար ժամանակ կպահանջի ներբեռնելու համար: Այսպիսով, դուք ստեղծում եք պատկերը ավելի փոքր կրկնօրինակ, գուցե սեւ եւ սպիտակ, կամ պարզապես չափազանց օպտիմիզացված եւ դրեք այն LOWSRC հատկանիշում: Փոքր պատկերը կթողարկվի եւ ցուցադրվի նախ, իսկ հետո, երբ ավելի մեծ պատկերը երեւում է, այն կփոխարինվի ցածր աղբյուրից:
The LOWSRC հատկանիշը ավելացվել է Netscape Navigator 2.0- ին, IMG tag- ին: Այն DOM մակարդակի 1 մաս էր, սակայն այնուհետեւ հեռացվել է DOM մակարդակի 2-ից: Browser support- ը սցենար է այս հատկանիշի համար, թեեւ շատ կայքեր պնդում են, որ այն աջակցում է բոլոր ժամանակակից բրաուզերների կողմից: HTML4-ում չհրապարակված չէ կամ հնացած է HTML5-ում, քանի որ այն երբեք չի եղել որեւէ մասնագրության պաշտոնական մաս:
Խուսափեք օգտագործել այս հատկանիշը եւ փոխարենը ձեր նկարները օպտիմալացնել, որպեսզի արագորեն բեռնեն: Բեռնումների արագությունը լավ վեբ դիզայնի կարեւոր բաղադրիչ է, եւ խոշոր պատկերները դանդաղ էջերը չափազանց ցածր են, նույնիսկ եթե օգտագործեք LOWSRC հատկանիշը: