Çalışma Ortamını Kurmak

Ders 3/45 · 4 dakika · 2 soru

Bu dersin sonunda bilgisayarınızda kendi HTML dosyanızı oluşturup tarayıcıda açabileceksiniz.

Neye ihtiyacınız var?

Yeni sürüm bir tarayıcı.
Bir kod düzenleyici. Biz ücretsiz olan Visual Studio Code (kısaca VS Code) kullanacağız. code.visualstudio.com adresinden indirebilirsiniz.

HTML dosyaları düz metindir. Word gibi programlar yazının yanına biçim bilgisi de kaydettiği için HTML yazmaya uygun değildir.

İlk dosyanızı oluşturun

Masaüstünde (veya dilediğiniz herhangi bir yerde) ilk-sitem adında bir klasör açın.
VS Code’u açın. File > Open Folder ile bu klasörü seçin.
Sol taraftaki New File düğmesine basın ve dosyaya index.html adını verin.
Dosyanın içine aşağıdaki satırı yazın ve Ctrl + S ile kaydedin.

<!--HTML'in normalde alması gereken diğer etiketleri kolaylık açısından
şimdilik ihmal ediyoruz.-->
<h1>Bu benim ilk sayfam!</h1>

Klasöre gidip index.html dosyasına çift tıklayın. Dosya tarayıcıda açılacak.

Yaz, kaydet, yenile.

HTML yazarken aşağıdaki yolu izlersiniz

VS Code’da kodu değiştirin.
Ctrl + S ile kaydedin.
Tarayıcıya geri dönerek F5 ile sayfayı yenileyin.

Kendi cihazınızda açtığınız HTML dosyasına yukarıdaki kodu yazın, ardından “ilk” yazısını “son” yaparak kaydedin.

İsteğe bağlı: Live Server eklentisi

VS Code eklentileri destekler. Live Server eklentisini indirerek File -> Auto Save özelliğini açarsanız yaptığınız tüm değişiklikler anında ekrana düşer.

Dosya adı oluşturken uyacağınız kurallar

Gerçek bir websitesinde sayfanızın açılanilmesi için

Küçük harf kullanın.
Boşluk kullanmayın, gerekirse tire koyun: iletisim-formu.html
Türkçe karakter kullanmayın: Hakkımda Sayfası.html yerine hakkimda-sayfasi.html kullanın
Sitenizin ana sayfasının adı index.html olsun. Sunucular bir klasör üzerinden çalıştığında varsayılan olarak bu dosyayı açar.

Sık yapılan hatalar

Dosyanın index.html.txt olması: Dosya Gezgini’nde Görünüm -> Göster -> Dosya adı uzantıları’na tıklayarak dosyayı tekrar isimlendirmeyi deneyin.

Değişiklerim gözükmüyor: VS Code’da sekme adının yanında beyaz bir nokta varsa dosya henüz kaydedilmemiştir. Live Server açıksa sayfayı yinelemeyi deneyin.

Görev

Aşağıdakilerin hepsini yaptıysanız bir sonraki derse hazırsınız:

ilk-sitem klasörünü oluşturdum.
İçinde index.html dosyası var ve adı .txt ile bitmiyor.
Dosyayı tarayıcıda açtım.
Yazıyı değiştirdim, kaydettim, yeniledim ve değişikliği gördüm.

Soru

Kodu değiştirdiniz, tarayıcıyı yenilediniz ama sayfa aynı kaldı. İlk neyi kontrol etmelisiniz?

Dosyayı kaydedip kaydetmediğimi :: Doğru. En sık karşılaşılan sebep budur.
Bilgisayarı yeniden başlatmayı :: Buna gerek yok.
Tarayıcıyı değiştirmeyi :: Sorun büyük ihtimalle tarayıcıda değil.

Soru 2

Aşağıdaki dosya adlarından hangisi kurallara en uygun olanıdır?

Benim Sayfam.html :: Büyük harf ve boşluk içeriyor.
iletişim.html :: Türkçe karakter içeriyor.
benim-sayfam.html :: Doğru. Küçük harfli, boşluksuz ve Türkçe karaktersiz.

Bu derste öğrendikleriniz

HTML dosyası, sonu .html ile biten düz metin dosyasıdır.
Çalışma döngüsü: yaz, kaydet, yenile.
Dosya adlarında küçük harf kullanılır; boşluk ve Türkçe karakter kullanılmaz.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.