HTML
HTML’ de < p > ile Paragraf Oluşturma
Html’de metin oluşturmak için en çok kullanılan yöntem < p > tagleri arasında kullanılan paragraf yapısıdır. Herhangi bir metin yazarken yalın haline yerine < p > kullanmanın bir çok avantajı vardır. Paragraflar aşağıdaki örnekte’de göründüğü gibi < p > ile < / p > tagleri arasına yazılmaktadır. Örnek: <p> Günümü kod yazarak ve bu alanda araştırmalar yaparak geçirmeyi seviyorum. Mesleğimi seviyorum ve sevdiğim mesleği yapmak bana mutluluk veriyor. </p> HTML bir sayfa üzerinde birden fazla şekilde paragraf oluşturabilirim. Paragraflar default kendine özel satıra yerleşmektedir. ondan sonra gelen elemanlar bir alt satırdan başlarlar.
HTML’de Tablolar (Tablo Yapımı ve Düzenleme)
HTML’de Tablolar İlkel tasarımlarda tabloları web sayfalarımızın iskeletini çıkartırken kullanıyorduk. Artık mobil uyumlu responsive özelliklere ihtiyaç ve kolay kullanım sebebiyle div kullanımları yoğunlaştı ve email tasarımları dışında tabloları web sayfalarında sadece tablo amacı için kullanıyoruz. HTML’de Tablo Nasıl Oluşturulur ? <table> etiketleri ile tablomuzu oluşturmaya başlıyoruz. <tr> ile satırları oluşturuyoruz. <td> ve <th> ile tabla sutunlarını oluşturuyoruz. Örnek: <table> <!--- Birinci Satırımın Başlangıcı --> <tr> <!--- Birinci Satır Birinci Sutun--> <th>İsim</th> <!--- Birinci Satır İkinci Sutun --> <th>Yaş</th> <!--- Birinci Satır Üçüncü Sutun --> <th>Email</th> &...
HTML Tablolarda “td” ve “th” Arasındaki Fark Nedir ?
Kısaca anlatmak gerekirse HTML tablolarda tabloyu her zaman <table> ve </table> arasına yazmaktayız. Satır oluşturmak için <tr> </tr> Sutun oluşturmak içinse <td></td> veya <th></th> kullanmaktayız. Peki td ve th Arasındaki Fark nedir ? <th> tablonun en üst kısmında başlıklar için kullanılırken. <td> kısmı tablonun iç kısımlarındaki elemanlar için kullanılır. <table> <tr> <th>Burası Başlık TH</th> <th>Burası Başlık TH</th> </tr> <tr> <td>Burası Metin TD</td> <td>Burası Metin TD</td> </tr> </table> Önizleme: Burası Başlık TH Burası Başlık TH Burası Metin TD Burası Metin TD
Heading Başlıklarını CSS ile Şekillendirme (H1 Örnek – Yazı Fontu , Boyutu , Rengi)
HTML ile web tasarımlarında default olarak bulunan başlıklar (h1) aşırı büyük biçimsiz olabilir. Tasarımımıza uyarlamak için bu başlıklar üzerinde belirli stil değişiklikleri yapabiliriz. Bunu html’de style tag’i arasına yapabilceğimiz gibi ayrı css kodları olarak da ekleyebiliriz. Basit bir örnek ile devam edelim; H1 Yazı Fontu , Büyüklüğü ve Rengi Değiştirme Örneği H1 Başlığı Nasıl Oluşturulur ? <h1>Başlık Metni Buraya Gelecek</h1> Önizleme Başlık Metni Buraya Gelecek Yazının boyutunu ve rengini değiştirmek için gerekli css kodlarımızı <style> tagleri arasına ekleyelim. <style> h1 { font-size:16px; color: #dddddd; } </style> Not: <h1> gibi html kodları her zaman <body> içerisinde bulunur. <style> içerisindeki css kodları ise &l...
HTML’de Açılır Buton Details ve Summary
HTML’de details ve summary bloğu ile açılır sayfa bölümleri oluşturabiliyoruz. Sıkça sorulan sorular (f.a.q) gibi kısımlarda UI ve UX çalışmalarında işlevselliği arttırmak için bu yapıyı sık kullanırız. Ayrıca SEO çalışmalarında aşırı içeriği sayfada daha derli toplu hale getirmek için de bu yapıyı sık sık kullanıyorum. <details> <summary>Açılır buton</summary> <p>Bölüm açıldığında gösterilecek yazı burada yer alacak.</p> </details> Önizleme Açılır buton Bölüm açıldığında gösterilecek yazı burada yer alacak. Şimdi Açılır bölümümüze biraz stil kazandıralım.Bunun için CSS kodları yazmamız gerektiğini biliyoruz. Dilersek html içerisinde style tagi ile de halledebiliriz. Bunun için; details {} ve summary {} etiketleri lerine, background-color: c...
