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. Profesyonel bir yazılım geliştiricisi olarak, özellikle PHP tabanlı web projeleri geliştirme konusunda uzmanlaşmış durumdayım. Yazılım dünyasındaki yolculuğuma, yaratıcı çözümler üreterek ve kullanıcı odaklı projeler geliştirerek devam ediyorum.Blog sitemde yazılım ve teknolojiye dair güncel bilgileri, yenilikleri ve ipuçlarını paylaşıyorum. Amacım, yazılım dünyasına ilgi duyan herkese faydalı içerikler sunarak bilgi birikimimi paylaşmak ve sektörel gelişmelere ışık tutmak.PHP’nin yanı sıra, React, Bootstrap, Tailwind, Jquery gibi modern araçları kullanarak dinamik, kullanıcı dostu ve performanslı web siteleri geliştirme üzerine çalışıyorum. Ayrıca, öğretmenlere ve öğrencilere yönelik inovatif projeler geliştirme konusundaki tutkum sayesinde, eğitim ve yazılımı birleştiren projeler üretmeyi hedefliyorum.Eğer siz de yazılım ve teknoloji konularına ilgi duyuyorsanız, bloğumda sizin için ilham kaynağı olabilecek içerikler bulabilirsiniz.