ਗੂਗਲ ਕਰੋਮ ਵਿਚ ਐਚਟੀਐਸ ਸੋਰਸ ਕਿਵੇਂ ਵੇਖਣਾ ਹੈ

ਜਾਣੋ ਕਿ ਇਕ ਵੈਬਸਾਈਟ ਕਿਵੇਂ ਬਣਾਈ ਗਈ ਸੀ ਇਸਦਾ ਸਰੋਤ ਕੋਡ ਦੇਖ ਕੇ

ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰ ਆਪਣੇ ਵੈੱਬਸਾਈਟ ਨੂੰ ਵੈੱਬ ਡਿਜ਼ਾਇਨਰ ਦੇ ਤੌਰ ਤੇ ਸ਼ੁਰੂ ਕੀਤਾ, ਤਾਂ ਮੈਂ ਹੋਰ ਵੈਬ ਡਿਜ਼ਾਈਨਰ ਦੇ ਕੰਮ ਦੀ ਸਮੀਖਿਆ ਕਰਕੇ ਬਹੁਤ ਕੁਝ ਸਿੱਖਿਆ, ਜਿਨ੍ਹਾਂ ਦੀ ਮੈਂ ਪ੍ਰਸ਼ੰਸਾ ਕੀਤੀ. ਮੈਂ ਇਸ ਵਿੱਚ ਇਕੱਲੇ ਨਹੀਂ ਹਾਂ. ਚਾਹੇ ਤੁਸੀਂ ਵੈਬ ਇੰਡਸਟਰੀ ਜਾਂ ਇਕ ਤਜਰਬੇਕਾਰ ਬਜ਼ੁਰਗ ਦੇ ਲਈ ਨਵੇਂ ਹੋ, ਵੱਖਰੇ ਵੈਬ ਪੇਜਾਂ ਦਾ HTML ਸ੍ਰੋਤ ਵੇਖਣਾ ਤੁਹਾਡੇ ਕੈਰੀਅਰ ਦੇ ਕੋਰਸ ਦੌਰਾਨ ਤੁਸੀਂ ਕਈ ਵਾਰ ਕਰ ਸਕਦੇ ਹੋ.

ਜਿਹੜੇ ਲੋਕ ਵੈਬ ਡਿਜ਼ਾਈਨ ਲਈ ਨਵੇਂ ਹਨ, ਸਾਈਟ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਦੇਖਣ ਲਈ ਇਹ ਦੇਖਣ ਲਈ ਸਭ ਤੋਂ ਅਸਾਨ ਤਰੀਕੇ ਹਨ ਕਿ ਕੁਝ ਚੀਜ਼ਾਂ ਕਿਵੇਂ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ ਤਾਂ ਜੋ ਤੁਸੀਂ ਉਸ ਕੰਮ ਤੋਂ ਸਿੱਖੋ ਅਤੇ ਆਪਣੇ ਕੰਮ ਵਿੱਚ ਕੁਝ ਕੋਡ ਜਾਂ ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਸ਼ੁਰੂ ਕਰੋ. ਅੱਜ ਦੇ ਕਿਸੇ ਵੀ ਵੈੱਬ ਡਿਜ਼ਾਇਨਰ ਦੇ ਰੂਪ ਵਿੱਚ ਅੱਜ, ਖਾਸ ਤੌਰ 'ਤੇ ਉਹ ਜੋ ਉਦਯੋਗ ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਤੋਂ ਲੈ ਕੇ ਆਏ ਹਨ ਅਤੇ ਇਹ ਇਕ ਸੁਰੱਖਿਅਤ ਸ਼ਰਤ ਹੈ ਕਿ ਉਹ ਤੁਹਾਨੂੰ ਦੱਸਦੇ ਹਨ ਕਿ ਉਹਨਾਂ ਨੇ ਉਹਨਾਂ ਵੈਬ ਪੇਜਾਂ ਦੇ ਸਰੋਤ ਨੂੰ ਦੇਖ ਕੇ, ਜੋ ਉਹਨਾਂ ਨੇ ਵੇਖਿਆ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਹੈਰਾਨ ਕੀਤਾ ਹੈ ਨਾਲ. ਵੈਬ ਡਿਜ਼ਾਈਨ ਦੀਆਂ ਕਿਤਾਬਾਂ ਪੜ੍ਹਨ ਜਾਂ ਪੇਸ਼ੇਵਰ ਕਾਨਫ਼ਰੰਸਾਂ ਵਿਚ ਹਿੱਸਾ ਲੈਣ ਦੇ ਨਾਲ-ਨਾਲ , ਸਾਈਟ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਦੇਖਣ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਲਈ HTML ਸਿੱਖਣਾ ਇਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ

ਬਸ HTML ਤੋਂ ਵੱਧ

ਇਕ ਗੱਲ ਯਾਦ ਰੱਖਣ ਵਾਲੀ ਗੱਲ ਇਹ ਹੈ ਕਿ ਸਰੋਤ ਫਾਈਲਾਂ ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਹੋ ਸਕਦੀਆਂ ਹਨ (ਅਤੇ ਜਿੰਨੀ ਵੈੱਬਸਾਈਟ ਜੋ ਤੁਸੀਂ ਦੇਖ ਰਹੇ ਹੋ, ਉਹ ਬਹੁਤ ਜ਼ਿਆਦਾ ਗੁੰਝਲਦਾਰ ਹੈ, ਸਾਈਟ ਦੇ ਕੋਡ ਨੂੰ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਹੈ). HTML ਢਾਂਚੇ ਦੇ ਨਾਲ ਜੋ ਤੁਸੀਂ ਵੇਖ ਰਹੇ ਹੋ ਸਫ਼ਾ ਬਣਾ ਦਿੰਦਾ ਹੈ, ਉੱਥੇ CSS (ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟ) ਵੀ ਹੋਣਗੇ ਜੋ ਉਸ ਸਾਈਟ ਦੇ ਦਿੱਖ ਰੂਪ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ. ਇਸ ਤੋਂ ਇਲਾਵਾ, ਅੱਜ ਦੀਆਂ ਬਹੁਤ ਸਾਰੀਆਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਐਚਟੀਐਮਐਲ ਦੇ ਨਾਲ ਸ਼ਾਮਲ ਸਕ੍ਰਿਪਟ ਫਾਇਲਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਜਾਣਗੀਆਂ.

ਅਸਲ ਵਿੱਚ, ਹਰ ਇੱਕ ਨੂੰ ਸਾਈਟ ਦੇ ਵੱਖ-ਵੱਖ ਪਹਿਲੂਆਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਨ ਵਾਲਾ ਮਲਟੀਪਲ ਸਕ੍ਰਿਪਟ ਫਾਇਲਾਂ ਹੋਣ ਦੀ ਸੰਭਾਵਨਾ ਹੈ. ਸਪੱਸ਼ਟ ਤੌਰ ਤੇ, ਸਾਈਟ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਲੱਗ ਸਕਦਾ ਹੈ, ਖ਼ਾਸ ਕਰਕੇ ਜੇ ਤੁਸੀਂ ਅਜਿਹਾ ਕਰਨ ਲਈ ਨਵੇਂ ਹੋ ਨਿਰਾਸ਼ ਨਾ ਹੋਵੋ ਜੇਕਰ ਤੁਸੀਂ ਇਹ ਨਾ ਪਛਾਣ ਸਕੋ ਕਿ ਉਸੇ ਸਾਈਟ 'ਤੇ ਤੁਰੰਤ ਕੀ ਹੋ ਰਿਹਾ ਹੈ. HTML ਸ੍ਰੋਤ ਵੇਖਣਾ ਇਸ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਸਿਰਫ ਪਹਿਲਾ ਕਦਮ ਹੈ. ਇੱਕ ਥੋੜ੍ਹਾ ਅਨੁਭਵ ਨਾਲ, ਤੁਸੀਂ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਇਹ ਸਮਝਣਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਸਭ ਕਿਸਮਾਂ ਨੂੰ ਤੁਹਾਡੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਵੇਖਾਈ ਗਈ ਵੈਬਸਾਈਟ ਬਣਾਉਣ ਲਈ ਇੱਕਠੀਆਂ ਫਿੱਟ ਹੁੰਦੀਆਂ ਹਨ. ਜਿਉਂ ਜਿਉਂ ਤੁਸੀਂ ਕੋਡ ਤੋਂ ਹੋਰ ਜਾਣੂ ਹੋਵੋਗੇ, ਤੁਸੀਂ ਇਸ ਤੋਂ ਹੋਰ ਸਿੱਖ ਸਕਦੇ ਹੋ ਅਤੇ ਇਹ ਤੁਹਾਡੇ ਲਈ ਮੁਸ਼ਕਲ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ.

ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਵੈਬਸਾਈਟ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਕਿਵੇਂ ਵਿਚਾਰਦੇ ਹੋ? ਇੱਥੇ ਗੂਗਲ ਕਰੋਮ ਬਰਾਉਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਜਿਹਾ ਕਰਨ ਲਈ ਕਦਮ-ਦਰ-ਕਦਮ ਨਿਰਦੇਸ਼ ਹਨ.

ਕਦਮ ਨਿਰਦੇਸ਼ ਦੁਆਰਾ ਕਦਮ

1. Google Chrome ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ (ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ Google Chrome ਸਥਾਪਿਤ ਨਹੀਂ ਹੈ, ਤਾਂ ਇਹ ਇੱਕ ਮੁਫਤ ਡਾਊਨਲੋਡ ਹੈ).
2. ਉਸ ਵੈਬ ਪੇਜ ਤੇ ਜਾਓ ਜੋ ਤੁਸੀਂ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ .
3. ਸਫ਼ੇ ' ਤੇ ਸੱਜਾ ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਮੀਨੂੰ' ਤੇ ਦੇਖੋ. ਉਸ ਮੈਨਯੂ ਵਿਚੋਂ, ਵੇਖੋ ਪੰਨਾ ਸ੍ਰੋਤ .
4. ਉਸ ਪੰਨੇ ਦਾ ਸ੍ਰੋਤ ਕੋਡ ਹੁਣ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਟੈਬ ਦੇ ਰੂਪ ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇਗਾ.
5. ਵਿਕਲਪਕ ਰੂਪ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ PC ਤੇ CTRL + U ਦੇ ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟ ਨੂੰ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਇੱਕ ਸਾਈਟ ਦੇ ਸਰੋਤ ਕੋਡ ਨਾਲ ਇੱਕ ਵਿੰਡੋ ਖੋਲ੍ਹਿਆ ਜਾ ਸਕਦਾ ਹੈ. ਮੈਕ ਉੱਤੇ, ਇਹ ਸ਼ਾਰਟਕਟ ਕਮਾਂਡ + Alt + U ਹੈ .

ਡਿਵੈਲਪਰ ਟੂਲਸ

ਸਧਾਰਨ ਦ੍ਰਿਸ਼ ਸ੍ਰੋਤ ਸਮਰੱਥਾ ਤੋਂ ਇਲਾਵਾ, ਜੋ ਕਿ ਗੂਗਲ ਕਰੋਮ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ, ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਦੇ ਸ਼ਾਨਦਾਰ ਡਿਵੈਲਪਰ ਟੂਲ ਦਾ ਫਾਇਦਾ ਉਠਾ ਸਕਦੇ ਹੋ ਤਾਂ ਜੋ ਉਹ ਕਿਸੇ ਸਾਈਟ ਤੇ ਹੋਰ ਡੂੰਘੀ ਖੋਦ ਸਕਦੇ. ਇਹ ਟੂਲ ਤੁਹਾਨੂੰ ਸਿਰਫ ਐਚਟੀਐਮਐਲ ਨਹੀਂ ਵੇਖ ਸਕਣਗੇ, ਬਲਕਿ CSS, ਜੋ ਕਿ ਐਚ ਟੀ ਐਲ ਦੇ ਤੱਤ ਵੇਖਣ ਲਈ ਲਾਗੂ ਹੁੰਦਾ ਹੈ.

ਕਰੋਮ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲਸ ਨੂੰ ਵਰਤਣ ਲਈ:

1. ਗੂਗਲ ਕਰੋਮ ਖੋਲ੍ਹੋ
2. ਉਸ ਵੈਬ ਪੇਜ ਤੇ ਜਾਓ ਜੋ ਤੁਸੀਂ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ .
3. ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਦੇ ਉੱਪਰ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਤਿੰਨ ਲਾਈਨਾਂ ਦੇ ਨਾਲ ਆਈਕਨ 'ਤੇ ਕਲਿਕ ਕਰੋ.
4. ਮੀਨੂੰ ਤੋਂ, ਹੋਰ ਟੂਲ ਉੱਤੇ ਜਾਓ ਅਤੇ ਫਿਰ ਵਿਖਾਈ ਦੇਣ ਵਾਲੇ ਮੀਨੂ ਵਿੱਚ ਵਿਕਾਸਕਾਰ ਟੂਲਸ ਨੂੰ ਕਲਿਕ ਕਰੋ
5. ਇਹ ਇੱਕ ਵਿੰਡੋ ਖੋਲ੍ਹੇਗਾ ਜੋ ਉਪਕਰਣ ਦੇ ਖੱਬੇ ਪਾਸੇ HTML ਸੋਰਸ ਕੋਡ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਸਬੰਧਤ CSS ਦਰਸਾਂਦਾ ਹੈ.
6. ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਵੈਬ ਪੇਜ ਵਿੱਚ ਇੱਕ ਐਲੀਮੈਂਟ ਤੇ ਸਹੀ ਕਲਿਕ ਕਰੋ ਅਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਮੀਨੂ ਦੀ ਜਾਂਚ ਕਰੋ , ਤਾਂ Chrome ਦੇ ਡਿਵੈਲਪਰ ਟੂਲਸ ਪੌਪ ਅਪ ਹੋ ਜਾਣਗੇ ਅਤੇ ਤੁਹਾਡੇ ਦੁਆਰਾ ਜੋ ਸਹੀ ਤੱਤ ਚੁਣਿਆ ਹੈ ਉਹ HTML ਵਿੱਚ ਹਾਈਲਾਈਟ ਕੀਤਾ ਜਾਵੇਗਾ, ਜੋ ਕਿ ਸੱਜੇ ਪਾਸੇ ਦਿਖਾਇਆ ਗਿਆ ਅਨੁਸਾਰੀ CSS ਹੈ. ਇਹ ਬਹੁਤ ਲਾਭਦਾਇਕ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣਨਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਕਿਵੇਂ ਕਿਸੇ ਸਾਈਟ ਦਾ ਇੱਕ ਖਾਸ ਟੁਕੜਾ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਸੀ.

ਸਰੋਤ ਕੋਡ ਵੇਖਣਾ ਕਾਨੂੰਨੀ ਹੈ?

ਕਈ ਸਾਲਾਂ ਤੋਂ, ਮੇਰੇ ਕੋਲ ਕਈ ਨਵੇਂ ਵੈਬ ਡਿਜ਼ਾਈਨਰਾਂ ਦਾ ਸਵਾਲ ਸੀ ਕਿ ਕੀ ਇਹ ਸਾਈਟ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਦੇਖਣ ਯੋਗ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੀ ਸਿੱਖਿਆ ਲਈ ਅਤੇ ਆਖਿਰਕਾਰ ਜੋ ਉਹ ਕਰਦੇ ਹਨ ਉਸ ਲਈ ਇਸ ਨੂੰ ਵਰਤਣਾ ਹੈ. ਸਾਈਟ ਦੀ ਕਾਪੀ ਨੂੰ ਕਾਪੀ ਕਰਦੇ ਹੋਏ ਅਤੇ ਕਿਸੇ ਸਾਈਟ 'ਤੇ ਆਪਣੇ ਆਪ ਹੀ ਇਸ ਨੂੰ ਬੰਦ ਕਰਨ ਦੀ ਪ੍ਰਵਾਨਗੀ ਨਹੀਂ ਦਿੱਤੀ ਜਾਣੀ ਚਾਹੀਦੀ, ਇਸ ਤੋਂ ਇਹ ਜਾਣਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਕਿ ਇਸ ਉਦਯੋਗ ਵਿਚ ਕਿੰਨੀ ਤਰੱਕੀ ਕੀਤੀ ਗਈ ਹੈ.

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

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