Bare Bones Web Sayfası: 10 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:20

Bugün sıfırdan çok basit, çıplak bir web sayfası oluşturacağız. HTML öğeleri, web sayfanızın stili (renkler, yazı tipleri, hizalama vb.) ve son olarak web sayfanıza nasıl resim ekleyeceğiniz hakkında konuşacağız!

Bu eğitimin sonunda, sıfırdan bir web sayfası oluşturmak için temel becerilere sahip olacaksınız ve kodlamanın göründüğü kadar zor olmadığını keşfedeceksiniz!

1. Adım: Not Defteri'ni Kullanma

İlk web sayfamızı oluşturmak için Windows üzerinde Not Defteri kullanacağız. Herhangi bir metin düzenleyicisi olsa da, not defteri Windows makinelerinde önceden yüklenmiş olarak gelir, bu nedenle harika bir başlangıç noktasıdır.

Not defterini açmak için ekranınızın sol alt köşesindeki arama çubuğunuza gidin ve "Not Defteri" yazın. Ardından arama sonuçlarında çıkan "Not Defteri" uygulamasını seçin. Yeni bir pencere açılmalıdır.

2. Adım: Temel HTML Belge Ağacını Ekleme

Web tarayıcınızın (Chrome, Firefox, Edge, Internet Explorer, Safari…) web sayfanızı işleyebilmesi ve gösterebilmesi için tüm web sayfalarının standart bir iskelet yapısını takip etmesi gerekir.

Buna html belge ağacı denir. Not Defteri'nde, ekran görüntüsünde gösterildiği gibi html "elemanları" veya "etiketler" yazın. Kopyalayıp yapıştırmaktan da çekinmeyin:

3. Adım:.html Sayfası Olarak Kaydetme

Artık Not Defteri'nde temel html yapımıza sahip olduğumuza göre, herhangi bir işi kaybetmemek ve Eğitilebilirlik boyunca ilerledikçe değişikliklerimizi görebilmemiz için onu kaydedelim.

1. 'Dosya' > 'Farklı kaydet…'i seçin (Ekran Görüntüsü 1)
2. Dosya Türünü 'Tüm Dosyalar' olarak değiştirin (Ekran Görüntüsü 2)
3. Dosyanıza istediğiniz bir ad verin. Belgeyi daha sonra açabilmek için bilgisayarınızda nereye kaydettiğinizi not ettiğinizden emin olun. NOT: Bu dosyayı kaydetmenin en önemli kısmı dosya adının sonuna ".html" eklemektir. Bu, bilgisayarınızın onu bir web sayfası olarak tanımasını sağlar. Bu nedenle, dosyanızı "benim_websayfam" olarak adlandırmak istiyorsanız, bunun sonuna.html eklediğinizden emin olun, ör. "my_webpage.html"

Adım 4: Web Sayfanıza Başlık Ekleme

Yani web tarayıcılarının web sayfamızı yorumlaması ve görüntülemesi için gereken temel html yapısına sahibiz, ancak herhangi bir içeriğimiz yok. Hadi bunu değiştirelim!

Yapmamız gereken ilk şey web sayfamıza bir Başlık vermektir. Çoğu web sayfasının bir başlığı vardır. Bu, web tarayıcınızdaki sekmede görüntülenen şeydir (ekran görüntüsüne bakın). Web sayfama "Taylor'un Web Sitesi" başlığını vereceğim. Bunu yapmak için bir 'başlık' öğesi eklememiz gerekiyor.

Taylor'ın Web Sitesi

Bu noktada her etiketin bir "açılış" etiketi ve bir "kapanış" etiketi olduğunu fark edeceksiniz. Gibi

ve.

Bu, başlığın nerede başladığını ve nerede bittiğini ayırt etmek içindir. Hemen hemen tüm html etiketleri bunu takip eder, ancak bazı istisnalar vardır.

Adım 5: Web Sayfanıza İçerik Ekleme

Web sayfamız için bir Başlığımız var, ancak hala bunun için gerçek bir içeriğimiz yok. Hadi biraz yetenek ekleyelim!

Bir 'title' öğesi kullanarak web sayfamıza bir başlık ekledik. Bir başlık elemanı olan 'h1' elemanını kullanarak web sayfamıza büyük, dikkat çekici bir başlık verelim.

Taylor'ın Web Sitesi

Web sayfama hoş geldiniz

Adım 6: Şimdiye Kadar Yaptığımız Değişiklikleri Görüntüleme

Bir başlığımız var, biraz içeriğimiz var, web sayfamıza bir göz atalım, şimdiye kadar nasıl geliyor.

1. Dosyanızı not defterine kaydedin
2. Dosyanızı kaydettiğiniz yere gidin ve çift tıklayın. Varsayılan web tarayıcınızda otomatik olarak açılmalıdır. İyi görünüyor!

7. Adım: Paragraf Etiketi Ekleme

Bir başlığımız, bir başlığımız var, şimdi biraz daha metin içeren bir paragraf ekleyelim. Bir paragrafın öğe adı 'p'dir. Aşağıda kullanımını görebilirsiniz:

Taylor'ın Web Sitesi

Web sayfama hoş geldiniz

Bugün bu çok basit web sayfasını nasıl oluşturacağımızı öğreneceğiz!

Not: Not defterini kaydedip dosyayı açarak değişikliklerinizi istediğiniz zaman görüntüleyebilirsiniz.

8. Adım: Biraz Renk Verin

Web sayfamız devam ediyor, ancak oldukça basit. Paragraf etiketimize biraz renk verelim!

Aşağıda ayrıntılı olarak açıklandığı gibi 'p' etiketine bir 'style' özniteliği ekleyerek farklı öğeleri renklendirebiliriz:

Taylor'ın Web Sitesi

Web sayfama hoş geldiniz

Bugün bu çok basit web sayfasını nasıl oluşturacağımızı öğreneceğiz!

9. Adım: Resim Ekleme

Resimsiz bir web sitesi nedir? Web sitemize bir resim ekleyelim!

İlk adım, beğendiğiniz bir resim bulmaktır. Bir golden retriever aramak için google görsellerini kullandım. Resmi yukarı çekin ve url'nin.jpg,.png,.gif,-j.webp

Resminizi seçtikten sonra, onu bir 'img' etiketi kullanarak html sayfasına eklememiz gerekiyor. Resmim:

'src' özniteliğine sahip bir 'img' etiketi kullanarak sayfanıza ekleyin:

Taylor'ın Web Sitesi

Web sayfama hoş geldiniz

Bugün bu çok basit web sayfasını nasıl oluşturacağımızı öğreneceğiz!

Adım 10: Nihai Ürünü Görüntüleme

Not defteri dosyasını kaydedin ve nihai ürünü açın. Web sayfanızı görmelisiniz!