Si të futni një fotografi në HTML - redaktimi, shtrirja, atributet. Imazhet në HTML

Pershendetje te gjitheve!!! Në këtë artikull, do të mësoni se si të futni një fotografi në një dokument HTML. Nuk është aspak e vështirë. Por së pari, do të doja t'ju jap disa udhëzime për imazhet në një faqe interneti.

Këshilla: kur postoni fotografi në një faqe interneti, mos u mashtroni me foto të animuara, pasi kjo e largon vëmendjen e lexuesit nga gjëja më e rëndësishme - teksti. Përdorni më mirë një foto të rregullt pa animacion.
Mundohuni të përdorni fotografi unike në faqet tuaja të internetit. Ju mund të lexoni se si të bëni një fotografi unike dhe mund të bëni fotografi të bukura.

Le të fillojmë.

Si të futni një foto në html?
Siç thashë - nuk ka asgjë të komplikuar këtu, shtoni këtë kod html.

kartinka është emri i fotos
jpg është një shtesë e fotografisë. Shtesa mund të jetë gif, png, bmp.

Nëse fotografia ndodhet në dosjen e imazheve, atëherë rruga për në foto do të jetë si më poshtë:

imazhe - emri i dosjes ku ndodhet fotografia "kartinka.jpg".

Nëse fotografia është në një faqe tjetër, atëherë kodi do të jetë si ky:

https: //www.site është adresa e faqes.

Shembull :

Për ta bërë këtë, thjesht mbyllni figurën midis elementit të referuar:

Atributet për imazhet

ALIGN - ky atribut është menduar për rrjedhën horizontale ose shtrirjen e figurës.
majtas - rreshtimi majtas, teksti do të mbështillet në të djathtë.
drejtë - rreshtuar djathtas, teksti rrjedh majtas.

Rezultati :

rreshtuar djathtas

HSPACE - zhvendosje horizontale nga fotografia (në pixel).
VSPACE - zhvendosje vertikale nga fotografia (në pixel).

Rezultati :

dhëmbëzimet nga fotografia

HEIGHT - lartësia e imazhit (pikselë).
WIDTH - gjerësia e imazhit (pikselë).

Rezultati :

TITULLI - ky eshte titulli i fotos. Titulli do të shfaqet nëse lëvizni kursorin e miut mbi foto.

title = "(! LANG: Përshëndetje të gjithëve - sajti !!!!}">

Rezultati :

titulli i fotos

BORDER - ky atribut është përgjegjës për madhësinë e kufirit rreth figurës. Kornizat shfaqen në raste të tilla kur i bëni një foto një lidhje. Nëse e vendosni atributin BORDER në zero, kufiri nuk do të shfaqet.

Rezultati :

Dhe nëse ndryshojmë vlerën e kufirit në 5:

Rezultati :

Çdo foto mund të përdoret si sfond. Për ta bërë këtë, shkruani atributin e sfondit në etiketën e trupit.

sfond = "your_background.jpg">

Teksti mund të shfaqet në sfondin e figurës.

Shembull :

Rezultati :

Foto si sfond

Me këtë shënim, mund të përfundoni temën "Si të futni një fotografi në HTML", por e di që shumë janë të interesuar për pyetjen, por si ta vendosni një fotografi në qendër.
Për të vendosur foton në qendër, mjafton të aplikoni këtë truk:

Tani kjo është e gjitha e sigurt. Kalimi në mësimin tjetër.

Puna me imazhe në HTML (si të futni një foto, të ndryshoni madhësinë e saj, të bëni një foto një lidhje).

Futja e një imazhi

Një etiketë e paçiftuar përdoret për të futur një imazh në një dokument html e cila vendoset aty ku duhet të futet imazhi në dokument. Ky etiketë ka një parametër të kërkuar src, vlera e së cilës tregon rrugën drejt imazhit të dëshiruar në drejtorinë e faqes tuaj.

Për shembull, për të vendosur një imazh në një faqe:

rreshti vendoset në vendin e duhur në dokument:

Kjo e bën shfletuesin të kuptojë se në direktorinë rrënjë të faqes www.mysite.com ekziston një nëndrejtori img 1.png

Këtu kemi specifikuar rrugën e plotë (ose adresë absolute) te imazhi. Dhe ju mund të specifikoni adresa relative Imazhet:

Shfletuesi interpreton një linjë të tillë si më poshtë: në drejtorinë ku ndodhet ky dokument html, ekziston një nëndrejtori img, ai përmban një imazh të quajtur 1.png, e cila duhet të vendoset në faqe.

Dhe këtu është një shembull i specifikimit të adresës relative të një imazhi nëse faqja juaj ka një strukturë më komplekse dhe shembulli i mëparshëm nuk funksionon:

Shfletuesi interpreton një linjë të tillë si më poshtë: një kombinim i karaktereve ../ do të thotë që nga drejtoria ku ndodhet ky dokument html, ju duhet të ngjiteni një nivel; dhe pastaj si në shembullin e mëparshëm: në direktoriumin ku kemi përfunduar ka një nëndrejtori img, ai përmban një imazh të quajtur 1.png, e cila duhet të vendoset në faqe.

Për arsye sigurie, preferohet të tregoni adresën relative të imazhit, përveç nëse vendosni një imazh në faqen tuaj që ndodhet në një faqe tjetër.

Dimensionet e imazhit

Madhësia e çdo imazhi përcaktohet nga dy parametra: gjerësia dhe lartësia. Etiketë ka parametra përkatës: gjerësia dhe lartësia... Këto parametra marrin vlera në pixel (px).

Ju mund të vendosni dimensionet e vërteta të figurës:

Kjo është opsionale, por e dobishme sepse përshpejton pak procesin e ngarkimit të faqes nga shfletuesi (shfletuesi nuk duhet t'i llogarisë vetë këto vlera). Nëse dimensionet e figurës vendosen menjëherë në parametrat e etiketës , atëherë një hapësirë ​​në faqe do të ndahet për këtë imazh dhe struktura e faqes nuk do të ndryshojë kur ngarkohet - teksti do të kërcejë, për shembull.

Ose mund ta zmadhoni ose zvogëloni imazhin duke caktuar parametrat gjerësia dhe lartësia vlera të tjera. Për më tepër, nëse doni të ndryshoni në mënyrë proporcionale të dy parametrat, mjafton të specifikoni vlerën e re vetëm për njërin prej tyre dhe thjesht të hiqni të dytin. Shfletuesi do ta llogarisë atë automatikisht.

Për shembull, për të zmadhuar imazhin tonë me 1.5 herë, mund të shkruani:

ose

Rezultati do të jetë një:

Më shumë parametra gjerësia dhe lartësia mund të marrë vlera si përqindje. Por! Vini re se kjo është një përqindje e madhësisë së dritares së shfletuesit. Në këtë rast, ju gjithashtu mund të specifikoni vetëm një parametër dhe të hiqni të dytin.

Për shembull, nëse duam që imazhi të zërë saktësisht gjysmën e faqes sonë në gjerësi, duhet të shkruajmë sa vijon:

Dhe ne marrim:

Kornizë rreth imazhit

Etiketë ka edhe një parametër opsional kufiri... Mund të përdoret për të vendosur trashësinë e kornizës rreth figurës. Si parazgjedhje, trashësia e kornizës së imazhit është zero, d.m.th. pa kornizë.

Për shembull, kjo është mënyra se si mund të shtoni një kufi me 3 piksel në foton tonë:

Ja çfarë do të na tregojë shfletuesi:

Ngjyra e kufirit përputhet me ngjyrën e tekstit në faqen e vendosur duke përdorur parametrin teksti etiketë (Shih Mësimin 6. Karakteristikat e faqes - Parametrat e etiketës së trupit), si parazgjedhje është e zezë.

Dhe nëse nuk doni të shihni kornizën, detyrojeni parametrin kufiri vlera zero:

Teksti alternativ

Teksti alternativ shfaqet nga shfletuesi në vend të figurës derisa të ngarkohet. Ose në vend të një fotografie, nëse për ndonjë arsye nuk u shfaq.

Kur dhe nëse fotografia u ngarkua, tekst alternativ do të shfaqet kur vendosni kursorin e miut mbi këtë foto.

Për të shtuar tekst alternativ, përdorni parametrin alt etiketë të cilit i është caktuar një vlerë vargu, i cili duhet të vendoset në thonjëza.

Mund të krijoni tekst alt me ​​shumë rreshta.

Për ta bërë këtë, thjesht futni një ndërprerje rreshti në dokumentin html.

teksti ">

Shtrirja e imazhit

Për një imazh, si për një paragraf, ekziston koncepti i shtrirjes në lidhje me tekstin dhe imazhet e tjera në faqe. Ju gjithashtu mund të vendosni llojin e shtrirjes duke përdorur parametrin rreshtoj etiketë .

Më poshtë është një tabelë e vlerave të mundshme të parametrave rreshtoj:

Parametrat krye teksti, krye, e mesme, absmid, bazë, fund vendosni shtrirjen vertikale të imazhit. Dhe parametrat majtas dhe drejtë le të dijë shfletuesi se cila anë duhet të jetë teksti mbështjellë imazh.

Mbushje rreth imazhit

Për të parandaluar që teksti të rrjedhë afër imazhit gjatë mbështjelljes, mund të vendosni mbushje rreth imazhit. Kjo mund të bëhet duke përdorur parametra hspace(mbushje majtas dhe djathtas) dhe vspace etiketa (mbushje e sipërme dhe e poshtme). .

Shembulli i mëposhtëm tregon një rast kur teksti rrjedh rreth një imazhi, me imazhin e rreshtuar në të majtë dhe të mbushur rreth 5 pikselë:

Në qytetin e Stokholmit, në rrugën më të zakonshme, në shtëpinë më të zakonshme jeton familja më e zakonshme suedeze me emrin Svanteson. Kjo familje përbëhet nga babai më i zakonshëm, nëna më e zakonshme dhe tre djemtë më të zakonshëm - Boss, Bethan dhe Kid.

Këtu është rezultati në shfletues:

Në qytetin e Stokholmit, në rrugën më të zakonshme, në shtëpinë më të zakonshme jeton familja më e zakonshme suedeze me emrin Svanteson. Kjo familje përbëhet nga babai më i zakonshëm, nëna më e zakonshme dhe tre djemtë më të zakonshëm - Boss, Bethan dhe Kid.

Thyerja e një imazhi në copa

Ka raste kur një imazh i madh duhet të vendoset në një faqe. Por atëherë faqja do të marrë shumë kohë për t'u ngarkuar. Çfarë duhet bërë?

Një nga të mundshmet mënyra për të dalë nga situata - ndani imazhin në pjesë dhe vendoseni në faqe duke përdorur një tabelë. Dhe në mënyrë që imazhi të duket në tërësi, është e nevojshme të hiqni kufirin nga tabela dhe të gjitha dhëmbëzat brenda dhe midis qelizave. ato. caktoni parametrat përkatës të etiketës

vlera null: kufiri = "0", hapësira e qelizave = "0", mbushje celulare = "0".

Në shembullin e mëposhtëm, ne e kemi ndarë imazhin në 4 pjesë. Kështu do të duket tabela:

Dhe këtu është rezultati:

Ditë të mbarë për të gjithë, miqtë e mi të dashur, lexuesit dhe mysafirët e blogut tim. Është si një pushim, por nuk ka kohë të mjaftueshme për asgjë. Gjithçka është disi me nxitim. Por ky është një fenomen i përkohshëm, së shpejti gjithçka do të qetësohet. Dhe me ju sot ne do të vazhdojmë të kuptojmë bazat e html. Miq, çfarë mendoni, pa të cilën çdo faqe interneti do të jetë pa fytyrë, gri dhe e mërzitshme? Është e drejtë, pa përmbajtje grafike, qoftë foto, logo apo sfond.

Pra, futja e një imazhi në html është gjithashtu një nga komponentët më të rëndësishëm, kështu që kushdo që do të krijojë faqe interneti vetë duhet ta dijë patjetër. Kjo është pikërisht ajo që do të bëjmë sot me gjithë këtë orgji)))

Epo, le të fillojmë. Siç e keni kuptuar tashmë nga titulli, etiketa është përgjegjëse për futjen e një imazhi. , por ka dy nuanca:

1. Etiketa është single, kështu që nuk keni nevojë ta mbyllni
2. Etiketa funksionon gjithmonë në lidhje me atributin, i cili tregon rrugën drejt figurës.

Në përgjithësi, le të shohim një shembull për të konsoliduar të gjithë këtë veprim. Jam i saktë? Shkarkoni materialet për mësimin dhe hapni skedarin html në notepad. Dhe tani, para tekstit kryesor, shkruani sa vijon:

Gjithçka. Një hyrje kaq e shkurtër do të na sigurojë një fotografi në faqen tonë të internetit. Provoni ta shkruani në një dokument.

Tani ruani skedarin dhe ekzekutoni atë në shfletuesin tuaj. Le të shohim se çfarë marrim. E kam marrë kështu.

Atributet

Siç thashë më lart, etiketa img vjen me atributin src. Epo, mendoj se e keni kuptuar tashmë, kështu që le të eksplorojmë pjesën tjetër. Ka ku mund të ktheheni. Atributet këtu janë vetëm dofigischa. Më fal për frëngjishten time).

Alt

Nëse papritmas fotografia për ndonjë arsye nuk ngarkohet ose është e paarritshme, do të shihni tekstin që është shkruar në vlerën e atributit Alt. Zakonisht këtu shkruhet ajo që tregohet në foto, d.m.th. nëse përshkruhet diçka për kombësinë, atëherë në alt është më mirë të shkruani "Burra dhe gra të kombësive të ndryshme". Për shembull, duket kështu:

Si rezultat, nëse fotografia për ndonjë arsye nuk mund të shfaqet, atëherë mbishkrimi ynë do të dalë.

Në parim, mund të mos shkruani asgjë si tekst alternativ, por është më mirë të lini vetë atributin, edhe nëse është bosh.

Gjerësia dhe lartësia

Për ata që dinë anglisht, është e lehtë të merret me mend se këto dy atribute janë përgjegjëse për gjerësinë dhe lartësinë e imazhit. Vendosa t'i kombinoj këto dy gizmos në një artikull, pasi ato kryejnë funksione të ngjashme, mund të thuhet - vëllezër (ose motra).

Gjerësia është përgjegjëse për gjerësinë e figurës, dhe vetë madhësia vendoset në vlerat e saj. Në përgjithësi, nëse keni një fotografi, për shembull, 640 * 480 piksele, dhe duhet ta shfaqni atë në sitin 320 * 240, atëherë thjesht duhet të bëni sa më poshtë:

Gjithçka. Tani, kur ruani dokumentin dhe e hapni atë me një shfletues, do të shihni një imazh miniaturë. Dhe vini re se ne kemi ndryshuar vetëm parametrin e gjerësisë, dhe fotografia është ulur proporcionalisht, d.m.th. lartësia është ulur automatikisht.

Lartësia, siç mund ta merrni me mend, është përgjegjëse për lartësinë e figurës. Gjithçka funksionon saktësisht njësoj këtu, por vertikalisht. Le të bëjmë të njëjtën foto, thjesht mos vendosni gjerësinë, por vendosni vetëm lartësinë.

Ne ruajmë dhe shkojmë te dokumenti. Siç mund ta shihni, imazhi është zvogëluar në të njëjtën madhësi si në shembullin e mëparshëm, edhe pse këtë herë kemi vendosur vetëm lartësinë. Ju tashmë e keni kuptuar që gjithçka këtu funksionon brenda kornizës së përmasave, prandaj, në parim, nuk ka kuptim të vendosni të dy parametrat.

Për hir të interesit, le të përpiqemi të vendosim atributet e gjerësisë dhe lartësisë në të njëjtën kohë, thjesht vendosim atyre parametra joproporcionalë. Epo, atëherë do të shohim se çfarë do të marrim.

Ne kursejmë dhe tani shikojmë atë që na është dhënë. Hmm, kjo është diçka joproporcionale). Në përgjithësi, mendoj se e keni kuptuar qëllimin. Praktikoni pak vetë për të vendosur punën e përmasave dhe më pas kaloni te atributi tjetër.

Rreshtoni

Epo, ju tashmë jeni njohur me këtë atribut nga ai artikull, kur ne përgjithësisht kaluam. Dhe me siguri tashmë e keni marrë me mend se ai është përgjegjës për vendndodhjen e imazhit.

Ekzistojnë pesë parametra për rreshtim në total:

• shtrirje majtas - majtas
• shtrirje djathtas - djathtas
• e mesme - shtrirja e imazhit në vijën bazë të linjës (për shembull, do të shihni se çfarë do të thotë kjo)
• sipër - kufiri i sipërm i imazhit të dhënë është i rreshtuar në lartësi me elementin më të lartë në vijën e dhënë
• fund - përafrimi i kufirit të poshtëm të figurës me tekstin

Epo, le të mos rendisim këtu, por sipas traditës do t'i tregoj gjithçka me shembull. Shkarkoni dokumentin e përfunduar html nga këtu dhe hapeni atë. Aty do të shihni 5 paragrafë identikë. Futni fotografi me atributet e përshkruara atje:

Epo, tani e ruajmë dokumentin tonë si zakonisht dhe shohim se çfarë marrim. Mirë? A e shihni ndryshimin? Tani e dini se si ndryshojnë këto parametra).

Kufiri

Atributi i kufirit vendoset për trashësinë e kufirit në imazh. Dhe sa më i madh të jetë, aq më i trashë është korniza, përkatësisht. Provoni ta shtoni këtë atribut në figurë, por ndryshoni vazhdimisht vlerën e saj dhe do ta shihni vetë se sa më e trashë bëhet korniza.

Hspace dhe Vspace

Epo, le të hedhim një vështrim në atributet e fundit të etiketës img për sot. Space (anglisht) përkthehet si hapësirë, hapësirë, hapësirë ​​(çelës), etj. Prefikset H dhe V janë horizontale dhe vertikale. Këtu nuk duhet të ketë pyetje.

Epo, çfarë bëjnë këto atribute? Ata vendosin margjina vertikale dhe horizontale nga fotografia në tekstin përreth (ose përmbajtje tjetër). Kjo do të thotë, nëse nuk ju pëlqen që fotografia është shumë afër tekstit, atëherë mund të rrisni distancën midis tyre. Le të shohim se si duket kjo me një shembull.

Shiko? Kufijtë janë rritur si vertikalisht ashtu edhe horizontalisht. Kjo është ajo që ne donim.

Meqë ra fjala, këto fotografi mund t'i futni edhe si titull për faqet e internetit, të bëni fotografi si lidhje, etj. I tregova për të gjitha këto në.

Epo, në përgjithësi, më duket se kam gjithçka. Unë ju thashë bazat e futjes së imazheve, por nëse doni të mësoni HTML dhe CSS në nivelin pro, atëherë ju rekomandoj shumë të shkarkoni kurs i mrekullueshëm në këtë temë, ku falë kësaj gjuhe shënjimi dhe fletëve të stilit kaskadë, mund të vendosni lehtësisht tre lloje faqesh: karta biznesi, blogje, dyqane në internet. Gjithçka tregohet në një gjuhë të thjeshtë dhe të kuptueshme. Është thjesht një bombë!

Epo, unë të them lamtumirë për sot. Në vetëm disa mësime, unë planifikoj t'ju jap mësimin e fundit mbi bazat e HTML, pas së cilës do të konsolidojmë të gjitha njohuritë e marra në praktikë dhe do të krijojmë një faqe interneti të thjeshtë me tre faqe. Në përgjithësi, gjithçka do të jetë e lezetshme)

Epo, për të mos humbur të gjitha më interesantet në blogun tim, sigurohuni që të regjistroheni në përditësimet e artikujve. Dhe sigurisht, shikoni artikuj të tjerë. Jam i sigurt se do të gjeni shumë informacione të dobishme për veten tuaj. Paç fat. Shihemi në artikuj të tjerë. Mirupafshim!

Përshëndetje, Dmitry Kostin

Ë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

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

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ë.

... Shembull i imazhit"src =" 321.jpg "> ...

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

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

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)

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

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ë

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Rezultati mund të shihet pak më lart.

shënim

Atributet e kufirit dhe ngjyrës kufitare mund të vendosen në stilet CSS për img:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

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ënim

Në 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.

... margin-lart: 10px; margjina-majtas: 50 px"src =" https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

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

... Adresa_image"> ...

5. Si të rrumbullakosni këndet e një fotografie

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"style =" border-radius: 30px ">

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.

Gjithçka që dihet për këtë person është
se nuk ka qenë në burg, por pse nuk ka qenë në burg nuk dihet.
Mark Twain.

Ky është një mësim për si të futni një fotografi në HTML, si ta rregulloni atë, si ta bëni tekstin të rrjedhë rreth një fotografie, etj. Në fund të fundit, dihet që imazhet e bëjnë një faqe më tërheqëse dhe më të ndryshme nga burimet e tjera, kështu që aftësia për të përdorur etiketën dhe atributet e saj është shumë e dobishme në internetin modern. Por gjëja kryesore këtu është një ndjenjë proporcioni!

Një bollëk i tepruar i grafikëve do ta bëjë faqen html më të rëndë dhe, në përputhje me rrethanat, do të rrisë kohën e ngarkimit të saj. Për më tepër, prania e një numri të madh imazhesh do të shpërqendrojë vizitorët nga përmbajtja kryesore e faqes (përveç nëse, sigurisht, grafika nuk është përmbajtja kryesore e faqes). Pra, jini të kujdesshëm dhe përdorni vetëm aty ku ju nevojitet. Dhe do të jeni të lumtur!

Në mësimin rreth unë fola tashmë se si mund të përdorni fotografitë si sfond të një dokumenti html. Tani le të flasim për mënyrën se si përdoren grafika në "shtresën e sipërme" të një faqeje html.

§ 1. Si të futni një foto

Për të futur fotografi në HTML, përdorni etiketën IMG Me të detyrueshme atribut Src... Ky atribut i tregon shfletuesit rrugën drejt skedarit të imazhit. ato. për të futur një foto me emrin logo.jpg në një vend të caktuar në faqe (me kusht që faqja dhe fotografia të jenë të vendosura në një dosje(Direktoria)) duhet të futni kodin html të mëposhtëm në këtë vend:

src = "logo.jpg">

Nëse fotografia dhe faqja ndodhen në të ndryshme drejtoritë (dosjet), atëherë duhet të specifikoni shtegun për në imazh relativisht faqet. Për shembull, nëse faqja html është në direktorinë (dosjen) e faqes, nëndrejtoria (dosja) e imazheve ndodhet në të njëjtin direktorium (dosje), në të cilën ndodhet imazhi ynë logo.jpg, atëherë për ta futur atë duhet të shkruani si kjo:

images / logo.jpg ">

Dhe nuk mund të vuash dhe të tregosh adresa e plotë e fotos... Për shembull, si kjo:

http://www..png ">

Në rastin e fundit, shfletuesi do të shfaqë kodin si ky:

Shënim. Nëse fotografia ndodhet në kompjuterin tuaj, dhe ju dëshironi ta futni atë në një faqe në internet atëherë asgjë nuk do të vijë prej saj. Për ta bërë këtë, fotografia duhet së pari të zhvendoset në një vend. në internet(Për shembull, ). Dhe specifikoni adresën e plotë në kodin e faqes në këtë vend me një foto.

Përveç atributit të kërkuar Src në etiketë IMG ka disa atribute të tjera opsionale. Le t'i shqyrtojmë ato në më shumë detaje.

§ 2. Përcaktimi i madhësisë së figurës

Le të fillojmë me atributet që ju lejojnë të vendosni madhësia e figurës(më saktë, vendosni një vend për këto madhësi në faqe). Këtu ata janë:

• gjerësia- gjerësia e figurës në piksel ose përqindje;


• lartësia- lartësia e figurës në piksel ose përqindje.

Nëse përdoren këto atribute, së pari do të ndajë hapësirë ​​për grafikë, do të përgatisë paraqitjen e dokumentit, do të shfaqë tekstin dhe vetëm më pas do të ngarkojë imazhin. Në të njëjtën kohë, do ta vendosë figurën në një drejtkëndësh të madhësisë së zgjedhur, edhe nëse gjerësia dhe lartësia aktuale e figurës është më e madhe (tkurrur) ose më e vogël (shtrirje). Në rastin kur këto atribute nuk përdoren, shfletuesi do të ngarkojë imazhin menjëherë dhe dalja e tekstit pas tij dhe elementëve të tjerë do të vonohet.

Gjerësia dhe lartësia e imazheve mund të specifikohen si në pixel (madhësia e figurës do të jetë konstante pavarësisht nga rezolucioni i ekranit), ashtu edhe në përqindje (madhësia e figurës do të varet nga rezolucioni i ekranit të përdoruesit). Për shembull:

gjerësia = "50" lartësi = "20">

gjerësia = "10%" lartësia = "5%">

§ 3. Tekst alternativ

Nëse përdoruesi ka çaktivizuar shfaqjen e imazheve në cilësimet e shfletuesit, atëherë në vend të imazhit, mund të shfaqni një tekst alternativ që do të shpjegonte se çfarë lloj grafike duhet të jetë këtu. Kjo arrihet duke përdorur atributin ALT:

Në këtë rast, shfletuesi do të rezervojë hapësirë ​​në faqe për imazhin, por në vend të vetë imazhit, ai do të tregojë tekstin që shkruani në vlerën e atributit. ALT:

Përsëri, kjo do të ndodhë nëse përdoruesi ka çaktivizuar shfaqjen e grafikëve. Nëse jo, fotografia do të fshehë tekstin alternativ.

§ 4. Shtrirja e imazhit

Me ndihmën e një atributi që tashmë e dini rreshtoj ju mund të kontrolloni shtrirjen e fotografive në lidhje me elementët e tjerë të faqes html. Atributi rreshtoj ka disa vlera, por ne jemi më të interesuar për dy për momentin:

• majtas- imazhi ndodhet në skajin e majtë të faqes, dhe teksti rrjedh rreth imazhit në të djathtë;


• drejtë- imazhi ndodhet në skajin e djathtë të faqes, dhe teksti dhe elementë të tjerë rrjedhin rreth imazhit në të majtë.

Për shembull, kodi HTML

shfletuesi do të shfaqet kështu

Dhe ky kod HTML:

do të duket kështu:

Për të ndaluar rrjedhjen e tekstit rreth figurës, mund të përdorni etiketën BR(e njohur për ne nga seksioni i fundit rreth). Etiketë BR ka një atribut qartë, e cila mund të marrë tre vlera:

• majtas- ndaloni rrjedhën e tekstit rreth imazheve të rreshtuara në të majtë;


• drejtë- përfundimi i rrjedhës së tekstit mbi fotot e rreshtuara djathtas;


• të gjitha- ndaloni rrjedhën e tekstit rreth imazheve të rreshtuara si majtas ashtu edhe djathtas.