Perşembe 26 Ocak 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. Arayüz
  3. Unutmuş Olabileceğiniz 5 Yararlı HTML Özellikleri ve Etiketleri
 Unutmuş Olabileceğiniz 5 Yararlı HTML Özellikleri ve Etiketleri
Arayüz Güncel HTML5

Unutmuş Olabileceğiniz 5 Yararlı HTML Özellikleri ve Etiketleri

Yazar : Sevim Selin Özsoy 14 Mart 2022 0 Comment

İçindekiler

  • Input Önerileri

  • Detay Blockları

  • Base Etiketi

  • Image ve Iframe’leri Lazy Loading İle Yüklemek

  • Picture Etiketi

Front-end geliştiriciler olarak; birçok teknoloji, framework ve programlama dilleriyle uğraşıyoruz. Aynı anda bütün her şeyle uğraşıyor olmamız nedeniyle, bazen öğrendiğimiz şeyleri unutmak kaçınılmaz oluyor. Örneğin HTML, CSS ve JS öğrenmek kolay fakat öğrendiğiniz bilgileri unutmadan ustalaşmak tam bir challenge!

HTML’in bazı incik cincik özellikleri bize çok zaman kazandıracak ve işimizi kolaylaştıracak olsa da; bu özellikleri dikkate almıyoruz. Sıfırdan başlamak yerine HTML’in bize sağladığı avantajları kullanarak, daha temiz ve kullanıcı dostu arayüzler oluşturabiliriz! Bu yazımda da sizlere bu unutulmuş özellikleriden bahsedeceğim 🙂

Input Önerileri

<datalist> etiketi, listenin içeriğini düzenleyebileceğiniz bir options özelliğine sahip.

Detay Blockları

<details> etiketi bir açıklama widget’ı oluşturur. Bu etiket aktifleştirildiğinde (üzerine tıklandığında) detay metnini görüntüleyebilirsiniz.

Base Etiketi

Base etiketi ile URL’in base kısmını dokümanınızda tanımlayabilirsiniz.

Eğer dosyanızda birden fazla aynı site üzerinden link kullanacaksanız, base etiketi dosyanın daha temiz bir görünüme sahip olmasını sağlar.

Image ve Iframe’leri Lazy Loading İle Yüklemek

Site üzerinde kullanılacak resimleri, tarayıca gözüktüğü zaman yüklenmesini sağlamak için loading=”lazy” attribute’ı verebilirsiniz.

Picture Etiketi

<picture> etiketi bir veya daha fazla <source> etiketi ve bir tane <img> etiketi seçeneği ile bir resmin farklı cihazlarda görünümü için alternatifler sağlar.

Yukarıdaki örnekte tarayıcı genişliği en az 800px olduğunda header.jpg veya header-2x.jpg kullanılır. Eğer tarayıcının boyutu 450px ve 800px arası ise header-small-2x.jpg kullanılır.

Bu yazımda unutulan HTML etiketlerini sizlere biraz olsun hatırlatmaya çalıştım. Umarım yararlı olmuştur, bir sonraki yazımda görüşmek üzere!

Etiketler: Frontend html etiketleri HTML5 yazılım
Önceki Yazı
Sonraki Yazı

Sevim Selin Özsoy

editor

Süleyman Demirel Üniversitesi 4. sınıf bilgisayar mühendisliği öğrencisiyim. Front-end yazılımla ve tasarımla ilgileniyorum. Aktif olarak Süleyman Demirel Üniversitesinin bilgi işlemde part-time yazılımcı ve tasarımcı olarak çalışıyorum. Aynı zamanda da Webmaster Kitchen'da sosyal medya yöneticiliğini ve tasarımcılığını yapıyorum.

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.