ਉਸ ਚਿੱਤਰ ਦੇ ਨਾਲ ਇਕ ਵੈਬ ਕੈਪਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ

9 ਆਸਾਨ ਕਦਮਾਂ ਵਿੱਚ ਵੈਬ ਤਸਵੀਰਾਂ ਲਈ HTML ਕੈਪਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ

ਚਿੱਤਰ ਤੁਹਾਡੇ ਵੈਬ ਪੇਜਾਂ ਤੇ ਜੀਵਨ ਨੂੰ ਜੋੜਦੇ ਹਨ ਅਤੇ ਦਰਸ਼ਕਾਂ ਦਾ ਧਿਆਨ ਖਿੱਚਦੇ ਹਨ. ਸੁਰਖੀਆਂ ਤੁਹਾਡੇ ਵੈਬ ਪ੍ਰਤੀਬਿੰਬਾਂ ਬਾਰੇ ਅਤਿਰਿਕਤ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ, ਪਰ ਐਡਵਾਂਸਡ ਐਚ ਟੀ ਟੀ ਅਤੇ ਸੀਐਸਐਸ ਹੁਨਰਾਂ ਤੋਂ ਬਿਨਾਂ ਵੈਬ ਪੇਜਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਔਖਾ ਹੋ ਸਕਦਾ ਹੈ. ਇੱਥੇ ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਇੱਕ ਸਧਾਰਨ, ਪਰ ਆਕਰਸ਼ਕ, ਕੈਪਸ਼ਨ ਨੂੰ ਜੋੜਨ ਦਾ ਇੱਕ ਭਰੋਸੇਯੋਗ ਤਰੀਕਾ ਹੈ ਜੋ ਚਿੱਤਰ ਦੇ ਨਾਲ ਰਹਿੰਦਾ ਹੈ ਜਿੱਥੇ ਵੀ ਤੁਸੀਂ ਇਸ ਨੂੰ ਵੈਬਪੰਨੇ ਤੇ ਲੈ ਜਾਂਦੇ ਹੋ.

ਇੱਕ HTML ਚਿੱਤਰ ਕੈਪਚਰ ਲਈ 9 ਕਦਮ

ਇੱਕ ਚਿੱਤਰ ਵਿੱਚ ਇੱਕ ਸੁਰਖੀ ਜੋੜੋ ਅਤੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਉਹਨਾਂ ਨੂੰ ਇਕਠਿਆਂ ਕਰੋ:

1. ਆਪਣੇ ਵੈੱਬਪੇਜ ਤੇ ਇੱਕ ਚਿੱਤਰ ਸ਼ਾਮਲ ਕਰੋ
2. ਆਪਣੇ ਵੈਬਪੰਨੇ ਲਈ HTML ਵਿੱਚ, ਚਿੱਤਰ ਦੇ ਦੁਆਲੇ ਇਕ ਵਿਜੇਟ ਟੈਗ ਰੱਖੋ:
3. DIV ਟੈਗ ਨੂੰ ਇੱਕ ਸਟਾਈਲ ਐਟਰੀਬਿਊਟ ਜੋੜੋ:
   style = "" >
4. ਚੌੜਾਈ ਦੀ ਸ਼ੈਲੀ ਦੇ ਨਾਲ, ਚਿੱਤਰ ਦੀ ਇਕੋ ਚੌੜਾਈ ਨੂੰ ਦੀਵੇ ਦੀ ਚੌੜਾਈ :
   width: image width px; ">
5. ਸੁਰਖੀਆਂ ਲਈ ਜਿਹੜੇ ਆਲੇ ਦੁਆਲੇ ਦੇ ਪਾਠ ਤੋਂ ਥੋੜੇ ਛੋਟੇ ਹੁੰਦੇ ਹਨ, ਉਹਨਾਂ ਲਈ ਫੌਂਟ-ਅਕਾਰ ਦੀ ਜਾਇਦਾਦ ਡੀਵ ਸਟਾਈਲ ਵਿੱਚ ਜੋੜੋ:
   font-size: 80%; ">
6. ਸਿਰਲੇਖਾਂ ਸਭ ਤੋਂ ਬਿਹਤਰ ਹੁੰਦੀਆਂ ਹਨ ਜੇ ਉਹ ਚਿੱਤਰ ਦੇ ਹੇਠਾਂ ਕੇਂਦਰਿਤ ਹੁੰਦੀਆਂ ਹਨ, ਇਸਲਈ ਸਟਾਇਲ ਵਿਸ਼ੇਸ਼ਤਾ ਲਈ ਇੱਕ ਪਾਠ-ਅਲਾਈਨ ਸੰਪੱਤੀ ਸ਼ਾਮਲ ਕਰੋ:
   text-align: center; "> < img src = "URL" alt = "ਵਿਕਲਪਿਕ ਟੈਕਸਟ" ਚੌੜਾਈ = "ਚੌੜਾਈ" ਉਚਾਈ = "ਉੱਚਾਈ" />
7. ਅੰਤ ਵਿੱਚ, ਚਿੱਤਰ ਅਤੇ ਸਿਰਲੇਖ ਦੇ ਵਿਚਕਾਰ ਥੋੜਾ ਜਿਹਾ ਵਾਧੂ ਸਪੇਸ ਜੋੜੋ, ਇੱਕ ਪੈਡਿੰਗ-ਹੇਠਾਂ ਸ਼ੈਲੀ ਪ੍ਰਾਪਰਟੀ ਦੇ ਨਾਲ ਚਿੱਤਰ ਨੂੰ ਸਟਾਈਲ ਐਟਰੀਬਿਊਟ ਜੋੜ ਕੇ:
   ਸ਼ੈਲੀ =" ਪੈਡਿੰਗ-ਥੰਮ: 0.5 ਐਮ; " />

1. ਫਿਰ ਚਿੱਤਰ ਦੇ ਹੇਠਾਂ ਟੈਕਸਟ ਕੈਪਸ਼ਨ ਨੂੰ ਸਿੱਧਾ ਜੋੜੋ:
   ਇਹ ਮੇਰਾ ਸੁਰਖੀ ਹੈ

ਆਪਣੇ ਸਰਵਰ ਨੂੰ ਵੈਬਪੇਜ ਅਪਲੋਡ ਕਰੋ ਅਤੇ ਇਸ ਨੂੰ ਬ੍ਰਾਉਜ਼ਰ ਵਿਚ ਜਾਂਚ ਕਰੋ.

ਕੈਪਸ਼ਨਿੰਗ ਟਿਪਸ

• ਚੌੜਾਈਆਂ : CSS ਮਾਪ ਬਹੁਤ ਸਾਰੇ ਵੱਖਰੇ ਮਾਪਾਂ ਵਿੱਚ ਹੋ ਸਕਦੇ ਹਨ, ਇਸ ਲਈ ਆਮ ਤੌਰ ਤੇ ਤੁਹਾਨੂੰ ਮਾਪ ਦੀ ਕਿਸਮ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਉਦਾਹਰਣ ਵਜੋਂ: ਚੌੜਾਈ: 100 ਪੈਕਸ ; ਹਾਲਾਂਕਿ, HTML ਚਿੱਤਰ ਮਾਪਾਂ ਹਮੇਸ਼ਾ ਪਿਕਸਲ ਵਿੱਚ ਹੁੰਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਤੁਸੀਂ ਮਾਪ ਨੂੰ ਛੱਡ ਦਿੰਦੇ ਹੋ. ਚੌੜਾਈ = "100"
• ਜੇ ਤੁਸੀਂ ਚਿੱਤਰ ਦੀ ਚੌੜਾਈ ਨਾਲੋਂ ਵਿਭਾਜਨ ਦੀ ਚੌੜਾਈ ਨੂੰ ਵਿਸਤਾਰ ਕਰਦੇ ਹੋ, ਤਾਂ ਚਿੱਤਰ ਦੇ ਕੋਲ ਸੁਰਖੀ ਪ੍ਰਗਟ ਹੋ ਸਕਦੀ ਹੈ. ਜੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਇਹ ਹੈ, ਤਾਂ ਕੈਪਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ ਅਤੇ ਚਿੱਤਰ ਟੈਗ ਦੇ ਬਾਅਦ ਸਿੱਧਾ ਇੱਕ
  ਟੈਗ ਜੋੜੋ.