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.
![VScode ile bir HTML dosyası oluşturma adımları](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları.png)
2. html klasörüne sağ tıkla ve ardından VSCode programı içindeki klasörü aşağıdaki gibi açmak için "Kodla Aç" seçeneğine tıkla.
![VScode ile bir HTML dosyası oluşturma adımları 2](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları-2.png)
3. VSCode'u ilk açtığında bu şekilde görünecektir.
hoşgeldin sayfasını, ihtiyacımız olmadığı için programın senin için yerleştirdiği X düğmesine tıklayarak kapat.
![VScode ile bir HTML dosyası oluşturma adımları 3](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları-3.png)
4. VSCode'u her açtığında 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ıkla ve aşağıdaki gibi çalışabilirsin.
![VScode ile bir HTML dosyası oluşturma adımları 4](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları-4.png)
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 et.
![VScode ile bir HTML dosyası oluşturma adımları 5](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları-5.png)
6. Dosya Oluştur düğmesini tıkla, ardından benim yaptığım gibi index.html olarak adlandır.
Dosya adını yazmayı bitirdikten sonra oluşturulması ve açılması için Enter butonuna tıkla.
![VScode ile bir HTML dosyası oluşturma adımları 6](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları-6.png)
7. html klasörü içinde index.html adında bir dosya oluşturulduğunu ve senin için otomatik olarak açıldığını unutma.
![VScode ile bir HTML dosyası oluşturma adımları 7](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları-7.png)
8. Aşağıdaki kodu kopyala ve olduğu gibi index.html dosyasının içine ekle.
Not: Bu kodu bir sonraki derste seni ayrıntılı olarak açıklayacağım, bu yüzden şimdi endişelenme.
- <!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 kaydet.
![VScode ile bir HTML dosyası oluşturma adımları 8](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları-8.png)
10. Şimdi index.html dosyasını kaydettiğin klasöre gidersen, üzerinde bilgisayarını varsayılan tarayıcısı için bir simge olduğunu göreceksin, yani aşağıdaki gibi tıkladığında bir web sayfası olarak açılacaktır.
![VScode ile bir HTML dosyası oluşturma adımları 9](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları-9.png)
11. Eğer index.html dosyasına tıklarsan 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.
![VScode ile bir HTML dosyası oluşturma adımları 10](https://src.k-html.com/VSCode-ile-bir-HTML-dosyası-oluşturma-adımları-10.png)
Not: Kodu bilgisayarda denediğinde, HTML dosyasında her değişiklik yaptığında, dosyayı ctrl+S ile güncellemelisin ve dosyanın son güncellemesinin sonucunu görmek için tarayıcıda açık sayfayı bir kez yenilemelisin.