HTML5

HTML elementleriyle yapabileceğiniz 6 güzel şey

Webmaster Kitchen Html Etiketleri Yapılabilecekler

Ş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:config de dom.image.picture.enable true olarak ayarlamamız gerekmektedir.

See the Pen HTML by Fatih (@fatihozel) on CodePen.

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>


Yazar hakkında

Fatih Özel

Developer Teknovol | Çırak JavaScript Engineering

Yorumlar

Bir yorum yaz