Bir web sitesinin kaynak kodunu görüntüleyerek nasıl yapıldığını öğrenin
Kariyerine bir web tasarımcısı olarak başladığımda, hayran kaldığım diğer web tasarımcılarının çalışmalarını inceleyerek çok şey öğrendim. Bu konuda yalnız değilim. Web endüstrisinde veya deneyimli bir emektarda yeni olsanız da, farklı web sayfalarının HTML kaynağını görüntülemek, kariyeriniz boyunca birçok kez yapmanız muhtemeldir.
Web tasarımında yeni olanlar için, bir sitenin kaynak kodunu görüntülemek, belirli şeylerin nasıl yapıldığını görmenin en kolay yollarından biridir, böylece bu işten öğrenebilir ve kendi çalışmanızda belirli kod veya teknikleri kullanmaya başlayabilirsiniz. Günümüzde çalışan herhangi bir web tasarımcısı olarak, özellikle de endüstrinin ilk günlerinden beri devam edenler, ve bildiğimiz güvenli bir bahis, sadece gördükleri ve ilgi uyandırdıkları web sayfalarının kaynağını görüntüleyerek HTML'yi öğrendiklerini söylüyor. tarafından. Web tasarım kitaplarını okumak veya profesyonel konferanslara katılmanın yanı sıra, bir sitenin kaynak kodunu görüntülemek yeni başlayanların HTML'yi öğrenmesi için harika bir yoldur.
Sadece HTML'den Fazlası
Hatırlanması gereken bir nokta, kaynak dosyalarının çok karmaşık olabileceğidir (ve görüntülediğiniz web sitesinin ne kadar karmaşık olduğu, sitenin kodunun ne kadar karmaşık olacağı). Görüntülediğiniz sayfayı oluşturan HTML yapısına ek olarak, o sitenin görsel görünümünü dikte eden CSS (basamaklı stil sayfaları) da olacaktır. Ayrıca, bugün birçok web sitesi HTML ile birlikte verilen komut dosyalarını içerecektir.
Aslında, her biri sitenin farklı yönlerine güç veren birden fazla komut dosyası içermesi olasıdır. Açıkçası, bir sitenin kaynak kodu, özellikle bunu yapmakta yeniyseniz, ezici görünebilir. Hemen o siteyle neler olup bittiğini anlayamazsan, sinirlenmeyin. HTML kaynağını görüntülemek bu işlemdeki ilk adımdır. Küçük bir deneyimle, tüm bu parçaların tarayıcınızda gördüğünüz web sitesini oluşturmak için nasıl birbirine uyduğunu daha iyi anlamaya başlayacaksınız. Kodu daha yakından tanıdıkça, bundan daha fazlasını öğrenebileceksiniz ve size göz korkutucu gelmeyecektir.
Peki bir web sitesinin kaynak kodunu nasıl görüyorsunuz? Google Chrome tarayıcısını kullanarak bunu yapmak için adım adım talimatlar.
Adım adım talimatlar
- Google Chrome web tarayıcısını açın (Google Chrome yüklü değilse, bu ücretsiz bir uygulamadır).
- İncelemek istediğiniz web sayfasına gidin.
- Sayfayı sağ tıklayın ve görüntülenen menüye bakın. Bu menüden Sayfa kaynağını görüntüle'yi tıklayın.
- Bu sayfanın kaynak kodu artık tarayıcıda yeni bir sekme olarak görünecek.
- Alternatif olarak, bir sitenin kaynak kodu görüntülenen bir pencereyi açmak için bir PC'de CTRL + U klavye kısayollarını da kullanabilirsiniz. Mac’te bu kısayol Command + Alt + U’dur .
Geliştirici Araçları
Google Chrome'un sunduğu Basit Görüntüleme sayfası kaynak yeteneğine ek olarak, bir siteye daha da derinlemesine incelemek için mükemmel Geliştirici Araçlarından da yararlanabilirsiniz. Bu araçlar, yalnızca HTML'yi değil, aynı zamanda bu HTML belgesindeki öğeleri görüntülemek için geçerli olan CSS'yi görmenize de olanak tanır.
Chrome'un geliştirici araçlarını kullanmak için:
- Google Chrome'u açın.
- İncelemek istediğiniz web sayfasına gidin.
- Tarayıcı penceresinin sağ üst köşesinde üç satırlı simgeyi tıklayın.
- Menüden Diğer araçlar'ın üzerine gelin ve ardından görüntülenen menüde Geliştirici araçları'nı tıklayın.
- Bu, pencerenin solundaki HTML kaynak kodunu ve sağdaki ilgili CSS'yi gösteren bir pencere açar.
- Alternatif olarak, bir web sayfasındaki bir öğeyi sağ tıklar ve görünen menüden İncelen'i seçerseniz, Chrome'un geliştirici araçları açılır ve seçtiğiniz tam öğe HTML'de sağda gösterilen ilgili CSS ile vurgulanır. Bir sitenin belirli bir parçasının nasıl oluşturulduğu hakkında daha fazla bilgi edinmek istiyorsanız, bu çok yararlıdır.
Kaynak Kodunu Görüntüleme Yasal mı?
Yıllar geçtikçe, birçok yeni web tasarımcıları bir sitenin kaynak kodunu görüntüleyip kabul etmediklerini ve eğitim için kullanıp kullanamadıklarını ve işlerini yaptıklarını sorguladı. Bir sitenin kodunu toptan olarak kopyalamak ve bir sitenin kendi sitenizde yayınlamak kesinlikle kabul edilemezken, bu kodu öğrenmek için bir sıçrama tahtası olarak kullanmak, aslında bu sektörde ne kadar ilerleme kaydedildiğini gösteriyor.
Bu makalenin başında bahsettiğim gibi, bir sitenin kaynağını görüntüleyerek bir şey öğrenemeyen, bugün çalışan bir web profesyonelini bulmak zor olurdu! Evet, bir sitenin kaynak kodunu görüntülemek yasaldır. Benzer bir şey oluşturmak için bu kodu bir kaynak olarak kullanmak da iyidir. Kodları olduğu gibi almak ve işinizle karşılaşmak, problemlerle karşılaşmaya başladığınız yerdir.
Sonunda, web profesyonelleri birbirlerinden öğrenirler ve sıklıkla gördükleri ve esinlendikleri eserler üzerinde gelişirler, bu yüzden bir sitenin kaynak kodunu görüntülemekten ve bir öğrenme aracı olarak kullanmaktan çekinmeyin.