VS Code yerine başka bir editör kullanabilir miyim?

Evet, kullanabilirsin! Sublime Text, Atom veya WebStorm gibi farklı editörler de mevcut. Ancak, VS Code’un sunduğu geniş eklenti desteği ve hız avantajı nedeniyle özellikle yeni başlayanlar için en iyi seçeneklerden biridir.

İlk HTML dosyamı oluştururken neden index.html ismini kullanmalıyım?

index.html, web sunucularının varsayılan olarak ilk açtığı dosyadır. Web sitenizin ana sayfası olarak kabul edilir.

Visual Studio Code Ile İlk HTML Sayfamı Oluşturma

İçindekiler

Merhaba! Bu yazımda Visual Studio Code ile html sayfası oluşturmayı öğreneceğiz. HTML, web sitelerinin temel yapı taşıdır ve öğrenmesi oldukça kolaydır. Ancak, işin içine girince neyi, nasıl yapacağın konusunda kafan biraz karışabilir. Merak etme! Bu rehberde sana Visual Studio Code (VS Code) kullanarak nasıl ilk HTML sayfanı oluşturacağını adım adım anlatacağım. Üstelik yalnızca HTML değil, sayfanı nasıl daha güzel hale getirebileceğini de öğreneceksin. Hazırsan başlayalım!

Visual Studio Code Nedir?

Visual Studio Code (VS Code), Microsoft tarafından geliştirilen, web geliştirme ve yazılım projeleri için kullanılan popüler bir kod editörüdür. Hafif, hızlı ve geniş eklenti desteğine sahip olması nedeniyle dünya çapında birçok geliştirici tarafından tercih edilir. HTML, CSS ve JavaScript gibi web teknolojilerini rahatça kullanabileceğin bu editörle, kod yazmak ve düzenlemek oldukça kolay hale gelir.

Visual Studio Code Kurulumu

VS Code’u kurmak için aşağıdaki adımları takip edebilirsin:

Adım 1: VS Code’u İndirme

VS Code’un resmi web sitesine git.
İşletim sistemine uygun olan sürümü seç:
- Windows kullanıyorsan “Windows x64” sürümünü indir.
- MacOS kullanıyorsan “Mac Universal” sürümünü indir.
- Linux kullanıyorsan “deb” veya “rpm” paketlerinden uygun olanı seç.
İndirme tamamlandıktan sonra, dosyayı çalıştır.

Adım 2: VS Code’u Kurma

Windows İçin:

İndirilen .exe dosyasını çift tıkla.
Açılan kurulum sihirbazında “I accept the agreement” seçeneğini işaretle ve “Next” butonuna bas.
“Install” butonuna tıklayarak kurulumu başlat.
Kurulum tamamlandığında “Finish” butonuna tıkla ve VS Code’u aç.

MacOS İçin:

İndirilen .zip dosyasını aç.
“Visual Studio Code.app” dosyasını “Applications” klasörüne sürükle.
Uygulamalar klasöründen VS Code’u aç.

Adım 3: Gerekli Eklentileri Kurma

Kurulum tamamlandıktan sonra, web geliştirme için önemli olan bazı eklentileri yükleyelim:

VS Code’u aç ve sol taraftaki “Extensions” (Eklentiler) simgesine tıkla.
Arama çubuğuna şu eklentileri yaz ve “Install” butonuna bas:
- Live Server (HTML sayfanı anlık olarak tarayıcıda görmeni sağlar.)
- HTML CSS Support (HTML ve CSS için otomatik tamamlama özellikleri ekler.)
- Prettier – Code Formatter (Kodlarını düzenli ve okunaklı hale getirir.)

Bunları yükledikten sonra, artık ilk HTML dosyanı oluşturmaya hazırsın!

İlk HTML Sayfanı Oluşturma

Adım 1: Çalışma Klasörünü Belirleme

Öncelikle, projeni düzenli tutmak için bir klasör oluşturmalısın. Örneğin, masaüstünde ilk-web-sayfam adında bir klasör aç.

VS Code’u aç.
“File” menüsünden “Open Folder” seçeneğini tıkla.
Az önce oluşturduğun ilk-web-sayfam klasörünü seç.

Adım 2: Yeni HTML Dosyası Oluşturma

Şimdi bu klasörün içine bir HTML dosyası ekleyelim:

“Explorer” panelinde (sol tarafta) “New File” butonuna tıkla.
Dosya adını index.html olarak belirle ve Enter tuşuna bas.

Adım 3: HTML Temel Yapısını Oluşturma

Şimdi, index.html dosyana aşağıdaki temel HTML kodlarını ekleyelim:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk Web Sayfam</title>
</head>
<body>
    <h1>Merhaba, Dünya! 👋</h1>
    <p>Bu benim ilk HTML sayfam! Burada çeşitli deneyler yaparak web geliştirme dünyasına adım atıyorum.</p>
</body>
</html>

Bu kodlar HTML sayfanın temel iskeletini oluşturur. Şimdi bu sayfayı tarayıcıda nasıl açabileceğine bakalım.

HTML Sayfanı Tarayıcıda Açma

HTML sayfanı tarayıcıda görüntülemek için iki yol var:

Klasörden açma: index.html dosyanı bul, çift tıkla ve tarayıcında aç.
VS Code Live Server kullanma:
- index.html dosyan açıkken sağ alttaki “Go Live” butonuna tıkla.
- Tarayıcında sayfan otomatik olarak açılacaktır. 🎉

HTML Sayfanı Güzelleştirme: CSS Ekleyelim!

HTML sayfan şu anda çok sade. Biraz stil katmaya ne dersin? Aşağıdaki CSS kodlarını index.html dosyanın <head> etiketi içine ekle:

<style>
    body {
        background-color: #f4f4f4;
        font-family: Arial, sans-serif;
        text-align: center;
        padding: 20px;
    }
    h1 {
        color: #333;
    }
    p {
        font-size: 18px;
        color: #666;
    }
</style>

Bu sayede: Arka plan rengin gri olacak. Yazılar daha hoş görünecek. Sayfanın genel düzeni göze daha hoş gelecek.

Bu yazıda, Visual Studio Code kullanarak ilk HTML sayfanı nasıl oluşturacağını adım adım anlattım. Neler öğrendik? VS Code’u nasıl kuracağımızı ve eklentileri. Çalışma klasörü oluşturmayı ve HTML dosyası eklemeyi. HTML’in temel yapısını oluşturmayı. Sayfamızı tarayıcıda açmayı. CSS ile sayfamızı güzelleştirmeyi öğrendik. Eğer takıldığın bir yer olursa, yorumlarda sormaktan çekinme!

VS Code yerine başka bir editör kullanabilir miyim?

Evet, kullanabilirsin! Sublime Text, Atom veya WebStorm gibi farklı editörler de mevcut. Ancak, VS Code’un sunduğu geniş eklenti desteği ve hız avantajı nedeniyle özellikle yeni başlayanlar için en iyi seçeneklerden biridir.
İlk HTML dosyamı oluştururken neden index.html ismini kullanmalıyım?

index.html, web sunucularının varsayılan olarak ilk açtığı dosyadır. Web sitenizin ana sayfası olarak kabul edilir.

Etiketler: HTML Sayfası Visual Studio Code

Paylaş:

Tayyip Bölük

Merhaba! Ben Tayyip Bölük, yazılım geliştirme alanında uzmanlaşmış bir geliştiriciyim. Teknoloji ve yazılım dünyasına olan ilgim, beni bu blogu oluşturmaya yönlendirdi. Amacım, yazılım geliştirme sürecindeki deneyimlerimi, öğrendiklerimi ve sektördeki yenilikleri okuyucularımla paylaşmak. Yazılım geliştirme sürecindeki yenilikçi yaklaşımlar, uygulama geliştirme ipuçları ve teknoloji trendleri üzerine içerikler üretiyorum. Blogumda ayrıca kendi projelerimden ve sektördeki ilham verici hikayelerden de bahsediyorum. Bu blog, hem yazılım meraklıları hem de sektöre adım atmak isteyenler için bir bilgi ve ilham kaynağı olmayı hedefliyor.