Uygulama – Mozilla açılış sayfası

Bu değerlendirmede, kılavuzumuzda incelediğimiz bazı teknikler hakkındaki bilginizi test edeceğiz.

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ü
Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

konular

Okumaya devam et!
Sonraki Yazı: Bir resmin üzerine görsel haritası ekleme

Burada bir görsel haritasının nasıl oluşturulacağını ve ilk önce göz önünde bulundurulması gereken bazı olumsuzlukları gözden geçireceğiz.

Enctype ‘multipart/form-data’ ne anlama geliyor?

Bir HTML formunda enctype='multipart/form-data' ne anlama gelir ve ne zaman kullanmalıyız? Bir POST isteği yaptığınızda isteği oluşturan verileri bir şekilde kodlamanız gerekir.

HTML meta verileri

HTML <head> nedir? Önceki makalede ele aldığımız basit HTML belgesini tekrar gözden geçirelim: HTML belgesinde, <head> öğesinin içeriği, <body>‘nin aksine, bir tarayıcıya yüklendiğinde sayfada görüntülenmez.

Web’e vektör grafikleri ekleme

Vektör grafikleri birçok durumda çok kullanışlıdır — küçük dosya boyutlarına sahiptirler ve yüksek düzeyde ölçeklenebilirler, bu nedenle yakınlaştırıldığında veya büyütüldüğünde pikselleşmezler.

HTML sayfasından yönlendirme nasıl yapılır?

Bunun için birden fazla yöntem bulunuyor: 1.

Yorum Gönderin

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

koddla
Tema Mundana by WowThemes.net.