ਕਿਸੇ ਵੀ ਵੈਬ ਪੇਜ ਨੂੰ ਅੱਜ ਹੀ ਦੇਖੋ ਅਤੇ ਤੁਸੀਂ ਵੇਖੋਗੇ ਕਿ ਉਹ ਕੁਝ ਖਾਸ ਚੀਜ਼ਾਂ ਸਾਂਝੇ ਕਰਦੇ ਹਨ. ਉਨ੍ਹਾਂ ਵਿਚ ਇਕ ਗੁਣ ਹੈ ਤਸਵੀਰਾਂ. ਸਹੀ ਚਿੱਤਰ ਇੱਕ ਵੈਬਸਾਈਟ ਦੇ ਪ੍ਰਸਾਰਣ ਵਿੱਚ ਬਹੁਤ ਜ਼ਿਆਦਾ ਜੋੜਦੇ ਹਨ. ਉਨ੍ਹਾਂ ਤਸਵੀਰਾਂ ਵਿੱਚੋਂ ਕੁਝ, ਜਿਵੇਂ ਕਿ ਕੰਪਨੀ ਦੇ ਲੋਗੋ, ਸਾਈਟ ਨੂੰ ਬ੍ਰੈਂਡ ਦੀ ਮਦਦ ਕਰਨ ਅਤੇ ਡਿਜ਼ੀਟਲ ਇਕਾਈ ਨੂੰ ਤੁਹਾਡੀ ਭੌਤਿਕ ਕੰਪਨੀ ਨਾਲ ਜੋੜਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦੇ ਹਨ.
ਇੱਕ ਚਿੱਤਰ, ਆਈਕਨ, ਜਾਂ ਆਪਣੇ ਵੈਬ ਪੇਜ ਤੇ ਗ੍ਰਾਫਿਕਜ਼ ਨੂੰ ਜੋੜਨ ਲਈ, ਤੁਹਾਨੂੰ ਟੈਗ ਨੂੰ ਸਫ਼ੇ ਦੇ HTML ਕੋਡ ਵਿੱਚ ਉਪਯੋਗ ਕਰਨ ਦੀ ਲੋੜ ਹੈ. ਤੁਸੀਂ ਆਪਣੇ HTML ਵਿੱਚ ਆਈਐਮਜੀ ਟੈਗ ਨੂੰ ਉਸੇ ਸਥਾਨ ਤੇ ਰੱਖੋ ਜਿੱਥੇ ਤੁਸੀਂ ਗਰਾਫਿਕਸ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ. ਵੈੱਬ ਬਰਾਊਜ਼ਰ ਜੋ ਸਫ਼ੇ ਦਾ ਕੋਡ ਪੇਸ਼ ਕਰ ਰਿਹਾ ਹੈ, ਸਫ਼ੇ ਨੂੰ ਵੇਖ ਲੈਣ ਤੋਂ ਬਾਅਦ ਇਸ ਟੈਗ ਨੂੰ ਢੁਕਵੇਂ ਗ੍ਰਾਫਿਕ ਨਾਲ ਬਦਲ ਦੇਵੇਗਾ. ਸਾਡੇ ਕੰਪਨੀ ਦੇ ਲੋਗੋ ਦੇ ਉਦਾਹਰਣ ਤੇ ਵਾਪਸ ਜਾਣਾ, ਇੱਥੇ ਤੁਸੀਂ ਆਪਣੀ ਤਸਵੀਰ ਵਿੱਚ ਇਹ ਤਸਵੀਰ ਕਿਵੇਂ ਜੋੜ ਸਕਦੇ ਹੋ:
ਚਿੱਤਰ ਗੁਣ
ਉਪਰੋਕਤ ਐਚ ਟੀ ਟੀ ਕੋਡ ਤੇ ਵੇਖਦਿਆਂ, ਤੁਸੀਂ ਵੇਖੋਂਗੇ ਕਿ ਐਲੀਮੈਂਟ ਵਿੱਚ ਦੋ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਹਨ. ਇਨ੍ਹਾਂ ਵਿੱਚੋਂ ਹਰੇਕ ਨੂੰ ਚਿੱਤਰ ਲਈ ਲੋੜੀਂਦਾ ਹੈ.
ਪਹਿਲਾ ਵਿਸ਼ੇਸ਼ਤਾ "src" ਹੈ. ਇਹ ਕਾਫ਼ੀ ਸ਼ਾਬਦਿਕ ਚਿੱਤਰ ਫਾਇਲ ਹੈ ਜੋ ਤੁਸੀਂ ਪੇਜ ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ. ਸਾਡੀ ਉਦਾਹਰਨ ਵਿੱਚ ਅਸੀਂ "ਲੋਗੋ.png" ਨਾਮ ਦੀ ਇੱਕ ਫਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ. ਇਹ ਉਹ ਗ੍ਰਾਫਿਕ ਹੈ ਜੋ ਵੈੱਬ ਬਰਾਊਜ਼ਰ ਨੂੰ ਸਾਈਟ ਨੂੰ ਪੇਸ਼ ਕਰਦੇ ਸਮੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗਾ.
ਤੁਸੀਂ ਇਹ ਵੀ ਵੇਖੋਗੇ ਕਿ ਇਸ ਫਾਈਲ ਨਾਮ ਤੋਂ ਪਹਿਲਾਂ, ਅਸੀਂ ਕੁਝ ਵਾਧੂ ਜਾਣਕਾਰੀ "/ images /" ਸ਼ਾਮਿਲ ਕੀਤੀ ਹੈ. ਇਹ ਫਾਈਲ ਪਾਥ ਹੈ. ਸ਼ੁਰੂਆਤੀ ਫੌਰਵਰਡ ਸਲੈਸ਼ ਸਰਵਰ ਨੂੰ ਡਾਇਰੈਕਟਰੀ ਦੇ ਰੂਟ ਦੀ ਘੋਖ ਕਰਨ ਲਈ ਦੱਸਦਾ ਹੈ. ਇਹ ਫਿਰ "ਚਿੱਤਰ" ਨਾਮਕ ਇੱਕ ਫੋਲਡਰ ਦੀ ਭਾਲ ਕਰੇਗਾ ਅਤੇ ਅਖੀਰ ਵਿੱਚ "ਲੋਗੋ". ਸਾਰੇ ਸਾਈਟ ਦੇ ਗਰਾਫਿਕਸ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ "ਚਿੱਤਰ" ਨਾਮਕ ਇੱਕ ਫੋਲਡਰ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਇੱਕ ਆਮ ਅਭਿਆਸ ਹੈ, ਪਰ ਤੁਹਾਡੀ ਸਾਈਟ ਲਈ ਜੋ ਵੀ ਮਾਰਗ ਹੈ ਉਹ ਤੁਹਾਡੀ ਸਾਈਟ ਲਈ ਬਦਲਿਆ ਜਾਵੇਗਾ.
ਦੂਜੀ ਲੋੜੀਂਦੀ ਵਿਸ਼ੇਸ਼ਤਾ "alt" ਟੈਕਸਟ ਹੈ. ਇਹ "ਵਿਕਲਪਕ ਪਾਠ" ਹੈ ਜੋ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਕਿ ਚਿੱਤਰ ਕਿਸੇ ਕਾਰਨ ਕਰਕੇ ਲੋਡ ਕਰਨ ਵਿੱਚ ਅਸਫਲ ਹੁੰਦਾ ਹੈ. ਇਹ ਪਾਠ, ਜੋ ਸਾਡੀ ਉਦਾਹਰਨ ਵਿਚ ਪੜ੍ਹਦਾ ਹੈ "ਕੰਪਨੀ ਲੋਗੋ" ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਏਗਾ ਜੇ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਵਿੱਚ ਅਸਫਲ ਹੁੰਦਾ ਹੈ. ਅਜਿਹਾ ਕਿਉਂ ਹੋਵੇਗਾ? ਕਈ ਕਾਰਨ:
- ਗ਼ਲਤ ਫਾਈਲ ਪਾਥ
- ਗਲਤ ਫਾਈਲ ਨਾਮ ਜਾਂ ਗਲਤ ਸ਼ਬਦਕੋਸ਼
- ਟ੍ਰਾਂਸਮਿਸ਼ਨ ਅਸ਼ੁੱਧੀ
- ਫਾਇਲ ਨੂੰ ਸਰਵਰ ਤੋਂ ਹਟਾਇਆ ਗਿਆ ਸੀ
ਇਹ ਸਾਡੇ ਲਈ ਕੁਝ ਸੰਭਾਵਨਾਵਾਂ ਹਨ ਕਿ ਕਿਉਂ ਸਾਡੀ ਨਿਸ਼ਚਿਤ ਤਸਵੀਰ ਲਾਪਤਾ ਹੋ ਸਕਦੀ ਹੈ ਇਨ੍ਹਾਂ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਸਾਡਾ ਅਲਟ ਟੈਕਸਟ ਇਸ ਦੀ ਬਜਾਏ ਦਰਸਾਏਗਾ.
ਆਲਟ ਟੈਕਸਟ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਸਾਫਟਵੇਯਰ ਦੁਆਰਾ ਚਿੱਤਰ ਦੀ "ਦਰਸ਼ਕ" ਨੂੰ ਵਿਜ਼ਟਰ ਵਿੱਚ "ਪਡ਼ੋ" ਕਰਨ ਲਈ ਵੀ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਦਰਸ਼ਣ ਦੀ ਕਮਜ਼ੋਰੀ ਹੈ. ਕਿਉਕਿ ਉਹ ਸਾਡੇ ਵਰਗੇ ਚਿੱਤਰ ਨੂੰ ਨਹੀਂ ਦੇਖ ਸਕਦੇ, ਇਸ ਲਈ ਇਹ ਪਾਠ ਉਹਨਾਂ ਨੂੰ ਇਹ ਜਾਣਨ ਦਿੰਦਾ ਹੈ ਕਿ ਚਿੱਤਰ ਖੁਦ ਕੀ ਹੈ ਇਸ ਲਈ ਏਲਟ ਪਾਠ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਅਤੇ ਇਹ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਚਿੱਤਰ ਨੂੰ ਕੀ ਕਹਿਣਾ ਚਾਹੀਦਾ ਹੈ!
Alt ਪਾਠ ਦੀ ਇੱਕ ਆਮ ਗ਼ਲਤਫ਼ਹਿਮੀ ਹੈ ਕਿ ਇਹ ਖੋਜ ਇੰਜਨ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ ਹੈ ਇਹ ਸੱਚ ਨਹੀਂ ਹੈ. ਜਦੋਂ ਕਿ ਗੂਗਲ ਅਤੇ ਦੂਜੇ ਖੋਜ ਇੰਜਣ ਇਸ ਪਾਠ ਨੂੰ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਪੜ੍ਹਦੇ ਹਨ ਕਿ ਚਿੱਤਰ ਕੀ ਹੈ (ਯਾਦ ਰੱਖੋ, ਉਹ ਤੁਹਾਡੀ ਚਿੱਤਰ ਨੂੰ "ਨਹੀਂ" ਵੇਖ ਸਕਦੇ), ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਖੋਜ ਇੰਜਣਾਂ ਲਈ ਅਪੀਲ ਕਰਨ ਵਾਸਤੇ alt ਟੈਕਸਟ ਨਹੀਂ ਲਿਖਣਾ ਚਾਹੀਦਾ. ਲੇਖਕ ਸਾਫ਼-ਸਾਫ਼ ਪਾਠ ਹੈ ਜੋ ਮਨੁੱਖਾਂ ਲਈ ਹੈ ਜੇ ਤੁਸੀਂ ਟੈਗ ਵਿੱਚ ਕੁਝ ਸ਼ਬਦ ਜੋੜ ਸਕਦੇ ਹੋ ਜੋ ਖੋਜ ਇੰਜਣ ਨੂੰ ਅਪੀਲ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਵਧੀਆ ਹੈ, ਪਰ ਹਮੇਸ਼ਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉ ਕਿ Alt ਪਾਠ ਆਪਣੇ ਪ੍ਰਾਇਮਰੀ ਉਦੇਸ਼ ਦੀ ਸੇਵਾ ਕਰ ਰਿਹਾ ਹੈ ਕਿ ਇਹ ਚਿੱਤਰ ਕਿਸੇ ਵੀ ਵਿਅਕਤੀ ਲਈ ਹੈ ਜੋ ਗ੍ਰਾਫਿਕਸ ਫਾਈਲ ਨੂੰ ਨਹੀਂ ਦੇਖ ਸਕਦੇ.
ਹੋਰ ਗੁਣ
IMG ਟੈਗ ਵਿੱਚ ਦੋ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੀ ਹਨ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਵੈਬ ਪੇਜ ਤੇ - ਜਦੋਂ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਤੇ ਗ੍ਰਾਫਿਕ ਪਾਉਂਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਵਰਤੋਂ ਵਿੱਚ ਦੇਖ ਸਕਦੇ ਹੋ. ਉਦਾਹਰਨ ਲਈ, ਜੇ ਤੁਸੀਂ Dreamweaver ਵਰਗੇ ਇੱਕ WYSIWYG ਸੰਪਾਦਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਇਹ ਆਪਣੇ ਆਪ ਹੀ ਤੁਹਾਡੇ ਲਈ ਇਹ ਜਾਣਕਾਰੀ ਸ਼ਾਮਿਲ ਕਰਦਾ ਹੈ ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
WIDTH ਅਤੇ HEIGHT ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਚਿੱਤਰ ਦੇ ਆਕਾਰ ਦੱਸਦੀਆਂ ਹਨ. ਬ੍ਰਾਊਜ਼ਰ ਫਿਰ ਜਾਣਦਾ ਹੈ ਕਿ ਲੇਆਉਟ ਵਿਚ ਕਿੰਨੀ ਸਪੇਸ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਹੈ, ਅਤੇ ਇਹ ਪੰਨੇ ਤੇ ਅਗਲੇ ਐਲੀਮੈਂਟ ਤੇ ਜਾ ਸਕਦਾ ਹੈ ਜਦੋਂ ਚਿੱਤਰ ਡਾਊਨਲੋਡ ਕਰਦਾ ਹੈ. ਤੁਹਾਡੇ HTML ਵਿੱਚ ਇਸ ਜਾਣਕਾਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਿੱਚ ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਹਮੇਸ਼ਾਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡਾ ਚਿੱਤਰ ਇਸ ਸਹੀ ਆਕਾਰ ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਨਾ ਕਰੇ. ਉਦਾਹਰਨ ਲਈ, ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਜਵਾਬਦੇਹ ਵੈਬਸਾਈਟ ਹੈ ਜਿਸਦਾ ਆਕਾਰ ਇੱਕ ਸੈਲਾਨੀ ਸਕਰੀਨ ਅਤੇ ਡਿਵਾਈਸ ਦੇ ਆਕਾਰ ਤੇ ਆਧਾਰਿਤ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇਹ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਚਿੱਤਰ ਲਚਕਦਾਰ ਹੋਣ. ਜੇ ਤੁਸੀਂ ਆਪਣੇ HTML ਵਿੱਚ ਦੱਸਦੇ ਹੋ ਕਿ ਨਿਸ਼ਚਿਤ ਆਕਾਰ ਕੀ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਜਵਾਬਦੇਹ CSS ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੇ ਨਾਲ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਬਹੁਤ ਮੁਸ਼ਕਲ ਹੋਵੋਗੇ. ਇਸ ਕਾਰਨ ਕਰਕੇ, ਅਤੇ ਸਟਾਈਲ (CSS) ਅਤੇ ਢਾਂਚਾ (HTML) ਦੇ ਵੱਖਰੇਪਨ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਣ ਲਈ, ਇਹ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੇ HTML ਕੋਡ ਲਈ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਨਾ ਸ਼ਾਮਲ ਕਰੋ.
ਇਕ ਨੋਟ: ਜੇ ਤੁਸੀਂ ਇਹ ਸਾਈਜ਼ਿੰਗ ਨਿਰਦੇਸ਼ ਬੰਦ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹੋ ਅਤੇ CSS ਵਿਚ ਇਕ ਅਕਾਰ ਨਹੀਂ ਦਰਸਾਉਂਦੇ, ਤਾਂ ਬ੍ਰਾਉਜ਼ਰ ਇਸ ਦੀ ਡਿਫਾਲਟ, ਮੂਲ ਆਕਾਰ ਤੇ ਵੀ ਚਿੱਤਰ ਦਿਖਾਏਗਾ.
ਜੇਰੇਮੀ ਗਿਰਾਰਡ ਦੁਆਰਾ ਸੰਪਾਦਿਤ