Ongeza maelezo ya Mtandao ambayo hukaa na picha yake

Ongeza Captions ya HTML kwenye Picha za Mtandao katika hatua 9 rahisi

Picha zinaongeza maisha kwenye wavuti zako na kuteka tahadhari ya watazamaji. Maneno ya kutoa maelezo zaidi kuhusu picha zako za wavuti, lakini zinaweza kuwa vigumu kuongeza kwenye wavuti za mtandao bila ujuzi wa juu wa HTML na CSS. Hapa kuna njia ya kuaminika ya kuongeza maelezo rahisi, lakini yenye kuvutia, kwa picha ambayo inakaa na picha popote unapoiingiza kwenye ukurasa wa wavuti.

Hatua za Hifadhi ya Picha ya HTML

Ongeza maelezo kwa sanamu na uwape pamoja popote unayotaka:

1. Ongeza picha kwenye ukurasa wako wa wavuti.
2. Katika HTML kwa ukurasa wako wa wavuti, fanya tag ya div karibu na picha:
3. Ongeza sifa ya mtindo kwa lebo ya div:
   style = "" >
4. Weka upana wa div kwa upana huo kama picha, na mali ya mtindo wa upana :
   upana: upana wa picha px; ">
5. Kwa maelezo mafupi yaliyo ndogo zaidi kuliko maandishi yaliyomo, ongeza mali ya ukubwa wa font kwa style ya div:
   ukubwa wa font: 80%; ">
6. Maandishi yanaonekana bora kama yana msingi chini ya picha, hivyo ongeza alama ya kuandika maandishi kwa sifa ya mtindo:
   usaidizi wa maandiko: kituo; "> < img src = "URL" alt = "maandishi mengine" upana = "upana" urefu = "urefu" />
7. Hatimaye, ongeza nafasi ndogo zaidi kati ya picha na maelezo, kwa kuongeza sifa ya mtindo kwa picha yenye mali ya mtindo wa chini :
   style =" chini-padding: 0.5em; " />

1. Kisha kuongeza maelezo ya maandiko moja kwa moja chini ya picha:
   Hii ni maelezo yangu

Pakia ukurasa wavuti kwenye seva yako na ukijaribu kwenye kivinjari.

Vidokezo vya maandishi

• Vipimo : vipimo vya CSS vinaweza kupima vipimo vingi, kwa hivyo kawaida lazima iwe na aina ya kipimo. Kwa mfano: upana: 100 px ; Hata hivyo, vipimo vya picha za HTML ni mara kwa mara katika saizi, hivyo huacha kipimo. upana = "100"
• Ukitengeneza upana wa div zaidi ya upana wa picha, maelezo yanaweza kuonekana kando ya picha. Ikiwa ndio unavyotaka, kisha ongeza tagi