Önceki etkinliklerde şunları öğrendiniz:
- HTML etiketleri ve öğeleriyle ilgili temel bilgiler.
- Bir web sayfası nasıl yapılandırılır?
- Semantik HTML ve en iyi uygulamalar.
Bu makale ile HTML bilgilerinizi geliştirmeye devam edebilir ve ek HTML öğelerini ele alabilirsiniz.
Metin içeriği öğeleri
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
Bu öğeler, metin içeriğinin oluşturulmasını destekler ve yapı, stil ve anlam katar. Aşağıdaki öğeleri içerebilecek birden fazla metin içeriği vardır.
Bloknot öğesi
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
Bu örnekte, Mahatma Gandi'nin ünlü bir sözüyle <blockquote> öğesinin nasıl kullanılacağı gösterilmektedir. Akılda kalıcı içerik ve anlam sağlayan çok sayıda muhteşem alıntı var. İlham verici favori figürlerinizden bazılarını ve sözlerini düşünün.
Tırnak işareti kullanırken ve bir kaynaktan alınan bilgilere başvururken <blockquote> öğesini kullanın. <blockquote> öğesi, sunuda benzersiz bir girinti ve hizalama oluşturur ve hem açılış hem de kapanış etiketi kullanır. <blockquote> özellikle birden fazla metin satırını kapsayan uzun tırnak işaretlerinin kullanıldığı durumlarda yararlıdır.
Bir <blockquote> öğesinde başlık, paragraf veya liste gibi çeşitli öğeler de kullanabilirsiniz.
<details> öğesi
<details>
<summary>Details</summary>
Additional Information
</details>
Genellikle bir web sayfasında kullanıcının erişebileceği bir SSS bölümü ve ek bilgiler bulunur. Ürün bilgileri, seyahat planı veya her türlü soru-cevap senaryosu için sık kullanılan SSS bölümleri vardır.
<details> öğesi, ek bilgiler içeren ifşa edilen bir widget'ın kullanılması açısından faydalıdır. Öğe, yerleşik bir açma/kapatma işlevi içerir ve kullanıcı, düğmeyi açıp kapatabilir. Açma/kapatma anahtarı açık olduğunda ek bilgi içeriği genişler ve kullanıcı tarafından okunabilir. Açma/kapatma düğmesi kapatıldığında ek bilgi içeriği kullanıcıdan gizlenir. <details> widget'ının kendisini adlandırmak için <summary> öğesini kullanın.
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Bu, <figure> öğesinin kullanımıdır. Burada, <figcaption> öğesiyle birlikte kullanılan <figure> öğesinin görsel deneyimi geliştirmek için kullanılabileceğini görüyorsunuz.
Sürekli web genelinde resimler ve faydalı görsel veriler görürsünüz. Görsel öğeler, ziyaretçilerin ilgisini çekmeye ve harika bir kullanıcı deneyimi oluşturmaya yardımcı olur. <figure> öğesi; resimleri, tabloları, grafikleri vb. etiketlemenin bir yoludur. Ana içerikle ilişkili bağımsız içerikler oluşturarak çalışır.
<time> öğesi
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
<time> öğesi hem anlam hem de anlam sağlayarak online randevu planlama, bir blog makalesi için tarih ve saat yayınlama, arşivler vb. etkinliklerde daha iyi işlevsellik sağlar. <time> öğesini kullanabilecek bazı web sitesi örnekleri arasında Google Takvim'i kullanma, bir platformda yayınlanan makale yayınlama veya bir kütüphane web sitesinden çevrimiçi geçmiş arşivlerini okuma sayılabilir.
<time> öğesi zamana referans verir ve 24 saatlik bir saatin saatini veya saat dilimi ile konuma göre ayarlanabilen belirli bir tarihi temsil edebilir. Bu öğe için hem açılış hem de kapanış etiketi (<time> ve </time>) gerekir. Tarihlerin makine tarafından okunabilir bir biçimde okunabilmesi için datetime özelliğini ekleyebilirsiniz.
Doküman meta verileri
<title>Sarah's Favorite Food Recipes</title>
Bir web sitesi URL'sini her yazdığınızda tarayıcı çubuğunda veya web sayfası sekmesinde okunabilecek bir <title> adı olur. Bir web sayfası için gördüğünüz başlık adıdır. Bu öğe önemlidir ve arama sonuçlarında ilgili web sayfalarının bir listesini görüntülemek için arama motorları tarafından kullanılır. Başlık uzunluğu, kısa ve açıklayıcıdan daha uzun ve daha açıklayıcıya kadar değişebilir.
Senaryo: Aklınıza gelen bir web sayfanız var, ancak web sitesinin URL'sini hatırlayamıyorsunuz. Bir arama motoruna anahtar kelimeleri yazın. Arama motoru, aradığınız web sayfasının izini bulmanıza yardımcı olur ve siz de aramada görünen <title> adını görüntüleyebilirsiniz.
Yerleştirilmiş içerik öğeleri
Metin içeriğine ek olarak, kullanılacak çeşitli ek içerik öğeleri vardır.
<iframe> öğesi
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
İnternetten alışveriş yapmayı bitirip PayPal veya Apple Pay gibi ödeme seçeneğinizi tıkladığınızda bu özellikler genellikle <iframe> simgesinin bulunduğu bir web sayfasına eklenir. Yerel bir işletmeyi aramak için internette haritayla karşılaşmak sık karşılaşılan başka bir deneyimdir. Bir web sayfasındaki bu tür kullanıcı deneyimleri, iframe ile eklenebilir. Yukarıdaki örnekte, "Wikipedia" başlıklı bir iç çerçeve içindeki Wikipedia URL'sini görüyorsunuz.
<iframe> öğesi, başka bir kaynaktan içerik eklemenize ve web sayfası içine çerçeve yerleştirmenize olanak tanır. Dikdörtgen şeklinde bir çerçeve oluşturur ve içeriği tarayıcıda görüntüler. Çerçeve, <iframe> öğesi içinde pencere şeklindeki düzenin sunulmasına olanak tanır. Deneyimi geliştirmek için web sayfanıza içerik eklemenin etkili bir yoludur.
Form öğeleri
<progress max="100" value="30"> 30% </progress>
Daha uzun bir video izlerken, ders izlerken veya kapsamlı bir başvuruyu doldururken ilerleme durumunuzun görsel olarak takip edilmesi faydalı olabilir. <progress> öğesi bu tür senaryolar için faydalıdır.
Bu öğe, arka plan renginde bir görsel çubuk olarak gösterilir. Görsel çubuğun boyutu ve arka plan rengi değişebilir. İsterseniz max ve value özelliklerini ilerleme çubuğunda kullanabilirsiniz. max özelliği kayan nokta sayısını, value özelliği ise bir görevde ne kadar ilerleme kaydedildiğini not eder.
Senaryo Yazma
<canvas id="canvas"></canvas>
Gerçek zamanlı olarak grafik ve animasyon çizebilmek için <canvas> öğesini kullanın. Kanvas oluşturmak için <canvas> öğesini HTML web sayfanıza yerleştirin. Bu öğe, grafik çizme ve oluşturma işlevinin çalışabilmesi için JavaScript kodu gerektirir.
Tablo içeriği öğeleri
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
<table> öğesi
<table> öğesi bir tablo oluşturur. Bu, satır ve sütun içeren ek öğeler eklemek için başlangıç noktasıdır. Tablolar web sayfalarında sıklıkla görünür ve bilgileri düzenlemenin ve göstermenin faydalı bir yoludur. <table> öğesinin kullanım alanlarından biri, kullanıcıya tablo biçiminde bilgiler (ör. bir e-tabloda bulabileceğiniz bilgilerin türü) sunmaktır.
<th> öğesi
<th> öğesi, bir hücre grubunun başlığıdır.
<tr> öğesi
<tr> öğesi, tablo içindeki bir hücre satırını tanımlar. Buradan, belirli hücre verileri ekleyebilirsiniz.
<td> öğesi
<td> öğesi hücreyi oluşturarak gerekli içeriği ekler.
Sonuç
Bu makalede, ek HTML öğeleri keşfettiniz ve kodlama becerilerinizi geliştirdiniz. İçerik, satır içi metin, yerleştirilmiş içerik ve tablo öğeleri hakkında daha fazla bilgi edindiniz. Artık ek HTML öğeleri hakkındaki bilgi birikiminizi geliştirdiniz. Aynen böyle devam edin!