1. Visual Studio Code Nedir?

Visual Studio Code (VS Code), Windows, macOS ve Linux’ta çalışabilen, yazılım geliştiriciler için tasarlanmış güçlü bir metin editörüdür. İçine eklentiler (extension) kurarak HTML, CSS, JavaScript ve Python gibi dillerle çok rahat çalışabiliriz.

2. VS Code Nasıl İndirilir ve Kurulur?

Tarayıcında code.visualstudio.com adresine giderek işletim sistemine uygun sürümü indirebilirsin. Kurulum sırasında klasik “ileri, ileri, bitir” adımlarını takip etmen yeterli.

Visual Studio Code indirme sayfası örnek görünümü.

💡 Öneri: Masaüstüne kısayol ekleme ve “VS Code ile aç” seçeneğini işaretlersen dosyalara sağ tıklayıp hızlıca editörde açabilirsin.

3. Çalışma Klasörü Oluşturma

Kodlarımızı rastgele yerlere kaydetmek yerine, proje için bir klasör belirlemek işimizi çok kolaylaştırır. Örneğin:

• Masaüstünde yesil-bilisim adında bir klasör aç.
• VS Code’u çalıştır.
• Açılan ekrandan “Open Folder” butonuna tıkla.
• Az önce oluşturduğun yesil-bilisim klasörünü seç.

VS Code içinde proje klasörünü seçme adımı.

VS Code’un sol tarafında klasör yapısını görüyorsan, artık bu klasör senin “proje klasörün” demektir. Bundan sonra ekleyeceğin her dosya onun içinde tutulacak.

4. İlk HTML Dosyasını Oluşturma

Şimdi proje klasörünün içinde ilk HTML dosyamızı ekleyelim:

1. Sol taraftaki panelde New File ikonuna tıkla.
2. Dosya adına index.html yazıp ENTER’a bas.
3. Dosya uzantısının mutlaka .html olduğundan emin ol. Aksi halde VS Code HTML etiketlerini tanımaz.

Yeni dosya oluştururken index.html adını vermeyi unutma.

Eğer sağ altta “HTML” yazıyorsa editörümüz dosyayı HTML olarak algılamış demektir. “Plain Text” yazıyorsa uzantıda bir sorun vardır.

5. Basit Bir HTML Başlığı Yazalım

index.html dosyanda aşağıdaki satırı yaz:

<h1>Kodluyoruz</h1>

Buradaki <h1> etiketi “en büyük başlığı” temsil eder. Etiketin açılış (<h1>) ve kapanış (</h1>) kısmı arasına istediğin metni yazabilirsin.

6. Dosyayı Kaydetmek ve Tarayıcıda Açmak

Yazdıklarını görebilmek için dosyanı kaydetmen gerekir:

• Menüden File > Save seç veya
• Ctrl + S kısayolunu kullan.

Ardından Run sekmesinden Run Without Debugging sekmesine tıkla.

Ve açılan Chrome Sayfası

Tarayıcıda ilk HTML başlığının göründüğü an 🎉

Sayfada kocaman bir başlık görüyorsan, ilk HTML çıktını başarıyla almışsın demektir. 🎉

7. Mini Görev – Kendi Başlığını Yaz

Şimdi küçük bir görevle öğrendiklerini pekiştir:

1. <h1> etiketi içindeki metni değiştir ve kendi adını içeren bir başlık yaz.
2. Başlığın altına bir de <p> ... </p> etiketi ile kısa bir açıklama ekle.
3. Dosyayı kaydedip tarayıcıyı yenile (F5). Yaptığın değişikliği canlı olarak gör.

Yaptıysan bana söyleyip puan almayı unutma :)

Kaynaklar

• VS Code resmi sitesi – code.visualstudio.com
• Yeşil Bilişim: HTML Temelleri notların