Çarşamba 29 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 5.1 in Getirdiği 10 Yeni Özellik
 HTML 5.1 in Getirdiği 10 Yeni Özellik
HTML5 JavaScript

HTML 5.1 in Getirdiği 10 Yeni Özellik

Yazar : Furkan Baycan 17 Mart 2017 3 Comments

İçindekiler

  • [mks_icon icon=”fa-thumbs-up” color=”#ec5743″ type=”fa”] Okuma Önerisi: Geliştiriciler İçin 8 En İyi HTML Editör

  • 1-) Responsive Tasarım İçin Birden Fazla Fotoğraf Atabilirsiniz.

  • 2-)Ekstra Bilgileri Gizle veya Göster

  • 3-)Browser Menüsü Sağ Tıklamaya İşlev Ekleyebilirsiniz.

  • 4-)Header ve Footer’lerı İç İçe Geçirebilme

  • 5-) Stil ve Scriptler için Kriptografi Parantezleri Kullanabilme

  • 6-)Ters Bağlantı İlişkilendirme

  • 7-) Sıfır Genişliğe Sahip Görüntüler Kullanın

  • 😎 Kimlik Avı Saldırılarısı için Tarayıcı İçeriklerini Ayırabilirsiniz

  • 9-)Boş Seçenekler Oluşturun

  • 10-) Figure Captions’u Daha Esnek Kullanın

HTML dünyası, birkaç hafta önce W3C’nin yeni HTML 5.1 önerisini Kasım 2016’da yayınladığında büyük çaplı bir revizyona girdi. W3C(WWW Birliği), son blog yazısında, HTML 5.1’in bize sunduğu yeni yöntemleri sağlamak için yeni büyük sürümünü altın standart olarak adlandırdı. Daha esnek web siteleri oluşturmak için HTML’yi de kullanabileceğiz gibi duruyor.

[mks_icon icon=”fa-thumbs-up” color=”#ec5743″ type=”fa”] Okuma Önerisi: Geliştiriciler İçin 8 En İyi HTML Editör

Bir şeye parmak basalım ki şu anda tüm tarayıcıların bu özelliklerin tümünü desteklemediğini unutmamak lazım; bu nedenle bunları  kullanmadan önce tarayıcı desteğini kontrol etmeyi unutmayın. HTML standardının daha da geliştirilmesi ile ilgileniyorsanız, HTML 5.2‘nin çalışma taslağına da göz atabilirsiniz.

1-) Responsive Tasarım İçin Birden Fazla Fotoğraf Atabilirsiniz.

HTML 5.1’de, yanıtlama imgesi seçimi mümkün kılmak için <picture> etiketini srcset olarak kullanabilirsiniz. <Picture> etiketi, geliştiricilerin UA’nın görüntüleme alanı boyutuna, ekran yoğunluğuna, ekran türüne ve responsive tasarımda kullanılan diğer parametrelere uyum sağlamak için geliştiricilerin farklı görüntü kaynakları bildirmesini sağlayan bir resim container’ini temsil ediyor.

<Picture> etiketinin kendisi hiçbir şey göstermez, yalnızca birden çok resim kaynağı için bağlam olarak işlev görür. Varsayılan görüntü kaynağını <img> etiketinin src attributelerinin değeri olarak bildirmeniz gerekir ve alternatif görüntü kaynakları <img> ve <source> öğelerinin srcset nitelikleri içine girer.

 

2-)Ekstra Bilgileri Gizle veya Göster

<Details> ve <summary> etiketleri ile bir içerik parçasına genişletilebilen bilgi ekleyebilirsiniz. Ek bilgi varsayılan olarak gösterilmez, ancak isterseniz, göz atma seçeneğiniz bulunuyor. Kodunuzda <summary> etiketini <details> içine yerleştirmeniz yeterli. <Summary> etiketinin ardından gizlemek istediğiniz ek bilgileri de ekleyebilirsiniz.

 

3-)Browser Menüsü Sağ Tıklamaya İşlev Ekleyebilirsiniz.

<Menuitem> öğesi ve type = “context” özelliği ile, tarayıcının  menüsüne checkbox altına özel işlevler ekleyebilirsiniz. <Menuitem> öğesini <menu> etiketinin alt öğesi olarak atamanız yeterlidir. <Menu> öğesinin kimliği, bağlam menüsünü eklemek istediğiniz öğenin contextmenu niteliğiyle aynı değeri taşımalıdır . Chrome’da site içine uygulamadan görünmeyebilir. Firefox ta denerseniz daha güzel bir sonuç alabilirsiniz.

 

4-)Header ve Footer’lerı İç İçe Geçirebilme

Bu özellik, <article> ve <section> gibi semantik bölümleme unsurlarına ayrıntılı başlık eklemek istiyorsanız gerçekten kullanışlı bir özelliktir.  Aşağıdaki kod örneği Header’in içinde bir kenar çubuğu oluşturur, <aside> etiketi de bir bölümleme öğesidir ve içindeki yazar hakkında ek bilgi ekler. Header’in içindeki kenar çubuğunun kendi başlığı da vardır, Footer ve yazarın iletişim bilgilerini bulundurur.

 

5-) Stil ve Scriptler için Kriptografi Parantezleri Kullanabilme

Javascript ile uğraşıyorsanız HTML içine gömmek için biraz daha güvenlik seçeneği oluşturabilirsiniz. Nonce yani parantez anlamına gelen bu sistemle script özelliğinin yanına nonce = “” olarak bir bölüm açılır. her scriptin kendi parmak izi gibi rakam ve harflerden oluşan kodlar oluşur. Böylece biraz daha güvenlikli bir kullanım sağlar.

 

 

6-)Ters Bağlantı İlişkilendirme

Devir attribute’sini bağlantılarınıza tekrar ekleyebilirsiniz. Daha önce HTML 4’te tanımlanmıştı, ancak HTML5 tarafından desteklenmiyordu. HTML 5.1, geliştiricilerin bu attribute’yi <link> ve <a> öğeleri için tekrar kullanmalarını sağlar. Rev attributesi rel’nin tersi olup, geçerli ve bağlantılı belgenin ters yöndeki ilişkisini belirtir.

 

 

7-) Sıfır Genişliğe Sahip Görüntüler Kullanın

HTML 5.1, geliştiricilerin sıfır değeriyle birlikte width özelliğini değer olarak kullanmasına izin vererek sıfır width görüntüler oluşturmayı mümkünleştirdi. Bu özellik, görüntü dosyalarını izleme gibi kullanıcılara göstermek istemediğiniz resimleri ekleme konusunda işinize yarayabilir.

 

 

😎 Kimlik Avı Saldırılarısı için Tarayıcı İçeriklerini Ayırabilirsiniz

Web sitenizde aynı kaynak bağlantıları kullanmak sonunda size bir sorun teşkil edebilir. Güvenlik açığı “target = “_ blank”” exploits olarak adlandırılıyor ve bu siyah şapkalı bir kimlik avı saldırısı. Bu saldırının Github demo sayfasında nasıl çalıştığını test edebilir ve  kodunu burada bulabilirsiniz.

HTML 5.1, tarayıcı bağlantılarını ayıran rel = “noopener” özelliğinin kullanımına izin vermiştir, bu nedenle bu sizin için bir sorun haline gelmeyebilir. Rel = “noopener” öğesini <a> ve <area> öğeleri içinde kullanarak daha güvenli hale getirebilirsiniz.

 

 

9-)Boş Seçenekler Oluşturun

HTML 5.1, geliştiricilerin boş bir <option> öğesi oluşturmasına olanak verir. <Option> etiketi <select>, <optgroup> veya <datalist> öğelerinin bir alt öğesi olabilir. Boş bir <option> seçeneği, kullanıcıların hangi seçeneği seçmeleri gerektiğini önermektense, kullanıcı dostu formlar tasarlamak istediğinizde yararlı olabilir.

 

10-) Figure Captions’u Daha Esnek Kullanın

<Figcaption> etiketi, illüstrasyonlar, fotoğraflar ve diyagramlar gibi görseller için bir container olan <figure> öğesine ait bir başlığı veya bir açıklamayı temsil eder.Daha öncelerde, <figcaption> etiketi yalnızca <figure> öğesinin ilk veya son child olarak hiyerarşide kullanılabilirdi. HTML 5.1 bu kuralı serbestleştirdi ve <figcaption> <figure> container’inin herhangi bir yerinde görünebilir.

Sormak istediğiniz bir şey olursa bize yorum yoluyla bildirebilirsiniz. En yeni yayınlarımızdan ilk olarak siz haberdar olmak isterseniz sağ üst tarafta yer alan mail aboneliğine 20 saniye kadar kısa bir sürede kaydolarak gerçekleştirebilirsiniz. Herkese İyi Çalışmalar 🙂

Etiketler: html html 5.1 html 5.1 kullanımı html 5.1 yenilikler html güncel sürüm html güncel sürüm yenilikleri
Önceki Yazı
Sonraki Yazı

Furkan Baycan (Website)

administrator

Güvenlik ve Web Programcılığı alanında çalışıyorum. Bu alanlarda da sizler için mutfakta yazılar yazıyorum. Siz de çok değerli projeleriniz ve yorumlarınızla mutfağa katkıda bulunabilirsiniz.

3 Yorumlar

  • Meraklı says:
    24 Ağustos 2017 at 02:07

    Merhaba, öncelikle yazınız için teşekkür ederim. Gerçekten faydalı olmuş. Listede kayma olmuş ve ilk kod penceresini eklememiş ve bir satır atlamışsınız. Umarım bu yorumu gören olur çünkü boşa yazmış olmak istemiyorum. Sağlıcakla kalın.

    Reply
    • Bilal UÇAR says:
      24 Ağustos 2017 at 11:07

      Öncelikle uyarınız için teşekkürler. Ufak bir hatamız olmuş, düzelttik.

      Reply
  • Orhan says:
    4 Mart 2019 at 13:50

    Abi şimdi bizim bir projemiz var üstünde halâ üstünde çalışıyoruz sitemize youtube ta bulunduğu gibi bir trend kısmı oluşturmak istiyoruz fakat nasıl yapıcağımı kafamda oturtamadım ve kodlamam da o kadarına yetmedi yardımcı olursan sevinirim

    Reply

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.