önceki ders
sonraki ders

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

1.Öncelikle, oluşturduğunuz tasarımları içine aşağıdaki gibi yerleştirmek için bilgisayarınızda html adlı bir klasör oluşturmanızı istiyoruz, böylece çalışmalarınız düzenli olsun.


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


VSCode, ilk açışınızda bu şekilde görünecektir.3

4.Programın sizin için yerleştirdiği X düğmesine tıklayarak karşılama sayfasını kapatın çünkü ihtiyacımız yok.


Her açtığınızda VSCode bu şekilde görünecektir.5

HTML, programla açtığımız klasörün adıdır, ancak büyük harflerle göründüğüne dikkat edin.6

Açmak için HTML klasör adına bir kez tıklayın ve aşağıdaki gibi çalışabilirsiniz.7


8.Bir klasör oluşturmak için bir düğme, bir dosya oluşturmak için bir düğme ve klasörü güncellemek için bir düğme gördüğünüze dikkat edin.


9.Dosya Oluştur düğmesini tıklayın, ardından yaptığımız gibi test.html olarak adlandırın.

Dosya adını yazmayı bitirdikten sonra, oluşturmak ve açmak için Enter düğmesine tıklayın.10


11.Html klasörünün içinde test.html adlı bir dosyanın oluşturulduğunu ve sizin için otomatik olarak açıldığını unutmayın.


Aşağıdaki kodu kopyalayın ve olduğu gibi test.html dosyasının içine yerleştirin.12

Not: Bu kodu size bir sonraki derste ayrıntılı olarak açıklayacağız, şimdi endişelenmeyin.

<!DOCTYPE html> <html> <head> <title>Web sitesi adı </title> </head> <body> <h1>kaneki kudo</h1>
</body> </html>

Test.html dosyasında yapılan değişiklikleri Dosya seçeneğine ve ardından aşağıdaki gibi kaydet seçeneğine tıklayarak kaydedin.

14.Şimdi test.html dosyasını kaydettiğiniz klasöre giderseniz, bilgisayarınız için varsayılan tarayıcı simgesine sahip olduğunu göreceksiniz, yani aşağıdaki gibi tıkladığınızda web sayfası olarak açılacaktır.

15.Test.html dosyasına tıklarsanız, içeriği aşağıdaki gibi normal bir web sayfası olarak görüntülenecektir.
Sayfada HTML kodunun görünmediğini, bunun yerine kodun içine yerleştirilmiş düz metnin düzenli bir şekilde göründüğünü unutmayın.

not
Bir bilgisayarda kodu test ederken, HTML dosyasında her değişiklik yaptığınızda, dosyanın son güncellemesinin sonucunu görene kadar tarayıcıda açılan sayfayı bir kez güncellemeniz gerekir.



önceki ders
sonraki ders