Az Bilinen HTML Etiketleri
Kısaca Html Nedir?
HTML(Hyper Text Markup Language) web sayfalarını oluşturmak için kullanılan standart bir metin işaretleme dilidir;bir programlama dili değildir .İnternet üzerinde web sitelerinin oluşturulmasında kullanılır .Chrome,Explorer,Firefox gibi tarayıcılar Html kodlarını işler ve web sayfasına dönüştürür.Html kodları <html> etiketi ile başlar ve </html> etiketi ile biter.Diğer tüm kodlar bu etiketlerin içine yazılır.
Html ile kod yazarken etiketleri doğru kullanmak çok önemlidir.Bazı etiketler temel olup herkes tarafından bilinirken ,bazıları ise çok yaygın değildir . Bu etiketleri öğrenmek gerekli durumlarda bize kolaylık sağlayacaktır.Bunlardan bazıları Datalist,Details,Progress,Optgroup,Fieldset-Legend’dir.
<datalist> Etiketi:<input> elemanı için önceden tanımlanmış seçenekler listesini belirtir ve bu belirtilen<input> elemanları için bir “otomatik tamamlama” özelliği sağlar. Kullanıcılar, veri girerken önceden tanımlanmış seçeneklerin bir açılır listesini göreceklerdir.Kısaca bu etiket ile dropdown aranabilen aramalar yapabiliriz.Bir kodla örnekleyelim:
Bu kodun çalışmış hali ise şöyledir:
Görüldüğü üzere otomatik tanımlama özelliği devreye girdi ve j yazınca önceden tanımlanmış ilgili terimler çıktı.
Tarayıcı Desteği:Tablodaki sayılar, öğeyi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
<details> Etiketi:Kullanıcının isteği üzerine görüntülenip gizlenebilen ek bilgiler içerir.Varsayılan olarak kapalıdır,açıldığında genişler ve içindeki içerik görüntülenebilir.Etiketin içine her türlü içerik konulabilir.Details elementi içinde iki adet alt element bulundurmak zorundadır.Bunların ilki özet anlamına gelen <summary> elementi ,ikincisi ise p elementidir.<summary> elementi ayrıntıları görüntülemek için başlık tanımlar.Başlık,bilgileri görüntüleyip gizleyebilmek için tıklanılabilir.
Kullanımına bir örnek olarak:
Bu kodun çıktısı şu şekilde olacaktır:
Yukarıda da bahsettiğim gibi varsayılan olarak kapalıdır ama <summary> kısmına tıklayınca açıklama kısmı görünüyor.
Tarayıcı Desteği:
<progress> Etiketi:Bir görevin ya da işlemin ilerleme/tamamlanma sürecini kullanıcıya görsel olarak göstermemizi sağlar.Standart olarak iki özelliği vardır.Bunlar max ve value özellikleridir.
Max:Görevin ya da işlemin bitirilme durumunu tanımlar.
Value:Görevin ya da işlemin o anki durumunu gösterir.
Örneğin bir işlemin farklı tamamlanma durumlarına bakalım:
Kodu çalıştırdığımızda şöyle olacaktır:
Tarayıcı Desteği:
<optgroup>Etiketi: Eğer uzun bir açılır listeye sahipsek ilgili seçenekleri gruplamak kullanım açısından yararlı olacaktır.Tam bu noktada <optgroup> etiketi işimize yarayacaktır.Bu etiketi gruplandırma başlığı gibi düşünebiliriz.Seçeneklerin gruplandırılarak kullanıcıya sunulması anlamına gelir.<select> etiketleri içinde kullanılır.Örneğin
Dersleri programlama ve web tasarım dersleri olarak iki gruba ayırdığımız bu kodun çıktısı şu şekildedir:
Tarayıcı Desteği:
<fieldset-legend>Etiketleri:
Fieldset:Aynı özelliğe sahip html elemanlarının form içinde bir grupta toplanmasını sağlar.
Legend:Fieldset etiketi içinde ilk elementi olarak kullanılarak, gruplandırılan bölgeye bir başlık atanmasını sağlar. Daha iyi anlamak için bir kodla pekiştirelim.Örneğin bir öğrencinin bilgilerini almak isteyelim.
Kodumuzun çalışmış hali ise
şeklindedir.
Tarayıcı Desteği:
Umarım bilgiler faydalı olmuştur,herkese iyi çalışmalar :)
