Site Kaynak Kodlarını Görme, Site Kodları Ne İşe Yarar?

Site Kaynak Kodlarını Görme, Site Kodları Ne İşe Yarar? Webmaster olarak her zaman ilgilendiğimiz bir web sitesinin kaynak kodlarına merak edip bakmışızdır. Sitenin nasıl yapılandırıldığını, hangi HTML kodlarının kullanıldığını ve nasıl programlandığını görmek isteriz. Bunun için de sitenin sayfa kaynağına yani HTML kodlarına bakmamız gerekir. Peki sitenin kaynak kodlarını görmek için ne yapılmalı?

Bunu üç farklı tarayıcı içinde açıklayacağım: Google Chrome, Internet Explorer ve Firefox.

Google Chrome’da Site Kodlarını Görme Kaynak Kodlarını Görme

Sayfa içinde herhangi bir boş alanda fare sağ tuşuna tıklayıp açılan menüden “Sayfa kaynağını görüntüle” seçeneğine tıklayın.

Sitenizin kaynak kodunu görüntülemek için üç yol vardır.

1.  Url’ninizin başına view-source: ekleyerek kaynak kodlarınızı görüntüleyebilirsiniz.

Örneğin; domain.com‘un kaynak kodunu görüntülemek için tarayıcıya view-source:https://domain.com/ ya da view-source:http://domain.com/ yazarak girebilirsiniz.

2.  Kaynak kodlarını görmek istediğiniz sayfanın herhangi bir yerine  sağ tıkladığınızda, Internet Explorer için Kaynağı Görüntüle ,Chrome için Sayfa Kaynağını Görüntüle , Firefox için Sayfa Kaynağını Göster ‘e tıkladığınızda kaynak kodlarınızı görüntüleyebilirsiniz.

3-  Chrome, Firefox ve Opera için kısayol olarak ctrl+U ‘ya basarak kaynak kodunu görüntüleyebilirsiniz.

Firefox ‘da Sayfa Kaynak Kodunu Görme

1. Yol: Sayfa içinde herhangi bir boş alanda fare sağ tuşuna tıklayıp açılan menüden “Sayfa kaynağını göster” seçeneğine tıklayın.

2. Yol: Tarayıcı menü araç çubuğundaki “Araçlar” menüsünden “Web geliştirici” seçeneği altındaki “Sayfa kaynağı” seçeneğine tıklayın.

3. Yol: Ctrl + U tuş bileşimini kullanın.

Başlıca Kaynaklar : Kodlar Ne İşe Yarar

1- W3 Schools — HTML -CSS yazmaya başlarken yararlanacağımız en önemli kaynak sitesi. — Deniz derya gibi, ne ararsan var.

2- Açık Akademi — Microsoft destekli, Bora Kaşmer ve Engin Polat’ın anlattığı video dersler mevcut. İlk yararlandığım kaynaklardan biridir.

3- Geleceği Yazanlar — Turkcell’in destek verdiği bir site. Dersler yazılı olarak verilmiş olduğundan ben pek ısınamamıştım ilk dönemler. Ayrıca her kursun sonunda bir sınava tabi tutuluyorsun.

4- Fatih Hayrioğlu’nun not defteri — HTML-CSS konusunda bir şeyi gugıllayıp Fatih hocanın bloguna denk gelmemek pek mümkün değildir.

5- Tayfun Erbilen — Youtube Kanalı ve Bloguüzerinden güzel dersler yayınlıyor. Ayrıca Prototürk diye de bir yazılım ve tasarım derslerinin yayınlandığı projesi var. Prototürk Youtube kanalı.

6-Sadi Evren Şeker — Sadi hocanın Bilgisayar Kavramları adlı Youtube kanalında HTML’den Yapay zeka’ya kadar yazılım alanında onlarca videosu var.

7-Tympanus — Bu kaynak Türkçe değil ama burada sık sık kaynak kodları ile demolar yayınlanıyor. Onları indirip nasıl yazıldığına bakarak bir şeyler kapabilirsiniz. Ayrıca CSS Reference kısmı çok iyi ben sık sık burayı kullanıyorum.

8- Codepen — HTML-CSS ile yazılmış onlarca örnek uygulamayı kod çıktısıyla beraber görebildiğiniz muazzam bir site.

9- Github — Yazılımcının sosyal medyası denebilir mi bilmiyorum ama yazdığınız kodu açık kaynak hale getirebildiğiniz ve diğer yazılımcılar ile takipleşip neler yaptığını, beğendiğini görebildiğiniz bir site.

10- Animista — Kullanıma hazır CSS animasyonlarına ulaşabileceğiniz bir arşiv.

KODLAR:

11- Animate — Animate.css içinde birçok animasyonun bulunduğu bir CSS3 kütüphanesidir.

12- Google Fonts — HTML-CSS ile yazdığınız projelerinize fontlar ekleyebileceğiniz çok güzel açık kaynaklı ücretsiz bir Google ürünü

13- Grabient — Benim gibi CSS’de Gradient oluşturma konusunda zorlananlar için muazzam bir kaynak. CSS’de kullanırken Prefixes seçeneğini tıklamayı unutmayın 🙂

14- Web Geliştiricisi Olmanın Temelleri —Doğukan Güven Nomak’ın Udemy’de yayınladığı HTML, CSS ve Flexible Grid System’i anlattığı çok güzel bir eğitim seti.

15- Frontend-TR — Kod yazarken takıldığınız yerleri sorabileceğiniz çok güzel bir topluluk. Buraya henüz bir defa işim düştü ancak epey yardımcı olmaya çalışan insan gördüm.

16- Font Awesome — Font Awesome web sayfası kodlarken en yaygın kullanılan ikonları font olarak bize sunan bir CSS kütüphanesidir.

17- Google — Son olarak kaynakların kaynağı Hz. Google. Takıldığınız her konuyu sürekli arayın muhakkaki bir şeyler bulacaksınız.

Site Kaynak Kodlarını Görme, Site Kodları Ne İşe Yarar, Site Kodları, Başlıca Kaynaklar, Açık Kaynak Kodları, Kodlar Ne İşe Yarar, Site Kaynakları