Salı 28 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. HTML5
  3. HTML Elementleriyle Yapabileceğiniz 6 Güzel Şey
 HTML Elementleriyle Yapabileceğiniz 6 Güzel Şey
Webmaster Kitchen Html Etiketleri Yapılabilecekler
HTML5

HTML Elementleriyle Yapabileceğiniz 6 Güzel Şey

Yazar : Fatih 14 Aralık 2016 0 Comment

İçindekiler

  • 1.<map> … <area> kullanımı

  • 2.<template> tanımlama

  • 3.Responsive için <picture>

  • 4.Color input elementi

  • 5.<optgroup> kullanımı

  • 6.<noscript> elementi

Ş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.

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>
Etiketler: html elementleri html etiketleri html öğren html tags html yapabillecekler html5 elementler html5 yeni elementler html5 yeni etiketler nasıl yapılır webmaster
Önceki Yazı
Sonraki Yazı

Fatih

author

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.