koddla

Yazılımcıları bilgi ile güçlendirir.

Uygulama – Mozilla açılış sayfası

Bu değerlendirmede, kılavuzumuzda incelediğimiz bazı teknikler hakkındaki bilginizi test edeceğiz. Örneğimizde Mozilla’nın açılış sayfasına bazı resimler ve videolar ekleyeceğiz.

Başlangıç ​​noktası

Bu değerlendirmeye başlamak için github’daki mdn-sayfa-başlangıç dizini içindeki tüm HTML’yi ve resimleri almanız gerekir. index.html içindeki kodu da index.html dosyasına kaydedin. Sonra da pattern.png dosyasını aynı dizine kaydedin (kaydetmek için resme sağ tıklayın).

Orijinaller klasöründeki farklı resimlere erişin ve bunları da aynı şekilde kaydedin. Bu resimleri (bazılarını) kullanılmaya başlamadan önce bir grafik düzenleyici kullanarak değiştirmeniz gerekeceğinden şimdilik farklı bir dizine kaydetmek de isteyebilirsiniz.

Bu örneği tamamlamak için alternatif olarak Glitch gibi çevrimiçi bir araç da kullanabilirsiniz. 

Not: Örnek HTML dosyamızda, sayfayı biçimlendirmek için kullandığımız oldukça fazla CSS var. CSS’ye dokunmanız gerekmez, yalnızca <body> öğesinin içindeki HTML ile ilgilenseniz yeterli – doğru etiketlemeyi yaptığınız sürece stil doğru çalışıp sayfanın güzel görünmesini sağlayacaktır.

Proje tanıtımı

Bu değerlendirmede size bir Mozilla açılış sayfası sunuyoruz. Maalesef henüz resim veya video eklenmedi – bu sizin işiniz! Sayfanın güzel görünmesi ve daha anlamlı olması için biraz medya eklemeniz gerekiyor. Aşağıdaki alt bölümler yapmanız gerekenleri detaylandıracak:

Görüntüleri hazırlayın

Favori görüntü düzenleyicinizi kullanarak aşağıdakilerin 400 piksel genişliğinde ve 120 piksel genişliğinde sürümlerini oluşturun:

  • firefox_logo-only_RGB.png
  • firefox-addons.jpg
  • mozilla-dinosaur-head.png

Bu yeni dosyalara farklı isimler verin örneğin firefoxlogo400.png ve firefoxlogo120.png.

mdn.svg ile birlikte bu görselleri sayfanızdaki further-info alanında kullanacaksınız. Diğer kaynaklara bağlanmak için kullanacağınız simgeler bunlar olacak. Ayrıca site başlığındaki firefox logosuna da bağlantı vereceksiniz. Tüm bunların kopyalarını index.html ile aynı dizine kaydedin. 

Ardından red-panda.jpg dosyasının 1200 piksel genişliğindeki bir sürümünü ve pandayı daha yakından gösteren 600 piksel genişliğinde bir portre sürümünü oluşturun. Yine, onları kolayca tanımlayabilmeniz için mantıklı bir şey olarak adlandırın. Her ikisini de index.html ile aynı dizine kaydedin. 

Not: JPG ve PNG resimlerinizi iyi görünmelerine rağmen mümkün olduğunca küçük olacak şekilde optimize etmelisiniz. tinypng.com bunun için kullanabileceğiniz harika bir hizmet.

Başlığa logo ekleme

<header> öğesi içine bir <img> öğesi ekleyin ve buna Firefox logosunun küçük bir sürümünü yerleştirin.

Ana makale içeriğine video ekleme

<article> öğesi içine (header etiketinin hemen altında), şurada bulunan YouTube videosunu gömün https://www.youtube.com/watch?v=ojcNcvb1olg. Kodu oluşturmak için uygun YouTube araçlarını kullanabilirsiniz. Video 400 piksel genişliğinde olmalıdır.

further-info classı içeren <div> içinde dört adet <a> bulacaksınız. Bu bölümü tamamlamak için her bir bağlantı içine <img> ekleyip, uygun gelen srcaltsrcset ve sizes niteliklerini düzenlemelisiniz.

Her durumda (biri hariç – hangisi doğal olarak zaten duyarlı?), tarayıcının görüntü alanı genişliği 500 piksel veya daha az olduğunda 120 piksel geniş sürümü veya aksi takdirde 400 piksel geniş sürümü sunmasını istiyoruz.

Doğru resimleri doğru bağlantılarla eşleştirdiğinizden emin olun!

Notsrcset/sizes örneklerini düzgün bir şekilde test etmek için sitenizi bir sunucuya yüklemeniz gerekir (Github sayfalarını kullanmak kolay ve ücretsiz bir çözüm olabilir).

Sanat yöneticisi bir kırmızı panda

red-panda sınıfına sahip <div> içine istediğiniz, <picture> öğesi ile eklemenizi istiyoruz. Görünüm penceresi genişliği 600px veya daha az ise küçük portre panda resmini aksi durumda büyük manzara görüntüsünü içersin.

Örnek

Aşağıdaki ekran görüntüleri, geniş ve dar bir ekran üzerinde doğru bir şekilde işaretlendikten sonra açılış sayfasının nasıl görünmesi gerektiğini gösterir.

Örnek açılış sayfamızın geniş bir görüntüsü
Örnek açılış sayfamızın dar bir görüntüsü

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Back to top