VSCode ile bir HTML dosyası oluşturma adımları


1. Öncelikle bilgisayarında html adında bir klasör oluştur, oluşturduğun tasarımları içine aşağıdaki gibi koymanı istiyorum ki işini derli toplu olsun.



2. html klasörüne sağ tıklayın ve ardından VSCode programı içindeki klasörü aşağıdaki gibi açmak için "Kodla Aç" seçeneğine tıklayın.



3. VSCode'u ilk açtığınızda bu şekilde görünecektir.
hoşgeldin sayfasını, ihtiyacımız olmadığı için programın sizin için yerleştirdiği X düğmesine tıklayarak kapatın.



4. VSCode'u her açtığınızda bu şekilde görünecektir.
HTML, programla açtığımız klasörün adıdır, ancak büyük harflerle göründüğüne dikkat edin.
Açılana kadar HTML klasör adına bir kez tıklayın ve aşağıdaki gibi çalışabilirsiniz.



5. Bir klasör oluşturmak için bir düğmenin, bir dosya oluşturmak için bir düğmenin ve bir klasörü güncellemek için bir düğmenin nasıl göründüğüne dikkat edin.



6. Dosya Oluştur düğmesini tıklayın, ardından benim yaptığım gibi index.html olarak adlandırın.
Dosya adını yazmayı bitirdikten sonra oluşturulması ve açılması için Enter butonuna tıklayınız.



7. html klasörü içinde index.html adında bir dosya oluşturulduğunu ve sizin için otomatik olarak açıldığını unutmayın.



8. Aşağıdaki kodu kopyalayın ve olduğu gibi index.html dosyasının içine ekleyin.

Not: Bu kodu bir sonraki derste size ayrıntılı olarak açıklayacağım, bu yüzden şimdi endişelenmeyin.
  • <!DOCTYPE html>
  • <html>
  •    <head>
  •         <title>web sitesi adı</title>
  •    </head>
  •     <body>
  •         <h1>kaneki kudo</h1>
  •     </body>
  • </html>


9. index.html dosyasında yapılan değişiklikleri File'ye ve ardından aşağıdaki gibi Save'e tıklayarak veya CTRL+S tuşlarına basarak kaydedin.



10. Şimdi index.html dosyasını kaydettiğiniz klasöre giderseniz, üzerinde bilgisayarınızın varsayılan tarayıcısı için bir simge olduğunu göreceksiniz, yani aşağıdaki gibi tıkladığınızda bir web sayfası olarak açılacaktır.



11. Eğer index.html dosyasına tıklarsanız içeriği bunun gibi normal bir web sayfası olarak görüntülenecektir. Sayfada hiçbir HTML kodu görünmediğini, ancak kodun içine yerleştirilen düz metnin düzenli bir şekilde göründüğünü dikkat edin.


Not: Kodu bilgisayarda denediğinizde, HTML dosyasında her değişiklik yaptığınızda, dosyayı ctrl+S ile güncellemelisiniz ve dosyanın son güncellemesinin sonucunu görmek için tarayıcıda açık sayfayı bir kez yenilemelisiniz.