HTML5 ile internet sitesi oluşturacağımız zaman bir çok farklı yerde bir çok farklı şekilde bir çok etiket kullanmamız gerekir. Bir internet sitesi yapacağımız zaman ister kendimize yada başka birine olsun gerektiği yerde gereken etiketleri kullanmamız ve kullanımına uygun kullanmamız gerekir.
HTML5 liste etiketleri ile bir çok şey oluşturabilir, farklı farklı olan liste etiketleri sayesinde yapılacak olan internet sitesinde uygun kullanımlar sonucunda güzel görüntüler ortaya koyulabilir. Hem durum her etiketi yerli yerinde kullanınca da Google internet sitenizi sever.
HTML5 Liste Nasıl Oluşturulur ?
HTML5 ile liste oluşturmak aslına bakılırsa çok basit bir işlemdir. Oluşturacağınız liste sıralı, sırasız, açıklamalı ve iç içe olmak üzere 4 ana başlığa ayrılır. Oluşturacağınız listenin biçimine göre kullanacağınız etiketler farklılık gösterebilir, HTML liste nasıl oluşturulur adlı soruya verilen cevapları aşağıda sizler için oluşturmuş olduğumuz akordiyon menüden takip edebilir, oluşturacağınız liste biçimine göre etiketleri kullanabilirsiniz.
[accordion] [accordion_content title=”Sırasız HTML Liste Oluşturma” icon=”” active=”active”]Sırasız bir şekilde HTML liste oluşturabilir ve bunlara birden fazla still özelliği ekleyebiliriz. Sırasız olarak oluşturduğumuz liste ise başlarında sayılar yerine kare, yuvarlak gibi şekiller bulunur. İsterseniz göstereceğiniz bu etiketi still özelliği sayesinde değiştirebilir isterseniz de bu şekilleri kullanmayabilirsiniz. HTML ile unordered liste oluşturmak için :
<ul> <li>Birinci madde</li> <li>İkinci madde</li> <ul>
etiketleri kullanılır. <ul> etiketi ile başlayıp <ul> etiketi ile bitirilir ve maddelerin her bir adımı <li> etiketi ile ifade edilir. Biz bu kod satırını kopyalayıp yapıştırdığımızda ise temel özelliği olan kare şeklinde bizleri karşılayacaktır. <ul> etiketine still özelliği eklemek için ise :
<ul style="list-style-type:"disc">
kod satırını kullanabilirsiniz. Disc varsayılan değerdir. Disc yerine gelebilecek etiketler ise “circle, square, none” etiketleri gelir. Circle etiketi yine yuvarlak bir şekilde karşımıza gelir fakat dairenin içi boştur. Square etiketi ile yuvarlak madde kısmı kare olur ve none etiketini kullanarak ise başında çıkan kare ve yuvarlak kısımları kaldırabilirsiniz.[/accordion_content][accordion_content title=”Sıralı HTML Listesi Oluşturma” icon=”” active=”active”] Bu liste türünde ise madde kısmına sırası ile sayılar, harfler ekleyebiliriz. Maddelerin bir sırası belirtilir ve bu sıra otomatik olarak sadece bir şekil ile gösterilmek yerine artan sayı yada harf ile belli edilir. Ordered HTML liste oluşturmak için ise :
<ol type="A"> <li>Birinci madde</li> <li>İkinci madde</li> </ol>
şeklinde ki kod satırını kullanmamız gerekir. Sıralı listenin neye göre sıralanacağını belirlemek için ise type etiketi ile belirttik. Sırasız listede <ul> etiketini kullanırken sıralı listede ise <ol> etiketini kullanırız. Type kısmına gelebilecek sıralama şekilleri ise “1,i,I,Aa,” ile yazarak deneyebilirsiniz. A büyük harfler ile alfabe sıralaması yapar iken küçük a ile küçük harfler ile sıralama yapabilirsiniz. I ile roman rakamları sıralaması yapar iken 1 ile normal rakam sıralaması yapabilirsiniz.[/accordion_content][accordion_content title=”HTML Açıklamalı Liste Oluşturma” icon=”” active=”active”]Açıklamalı liste oluşturmak diye yazınca kafanızda bir şey oluşmuyor olabilir. Fakat açıklamalı listeler genellikle bir kahvenin nasıl olacağını belirtmek için gibi tarzlarda kullanılabilir. Bunun için ise HTML description listesi oluşturmak için :
<dl> <dt>Kahve</dt> <dd>Sıcak ve soğuk kahve</dd> <dt>Çay</dt> <dd>Sıcak ve soğuk çay.</dd> <dl>
Bu sefer ise <dl> etiketi açıklamalı listemizin başlangıç etiketidir. <dt> etiketi sayesinde ilk maddeyi yazarız. Ardından ilk maddeyi yada istediğiniz maddeyi açıklamak istiyor iseniz <dd> etiketi kullanmanız gerekmektedir. <dd> etiketi ilk maddenin altından bir tab kadar boşluk bırakılarak otomatik olarak gözükür.[/accordion_content][accordion_content title=”HTML Liste İçine Liste Oluşturma” icon=”” active=”active”] HTML ile oluşturacağınız listede listenin bir maddesinin birden fazla maddesi olabilir. Yani kısacası liste içinde liste oluşturma işlemini de gerçekleştirebilmemiz mümkün. Bu işlemi yapabilmek için ise :
<ul> <li>Birinci madde</li> <ul> <li>A. Fıkrası <li>B. Fıkrası</li> </ul> <li>İkinci Madde</li> </ul>
Yukarıda yer alan kod parçacığı sayesinde iç içe liste oluşturma işlemini gerçekleştirebilirsiniz. Yukarıda kullanılan kodlar sırasız liste etiketlerine ait olmasına rağmen dilediğiniz taktirde sıralı liste etiketlerini de kullanabilirsiniz.[/accordion_content] [/accordion]
Yukarıda yer alan HTML liste biçimlerini kendiniz bilgisayarınızda Notepad++ uygulamasını açarak deneyiniz. Denedikçe daha çok şey öğrenecek, üzerinde uğraştıkça bu bilgilerin kafanızda yer etmesi sağlanacaktır. İlerleyen zamanlarda tam bir internet sitesi yapmaya başladığınızda önemsiz olarak gözüken bu etiketler sizin için bir yerde kullanılması gereken bir etiket olacak ve bunlar için uğraşıp durmak istemezsiniz. Basit ve kolay olan bu etiketleri yavaş yavaş öğrenmek bu kodlama diline dair her şeyi kafanızda oturtmayı sağlar.