33 – Html Blok Elemanlar – Block Elements Blok elemanlar sınırlandırılmadığı sürece varsayılan olarak sayfanın en solundan en sağına kadar olan alanı kaplar. Blok elemanlarının üst ve alt kısmına varsayılan olarak bir miktar boşluk eklenir. Blok elemanlar: <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> […]
32 – Html Sıralı Listeler – Ordered List Sıralı listeler sayı veya alfabetik olarak sıralı halde sunulan listelerdir. <ol> etiketi ile açılır ve </ol> etiketi ile sonlandırılır. <ol> açılış ve kapanış etiketleri içerisinde sunacağımız liste öğeleri <li> etiketi ile eklenir. Kullanım Örneği: Örnek Yukarıdaki örnek varsayılan değerlerle geldiği için başına sayı aldı. Bu sayıları <ol>
31 – Html Sırasız Liste – Unordered List Başına 1, 2, 3, gibi değerleri almayan, gelişi güzel sıralanan liste çeşididir. Unordered List kısaltmasıyla oluşan başlangıç etiketi <ul> ve kapanış etiketi </ul> dir. Listemizi <ul> etiketleri ile tanımladıktan sonra içerisine <li> etiketi ile listelenecek öğeler yerleştirilir. Liste tarayıcıda varsayılan olarak başına içi dolu daire şeklinde (disc)
30 – Html Listeler Birden fazla html içeriğini bir grup içerisinde sunmaya yarar. Ordered Lists (sıralı listeler), Unordered List (Sırasız Listeler) ve Açıklama Listeleri olarak 3 kısma ayrılır. Ordered Lists – Sıralı Listeler Sıralı listeler sayı veya alfabetik olarak sıralı halde sunulan listelerdir. <ol> etiketi ile açılır ve </ol> etiketi ile sonlandırılır. <ol> açılış ve
29 – Html Tablo Colgroup Html tabloda colgroup kullanımı istediğimiz sütunlar için özel stiller vermemizi sağlar. Tablo oluştururken <table> etiketinin hemen altında oluşturulur. colgroup ile bir grup tanımlanır ve içerisinde col ile sütunlar tanımlanır. Örnek kullanımı: colgroup altında birden fazla col tanımlanarak istediğimiz sütunlar için farklı tasarımlar yapabiliriz. Örnek Yukarıdaki örnekte her bir sütun için
28 – Html Tablo Şekillendirme Tablolarımızın göze hoş görünmesi için bazı css özelliklerini kullanabiliriz. Html Tablosu Satır Renklendirme – Zebra Çizgileri Satırlar için farklı arkaplan renkleri kullanarak güzel bir görünüm elde edilebilir. Tablo satırlarını renklendirmek için Örnek Css Kullanımı: tr:nth-child(even){background-color:bisque;} şeklinde olabilir. Bu şekilde satırlar en yukarıdan başlayarak 2-4-6-8 şeklinde çift sayılara denk gelen satırları
27 – Html Tabloda Hücre Birleştirme Html tablolarında hücrelerin birden fazla yer kaplamasını istiyorsak hücreleri birleştirmemiz gerekir. Sütunları birleştirmek için colspan, satırları birleştirmek için rowspan css özelliğinden yararlanırız. Html Tablosunda Sütun Birleştirme – Colspan Colspan ile yayılacak sütun sayısı belirtilir. Başlangıçta bir sütunu işgal eden verimiz colspan ile belirttiğimiz sayıda yayılım gösterecektir. Örnek Html Tablosunda Satır
26 – Tablo Dolgu ve Boşluk – padding & spacing Html tablosunda hücrelerin içerisindeki veri ile hücrenin kenarı arasındaki mesafeyi padding (dolgu) ile, hücrelerin birbirleri arasındaki mesafeyi ise border-spacing ile ayarlarız. Html Tablo Hücre Dolgusu – table padding Html tabloda padding kullanarak hücrelerin içerisindeki veri ile kenarları arasında boşluk verilebilir. Varsayılan olarak padding sıfır ayarlıdır.
25 – Tablo Başlıkları – Table Header Tablomuzun başlıklarıdır. Altındaki sütunların ya da yanındaki satırın başlığıdır. Table head kısaltması olan th etiketi ile tanımlanır. Yatayda veya dikeyde olabilir. Bir başlık veya birden fazla başlık kullanılabilir. Yatay Tablo Başlıkları Tablo başlıklarını yatayda kullanabilmemiz için ilk açtığımız satır içerisine th ile başlıkları tanımlayabiliriz. Örnek Dikey Tablo Başlıkları
24 – Html Tablo Boyutu – Table Size Tablonun içerisinde bulunan satırlar sütunlar veya tablo genel hatları ile farklı boyutlarda yapılandırılabilir. Html Tablo Genişliği Tablo genişliği style attribute kullanılarak veya ayrı bir stil tanımlaması içerisinde width parametresi ile yapılır. Örnek kullanımı style=”width:75%; şeklindedir. Aşağıdaki örnekte genişlik yüzde yetmişbeş olarak ayarlanmıştır. Örnek Html Tablo Sütun Genişliği
