ArmyYazılım

HTML Details Etiketi ve Örnek Kullanımı!

Aralık 9, 2021 | İbrahim Bozkurt

HTML Details Etiketi ve Ornek Kullanimi
HTML Details Etiketi ve Ornek Kullanimi

HTML Details Etiketi kullanıcının isteği üzerine açıp kapatabileceği bir açıklama bölümü oluşturmamıza yarar. Bunun yanında bir kelimenin veya terimin açıklamasını açılır kapanır şekilde belirten details etiketi sıklıkla kullanılan bir etikettir. Ek ayrıntıların genel kullanımı etkilememesi için oluşturulmuştur. Bu nedenle isteğe bağlı olarak açılır – kapanır bir özelliği vardır. Kısacası istek üzerine bakabileceğiniz bir etikettir. Ayrıca details etiketin kullanım sınırı yoktur.

HTML Details Etiketi Kullanımı

Ayrıca kullanımı oldukça kolaydır. Tek yapmanız gereken aşağıdaki gibi bir kullanım biçimine uymaktır.

İlk olarak details etiketini oluşturuyoruz. Daha sonra summary etiketini oluşturuyoruz. Summary etiketi arasına açıklamasını yapacağımız kelime veya kelime grubunu ekliyoruz. Son olarak p etiketinin içine de açıklamayı ekliyoruz. Böylelikle details etiketini kullanmayı öğrendk.

Sizde farklı örneklerle deneyebilirsiniz.

Son olarak;

Details Etiketi uzun makalelerde ve bilimsel çalışmalarda bir kelimenin akademik açıklaması için kullanılabilr. Tabiki tek kullanım alanı da bu değil. Örneğin bir oyun makalesi yazıyorsunuz. onlarca karakter var.

Bu karakterleri uzun makalede tek tek açıklarsanız ave bu kullanıcılar tarafından direkt görüntülenirse makaleniz çok fazla uzun gözükebilr. Bu yüzden gizli açıklamalar yapmak kullanıcı deneyiminizi geliştirmenize yarar. Böylelikle kullanıcılar sadece merak ettikleri, ilgilendikleri karakterleri inceleme fırsatı bulur.

Details Etiketi içine istediğiniz içeriği koyabilirsiniz. Ayrıca HTML Details Etiketi ‘ni bütün güncel tarayıcılar desteklemektedir.

HTML Details Etiketi ile Css

Css ile istediğiniz biçimi uygulayabilir bununla birlikte daha hoş görüntü elde edebilirsiniz.

Varsayılan CSS Ayarları

Çoğu tarayıcı, <details> etiketini aşağıdaki varsayılan değerlerle görüntüler başka bir deyişle css uygulamazsanız aşağıdaki gibi tarayıcı otomatik css uygular:

details {
  display: block;
}

Standart css özelliği bu olmakla beraber istediğiniz özellikleri uygulayabilirsiniz. Sonuçta css dünyasının pek sınırı yok.😂

ÖznitelikDeğerAçıklama
openaçıkAyrıntıların kullanıcıya görünür (açık) olması gerektiğini belirtir.

HTML Details Etiketi default olarak kapalı bir şekilde oluşturulur ancak siz dilerseniz bunun yanında ilk açılışta açık olmasını isteyebilirsiniz. Bunu yapmak için aşağıdaki gibi bir kullanımı uygulayabilirsiniz. Böylelikle details etiketinizin açıklaması ilk olarak açık gelir.

Sonuç olarak her geliştiricinin kullandığı bir etikettir.

İyi çalışmalar dileriz.

Diğer makalelerde görüşmek üzere hoşçakalın!

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …



css html html details etiketi html5
7 ay / HTML


Yorumlar