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ı?

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ı

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 va r.

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üphanesidi r.

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ı