మీ చిత్రాలకు చిత్రంతో ఉన్న శీర్షికను జోడించండి

చిత్రాలు మీ వెబ్ పేజీలకు జీవితాన్ని జోడించండి మరియు ప్రేక్షకుల దృష్టిని ఆకర్షిస్తాయి. శీర్షికలు మీ వెబ్ చిత్రాల గురించి అదనపు సమాచారాన్ని అందిస్తాయి, కానీ అవి ఆధునిక HTML మరియు CSS నైపుణ్యాలు లేకుండా వెబ్ పేజీలకు జోడించడంలో కష్టంగా ఉంటాయి. మీరు వెబ్పేజీలో కదిలే చోట ఇమేజ్తో ఉన్న ఇమేజ్కి సాధారణ, ఇంకా ఆకర్షణీయమైన, శీర్షికని జోడించడం కోసం ఇక్కడ నమ్మదగిన పద్ధతి.

ఒక HTML చిత్రం శీర్షిక దశలను

1. మీ వెబ్పేజీకి చిత్రాన్ని జోడించండి.

2. మీ వెబ్పేజీ కోసం HTML లో, చిత్రం చుట్టూ ఒక div ట్యాగ్ ఉంచండి:

   

3. DIV ట్యాగ్కు శైలి లక్షణాన్ని జోడించండి:

   శైలి = "">

   

4. వెడల్పు శైలి ఆస్తితో, ఇమేజ్ యొక్క వెడల్పును DW వెడల్పుకు సెట్ చేయండి:

   

5. చుట్టుపక్కల టెక్స్ట్ కంటే కొంచెం తక్కువగా ఉండే శీర్షికలకు, DIV శైలికి ఫాంట్ సైజు ఆస్తిని జోడించండి:

   

6. వారు చిత్రం క్రింద కేంద్రీకృతమైతే, శీర్షికలు ఉత్తమంగా కనిపిస్తాయి, కాబట్టి శైలి లక్షణానికి టెక్స్ట్-ఆల్లైన్ ఆస్తిని జోడించండి:

   

7. చివరగా, పాడింగ్ దిగువ శైలి లక్షణంతో చిత్రానికి శైలి లక్షణాన్ని జోడించడం ద్వారా చిత్రం మరియు శీర్షిక మధ్య కొద్దిగా అదనపు ఖాళీని జోడించండి:

   శైలి = "padding-bottom: 0.5em;" />

8. నేరుగా చిత్రం క్రింద టెక్స్ట్ శీర్షికను జోడించండి:

మీ సర్వర్కు వెబ్పేజీని అప్లోడ్ చేయండి మరియు బ్రౌజర్లో దాన్ని పరీక్షించండి.

శీర్షికలు చిట్కాలు

• CSS కొలతలు అనేక కొలతలు ఉంటుంది, కాబట్టి మీరు సాధారణంగా కొలత రకాన్ని కలిగి ఉండాలి. ఉదాహరణకి:

  వెడల్పు: 100px; ఏదేమైనప్పటికీ, HTML ఇమేజ్ కొలతలు ఎల్లప్పుడూ పిక్సెల్స్లో ఉంటాయి, కాబట్టి మీరు కొలతను ఆపివేస్తారు.

  వెడల్పు = "100"

• మీరు చిత్ర వెడల్పు కంటే డివై విస్తృత వెడల్పుని చేస్తే, చిత్రం పక్కన కనిపించవచ్చు. ఇది మీకు కావాలంటే, అప్పుడు ఒక
  శీర్షిక ముందు మరియు చిత్రం ట్యాగ్ తర్వాత నేరుగా ట్యాగ్ చేయండి.