Si të futni një imazh në një faqe html

Për të futur një imazh-foto në sajt (foto ose ndonjë grafikë), duhet të specifikoni shtegun drejt burimit (tek skedari i imazhit) duke përdorur etiketën img. Etiketa img është një shkurtim për imazhin në anglisht (imazh, imazh) , src
E rëndësishme: peshën dhe madhësinë foto (të vogla), Emri i skedarit(pa hapësira dhe vetëm shkronja dhe numra latinë), formati i figurës(shtesat. GIF, JPG, JPEG, PNG. Mund të përdoren fotografi të animuara (GIF).
Rruga drejt imazhit tregohet absolute ose relative, në varësi të vendit ku ndodhet imazhi në faqen tuaj ose në internet në burime të palëve të treta (atëherë duhet të specifikoni URL-në)

Mjegull. Artisti Vladimir Knyagnitsky

Kodi. Kodi përmban një adresë relative (në lidhje me dosjen në serverin tim)

Kodi. Kodi përmban adresën absolute të figurës

Madhësia e imazhit dhe trashësia e kornizës

Madhësia aktuale e kësaj fotografie: Gjerësia (gjerësia)="499" Lartësia (lartësia)="434". Pa përdorur Photoshop, mund ta bëni fotografinë në ekran të duket më e madhe ose më e vogël se madhësia e saj aktuale. Për këtë përdoren atributet. gjerësia Dhe lartësia. Për shembull, për ta bërë imazhin të duket 2 herë më i vogël, specifikoni gjerësinë (gjerësia)="250" dhe lartësia (lartësia)="217" . Dhe shtoni një kufi të trashë 4 px( kufiri"4"). Në të majtë është një imazh me një kornizë, në të djathtë, për krahasim, pa kornizë

Atributet e etiketës IMG

src-Atributi i kërkuar që tregon URL-në e figurës (adresën, vendndodhjen e saj)
IMG SCR="img/kartinka.gif"

rreshtoj- Përafron imazhin në njërën anë të dokumentit
align="majtas" - Shtrirje majtas
align="djathtas" Rreshtimi djathtas
align="bottom" Rreshtimi poshtë
align="lart" Rreshtimi në krye
align="middle" Rreshtoni në mes

alt- Shfaq tekstin për imazhin. Një alternativë ndaj grafikës nëse nuk ngarkohet
kufiri- Vendos gjerësinë e kornizës rreth imazhit në pixel. Korniza nuk përdoret si parazgjedhje.

gjerësia gjerësia e imazhit në piksel ose përqindje
lartësia- lartësia e imazhit në piksel ose përqindje

hspace kompensim horizontal
vspace kompensim vertikal

Shembuj të përafrimit të një imazhi me tekstin duke përdorur HTML

Fotografia vendoset para tekstit pa specifikuar asnjë atribut. Nuk ka formatim teksti. Rezultati është ai që shihni. Imazhi pozicionohet në të majtë të tekstit duke përdorur atributin align të vendosur majtas. align="majtas" .
Kjo, natyrisht, është shumë më e mirë se versioni i mëparshëm i vendndodhjes së figurës me tekst. Por nuk mendoj se dikush i pëlqen kur imazhi shtypet afër tekstit. Flutur, flutur, flutur. Dhe tekst, tekst, tekst për një flutur, flutur, flutur. Shumë afër imazhit. Fotografia nuk duhet të bashkohet me tekstin, edhe nëse teksti është shkruar thjesht si tekst, për të demonstruar vizualisht mbështjelljen e tekstit rreth figurës. Është shumë e rëndësishme që fotografia në ekran të mos shkrihet me tekstin, të mos acarojë, të kënaqë syrin dhe të jetë në vendin e vet. Një sasi e mjaftueshme teksti e zbërthen shembullin më qartë.
Ka rregulla paraqitjeje në botimin e librit, duhet të ketë rregulla paraqitjeje në ndërtimin e faqeve të internetit. Imazhi ndodhet në të majtë të tekstit duke përdorur atributinrreshtoni me vlerën LEFT, dhëmbëzimi nga teksti - 20 piksele horizontalisht.
align="left" hspace=20 Mbushja shtohet duke përdorur atributet HSPACE(ndarja horizontale) dhe VSPACE(dhënia vertikale). Në këtë rast, dhëmbëzimi vertikal vendoset në zero, në mënyrë që pjesa e sipërme e figurës të jetë e barabartë me vijën e sipërme të tekstit. Nëse dhëmbëzimi është zero, nuk specifikohet. Pra, indenti vertikal është specifikuar në atribut. Dhe ndërsa webmasterët tani po nxiten të heqin dorë nga atributet HTML dhe të kalojnë tërësisht në CSS, më duket se thjeshtësia e kësaj metode i jep të drejtën të ekzistojë.
KODI Imazhi ndodhet në të djathtë të tekstit rreth ndihmës së atributeve radhiten për vlerënE DREJTË, mbushja e shtuar me atribute HSPACE(ndarje horizontale). Dhe VSPACE(dhënia vertikale). Në parim, gjithçka është e njëjtë si në versionin e mëparshëm, vetëm në vend të majtas, tregohet drejtë dhe fotografia futet jo para tekstit, por afërsisht në mes. Formatimi me atribute rreshtoj(radhitje lineare) dhe me ndihmën e dhëmbëzimeve horizontalisht dhe vertikalisht jep një rezultat krejtësisht normal. Fotografia është e mbështjellë me tekst në të majtë, lart dhe poshtë (nëse ka tekst të mjaftueshëm). Shtrirja e tekstit nga imazhi majtas, lart dhe poshtë është e barabartë me 20 piksele. Gjithçka është ashtu siç kemi treguar në kod.
Dy llojet e shtrirjes (majtas dhe djathtas) janë më të përdorurat, dhe të tjerët... Pothuajse të gjitha të tjerat konsiderohen të vjetruara. Në faqet moderne, të gjitha imazhet (dhe në të vërtetë i gjithë dizajni) janë krijuar duke përdorur fletë stili kaskadë (CSS)

Tekst, tekst, tekst tekst i vazhduar

Imazhi pozicionohet duke përdorur atributin align me kuptim e mesme. Mbushje e shtuar me atribute HSPACE(ndarja horizontale) dhe VSPACE. Duket kështu, kodi është shkruar më poshtë .. Këtu përfundojnë atributet e pozicionimit të imazhit

Si të përdorni atributet alt dhe titull.

Atributet alt dhe titull përmbajnë titullin e imazhit. ALT është një alternativë për një imazh nëse nuk është ngarkuar për ndonjë arsye. Titulli është titulli i figurës. Shfaqet kur kaloni miun mbi imazh.
Nëse po krijoni një faqe vetëm për veten tuaj, atëherë nuk mund t'i zbatoni këto atribute. Nëse faqja është e destinuar për njerëzit, atëherë këto atribute duhet të plotësohen duke dhënë një përshkrim të qartë dhe të saktë të imazhit.
Së pari, është i përshtatshëm për vizitorët, dhe së dyti, është i nevojshëm për motorët e kërkimit. Është teksti brenda etiketës IMG që lejon robotët e kërkimit të indeksojnë fotografitë, t'i renditin ato sipas fjalëve kyçe dhe t'i lëshojnë ato sipas kërkesave të përdoruesve. Nga rruga, Yandex madje paralajmëron se nëse fotografia nuk ka një përshkrim kuptimplotë, ajo nuk futet në kërkim. Indeksohen vetëm fotografitë e formateve standarde grafike (JPEG, GIF dhe PNG). Imazhet e sfondit dhe fotografitë që zgjerohen duke përdorur një skript nuk indeksohen.

KODI I imazhit me alt dhe titull të mbushur

Si të bëni një imazh një lidhje

Çdo lidhje bëhet duke përdorur etiketën A dhe atributin href (nëse është hiperlidhje) ose emrin if (një lidhje me një paragraf ose element të vendosur në të njëjtën faqe).
Etiketa e fillimit Burimi i imazhit etiketa mbyllëse

Kur shfletoni internetin, sigurisht që shihni fotografi, pankarta, fotografi dhe grafika të ndryshme në shumë site. Sot do të mësojmë se si të futim imazhe në një faqe HTML.

Shtimi i një imazhi bëhet në dy faza: së pari, përgatitet një skedar grafik i madhësisë dhe formatit të kërkuar, dhe më pas shtohet në faqen e internetit përmes një etikete: . Vetë dokumenti HTML synon vetëm të shfaqë imazhin e kërkuar, ndërsa pa e ndryshuar atë.

Ka disa gjëra që duhen mbajtur parasysh kur përgatitni imazhe.

1. Meqenëse faqja e internetit është e ngarkuar përmes rrjetit, një faktor i rëndësishëm është madhësia ("pesha") e skedarit grafik ngulitur në një dokument ueb. Sa më i vogël të jetë, aq më shpejt do të shfaqet imazhi.

2. Shumë shpesh, dimensionet fizike të një imazhi (gjerësia dhe lartësia) duhet të kufizohen (zvogëlohen) në gjerësi dhe lartësi. Për shembull, vendosni gjerësinë në jo më shumë se 700-800 piksele. Përndryshe, i gjithë imazhi nuk do të futet në dritaren e shfletuesit dhe do të shfaqen shiritat e lëvizjes.

Formatet grafike për faqet e internetit

Ekzistojnë dy formate kryesore që përdoren më gjerësisht për grafikë në ueb: gif Dhe JPEG. Cilësi të tilla si: shkathtësia, shkathtësia, një sasi e vogël skedarësh burim me cilësi të mjaftueshme të mirë, u kanë shërbyer mirë këtyre formateve, në fakt duke i përcaktuar ato si standarde për imazhet në ueb.

Ekziston një format tjetër: PNG, i cili gjithashtu mbështetet nga shfletuesit kur shtoni imazhe dhe vjen në dy shije: PNG-8 Dhe PNG-24. Sidoqoftë, popullariteti i formatit PNG është shumë inferior në njohjen e formateve GIF dhe JPEG..

Zakonisht, për imazhet (fotot), krijohet një dosje e veçantë në direktorinë rrënjë dhe të gjitha imazhet për sitin shtohen në të. Ndonjëherë ka disa dosje të tilla (nëse struktura e faqes e kërkon atë ose është më e lehtë për ju të lundroni). Kjo dosje quhet më së shpeshti si: img ose imazhe (Imazhet). Rruga e plotë e skedarit grafik (ku ndodhet imazhi) shkruhet në kodin e faqes së internetit, si dhe emri i këtij skedari (imazhi) që dëshironi të futni në dokumentin html.

Shkrimi i kodit për të futur një imazh në një faqe interneti

Për të futur imazhe në një dokument HTML, përdorni konstruksionin e specifikuar në Listimi 8.1. Ky kod është futur në vendin e duhur në faqen e internetit (ku dëshironi të shihni foton).

Në faqen tonë ne kushtuar makinave, përgatita dhe futa dy imazhe. Mund të shihni kodin e ngulitjes për imazhin e parë në Listimin 8.1.

Listimi 8.1.

Kështu do të duket imazhi i parë i futur në faqen e internetit të faqes:

Dhe tani do të komentoj më në detaje atë që shkruhet në Listimi 8.1.

Vetë imazhi "futet" duke përdorur etiketën: img src. Hyrja e plotë duket kështu: img src="img/mers1.jpg", ku "img/mers1.jpg"- tregon që fotografia jonë është në dosje: img, dhe emri i skedarit grafik (imazhi): mers1.jpg.

Në parim, kjo tashmë është e mjaftueshme për të futur një imazh në një faqe në internet, pjesa tjetër e parametrave janë opsionale, por megjithatë, unë rekomandoj që gjithmonë t'i përshkruani ato, Përndryshe, fotografia mund të jetë subjekt i shtrembërimeve gjeometrike..

Le të shohim opsionet shtesë:

kufi = "0"- tregon se nuk ka kornizë rreth imazhit, provoni të ndryshoni 0 në një numër tjetër, për shembull, në 1 , - korrespondon me trashësinë e kornizës rreth imazhit në 1 pixel, 2 - korrespondon me trashësinë e kornizës rreth imazhit në dy piksel, etj.

E rëndësishme! Nëse planifikoni ta bëni imazhin një lidhje, sigurohuni që të specifikoni vlerën: kufi = "0".

gjerësia = "400"– tregon se gjerësia e figurës është: 400 piksele(vendosni gjerësinë aktuale të imazheve tuaja).

lartësi = "209"- specifikon se lartësia e imazhit është: 209 piksele(vendosni lartësinë aktuale të imazheve tuaja).

Nëse nuk specifikoni parametrat: gjerësia Dhe lartësia, atëherë imazhi mund të ketë shtrembërim gjeometrik.

hspace = "20"- tregon një dhëmbëzim teksti rreth imazhit prej 20 pikselësh.

rresht = "majtas"- kjo është një etiketë tashmë e njohur për ju ... .. Është e drejtë, do të thotë e rreshtuar majtas, mund të marrë gjithashtu vlerën: drejtë- shtrirje djathtas.

alt="(!LANG:Pamja e përparme e makinës" !}- këtu shkruhet teksti alternativ, i cili shfaqet kur mausi qëndron mbi imazh.

Pikërisht në të njëjtën mënyrë, ne do të "fusim" imazhin e dytë në faqen e internetit, me ndryshimin e vetëm që ai do të jetë i rreshtuar djathtas.

Komentet për këtë artikull (mësim):

A mund të më thoni se ku saktësisht duhet të krijoj dosjen img?

Dosja img është vetëm një emër konvencional, mund ta quani si të doni, nëse do ta kuptoni më vonë. Mund ta krijoni kudo, për thjeshtësi, krijoni atë në direktorinë rrënjë dhe vendosni të gjitha imazhet atje.

Fakti është se fotografia nuk shfaqet, vetëm mbishkrimi. Çfarë mund të jetë e gabuar? Faleminderit.

Hidhini një sy nga afër Listimit 8.1 më sipër. Merreni tërësisht për veten tuaj. Në direktoriumin rrënjë (ku ndodhen të gjithë skedarët HTML të faqes tuaj), krijoni një dosje img . Vendosni të gjitha imazhet tuaja në këtë dosje. Në listë, ndryshoni mers1.jpg në emrin e skedarit tuaj. Ndryshoni gjithashtu vlerat e gjerësisë dhe lartësisë në dimensionet aktuale të skedarit tuaj. Paç fat.

Faleminderit shumë, gjithçka funksionoi.

Pershendetje.Kam te njejten situate si folesi i meparshem: shkruaj kodin si i yti, ndryshoj vetem emrin e skedarit: ne vend te mers.1 / jpeg fus nje tufe Mercedes / jpeg. Vetem nje dritare shfaqet ne faqe me mbishkrimi "Pamja e përparme e makinës", dhe nuk ka asnjë imazh. Për mendimin tim, shfletuesi nuk mund të gjejë rrugën për në foto ose nuk është regjistruar saktë. KETU ESHTE KODI IIM: b

Shikoni nga afër kodin tuaj img/mercedes/jpeg. E kuptuat saktë shfletuesi nuk e gjen shtegun drejt skedarit grafik. 2. Emri i skedarit është i pasaktë, shikoni se si kam mers1.jpg

Epo, kopjova kodin dhe ngjita në ovalin tim pa një foto në ovale në krye ka një lidhje!

Përshëndetje!Problemi është i njëjti, kam krijuar një dosje të quajtur img në të njëjtin vend me dokumentet e faqes, imazhet me emrin 1.jpg ruhen në këtë dosje, unë përshkruaj gjithçka si në shembullin tuaj.

Nëse vëreni se fotografia ime është në dosjen img

Artikull shumë i dobishëm për fillestarët "ueb-mjeshtra". E vetmja vërejtje për atributin "alt". Në lidhje me figurën në artikull jepet interpretimi i mëposhtëm: "alt="(!LANG:Pamje e makinës përpara" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

këtu është kodi im PSE PSE FOTO POZICIONOHET ANË KUR DETYRA PËR TË ËSHTË QENDRA?

Dhe nëse marr një imazh nga faqja e dikujt tjetër, a nuk do të jetë kjo një shkelje e të drejtës së autorit?

Shpjegoni pse kur ngarkoni një dokument HTML në server, ka hapësira boshe në kornizë në vend të imazheve. Edhe pse para përllogaritjes, imazhet ishin ashtu siç duhet.

Dmitry, nuk ka mrekulli, keni bërë një gabim diku, kontrolloni të gjitha shtigjet për në foto, d.m.th. si shkruhen fotot në kod.

ky eshte kodi im, cdo gje pervec imazhit eshte zbuluar ne faqe, une jam munduar gjithe diten me cdo mjet por asgje. ju lutem me tregoni cfare te bej

AndreyK, ju lutem referojuni letrës sime. Unë nuk mund të fus një imazh në asnjë mënyrë, unë fut gjithçka saktë, por në asnjë mënyrë, zbulohet vetëm një kornizë dhe një mbishkrim

Elvira, lexova letren tende, si dhe te gjitha komentet dhe letrat e tjera. Po ku t'i përgjigjemi ... fshatit të gjyshit ???

Nuk e di pse të gjithë nxitojnë!? ju thjesht nuk duhet të kopjoni kodet, pastaj t'i ngjisni ato, por shkruajini ato vetë dhe gjithçka do të funksionojë.. ja teksti i fotos sime

Kam kopjuar listën tuaj, kam ngjitur vlerat e mia - ka një foto. Tjetra, unë ngas në të njëjtën gjë (me dorë) më poshtë, nuk ka foto - çfarë mrekullie?

AndreyK ju lutem më tregoni ku është gabimi? sa e kane provuar nuk funksionon ((

Andrey, më thuaj pse nuk mund ta shohësh foton. Kodi im: Ka një mbishkrim, por jo foto. Adresa ime: [email i mbrojtur] Faleminderit.

U desh gjithashtu shumë kohë, por funksionoi! Në të vërtetë, dosja imj duhet të hapet në një dokument HTML.

Do të provoj patjetër, faleminderit

iiiiiiiiuuuuuuuuuuuuuuuuuuuum moj

Edhe une kam vuajtur per nje kohe te gjate, me rezulton se dosja me foto duhet te jete ne te njejtin vend si index.html, faleminderit Elena

Andrey I ngjit:

Andrey I ngjit: dhe nuk kam foto ne dokument vetem mbishkrim!!!Adresa ime eshte: [email i mbrojtur]

kodi im... gjithashtu pa foto. Dosja img është në të njëjtën dosje me index... ju lutemi ndihmoni. [email i mbrojtur] Faleminderit!

Epo nuk e di. I kam lexuar të gjitha komentet. Kam provuar gjithçka. Kam kopjuar dhe ngjitur të dhënat e mia. Asgjë nuk funksionon. Dosja me fotografi (img) është në të njëjtin vend me index.html. Por nuk ka asnjë foto. Në vend të kësaj, një kryq i kuq dhe një mbishkrim. Unë punoj në shfletuesin IE. Ja çfarë kam futur:

Shikova kodin HTML të faqes në vend të fotos në mësim: Kodi në faqe është i ndryshëm nga ai që është në listë. Pse? dhe, meqë ra fjala, në faqe është nënvizuar kodi "mers1.jpg". Kopjimi me nënvizim dështoi. Kam provuar ta vendos edhe une. Ende pa foto. Per Cfarë bëhet fjalë?

Ne pyesim veten, i përgjigjemi vetes. Për një kohë të gjatë fotografia nuk ishte futur. Doli: 1, në vend të etiketës src, kisha srk ​​2. U ngatërrova kur bëra rrugën për në foto. E riemërova dosjen në IMG dhe gjithçka funksionoi. Kalova gati dy ditë për këtë, por ia vlente.

Dashuri, por tani do ta kujtoni per gjithe jeten:) po bej shaka, sigurisht mos u ofendoni. Por seriozisht, nëse një person nuk lë një adresë kthimi, atëherë është pothuajse e pamundur që unë ta ndihmoj atë.

Përshëndetje, a mund të më thoni se si të vendos një imazh sipër, të dytën poshtë në të majtë dhe të tretën në fund të djathtë))))

........... cili është gabimi im i mungesës së imazhit?

Gjithçka është e saktë në kod, nëse asgjë nuk është e ngatërruar, gjithçka duhet të funksionojë. Por shkruani emrin e skedarit (foto) me shkronja angleze. Shumë serverë nuk pranojnë latinisht.

Por ja çfarë është e çuditshme ... ndërsa e thërrisnin dosjen me emra të ndryshëm, fotografia nuk donte të shfaqej në asnjë mënyrë, megjithëse shtegu ishte shkruar saktë. Sapo telefonova IMG, u shfaqa menjëherë. Çfarë është kapja?

Marina, nuk ka truk e provokim :). Në kodin e Listimit 8.1. tregohet se kjo imazh është në dosjen: img. Nëse ndryshoni emrin e dosjes për imazhet në hostin tuaj, atëherë ndryshoni atë në listë, ky është i gjithë mashtrimi.

Po mundohem të fus një imazh!!! Unë përshkruaj gjithçka përmes një blloku shënimesh, bëj gjithçka siç duhet, mbase nuk ia vlen përmes një blloku shënimesh ??

Dhe unë hap gjithçka në mozilla fire fox më e fundit))

Rruga e fotos sime është C:Documents and SettingsDenisDesktopkoffevinogradwwwImg dhe vetë fotografia quhet gif, emri përfshin edhe 1.gif...Këtë e bëj në notepad bëri dhe shtegu i plotë nuk del mozilla nuk e sheh foton expoler thekson me një kryq të kuq

Denis, riemërto dosjen Img në img, d.m.th. të gjitha me shkronja të mëdha dhe riemërtoni edhe rrugën drejt saj. Shumë serverë nuk shfaqin saktë shkronjat e mëdha.

Unë kam ende të njëjtën pyetje: pse jo imazhe, por vetëm një mbishkrim. Krijova një dosje të veçantë për sitin: përmban një faqe në internet dhe një foto. Futur: NDIHMË CILI ËSHTË GABIMI MOS IM: [email i mbrojtur]

Si të krijoni një imazh në mënyrë që të zmadhohet ose zvogëlohet?

Për disa arsye, imazhi nuk është në qendër as për mua. Çfarë është kapja?.. Kodi është:

Imazhet - ndoshta ato formojnë idenë tonë të përgjithshme për World Wide Web. Pajtohem që një person i kujton informacionet grafike në përgjithësi shumë më mirë sesa informacionet tekstuale. Prandaj, imazhet janë një pjesë e rëndësishme e çdo faqeje dhe çdo faqe interneti. Dhe kështu unë dua t'ju tregoj se si të futni një imazh në html.

Fusni imazhin në html duke përdorur etiketën

Me siguri e dini që të gjitha komandat në html kryhen duke përdorur etiketa. Pra, për imazhet ata dolën me etiketën e tyre - . Është single, pra nuk ka pjesën mbyllëse.

Atributi më i rëndësishëm i etiketës img është src (burimi) - rruga drejt imazhit. Në të, ju shkruani adresën në të cilën ndodhet imazhi. Mund të shkruhet si absolute ( site/images/images2/image.jpg) ose si relative ( images/images2/image.jpg).

Të dyja këto shtigje çojnë në të njëjtin skedar image.jpg, i cili ndodhet në dosjen image2. Ai, nga ana tjetër, është në drejtorinë e imazheve dhe ai është në dosjen rrënjë. Nëse shkruani gjithçka relative, atëherë kur ndryshoni emrin e domenit të faqes tuaj, gjithçka do të mbetet funksionale. Për shembull, redaktori wordpress fut URL absolute si parazgjedhje. Por personalisht, nuk do të ndryshoj domenin dhe më përshtatet.

Atribute shtesë dhe stilim përmes css

Pra, duke u larguar nga tema.Për të shfaqur një foto, mjafton të specifikoni atributin src për të, por ka shumë atribute të tjera për dizajnin e saj.

• gjerësia dhe lartësia janë gjerësia dhe lartësia e figurës. Mund të vendoset në atributet përkatëse në etiketën img
• align - përafrimi i imazhit në lidhje me tekstin. Si parazgjedhje, është rreshtuar në të majtë (majtas). Mund ta vendosni gjithashtu në të djathtë dhe në qendër (djathtas, në qendër)
• alt - tekst alternativ që do të shfaqet nëse përdoruesi ka çaktivizuar imazhet në shfletues. Është mirë ta plotësosh.
• titulli është pothuajse i njëjtë. Një lloj përshkrimi i figurës, i cili do të shfaqet kur rri pezull mbi të
• vspace dhe hspace - futje vertikale dhe horizontale e imazhit nga pjesa tjetër e përmbajtjes. Kujdes! Atributet janë tashmë të vjetruara dhe është më mirë t'i vendosni këto dhëmbëza përmes fletës së stilit
• class - një klasë stili që i bashkëngjitet imazhit dhe zbaton disa stile në të

Ne vendosëm një foto kaq të lezetshme. Këtu kemi varur klasën e paraafishimit dhe tani me css përmes saj mund t'i referohemi dhe të përshkruajmë çdo stil. Për shembull, këto:

Pamja paraprake (mbushje: 20 pikselë; kufiri: 10 pikselë; kufiri: 5 px portokalli e fortë; transformimi: skewX (10 gradë); hije kutie: 0 0 15 pikselë 10 px vjollcë )

Më lejoni të përmbledh

Pra, për të shfaqur një imazh, thjesht duhet të shkruani një etiketë img dhe të vendosni atributin src në të, i cili përcakton rrugën drejt imazhit. Çdo gjë tjetër është veçori shtesë - shtrirja, dimensionet, teksti alternativ, rrotullimet, kornizat, etj.

Dhe së fundi, në mënyrë ideale, e gjithë kjo duhet të shkruhet përmes CSS. Kjo do të thotë, mos vendosni dimensionet në atribute, por varni një klasë stili shtesë në imazh, e cila do të përcaktojë dimensionet. E njëjta gjë me shtrirjen, e cila në css mund të bëhet duke përdorur veçorinë text-align, si dhe blloqet float.

Shpresojmë që ky artikull të jetë i dobishëm për ju. Gëzuar lexim!

Imazhet na bëjnë të ditur menjëherë se sa interesante mund të jetë kjo faqe ose artikull për ne, të krijojë një humor dhe mund të zbulojë një temë në një mënyrë të re. Ndonjëherë një foto vlen sa një mijë fjalë.

Por nuk ia vlen të ndaheni me ta nëse nuk jeni një instagram ose një dyqan online. Është e dëshirueshme që imazhet:

• ishin informuese
• përputhen me skemën e ngjyrave të faqes tuaj
• ishin të përshtatshme

Nëse nuk keni një foto të përshtatshme, mund të përdorni të ashtuquajturat fotostoku (bankë fotografish) - një vend ku ruhen shumë fotografi, ilustrime dhe grafika vektoriale. Ka shumë burime të tilla, madje mund të keni dëgjuar për një nga më të mëdhenjtë - Shutterstock, por shkarkimet paguhen atje.

Për ata që nuk u pëlqen të paguajnë më shumë, në fund të artikullit që kemi përgatitur bonus- një listë me disa fotobanka ku mund të shkarkoni falas një sasi të madhe materialesh të bukura me cilësi të lartë 🙂

Formatet e imazhit

World Wide Web përdor kryesisht 3 lloje imazhesh:

gif(Formati i shkëmbimit grafik - formati i shkëmbimit të imazheve)

ky është formati i parë që filloi të përdoret në internet. Përparësitë e këtij formati janë prania animacionet dhe madhësia e vogël, faqja ngarkohet shpejt. Përveç kësaj, ai mbështet transparencën. Disavantazhi - përdoret vetëm 256 ngjyra(prandaj edhe madhësia është e vogël), d.m.th. nuk mund të përdoret për imazhe me ngjyra të plota.

jpeg, ai eshte jpg(Grupi i Përbashkët i Ekspertëve Fotografik - Grupi i Përbashkët i Ekspertëve Fotografik -është emri i organizatës zhvilluese

i përshtatshëm për krijimin e imazheve me ngjyra të plota, me cilësi të lartë, Fotografitë. Madhësia e imazheve të tilla është e madhe, kështu që ato zakonisht vendosin shumë ngarkesë në server. Nëse keni nevojë të kompresoni jpeg (për një peshë më të vogël imazhi), ju rekomandojmë të merrni madhësinë e imazhit përfundimtar shumëfish i tetë , kështu që humbja e cilësisë do të jetë minimale.

png(Grafika portative e rrjetit - Grafika portative e rrjetit. Shqiptohet njësoj si ping, d.m.th. )

ky format fillimisht u zhvillua për ueb, d.m.th. imazhi zakonisht peshon pak dhe nuk e ngadalëson faqen kur ngarkohet. Ky format u krijua për të zëvendësuar gif-in e vjetëruar, por ndryshe nga ai, ai nuk mbështet animacion. Png-8, si gif, përdor vetëm 256 ngjyra. Formati png-24 mbështet 16 milionë ngjyra, megjithëse pesha tashmë është mjaft e madhe. Png-32 përmban të njëjtin numër ngjyrash si png-24, dhe plus ju lejon të merrni një imazh me sfond transparent , dhe mund të rregulloni shkallën e transparencës. Kur zvogëloni madhësinë png, nuk ka humbje në cilësinë e ngjyrës.

Le të përmbledhim

gif- për animacion

jpeg- për foto

png- për ikonat, butonat, sfondet, logot, pamjet e ekranit, vizatimet, tekstet, fotot me sfond transparent

Futja e një imazhi në një skedar html

Për të shtuar një imazh në një faqe, përdorni etiketë (nga imazhi anglisht - imazh, foto). Ky është një etiketë e vetme, nuk ka nevojë për një etiketë mbyllëse. Ky etiketë përmban atribute.

atribut src(nga burimi anglisht - burimi) tregon rrugën drejt skedarit (vendi ku shtrihet imazhi). Nëse fotografia është në kompjuterin tuaj (faqja është ende në zhvillim) ose në serverin tuaj, përdorni një lidhje relative. Nëse imazhi është nga uebi, atëherë nevojitet një lidhje absolute. Si ta bëni këtë, lexoni artikullin "Lidhjet".

Pra, për të përfshirë një imazh në faqen tuaj të internetit, duhet të shkruani kodin e mëposhtëm:

atribut alt(nga anglishtja alternativë - alternativë) tregon tekstin që përdoruesi do të shohë nëse imazhi nuk ngarkohet. Rruga është specifikuar gabimisht, fotografia është fshirë, Interneti i keq - mund të ketë shumë arsye, dhe është e dëshirueshme që një person të kuptojë se çfarë fshihet pas kësaj ikone të urryer.

Motorët e kërkimit i kushtojnë vëmendje të madhe për të siguruar që ky atribut të plotësohet. Dhe verifikuesi html (një burim për të kontrolluar kodin për korrektësi) do ta perceptojë mungesën e atributit alt si një gabim. Nëse të gjitha atributet do të plotësohet, madje do të përmbajë, nëse është e mundur, fjalë kyçe - dukshmëria e faqes suaj do të rritet ndjeshëm, d.m.th. do të shfaqet më shpesh në kërkime. Kjo është nga zona e SEO dhe në këtë fazë mjafton që ne të dimë se ekziston një atribut i tillë dhe duhet të plotësohet për një faqe "live". Ndërsa faqja është në diskun tonë, është mjaft e mundur ta lëmë bosh.

Në shembullin e mëposhtëm, ne specifikuam qëllimisht një rrugë joekzistente për imazhin në mënyrë që të mund të shihni se si funksionon atributi alt

Lartësia dhe gjerësia e imazhit

Ju gjithashtu mund të vendosni lartësinë dhe gjerësinë e imazhit, nëse imazhi origjinal është p.sh. më shumë se sa keni nevojë.

Në HTML5, kjo rekomandohet të bëhet me CSS, ose atribut stili , si kjo:

Në këtë shembull, ne morëm 30% të gjerësisë, por jo imazhin origjinal, por madhësinë e dritares së shfletuesit. Kur gjerësia = 100%, atëherë imazhi hapet në gjerësinë e plotë të shfletuesit. Mbani mend këtë veçori për qind, si njësi matëse.

Nga rruga, nëse do të shkruanim vetëm gjerësinë, rezultati do të ishte i njëjtë, provoni:

< img src = "https://website/tutorials/wp-content/uploads/2016/07/panda.jpg" alt= "panda në pemë" style="width:30%;" >

Ju gjithashtu mund të vendosni gjerësinë dhe lartësinë piksele. Në rastin e pandas sonë, dimensionet origjinale të së cilës janë 1196 x 796 piksele, në mënyrë që kafsha të mos vuajë gjatë ngjeshjes, duhet të ruajmë përmasat, por këtu nuk mund të bëni pa një kalkulator. Le të themi se duam të zvogëlojmë madhësinë e figurës me 3 herë, atëherë duhet të vendosim dimensionet në 399 x 265 piksele.

Ju lutemi vini re se nëse e rrisim imazhin proporcionalisht, atëherë mjafton të specifikoni vetëm një parametër, për shembull. gjerësia. Një shfletues i zgjuar do të llogarisë automatikisht madhësinë e plotë të imazhit.

Provoni të ekzekutoni këtë kod dhe shikoni rezultatin:

< img src = "https://website/tutorials/wp-content/uploads/2016/07/panda.jpg" alt= "panda në pemë" style="width:399px;" >

Vendosni gjithmonë përmasat e imazhit. Zakonisht imazhet kërkojnë më shumë kohë për t'u ngarkuar se pjesa tjetër e kodit html. Nëse shfletuesi e di se sa hapësirë ​​duhet të rezervojë për imazhet, ai mund të vazhdojë të ngarkojë faqen pa pritur që imazhet të ngarkohen.

Pak naftalinë

Nëse ndodh që të futeni në kodin e një faqeje të krijuar në HTML-4 ose edhe më herët, do të vini re se madhësitë e imazheve janë caktuar duke përdorur speciale atributet e gjerësisë Dhe lartësia. Kjo është një metodë e vjetëruar, megjithëse ende e vlefshme në HTML5. Megjithatë, ne rekomandojmë përdorimin e stilit, sepse atributet gjerësia dhe lartësia mund të ndikohen nga stilet e brendshme ose të jashtme që do të jetojnë në shfletuesin ose skedarin tuaj CSS. Ne do të hyjmë në këtë në më shumë detaje kur të shohim CSS, por tani për tani, thjesht shikoni një shembull se si stilet ndikojnë në atributet e lartësisë dhe gjerësisë.

Ka 3 skeda në këtë dritare: në të parën shihni kodin html, në kodin e dytë CSS dhe në të fundit - si gjithmonë, rezultati. Kjo funksionon sikur skeda e parë të ishte skedari index.html, skeda e dytë ishte skedari style.css dhe skeda e tretë ishte shfletuesi. Pra, tani në CSS tonë thotë se të gjithë elementët me një etiketë img kanë një gjerësi prej 100%. Madhësitë e paracaktuara të atributeve të gjerësisë dhe lartësisë janë në piksel, kështu që nuk keni nevojë të shtoni ndonjë njësi këtu.

Dallimi në rezultat është i dukshëm 🙂

Gjithashtu në versionet e vjetra të html janë përdorur atributet e mëposhtme:

rreshtoj, e cila u përdor për të rreshtuar imazhin horizontalisht ose vertikalisht.

hspace- mbushja majtas dhe djathtas nga imazhi në përmbajtjen përreth (p.sh. teksti ose imazhi ngjitur)

vspace- margjina sipër dhe poshtë nga imazhi në përmbajtjen përreth.

kufiri- vendosni trashësinë e kornizës rreth imazhit (parazgjedhja është zero)

Tani të gjitha këto manipulime (dhe shumë më tepër) janë bërë me CSS, kështu që vendosëm të mos ju shqetësojmë me këtë këtu. Nëse jeni akoma të interesuar se si të punoni me këto atribute - shkruani në komente, ne do ta shtojmë këtë artikull 🙂

Vendosja e një imazhi në kod

Nga ku vendosim etiketën tonë varet nga mënyra se si do të shfaqet në shfletues.

Shembulli #1 - para paragrafit:

Elemente të tilla si

DHE

i referohet elementet e bllokut . Ata gjithmonë fillojnë në një linjë të re dhe zënë gjerësinë e plotë të dritares së shfletuesit. Nëse vini në vendin e parë , dhe pas tij një element blloku, si një paragraf, ai do të përfundojë në rreshtin tjetër.

Shembulli #2 - në fillim të një paragrafi

ky është një element inline, ai vendoset brenda një elementi blloku dhe nuk fillon një linjë të re. Në shembullin e mësipërm, teksti mbështillet rreth imazhit për shkak të kodit të shkruara brenda

Titrat për ilustrime

Përdoret për të etiketuar ose nënshkruar një foto në një faqe etiketë

(nga figura angleze - vizatim). Ky etiketë tregon se përmbajtje të tilla si ilustrime, fotografi, diagrame, etj. janë vendosur brenda saj.

Etiketë