Նայեք ցանկացած վեբ էջին այսօր առցանց, եւ դուք կտեսնեք, որ դրանք կիսում են որոշակի բաներ: Այդ ընդհանուր հատկություններից մեկը պատկերներն են: Ճիշտ պատկերները շատ են ավելացնում կայքի ներկայացումը: Այս պատկերներից մի քանիսը, ինչպես ընկերության լոգոն, օգնում են բրենդը տեղադրել եւ միացնել այդ թվային կազմակերպությունը ձեր ֆիզիկական ընկերությանը:
Ձեր պատկերին պատկեր, պատկերակ կամ գրաֆիկա ավելացնելու համար հարկավոր է օգտագործել էջը HTML- ի կոդի մեջ: IMG- ի պիտակը տեղադրեք ձեր HTML- ում , որտեղ դուք ցանկանում եք գրաֆիկական ցուցադրել: Էջի կոդը ներկայացնելու վեբ զննարկիչը այս պիտակը փոխարինելու է համապատասխան գրաֆիկով, երբ էջը դիտարկվում է: Վերադառնալով մեր ընկերության լոգոն օրինակին, այստեղ է, թե ինչպես կարող եք ավելացնել այդ պատկերը ձեր կայքում:
Image հատկությունները
Ստուգելով վերեւում գտնվող HTML կոդը, կտեսնեք, որ տարրը ներառում է երկու հատկանիշ: Նրանցից յուրաքանչյուրը պահանջվում է պատկերով:
Առաջին հատկանիշն է «src»: Սա բավականին բառացիորեն պատկերի ֆայլ է, որը ցանկանում եք էջում ցուցադրել: Մեր օրինակում մենք օգտագործում ենք «logo.png» ֆայլը: Սա գրաֆիկական է, որ վեբ զննարկիչը կցուցադրի, երբ այն մատուցեց կայքը:
Դուք նաեւ նկատում եք, որ այս ֆայլի անունից առաջ ավելացրել ենք լրացուցիչ տեղեկություններ, «/ images /»: Սա ֆայլի ուղին է: Սկզբնաղբյուրի սլաքը պատմում է սերվերին նայելու գրացուցակի արմատին: Այնուհետեւ փնտրում է «պատկերներ» եւ վերջապես «logo.png» ֆայլը: Օգտագործելով «պատկեր» կոչվող թղթապանակը, կայքի գրաֆիկայի պահպանումը շատ տարածված պրակտիկա է, բայց ձեր ֆայլի ուղին կփոխվի այն ամենի համար, ինչ կարեւոր է ձեր կայքի համար:
Երկրորդ պահանջվող հատկանիշը «ստորին» տեքստն է: Սա «այլընտրանքային տեքստ» է, որը ցուցադրվում է, եթե պատկերն անհասանելի է որեւէ պատճառով: Այս տեքստը, որը մեր օրինակով կարդում է «Ընկերության լոգոն», կցուցադրվի, եթե պատկերը չի բեռնվում: Ինչու դա տեղի ունեցավ: Մի շարք պատճառներ.
- Պատճառը սխալ է
- Ֆայլի սխալ անուն կամ սխալ նշում
- Փոխանցման սխալ
- Ֆայլը ջնջվել է սերվերի կողմից
Սրանք ընդամենը մի քանի հնարավորություններ են, թե ինչու ենք մեր նշված պատկերը բացակայում: Այդ դեպքերում մեր փոխարեն կցուցադրենք մեր ենթատեքստը:
Alt տեքստը նաեւ օգտագործվում է էկրանի ընթերցող ծրագրակազմի կողմից `պատկերը կարդալու համար` այցելուին, որը տեսողության խանգարում է: Քանի որ նրանք չեն կարող տեսնել այնպիսի կերպարը, ինչպիսին մենք ենք անում, այս տեքստը թույլ է տալիս նրանց իմանալ, թե որն է պատկերը: Սա է պատճառը, որ ենթատեքստը պահանջվում է եւ ինչու պետք է հստակ լինի, թե ինչ է պատկերը:
Ստորեւ տեքստի ընդհանուր թյուրիմացությունն այն է, որ այն նախատեսված է որոնման նպատակով: Սա ճիշտ չէ. Մինչ Google- ը եւ այլ որոնման համակարգերը կարդում են այս տեքստը, որոշելու, թե ինչ պատկերն է (հիշեք, որ նրանք չեն կարող «տեսնել» ձեր պատկերը), չպետք է գրեք ստորին տեքստը միայն որոնման շարժիչներին դիմելու համար: Հեղինակ `հստակ ենթատեքստ տեքստ, որը նախատեսված է մարդկանց համար: Եթե դուք կարող եք նաեւ ավելացնել որոշակի բառեր, որոնք որոնման շարժիչներին կոչ են անում, դա լավ է, բայց միշտ պետք է համոզվեք, որ ենթատեքստը ծառայում է իր հիմնական նպատակին `նշելով, թե ով է պատկերն այն մարդը, ով չի կարող տեսնել գրաֆիկական ֆայլը:
Այլ հատկանիշներ
The IMG tag- ը ունի նաեւ երկու այլ հատկանիշներ, որոնք դուք կարող եք տեսնել օգտագործման ժամանակ, երբ ձեր վեբ էջում գրաֆիկական դրություն է դրվում, լայնությունը եւ բարձրությունը: Օրինակ, եթե դուք օգտագործում եք Dreamweaver- ի WYSIWYG խմբագիր, ապա այն ինքնաբերաբար ավելացնում է այս տեղեկությունը ձեզ համար: Ահա մի օրինակ.
The WIDTH եւ HEIGHT հատկանիշները զննարկիչին պատմում են պատկերի չափը: Հետո զննարկիչը գիտի, թե որքան տեղ է տեղադրվում դասավորությունը, եւ այն կարող է տեղափոխվել էջի հաջորդ տարրը, մինչ պատկերը ներբեռնում է: Խնդիրը, օգտագործելով այս տեղեկատվությունը ձեր HTML- ում, այն է, որ դուք միշտ չէ, որ ցանկանում եք, որ ձեր պատկերը տեղադրվի հենց այդ չափսով: Օրինակ, եթե ունեք պատասխանող կայք, որի չափսերը փոփոխվում են այցելուների էկրանին եւ սարքի չափսերով, դուք նաեւ կցանկանայիք, որ ձեր պատկերները լինեն ճկուն: Եթե ձեր HTML- ում նշեք, թե ինչ ֆիքսված չափսն է, ապա դա շատ դժվար կլինի գտնել CSS- ի պատասխանող հարցումների պատասխանների հետ : Այս պատճառով եւ պահպանել ոճի (CSS) եւ կառուցվածքի (HTML) առանձնացումը, խորհուրդ է տրվում, որ ձեր HTML կոդը չհավաքեք լայնություն եւ բարձրություն հատկանիշներ:
Մեկ նշում. Եթե դուք դուրս եք գալիս այդ չափագրման ցուցումից, եւ CSS- ի չափը չնշեք, զննարկիչը այնուհանդերձ ցույց կտա պատկերը իր նախնական, հարազատ չափերով:
Խմբագրված է Ջերեմի Գիրարդը