Kur lundroni në internet, sigurisht që shihni foto të ndryshme, pankarta, fotografi, imazhe grafike në shumë faqe. 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 etiketës:
... Vetë dokumenti HTML synon vetëm të shfaqë imazhin e kërkuar, ndërsa pa e ndryshuar në asnjë mënyrë.
Ka disa gjëra që duhen mbajtur parasysh kur përgatitni imazhe.
1. Meqenëse një faqe interneti ngarkohet 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ë imazhit (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: multifunksionaliteti, 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 edhe një format: Imazhi 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 krijohet një dosje e veçantë për imazhet (fotografitë) në direktorinë rrënjë dhe të gjitha imazhet për sitin vendosen 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), si dhe emri i këtij skedari (imazhi) që dëshironi të futni në dokumentin html, janë të përshkruara në kodin e faqes së internetit.
Shkrimi i kodit për të futur një imazh në një faqe interneti
Për të futur imazhe në një dokument HTML, ndërtimi i specifikuar në Listimi 8.1. Ky kod futet në vendin e dëshiruar në faqen e internetit (ku dëshironi të shihni foton).
Në faqen tonë të makinës ne, kam përgatitur dhe futur dy imazhe. Ju 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 në internet:
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... I gjithë rekordi duket kështu: img src = "img / mers1.jpg", ku "img / mers1.jpg"- tregon që fotografia jonë është në dosje: img, dhe emrin e skedarit grafik (foto): 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ë pësojë shtrembërim gjeometrik.
Le të hedhim një vështrim në opsionet shtesë:
kufiri = "0"- tregon se nuk ka kufi rreth imazhit, provoni të ndryshoni 0 në një numër tjetër, për shembull 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 një imazh një lidhje, sigurohuni që të specifikoni vlerën: kufiri = "0".
gjerësia = "400"- tregon se gjerësia e figurës është: 400 ppi(përdorni një numër real për gjerësinë e imazheve tuaja).
lartësi = "209"- tregon se lartësia e figurës është: 209 ppi(vendosni një shifër reale për lartësinë e imazheve tuaja).
Nëse nuk i specifikoni parametrat: gjerësia dhe lartësia, atëherë imazhi mund të ketë shtrembërim gjeometrik.
hspace = "20"- tregon dhëmbëzimin e tekstit rreth figurës me 20 piksele.
rresht = "majtas"- kjo është një etiketë me të cilën jeni njohur tashmë ... .. drejtë- shtrirje djathtas.
alt = "(! LANG: Pamja e përparme e makinës" !}- këtu shkruhet teksti alternativ, i cili theksohet kur kaloni miun mbi imazh.
Në të njëjtën mënyrë, ne do të "fusim" imazhin e dytë në faqen e internetit, me të vetmin ndryshim se ai do të jetë i rreshtuar djathtas.
Komentet për këtë artikull (mësim):
Ju lutem më tregoni se ku saktësisht duhet të krijoni dosjen img?
Dosja img është vetëm një emër konvencional, mund ta quani si të doni, nëse vetëm ju vetë 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.
Shikoni nga afër Listimin 8.1 më sipër. Merreni tërësisht tek ju. Në direktorinë 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.
Përshëndetje. Kam të njëjtën situatë si folësi i mëparshëm: shkruaj kodin si i yti, ndryshoj vetëm emrin e skedarit: në vend të mers.1 / jpeg fus një tufë Mercedes / jpeg. Vetëm një dritare shfaqet në faqe me fjalet "Pamja e perparme e makines" siper, dhe nuk ka asnje imazh. Per mendimin tim, shfletuesi nuk mund ta gjeje rrugen e fotos ose nuk eshte e regjistruar si duhet. 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, ngjita një ovale pa foto në një ovale, një lidhje është shkruar në krye!
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ë shkruaj gjithçka si në shembullin tuaj.
Nëse keni vënë re se fotografia ime është në dosjen img
Një artikull shumë i dobishëm për "webmasters" fillestar. Paralajmërimi i vetëm është për atributin "alt". Në lidhje me foton, artikulli jep interpretimin e mëposhtëm: "alt =" (! LANG: Pamja e përparme e makinës" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}
këtu është kodi im 
PSE PSE FOTO BËHET ANË KUR DETYRA ESHTE PËR QENDRËN E SAJ?
Dhe nëse marr një imazh nga faqja e dikujt tjetër, a nuk do të jetë 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 publikimit, imazhet ishin të duhura.
Dmitri, mrekullitë nuk ndodhin, ju 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 ne cdo menyre, por ne asnje menyre. ju lutem me tregoni cfare te bej
AndreyK, ju lutem kushtojini vëmendje letrës sime. Unë nuk mund të fus imazhin në asnjë mënyrë, unë shkruaj gjithçka saktë, por në asnjë mënyrë, vetëm korniza dhe mbishkrimi zbulohen
Elvira, e kam lexuar letrën tënde, si dhe të gjitha komentet dhe letrat e tjera. Por përgjigja është ku ... te gjyshi i fshatit ???
Nuk e di pse të gjithë kanë një avull!? ju thjesht duhet të mos kopjoni kodet, pastaj të ngjitni, por t'i shkruani ato vetë dhe mustaqet do të funksionojnë.. ja teksti i fotos sime 
Kam kopjuar listën tuaj, kam futur vlerat e mia, ka një foto. Pastaj vozit në të njëjtën foto (me dorë) më poshtë, jo, ç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, pa foto. Adresa ime: [email i mbrojtur] Faleminderit.
Edhe unë kam vuajtur për një kohë të gjatë, por funksionoi! Në të vërtetë, dosja imj duhet të hapet në një dokument HTML.
Do të provoj patjetër, faleminderit
iiiiiiiiiuuuuuuu krrrrrrroshi my
gjithashtu vuajtur për një kohë të gjatë, rezulton se dosja me foto duhet të jetë në të njëjtin vend si index.html, faleminderit Elena
Andrew, fus: 
Andrew, fus: dhe nuk kam foto ne dokument, vetem mbishkrim!!! Adresa ime: [email i mbrojtur]
kodi im ... as foto. Dosja img është në të njëjtën dosje me index ... ndihmë, ju lutem. [email i mbrojtur] Faleminderit!
Epo nuk e di. I lexova të gjitha komentet. Provova 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 kodi në listë. Pse? dhe meqë ra fjala në faqe është nënvizuar kodi "mers1.jpg". Nuk mund të kopjohet me nënvizim. U përpoqa ta fusja ashtu. Gjithsesi, nuk ka asnjë foto. Per Cfarë bëhet fjalë?
Ne pyesim veten dhe ne vetë përgjigjemi. Fotoja nuk u fut për një kohë të gjatë. Doli: 1, në vend të etiketës src, kisha srk 2. u ngatërrova kur bëra rrugën për në foto. Riemërtoi dosjen në IMG dhe gjithçka funksionoi. Kalova gati dy ditë për të, por ia vlente.
Dashuri, por tani do ta mbani mend këtë për pjesën tjetër të jetës suaj :) vetëm talleni, sigurisht, mos u ofendoni. Por seriozisht, nëse një person nuk lë një adresë kthimi, atëherë është pothuajse e pamundur nga ana ime ta ndihmoj atë.
Përshëndetje dhe më tregoni se si të vendos një imazh sipër, të dytën poshtë majtas dhe të tretën nga poshtë djathtas))))
........... cili është gabimi im për të humbur një imazh?
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ë karaktere latine.
Por këtu është gjëja e çuditshme ... ndërsa unë e quajta dosjen me emra të ndryshëm, fotografia nuk donte të shfaqej, megjithëse shtegu ishte shkruar saktë. Sapo telefonova IMG, u shfaqa menjëherë. Çfarë është kapja?
Marina, nuk ka kapje apo provokim :). Në kodin në Listën 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ë mashtrimi.
Po mundohem të fus një imazh !!! Unë përshkruaj gjithçka përmes një fletore, çdo gjë po e bëj siç duhet, ndoshta nuk ia vlen përmes një fletore?
Dhe unë hap gjithçka në Mozilla Fire Fox e fundit))
Rruga e fotografisë sime dhe C: Documents and SettingsdenisDesktopkoffevinogradwwwImg dhe vetë fotografia quhet gif gjithashtu 1.gif është përfshirë në emër ... Unë e bëj këtë në bllokun e shënimeve
beri dhe shtegu i plote nuk del nga myshku nuk e sheh foton e eksploruesit me theksimet e kryqit te kuq
Denis, riemëto 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 shkronjat e mëdha si duhet.
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]
Dhe si të bëni një fotografi në mënyrë që të zmadhohet ose zvogëlohet?
Për disa arsye, ai nuk e përqendron as figurën. Çfarë është kapja? .. Kodi është: 
Është e vështirë të gjesh një faqe në internet që nuk përmban imazhe dhe kjo nuk është për t'u habitur, sepse ato janë pjesa kryesore e dizajnit të faqes, e cila i jep asaj një pamje të paharrueshme. Një dizajn i mirë uebsajti është çelësi i zhvillimit të suksesshëm të tij. Ekziston vetëm një etiketë për shfaqjen e imazheve në html
.
1. Sintaksa e etiketës ![]()
Përshkrimi i imazhit"src =" URL "[atributet]>
Ju lutemi vini re se kjo etiketë është e vetme dhe nuk kërkon etiketa mbyllëse .
Kërkohet atributi src. Ai tregon adresën e imazhit të shfaqur. Ju mund të specifikoni një URL absolute ose relative. Nëse nuk specifikoni adresën ose shkruani me një gabim, fotografia nuk do të shfaqet.
Alt = "(! LANG: përshkrim" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}
Pjesa tjetër e atributeve janë opsionale, ne do t'i shikojmë ato më poshtë. Së pari, le të japim një shembull të thjeshtë të nxjerrjes së një imazhi në html.
2. Si të futni një fotografi në html
Për të futur një imazh në html, përdorni etiketën ... Ne shqyrtuam sintaksën pak më lart. Le të japim disa shembuj praktikë.
Shembulli 2.1. Duke përdorur etiketën ![]()
...
Ky kod
Në këtë shembull, ne specifikuam adresën e drejtpërdrejtë të imazhit nga imazhet në Yandex Photo. Më shpesh, tregohen lidhjet me imazhet që ndodhen në të njëjtën URL. Për shembull, src = "/ img / kartinka.jpg", d.m.th. tregohet adresa relative.
Është e mundur të vendosni disa fotografi në një rresht. Nëse ato nuk përshtaten në një linjë, atëherë kalimi në tjetrin do të ndodhë automatikisht.
Shembulli 2.2. Shfaqja e disa imazheve në html njëra pas tjetrës
...
Konvertuar në faqe në sa vijon:
Nëse do të kishim vendosur një imazh tjetër, atëherë do të ishte në një linjë të re, pasi nuk do të përshtatej më në këtë.
Shembulli 2.3. Përdorimi i tekstit alt në img
Rekomandohet të shkruani tekst alternativ (atribut alt) në etiketë për t'u siguruar kundër rastit që fotografia nuk është e disponueshme. Më poshtë është një shembull duke përdorur tekstin alt. Në rastin e parë, ne nuk specifikuam madhësinë e figurës, por në të dytën, ne e bëjmë.
...
Konvertuar në faqe në sa vijon:
Nëse do të vendosnim një imazh tjetër, ai do të ishte në një linjë të re, pasi nuk do të përshtatej më në këtë linjë.
Tani le të hedhim një vështrim më të afërt në të gjitha atributet e etiketës.
.
3. Atributet dhe vetitë e etiketës ![]()
1. Property align = "parameter" - përcakton shtrirjen e figurës. Kjo vlerë gjithashtu ndikon në mënyrën se si rrjedh teksti rreth figurës. Mund të marrë parametrat e mëposhtëm:
- shtrirje majtas - majtas
- mes - përafrimi i mesit të figurës me vijën bazë të linjës aktuale
- fund - përafron kufirin e poshtëm të figurës me tekstin përreth
- sipër - kufiri i sipërm i figurës është i lidhur me elementin më të lartë të linjës aktuale
- shtrirje djathtas - djathtas
Shembulli 3.1. Përafrimi djathtas i një imazhi në html
...
Konvertuar në faqe në sa vijon:
2. Vetia alt = "(! GJUHË: tekst" - подсказка/описание картинки. Выполняет сразу две важные функции:!}
- Jep një aluzion për pezullimin
- Nëse imazhet janë të çaktivizuara në shfletues, atëherë shfaqet ky tekst
Ky atribut është gjithashtu shumë i rëndësishëm kur renditni imazhet në Yandex Images dhe Google Images. Ai duhet shtuar në çdo imazh, pasi është një nga faktorët në algoritmet e motorëve të kërkimit.
Shembulli 3.2. Shfaqja e një imazhi në html me një kornizë (kufi)
...
Konvertuar në faqe në sa vijon:
4. Property bordercolor = "color" - vendos ngjyrën e kufirit që mbështillet rreth imazhit. Ka kuptim vetëm nëse atributi i kufirit është më i madh se 0.
Shembulli 3.3. Dalja e imazhit në html me një kufi me ngjyrë
...
Rezultati mund të shihet pak më lart.
shënimAtributet e kufirit dhe ngjyrës kufitare mund të vendosen në stilet CSS për img:
...
5. Lartësia e vetive = "NUMRI" - cakton lartësinë e figurës: ose në piksel ose në përqindje. Për shembull, nëse imazhi ka një madhësi 400x200, dhe ne specifikojmë një lartësi prej 150 pikselësh, atëherë ai kompresohet në 300x150 (25% më pak), d.m.th. proporcionalisht.
6. Gjerësia e vetive = "NUMRI" - përcakton gjerësinë e figurës: ose në pixel ose në përqindje. Për shembull, nëse imazhi ka një madhësi prej 1000x800 dhe gjerësia është specifikuar si 1200 piksele, atëherë ai zgjerohet automatikisht me 20% në 1200x960.
7. Vetia hspace = "NUMRI" - vendos zhvendosjen horizontale të imazhit në piksel nga objektet e tjera html.
8. Property vspace = "NUMBER" - vendos zhvendosjen vertikale të imazhit në pixel nga objektet e tjera html.
shënimNë vend të hspace dhe vspace, ju këshilloj të përdorni kufirin e vjetër dhe të provuar (mund të lexoni më shumë rreth tij në mësimin mbi përshkrimin e stileve html). Më lejoni t'ju kujtoj shkurt:
- margin-top: X px; (X - dhëmbëzimi i sipërm)
- margin-fund: Y px; (Y është dhëmbëzimi në fund)
- margjina-majtas: L px; (L - dhëmbëzimi majtas)
- margin-djathtas: R px; (R - dhëmbëzimi djathtas)
Vendos zhvendosjet nga objektet në piksel. Vlerat negative janë të lejuara. Parazgjedhja ose trashëgohet nga paraardhësi ose 0.
Për shembull. Mbushja është 50 piksel në të majtë dhe 10 pikselë në krye.
...
Konvertuar në faqe në sa vijon:
Në këtë shembull, mbushja në krye është 10 pikselë dhe në të majtë është 50 pikselë.
9. Property class = "class_name" - mund t'i caktoni një klasë një imazhi për të vendosur stilin për të gjitha imazhet e kësaj klase.
4. Si të bëni një foto një lidhje
Kjo pyetje lind për webmasterët e rinj. Në fakt, gjithçka është shumë e lehtë. Për ta bërë këtë, thjesht kornizoni etiketën
etiketë (lidhje).
për shembull
...
5. Si të rrumbullakosni këndet e një fotografie
I nderuar lexues, tani keni mësuar shumë më tepër rreth etiketës html img. Tani ju këshilloj të kaloni në mësimin tjetër.
26.06.2015
Pershendetje te gjitheve!
Ne vazhdojmë të mësojmë me zell bazat e HTML.
Në këtë tutorial do t'ju tregoj si të futni një fotografi në HTML- dokument, si të bëni një sfond fotografie, madhësia e figurës, rrjedha e tekstit rreth figurës, si të përafrohet fotografia. Të gjitha mundësitë e listuara do të konsolidohen me shembuj dhe rezultate.
Pra, imazhet në faqet e internetit mund të jenë në sfond dhe normal. Cili është ndryshimi midis sfondit dhe imazhit normal?
Imazhi i sfondit vendoset si sfond, në krye të të cilit mund të futni fotografi të tjera, tekst, tabelë, etj.
Imazhi i rregullt
do të largojë elementët e tjerë të faqes nga vetja (fotografi të tjera, tekst, tabelë, etj.). Duke përdorur një shembull, do të shihni dhe kuptoni gjithçka më vonë.
Për faqet e internetit, formatet e rekomanduara të imazhit janë JPEG (JPG), GIF dhe PNG.
○ Si të bëni një sfond fotografie nëHTML
Për të vendosur një foto si sfond, për një etiketë
ju duhet të regjistroni atributin "background":
Tani le të shohim një shembull të plotë. Ngjit skedarin e figurës "fon.jpg" pranë skedarit HTML.
dhe ngjisni këtë kod në skedarin HTML:
Jpg ">
Rezultati do të jetë si ky:
Kujdes
Emri i pasaktë:
Emri i saktë:
○ Si të futni një foto nëHTML
Për të futur një fotografi në një dokument HTML, përdorni etiketën me parametrin "src", i cili përcakton rrugën ose adresën në foto.
Tani le të shohim një shembull të plotë. Fusni skedarin e figurës "kartinka.jpg" pranë skedarit HTML dhe shkruani këtë kod në skedarin HTML:
Përshëndetje, kjo është faqja ime e parë në sit.
Rezultati do të jetë si ky:
Kujdes: emri i figurës duhet të shkruhet latinisht, përndryshe fotografia nuk do të shfaqet.
Emri i pasaktë:
Emri i saktë:
Unë mendoj se keni kuptuar gjithçka deri në këtë pikë. Tani le të përpiqemi të kombinojmë dy shembuj së bashku. Le të bëjmë një sfond në faqen e internetit, të fusim një imazh dhe tekst.
Jpg "> 
○ Si të futni një foto nëse ndodhet në dosje "img"ose"imazhe"?
Nëse fotografia është në dosjen "img" ose "images", atëherë duhet të specifikoni shtegun nga skedari HTML në dosjen "img" ose "images", dhe më pas thjesht shkruani emrin e figurës me shtesën. Do të duket kështu:
Nëse fotografia është në një sit ose blog tjetër, atëherë duhet të specifikoni adresën e faqes dhe, nëse është e nevojshme, dosjen ku ndodhet fotografia. Epo, sigurisht, duhet të specifikoni emrin e imazhit me shtrirjen e tij.
Postimi i mëparshëm
Postimi i radhës
Imazhet në HTML kanë fituar prej kohësh popullaritet të merituar midis ndërtuesve të faqeve të internetit. Ato përdoren në mënyrë aktive në hartimin e faqeve të internetit, për të plotësuar vizualisht informacionin tekstual, për të krijuar lidhje, dhe Zoti e di se çfarë tjetër.
Një komponent i rëndësishëm i çdo imazhi është madhësia e tij (vëllimi, pesha) në kilobajt, sepse sa më i madh të jetë, aq më gjatë do të ngarkohet faqja HTML. Prandaj, në internet ekzistojnë tre formate më të zakonshme që përmbajnë raportin optimal të madhësisë me cilësinë e figurës - këto janë GIF, JPG (JPEG) dhe PNG.
Etiketë apo si të futni një imazh në HTML?
Për të futur një imazh në një faqe HTML, përdorni etiketën ... Kjo është më e zakonshme inline (në linjë, niveli i linjës) element, pra nuk krijon prurje vijash para dhe pas vetes. Por nuk mund të ketë përmbajtje, pasi
nuk ka një etiketë fundore dhe është bosh.
Etiketë janë dy atributet e kërkuaraështë src, e cila specifikon shtegun (URL) për në imazh dhe alt, i cili shfaq tekst alternativ kur imazhet janë të çaktivizuara në shfletues. Nëse vështirë se harroni të specifikoni src, sepse pa të imazhi thjesht nuk do të ngarkohet, atëherë edhe webmasterët me përvojë shpesh harrojnë alt.
Atributi src përdor saktësisht të njëjtat vlera adresash si atributi href i etiketës , vetëm ato çojnë në imazhe. Dhe, sigurisht, mund të specifikoni adresat absolute dhe relative.
Një shembull i futjes së imazheve në një faqe HTML
Të tillë janë zogjtë e ndryshëm.
Rezultati në shfletues
Ndryshimi i madhësisë së imazheve në HTML
Si parazgjedhje, të gjithë shfletuesit shfaqin imazhe në madhësitë e tyre natyrore. Por duke përdorur atributet e gjerësisë dhe lartësisë së etiketës ju mund të ndryshoni lartësinë dhe gjerësinë e tyre. Vlerat tregohen me numra, që nënkuptojnë dimensionet në piksel (nuk keni nevojë të vendosni shkronjat px në fund të numrave) ose në përqindje, në këtë rast, duhet të vendosni një shenjë% në fund.
Shembull i ndryshimit të madhësisë së imazheve
Rezultati në shfletues
Ndryshimi i madhësisë nuk duhet të teprohet, sepse kur zvogëlohen vizualisht imazhet, madhësia e tyre në kilobajt nuk zvogëlohet, kështu që ato marrin të njëjtën kohë për t'u ngarkuar. Dhe kur imazhet zmadhohen, mund të shfaqen turbullime dhe shtrembërime të tjera.
Megjithatë, është mirë që gjithmonë të specifikoni dimensionet e imazheve, edhe nëse nuk i ndryshoni përmasat e tyre. Në këtë rast, shfletuesit nuk do të presin që ata të ngarkohen plotësisht, por do të ndajnë hapësirë për ta dhe do të vazhdojnë të ngarkojnë faqen më tej, dhe imazhet do të ngarkohen në fund. Kjo i lejon përdoruesit të mos ulen në pritje të lodhshme dhe të fillojnë të përdorin faqen më shpejt. Për më tepër, nëse shfletuesit i njohin menjëherë dimensionet, atëherë kur faqja ngarkohet, ata nuk do të duhet të përshtaten me imazhet që shfaqen gjatë rrugës, gjë që do të ndihmojë në shmangien e kërcimeve dhe dridhjeve të panevojshme të elementeve HTML përreth.
Përafrimi i imazheve
Në versionet më të vjetra të HTML, për të lidhur imazhet me një etiketë ekzistonte atributi align i njohur tashmë për ju, por në HTML-në moderne nuk është, kështu që ne do të përdorim edhe atë tashmë të njohur për ju, dhe, shpresojmë, stilin tashmë vendas.
style = "float: majtas" - e shtyn imazhin në anën e majtë të bllokut që përmban imazhin dhe i gjithë teksti rrjedh rreth tij në të djathtë.
style = "float: djathtas" - shtrydh imazhin në anën e djathtë të bllokut dhe teksti rrjedh rreth tij në të majtë.
Një shembull i rreshtimit të një imazhi në të majtë.
Paragrafi i parë.
Teksti përpara figurës.
Pas fotos.
Paragrafi i fundit.
Rezultati në shfletues
style = "e qartë: majtas" - prish rrjedhën e imazheve të rreshtuara majtas.
style = "e qartë: djathtas" - prish rrjedhën e imazheve të rreshtuara djathtas.
style = "e qartë: të dyja" - prish rrjedhën e imazheve të rreshtuara në të dyja anët.
Shembull i ndërprerjes së rrjedhës së imazhit
Paragrafi i parë.
Teksti përpara figurës.
Pas fotos.
Paragrafi i fundit.
Rezultati në shfletues
Teksti pop-up i këshillës së veglave për imazhet në HTML
Ashtu si shumë etiketa të tjera HTML, ekziston një atribut titulli që shfaq një udhëzues teksti kur vendosni kursorin e miut mbi imazh.
titulli = "(! GJUHË: Çdo tekst."!}
Imazhet e sfondit
Imazhet përdoren si sfond në HTML jo më rrallë se ndryshimet e thjeshta të ngjyrës së sfondit që kemi kaluar tashmë. Dhe kjo është mjaft logjike, sepse me ndihmën e imazheve mund të bëni një sfond jo uniform dhe më shumëngjyrësh.
Zakonisht, fotografitë janë të vogla në madhësi dhe vëllim (në kilobajt) si një shembull për sfondin, dhe kjo është e gjitha sepse shfletuesit trajtojnë imazhet e sfondit ndryshe nga fotografitë e zakonshme. Ata e marrin këtë fotografi të vogël dhe e krijojnë të gjithë ose të gjithë faqen HTML.
Në versionet e mëparshme të HTML, disa etiketa kishin një atribut të veçantë të sfondit që lejonte një imazh të sfondit. Por fakti i çështjes është se vetëm disa, dhe larg nga të gjitha, për shembull, një etiketë blloku
<тег style="background:url("адрес картинки")">...
Sigurohuni që të vendosni adresën e figurës në thonjëza të vetme siç tregohet. Dhe nëse doni të krijoni një imazh të sfondit për të gjithë faqen, atëherë përdorni stilin brenda etiketës
.<тег style="background:#цвет url("адрес картинки")">...
Vini re se nuk keni nevojë të vendosni një pikëpresje në mes, pasi të dyja vlerat i referohen sfondit. Me këtë hyrje, shfletuesi shfaq kryesisht imazhin e sfondit, jo ngjyrën. Tani imagjinoni që imazhi juaj i sfondit është një foto me ngjyra të errëta dhe ju e keni bërë ngjyrën e tekstit në faqe të bardhë. Dhe gjithçka duket e mrekullueshme ... Derisa përdoruesi të fikë shfaqjen e imazheve në shfletues. Atëherë sfondi i tij ka shumë të ngjarë të bëhet i bardhë, si ngjyra e tekstit tuaj.
Shembull për krijimin e imazheve të sfondit në HTML
Yjësitë në distancë deri në qiell
Shumë kanë qenë të dënuar me mendime të kota.
Mendojeni mirë, kurseni mendjen tuaj -
Më të mençurit janë në një qorrsokak.
Omar Khayyam.
Tabelat
Më shpesh, tabelat në HTML përdoren jo për qëllimin e tyre të synuar - duke shfaqur të dhëna tabelare, por për të krijuar një kornizë globale faqesh. Kjo do të thotë, krijohet një tabelë, shtrihet në të gjithë gjerësinë e faqes, dhe më pas bëhet një menu në kolonën e majtë të saj, një tjetër bëhet në kolonën e djathtë, mesatarisht vendoset informacioni bazë etj.
Ekzistojnë tre lloje të paraqitjes: tabelare, për të cilën ju thashë më lart; shtresa (blloku), kërkon një nivel të ndërmjetëm të njohurive të stileve (CSS) dhe të kombinuara. Në shumë aspekte, paraqitja e bllokut është ende e preferueshme, prandaj, nëse projektuesi i paraqitjes mund ta bëjë detyrën si me ndihmën e tabelave ashtu edhe me ndihmën e blloqeve, atëherë zakonisht zgjidhet kjo e fundit.
Si të futni foto në faqen html
Për të futur një imazh-foto (foto ose ndonjë grafikë) në sajt, duhet të specifikoni shtegun drejt burimit (tek skedari-foto) duke përdorur etiketën img Etiketa img është një shkurtim për imazhin anglez (imazh, imazh) , Burimi - në anglisht burim, shkurtuar 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. Është e mundur të përdoren fotografi të animuara (GIF).
Rruga drejt figurës specifikohet absolute ose relative, në varësi të vendit ku ndodhet fotografia tek ju 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ëtij imazhi është: Gjerësia = "499" 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 atyributs. gjerësia dhe lartësia... Për shembull, për ta bërë fotografinë të duket 2 herë më e vogël, specifikoni gjerësinë (gjerësinë) = "250" dhe lartësinë (lartësinë) = "217". Dhe shtoni një kufi me trashësi 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 detyrueshëm që specifikon URL-në e imazhit (adresën, vendndodhjen e tij)IMG SCR = "img / kartinka.gif"
rreshtoj- Përafron imazhin në njërën anë të dokumentit
align = "majtas" - Shtrirje majtas
align = "djathtas" Right align
align = "poshtë" Bottom align
align = "lart" Rreshtimi lart
align = "middle" Rreshto në mes
alt- Shfaq tekst në imazh. Alternativë ndaj grafikës nëse nuk ngarkohet
kufiri- Vendos trashësinë e kornizës rreth imazhit në pixel. Si parazgjedhje, nuk përdoret asnjë kufi.
gjerësia gjerësia e imazhit në piksel ose përqindje
lartësia- lartësia e figurës në piksel ose përqindje
hspace dhëmbëzimi horizontal
vspace dhëmbëzimi vertikal
Shembuj të rreshtimit të fotografive me tekstin duke përdorur HTML
Fotografia vendoset përpara tekstit pa specifikuar asnjë atribut. Nuk ka formatim teksti. Rezultati është ai që shihni. Fotografia ndodhet në të majtë të tekstit duke përdorur atributin align me vlerën e majtë... 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. Në foto ka një flutur, një flutur, një flutur. Dhe tekst, tekst, tekst për një flutur, një flutur, një flutur. Shumë afër imazhit. Fotografia nuk duhet të bashkohet me tekstin, edhe nëse teksti është shkruar thjesht si tekst, në mënyrë që të demonstrojë qartë rrjedhën e tekstit rreth figurës. Është shumë e rëndësishme që fotografia në ekran të mos shkrihet me tekstin, në mënyrë që të mos acarojë, të kënaqë syrin dhe të jetë në vendin e vet. Një sasi e mjaftueshme teksti ofron një pamje më të qartë të shembullit.
Ka rregulla për paraqitjen në botimin e librit, duhet të ketë rregulla për paraqitjen dhe për ndërtimin e faqes. Fotografia ndodhet në të majtë të tekstit duke përdorur atributinrreshtoni me vlerën LEFT, zhvendosur nga teksti - 20 piksele horizontalisht.
align = "majtas" hspace = 20 Mbushja shtohet duke përdorur atributet HSPACE(offset horizontal) dhe VSPACE(dhënia vertikale). Në këtë rast, dhëmbëzimi vertikal është 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 megjithëse webmasterët aktualisht po binden të braktisin atributet HTML dhe të kalojnë tërësisht në CSS, mendoj se thjeshtësia e kësaj metode i jep të drejtën të ekzistojë.
KODI Fotografia ndodhet në të djathtë të tekstit në lidhje me përdorimin e atributit radhiten për vlerënE DREJTË, shtoi dhëmbëzimin duke përdorur atributet HSPACE(kompensimi horizontal). 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ë në të majtë, tregohet drejtë dhe fotografia futet jo para tekstit, por afërsisht në mes. Formatimi me atribute rreshtoj(radhitje lineare) dhe me mbushje horizontale dhe vertikale jep një rezultat krejtësisht normal. Fotografia është e mbështjellë me tekst në të majtë, lart dhe poshtë (nëse ka shumë tekst). Shtrirja e tekstit nga fotografia majtas, lart dhe poshtë është e barabartë me 20 piksele. Gjithçka është ashtu siç treguam në kod.
Dy lloje të shtrirjes (majtas dhe djathtas) përdoren më shpesh, dhe pjesa tjetër ... Pothuajse të gjitha të tjerat konsiderohen të vjetëruara. Në faqet moderne, të gjitha imazhet (dhe në të vërtetë i gjithë dizajni) stilohen duke përdorur fletë stili kaskadë (CSS)
Teksti, teksti, vazhdimi i tekstit
Fotografia ndodhet duke përdorur atributin align me kuptimin e mesme... Shtuar dhëmbëzimi duke përdorur atributet HSPACE(offset horizontal) dhe VSPACE... Duket kështu, kodi është shkruar më poshtë .. Këtu përfundojmë me 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 për ndonjë arsye nuk është ngarkuar. Titulli është mbishkrimi i titullit në foto. Shfaqet kur kaloni miun mbi foto.
Nëse po krijoni një faqe vetëm për veten tuaj, atëherë nuk mund t'i përdorni këto atribute. Nëse faqja është e destinuar për njerëzit, atëherë këto atribute duhet të plotësohen për të dhënë një përshkrim të qartë 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ë imazhet, t'i renditin ato sipas fjalëve kyçe dhe t'i shfaqin ato sipas kërkesës së përdoruesit. Nga rruga, Yandex madje paralajmëron se nëse një fotografi nuk ka një përshkrim kuptimplotë, ajo nuk do të përfshihet në kërkim. Indeksohen vetëm formatet standarde grafike (JPEG, GIF dhe PNG). Imazhet e sfondit dhe imazhet e zgjeruara me një skenar nuk indeksohen.
KODI I imazhit me alt dhe titull të plotësuar
Si të bëni një foto 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 fundore
