Uygulama – İçerik sayfasını yapılandırma

CSS kullanarak bir içerik sayfası yapılandırmak, ustalaşmak için çok önemli bir beceridir.

CSS kullanarak bir içerik sayfası yapılandırmak, ustalaşmak için çok önemli bir beceridir. Bu değerlendirmede bir sayfanın nasıl görünebileceğini seçme yeteneğinizi test edeceğiz.

Başlangıç ​​noktası

Bu değerlendirmeye başlamak için tüm başlangıç ​​dosyalarını içeren zip dosyasını indirin.

Zip dosyası şunları içerir:

  • Yapısal işaretleme eklemeniz gereken HTML.
  • İşaretlemenizi biçimlendirmek için CSS.
  • Sayfada kullanılan görseller.

Örneği yerel bilgisayarınızda oluşturabilir veya alternatif olarak aşağıdaki gibi bir çevrimiçi araç kullanabilirsiniz: codepenjsFiddle, veya glitch.

Proje tanıtımı

Bu proje için göreviniz, bir kuş gözlem web sitesinin ana sayfasının içeriğini almak ve sayfaya yapısal öğeler ile düzen eklemek. Sayfanın şunlara sahip olması beklenir:

  • Sayfanın ana başlığını, site logosunu ve gezinme menüsünü içeren sitenin tüm genişliğini kapsayan bir üst alan. Stil uygulandıktan sonra başlık ve logo yan yana görünür ve gezinme menüsü bu iki öğenin altında yer alır.
  • Karşılama metnini içeren bir ana blok ve küçük görsel resimleri içeren bir kenar çubuğu olmak üzere iki sütun içeren bir ana içerik alanı.
  • Telif hakkı bilgilerini ve tanıtım yazısı içeren bir alt alan.

Aşağıdakiler için uygun bir HTML öğesi eklemeniz gerekir:

  • Üst alan
  • Gezinme menüsü
  • Ana içerik
  • Karşılama metni
  • Kenar çubuğu
  • Alt alan

Ayrıca şunları yapmalısınız:

  • Sağlanan CSS’yi <link> ile başlangıçta sağlanan mevcut öğenin hemen altına başka bir öğe ekleyerek sayfaya uygulayın .

İpuçları ve püf noktaları

  • W3C Nu HTML Denetleyicisi kullanarak HTML, CSS ve SVG’nizdeki istenmeyen hataları (başka türlü gözden kaçırmış olabileceğiniz hataları) yakalayın, böylece bunları düzeltebilirsiniz.
  • Bu değerlendirmeyi yapmak için herhangi bir CSS bilmenize gerek yok; verilen CSS’yi bir HTML öğesinin içine koymanız yeterli.
  • Sağlanan CSS, işaretlemeye doğru yapısal öğeler eklendiğinde, oluşturulan sayfada yeşil görünecek şekilde tasarlanmıştır.
  • Takılıp kalıyorsanız ve hangi öğeleri nereye koyacağınızı tahmin edemiyorsanız, sayfa düzeninin basit bir blok şemasını çizin ve her bloğu sarması gerektiğini düşündüğünüz öğeleri yazın. Bu son derece yararlı bir alıştırma olabilir.

Örnek

Aşağıdaki ekran görüntüsü, ana sayfanın düzenlendikten sonra nasıl görünebileceğinin bir örneğini göstermektedir.

Değerlendirme için bitmiş örnek;  "Kuş Gözlemciliği" başlığı, kuş fotoğrafları ve bir karşılama mesajı da dahil olmak üzere kuş gözlemciliği hakkında basit bir web sayfası
Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

Kategoriler: HTML'e Giriş, HTML, Kılavuz

konular

Okumaya devam et!

HTML’de hata ayıklama

HTML yazmak iyi olmasına iyidir ama ya bir şeyler ters giderse ve koddaki hatanın nerede olduğunu çözemezseniz? Bu makale, HTML’deki hataları bulmanıza ve düzeltmenize yardımcı olabilecek bazı araçları tanıtacaktır.

HTML’e Giriş

HTML özünde, bir belgedeki metin parçalarına uygulanabilen öğelerden oluşan oldukça basit bir dildir.

Neden HTML’e göre “chucknorris” bir renk?

HTML’de arka plan renkleri olarak girildiğinde neden bazı dizeler renk olarak algılanır? Mesela: .

Web siteniz nasıl görünecek?

Web siteniz nasıl görünecek? kod yazmadan önce web siteniz için yapmanız gereken planlama ve tasarım çalışmalarını ele alacağız; “Web sitem hangi bilgileri sunuyor?”, “Hangi yazı tiplerini ve renkleri istiyorum?” ve “Sitem ne yapıyor?” İlk olarak: planlama Bir şey yapmadan önce bazı fikirlere ihtiyacınız var.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.