İster web endüstrisinde yeni olun, ister deneyimli bir deneyimli olun, farklı web sayfalarının HTML kaynağını görüntülemek, kariyeriniz boyunca birçok kez yapmanız gereken bir şeydir. Çoğu tarayıcı, kaynağı kolayca görüntülemenize izin verir; Chrome farklı değil.
Bir sitenin kaynak kodunu görüntülemek, o çalışmadan öğrenmenin ve çalışmanızda belirli kod veya teknikleri kullanmaya başlamanın en kolay yollarından biridir. Web tasarım kitaplarını okumaya veya profesyonel konferanslara katılmaya ek olarak, bir sitenin kaynak kodunu görüntülemek, yeni başlayanlar için HTML öğrenmenin mükemmel bir yoludur.
Kaynak Kodunu Chrome'da Görüntüle
Peki bir web sitesinin kaynak kodunu nasıl görüyorsunuz? İşte Google Chrome tarayıcısını kullanarak bunu yapmak için adım adım talimatlar.
-
Açın Google Chrome web tarayıcısı (Google Chrome yüklü değilse, bu ücretsiz bir indirme işlemidir).
-
gidin incelemek istediğiniz web sayfası.
-
Sağ tıklatın sayfa ve beliren menüye bakın. Bu menüden tıklayın Sayfa kaynağını görüntüle.
:max_bytes(150000):strip_icc()/001_view-html-source-in-chrome-3466725-5bef1c63c9e77c0026d66e38.jpg)
-
Bu sayfanın kaynak kodu artık tarayıcıda yeni bir sekme olarak görünecektir.
-
Alternatif olarak, klavye kısayollarını da kullanabilirsiniz. CTRL + U bir sitenin kaynak kodunun görüntülendiği bir pencere açmak için PC'de. Mac'te bu kısayol Command + Option + U.
Chrome'un Geliştirici Araçlarını kullanın
Google Chrome'un sunduğu basit View page source özelliğine ek olarak, bir sitede daha da derinlere inmek için mükemmel Geliştirici Araçlarından da yararlanabilirsiniz. Bu araçlar yalnızca HTML'yi değil, aynı zamanda o HTML belgesindeki öğeleri görüntülemek için geçerli olan CSS'yi de görmenize olanak tanır.
Chrome'un geliştirici araçlarını kullanmak için:
-
Açılış Google Chrome.
-
Şu yöne rotayı ayarla incelemek istediğiniz web sayfası.
-
seçmek üç noktalı menü tarayıcı penceresinin sağ üst köşesinde.
-
Menüden fareyle üzerine gelin Diğer araçlar ve sonra seç Geliştirici araçları beliren menüde.
:max_bytes(150000):strip_icc()/002_view-html-source-in-chrome-3466725-5bef1cdd46e0fb0026a96f2f.jpg)
-
Bölmenin solunda HTML kaynak kodunu ve sağda ilgili CSS'yi gösteren bir pencere açılacaktır.
-
Alternatif olarak, sağ tıklarsanız web sayfasındaki bir öğe seçin Denetlemek görünen menüden Chrome'un geliştirici araçları açılır ve sağda gösterilen ilgili CSS ile HTML'de seçtiğiniz belirli bölümü vurgular. Bir sitenin belirli bir parçası hakkında daha fazla bilgi edinmek istiyorsanız çok faydalıdır.
Kaynak Kodunu Görüntülemek Yasal mı?
Yıllar geçtikçe, birçok yeni web tasarımcısı, bir sitenin kaynak kodunu görüntülemenin ve bunu eğitimleri için ve nihayetinde yaptıkları işler için kullanmanın kabul edilebilir olup olmadığını sorguladı. Bir sitenin kodunu toptan kopyalamak ve bir web sitesinde kendinize aitmiş gibi dağıtmak kesinlikle kabul edilemez, ancak bu kodu öğrenmek için bir sıçrama tahtası olarak kullanmak aslında bu sektörde ne kadar ilerleme kaydedildiğidir.
Bu makalenin başında da bahsettiğimiz gibi, bugün bir sitenin kaynağını görüntüleyerek bir şey öğrenmemiş çalışan bir web profesyoneli bulmakta zorlanacaksınız! Evet, bir sitenin kaynak kodunu görmek yasaldır. Benzer bir şey oluşturmak için bu kodu bir kaynak olarak kullanmak da güvenlidir. Kodu olduğu gibi almak ve işiniz olarak iletmek, sorunlarla karşılaşmaya başladığınız yerdir.
Sonunda, web uzmanları birbirlerinden öğrenirler ve gördükleri ve esinlendikleri çalışmaları genellikle geliştirirler, bu nedenle bir sitenin kaynak kodunu görmekten ve onu bir öğrenme aracı olarak kullanmaktan çekinmeyin.
HTML'den Daha Fazlası
Unutulmaması gereken bir şey, kaynak dosyaların çok karmaşık olabileceğidir (ve görüntülediğiniz web sitesi ne kadar karmaşıksa, sitenin kodunun da o kadar karmaşık olması muhtemeldir). Sayfayı oluşturan HTML yapısına ek olarak, o sitenin görsel görünümünü belirleyen CSS (basamaklı stil sayfaları) da olacaktır. Ek olarak, bugün birçok web sitesi HTML ile birlikte içerilen komut dosyalarını içerecektir.
Muhtemelen birden fazla komut dosyası bulunacaktır; aslında, her biri sitenin farklı yönlerine güç veriyor. Açıkçası, bir sitenin kaynak kodu ezici görünebilir, özellikle de bunu yapmakta yeniyseniz. Bu sitede neler olup bittiğini hemen anlayamazsanız sinirlenmeyin. HTML kaynağını görüntülemek, bu sürecin sadece ilk adımıdır. Küçük bir deneyimle, tarayıcınızda gördüğünüz web sitesini oluşturmak için tüm bu parçaların nasıl bir araya geldiğini daha iyi anlamaya başlayacaksınız. Kodu daha iyi tanıdıkça, ondan daha fazla şey öğrenebileceksiniz ve bu size o kadar da göz korkutucu gelmeyecektir.