İçindekiler:
- Adım 1: Klasörünüzü Oluşturma
- 2. Adım: İlk Dosyanızı Oluşturma
- Bu, bir talimat tarafından size getirilen ilk web sayfam
- 3. Adım: Dosyayı Açın
- 4. Adım: Sayfanızın Stilini Oluşturma
- Adım 5: Style.css dosyasını Index.html'nize bağlayın
- Adım 6: Yeni Tarz Sayfanızı Görüntüleyin
- Adım 7: Bir Düğme Oluşturma
- 8. Adım: Javascript Dosyanızı Oluşturun
- 9. Adım: Javascript ve Dizin Dosyalarınızı Bağlayın
- Adım 10: Yeni Oluşturulan Düğmeyi Test Edin
2025 Yazar: John Day | [email protected]. Son düzenleme: 2025-01-13 06:58
Bu öğreticide, bağlantılı bir stil sayfası ve etkileşimli javascript dosyası olan temel bir web sayfası oluşturmayı öğreneceksiniz.
Adım 1: Klasörünüzü Oluşturma
Oluşturacağımız dosyalar için saklanmak üzere bir klasör oluşturun. Adını istediğiniz gibi vermekten çekinmeyin, sadece nerede olduğunu unutmayın çünkü dosyaları daha sonra oraya kaydedeceğiz.
2. Adım: İlk Dosyanızı Oluşturma
Favori metin düzenleyicinizi açın. Benim durumumda, Windows 10'un yerleşik not defterini kullanacağım. Yeni bir dosyanız olduğunda aşağıdakini yazın:
Bu, bir talimat tarafından size getirilen ilk web sayfam
HTML etiketi olarak bilinen şey budur. Başlık 1'in kısaltmasıdır. Bu etiketin içine koyduğumuz metin, sayfada başlık olarak görünecektir. Böyle açılıp kapanıyor. İki etiket arasındaki metin, web tarayıcınızda görüntülenecek olandır. Söyleyen kısım, o etikete x adımında referans vereceğimiz bir öznitelik veriyor. Bu yapıldıktan sonra devam edin ve dosyayı 1. adımda oluşturduğumuz klasöre index.html olarak kaydedin.
3. Adım: Dosyayı Açın
Artık oluşturduğumuz klasör içindeki dosyaya gitmeyi tamamladığımıza göre, dosyaya sağ tıklayın ve "birlikte aç" seçeneğini seçin ve kullandığınız web tarayıcısını seçin. Benim durumumda bu google chrome. Şimdi şimdiye kadar sıkı çalışmanızın emeklerini görün!
4. Adım: Sayfanızın Stilini Oluşturma
Olduğu gibi, web sitemiz oldukça sade. İşleri biraz renklendirmek için basamaklı stil sayfası olarak bilinen şeyi ekleyeceğiz. Yeni bir metin dosyası oluşturun ve aşağıdakini yazın:
h1{renk: mavi; metin hizalama: merkez;}
Burada tarayıcıya söylediğimiz şey, h1 etiketinde (2. adımda öğrendiğimiz) herhangi bir öğeyi bulmak ve ona mavi bir renk vermek ve onu sayfanın ortasına hizalamaktır. Bu dosyayı 1. adımda oluşturduğumuz klasöre style.css olarak kaydedin.
Adım 5: Style.css dosyasını Index.html'nize bağlayın
Bu noktada birbirinden habersiz iki ayrı dosyamız var. index.html dosyamıza başvurmasını istediğimiz bir style.css dosyamız olduğunu söylemeliyiz ve ondan bazı stiller almalıyız. Bunu yapmak için index.html dosyamızı metin düzenleyicimizde açacağız ve h1 etiketimizin üstüne link etiketi olarak bilinen şeyi ekleyeceğiz. Bağlantı etiketi, adından da anlaşılacağı gibi yapar, bir şeye bağlanır. Bizim durumumuzda bir stil sayfası. Devam edin ve yazın. Bağlantı etiketi kendi kendine kapanan bir etikettir, bu nedenle bir bitiş etiketi gerekli değildir. Rel, ilişki anlamına gelir ve href, referans verdiğimiz harici dosyamızın bulunduğu dizin dosyasına söyler. Şimdi bu index.html dosyasını kaydedin.
Adım 6: Yeni Tarz Sayfanızı Görüntüleyin
3. adımı tekrar ziyaret edin ve web sayfanızı yeniden yükleyin ve değişikliklerin nasıl yansıtıldığına bir göz atın.
Adım 7: Bir Düğme Oluşturma
index.html dosyanızı metin düzenleyicinizde yeniden açın ve şunu yazın:
Beni tıkla!
ve dosyayı kaydedin. Bu, sayfada bir düğme öğesi oluşturur. Kaydedildikten sonra, 3. adımda gösterildiği gibi dosyayı yeniden açın ve düğmenin sayfanızın sol alt tarafında olduğundan emin olun.
8. Adım: Javascript Dosyanızı Oluşturun
Son olarak javascript dosyamızı oluşturacağız. Bu, sitemizi interaktif hale getirecektir. Bir metin düzenleyici açın ve şunu yazın:
document.querySelector("#button").addEventListener("tıkla", function(){
document.querySelector("#heading").innerText = "Başlığı anında değiştirme"
})
Yaptığımız şey, belgeden bize düğme kimliğine sahip bir öğe bulmasını istemek ve düğmenin, başlığın kimliğine sahip bir öğe metnini "Anında başlığı değiştirme" olarak değiştirerek bir tıklama olayına yanıt vermesini sağlayacağız. ". Dosyayı 1. adımda oluşturduğumuz klasöre button.js olarak kaydedin.
9. Adım: Javascript ve Dizin Dosyalarınızı Bağlayın
style.css dosyasında yaptığımız gibi index.html dosyamıza javascript dosyamız hakkında bilgi vermemiz gerekiyor. Şimdiye kadar yaptığımız her şeyin altına aşağıdakileri yazın:
Komut dosyası etiketi, sayfamıza işlevsellik sağlamak için bir komut dosyası dili (bizim durumumuzda javascript) eklememize izin verir. button.js adlı bir dosya aramasını ve içindeki tüm kodu indeks dosyamıza eklemesini söylüyoruz. Bunu yazdıktan sonra dosyayı kaydedin ve 3. adımda gösterildiği gibi dosyayı yeniden açın.
Adım 10: Yeni Oluşturulan Düğmeyi Test Edin
Şimdi devam edin ve düğmeye tıklayın ve başlık değişimini izleyin!
Tebrikler!! Artık ilk interaktif web sayfanızı oluşturdunuz! Şimdi bildiklerini bilerek daha ne kadar ileri götürebileceğini merak ediyorum?