HTML’de temel metin biçimlendirme makalesinde görmediğimiz, metni biçimlendirmek için birçok başka öğe de bulunur. Bu makalede açıklanan öğeler daha az bilinir, ancak yine de bilinmesi yararlı öğelerdir (ve bu, hiçbir şekilde tam bir liste değildir). Burada alıntıları, açıklama listelerini, bilgisayar kodu stillerini ve diğer ilgili metinleri, alt simge ve üst simgeyi, iletişim bilgilerini ve daha fazlasını biçimlendirme hakkında bilgi edineceksiniz.
Açıklama listeleri
HTML metin temelleri bölümünde, HTML’deki temel listelerin nasıl işaretleneceğini anlattık, ancak ara sıra karşılaşacağınız üçüncü tür listelerden – açıklama listelerinden bahsetmedik. Bu listelerin amacı, bir dizi öğeyi ve açıklamasını – mesela terimler ve tanımlar veya sorular ve cevaplar gibi – listelemektir. Bir dizi terim ve tanım örneğine bakalım:
soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background informationAçıklama listeleri, diğer liste türlerinden farklı bir etiket kullanır — <dl>; ek olarak, her terim bir <dt>(tanımlama terimi) öğesiyle sarılır ve her açıklama bir <dd>(tanım tanımı) öğesiyle sarılır. Örneğimizi işaretlemeyi bitirelim:
<dl>
<dt>soliloquy</dt>
<dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
<dt>monologue</dt>
<dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
<dt>aside</dt>
<dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
</dl>Tarayıcı varsayılan stilleri, açıklamalar kısmına girinti ekler. Bu örnek aşağıdaki gibi görünür:
Birden fazla açıklama içeren terimlere izin verildiğini de unutmayın, örneğin:
<dl>
<dt>aside</dt>
<dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
<dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
</dl>
alıntılar
HTML ayrıca alıntıları göstermek için kullanılabilecek özelliklere de sahiptir; hangi öğeyi kullanacağınız, bir bloğu veya satır içi alıntıyı işaretlemenize bağlıdır.
blok alıntılar
Blok düzeyinde içeriğin bir bölümü (paragraf, birden çok paragraf, liste vb.) başka bir yerden alıntılanmışsa, bunu belirtmek için <blockquote> öğesi kullanılabilir. Bu öğe içine metin sarılır ve alıntının kaynağını gösteren bir URL cite özniteliği içine yazılır. Örneğin, MDN <blockquote> öğesi sayfasından aşağıdaki alıntıyı alalım:
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>Bunu bir blok alıntıya dönüştürmek için şunu yapardık:
<p>Here below is a blockquote...</p>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>Tarayıcı varsayılan stili, bunun bir alıntı olduğunun göstergesi olarak girintili bir paragraf gösterecektir;
satır içi alıntılar
Satır içi alıntılar, <q> öğesi kullanılması dışında tamamen aynı şekilde çalışır. Örneğin, aşağıdaki örnek parçası MDN sayfasından <q> öğesi ile bir alıntı içerir:
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>Tarayıcı varsayılan stili, bunu bir alıntıyı belirtmek için tırnak içine alınmış normal metin olarak oluşturur, örneğin:
referans
cite niteliğin içeriği kulağa kullanışlı geliyor olsa da ne yazık ki tarayıcılar, ekran okuyucular vb. bununla pek bir şey yapmıyor. cite niteliği ile JavaScript veya CSS kullanarak kendi çözümünüzü yazmadan tarayıcının içeriğini görüntülemesini sağlamanın bir yolu bulunmuyor. Alıntının kaynağını sayfada sunmak istiyorsanız, bunu metinde bir bağlantı veya başka bir uygun yolla sunmanız gerekir.
Diğer yandan ayrıca bir <cite> öğesi bulunur, ancak bu, alıntı yapılan kaynağın başlığını, örneğin kitabın adını içermesi anlamına geliyor. Bununla birlikte, <cite> ile bir şekilde alıntı kaynağını yazmamamız için hiçbir neden yok:
<p>According to the <a href="/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>Alıntıların stili varsayılan olarak italik yazı tipindedir.
Kısaltmalar
Web’de dolaşırken karşılaşacağınız oldukça yaygın bir diğer unsur da şudur: <abbr>. Bu, bir kısaltmayı veya terimin tam bir açılımını sağlamak için kullanılır (title özniteliği kullanılır). Birkaç örneğe bakalım:
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>Bunlar aşağıdaki gibi görünecektir (fare terimin üzerine geldiğinde bir ipucu olarak görünür):
Not: Html’nin önceki sürümleri de <acronym> öğesi de bulunuyordu , ancak <abbr> hem kısaltmaları hem de akronimleri temsil ettiği için <acronym> HTML spesifikasyonundan kaldırıldı.
İletişim bilgilerini biçimlendirme
HTML, iletişim bilgilerini biçimlendirmek için <address> öğesi kullanılabilir. Bu, iletişim bilgilerinizi sarar, örneğin:
<address>
<p>Chris Mills, Manchester, The Grim North, UK</p>
</address>Ayrıca, daha karmaşık biçimlendirme ve diğer iletişim bilgilerini de içerebilir, örneğin:
<address>
<p>
Chris Mills<br>
Manchester<br>
The Grim North<br>
UK
</p>
<ul>
<li>Tel: 01234 567 890</li>
<li>Email: me@grim-north.co.uk</li>
</ul>
</address>Bağlantılı sayfa iletişim bilgilerini içeriyorsa, bunun gibi bir şeyin de uygun olacağını unutmayın:
<address>
<p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>Üst simge ve alt simge
Tarihler, kimyasal formüller ve matematiksel denklemler gibi öğelerin doğru anlamlarının önemli olduğu biçimlendirmeler de kullanırız. <sup> ve <sub> elementleri bu iş için kullanılır. Örneğin:
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>Bu kodun çıktısı şöyle görünür:
Bilgisayar kodunu temsil etmek
HTML’de kod örneklerini biçimlendirmek için kullanılabilecek birkaç öğe de vardır:
<code>: Genel bilgisayar kod parçalarını biçimlendirmek için.<pre>: Boşluğu korumak için (genellikle kod blokları) — metninizde girinti veya fazla boşluk kullanırsanız, tarayıcılar bunu görmezden gelir ve işlenmiş sayfanızda görmezsiniz. Ancak metni<pre></pre>etiketlerine sararsanız, boşluklarınız metin düzenleyicinizde gördüğünüzle aynı şekilde oluşturulur.<var>: Değişken adlarını özel olarak biçimlendirmek için.<kbd>: Bilgisayara girilen klavye girişini (ve diğer girişleri) biçimlendirmek için.<samp>: Bir bilgisayar programının çıktısını işaretlemek için.
Birkaç örneğe bakalım:
<pre><code>var para = document.querySelector('p');
para.onclick = function() {
alert('Owww, stop poking me!');
}</code></pre>
<p>You shouldn't use presentational elements like <code><font></code> and <code><center></code>.</p>
<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>Yukarıdaki kod şöyle görünecektir:
Zamanları ve tarihleri işaretleme
HTML aynı zamanda <time> ile zamanları ve tarihleri makine tarafından okunabilir bir biçimde gösterebilir. Örneğin:
<time datetime="2016-01-20">20 January 2016</time>
Bu neden yararlıdır? Aslında tarihleri yazmanın birçok farklı yolu bulunuyor. Yukarıdaki tarih şu şekillerde de yazılabilir:
- 20 Ocak 2016
- 20 Ocak 2016
- 20 Ocak 2016
- 20/01/16
- 01/20/16
- Önümüzdeki ayın 20’si
- 20e Ocak 2016
- 2016年1月20日
Ancak bu farklı formlar bilgisayarlar tarafından kolayca tanınamaz – ya bir sayfadaki tüm etkinliklerin tarihlerini otomatik olarak alıp bir takvime eklemek isterseniz? <time> öğesi bu nedenle, makine tarafından okunabilir zaman/tarih eklemek için kullanışlı olur.
Yukarıdaki temel örnek, yalnızca basit bir makine tarafından okunabilir tarih sağlar, ancak olası başka birçok seçenek de vardır, örneğin:
<!-- Standart-->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Sadece yıl ve ay-->
<time datetime="2016-01">January 2016</time>
<!-- Sadece ay ve gün-->
<time datetime="01-20">20 January</time>
<!-- Sadece saat, ve dakika -->
<time datetime="19:30">19:30</time>
<!-- Saniye ve milisaniyeler de gösterebilirsiniz! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Tarih ve zaman-->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Tarih ve zaman - ve zaman dilimleri -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Belirli bir haftayı gösterme -->
<time datetime="2016-W04">The fourth week of 2016</time>
Becerilerinizi test edin!
Bu makalenin sonuna geldiniz, ancak en önemli bilgiyi hatırlayabiliyor musunuz? Devam etmeden önce bu bilgileri hatırladığınızı doğrulamak için başka testler de deneyin.
Özet
HTML metin semantiği çalışmamızın sonuna geldik. Burada gördüklerinizin kapsamlı bir HTML metin öğeleri listesi olmadığını unutmayın – temelleri ve vahşi doğada göreceğiniz veya en azından ilginç bulabileceğiniz birkaç örneği ele almaya çalıştık.