Ek HTML öğeleri

Önceki etkinliklerde şunları öğrendiniz:

  • HTML etiketleri ve öğeleriyle ilgili temel bilgiler.
  • Web sayfası nasıl yapılandırılır?
  • Semantik HTML ve en iyi uygulamalar.

Bu makaleyle, HTML bilgilerinizi geliştirmeye ve ek HTML öğelerini ele almaya devam edeceksiniz.

<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ği oluşturulmasını destekler ve yapı, stil ve anlam katar. Aşağıdaki öğeleri ekleyebilecek birden çok metin içeriği vardır.

Blok alıntı öğ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 Gandhi'nin ünlü bir sözüyle <blockquote> öğesinin nasıl kullanılacağı gösterilmektedir. Akılda kalıcı içerikler ve anlamlar sunan çok sayıda muhteşem alıntı var. En sevdiğiniz ilham verici figürleri ve alıntılarını düşünün.

Alıntı kullanırken ve bir kaynaktan gelen 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şaretleri kullanırken faydalı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>

Çoğu zaman bir web sayfasında, kullanıcıya sunulan bir SSS bölümü ve ek bilgiler bulunur. Ürün bilgileri, seyahat planı veya her türlü soru-cevap senaryosu için ortak olarak kullanılan SSS bölümleri vardır.

<details> öğesi, ek bilgiler içeren açıklanan bir widget'ın kullanılmasından fayda sağlar. Öğede yerleşik bir açma/kapatma işlevi bulunur. Kullanıcı, düğmeyi açıp kapatabilir. Açma/kapatma düğmesi 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ı 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 işleyişidir. <figcaption> öğesiyle birlikte kullanılan <figure> öğesinin, görsel deneyimi iyileştirmek için kullanılabileceğini görüyorsunuz.

Web'deki görsellerin yanı sıra diğer faydalı görsel verileri dilediğiniz zaman görürsünüz. Görsel öğeler ziyaretçilerin dikkatini çekmeye yardımcı olur ve harika bir kullanıcı deneyimi yaratır. <figure> öğesi; bir resmi, tabloyu, grafiği vb. etiketlemenin bir yoludur. Bu öğe, 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 anlamsal anlam sunar. Online randevu planlama, blog makalesi için tarih ve saat yayınlama, arşivler gibi etkinliklerle daha iyi işlevsellik sağlar. Google Takvim’i kullanmak, platformda canlı bir makale yayınlamak veya bir kütüphanenin web sitesindeki online geçmiş arşivleri okumak, <time> öğesini kullanan web sitesi örneklerinden birkaçıdır.

<time> öğesi, zamanı referans alır ve 24 saatlik zaman dilimini veya saat dilimi ve konum için ayarlanabilen belirli bir tarihi temsil edebilir. Bu öğe hem açılış hem de kapanış etiketi (<time> ve </time>) gerektirir. 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>

Her web sitesi URL'si girdiğinizde, tarayıcı çubuğunda veya web sayfası sekmesinde okunabilen bir <title> adı bulunur. Bir web sayfasına ilişkin olarak gördüğünüz başlık adıdır. Bu öğe önemlidir ve bir arama motoru tarafından arama sonuçlarında ilgili web sayfalarının bir listesini görüntülemek için kullanılır. Başlık uzunluğu, kısa ve açıklayıcı ya da daha uzun ve daha açıklayıcı arasında değişebilir.

Senaryo: Hakkında düşündüğünüz, ancak belirli bir web sitesinin URL'sini hatırlayamadığınız bir web sayfanız var. Bir arama motoruna anahtar kelimeleri yazın. Arama motoru, aradığınız web sayfasını bulmanıza yardımcı olur. Böylece, aramada görünen <title> adını görüntüleyebilirsiniz.

Yerleştirilmiş içerik öğeleri

Metin içeriğine ek olarak, kullanabileceğiniz çeşitli ek içerik öğeleri vardır.

<iframe> öğesi

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

İnternette ürün alışverişini bitirip PayPal veya Apple Pay gibi ödeme seçeneklerinize tıklandığında bu özellikler genellikle <iframe> bulunan bir web sayfasına eklenir. Yerel bir işletmeyi aramak için internette harita görmek de yaygın olarak karşılaşılan bir diğer deneyimdir. Bir web sayfasındaki bu tür kullanıcı deneyimleri, iFrame ile eklenebilir. Yukarıdaki örnekte, "Wikipedia" başlıklı bir iframe içinde 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 tarayıcıda içeriği gösterir. Çerçeve, bir <iframe> öğesi içinde pencere şekilli bir düzenin sunulmasına olanak tanır. Deneyimi iyileş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 anlatırken veya kapsamlı bir başvuru formunu doldururken, ilerleme durumunuzun takip edilmesinde görsel bir ilerleme çubuğu kullanmanız yararlı olabilir. <progress> öğesi bu tür senaryolar için yararlıdır.

Bu öğe, arka plan rengine sahip bir görsel çubuk olarak gösteriliyor. Görsel çubuğun boyutları ve arka plan rengi değişiklik gösterebilir. İlerleme çubuğuyla birlikte isteğe bağlı olarak max ve value özelliklerini de kullanabilirsiniz. max özelliği, kayan nokta sayısını belirler ve value özelliği, bir görevde ne kadar ilerleme kaydedildiğini gösterir.

Senaryo Yazma

<canvas id="canvas"></canvas>

Gerçek zamanlı olarak grafik ve animasyon çizebilmek için <canvas> öğesini kullanın. Tuval oluşturmak için <canvas> öğesini HTML web sayfanıza yerleştirin. Bu öğe, grafik çizme ve oluşturma işlevselliği 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ütunlara sahip başka öğeler eklemek için başlangıç noktasıdır. Web sayfalarında genellikle yer alan tablolar bilgileri düzenlemek ve göstermek için kullanışlı bir yöntemdir. <table> öğesini kullanmanın kullanım alanlarından biri, kullanıcıya e-tabloda bulabileceğiniz bilgilerin türü gibi tablo biçiminde bilgiler 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 verilerini 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ında bildiklerinizi pekiştirmiş oldunuz. Aynen böyle devam edin!