İlk Web Sitenizi Oluşturma: 10 Adım

2025 Yazar: John Day | [email protected]. Son düzenleme: 2025-01-23 15:13

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?