Në këtë artikull do t'ju tregoj për etiketat HTML shumë të rëndësishme për futjen e fotografive dhe grafikëve në një faqe, sepse pa këtë është e vështirë të krijoni një faqe të bukur dhe të mirë.
Fotografitë do ta bëjnë faqen tuaj unike dhe do të dallojë nga turma. Sidoqoftë, mbani mend se përdorimi i tepërt i grafikëve në faqe mund të jetë një faktor i keq.
Mos e mbingarkoni faqen tuaj html me fotografi, faqja duhet të jetë e lehtë dhe të mos trembë vizitorët. Vizitori duhet të asimilojë gjithmonë informacionin kryesor dhe të mos shpërqendrohet, të fusë imazhe në HTML vetëm kur është e nevojshme.
në faqen e atributeve të etiketës BODY, kam thënë tashmë se fotografitë mund të jenë sfondi i një faqeje html, dhe tani do t'ju tregoj se si të njëjtat foto mund të përdoren në një nivel më të lartë se sfondi.
Dhe kështu, për të futur një imazh në një faqe HTML, ju nevojitet etiketa , i cili ka atributin më të rëndësishëm SRC. Ky atribut kërkohet për të specifikuar adresën për imazhin. Le të themi se duhet të vendosni imazhin image.jpg diku në faqen html, dhe imazhi ynë do të jetë në të njëjtën dosje (disaksion) me faqen, pastaj duhet të shkruani kodin e mëposhtëm html:
Nëse imazhi dhe faqja html janë në dosje ose drejtori të ndryshme, atëherë duhet të shkruani shtegun e imazhit në lidhje me faqen. Për shembull, faqja jonë html ndodhet në dosjen ose lajmet e direktorisë, në të njëjtën direktori ose dosje ka një nëndrejtori (dosje) pop, në të cilën ndodhet imazhi ynë image.jpg, pastaj për ta futur atë, duhet të shkruani si kjo:
Përveç atributit src të etiketës Ka disa atribute opsionale, por të rëndësishme:
- gjerësia - gjerësia e imazhit (mund të specifikoni pikselë ose përqindje);
- lartësi — lartësia e imazhit (mund të specifikoni pikselë ose përqindje).
Nëse nuk i specifikoni këto atribute, shfletuesi do të ngarkojë madhësinë aktuale të imazhit. Sidoqoftë, nuk duhet ta teproni me vlerat e këtyre atributeve, sepse rritja e gjatësisë ose gjerësisë së figurës mund ta shtrembërojë atë, gjë që do ta prishë atë, për shembull, një fotografi e një personi, ku përmasat e një personi do të ndryshim.
Siç kam shkruar tashmë, madhësitë e imazhit mund të specifikohen si në piksel ashtu edhe në përqindje. Unë do të jap vetëm një shembull:
një shembull tjetër i kodit html:
Ka raste kur aftësia për të shfaqur grafika, përfshirë fotografitë, është e çaktivizuar në shfletues dhe në mënyrë që faqja juaj të mos humbasë kuptimin e saj, përdoret atributi alt, në të cilin ne shkruajmë tekst alternativ nëse fotografia nuk ngarkohet në faqe. kodi html për shembull:
- majtas - fotografia do të jetë në të majtë, dhe teksti që është pranë saj do të jetë në të djathtë;
- djathtas - imazhi do të jetë në të djathtë, dhe teksti që është pranë tij do të jetë në të majtë.
Këtu është kodi HTML:
Teksti pranë një imazhi.
dhe shfletuesi do të nxjerrë sa vijon:
Teksti pranë një imazhi.
Kodi HTML për vlerën e duhur:
Teksti pranë një imazhi.
faqja html do të duket si kjo:
Teksti pranë figurës.
Për të parandaluar që teksti të mbështillet rreth një imazhi, mund të përdorni etiketën BR të përmendur më parë në faqen e formatimit të tekstit HTML. Nga rruga, etiketa BR ka një atribut të qartë, me vlerat e veta të vlerës:
- majtas - mos e mbështillni tekstin, i cili do të rreshtohet në të majtë;
- djathtas - mos e mbështillni tekstin, i cili do të rreshtohet në të djathtë;
- të gjitha - mos e mbështillni tekstin, i cili do të rreshtohet në skajet e majtë dhe të djathtë.
Pa atributin align, teksti mbështillet si parazgjedhje në të djathtë të imazhit dhe pothuajse në të. Nëse dëshironi që teksti të mos mbështillet fort rreth imazhit, mund të përdorni atributet e mëposhtme:
- vspace - bën kufijtë e sipërm dhe të poshtëm në pixel;
- hspace - Krijon margjinat anësore (majtas dhe djathtas) në pixel.
Këtu është një kod i thjeshtë html për shembull:
Kjo është një foto kaq e bukur.
Çfarë ndodh në këtë shembull, përpiquni ta shihni vetë.
Ju gjithashtu mund të krijoni një kufi rreth imazhit duke përdorur atributin kufi dhe të specifikoni madhësinë e tij në pixel. Sa më e madhe të jetë vlera, aq më e madhe është korniza rreth figurës. Kodi HTML do të jetë si ky:
Faqja html do të duket si kjo:
Kam shkruar etiketat bazë HTML të nevojshme për të futur imazhe në një faqe html. Më pas, unë do t'ju tregoj se si të krijoni lidhje në HTML, si dhe si ta bëni një imazh një lidhje.
Data e publikimit: 15 maj 2012Shumica e faqeve të internetit përmbajnë grafikë. Kjo ju lejon të paraqisni informacionin në një mënyrë të gjallë dhe vizuale. Në shumë raste është më mirë të tregosh një foto sesa të japësh një përshkrim të gjatë teksti.
Ka dy mënyra për të vendosur grafikë në një faqe:
- futni fotografi individuale;
- duke mbushur sfondin me një imazh.
Në çdo rast, imazhi grafik merret nga skedari.
Futja e një imazhi grafik nga një skedar i formatit grafik në një faqe bëhet duke përdorur etiketën
(nga anglishtja, imazh - imazh) duke specifikuar adresën e skedarit si një argument të atributit SRC:
Adresa e skedarit grafik është ose një URL ose një emër skedari, opsionalisht me një shteg. Për shembull, për të shfaqur një skedar grafik logotip.jpg, shkruani etiketën
Për të rritur shpejtësinë e biteve të një grafike në një etiketë
mund të përdorni atributin (parametrin shtesë) LOWSRC, i cili merr si argument adresën e skedarit grafik. Mund të krijoni dy skedarë grafikë: njëri (p.sh. logotip.jpg) përmban një imazh me rezolucion të lartë dhe tjetri (p.sh. logotip.gif) përmban një imazh me rezolucion të ulët. Pastaj etiketa
I thotë shfletuesit që fillimisht të shkarkojë skedarin logotip.gif dhe më pas ta zëvendësojë me skedarin logotip.jpg pasi të merret.
Një mënyrë tjetër për të përshpejtuar ngarkimin e grafikëve është vendosja e dimensioneve të zonës drejtkëndore në të cilën do të vendoset imazhi grafik, duke përdorur atributet WIDTH (gjerësi) dhe HEIGHT (lartësi), të matura në pixel. Nëse specifikoni këto atribute, atëherë shfletuesi së pari do të ndajë hapësirë për grafikët, do të përgatisë paraqitjen e dokumentit, do të shfaqë tekstin dhe vetëm atëherë do të ngarkojë grafikën. Vini re se shfletuesi ngjesh ose shtrin imazhin për t'u përshtatur brenda kornizës së madhësisë së specifikuar. Një shembull i përcaktimit të dimensioneve të imazhit:
Grafikat zakonisht përdoren në lidhje me tekstin, kështu që lind detyra për të përafruar tekstin dhe imazhin grafik. Ky problem zgjidhet duke përdorur atributin RRESHTOJ etiketë
duke përdorur argumente të ndryshme. Për shembull, ne mund të dëshirojmë që teksti të mbështillet rreth një imazhi në të djathtë ose në të majtë. Zakonisht fotografia është e ngulitur afër tekstit, e cila mund të jetë e shëmtuar. Për të shmangur këtë, mund të vendosni margjina boshe rreth ilustrimit. Fushat krijohen duke përdorur atribute VSPACE për kufijtë e sipërm dhe të poshtëm dhe HSPACE për kufijtë anësor në një etiketë
. Argumentet e këtyre atributeve përcaktohen si numra që përcaktojnë madhësinë e kufijve në piksel. Për të anuluar mbështjelljen e tekstit rreth grafikëve, përdorni etiketën
.
Etiketa e mëposhtme vendos mbështjelljen e grafikëve nga skedari logotip.jpg në të djathtë (imazhi do të jetë në të majtë të tekstit):
Nëse dëshironi të vendosni imazhin në të djathtë të tekstit, atëherë ju duhet atributi RRESHTOJ caktoni një argument E DREJTË:
Për të vendosur kufijtë rreth imazhit, duhet të shkruani një etiketë shikimi:
Këtu numrat 20 dhe 10 përcaktojnë madhësinë e margjinave.
Konsideroni një shembull të ndarjes së grafikëve dhe teksteve. Hapni Notepad (Notepad i redaktuesit të tekstit) Windows. Shkruani kodin HTML në të duke përdorur etiketat e diskutuara më sipër. Më poshtë është një program që nxjerr disa tekst dhe grafikë. Si skedar grafik, mund të përdorni cilindo nga skedarët që keni. Këtu përdoret skedari logotip.gif.
<Н1>Teksti mbështillet rreth grafikëve në të djathtë
Ky është një shembull i kombinimit të tekstit dhe grafikës.
Teksti i programit HTML mund të shkruhet në çdo redaktues teksti. Kjo përdor etiketat e shënimit të tekstit.
Ky tekst shfaqet nga një paragraf i ri. Për ta bërë këtë, ne përdorëm një etiketë të veçantë.
Provoni të ndryshoni madhësinë e dritares së shfletuesit tuaj. Vini re se si ndryshon pozicioni i tekstit.
Oriz. 657. Teksti mbështillet rreth imazhit në të djathtë
Mundësi të gjera për pozicionimin e saktë të imazheve (si dhe elementëve të tjerë) në faqe ofrohen nga tabelat Dhe stilet. Këta elementë HTML do të diskutohen më vonë. Për shembull, mund të përcaktoni një tabelë pa korniza të dukshme dhe të vendosni fotografi, tekste dhe elementë të tjerë në qelizat e kësaj tabele.
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
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ë
Etiketë
Ju lutemi vini re se si parazgjedhje shfletuesi ka disa cilësime stili për etiketën
Pra, ne kemi mësuar
- shtoni imazhin në faqe: duke përdorur etiketë
- mësuam atributet e kërkuara për këtë etiketë: src për të treguar rrugën dhe alt për të përshkruar foton
- kuptoni se cili format është më i miri për çfarë të përdorni: jpeg për foto, png për logot dhe pamjet e ekranit, gif për animacion
- si të vendosni më mirë madhësinë e figurës: duke përdorur atribut stili me parametra gjerësia Dhe lartësia
- kuptoi se si do të shfaqet imazhi në varësi të vendit në kod: veçmas, nëse përpara një elementi blloku dhe me mbështjellje, nëse brenda një elementi blloku (për shembull
)
Dhe që të kemi me çfarë të punojmë, duhet t'i marrim këto imazhe nga diku, duke mos shkelur të drejtat e autorit të askujt.
Pra, është koha për një bonus 🙂
Lista e fotobankave falas
Para se të fillojmë, ju lutemi vini re se çdo pamje e ekranit këtu është një lidhje me një faqe interneti. Si të bëni imazhe si lidhje, lexoni artikullin "Lidhjet".
Në pixabay do të gjeni 680,000 imazhe falas për çdo temë, të cilat shpërndahen nën licencën Creative Commons CCO (CC Zero), d.m.th. ato mund të përdoren, shpërndahen, modifikohen për çdo qëllim, qoftë edhe komercial.
Janë 390 mijë foto dhe foto falas në photobank. Është më e vështirë të gjesh një imazh të lezetshëm këtu, por ka edhe ekzemplarë të mirë. Reklamimi i fotobankave me pagesë shpërqendron në rregull. Ne e vendosëm këtë burim në vendin e dytë për shkak të numrit të imazheve, por për sa i përket miqësisë, ndoshta do të jetë i fundit në renditjen tonë.
Stoku i fotografive ka mbi 250,000 foto falas, kryesisht me cilësi të lartë. Mund ta shkarkoni edhe pa regjistrim. E disponueshme vetëm në anglisht.
Shumë foto me stil të licencuara nën CC Zero. Mund ta shkarkoni pa regjistrim. Kjo fotobankë do t'ju kuptojë vetëm në anglisht.
Faqja u krijua nga një dizajner indian i uebit i cili e kupton se sa e vështirë mund të jetë të gjesh një foto cilësore. Të gjitha fotot janë marrë personalisht nga ai, dhe ju mund të bëni çfarë të doni me to. Atij i pëlqen të fotografojë ushqime, desktop, kompjuterë dhe të gjitha llojet e objekteve. Kërko - vetëm në anglisht.
imazhe HTML shtuar në faqet e internetit duke përdorur një etiketë . Përdorimi i grafikës i bën faqet e internetit tërheqëse vizualisht. Imazhet ndihmojnë për të përcjellë më mirë thelbin dhe përmbajtjen e një dokumenti në internet.
Përdorimi i etiketave HTML
Futja e imazheve në një dokument HTML
1. Etiketë ![]()
Elementi përfaqëson një imazh dhe përmbajtjen e tij rezervë, e cila shtohet duke përdorur atributin alt. Që nga elementi
është inline, rekomandohet ta vendosni brenda një elementi blloku, për shembull,
Ose
Etiketë ka një atribut të kërkuar src, vlera e të cilit është një shteg absolute ose relative drejt imazhit:
Për Tag atributet e mëposhtme janë në dispozicion:
| atribut | Përshkrimi, vlera e pranuar |
|---|---|
| alt | Atributi alt shton tekst alternativ në imazh. Shfaqet në vendin ku shfaqet imazhi përpara se të ngarkohet ose kur grafikët janë të çaktivizuara, dhe shfaqet gjithashtu si këshillë mjeti kur vendosni kursorin e miut mbi imazh. Sintaksa: alt="(!LANG:përshkrimi i imazhit" . !} |
| origjinë të kryqëzuar | Atributi crossorigin ju lejon të ngarkoni imazhe nga burime nga një domen tjetër duke përdorur kërkesat CORS. Imazhet e ngarkuara në kanavacë duke përdorur kërkesat CORS mund të ripërdoren. Vlerat e lejuara: anonim - Kërkesa me origjinë të kryqëzuar bëhet duke përdorur një kokë HTTP dhe nuk kalohen kredenciale. Nëse serveri nuk i jep kredencialet serverit nga i cili kërkohet përmbajtja, atëherë imazhi do të korruptohet dhe përdorimi i tij do të kufizohet. use-credentials - Kërkesa për origjinë të kryqëzuar bëhet me kredencialet e kaluara. Sintaksa: crossorigin="anonim" . |
| lartësia | Atributi height specifikon lartësinë e imazhit. Mund të specifikohet në px ose % . Sintaksa: lartësia: 300 px. |
| ismap | Atributi ismap tregon se imazhi është pjesë e një imazhi harte të vendosur në server (një imazh i hartës është një imazh me zona të klikueshme). Kur klikoni në imazhin e hartës, koordinatat dërgohen në server si një varg pyetjesh URL. Atributi ismap lejohet vetëm nëse elementi Sintaksa: ismap. |
| përshkrim i gjatë | URL-ja e përshkrimit të zgjeruar të imazhit, duke mbushur atributin alt. Sintaksa: longdesc="http://www.example.com/description.txt" . |
| src | Atributi src specifikon rrugën drejt imazhit. Sintaksa: src="flower.jpg" . |
| madhësive | Cakton madhësinë e imazhit në varësi të cilësimeve të ekranit. Funksionon vetëm nëse atributi srcset është vendosur. Vlera e atributit është një ose më shumë vargje të ndara me presje. |
| srcset | Krijon një listë të burimeve të imazhit që do të zgjidhen bazuar në rezolucionin e ekranit. Mund të përdoret me ose në vend të atributit src. Vlera e atributit është një ose më shumë vargje të ndara me presje. 
|
| harta e përdorimit | Atributi usemap përcakton një imazh si një hartë imazhi. Vlera duhet të fillojë me karakterin #. Vlera lidhet me vlerën e emrit ose atributit id të etiketës |
| gjerësia | Atributi width specifikon gjerësinë e imazhit. Mund të specifikohet në px ose % . Sintaksa: gjerësia: 100%. |
1.1. Adresa e imazhit
Adresa e imazhit mund të specifikohet plotësisht (URL absolute), për shembull:
url (http://anysite.ru/images/anyphoto.png)
Ose nëpërmjet një rruge relative nga dokument ose direktoria rrënjësore faqe:
url (../images/anyphoto.png) - rruga relative nga dokumenti,
url(/images/anyphoto.png) është një shteg relative nga direktoria rrënjësore.
Kjo interpretohet si më poshtë:
../ - do të thotë të ngjitesh një nivel, në direktoriumin rrënjë,
imazhe/ - shkoni te dosja me imazhe,
anyphoto.png - tregon një skedar imazhi.
1.2. Dimensionet e imazhit
Pa vendosur përmasat e imazhit, vizatimi shfaqet në faqe në madhësinë e tij aktuale. Ju mund të modifikoni dimensionet e një imazhi duke përdorur atributet gjerësi dhe lartësi. Nëse vendoset vetëm një nga atributet, i dyti do të llogaritet automatikisht për të ruajtur përmasat e figurës.
1.3. Formatet e skedarëve grafikë
Formati JPEG (Grupi i Përbashkët i Ekspertëve të Fotografisë). Imazhet JPEG janë ideale për fotografi, ato mund të përmbajnë miliona ngjyra të ndryshme. Imazhet kompresohen më mirë se GIF, por teksti dhe zona të mëdha me ngjyra të forta mund të bëhen me njolla.
Formati GIF (Formati i shkëmbimit të grafikëve). Ideale për kompresimin e imazheve që kanë zona me ngjyra të forta, të tilla si logot. GIF-të ju lejojnë të vendosni një nga ngjyrat në transparente, duke lejuar që sfondi i një faqeje ueb të shfaqet përmes një pjese të imazhit. GIF-të mund të përfshijnë gjithashtu animacione të thjeshta. GIF-të përmbajnë vetëm 256 nuanca, gjë që i bën imazhet të duken me njolla dhe joreale, si postera.
Formati PNG (Grafika portative e rrjetit). Përfshin veçoritë më të mira të formateve GIF dhe JPEG. Ai përmban 256 ngjyra dhe ju lejon të bëni një nga ngjyrat transparente, ndërsa ngjeshni imazhet në një madhësi më të vogël se një skedar GIF.
Formati APNG (Grafika e rrjetit portative të animuar). Një format imazhi i bazuar në formatin PNG. Ju lejon të ruani animacion dhe gjithashtu mbështet transparencën.
Formati SVG (Grafika vektoriale e shkallëzuar). Një vizatim SVG përbëhet nga një grup formash gjeometrike të përshkruara në formatin XML: një vijë, një elips, një shumëkëndësh, etj. Të dyja grafika statike dhe e animuar janë të mbështetura. Grupi i veçorive përfshin transformime të ndryshme, maska alfa, efekte filtri, aftësinë për të përdorur shabllone. Imazhet SVG mund të ndryshohen përmasat pa humbur cilësinë.
Formati BMP (Foto Bitmap). Përfaqëson një bitmap të pakompresuar (origjinal) shablloni i të cilit është një rrjet drejtkëndor pikselësh. Një skedar bitmap përbëhet nga një kokë, një paletë dhe të dhëna grafike. Kreu ruan informacione rreth imazhit grafik dhe skedarit (thellësia e pikselit, lartësia, gjerësia dhe numri i ngjyrave). Paleta specifikohet vetëm në ato skedarë Bitmap që përmbajnë imazhe të paletuara (8 bit ose më pak) dhe përbëhen nga jo më shumë se 256 elementë. Të dhënat grafike përfaqësojnë vetë figurën. Thellësia e ngjyrës në këtë format mund të jetë 1, 2, 4, 8, 16, 24, 32, 48 bit për pixel.
Formati ICO (ikona e Windows). Formati i ruajtjes së ikonave të skedarëve në Microsoft Windows. Gjithashtu, ikona e Windows përdoret si ikonë në faqet e internetit në internet. Është një fotografi e këtij formati që shfaqet pranë adresës së faqes ose faqerojtësit në shfletues. Një skedar ICO përmban një ose më shumë ikona, madhësia dhe ngjyra e secilës prej të cilave vendosen veçmas. Madhësia e ikonës mund të jetë çdo, por ikonat më të zakonshme janë ikonat katrore me anët 16, 32 dhe 48 pikselë.
2. Etiketë
Etiketë
Atributi emri është i disponueshëm për etiketën, e cila specifikon emrin e hartës. Vlera e atributit të emrit për etiketën
Elementi
3. Etiketë
Etiketë përshkruan vetëm një pikë të nxehtë brenda hartës së imazhit nga ana e klientit. Elementi nuk ka një etiketë mbyllëse. Nëse një hotspot mbivendoset me një tjetër, atëherë do të zbatohet lidhja e parë nga lista e hotspoteve.
| atribut | Përshkrim i shkurtër |
|---|---|
| alt | Specifikon tekst alternativ për zonën aktive të hartës. |
| koordinatat | Përcakton pozicionin e rajonit në ekran. Koordinatat specifikohen në njësi gjatësie dhe ndahen me presje: për rrethi- koordinatat e qendrës dhe rrezja e rrethit; për drejtkëndësh- koordinatat e këndit të sipërm të majtë dhe të poshtëm të djathtë; për shumëkëndëshi— koordinatat e kulmeve të shumëkëndëshit në rendin e duhur, rekomandohet gjithashtu të specifikohen koordinatat e fundit të barabarta me të parat, për plotësimin logjik të figurës. |
| Shkarko | Plotëson atributin href dhe i tregon shfletuesit se burimi duhet të ngarkohet në momentin që përdoruesi klikon në lidhje, në vend që, për shembull, ta hapë atë më parë (si një skedar PDF). Duke i dhënë një emër një atributi, ne i japim kështu një emër objektit të ngarkuar. Lejohet të përdoret një atribut pa specifikuar vlerën e tij. |
| href | Specifikon URL-në për lidhjen. Mund të specifikohet një adresë lidhjeje absolute ose relative. |
| hreflang | Specifikon gjuhën e dokumentit të lidhur në ueb. Përdoret vetëm në lidhje me atributin href. Vlerat e pranuara janë një shkurtim i përbërë nga një palë shkronjash që tregojnë kodin e gjuhës. |
| media | Përcakton për cilat lloje pajisjesh do të optimizohet skedari. Vlera mund të jetë çdo pyetje mediatike. |
| rel | Mbush atributin href me informacion në lidhje me marrëdhënien midis dokumentit aktual dhe dokumentit të lidhur. Vlerat e pranuara: alternative - një lidhje me një version alternativ të dokumentit (për shembull, një faqe e printueshme, një përkthim ose një pasqyrë). autor - një lidhje me autorin e dokumentit. faqeshënuesi është një URL e përhershme që përdoret për faqeshënuesit. ndihmë - lidhje për të ndihmuar. licencë - Një lidhje me informacionin e të drejtës së autorit për këtë dokument ueb. Next/Prev - tregon lidhjen midis URL-ve individuale. Nëpërmjet këtij shënimi, Google mund të përcaktojë që përmbajtja e këtyre faqeve është e lidhur në një sekuencë logjike. nofollow - ndalon motorin e kërkimit të ndjekë lidhjet në këtë faqe ose në një lidhje specifike. noreferrer - tregon se kur ndjek një lidhje, shfletuesi nuk duhet të dërgojë një titull të kërkesës HTTP (Referrer), i cili përmban informacione se nga cila faqe ka ardhur vizitori i faqes. prefetch - tregon që dokumenti i synuar duhet të ruhet në memorie, d.m.th. Shfletuesi në sfond ngarkon përmbajtjen e faqes në cache-in e tij. kërkimi Tregon që dokumenti i synuar përmban një mjet kërkimi. etiketë - Përcakton një fjalë kyçe për dokumentin aktual. |
| forma | Përcakton formën e pikës së nxehtë në hartë dhe koordinatat e saj. Mund të marrë vlerat e mëposhtme: rect është një zonë aktive drejtkëndore; rrethi - zonë aktive në formën e një rrethi; poli - zonë aktive në formën e një shumëkëndëshi; e paracaktuar - pika e nxehtë zë të gjithë zonën e imazhit. |
| objektiv | Përcakton se ku do të ngarkohet dokumenti kur klikohet lidhja. Merr vlerat e mëposhtme: _self - faqja ngarkohet në dritaren aktuale; _blank - faqja hapet në një dritare të re të shfletuesit; _parent - faqja ngarkohet në kornizën prind; _top - Faqja është ngarkuar në një dritare të plotë të shfletuesit. |
| lloji | Përcakton llojin MIME të skedarëve të lidhjes, d.m.th. zgjerimi i skedarit. |
4. Një shembull i krijimit të një harte imazhi
1) Ne shënojmë imazhin burimor në zonat aktive të formës së dëshiruar. Koordinatat e zonës mund të llogariten duke përdorur një program të përpunimit të fotografive, për shembull, Adobe Photoshop ose Bojë.
Oriz. 1. Një shembull i shënjimit të imazhit për krijimin e një harte 2) Vendosni emrin e hartës duke e shtuar atë në etiketë
Jpg" alt="(!LANG:flowers_foto" width="680" height="383" usemap="#flowers">
!}
Oriz. 2. Një shembull i krijimit të një harte imazhi, kur klikoni në një lule, shkoni në një faqe me një përshkrim
Imazhet në faqet e internetit mund të përdoren në dy mënyra: si sfond dhe si imazh i pavarur. Rekomandohen tre formate grafike: JPEG, GIF dhe PNG. Të gjithë shfletuesit i mbështesin ato, formate të tjera mund të kërkojnë mjete speciale.
Si rregull, të gjitha imazhet për sitin ruhen në një dosje të veçantë, për shembull, imazhe. Dhe shtigjet drejt imazheve shkruhen në të njëjtën mënyrë si në lidhjet. Nëse keni harruar hidhini një sy.
Në të gjithë shembujt pasues, shtigjet për në imazhe do të shkruhen bazuar në faktin se imazhet janë në dosjen e imazheve dhe faqet janë në dosjen e faqes, e cila është në të njëjtin nivel.
Imazhet e sfondit
Imazhi i sfondit mbush të gjithë hapësirën e elementit për të cilin është vendosur. Pra, duke specifikuar në etiketë atribut sfond = "fon.gif", imazhi fon.gif do të mbushë të gjithë dritaren e shfletuesit.
Shembull kodi: Rezultati
Kur vendosni imazhin e sfondit të një dokumenti, mos harroni të specifikoni edhe parametrin bgcolor. Kjo për faktin se përdoruesi mund të ketë të çaktivizuar ngarkimin e imazheve dhe ai nuk do të shohë sfondin tuaj të bukur. Pastaj shfletuesi do të përdorë parametrin bgcolor.
Vendosja e imazhit
Etiketa përdoret për të vendosur imazhe në faqe.
, i cili ka një parametër të vetëm të kërkuar src Një që specifikon URL-në e imazhit.
Shembull kodi:
img tag Pjesa tjetër e përmbajtjes së dokumentit
Rezultati:
Pjesa tjetër e përmbajtjes së dokumentit
Dakord, teksti pranë figurës nuk duket shumë i bukur.
Në mënyrë që imazhet tona të duken ashtu siç duam ne, duhet t'i rreshtojmë ato. Dhe parametri do të na ndihmojë në këtë rreshtoj.
Ky parametër ka disa vlera. Le t'i shqyrtojmë të gjitha me shembuj.
Shembull i kodit me një parametër rresht = "majtas"
Etiketa img me parametrin align="majtas" Imazhi është në të majtë, dhe teksti mbështillet rreth tij në të djathtë, dhe ky tekst mund të përfshijë disa rreshta.
Rezultati:
Fotografia është në të majtë, dhe teksti rrjedh rreth saj në të djathtë, dhe ky tekst mund të përfshijë disa rreshta.
Shembull i kodit me një parametër rresht = "djathtas"
Etiketa img me parametrin align="right" Fotografia është në të djathtë, dhe teksti rrjedh rreth saj në të majtë, dhe ky tekst mund të përfshijë disa rreshta.
Rezultati:
Fotografia është në të djathtë, dhe teksti rrjedh rreth saj në të majtë, dhe ky tekst mund të përfshijë disa rreshta.
Shembull i kodit me një parametër align = "lart"
Etiketa img me align="lart" Kufiri i sipërm i imazhit është rreshtuar me elementin më të lartë në vijën aktuale. Imazhi duket se është i ngulitur në një vijë. Nëse imazhi është i madh, atëherë linja zgjerohet në këtë lartësi.
Rezultati:
Kufiri i sipërm i figurës përafrohet me elementin më të lartë të linjës aktuale. Imazhi duket se është i ngulitur në një vijë. Nëse imazhi është i madh, atëherë linja zgjerohet në këtë lartësi.
Shembull i kodit me një parametër align="texttop"
Etiketa img me parametrin align="texttop" Kufiri i sipërm i figurës përafrohet me elementin më të lartë të tekstit të rreshtit aktual (gërma e madhe e rreshtit).
Rezultati:
Kufiri i sipërm i figurës përafrohet me elementin më të lartë të tekstit në rreshtin aktual (gërma e madhe e rreshtit).
Shembull i kodit me një parametër rresht = "në mes"
Etiketa img me parametrin align="middle" Përafron mesin e imazhit me vijën bazë të linjës aktuale.
Rezultati:
Përafron mesin e figurës me vijën bazë të vijës aktuale. * Shkronja e madhe është krijuar për qartësinë e ndryshimit midis mesit të mesit
Shembull i kodit me një parametër align="absmiddle"
Etiketa img me parametrin align="absmiddle" Përafron mesin e figurës me mesin e vijës aktuale.
Rezultati:
Përafron mesin e figurës me mesin e vijës aktuale.
Shembull i kodit me një parametër rresht = "poshtë"
Etiketa img me parametrin align="bottom" Përafron kufirin e poshtëm të figurës me vijën bazë të linjës aktuale.
Rezultati:
Përafron kufirin e poshtëm të figurës me vijën bazë të vijës aktuale.
Shembull i kodit me një parametër align="absbottom"
Etiketa img me parametrin align="absbottom" Përafron kufirin e poshtëm të figurës me kufirin e poshtëm të linjës aktuale.
Rezultati:
Përafron kufirin e poshtëm të figurës me kufirin e poshtëm të vijës aktuale.
Nëse duam që teksti të vendoset nën figurë, atëherë duhet të përdorim etiketën
me parametër qartë Një që çaktivizon mbështjelljen. Mbështjellja mund të çaktivizohet në anën e djathtë (djathtas), në anën e majtë (majtas) dhe në të dy anët (të gjitha).
Shembull kodi:
Ndalimi i mbështjelljes rreth fotos
Elementë të tjerë të dokumentit
Rezultati:
Elementë të tjerë të dokumentit
Madhësitë e imazhit
Çdo imazh ka një madhësi të specifikuar në pixel. Kur futni një imazh në një faqe, mund t'ju duhet të zvogëloni madhësinë e imazhit origjinal.
Për këtë, etiketa
ka opsione gjerësia- gjerësia dhe lartësia- lartësia. Ato përcaktohen në piksel ose si përqindje (përqindja e gjerësisë së ekranit)
Kur ngarkoni një imazh, shfletuesi do ta shkallëzojë automatikisht imazhin tuaj në gjerësinë dhe lartësinë e specifikuar. Vetëm mbani në mend se vendosja e pasaktë e parametrave mund të çojë në një ndryshim në përmasat e figurës, dhe për rrjedhojë në shtrembërimin e saj.
Shembull kodi:
Rezultati:
Ndarja e imazhit nga teksti
Ju ndoshta keni vënë re se teksti ngjitet shumë ngushtë me fotot. Nuk është gjithmonë e bukur. Ka mundësi për të zgjidhur këtë problem. hspace- kompensimi horizontal dhe vspace- kompensim vertikal. Kufijtë janë vendosur në pixel.
Shembull kodi:
Etiketa img e futur Pjesa tjetër e përmbajtjes së dokumentit nuk ngjitet më në imazh.
Rezultati:
Teksti alternativ
Nëse përdoruesi ka çaktivizuar modalitetin e shkarkimit të imazhit, atëherë në vend të figurës ai do të shohë një kryq të kuq (në Internet Explorer) ose një ikonë tjetër (në shfletues të tjerë). Do të ishte mirë t'i jepte atij një aluzion të asaj që tregohet në foto. Për ta bërë këtë, përdorni parametrin alt. Teksti nga ky parametër do të shfaqet në vend të figurës (nëse modaliteti i ngarkimit të imazhit është i çaktivizuar). Nëse shfaqet imazhi, ky parametër jep një sugjerim kur rri pezull mbi miun, megjithëse jo në të gjithë shfletuesit.
