Më pas, le të shohim se si të futni një imazh në një dokument html dhe të personalizoni shfaqjen e tij. Për të punuar, ju duhet vetëm redaktori dhe shfletuesi i lartpërmendur.

Nëse, megjithatë, nuk keni Notepad ++ ose ka një problem me shkarkimin e tij dhe ju mundon pyetja - si të futni një fotografi në html në Notepad?

Përgjigja është e thjeshtë, puna në një bllok shënimesh të rregullt ndryshon vetëm në atë që nuk ka asnjë kod të theksuar në të. ngjyra të ndryshme, për lexueshmërinë dhe ndarjen e kodit nga vetë teksti.

Si të futni një fotografi në një faqe HTML

Pas instalimit të redaktorit, në menyja e kontekstit, duke klikuar me të djathtën në çdo skedar, do të shfaqet artikulli përkatës.

Tani, për të redaktuar një skedar të tillë, mjafton të telefononi menunë e kontekstit duke klikuar me të djathtën mbi të, pastaj "Modifiko me Notepad ++".

Një faqe testimi do të përdoret për të vëzhguar rezultatet e ndryshimeve në kod.

Për të futur një fotografi në kodin html, përdorni një etiketë të vetme inline img... Atributi i tij kryesor është burimi i fotos.

Mund të jetë çdo skedar, në një skedar të fortë, ose një lidhje me një imazh që ekziston në rrjet. I përshtatur me etiketa < p> p>.

Për të shtuar një foto, duhet të futni rreshtin e mëposhtëm:

Kështu do të duket në redaktues:

Dhe kështu do të shfaqet prania e tij në faqe:

Src tregon burimin e figurës. Një emër skedari është i mjaftueshëm nëse skedari i imazhit ndodhet në të njëjtën dokument html drejtorive.

Nëse fotografia është në një drejtori tjetër, atëherë duhet të specifikoni rrugën drejt saj, duke filluar me dosjen në të cilën ndodhet skedari html.

Këshilla!Është e rëndësishme të merret parasysh se gjatë rrugës për dosjen e dhënë fotografia nuk duhet të përmbajë karaktere cirilike. Përveç kësaj, rasti është i rëndësishëm kur shkruani emrin e skedarit.

Si burim, mund të përdorni një ilustrim nga rrjeti. Për ta bërë këtë, ju vetëm duhet të specifikoni një lidhje me të në atribut, në vend që të gjendet në hard disk.

Tabela e formatimit të rrugës së skedarit

Për të ndryshuar madhësinë e figurës, duhet të shtoni dy atribute: gjerësia dhe lartësia... Vlera është formatuar në të njëjtën mënyrë si për çdo atribut.

Pas shenjës së barazimit, duhet të specifikoni madhësinë në piksel.

Nëse disponohet, qartë madhësive të dhëna ilustrimet, do të shfaqet në faqe si më poshtë:

Përafrimi dhe redaktimi i një fotografie

Si të futni foto në qendër html? Për të caktuar pozicionin e figurës në faqe, përdorni rreshtoj lidhur me etiketën fq.

Lejohen disa vlera për të: qendër(Qendër), majtas(skaja e majtë) dhe drejtë(buza e djathtë).

Këtu është imazhi në faqe, në qendër dhe të rreshtuar djathtas.

E rëndësishme! Për të pozicionuar foton në lidhje me tekstin dhe jo me faqen, duhet të përdoret atributi align në etiketën img. Vlerat janë të njëjta me atributin e etiketës p.

Varet nga vlerë të caktuar, imazhi do të ndryshojë pozicionin e tij në lidhje me tekstin.

Për të vendosur një imazh në tekst, thjesht futni etiketën img(me të gjithë inkuadrimin) në bllok teksti v.

Për të shtuar një kufi, përdorni atributin kufi me një vlerë numerike që nënkupton trashësinë e kufirit në piksel.

Për të vendosur kufijtë vertikal dhe horizontal, përdorni vspace dhe hspace... Vlera e tyre numerike nënkupton distancën nga teksti në foto, drejtpërdrejt në pixel.

Në shembull, atributi vspace vendosur në 50 piksele.

Sasia e mbushjes horizontale do të tregojë distancën në të cilën do të jetë teksti kur rrjedh rreth imazhit.

Dy atribute të tjera të dobishme janë - alt dhe titullin... I pari vendos tekst alternativ imazh.

Me të, nëse imazhi për ndonjë arsye nuk ngarkohet, atëherë teksti i specifikuar në vlerën e atributit do të shfaqet në vend.

Për të provuar aftësitë e atributit, mund ta zhvendosni skedarin nga drejtoria e specifikuar në kod.

Teksti i specifikuar si vlerë e atributit titullin, do të shfaqë një këshillë veglash kur e vendosni miun drejtpërdrejt mbi foto. Në kod, dizajni i tij nuk ndryshon nga atributet e tjera.

Pas rifreskimit të faqes, rezultati do të jetë si ky:

Tabela e atributeve të etiketave img

Shtimi i imazheve në faqen tuaj të internetit ose në profilin e mediave sociale është mënyrë e shkëlqyer dekoroj faqen tuaj. HTML (Gjuha e Markupimit të Hipertekstit) është e ndryshme sasi e madhe veçoritë e zhvillimit të uebit dhe kodi i kërkuar për të shtuar imazhe është mjaft i thjeshtë.

Pra, si të futni një fotografi në HTML?

Ngarkoni foton tuaj në një sit falas të pritjes së imazheve si Photobucket ose TinyPic, gjë që siguron që skedari i ngarkuar të jetë gjithmonë i disponueshëm. Pas kopjimit, lidhja me imazhin do të shfaqet drejtpërdrejt në faqen e pritjes. Sidoqoftë, nëse paguani për shërbimet premium të një shërbimi të tillë, është më mirë ta përdorni veçori shtesë... Kjo është më e besueshme sepse pritje falas imazhet ndonjëherë imazhet nuk hapen për shkak të mbingarkesës. Pasi të keni ngarkuar foton në një nga shërbimet online, hapeni në kompjuterin tuaj dokument i ri v redaktori i tekstit(për shembull, në Notepad) ose shkoni te paneli i redaktimit faqen e dëshiruar faqen tuaj (ku mund të ndryshoni kodin HTML).

Shkrimi i etiketave

Ndërsa vazhdojmë të flasim për mënyrën e futjes së një fotografie në HTML, filloni me etiketën IMG. Pas tij, duhet të shtoni një hapësirë ​​dhe një të pjerrët përpara karakterit mbyllës. Kështu, ju duhet të shkruani kombinimin e mëposhtëm -< img />... Përveç kësaj, ka shumë atribute të disponueshme, por vetëm njëra prej tyre është absolutisht e nevojshme. Kjo është adresa ose URL-ja e imazhit tuaj. specifikohet si më poshtë -< img src ="URL_вашей_картинки" / >.

Teksti alternativ

Më pas, kur përpiqeni të futni një fotografi në HTML, duhet të shtoni atributin Alt. Kjo përcakton tekstin alternativ në rast se imazhi nuk ngarkohet. Ky tekst është menduar edhe për përdoruesit me shikim të dëmtuar që përdorin lexues ekrani. Nëse qëndroni pezull mbi imazh, teksti alternativ shfaqet në këshillën e veglave, por kjo veçori është e pranishme vetëm në Internet Explorer... Për ta parë atë në aplikacione të tjera, ju nevojiten shtojca të veçanta. Për të futur një këshillë të tillë veglash, futeni atë përveç Alt. (Mund ta kaloni këtë hap sipas dëshirës). Nëse përdorni këtë funksion, lidhja do të duket si kjo:

< img src ="URL_вашей_картинки" alt ="udhëzues_teksti" title ="Këshillë mjeti" />

Dimensionet dhe parametrat e figurës

Duke vazhduar të ndiqni udhëzimet se si të futni një fotografi në HTML, mund të specifikoni gjithashtu madhësinë e figurës duke përdorur atributet e lartësisë dhe gjerësisë, duke treguar në pixel ose në përqindje. Ju lutemi vini re se fotografia do të shfaqet duke ndryshuar madhësinë kur të ngarkohet. Shfletuesi do të vazhdojë të përdorë fillimisht madhësinë aktuale të imazhit. Për këtë arsye, nëse fotografia juaj është shumë e madhe, është më mirë ta ndryshoni përmasat e saj duke përdorur programe të redaktimit të fotografive, jo vetëm në url-në e lidhjes. Tani kodi juaj mund të duket diçka si kjo:

< img src = "URL вашей картинки" alt = "tekst udhëzues" title = "Këshillë mjeti" height ="50%" width ="50%" />

< img src ="URL вашей картинки" alt ="tekst udhëzues" title ="Këshillë mjeti" height ="25px" width="50px" / >

Atribute të tjera

Vlera për këto atribute është ose një vlerë pozitive piksel ose një përqindje ndaj origjinalit (1-100%). Duke folur për mënyrën e futjes së një fotografie në HTML, mund të vini re gjithashtu se ajo mund të vendoset kudo në një faqe interneti me një atribut të shtrirjes - lart, poshtë, mes, djathtas, majtas, etj. Atributi HSPACE përdoret për të futur imazhe horizontalisht përgjatë majtas dhe anën e djathtë, VSPACE - për të ngarkuar vertikalisht midis majës dhe fund faqe dhe në lidhje me përmbajtjen tjetër. Në përgjithësi, duke folur për HTML - si të futni një fotografi dhe si të shtoni përmbajtje në faqe, gjëja kryesore është të mos e teproni. Përndryshe, burimi juaj do të duket i lëngshëm dhe shumë "i gjallë". Për shfaqjen e logove ose animacioneve Formati GIF do zgjidhja më e mirë, dhe për fotografi dhe foto me cilësi të lartë, formati JPEG është më i përshtatshëm.

Kjo bën të mundur shfaqjen e përmbajtjes së një faqeje tjetër brenda një faqeje. Për shembull:

Shumica e imazheve që një person sheh në sajte janë gjithashtu përmbajtja e një faqeje tjetër. Këtu është, në veçanti, adresa e emoticonit në formatin .gif:

Dhe këtu janë mënyrat për të shtuar një imazh në sit, i cili mund të theksohet nëse shikoni kodin e faqes:

HTML: etiketë
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif"alt =" (! LANG: buzëqeshje" height="30" width="30"> !}
CSS: vetitë dhe
CSS: pseudo-elemente dhe
HTML: etiketë grafika vektoriale
CSS: nuk ka url

Si të gjeni adresën e një fotografie dhe ta kopjoni atë

Ka disa mënyra për të kopjuar adresën e imazhit:

1. Lëvizni kursorin mbi foto, klikoni mbi çelësi i djathtë miu, në menunë e kontekstit që shfaqet, do t'ju kërkohet të kopjoni URL-në, klikoni në artikullin e kërkuar.
   Fig. 1 Nëse qëndroni pezull mbi foto dhe shtypni butonin e djathtë të miut, atëherë futeni Mozilla Firefox do të hapet një meny konteksti me artikuj të tillë
2. Lëvizni kursorin mbi foto, shtypni butonin e djathtë të miut, në menunë e kontekstit që shfaqet, do t'ju ofrohet të ekzaminoni karakteristikat e fotografisë, klikoni në artikullin e kërkuar (në Fig. 1, shihni artikullin "Informacioni i imazhit" ; në Internet Explorer, shihni artikullin "Properties"), në dritaren që hapet, zgjidhni adresën e figurës,
   • shtypni butonin e djathtë të miut, në menunë e kontekstit që shfaqet, klikoni në artikullin "Kopjo".
   
   Fig.2 Nëse, në Mozilla Firefox, qëndroni pezull mbi një foto, shtypni butonin e djathtë të miut, zgjidhni artikullin "Image Information" në menunë e kontekstit të shfaqur, do të hapet një dritare ku mund të shihni një listë të imazheve të përdorura në faqe, adresa e tyre, teksti alternativ (përmbajtja në atributin alt), madhësia dhe shkalla aktuale e përdorur
3. Lëvizni kursorin mbi foto, shtypni butonin e djathtë të miut, në menunë e kontekstit që shfaqet, do t'ju kërkohet të shkoni në faqen e figurës, klikoni në artikullin e kërkuar (në Fig. 1, shihni artikullin "Hap imazhin") . Një faqe do të hapet me vetëm një imazh si përmbajtje. V lartësia e plotë nëse më parë është zvogëluar me ose me duke përdorur CSS... Zgjidhni adresën e faqes së hapur në shiriti i adresave shfletuesi,
   • shtypni kombinimin e tastit tastierë Ctrl+ C.
   
   Fig. 3 Kështu duket faqja e emocioneve.
   URL-ja e saj: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
4. Në pajisje me prekje(smartphone, tablet) mbajeni gishtin mbi foto për një kohë të gjatë pa lëvizur, në menunë e kontekstit që shfaqet, do t'ju kërkohet të shkoni në faqen e figurës, klikoni në artikullin e kërkuar (mund të quhet "Shiko foton" ). Një faqe do të hapet me vetëm një imazh si përmbajtje. Gjatësia e plotë nëse më parë është zvogëluar me ose me CSS. Pastaj shtypni gjatë adresën në shiritin e adresave të shfletuesit. Pasi të shfaqen rrëshqitësit dhe të theksohet e gjithë URL-ja (nëse është e nevojshme, rrëshqitësit mund të zhvendosen në distancën e kërkuar), klikoni butonin "Kopjo" në panelin që shfaqet.
5. Lëvizni kursorin mbi foto, shtypni butonin e djathtë të miut, në menunë e kontekstit që shfaqet, do t'ju kërkohet të shkoni në faqe imazhi i sfondit, klikoni në artikullin e kërkuar. Një faqe do të hapet me vetëm një imazh si përmbajtje. Gjatësia e plotë nëse më parë është zvogëluar me CSS. Zgjidhni adresën e faqes së hapur në shiritin e adresave të shfletuesit (shih Fig. 3),
   • shtypni butonin e djathtë të miut, zgjidhni artikullin "Kopjo" në menunë e kontekstit të shfaqur.
   • shtypni shkurtoren e tastierës Ctrl + C.
   
   

Si të ruani një imazh

Lëvizni kursorin mbi foto, shtypni butonin e djathtë të miut, në menunë e kontekstit që shfaqet, do t'ju kërkohet të ruani foton, klikoni në artikullin e kërkuar (në Fig. 1, shihni artikullin "Ruaj imazhin si ... "), në dritaren që hapet, zgjidhni një dosje në kompjuterin tuaj, ku do të ruhet vizatimi.

Nëse fotografia është foto sfondi, atëherë së pari duhet të shkoni te faqja e figurës (shih Fig. 3).

Si të shtoni një foto në një faqe interneti

Së pari, imazhi duhet të ngarkohet nga kompjuteri në sitin pritës, në rrjet social(Në kontakt me, Google+ etj.), Yandex.Disk ose Google.Disk, në mënyrë që fotografia të ketë adresën e vet në internet.

Nëse ka një redaktues vizual, atëherë sekuenca e veprimeve është zakonisht si më poshtë:

1. vendosni kursorin e miut në vendin ku duhet të shfaqet fotografia,
2. klikoni në një ikonë të ngjashme me ose,
3. zgjidhni një skedar nga kompjuteri juaj,
4. nëse është e mundur, plotësoni tekstin alternativ (aka përshkrimi i imazhit).

Përfundimi: fotografia do të futet në faqen e internetit dhe më e rëndësishmja, do të ngarkohet në serverin e projektit në internet. Tani ajo do të ketë adresën e saj në internet. Dhe tani, në skedën "HTML", mund të korrigjoni kodin e dhënë nga redaktori vizual, pasi redaktori vizual shpesh shton etiketa të panevojshme dhe mundësitë e HTML dhe CSS janë të pakrahasueshme të mëdha.

Nëse URL-ja ekziston tashmë, por nga një sit tjetër pak i njohur, atëherë është akoma më mirë të ruani një foto të tillë në kompjuterin tuaj dhe më pas ta ngarkoni në serverin e faqes, nëse këtë veprim lejuar nga pronari i fotos, për të mos cenuar të drejtën e autorit, pasi

• disa sajte mund të ndalojnë përdorimin e URL-së së imazheve në burime të tjera (më shumë rreth ndalimit të lidhjes së nxehtë).
• faqet janë jetëshkurtër dhe pas një kohe me fshirjen e projektit në internet, fotografia në faqen tuaj do të zhduket, duke lënë në vend të saj në rasti më i mirë vetëm tekst alternativ.

Nese jo redaktues vizual, atëherë sekuenca e veprimeve është zakonisht si më poshtë:

1. krijoni një dosje imazhi,
2. krijoni një skedar .htaccess në dosjen e imazhit, përmbajtja e të cilit do të jetë # qasje e ngushtë në http://site.ru/image/ Opsionet -Indekset # mbyllni qasjen në http: //site.ru/image/.htaccess urdhër lejoj, mohoj mohoj nga të gjithë
3. ngarkoni në dosje imazh imazhi, i cili quhet, le të themi, plain.gif (në të ardhmen, të gjitha fotot gjithashtu ngarkohen në këtë dosje),
4. në faqen HTML, përdorni një URL si http: //sayt.ru/image/plain.gif, për shembull, http: //sayt.ru/image/plain.gif"alt =" (! LANG: buzëqeshje" height="30" width="30">!}

Përshëndetje të dashur lexues të blogut! Në këtë artikull, do të mësoni gjithçka rreth si të futni një imazh në faqe html ... A keni disa imazhe që dëshironi të vendosni në faqen tuaj apo dëshironi të vendosni një logo në faqen tuaj të internetit? E gjithë kjo është e lehtë. Pas leximit të këtij artikulli, do të jeni në gjendje të futni imazhe në faqet tuaja html pa ndonjë vështirësi. Për ta bërë këtë, ne do të flasim në detaje rreth etiketë dhe atributet e tij, le t'i hedhim një vështrim të shpejtë formateve skedarët grafikë të tilla si gif, jpeg dhe png, si dhe shikoni veçoritë e reja HTML5 që e bëjnë më të lehtë futjen e videos dhe audios në faqen tuaj.

Për faktin se të dhënat grafike dhe teksti htmlështë e pamundur të kombinohen në një skedar, për shfaqjen e tyre në sit përdoret një qasje e ndryshme sesa me elementët e tjerë të faqeve html. Kryesisht, imazhe grafike dhe të dhënat e tjera multimediale ruhen në skedarë të veçantë. Dhe për t'i futur ato në një faqe interneti, përdorni etiketa speciale që përmbajnë lidhje me këto skedarë të veçantë... Në veçanti, një etiketë e tillë është etiketë ... Me të ndeshur një etiketë të tillë me një adresë, shfletuesi fillimisht kërkon skedarin përkatës me një imazh, audio ose video nga serveri i uebit dhe vetëm më pas e shfaq atë në faqen e internetit.

Quhen të gjitha imazhet grafike dhe, në përgjithësi, çdo e dhënë që ruhet në skedarë të ndarë nga faqja e internetit zbatuar elementet e faqes.

Para se të futni foto dhe të merrni parasysh etiketën në detaje , ia vlen të mësoni pak për formatet grafike.

Formatet e imazheve grafike.

Ka shumë të ndryshme formate grafike por shfletuesit mbështesin vetëm disa. Le t'i hedhim një sy tre prej tyre.

1. Formati JPEG(Grupi i Përbashkët i Ekspertëve Fotografik). Një format mjaft popullor që përdoret për ruajtjen e imazheve. Mbështet ngjyrat 24-bit dhe i mban të pandryshuara të gjitha gjysmëtonet në foto. Por jpeg nuk mbështet transparencën dhe shtrembëron detajet e vogla dhe tekstin në imazhe. JPEG përdoret kryesisht për ruajtjen e fotografive. Skedarët e këtij formati kanë shtesat jpg, jpe, jpeg.

2. Formati GIF(Formati i shkëmbimit të grafikëve). Avantazhi kryesor i këtij formati është aftësia për të ruajtur disa imazhe në të njëjtën kohë në një skedar. Kjo ju lejon të krijoni video të tëra të animuara. Së dyti, ai mbështet transparencën. Disavantazhi kryesor ai mbështet vetëm 256 ngjyra, gjë që nuk është e mirë për ruajtjen e fotove. GIF përdoret kryesisht për të ruajtur logot, banderolat, imazhet me zona transparente dhe që përmbajnë tekst. Skedarët e këtij formati kanë shtesën gif.

3. Formati PNG(Grafika portative e rrjetit). Ky format u zhvillua si një zëvendësim për GIF-in e vjetëruar dhe gjithashtu, në një farë mase, JPEG. Mbështet transparencën, por nuk lejon animacion. Ky format ka një shtrirje png.

Gjatë krijimit të sajteve, imazhet zakonisht përdoren në Formati JPEG ose GIF, por ndonjëherë përdoret PNG. Gjëja kryesore është të kuptoni se në cilat raste cili format është më i mirë për t'u përdorur. Shkurtimisht:

JPEG përdoret më së miri për ruajtjen e fotografive ose imazheve në shkallë gri që nuk përmbajnë tekst;

• GIF përdoret kryesisht për animacion;
• PNG është formati për gjithçka tjetër (ikona, butona, etj.).

Futja e fotografive në faqet html

Pra, si mund të futni një imazh në një faqe interneti? Futni një imazh lejon një të vetme etiketë ... Shfletuesi e vendos imazhin në vendin e faqes së internetit ku ndeshet me etiketën .

Fut kodin e imazhit në html faqja duket si kjo:

Ky kod html do të vendosë një imazh në faqen e internetit, e cila ruhet në skedarin image.jpg, i cili ndodhet në të njëjtën dosje me faqen e internetit. Siç mund ta keni vënë re, adresa e figurës është treguar në atribut src... Ajo që ju kam thënë tashmë. Pra, atributi src atributi i kërkuar, e cila shërben për të treguar adresën e skedarit me imazhin. Pa atributin src, etiketa img është e pakuptimtë.

Unë do të jap disa shembuj të tjerë të specifikimit të adresës së një skedari me një imazh:

- ky kod html do të fusë në faqe një fotografi të quajtur image.jpg, e cila ruhet në dosjen e imazheve që ndodhet në rrënjë të faqes së internetit.

Në atributin src, ju mund të specifikoni jo vetëm lidhje relative mbi imazhet. Meqenëse imazhet ruhen në ueb së bashku me faqet html, kështu që çdo skedar imazhi ka url-në e vet. Prandaj, url-ja e imazhit mund të futet në atributin src. Për shembull:

Ky kod do të futë një imazh nga faqja e internetit mysite.ru në faqe. Një adpec URL përdoret zakonisht kur jeni duke treguar një imazh që është në një faqe tjetër. Për imazhet e ruajtura në faqen tuaj, është më mirë të përdorni lidhje relative.

Etiketë është një element inline, kështu që është më mirë ta vendosni brenda një elementi blloku, për shembull brenda një etikete

- paragraf:

Le të praktikojmë dhe ngjitim në faqen tonë nga artikujt e mëparshëm rreth imazh html... Do të krijoj një dosje "imazhe" pranë skedarit html të faqes sime dhe do të vendos një skedar me një foto "bmw.jpg" atje, i cili duket si ky:

Pastaj kodi html i faqes me imazhin e futur do të jetë si ky:

Faqe për makinat.

Mirë se vini në faqen tonë të makinave. Këtu do të gjeni shumë artikuj interesantë dhe të dobishëm rreth makinave, rreth tyre karakteristikat teknike dhe veçoritë.

Gjuha shkencore automobil ajo:

Rrugë me motor mekanik pa gjurmë automjeti me të paktën 4 rrota.

Klasifikimi i makinave

Makinat janë të llojeve të mëposhtme:

• Pasagjer;


• Ngarkesa;


• SUV;


• Buggy;


• Pickup;


• Sport;


• Gara.

Të gjitha të drejtat e rezervuara. viti 2010.
Faqe për makinat.

Dhe ne shikojmë rezultatin e shfaqjes në shfletues:

Siç mund ta shohim, nuk ka asgjë të vështirë në vendosjen e imazheve në faqet e internetit. Më pas, le të shohim disa atribute të tjera të rëndësishme të etiketës. .

Atributi alt është një kthim prapa

Meqenëse skedarët e imazheve ruhen veçmas nga faqet e internetit, për t'i marrë ato, shfletuesi duhet të bëjë kërkesa të veçanta... Dhe çfarë nëse ka shumë imazhe në faqe dhe shpejtësia e lidhjes së rrjetit është e ulët, atëherë shkarkimi skedarë shtesë do të marrë një kohë të konsiderueshme. Është edhe më keq nëse imazhi është hequr nga serveri pa dijeninë tuaj.

Në këto raste, vetë faqja e internetit do të ngarkohet me sukses, në vend të imazheve do të shfaqen vetëm drejtkëndësha të bardhë. Prandaj, për të informuar përdoruesin se çfarë është imazhi, ai aplikohet. Ky atribut specifikon të ashtuquajturin tekst zëvendësues, i cili do të shfaqet në një drejtkëndësh bosh derisa imazhi të ngarkohet:

Dhe diçka si kjo duket si kjo:

Madhësia e imazhit

Ka ende disa atribute të etiketës img për të cilat duhet të jeni të vetëdijshëm. Këto janë disa atribute gjerësia dhe lartësia... Ju mund t'i përdorni ato për të specifikuar dimensionet e imazhit:

gjerësia = "300" lartësi = "200">

Të dy atributet tregojnë madhësinë në piksele... Atributi gjerësi i tregon shfletuesit se sa i gjerë duhet të jetë imazhi dhe atributi i lartësisë sa i gjatë. Këto dy atribute mund të aplikohen së bashku ose veçmas. Për shembull, nëse specifikoni vetëm atributin gjerësi, atëherë shfletuesi do të zgjedhë lartësinë automatikisht në proporcion me gjerësinë e specifikuar dhe gjithashtu në rastin e përdorimit vetëm atribut lartësi... Nëse nuk i specifikoni fare këto atribute, atëherë shfletuesi do të përcaktojë automatikisht madhësinë e figurës përpara se ta shfaqë atë në ekran. Vlen të përmendet vetëm se specifikimi i madhësisë së imazheve do të shpejtojë paksa shfletuesin kur shfaq faqen.

Kjo ka të bëjë me futjen e imazheve në faqe tani për tani, atëherë ne do të shqyrtojmë se si të futim audio ose video në sit ...

Përfshirja e videos dhe audios duke përdorur HTML 5

Specifikimi i ri html5 prezanton disa etiketa të reja që e bëjnë shumë të lehtë futjen e skedarëve mediatikë. Kjo vlen kryesisht për video dhe audio.

Për të futur audio HTML5 ofron etiketë e çiftuar Adresa e skedarit në të cilin është ruajtur klipi audio specifikohet duke përdorur atributin tashmë të njohur src:

Etiketë

Si parazgjedhje, klipi audio nuk shfaqet në asnjë mënyrë në faqen e internetit. Por nëse në etiketë

Për të futur një video në një faqe interneti, përdorni një etiketë të çiftuar ... Gjithçka është e njëjtë me këtë etiketë si me etiketën

Nuk ka shumë për të thënë për futjen e imazheve dhe multimedias në faqet html. Shpresoj për një pyetje "Si të futni një imazh në një faqe html?" Unë ju përgjigja. kështu që vetëm për të përmbledhur:

për duke futur imazhe në html faqja përdor një etiketë të vetme dhe specifikoni adresën e skedarit me figurën në atribut src: ;

• nëpërmjet atribut alt etiketë mund të vendosni tekstin zëvendësues në rast se imazhi nuk ngarkohet;
• duke përdorur atributet gjerësia dhe lartësia ju mund të vendosni madhësinë e imazhit në faqen e internetit;
• ka etiketa të çiftuara për të futur audio dhe video në html5

Nëse diçka nuk është e qartë, pyesni në komente dhe mos harroni të regjistroheni në përditësimet në blogun tim. Shihemi në postimet e radhës!

Imazhet janë ndoshta ato që na formojnë ide e pergjithshme O rrjet mbarëbotëror... Dakord që informacion grafik një person mban mend në përgjithësi shumë më mirë se teksti. Prandaj, imazhet janë një pjesë e rëndësishme e çdo faqeje dhe çdo faqe interneti. Dhe kështu dua t'ju tregoj se si të futni një fotografi në html.

Futja e një imazhi në html duke përdorur një etiketë

Ju ndoshta e dini se të gjitha komandat në html ekzekutohen duke përdorur etiketa. Kështu që ata dolën me etiketën e tyre për imazhet - ... Është single, pra nuk ka pjesë mbuluese.

Më e rëndësishmja atributi img etiketa është src (burimi) - rruga për në imazh. Në të, ju shkruani adresën ku ndodhet imazhi. Mund të shkruhet si absolute ( faqe / imazhe / imazhe2 / imazh.jpg) ose si i afërm ( imazhe / imazhe2 / imazh.jpg).

Të dyja këto shtigje çojnë në të njëjtin skedar image.jpg që ndodhet në dosjen image2. Kjo, nga ana tjetër, qëndron në drejtorinë e imazheve, dhe ajo - në dosjen rrënjë. Nëse shkruani gjithçka është relative, atëherë kur ndryshoni emrin e domenit për faqen tuaj, gjithçka do të mbetet funksionale. Për shembull, redaktori i wordpress insertet sipas parazgjedhjes adresat absolute... Por personalisht, nuk do të ndryshoj domenin dhe më përshtatet.

Atribute shtesë dhe stilim përmes css

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

• gjerësia dhe lartësia - gjerësia dhe lartësia e figurës. Mund të vendoset në atributet përkatëse në etiketën img
• align - përafrimi i figurës në lidhje me tekstin. Linja majtas sipas parazgjedhjes. Ju gjithashtu mund të vendosni në të djathtë dhe në qendër (djathtas, në qendër)
• alt - tekst alternativ që do të shfaqet nëse përdoruesi ka çaktivizuar shfaqjen e imazheve në shfletues. Është e dobishme ta plotësoni
• titulli është pothuajse i njëjtë. Një lloj përshkrimi i figurës, i cili do të shfaqet kur rri pezull mbi të
• vspace dhe hspace - futje vertikale dhe horizontale e imazhit nga pjesa tjetër e përmbajtjes. Kujdes! Atributet tashmë janë zhvlerësuar dhe është më mirë t'i vendosni këto dhëmbëzime përmes fletës së stilit.
• class - një klasë stili që lidhet me një foto dhe zbaton disa stile në të

Fut një foto kaq të lezetshme. Këtu kemi mbyllur klasën e paraafishimit dhe tani me css përmes saj mund t'i referohemi dhe të shkruajmë çdo stil. Për shembull, të tilla:

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

Unë do të përmbledh

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

Dhe së fundi, në mënyrë ideale, e gjithë kjo duhet të shkruhet përmes CSS. Kjo do të thotë, mos vendosni dimensionet në atribute, por varni një klasë stili shtesë në foto, e cila do të përcaktojë dimensionet. E njëjta gjë me shtrirjen, me të cilën mund të bëhet në css vetitë e rreshtimit të tekstit si dhe lundrues.