Այս մարդու մասին հայտնի է միայն
որ նա բանտում չի եղել, բայց ինչու բանտում չի եղել՝ հայտնի չէ։
Մարկ Տվեն.

Սա դաս է ինչպես տեղադրել նկար HTML-ում, ինչպես ձևավորել այն, ինչպես տեքստը փաթաթել նկարի շուրջ և այլն: Ի վերջո, հայտնի է, որ պատկերները դարձնում են կայքը ավելի գրավիչ և տարբերվում այլ ռեսուրսներից, ուստի թեգը և դրա ատրիբուտները օգտագործելու հնարավորությունը շատ օգտակար է ժամանակակից ինտերնետում: Բայց այստեղ գլխավորը չափի զգացումն է։

Գրաֆիկայի ավելցուկը կծանրացնի HTML էջը և, համապատասխանաբար, կմեծացնի դրա բեռնման ժամանակը: Բացի այդ, մեծ թվով պատկերների առկայությունը այցելուներին կշեղի կայքի հիմնական բովանդակությունից (եթե, իհարկե, գրաֆիկան չի հանդիսանում կայքի հիմնական բովանդակությունը): Այնպես որ, չափավոր պահեք այն և օգտագործեք միայն այնտեղ, որտեղ անհրաժեշտ է։ Եվ դուք երջանիկ կլինեք:

Դասում ես արդեն խոսեցի այն մասին, թե ինչպես կարելի է նկարները օգտագործել որպես HTML փաստաթղթի ֆոն: Հիմա եկեք խոսենք այն մասին, թե ինչպես են գրաֆիկները օգտագործվում html էջի «վերին շերտում»:

§ 1. Ինչպես տեղադրել նկար

Պատկերները HTML-ում տեղադրելու համար օգտագործեք պիտակը IMGՀետ պարտադիրհատկանիշ ՊԵԿ. Այս հատկանիշը զննարկիչին հայտնում է պատկերի ֆայլի ուղին: Նրանք. նկար տեղադրելու համար logo.jpg անունովդեպի էջի որոշակի տեղ (պայմանով, որ և՛ էջը, և՛ նկարը գտնվում են մեկ թղթապանակում(տեղեկատու)) այս տեղում պետք է տեղադրեք հետևյալ html կոդը.

src="logo.jpg">

Եթե ​​նկարը և էջը գտնվում են տարբերդիրեկտորիաներ (թղթապանակներ), ապա դուք պետք է նշեք պատկերի ուղին համեմատաբարէջեր։ Օրինակ, եթե html էջը գտնվում է գրացուցակի (թղթապանակի) կայքում, ապա նույն գրացուցակում (թղթապանակում) կա պատկերների ենթացանց (թղթապանակ), որում գտնվում է մեր պատկերը logo.jpg, ապա այն տեղադրելու համար անհրաժեշտ է. գրել այսպես.

images/logo.jpg">

Կամ պետք չէ անհանգստանալ և նշել նկարի ամբողջական հասցեն. Օրինակ, այսպես.

http://www..png">

Վերջին դեպքում զննարկիչը կցուցադրի կոդը այսպես.

Նշում. Եթե ​​նկարը գտնվում է ձեր համակարգչում, բայց դուք ուզում եք տեղադրել այն դեպի ինտերնետ էջ, ապա դրանից ոչինչ չի ստացվի։ Դա անելու համար նախ պետք է պատկերը տեղափոխել ինչ-որ տեղ ինտերնետում(Օրինակ, ). Իսկ էջի կոդի մեջ նշեք ամբողջական հասցեն մինչև այս կետը նկարով.

Պահանջվող հատկանիշից բացի ՊԵԿպիտակի վրա IMGԿան ևս մի քանի ընտրովի հատկանիշներ: Եկեք մանրամասն նայենք դրանց:

§ 2. Նկարի չափի նշում

Սկսենք այն ատրիբուտներից, որոնք թույլ են տալիս սահմանել նկարի չափսերը(ավելի ճիշտ՝ էջերում տեղ հատկացրեք այս չափսերի համար): Այստեղ են:

• լայնությունը- պատկերի լայնությունը պիքսելներով կամ տոկոսով;


• բարձրությունը- պատկերի բարձրությունը պիքսելներով կամ տոկոսով:

Եթե ​​այս ատրիբուտներն օգտագործվեն, այն նախ տեղ կհատկացնի գրաֆիկայի համար, կպատրաստի փաստաթղթի դասավորությունը, կցուցադրի տեքստը և միայն այնուհետև կբեռնվի պատկերը: Միևնույն ժամանակ, այն կտեղադրի պատկերը ընտրված չափի ուղղանկյունի մեջ, նույնիսկ եթե պատկերի իրական լայնությունը և բարձրությունը ավելի մեծ են (սեղմում) կամ ավելի փոքր (ձգում): Այն դեպքում, երբ այս հատկանիշները չեն օգտագործվում, զննարկիչը անմիջապես կբեռնի պատկերը, և տեքստի և դրան հաջորդող այլ տարրերի ցուցադրումը կհետաձգվի:

Պատկերների լայնությունը և բարձրությունը կարող են սահմանվել ինչպես պիքսելներով (պատկերի չափը հաստատուն կլինի՝ անկախ էկրանի լուծաչափից), այնպես էլ տոկոսով (պատկերի չափը կախված կլինի օգտագործողի էկրանի լուծաչափից): Օրինակ:

width="50" height="20">

width="10%" height="5%">

§ 3. Այլընտրանքային տեքստ

Եթե ​​օգտատերը անջատել է պատկերների ցուցադրումը բրաուզերի կարգավորումներում, ապա նկարի փոխարեն կարող է ցուցադրվել այլընտրանքային տեքստ, որը կբացատրի, թե ինչպիսի գրաֆիկա պետք է լինի այնտեղ։ Սա ձեռք է բերվում հատկանիշի օգտագործմամբ ALT:

Այս դեպքում զննարկիչը էջի վրա տեղ կպահի պատկերի համար, բայց հենց պատկերի փոխարեն ցույց կտա այն տեքստը, որը դուք գրում եք հատկանիշի արժեքով։ ALT:

Կրկնում եմ, դա տեղի կունենա, եթե օգտագործողը անջատել է գրաֆիկայի ցուցադրումը: Եթե ​​ոչ, պատկերը կթաքցնի այլընտրանքային տեքստը:

§ 4. Նկարի հավասարեցում

Օգտագործելով հատկանիշ, որը դուք արդեն գիտեք շարելԴուք կարող եք վերահսկել նկարների դասավորվածությունը html էջի այլ տարրերի համեմատ: At հատկանիշով շարելԿան մի քանի իմաստներ, բայց մեզ այս պահին ամենաշատը հետաքրքրում է երկուսը.

• ձախ- պատկերը գտնվում է էջի ձախ եզրին, իսկ տեքստը հոսում է աջ կողմում գտնվող պատկերի շուրջը.


• ճիշտ- պատկերը գտնվում է էջի աջ եզրին, իսկ ձախ կողմում պատկերի շուրջը հոսում են տեքստը և այլ տարրեր:

Օրինակ՝ HTML կոդը

զննարկիչը ցույց կտա այսպես

Եվ այս HTML կոդը.

կունենա հետևյալ տեսքը.

Պատկերի շուրջ տեքստի փաթաթումը դադարեցնելու համար կարող եք օգտագործել պիտակը BR(մեզ ծանոթ նախորդ բաժնի մասին): Պիտակի վրա BRհատկանիշ կա պարզ, որը կարող է վերցնել երեք արժեք.

• ձախ- դադարեցնել տեքստի փաթաթումը ձախ կողմում գտնվող պատկերների շուրջ;


• ճիշտ- դադարեցնել տեքստի փաթաթումը աջ հարթեցված պատկերների շուրջ;


• բոլորը- դադարեցնել տեքստի փաթաթումը ձախ և աջ պատկերների շուրջ:

HTML պիտակ, որը պատասխանատու է պատկերը ցուցադրելու համար

• HTML պատկերԿարող է լինել ցանկացած պատկեր PNG, JPEG և GIF ձևաչափերով:
• HTML կոդը պատկերի համարսահմանված պիտակով .
• HTML պատկերկարող է լինել վեբ էջի ֆոն:
• HTML պատկերկարող է սահմանվել որպես հիպերհղում:

D\My_first_site\ թղթապանակում կամ ցանկացած այլ թղթապանակում, որտեղ դուք ունեք index.html ֆայլը, տեղադրեք պատկեր ընդլայնմամբ, ասենք, .jpg, անվանեք այն, ինչ ցանկանում եք, օրինակ, xxx:

Պատկերի տեղադրում էջի HTML կոդի մեջ:

Նշել - չզույգված: Ուշադրություն դարձրեք, թե ինչպես է այն փակվում:

Հատկանիշներ և արժեքներ

• - պարտադիր է, այն ցույց է տալիս պատկերի աղբյուրը:
• alt="" - սահմանում է այլընտրանքային տեքստ, մեկնաբանություն, որը կարդում է որոնման ռոբոտը վեբ էջի բովանդակությունը վերլուծելիս: Այն նաև պետք է նշանակվի:
• width="" - նշում է պատկերի լայնությունը պիքսելներով:
• height="" - նշում է պատկերի բարձրությունը պիքսելներով:

Նշեք իրական չափերը. այս կերպ դուք կպահպանեք բնօրինակ պատկերի որակը:

Վեբ մշակման համար կիրառելի են երեք ձևաչափերի պատկերներ՝ PNG (.png), JPEG (.jpg) և GIF (.gif): Adobe Photoshop-ը մասնագիտացված գործիք է կայքերի համար գրաֆիկա ստեղծելու համար: Այն կարող է օգտագործվել պատկերի մեկ ձևաչափը մյուսին փոխակերպելու համար:

HTML պատկեր | Հորիզոնական և ուղղահայաց եզրեր

կամ միջև հորիզոնական և ուղղահայաց հեռավորությունը պատկեր և տեքստ

Արդյունք:

Հատկանիշներ և արժեքներ

• hspace="" - սահմանում է հորիզոնական հեռավորություն պատկերի և տեքստի միջև.
• vspace="" - սահմանում է ուղղահայաց հեռավորություն պատկերի և տեքստի միջև.

HTML ֆոնային պատկեր

կամ պատկերով սահմանված էջի ֆոն

Մենք ունենք հետևյալ պատկերը.

Եկեք գրենք կոդը առանձին էջի համար.

Ֆոնային և ֆոնային պատկերի ատրիբուտները քննարկվում են .

Պատկերի տեղադրումև դրա կարգը → ../images/primer-img.jpg → տե՛ս.

HTML պատկեր - հղում

Օրինակ կոդը:

border="0" - չեղարկում է գրաֆիկական հղման եզրագիծը:

կամ պատկերները կենտրոնացնելու բոլոր հնարավոր ուղիները

Օրինակ կոդը:

Ինչի՞ վրա է պետք այստեղ ուշադրություն դարձնել: → Նախ, այն փաստը, որ չափերը նշված են, սա արագացնում է պատկերի բեռնումը: Երկրորդ, նշված են alt="" ատրիբուտները, ինչը նույնպես շատ ցանկալի է անել, նույնիսկ եթե այլընտրանքային տեքստ չկա: Առաջին դեպքում որոշվել է կենտրոնացումը HTMLպարամետր, իսկ երկրորդում `օգտագործելով կասկադային ոճի թերթիկների գծային ընդգրկումը:

Վիզուալ մասը կայքերի հետ աշխատելիս ամենակարեւոր կողմերից մեկն է։ Այն, իհարկե, զիջում է ֆունկցիոնալությամբ, բայց չի կարելի ժամանակից շուտ զեղչել այն։ Այսօր մենք կխոսենք այն մասին, թե ինչպես տեղադրել HTML պատկեր ձեր կայքում: Սրա միայն մեկ հնարավորություն կա՞, թե՞ մի քանիսը: Ինչպե՞ս կարող եմ HTML պատկեր տեղադրել իմ կայքում, որպեսզի մյուս օգտվողները կարողանան տեսնել այն: Ի՞նչն է ավելի լավ օգտագործել այս նպատակով՝ սերվերի՞, թե՞ համակարգիչ: Ի՞նչ է HTML-ը: Այս հապավումը կարելի է վերծանել հետևյալ կերպ՝ հիպերտեքստային փաստաթղթի նշագրման լեզու։

Օգտագործելով այս լեզուն՝ ձևավորվում է ապագա կայքի հիմքը։ Այստեղ մշակված է նաև կայքի բոլոր հիմնական տարրերի տեղադրումը։ Այնուհետև այստեղ կազմաձևվում են php ֆայլերը, որոնք պատասխանատու են տվյալների փոխանցման և կասկադային ոճերի թերթիկների համար: Ցանկացած վեբ էջի հիմքը HTML-ն է: Դուք կարող եք նաև կատարել պատկերների ճշգրտումներ՝ օգտագործելով այս լեզուն: Դուք կարող եք այս գործողությունը կատարել այլ եղանակներով, բայց եթե ձեզ անհրաժեշտ է ապահովել որոշ պարզ օբյեկտի նախնական բեռնումը, ավելի լավ է օգտագործել այն: Եկեք սկսենք ուսումնասիրել HTML պատկերի տեղադրման հետ կապված խնդիրը:

Ինչպե՞ս օգտագործել img պիտակը:

Անցնենք գրաֆիկայի օգտագործման խնդրին։ Ինչպե՞ս կարող եք պատկեր տեղադրել HTML փաստաթղթում: Առաջին հերթին, այս գործողությունը նշանակում է ֆայլի տեղադրում որպես առանձին էջի օբյեկտ: Այս հավելման համար օգտագործվում է img պիտակը: Այս պիտակը վերաբերում է ներդիր տարրերին, որոնք պարունակում են փոխարինելի բովանդակություն: Այն ներառում է հիպերտեքստի նշագրման լեզվի միայն չորս մաս: Դրանցից մեկը՝ src, բարձրություն, լայնություն։ Դրանց մասին կխոսենք հետագա։ Մյուս մասերն են՝ օբյեկտ, ներդիր, iframe: Պիտակն աշխատում է այնպես, կարծես ներկառուցված տարր ունի: Տարբերությունն այն է, որ արտաքին արտաքին բովանդակությունն օգտագործվում և ցուցադրվում է: Այս դեպքում պետք է լինի երրորդ կողմի ֆայլ, որը կբեռնվի: Եթե ​​հարցեր ունեք HTML-ում ֆոնային պատկերը վերականգնելու վերաբերյալ, ավելի լավ է դրանք անմիջապես մերժել: Այն կցուցադրվի միայն այն ժամանակ, երբ աշխատում է համակարգիչը, որի վրա գտնվում է պատկերը:

Օգտագործելով src հատկանիշը

Մենք աշխատում ենք գրաֆիկական պատկեր HTML փաստաթղթում տեղադրելու հարցի վրա։ Բեռնվող նկարի ուղին նշելու համար օգտագործեք src: Ընդհանուր սխեման հետևյալն է՝ պետք է օգտագործել այս հատկանիշը՝ հավասարության նշանը և մուտքագրել հասցեն։ Երբ զննարկիչը հասնի պիտակին HTML-ը վերլուծելիս, այն կստեղծի մի տարածք, որտեղ կցուցադրվի ներկառուցված տարրը: Արտաքին ֆայլը հետագայում կբեռնվի դրա մեջ: Այս ուղին չպետք է պարունակի սխալներ, քանի որ հենց այստեղ է գնալու ծրագիրը: Եթե ​​այս ծրագիրը չի գտնում ֆայլը, կցուցադրվի սխալի պատկերակ, որն այնքան էլ էսթետիկորեն հաճելի տեսք չունի:
HTML փաստաթղթի աղյուսակում պատկերը տեղադրելու համար անհրաժեշտ է անհրաժեշտ բջիջում գրել բոլոր անհրաժեշտ կոդը:

Պատկերի կարգավորումներ

Այժմ դուք գիտեք, թե ինչպես տեղադրել պատկերը HTML-ում: Եկեք պարզենք, թե ինչպես կարելի է այն կարգավորել: Երբ ֆայլը սկսի ներբեռնվել օգտատիրոջ համակարգչում, պատկերի չափն ինքնաբերաբար կորոշվի: Եթե ​​ֆայլի սկզբնական պարամետրերը չեն համապատասխանում ցանկալիին, ապա լայնության և բարձրության պարամետրերը, որոնք նշված են պիքսելներով, կարող են օգնել այս դեպքում։ Կոդն այս դեպքում կգրվի հետևյալ կերպ՝ src, ապա ֆայլի հասցեն։ Նմանատիպ հրահանգը նաև սահմանում է լայնությունը և սահմանում է այն լայնությունը, որը պետք է լինի: Վերջին պարամետրը բարձրությունն ու բարձրությունն է: Բավականին հաճախ վեբ վարպետները թույլ են տալիս հետևյալ սխալը՝ սերվեր են վերբեռնում մեկ մեծ ֆայլ, որի չափը հասնում է մի քանի ՄԲ-ի։ Այնուհետև գրվում է ուղին, և պատկերը հարմարեցվում է ցանկալի չափի: Այսպիսով, օգտվողը կարող է տեսնել, թե ինչպես է փոքր պատկերը բեռնվում շատ դանդաղ: Արտաքինից այն այնքան էլ գրավիչ չի թվում։

Աշխատանքի վերաբերյալ առաջարկություններ

Ձեր աշխատանքում բացասական կողմերից խուսափելու համար փորձեք նախօրոք նվազեցնել պատկերի չափը։ Իհարկե, եթե դուք բացարձակապես վստահ չեք, թե ինչ պարամետրեր պետք է օգտագործեք գրավիչ տեսք ունենալու համար, ապա կարող եք պարզապես պատճենել և փորձել փորձարկել դրա հետ: Դուք նաև պետք է չափազանց զգույշ լինեք պատկերի քաշը օպտիմալացնելիս: Անհրաժեշտ է նվազեցնել գրաֆիկական ֆայլերի քաշը՝ առանց որակի կորստի՝ ֆայլերը փոխակերպելով այլ ընդլայնումների, օգտագործելով հատուկ ծրագրեր և առցանց ծառայություններ։ Սա կգնահատի ոչ միայն կայքի օգտատերերը, այլ նաև վեբ վարպետը: Նման ֆայլերը ավելի քիչ տեղ կզբաղեցնեն ձեր հոսթինգում և ավելի արագ կբեռնվեն:

Ձայնագրման հնարավորությունների օրինակ

Եկեք քննարկենք, թե ինչպես կարող եք նշել նկարի ուղին:

1. Սահմանեք միայն ֆայլի անունը;
2. Նշեք պատկերի հասցեն, որը գտնվում է տեղական համակարգչի (սերվերի) վրա;
3. Մանրամասն ճանապարհ դեպի ֆայլի գտնվելու վայրը, որը գտնվում է մեկ այլ հոսթի վրա:

Եթե ​​դուք օգտագործում եք օրինակ առաջին կետից, ապա պատկերը պետք է լինի նույն գրացուցակում: Երկրորդ դեպքում, գտնվելու վայրը ընթացիկ էջի համեմատ ենթաթղթապանակ է: Երրորդ օրինակը սահմանում է բացարձակ ճանապարհը, որտեղ կարելի է գտնել որոնված պատկերը: Վերջին դեպքում արժե ուշադրություն դարձնել հետևյալ կետին՝ պատկերը կարող է լինել ցանկացած սերվերի վրա, եթե նման օգտագործումը արգելված չէ htaccess ֆայլում, բայց եթե այն ջնջվի այնտեղից, պատկերը կվերանա ձեր կայքում։ HTML լեզվի առանձնահատկությունն այն է, որ պահանջվում է միայն նշագրման փաստաթուղթ։ Բոլոր մյուս բաղադրիչները կարելի է ներբեռնել երրորդ կողմի սերվերներից: Այս մեթոդները հաճախ օգտագործվում են ներբեռնման արագությունը բարձրացնելու համար: Այստեղ դուք պետք է իմանաք, թե ինչպես օգտագործել այս գործիքը:

Alt-ի և վերնագրի նպատակը

Ի՞նչ պետք է անեմ, եթե ինչ-ինչ պատճառներով գրաֆիկական ֆայլը չի ​​բեռնվում HTML փաստաթղթով: Եթե ​​այն սխալ է գրված, դուք պետք է օգտագործեք alt հատկանիշը: Այս հատկանիշը կատարում է նկարի այլընտրանքային ներկայացման խնդիրը: Ենթադրենք, որ գրաֆիկան չի բեռնվում, բայց բրաուզերը դեռ կստեղծի տարածք նկարի համար: Սա անհրաժեշտ է նաև այն դեպքերում, երբ օգտատերը սպասում է բեռնմանը, և անհրաժեշտ է ցույց տալ նրան, որ ծրագիրը պատրաստվում է ընդունել գրաֆիկա: Ուղեկցող տեքստը ցուցադրելու համար դուք պետք է օգտագործեք վերնագրի հատկանիշը: Այն, ըստ էության, պարզապես գործիքի հուշում է և կարող է օգտագործվել գրեթե ցանկացած տեսանելի HTML տարրի վրա: Սա լավ բան է, քանի որ օգնում է հստակեցնել որոշ կոնկրետ ասպեկտներ: Այս ենթավերնագրում տրված երկու ատրիբուտների օգտագործումը հետևյալն է. բարձրությունից հետո սկզբում քննարկված օրինակին սկզբում ավելացվում է alt-ը, այնուհետև վերնագիրը: Այս հատկանիշները կարող են ծառայել ոչ միայն այցելուի հարմարավետությունն ապահովելու համար: Դրանք կարող են նաև դրական ազդեցություն ունենալ կայքի առաջխաղացման վրա: Այդ իսկ պատճառով դրանցում պետք է անընդհատ օգտագործել հիմնաբառեր։ Սա կբարելավի ռեսուրսի վարկանիշը որոնման համակարգի պատկերների ծառայություններում և վեբ կայքի վարկանիշներում: Այնուամենայնիվ, ամեն ինչում անհրաժեշտ է հավատարիմ մնալ ռացիոնալությանը և զգուշությանը:

Նկարների հավասարեցում

align հատկանիշը ներդրվել է նշագրման լեզվի բոլոր չորս տարրերի համար, որոնք նշված էին ավելի վաղ: Օգտագործելով այս հատկանիշը, դուք հեշտությամբ կարող եք փոխել նկարի գտնվելու վայրը: Այն լռելյայնորեն հավասարեցված է ներքևին: դրա համար պատասխանատու է ներքևը: Ինչպե՞ս կատարել վերևի հավասարեցում: Դա անելու համար հարկավոր է օգտագործել գագաթը: Գործնականում այն ​​կունենա այսպիսի տեսք՝ src հատկանիշից հետո, որտեղ օգտատերը նշում է պատկերի հասցեն, ավելացվում է align հատկանիշը և դրա արժեքը։ Այն տողում, որում գտնվում է նկարը, այն կհավասարեցվի վերին եզրին: Ինչպե՞ս կենտրոնացնել պատկերը HTML-ում: Պատկերը հավասարեցնելու մեկ այլ տարբերակ կա՝ միջին։ Այս ֆունկցիայի օգտագործումը սկզբունքորեն ոչինչ չի փոխի:

Այս կոդը օգտագործելիս պատկերը կհավասարեցվի մեջտեղում: Դուք կարող եք այնպես անել, որ տեքստը հոսվի նկարի շուրջ: Դրա համար օգտագործվում են ձախ և աջ ատրիբուտները: Նման դեպքերում պատկերը դառնում է լողացող։ Shift ձախ տեսքը նույնն է, ինչ մյուս ուղղագրությունները: Ճիշտ հատկանիշի օգտագործումը բերում է նմանատիպ արդյունք, բայց մեկ տարբերությամբ՝ պատկերը կտեղադրվի աջ կողմում: Այս կառույցների օգտագործումն ունի իր առանձնահատկությունները. Օրինակ, կարևոր խնդիրներից մեկը տեքստի պատկերին շատ մոտ լինելն է։ Արդյունքում ստեղծվում է այսպես կոչված կպչուն էֆեկտ, որը շատ տհաճ է աչքերի համար։ Սա կարելի է ուղղել՝ օգտագործելով HTML կոդը կամ Կասկադային ոճի թերթիկը: Նման փոփոխությունների համար դուք պետք է օգտագործեք hspace և vspace ատրիբուտները: Առաջինը սահմանում է լուսանցքները աջից և ձախից, իսկ երկրորդը սահմանում է լուսանցքները ներքևի և վերևի վրա:

Ինչպես սահմանել ֆոն

Պատկերը HTML կայքի էջում տեղադրելու ժամանակ ֆոնային հատկանիշը շատ օգտակար է: Այս հատկանիշը մարմնի տարրի մի մասն է: Նպատակը գրաֆիկական ֆայլի ուղին սահմանելն է, որը պետք է լրացնի առանձին բջիջ, աղյուսակ կամ էջ: Այս օբյեկտի օգտագործումը գործնականում այսպիսի տեսք ունի՝ օգտագործված պատկերի հասցեն գրված է որպես bodybackground պարամետրի արժեք: Այս կերպ դրված ֆոնային պատկերը կկրկնվի աբսցիսայի և օրդինատների առանցքների երկայնքով՝ սկսած վերին ձախ անկյունից։

Հուսով ենք, որ այս հոդվածը օգտակար կլինի ձեզ համար: Ուրախ ընթերցում:

Պատկերներն անմիջապես թույլ են տալիս հասկանալ, թե տվյալ կայքը կամ հոդվածը որքան հետաքրքիր կարող է լինել մեզ համար, դրանք տրամադրություն են ստեղծում և կարող են նորովի բացահայտել թեման: Երբեմն մեկ լուսանկարն արժե հազար բառ:

Բայց դուք չպետք է ճաշակեք դրանցից, եթե չունեք Instagram կամ առցանց խանութ: Ցանկալի է, որ պատկերները.

• տեղեկատվական էին
• համապատասխանեք ձեր կայքի գունային սխեմային
• տեղին էին

Եթե ​​դուք չունեք համապատասխան լուսանկար, կարող եք օգտագործել այսպես կոչված ֆոտոստոկ (ֆոտոբանկ) - վայր, որտեղ պահվում են բազմաթիվ լուսանկարներ, նկարազարդումներ և վեկտորային գրաֆիկա: Նման ռեսուրսները շատ են, գուցե նույնիսկ լսել եք ամենամեծերից մեկի՝ Shutterstock-ի մասին, բայց այնտեղ ներբեռնումները վճարովի են։

Նրանց համար, ովքեր չեն սիրում գերվճարել, հոդվածի վերջում մենք պատրաստել ենք բոնուս- մի քանի ֆոտոբանկերի ցուցակ, որտեղ դուք կարող եք ներբեռնել հսկայական քանակությամբ բարձրորակ գեղեցիկ նյութեր բացարձակապես անվճար :)

Պատկերի ձևաչափեր

Համաշխարհային ցանցում հիմնականում օգտագործվում են 3 տեսակի պատկերներ.

gif(Գրաֆիկական փոխանակման ձևաչափ - պատկերների փոխանակման ձևաչափ)

Սա առաջին ձևաչափն է, որը սկսեց կիրառվել ինտերնետում։ Այս ձևաչափի առավելությունները հասանելիությունն են անիմացիաներև փոքր չափերով, էջը արագ բեռնվում է: Բացի այդ, այն աջակցում է թափանցիկությանը: Թերություն - միայն օգտագործված 256 գույն(այդ իսկ պատճառով չափը փոքր է), այսինքն. այն չի կարող օգտագործվել ամբողջական գունավոր պատկերների համար:

jpeg, նույնանուն jpg(Համատեղ լուսանկարչական փորձագետների խումբ - Համատեղ լուսանկարչական փորձագետների խումբ.սա զարգացման կազմակերպության անվանումն է)

հարմար է գունավոր, բարձրորակ պատկերներ ստեղծելու համար, նկարներ. Նման պատկերների չափերը մեծ են, ուստի դրանք սովորաբար մեծ բեռ են դնում սերվերի վրա: Եթե ​​Ձեզ անհրաժեշտ է սեղմել jpeg (նկարի ավելի փոքր քաշի համար), խորհուրդ ենք տալիս վերցնել վերջնական պատկերի չափը ութից բազմապատիկ , ուստի որակի կորուստը նվազագույն կլինի։

png(Շարժական ցանցային գրաֆիկա - Դյուրակիր ցանցային գրաֆիկա. Արտասանվում է այնպես, ինչպես ping, այսինքն. )

այս ձևաչափն ի սկզբանե մշակվել է համացանցի համար, այսինքն. Պատկերը սովորաբար քիչ է կշռում և չի դանդաղեցնում էջը բեռնելիս: Այս ձևաչափը ստեղծվել է հնացած gif-ը փոխարինելու համար, սակայն, ի տարբերություն դրա, այն չի աջակցում անիմացիա: Png-8 Gif-ի նման օգտագործում է ընդամենը 256 գույն: Ձևաչափ png-24աջակցում է 16 միլիոն գույների, չնայած այն արդեն բավականին ծանր է: Png-32պարունակում է նույն քանակությամբ գույներ, որքան png-24-ը, և գումարած այն թույլ է տալիս ստանալ պատկեր թափանցիկ ֆոնով , և դուք կարող եք հարմարեցնել թափանցիկության աստիճանը: Png-ի չափը փոքրացնելիս գույնի որակի կորուստ չկա:

Եկեք ամփոփենք

gif- անիմացիայի համար

jpeg- լուսանկարների համար

png- սրբապատկերների, կոճակների, ֆոնի, լոգոների, սքրինշոթների, գծագրերի, տեքստերի, թափանցիկ ֆոնով լուսանկարների համար

Պատկերի տեղադրում html ֆայլի մեջ

Էջում նկար ավելացնելու համար օգտագործեք հատկորոշել (անգլերեն պատկերից - պատկեր, նկար):Սա մեկ պիտակ է և փակման պիտակի կարիք չունի: Այս թեգը պարունակում է ատրիբուտներ ներսում:

Հատկանիշ src(անգլերեն աղբյուրից - աղբյուր) ցույց է տալիս ֆայլի ուղին (այն վայրը, որտեղ գտնվում է պատկերը): Եթե ​​նկարը ձեր համակարգչում է (կայքը դեռ մշակման փուլում է) կամ ձեր սերվերում, օգտագործեք հարաբերական հղումը: Եթե ​​պատկերը ցանցից է, ապա բացարձակ հղում է պետք։ Կարդացեք, թե ինչպես դա անել «Հղումներ» հոդվածում:

Այսպիսով, պատկերը ձեր վեբ էջին միացնելու համար հարկավոր է գրել կոդ հետևյալ կերպ.

alt հատկանիշ(անգլերեն այլընտրանքից - այլընտրանք) ցույց է տալիս տեքստը, որը օգտվողը կտեսնի, եթե պատկերը չբեռնվի: Ճանապարհը սխալ է նշված, նկարը ջնջված է, վատ ինտերնետ. պատճառները կարող են շատ լինել, և ցանկալի է, որ մարդը հասկանա, թե ինչ է թաքնված այս ատելի պատկերակի հետևում:

Որոնման համակարգերը մեծ ուշադրություն են դարձնում այս հատկանիշի լրացման ապահովմանը: Իսկ html վավերացնողը (կոդը ճշտության ստուգման ռեսուրս) alt հատկանիշի բացակայությունը կընկալի որպես սխալ։ Եթե ​​բոլոր հատկանիշները կլրացվի և հնարավորության դեպքում կպարունակի նաև հիմնաբառեր՝ ձեր կայքի տեսանելիությունը զգալիորեն կբարձրանա, այսինքն. այն ավելի հաճախ կցուցադրվի որոնումներում։ Սա SEO-ի ոլորտից է, և այս փուլում բավական է, որ մենք իմանանք, որ կա այդպիսի հատկանիշ, և այն պետք է լրացված լինի «live» կայքում։ Մինչ կայքը գտնվում է մեր սկավառակի վրա, միանգամայն հնարավոր է այն դատարկ թողնել:

Ստորև բերված օրինակում մենք դիտմամբ նշել ենք պատկերի համար գոյություն չունեցող ուղի, որպեսզի կարողանաք տեսնել, թե ինչպես է աշխատում alt հատկանիշը:

Պատկերների բարձրությունը և լայնությունը

Կարող եք նաև սահմանել պատկերի բարձրությունը և լայնությունը, եթե սկզբնական պատկերը, օրինակ. ավելին, քան պետք է:

HTML5-ում խորհուրդ է տրվում դա անել՝ օգտագործելով CSS կամ ոճի հատկանիշ , սրա նման:

Այս օրինակում մենք վերցրել ենք լայնության 30%-ը, ոչ թե բնօրինակ պատկերի, այլ բրաուզերի պատուհանի չափի: Երբ լայնությունը = 100%, պատկերը բացվում է բրաուզերի ամբողջ լայնությամբ: Հիշեք այս հատկությունը տոկոսը, որպես չափման միավոր։

Ի դեպ, եթե գրեինք միայն լայնությունը, արդյունքը նույնը կլիներ, փորձեք.

< img src = «https://site/tutorials/wp-content/uploads/2016/07/panda.jpg» alt = «պանդա ծառի մեջ»ոճ = "լայնություն:30%;" >

Կարող եք նաև սահմանել լայնությունը և բարձրությունը պիքսելներ.Մեր պանդայի դեպքում, որի սկզբնական չափերը 1196 x 796 պիքսել են, որպեսզի կենդանին սեղմվելիս չտուժի, պետք է պահպանել համամասնությունները, իսկ այստեղ առանց հաշվիչի չես կարող։ Ենթադրենք, ուզում ենք նկարի չափը կրճատել 3 անգամ, ապա պետք է չափերը սահմանենք 399 x 265 պիքսել։

Խնդրում ենք նկատի ունենալ, որ եթե պատկերը մեծացնենք համաչափ, ապա բավական է նշել միայն մեկ պարամետր, օրինակ. լայնությունը։ Խելացի բրաուզերն ինքն է հաշվարկելու պատկերի ամբողջական չափը։

Փորձեք գործարկել այս կոդը և նայեք արդյունքին.

< img src = «https://site/tutorials/wp-content/uploads/2016/07/panda.jpg» alt = «պանդա ծառի մեջ»ոճ = "լայնություն:399px;" >

Միշտ սահմանեք պատկերի չափերը: Սովորաբար, պատկերների բեռնումն ավելի երկար է տևում, քան մնացած html կոդը: Եթե ​​զննարկիչը գիտի, թե որքան տարածք է պահելու նկարների համար, այն կարող է շարունակել բեռնել կայքը՝ չսպասելով պատկերների բեռնմանը:

Մի փոքր ցեցի

Եթե ​​պատահաբար դիպչեք HTML-4-ում կամ նույնիսկ ավելի վաղ ստեղծված կայքի կոդը, կնկատեք, որ պատկերի չափերը սահմանվում են հատուկ լայնության հատկանիշներ Եվ բարձրությունը. Սա հնացած մեթոդ է, թեև դեռ վավեր է HTML5-ում: Այնուամենայնիվ, խորհուրդ ենք տալիս օգտագործել ոճը, քանի որ Լայնության և բարձրության հատկանիշների վրա կարող են ազդել ներքին կամ արտաքին ոճերը, որոնք կբնակվեն զննարկիչում կամ ձեր CSS ֆայլում: Մենք այս մասին ավելի մանրամասն կանդրադառնանք, երբ նայենք CSS-ին, բայց առայժմ միայն նայեք մի օրինակ, թե ինչպես են ոճերն ազդում բարձրության և լայնության հատկանիշների վրա:

Այս պատուհանում կա 3 ներդիր՝ առաջինում տեսնում եք html կոդը, 2-րդ CSS կոդը, իսկ վերջինում՝ ինչպես միշտ, արդյունքը։ Սա աշխատում է այնպես, կարծես առաջին ներդիրը index.html ֆայլ է, երկրորդը՝ style.css ֆայլ, իսկ երրորդը՝ դիտարկիչ: Այսպիսով, այժմ մեր CSS-ն ասում է, որ img թեգով բոլոր տարրերն ունեն 100% լայնություն: Լայնության և բարձրության ատրիբուտների լռելյայն չափերը պիքսելներով են, ուստի այստեղ որևէ միավոր ավելացնելու կարիք չկա:

Արդյունքների տարբերությունն ակնհայտ է :)

Նաև html-ի հին տարբերակներում օգտագործվել են հետևյալ հատկանիշները.

շարել, որն օգտագործվում էր պատկերը հորիզոնական կամ ուղղահայաց հավասարեցնելու համար։

hspace- պատկերի ձախ և աջ կողմում գտնվող ներքևում դեպի շրջակա բովանդակությունը (օրինակ՝ տեքստ կամ հարակից պատկեր)

vspace- վերևում և ներքևում ներքևում պատկերից մինչև դրա շուրջը գտնվող բովանդակությունը:

սահման- սահմանեք շրջանակի հաստությունը պատկերի շուրջ (լռելյայն այն զրո է)

Մեր օրերում այս ամբողջ մանիպուլյացիան (և շատ ավելին) կատարվում է CSS-ի միջոցով, ուստի մենք որոշեցինք չանհանգստացնել ձեզ այստեղ: Եթե ​​դուք դեռ հետաքրքրված եք, թե ինչպես աշխատել այս ատրիբուտների հետ, գրեք մեկնաբանություններում, մենք կավելացնենք այս նյութը :)

Պատկերի տեղադրում կոդի մեջ

Այնտեղից, որտեղ մենք տեղադրում ենք մեր պիտակը կախված է նրանից, թե ինչպես այն կցուցադրվի բրաուզերում:

Օրինակ թիվ 1 - պարբերությունից առաջ.

Տարրեր, ինչպիսիք են

ԵՎ

վերաբերել բլոկի տարրեր . Նրանք միշտ սկսում են նոր տողից և զբաղեցնում են դիտարկիչի պատուհանի ողջ հասանելի լայնությունը։ Եթե ​​դուք առաջին տեղում եք , իսկ դրանից հետո բլոկի տարր, օրինակ՝ պարբերություն, այն կտեղափոխվի հաջորդ տող։

Օրինակ թիվ 2 - պարբերության սկզբում

Սա ներկառուցված տարր է, այն տեղավորվում է բլոկի տարրի ներսում և նոր տող չի սկսում: Վերևի օրինակում տեքստը փաթաթվում է պատկերի շուրջ, քանի որ կոդը գրանցված է ներսում

Վերնագրեր նկարազարդումների համար

Էջում լուսանկար նշելու կամ ստորագրելու համար օգտագործեք հատկորոշել

(անգլերեն պատկերից - նկարչություն): Այս պիտակը ցույց է տալիս, որ դրա մեջ կտեղադրվեն այնպիսի բովանդակություն, ինչպիսիք են նկարազարդումները, լուսանկարները, գծապատկերները և այլն:

Նշել