Kufanya kazi na picha katika HTML (jinsi ya kuingiza picha, kubadilisha ukubwa wake, kufanya picha kuwa kiungo). Jinsi ya kuhifadhi picha. Jinsi ya kutumia alt na sifa za kichwa

Habari wasomaji wapendwa blogu! Katika makala hii utajifunza kila kitu kuhusu jinsi ya kuingiza picha kwenye ukurasa wa html . Je! una picha kadhaa ambazo unataka kuweka kwenye ukurasa wako au unataka kuweka nembo kwenye tovuti yako? Yote hii ni rahisi. Baada ya kusoma makala hii, utaweza kuingiza picha kwenye kurasa zako za html bila matatizo yoyote. Ili kufanya hivyo, tutazungumza kwa undani tagi na sifa zake, tutaangalia kwa haraka umbizo la faili za picha kama vile gif, jpeg na png, na pia tutaangalia vipengele vipya vya HTML5 vinavyorahisisha kuingiza video na sauti kwenye tovuti yako.

Kutokana na ukweli kwamba data graphic na maandishi ya html haiwezi kuunganishwa katika faili moja; ili kuzionyesha kwenye tovuti, mbinu tofauti hutumiwa kuliko vipengele vingine vya kurasa za html. Kwanza kabisa, picha za picha, na data zingine za media titika huhifadhiwa katika faili tofauti. Na kuzitekeleza katika ukurasa wa wavuti, hutumia vitambulisho maalum ambavyo vina viungo kwa haya faili tofauti. Hasa, lebo kama hiyo ni tagi . Baada ya kukutana na lebo kama hiyo na anwani, kivinjari kwanza huomba faili inayolingana na picha, sauti au video kutoka kwa seva ya Wavuti, na kisha kuionyesha kwenye ukurasa wa Wavuti.

Picha zote za picha na, kwa ujumla, data yoyote ambayo imehifadhiwa katika faili tofauti na ukurasa wa wavuti inaitwa kutekelezwa vipengele vya ukurasa.

Kabla ya kuingiza picha na kuangalia tag kwa undani , inafaa kujifunza kidogo kuhusu fomati za picha.

Miundo ya picha za picha.

Kuna nyingi tofauti miundo ya picha, lakini vivinjari vinaauni chache tu. Hebu tuangalie tatu kati yao.

1. Muundo wa JPEG(Kikundi cha Pamoja cha Wataalam wa Picha) Umbizo maarufu kabisa linalotumika kuhifadhi picha. Inaauni rangi ya 24-bit na huweka halftones zote kwenye picha bila kubadilika. Lakini jpeg haiungi mkono uwazi na inapotosha maelezo madogo na maandishi kwenye picha. JPEG hutumiwa kimsingi kuhifadhi picha. Faili za umbizo hili zina jpg viendelezi, jpe, jpe.

2. Muundo wa GIF(Umbizo la Maingiliano ya Michoro) Faida kuu ya muundo huu ni uwezo wa kuhifadhi picha kadhaa mara moja kwenye faili moja. Hii hukuruhusu kuunda video zote zilizohuishwa. Pili, inasaidia uwazi. Vikwazo kuu ni kwamba inasaidia rangi 256 tu, ambayo haifai kwa kuhifadhi picha. GIF hutumiwa hasa kuhifadhi nembo, mabango, picha zilizo na maeneo ya uwazi na maandishi yaliyo na. Faili katika umbizo hili zina gif ya kiendelezi.

3. Muundo wa PNG(Picha za Mtandao Zinazobebeka) Umbizo hili liliundwa badala ya GIF iliyopitwa na wakati na, kwa kiasi fulani, JPEG. Inaauni uwazi, lakini hairuhusu uhuishaji. Umbizo hili ina kiendelezi cha png.

Wakati wa kuunda tovuti, kwa kawaida hutumia picha katika muundo wa JPEG au GIF, lakini wakati mwingine hutumia PNG. Jambo kuu ni kuelewa ni katika hali gani muundo ni bora kutumia. Kwa kifupi:

    JPEG hutumiwa vyema zaidi kwa kuhifadhi picha au picha za kijivu ambazo hazina maandishi;

  • GIF hutumiwa kimsingi kwa uhuishaji;
  • PNG ni umbizo la kila kitu kingine (ikoni, vifungo, n.k.).

Kuingiza picha kwenye kurasa za html

Kwa hivyo, unawezaje kuingiza picha kwenye ukurasa wa wavuti? Unaweza kuingiza picha kwa kutumia moja tagi . Kivinjari huweka picha kwenye eneo kwenye ukurasa wa wavuti ambapo hukutana na lebo .

Msimbo wa kuingiza picha kwenye html ukurasa unaonekana kama hii:

Msimbo huu wa html utaweka kwenye ukurasa wa wavuti picha iliyohifadhiwa katika faili ya image.jpg, ambayo iko katika folda sawa na ukurasa wa wavuti. Kama unaweza kuwa umegundua, anwani ya picha imeonyeshwa ndani src sifa. Tayari nilikuambia ni nini. Kwa hivyo, sifa ya src ni sifa inayohitajika ambayo hutumika kuonyesha anwani ya faili iliyo na picha. Bila sifa ya src, lebo ya img haina maana.

Hapa kuna mifano michache zaidi ya kubainisha anwani ya faili iliyo na picha:

- msimbo huu wa html utaingiza picha inayoitwa image.jpg kwenye ukurasa, ambayo imehifadhiwa kwenye folda ya picha iliyo kwenye mzizi wa tovuti.

Sifa ya src inaweza kuwa na sio tu viungo vya jamaa kwa picha. Kwa kuwa picha huhifadhiwa mtandaoni pamoja na kurasa za html, kwa hivyo kila faili ya picha ina url yake. Kwa hivyo, unaweza kuingiza url ya picha kwenye sifa ya src. Kwa mfano:

Kanuni hii itaingiza picha kutoka kwa tovuti mysite.ru kwenye ukurasa. Kwa kawaida URL hutumiwa unapoelekeza picha kwenye tovuti nyingine. Kwa picha zilizohifadhiwa kwenye tovuti yako, ni bora kutumia viungo vya jamaa.

Lebo ni kipengele cha ndani, kwa hivyo ni bora kuiweka ndani ya kipengele cha kuzuia, kwa mfano ndani ya lebo

- kifungu:

Wacha tufanye mazoezi na kubandika kwenye ukurasa wetu kutoka kwa nakala zilizopita kuhusu picha ya html. Nitaunda folda ya "picha" karibu na faili ya html ya ukurasa wangu na kuweka faili ya picha ya "bmw.jpg", ambayo inaonekana kama hii:

Kisha nambari ya html ya ukurasa na picha iliyoingizwa itakuwa kama hii:





Tovuti kuhusu magari.


Tovuti kuhusu magari.



Karibu kwenye tovuti yetu ya magari. Hapa utapata mengi ya kuvutia na makala muhimu kuhusu magari, kuhusu wao vipimo vya kiufundi na vipengele.


Lugha ya kisayansi gari Hii:


Barabara ya mitambo isiyo na trackless gari na angalau magurudumu 4.



Uainishaji wa gari


Magari ni ya aina zifuatazo:



  • gari la abiria;

  • Mizigo;

  • SUV;

  • Buggy;

  • Inua;

  • Michezo;

  • Mashindano ya mbio.


Haki zote zimehifadhiwa. 2010
Tovuti kuhusu magari.





Na angalia matokeo ya onyesho kwenye kivinjari:

Kama tunavyoona, hakuna chochote ngumu kuhusu kuweka picha kwenye kurasa za wavuti. Ifuatayo, hebu tuangalie sifa zingine chache muhimu za lebo. .

Sifa mbadala ni chaguo mbadala

Kwa sababu faili za picha huhifadhiwa kando na kurasa za wavuti, kivinjari kinapaswa kufanya maombi tofauti ili kuzirejesha. Lakini vipi ikiwa kuna picha nyingi kwenye ukurasa na kasi ya uunganisho wa mtandao ni ya chini, kisha kupakia faili za ziada itachukua muda mwingi. Na ni mbaya zaidi ikiwa picha ilifutwa kutoka kwa seva bila ujuzi wako.

Katika matukio haya, ukurasa wa wavuti yenyewe utapakia kwa ufanisi, mistatili nyeupe pekee itaonyeshwa badala ya picha. Kwa hivyo, kumwambia mtumiaji picha ni nini,. Kwa kutumia sifa hii, unabainisha kinachojulikana kama maandishi mbadala, ambayo yataonyeshwa kwenye mstatili tupu hadi picha itakapopakiwa:

Na hii ndio takriban inaonekana kama:

Weka vipimo vya picha

Bado kuna sifa kadhaa za lebo za img ambazo unapaswa kujua kuzihusu. Hizi ni sifa kadhaa upana Na urefu. Unaweza kutumia hizi kutaja vipimo vya picha:

upana = "300" urefu = "200">

Sifa zote mbili zinaonyesha saizi ndani saizi. Sifa ya upana huambia kivinjari jinsi picha inapaswa kuwa pana, na sifa ya urefu jinsi inavyopaswa kuwa. Sifa hizi mbili zinaweza kutumika pamoja au tofauti. Kwa mfano, ikiwa unataja sifa ya upana tu, basi kivinjari kitachagua kiotomati urefu kwa uwiano wa upana maalum na pia katika kesi ya kutumia sifa ya urefu tu. Ikiwa hutafafanua sifa hizi kabisa, kivinjari kitaamua moja kwa moja ukubwa wa picha kabla ya kuionyesha kwenye skrini. Inafaa kumbuka kuwa kutaja saizi za picha kutaongeza kasi ya kivinjari wakati wa kuonyesha ukurasa.

Hiyo yote ni kuhusu kuingiza picha kwenye kurasa kwa sasa, kisha tutaangalia jinsi ya kuingiza sauti au video kwenye tovuti...

Kuingiza video na sauti kwa kutumia HTML 5

KATIKA specifikationer mpya html5 ina lebo kadhaa mpya ambazo hurahisisha sana kuingiza faili za media titika. Hii inatumika kimsingi kwa video na sauti.

Kuingiza sauti HTML5 hutoa tagi iliyooanishwa Anwani ya faili ambayo klipu ya sauti imehifadhiwa imeonyeshwa kwa kutumia sifa ya src ambayo tayari tunaifahamu:

Lebo

Kwa chaguo-msingi, klipu ya sauti haionyeshwa kwenye ukurasa wa wavuti. Lakini ikiwa kwenye lebo

Lebo iliyooanishwa hutumiwa kuingiza video kwenye ukurasa wa wavuti . Kwa lebo hii kila kitu ni sawa na kwa lebo

Hakuna mengi zaidi ya kusema juu ya kuingiza picha na media titika kwenye kurasa za html. Natumaini swali "Jinsi ya kuingiza picha kwenye ukurasa wa html?" Nilikujibu. kwa hivyo nitafupisha tu:

    Kwa kuingiza picha katika html ukurasa kwa kutumia lebo moja na onyesha anwani ya faili iliyo na picha kwenye sifa src: ;

  • kwa kutumia sifa nyingine tagi unaweza kuweka maandishi badala ikiwa picha haipakia;
  • kwa kutumia sifa upana Na urefu unaweza kuweka ukubwa wa picha kwenye ukurasa wa wavuti;
  • kuna vitambulisho vilivyooanishwa vya kuingiza sauti na video katika html5

Ikiwa chochote haijulikani, uliza kwenye maoni na usisahau kujiandikisha kwa sasisho za blogi yangu. Tukutane katika machapisho yanayofuata!

Kwa kuingizwa picha katika HTML Miundo miwili kuu inayotumika ni GIF na JPEG. Umbizo la GIF linaweza kuhifadhi uhuishaji rahisi(mabango yenye nguvu), JPEG ni nzuri kwa picha zilizo na rangi nyingi, kama vile picha. Umbizo la tatu la michoro ya wavuti ni PNG, lakini haitumiwi sana katika muundo wa wavuti. Picha yoyote katika umbizo la GIF au JPEG huingizwa kwenye ukurasa wa wavuti kwa kutumia lebo; hakuna lebo ya kufunga.

Sifa ya SRC

Kupitia sifa src anwani (URL) ya faili ya picha imeelezwa, i.e. kivinjari hupata picha inayotaka kwenye saraka ya tovuti kwa kutumia njia (URL) iliyoainishwa katika sifa hii. Kwa urahisi, picha zote za tovuti ziko kwenye folda tofauti, kwa kawaida huitwa picha. Kwa mfano, chukua picha yoyote, ikiwezekana muundo mdogo, na uihifadhi kwenye picha ya folda iliyoundwa, na jina primer.jpg. Ifuatayo tutarejelea kwa mafunzo.

Naam, hebu jaribu kuingiza picha kwenye ukurasa? Tunaandika nambari (njia - URL, iliyoandikwa kulingana na eneo la folda iliyo na picha):

src="image/primer.jpg" >

Kile ambacho huwezi kuunda tovuti bila: ∼ ∼

Yote ambayo inajulikana kuhusu mtu huyu ni
kwamba hakuwa gerezani, lakini kwa nini hakuwa gerezani haijulikani.
Mark Twain.

Hili ni somo kuhusu jinsi ya kuingiza picha katika HTML, jinsi ya kuunda, jinsi ya kuifunga maandishi kwenye picha, nk. Baada ya yote, inajulikana kuwa picha hufanya tovuti kuvutia zaidi na tofauti na rasilimali nyingine, hivyo uwezo wa kutumia tag na sifa zake ni muhimu sana katika. mtandao wa kisasa. Lakini jambo kuu hapa ni hisia ya uwiano!

Kuzidisha kwa picha kutafanya ukurasa wa html kuwa mzito na, ipasavyo, kuongeza wakati wake wa upakiaji. Kwa kuongeza, uwepo idadi kubwa picha zitasumbua wageni kutoka kwa maudhui kuu ya tovuti (isipokuwa, bila shaka, graphics ni maudhui kuu ya tovuti). Kwa hiyo, weka kwa kiasi na uitumie tu pale inapohitajika. Na utakuwa na furaha!

Katika somo kuhusu, tayari nilizungumza juu ya jinsi unaweza kutumia picha kama usuli wa hati ya HTML. Sasa hebu tuzungumze kuhusu jinsi graphics hutumiwa katika "safu ya juu" ya ukurasa wa html.


§ 1. Jinsi ya kuingiza picha

Ili kuingiza picha kwenye HTML, tumia lebo IMG Na lazima sifa SRC. Sifa hii inaambia kivinjari njia ya faili ya picha. Wale. kuingiza picha yenye jina logo.jpg kwa mahali fulani kwenye ukurasa (mradi tu ukurasa na picha ziko kwenye folda moja(saraka)) unahitaji kuingiza nambari ifuatayo ya html mahali hapa:

src="logo.jpg">

Ikiwa picha na ukurasa ziko ndani tofauti saraka (folda), basi unahitaji kutaja njia ya picha kiasi kurasa. Kwa mfano, ikiwa ukurasa wa html iko kwenye tovuti ya saraka (folda), kwenye saraka sawa (folda) kuna picha ndogo (folda), ambayo logo.jpg yetu ya picha iko, kisha kuiingiza unahitaji. andika hivi:

images/logo.jpg">

Au sio lazima kuwa na wasiwasi na kuashiria anwani kamili Picha. Kwa mfano, kama hii:

http://www..png">

Katika kesi ya mwisho, kivinjari kitaonyesha nambari kama hii:

Kumbuka. Ikiwa picha iko kwenye kompyuta yako, lakini unataka kuiingiza kwa ukurasa wa mtandao, basi hakuna kitakachotokea. Ili kufanya hivyo, lazima kwanza uhamishe picha mahali fulani kwenye mtandao(Kwa mfano, ). Na onyesha anwani kamili katika msimbo wa ukurasa hadi sasa na picha.


Mbali na sifa inayohitajika SRC kwenye tagi IMG Kuna sifa chache zaidi za hiari. Hebu tuangalie kwa karibu zaidi.

§ 2. Kubainisha ukubwa wa picha

Hebu tuanze na sifa zinazokuwezesha kuweka vipimo vya picha(kwa usahihi zaidi, weka nafasi kwa vipimo hivi kwenye kurasa). Hizi hapa:

  • upana- upana wa picha katika saizi au asilimia;

  • urefu- urefu wa picha katika saizi au asilimia.

Ikiwa sifa hizi zinatumiwa, kwanza itatenga nafasi kwa graphics, kuandaa mpangilio wa hati, kuonyesha maandishi, na kisha tu kupakia picha. Wakati huo huo, itaweka picha katika mstatili wa ukubwa uliochaguliwa, hata ikiwa upana halisi na urefu wa picha ni kubwa (compress) au ndogo (kunyoosha). Katika kesi wakati sifa hizi hazitumiwi, kivinjari kitapakia picha mara moja, na maonyesho ya maandishi na mambo mengine yanayofuata yatachelewa.

Upana na urefu wa picha zinaweza kubainishwa katika saizi (ukubwa wa picha itakuwa thabiti bila kujali azimio la skrini) na kama asilimia (ukubwa wa picha itategemea azimio la skrini ya mtumiaji). Kwa mfano:

width="50" height="20">

width="10%" height="5%">

§ 3. Maandishi mbadala

Ikiwa mtumiaji amezima maonyesho ya picha katika mipangilio ya kivinjari, basi badala ya picha, maandishi mbadala yanaweza kuonyeshwa ambayo yangeelezea aina gani ya graphics inapaswa kuwepo. Hii inafanikiwa kwa kutumia sifa ALT:

Katika kesi hii, kivinjari kitahifadhi nafasi kwenye ukurasa kwa picha, lakini badala ya picha yenyewe, itaonyesha maandishi unayoandika kwa thamani ya sifa. ALT:

Ninarudia, hii itatokea ikiwa mtumiaji amezima maonyesho ya graphics. Ikiwa sivyo, picha itaficha maandishi mbadala.

§ 4. Kupanga picha

Kwa kutumia sifa ambayo tayari unajua panga unaweza kudhibiti upatanishi wa picha zinazohusiana na vipengele vingine vya ukurasa wa html. Katika sifa panga kuna maana kadhaa, lakini sisi ndio wengi zaidi wakati huu Ninavutiwa na mbili:

  • kushoto- picha iko kwenye makali ya kushoto ya ukurasa, na maandishi yanapita karibu na picha upande wa kulia;

  • haki- picha iko kwenye makali ya kulia ya ukurasa, na maandishi na vipengele vingine vinapita karibu na picha upande wa kushoto.

Kwa mfano, nambari ya HTML

kivinjari kitaonekana kama hii

Na nambari hii ya HTML:

itaonekana kama hii:

Ili kusimamisha maandishi kuzunguka picha, unaweza kutumia lebo BR(tunazofahamu kutoka sehemu iliyotangulia kuhusu). Kwenye tagi BR kuna sifa wazi, ambayo inaweza kuchukua maadili matatu:

  • kushoto- kuacha maandishi kuzunguka picha zilizopangwa kushoto;

  • haki- kuacha maandishi kuzunguka picha zilizopangwa kulia;

  • zote- Acha maandishi kuzunguka picha zilizounganishwa kushoto na kulia.

Wakati wa kusafiri kwenye mtandao, bila shaka unaona kwenye tovuti nyingi picha mbalimbali, mabango, picha, michoro. Leo tutajifunza jinsi ya kuingiza picha kwenye ukurasa wa HTML.

Kuongeza picha hutokea katika hatua mbili: kwanza, faili ya picha imeandaliwa ukubwa sahihi na umbizo, na kisha huongezwa kwa ukurasa wa wavuti kupitia lebo: . Hati ya HTML yenyewe imekusudiwa tu kuonyesha picha inayohitajika, wakati bila kuibadilisha hata kidogo.

Kuna mambo machache ya kuzingatia wakati wa kuandaa picha zako.

1. Kwa kuwa ukurasa wa wavuti umepakiwa kwenye mtandao, jambo muhimu ni saizi ("uzito") faili ya picha , iliyopachikwa kwenye hati ya wavuti. Kidogo ni, kasi ya picha itaonyeshwa.

2. Mara nyingi vipimo vya kimwili picha (upana na urefu) lazima ziwe na kikomo (zipunguzwe) kwa upana na urefu. Kwa mfano, weka upana kwa si zaidi ya saizi 700-800. Vinginevyo, picha nzima haitafaa kwenye dirisha la kivinjari, na baa za kusogeza zitaonekana.

Miundo ya picha za tovuti

Miundo miwili kuu ambayo hutumiwa sana kwa michoro ya wavuti ni: GIF Na JPEG. Sifa kama vile: multifunctionality, versatility, kiasi kidogo faili za chanzo yenye kutosha ubora mzuri, alihudumia miundo hii huduma nzuri, akifafanua kwa ufanisi kama kiwango cha picha za wavuti.

Kuna pia muundo: PNG, ambayo pia inaungwa mkono na vivinjari wakati wa kuongeza picha na huja katika ladha mbili: PNG-8 Na PNG-24. Walakini, umaarufu Muundo wa PNG duni sana katika kutambuliwa Miundo ya GIF na JPEG.

Kawaida kwa picha (picha) huunda folda tofauti kwenye saraka ya mizizi na picha zote za tovuti zimehifadhiwa ndani yake. Wakati mwingine kuna folda kadhaa kama hizo (ikiwa muundo wa tovuti unahitaji au ni rahisi kwako kuvinjari). Folda hii mara nyingi huitwa: img au Picha (Picha) Katika msimbo wa ukurasa wa wavuti wanaandika njia kamili kwa faili ya picha (ambapo picha iko), pamoja na jina faili hili(picha) ambazo unataka kuingiza kwenye hati ya html.

Tunaandika msimbo ili kuingiza picha kwenye ukurasa wa wavuti

Ili kuingiza picha kwenye hati ya HTML, tumia muundo uliobainishwa ndani Kuorodhesha 8.1. Msimbo huu umeingizwa kwenye sehemu inayotakiwa kwenye ukurasa wa wavuti (ambapo unataka kuona picha).

Katika ukurasa wetu wa sisi uliojitolea kwa magari, nilitayarisha na kuingiza picha mbili. Unaweza kuona msimbo wa kupachika wa picha ya kwanza katika Orodha ya 8.1.

Kuorodhesha 8.1.

Hivi ndivyo picha ya kwanza iliyoingizwa kwenye ukurasa wa wavuti itaonekana kama:

Na sasa nitatoa maoni kwa undani zaidi juu ya kile kilichoandikwa ndani Kuorodhesha 8.1.

Picha yenyewe "imeingizwa" kwa kutumia lebo: img src. Ingizo kamili linaonekana kama hii: img src="img/mers1.jpg", Wapi "img/mers1.jpg"- inaonyesha kuwa picha yetu iko kwenye folda: img, na jina la faili ya picha (picha): mers1.jpg.

Kimsingi, hii tayari inatosha kuingiza picha kwenye ukurasa wa wavuti, vigezo vilivyobaki ni vya hiari, lakini bado ninapendekeza ujiandikishe kila wakati, vinginevyo picha inaweza kuwa chini ya uharibifu wa kijiometri.

Wacha tuangalie chaguzi za ziada:

mpaka="0"- inaonyesha kuwa hakuna sura karibu na picha, jaribu kubadilisha 0 hadi nambari nyingine, kwa mfano 1 , - inalingana na unene wa sura karibu na picha ndani 1 pixel, 2 - inalingana na unene wa sura karibu na picha ya saizi mbili, nk.

Muhimu! Ikiwa unapanga kufanya picha kuwa kiungo, hakikisha unaonyesha thamani: mpaka="0".

upana = "400"- inaonyesha kuwa upana wa picha ni: Pikseli 400(kuweka takwimu halisi upana wa picha zako).

urefu = "209"- inaonyesha kuwa urefu wa picha ni: 209 pikseli(weka nambari halisi kwa urefu wa picha zako).

Ikiwa hutataja vigezo: upana Na urefu, basi picha inaweza kupokea upotovu wa kijiometri.

hspace="20"- inaonyesha ujongezaji wa pikseli 20 wa maandishi kuzunguka picha.

align="kushoto"- hii ni tagi ambayo tayari unaifahamu….. Hiyo ni kweli, inamaanisha upangaji wa kushoto, inaweza pia kuchukua maana: haki- mpangilio sahihi.

alt="Mwonekano wa mbele wa gari" !}- maandishi mbadala yameandikwa hapa, ambayo yanaonyeshwa unapoinua panya juu ya picha.

Kwa njia sawa kabisa, "tutaingiza" picha ya pili kwenye ukurasa wa wavuti, na tofauti pekee ni kwamba itaunganishwa kwa kulia.



Maoni juu ya nakala hii (somo):

Tafadhali niambie ni wapi ninapaswa kuunda folda ya img?

Folda ya img ni jina la kawaida tu, unaweza kuiita chochote unachotaka, mradi tu uielewe baadaye. Unaweza kuunda mahali popote, kwa unyenyekevu, uunda kwenye saraka ya mizizi na uweke picha zote hapo.

Jambo ni kwamba picha haionyeshwa, ni maandishi tu. Nini kinaweza kuwa kibaya? Asante.

Angalia kwa karibu Orodha 8.1 hapo juu. Chukua yote kwako. Katika saraka ya mizizi (ambapo faili zote za HTML za tovuti yako ziko), fanya folda ya img. Weka picha zako zote kwenye folda hii. Katika tangazo, badilisha mers1.jpg hadi jina la faili yako. Pia badilisha maadili ya upana na urefu kuwa ukubwa halisi faili yako. Bahati njema.

Asante sana, kila kitu kilifanyika.

Hujambo. Nina hali sawa na mzungumzaji uliopita: Ninaandika msimbo kama wako, nabadilisha tu jina la faili: badala ya mers.1/jpeg ninaingiza kiungo Mercedes/jpeg. Dirisha pekee linaonekana kwenye ukurasa na maandishi yaliyo juu "Mwonekano wa mbele wa gari", na hakuna picha. Kwa maoni yangu, kivinjari hakiwezi kupata njia ya kuelekea kwenye picha au haijaandikwa ipasavyo. HII NDIO MSIMBO WANGU: b

Angalia kwa makini msimbo wako wa img/mercedes/jpeg. Ulielewa kwa usahihi, kivinjari haipati njia ya faili ya picha. 2. Jina la faili si sahihi, ona jinsi nilivyo na mers1.jpg

Kweli, nilinakili nambari hiyo na kuibandika, nina mviringo bila picha, kwenye mviringo kuna kiunga hapo juu!

Jambo! Shida ni sawa, niliunda folda inayoitwa img katika sehemu sawa na hati za tovuti, picha zilizo na jina 1.jpg zimehifadhiwa kwenye folda hii, ninaandika kila kitu kama katika mfano wako.

Ikiwa umegundua picha yangu iko kwenye folda ya img

Nakala muhimu sana kwa wasimamizi wa wavuti wanaoanza. Tahadhari pekee kwa sifa ya "alt". Kuhusiana na takwimu, makala inatoa tafsiri ifuatayo: "alt="Mtazamo wa mbele wa gari." – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

hapa kuna nambari yangu HIVYO KWANINI PICHA INAWEKA UPANDE WAKATI KAZI YAKE NI CENTRE?

Na ikiwa nitapiga picha kutoka kwa tovuti ya mtu mwingine, je, haitakuwa ukiukaji wa hakimiliki?

Eleza kwa nini wakati wa kuweka nje Hati ya HTML kwa seva, badala ya picha kuna nafasi tupu kwenye fremu. Ingawa kabla ya onyesho, picha zilikuwa kama zinapaswa kuwa.

Dmitry, miujiza haifanyiki, ulifanya makosa mahali fulani, angalia njia zote za picha, i.e. jinsi picha zinavyoandikwa kwenye msimbo.

Hii ndio nambari yangu, kila kitu kinafunuliwa kwenye ukurasa isipokuwa picha, nimekuwa nikijaribu siku nzima kwa kila njia inayowezekana lakini hakuna chochote. tafadhali niambie cha kufanya

AndreyK, tafadhali wasiliana nami katika barua yangu. Siwezi kuingiza picha kwa njia yoyote, ninaingiza kila kitu kwa usahihi lakini hakuna chochote, sura tu na uandishi huonekana.

Elvira, nilisoma barua yako, pamoja na maoni na barua nyingine zote. Lakini nijibu wapi ... kwa kijiji cha babu yangu???

sijui kwanini kila mtu amekasirika sana!? Unahitaji tu kutokopi na kubandika nambari, lakini ziandike mwenyewe na kila kitu kitafanya kazi ... hapa kuna maandishi ya picha yangu.

Nilinakili uorodheshaji wako, nikabandika maadili yangu - kuna picha. Kisha ninaandika kitu sawa hapa chini (kwa mikono) hakuna picha - muujiza gani?

AndreyK tafadhali niambie kosa liko wapi? Haijalishi ni mara ngapi ninajaribu haifanyi kazi ((

Andrey, niambie kwa nini siwezi kuona picha. Msimbo wangu: Kuna maandishi, lakini hakuna picha. Anwani yangu: [barua pepe imelindwa] Asante.

Pia niliteseka kwa muda mrefu, lakini ilifanya kazi! Hakika, folda ya imj lazima ifunguliwe katika hati ya HTML.

Hakika nitajaribu, asante

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Pia niliteseka kwa muda mrefu, inageuka folda iliyo na picha inapaswa kuwa mahali sawa na index.html, asante Elena.

Andrey ninaingiza:

Andrey ninaingiza: na sina picha kwenye hati, ni maandishi tu!!!Anwani yangu: [barua pepe imelindwa]

kanuni yangu...hakuna picha pia. Folda ya img iko kwenye folda sawa na index... tafadhali msaada. [barua pepe imelindwa] Asante!

Naam sijui. Nilisoma maoni yote. Nilijaribu kila kitu. Nilikopi na kubandika habari zangu. Hakuna kinachofanya kazi. Folda yenye picha (img) iko katika sehemu sawa na index.html. Lakini hakuna picha. Badala yake kuna msalaba mwekundu na maandishi. Ninafanya kazi katika kivinjari cha IE. Hivi ndivyo nilivyoingiza:

Niliangalia msimbo wa HTML wa ukurasa badala ya picha kwenye somo: Nambari kwenye ukurasa ni tofauti na ile iliyo kwenye tangazo. Kwa nini? na, kwa njia, kwenye ukurasa msimbo "mers1.jpg" umesisitizwa. Imeshindwa kunakili kwa kupigia mstari. Nilijaribu kuiingiza kama hiyo. Bado hakuna picha. Kuna nini?

Tunajiuliza, tunajijibu wenyewe. Niliteseka kwa muda mrefu na picha haikuingizwa. Ilibadilika: 1, badala ya tag ya src nilikuwa na srk ​​2. Nilichanganyikiwa nilipokuwa nikitunga njia ya picha. Nilibadilisha folda kuwa IMG na kila kitu kilifanya kazi. Nilitumia karibu siku mbili juu ya hii, lakini ilistahili.

Upendo, lakini sasa utakumbuka hili kwa maisha yako yote :) Ninafanya utani, bila shaka, usiudhike. Lakini kwa uzito, ikiwa mtu hataacha anwani ya kurudi, basi karibu haiwezekani kwangu kumsaidia.

Halo, niambie jinsi ya kuweka picha moja juu, ya pili chini kushoto, na ya tatu chini kulia))))

.......... kosa langu la kukosa picha ni nini?

Kila kitu katika msimbo ni sawa, ikiwa hakuna kitu kilichoharibika, kila kitu kinapaswa kufanya kazi. Lakini andika jina la faili (picha) kwa herufi za Kiingereza. Seva nyingi hazikubali alfabeti ya Kilatini.

Lakini hapa ni nini cha ajabu ... nilipokuwa nikiita folda majina tofauti, picha haikutaka kuonekana, ingawa njia iliandikwa kwa usahihi. Mara tu nilipoita IMG, mara moja alionekana. Nini samaki?

Marina, hakuna hila au uchochezi :). Katika kanuni ya Orodha 8.1. imeonyeshwa kuwa picha hii iko kwenye folda: img. Ukibadilisha jina la folda kwa picha kwenye mwenyeji wako, kisha ubadilishe kwenye orodha, hiyo ndiyo hila nzima.

Najaribu kuingiza picha!!! Ninaandika kila kitu kwa kutumia notepad, ninafanya kila kitu kwa usahihi, labda haifai kutumia notepad ??

Na ninafungua kila kitu katika Mozilla Fire Fox hivi karibuni))

Njia ya picha yangu ni C:Documents and SettingsdenisDesktopkoffevinogradwwwImg na picha yenyewe inaitwa gif, pia jina linajumuisha 1.gif...nafanya hivi kwenye notepad. tovuti ya baridi

Nilifanya hivyo na njia kamili haikutoka, mozilla haioni picha ya mchunguzi na inaangazia kwa msalaba mwekundu.

Denis, ipe jina tena Folda ya Img katika img, i.e. Wote kwa herufi kubwa, na ubadilishe jina la njia yake pia. Seva nyingi hazionyeshi herufi kubwa ipasavyo.

Bado nina swali sawa: kwa nini sio picha, lakini maandishi tu. Niliunda folda tofauti kwa tovuti: ina ukurasa wa Wavuti na mchoro. Imeingizwa: SAIDIA NINI KOSA LANGU LA BARUA: [barua pepe imelindwa]

Jinsi ya kufanya picha ili iweze kupanuliwa au kupunguzwa?

Kwa sababu fulani picha hainihusu pia. Je! ni nini?.. Nambari ni kama hii:

Kufanya kazi na picha katika HTML (jinsi ya kuingiza picha, kubadilisha ukubwa wake, kufanya picha kuwa kiungo).

Kuingiza picha

Lebo ambayo haijaoanishwa hutumika kuingiza picha kwenye hati ya HTML , ambayo imewekwa mahali kwenye hati ambayo picha inapaswa kuingizwa. Lebo hii ina parameter inayohitajika src, ambayo thamani yake inaonyesha njia ya kwenda picha inayotakiwa katika saraka ya tovuti yako.


Kwa mfano, kuweka picha kwenye ukurasa:

Mstari ufuatao umewekwa mahali pazuri kwenye hati:



Hii huruhusu kivinjari kujua kwamba saraka ya mizizi ya tovuti www.mysite.com kuna orodha ndogo img 1.png


Hapa tumetaja njia kamili (au anwani kamili) kwa picha. Je, unaweza kubainisha anwani ya jamaa Picha:



Kivinjari kinatafsiri mstari huu kama ifuatavyo: kwenye saraka ambapo hati hii ya html iko, kuna orodha ndogo img, ina picha yenye jina 1.png, ambayo inapaswa kuwekwa kwenye ukurasa.


Na hapa kuna mfano wa kubainisha anwani ya picha ya jamaa ikiwa tovuti yako ina zaidi muundo tata na mfano uliopita haufanyi kazi:



Kivinjari kinatafsiri mstari huu kama ifuatavyo: mchanganyiko wa wahusika ../ ina maana kwamba unahitaji kwenda ngazi moja kutoka kwenye saraka ambapo hati hii ya html iko; na kisha kama katika mfano uliopita: katika saraka ambapo tunajikuta kuna subdirectory img, ina picha yenye jina 1.png, ambayo inapaswa kuwekwa kwenye ukurasa.


Kwa sababu za usalama, ni vyema kuashiria anwani ya jamaa ya picha, isipokuwa katika hali ambapo utaweka picha iliyo kwenye tovuti nyingine kwenye ukurasa wako.

Vipimo vya Picha

Ukubwa wa kila picha unatajwa na vigezo viwili: upana na urefu. Kwenye tagi Kuna vigezo vinavyolingana: upana Na urefu. Vigezo hivi huchukua maadili katika saizi (px).


Unaweza kuuliza vipimo vya kweli Picha:



Hii sio lazima, lakini ni muhimu kwa sababu ... inaharakisha kidogo mchakato wa kupakia ukurasa na kivinjari (kivinjari sio lazima kuhesabu maadili haya kwa uhuru). Ikiwa vipimo vya picha vinatajwa mara moja katika vigezo vya lebo , kisha chini picha hii Nafasi itatolewa kwenye ukurasa, na muundo wa ukurasa hautabadilika tena wakati wa kupakia - maandishi yataruka, kwa mfano.


Au unaweza kupanua au kupunguza picha kwa kugawa vigezo upana Na urefu maana zingine. Kwa kuongeza, ikiwa unataka kubadilisha vigezo vyote kwa uwiano, inatosha kuonyesha thamani mpya kwa moja tu yao, na uondoe pili. Kivinjari kitahesabu kiotomatiki.


Kwa mfano, ili kupanua picha yetu kwa mara 1.5, tunaweza kuandika:


au

Matokeo yake yatakuwa sawa:



Chaguo zaidi upana Na urefu inaweza kuchukua maadili kwa asilimia. Lakini! Tafadhali kumbuka kuwa hizi ni asilimia za ukubwa wa dirisha la kivinjari. Katika kesi hii, unaweza pia kutaja parameter moja tu na kuacha pili.


Kwa mfano, ikiwa tunataka picha kuchukua nusu ya ukurasa wetu kwa upana, tunahitaji kuandika yafuatayo:



Na tutapata:


Sura karibu na picha

Kwenye tagi kuna kigezo kimoja zaidi cha hiari mpaka. Tumia ili kuweka unene wa sura karibu na picha. Kwa default, unene wa sura ya picha ni sifuri, i.e. hakuna sura.


Kwa mfano, hivi ndivyo unavyoweza kuongeza fremu nene ya saizi 3 kwenye picha yetu:



Hivi ndivyo kivinjari kitatuonyesha:



Rangi ya mpaka inalingana na rangi ya maandishi kwenye ukurasa ulioainishwa kwa kutumia kigezo maandishi tagi (Angalia Somo la 6. Sifa za ukurasa - vigezo vya lebo ya mwili), rangi chaguo-msingi ni nyeusi.




Na ikiwa hutaki kuona sura, lazimisha paramu mpaka thamani ya null:


Maandishi mbadala

Maandishi mbadala inaonyeshwa na kivinjari mahali pa picha hadi itakapopakiwa. Au badala ya picha, ikiwa kwa sababu fulani haijaonyeshwa.



Wakati na ikiwa picha imepakiwa, maandishi mbadala itaonyeshwa unapopeperusha kipanya chako juu ya picha hii.



Ili kuongeza maandishi mbadala, tumia chaguo alt tagi , ambayo imepewa thamani ya kamba, ambayo lazima iambatanishwe katika nukuu.



Unaweza kuunda maandishi mbadala ya mistari mingi.



Ili kufanya hivyo, ingiza tu mapumziko ya mstari kwenye hati ya HTML.


maandishi">

Mpangilio wa Picha

Kwa picha, kama kwa aya, kuna wazo la upatanisho na maandishi na picha zingine kwenye ukurasa. Unaweza pia kuweka aina ya upatanishi kwa kutumia parameta panga tagi .


Chini ni jedwali la maadili yanayowezekana ya parameta panga:






Chaguo maandishi ya juu, juu, katikati, absmiddle, msingi, chini weka mpangilio wima wa picha. Na vigezo kushoto Na haki ruhusu kivinjari kujua maandishi yanapaswa kuwa upande gani mtiririko kote picha.

Padding kuzunguka picha

Ili kuzuia maandishi yasifunge karibu na picha, unaweza kuweka pedi kwenye picha. Unaweza kufanya hivyo kwa kutumia vigezo hspace(kushoto na kulia padding) na nafasi(nafasi juu na chini) ya lebo .


Mfano ufuatao unaonyesha maandishi yanayofunika picha, na picha ikiwa imepangiliwa kushoto na ikiwa na pikseli 5 za pedi kuizunguka:


Katika jiji la Stockholm, kwenye barabara ya kawaida zaidi, katika nyumba ya kawaida, wanaishi familia ya kawaida ya Uswidi inayoitwa Svanteson. Familia hii ina baba wa kawaida sana, mama wa kawaida sana na watoto watatu wa kawaida sana - Bosse, Bethan na Baby.

Hapa kuna matokeo kwenye kivinjari:


Katika jiji la Stockholm, kwenye barabara ya kawaida zaidi, katika nyumba ya kawaida, wanaishi familia ya kawaida ya Uswidi inayoitwa Svanteson. Familia hii ina baba wa kawaida sana, mama wa kawaida sana na watoto watatu wa kawaida sana - Bosse, Bethan na Baby.

Kugawanya picha katika sehemu

Kuna nyakati ambapo ni muhimu kuweka kwenye ukurasa picha kubwa. Lakini basi ukurasa utachukua muda mrefu kupakia. Nini cha kufanya?


Moja ya iwezekanavyo Njia bora ni kukata picha vipande vipande na kuiweka kwenye ukurasa kwa kutumia meza. Ili kufanya picha ionekane kwa ujumla, ni muhimu kuondoa mpaka wa meza na pedi zote za ndani na kati ya seli. Wale. gawa kwa vigezo vya lebo husika

maadili sifuri: mpaka="0", nafasi ya seli="0", cellpadding="0".


Katika mfano ufuatao, tunagawanya picha katika sehemu 4. Hivi ndivyo meza itaonekana kama:













Na hapa ndio matokeo:





MAKALA INAYOHUSIANA