HTML Elementleriyle Yapabileceğiniz 6 Güzel Şey
İçindekiler
Şuanda W3C tarafından standartlaştırılmış ve standartlaştırma evresinde olan artık kullanılmayan elementler hariç yüzlerce HTML elementi vardır. İhtiyaç duyulduğunda bize fayda sağlayacak elementleri bulamakta zorluk çekebiliriz yada elementin kullanımını biliriz ama hiç kullanmamış olabiliriz.
Bu yazımızda HTML’in bazı elementlerin özelliklerine değineceğiz. Ayrıca Codepen demoları üzerinden inceleme ve geliştirme yapacağız. Buyurun birlikte inceleyelim.
1.<map> … <area> kullanımı
HTML de <map> elementleri görüntü haritaları oluşturmak için kullanılır. Resim haritaları temelde tıklanabilir alanlar içeren, tıklandığında istediğimiz bir web sayfasına yada aynı sayfa içerisinde köprüleme işlemleri yapabiliriz. Harita üzerinde hangi alanların tıklanabilir olabileceğini <map> elementiyle iç içe kullanılan <area> elementlerine X-Y koordinatları verilerek tanımlayabiliriz.
See the Pen Image map by Fatih (@fatihozel) on CodePen.
2.<template> tanımlama
<template> elementi HTML5 ile birlikte gelen yeni elementlerden bir tanesidir. <template> elementi tarayıcılar tarafından yorumlanmıyor.(görüntülenmiyor.) Yani elementin içindeki HTML kodlarını elinde tutmamızı sağlıyor. Javascript ile sayfamızda dinamik içerik olarak elde edip kullanabiliriz.
See the Pen Define Templates by Fatih (@fatihozel) on CodePen.
3.Responsive için <picture>
Responsive web geliştirme, mobil cihazlar için giderek büyümekte olan popüler bir yöntem haline geldi. Görüntülerimizi tanımlayıp farklı ekran boyutlarında nasıl bir hal almasını sağlabiliriz. <picture> elementi içinde <source> elementi yardımıyla görüntümüzü farklı ortamalar için birden çok tanımlamalar yapmamıza izin vermektedir.
Yanlız Chrome tarayıcısında çalışmaktadır. Firefox tarayıcısı için
about:configdedom.image.picture.enabletrue olarak ayarlamamız gerekmektedir.
HTML
4.Color input elementi
HTML5 ile bir çok yeni input type elementleri getirildi. Color input elementi bunlardan bir tanesidir. Bir renk seçici yardımıyla web sayfamızda renk seçmemizi sağlıyor.
See the Pen Color Picker by Fatih (@fatihozel) on CodePen.
5.<optgroup> kullanımı
Eğer bir açılır listede birden çok seçeneğiniz varsa ve gruplanmış olarak göstermek istiyorsanız <optgroup> elementi işimizi rahatlıkla görecektir. Ayrıca CSS ile stil uygulabilirsiniz.
See the Pen Group options by Fatih (@fatihozel) on CodePen.
6.<noscript> elementi
Bir script tarayıcı tarafından desteklenmediği zaman script devredışı kalacaktır ve sonrasında <noscript> içindeki biçimlendirme devreye girecektir. Web sayfalarındaki JavaScript olmadan çalışmayı durduracak bileşenler için alternatif bir geri dönüş mekanizması sağlamak için oldukça kullanışlıdır.
<head> <noscript><link rel="stylesheet" href="noscript_fallback.css"></noscript> </head> <body> <noscript><h2>Javascript uygulamasını tarayıcınız desteklemiyor.</h2></noscript> </body>
