HTML Dersleri 4 – İçerik Etiketleri

html-icerik-etiketleri

Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Paragraf / Link / Görsel / Başlık Etiketleri adlı yazımızda  HTML için gerekli temel etiketlerin kullanımı öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 3 – Paragraf / Link / Görsel / Başlık Etiketleri linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML’de İçerik oluşturmak için gerekli içerik etiketleri  öğreneceğiz.

Geçen dersimizde, HTML‘de Temel Etiket yapılarını görmüştük, <p> etiketi ile paragraflar , <a> etiketi ile linkler , <img> etiketi ile resimler ve <h> etiketleri ile başlıklar oluşturmayı öğrenmiştik. Bu dersimizde ise sitemizde oluşturmak istediğimiz içerikleri nasıl biçimlendireceğimizi öğreneceğiz.

<em> ve <i> Etiketleri

<em> etiketi yazılarımızın italik (yatık şekilde) yazılmasında kullanılan etikettir. Yatık karakterlere italik denilmekte birlikte , italic kelimesinin baş harfini alan <i> etiketi de aynı işlevi görmektedir. Her ikisininde kullanımı doğrudur lakin sıklıkla <i> etiketi kullanılmaktadır.

İtalik Etiketi Örneği ;

<p>Normal Yazı.</p>
<p><i> i etiketi ile italik yazı.<i></p>
<p><em> em etiketi ile italik yazı.</em></p>

İtalik Etiketi Çıktısı ; 

Normal Yazı.
i etiketi ile italik yazı.
em etiketi ile italik yazı.

<strong> ve <b> Etiketleri

<strong> etiketi yazıların kalınlaştırılmasında kullanılır , gördüğünüz üzere sitemizde ki bir çok makalede kalın şekilde yazılmış kelimeler mevcuttur. Diğer bir alternatifi ise İngilizce’de Bold anlamına gelen kalın kelimesinin baş harfini alan <b> etiketidir. Her iki etikette aynı işlevi görüyor olup , yine sıklıkla <b> etiketi kullanılır.

Strong Etiketi Örneği;

<p>Normal Yazı.</p>
</p><strong>Kalın Yazı.</strong></p>
</p><b>Kalın Yazı.</b></p>

Strong Etiketi Çıktısı ;

Normal Yazı.
Kalın Yazı.
Kalın Yazı.

<s> ve <u> Etiketleri

<s> etiketi yazıların üstünü çizili hale getirmemizi sağlar , İngilizce’de Strike kelimesinin kısaltmasıdır , <strike> şekilde kullanımı da vardır. Ama HTML5 bu etiket yazımını desteklememektedir , onun yerine <del> etiketi kullanılır.

<u> etiketi yazıların altını çizmemizi sağlar , İngilizce’de ki underline kelimesinin kısaltmasıdır.

Strike ve Underline etiketi kullanımı  ;

<p>Normal Yazı.</p>
<p><s>Üzeri Çizili Yazı.</s></p>
<p><del>HTML5'in desteklediği üzeri çizili yazı.</del></p>
<p><strike>Artık kullanılmayan üzeri çizili yazı.</strike></p>
<p><u>Altı çizili yazı.</u></p>

Strike ve Underline etiketi çıktısı ;

Normal Yazı.
Üzeri Çizili Yazı.
HTML5’in desteklediği üzeri çizili yazı.
Artık kullanılmayan üzeri çizili yazı.
Altı çizili yazı.

<center> Etiketi

<center> etiketi yazılarımızı ortalamak için kullanılır , İngilizce’de Center dilimizde merkez anlamına gelmektedir. HTML5’de bu etiketi desteklemez , bu etiket yerine CSS kodları ile ortalamalar yaparız ilerleyen derslerimizde öğreneceğiz. Ama bazı tarayıcılar bu etiketi desteklerle o yüzden bilmekte fayda vardır.

Center Etiketi Örneği ; 

<p>Normal Yazı.</p>
<p><center>Ortalanmış Yazı.</center></p>

Center Etiketi Çıktısı ;
Normal Yazı.

Ortalanmış Yazı.

<sup> ve <sub> Etiketleri

Bilimsel makalelerde sıklıkla kullanılan bu etiketler , <sub> İngilizce’de subscript anlamına gelmekte olup yazıları altyazı şeklinde yazmamızı , <sup> etiketi ise superscript anlamına gelip yazıları üstyazı şeklinde yazmamızı sağlar.

Sup ve Sub etiketi Örneği ;

<p>Normal Yazı.</p>
<p>Bu yazının <sub>bu kısmı</sub> altyazı olarak yazıldı.</p>
<p>Bu yazının <sup>bu kısmı</sup> üstyazı olarak yazıldı.</p>

Sup ve Sub etiketi Çıktısı;

Normal Yazı.
Bu yazının bu kısmı altyazı olarak yazıldı.
Bu yazının bu kısmı üstyazı olarak yazıldı.

<big> ve <small> Etiketleri

<small> etiketi yazıları küçük yazmak için kullanılır , İngilizce’de Small kelimesinden gelmiş olup küçük anlamına gelmektedir. Çoğunlukla sitelerin alt kısmında ki telif hakkı kısmında kullanılır.

<big> etiketi yazıları büyük yazmak için kullanılır , İngilizce’de Big kelimesinden gelmiş olup anlamı büyüktür.

Small ve Big Etiketi Örneği ;

<p>Normal Yazı.</p>
<p><small>Küçük Yazı.</small></p>
<p><big>Büyük Yazı.</big></p>

Small ve Big Etiketi Çıktısı;

Normal Yazı.
Küçük Yazı.
Büyük Yazı.

<tt> Etiketi

<tt> etiketi daktilo tipinde yazı yazmamızı sağlar , İngilizce’de Teletype kelimesinin kısaltmasıdır.

Teletype Etiketi Örneği ;

<p>Normal Yazı.</p>
<p><tt>Daktilo tipinde yazı.</tt></p>

Teletype Etiketi Çıktısı;

Normal Yazı.
Daktilo tipinde yazı.

<hr /> ve <br /> Etiketleri

Önceki dersimizde , <img> etiketi ile ilgili “boş etiket” sıfatını kullanmıştık , <br> ve <hr> etiketleri de bu sınıfa dahildir. Her zaman tek etiket şeklinde yazılırlar ( <br /> , <hr /> ) .

<br /> etiketi satır boşluğu oluşturmak için kullanılır , İngilizce’de Line Break cümlesinin kısaltmasıdır ve satır boşluğu anlamına gelir.

<hr /> etiketi ise bir satır yatay çizgi oluşturmak için kullanılır. İngilizce’de horizontal rule cümlesinin kısaltması olup yatay cetvel anlamına gelmektedir.

Hr ve Br etiketi Örneği ; 

<p>Normal Yazı.</p>
<p>İlk satır<br />ikinci satır.</p>
<hr>
<p>Normal Yazı.</p>
<p>İlk satır <br /><br />iki satırlık boşluk bırakıldı.</p>

Hr ve Br etiketi Çıktısı ;

Normal Yazı.

İlk satır
ikinci satır.


Normal Yazı.

İlk satır

iki satırlık boşluk bırakıldı.

<cite> ve <abbr> Etiketleri

<cite> etiketi alıntı metinler eklemek için kullanılır , İngilizce’de Cite kelimesinden gelmektedir.

<abbr> etiketi kısaltma kullanmamıza yarar , İngilizce’de abbreviation kelimesinin kısaltmasıdır. <abbr> etiketini kullanırken title parametresi kullanılır. Title parametresinin içerisine kısaltmanın orjinal hali yazılır ve imleç ile kısaltmanın üzerine geldiğimizde orjinal hali ipucu şeklinde görülür.

Cite ve Abbr Etiketi Örneği ;

<p>Normal Yazı.</p>
<p><cite>"Her zaman millet hükümetin bekçisi olmalıdır."</cite></p>
<p><abbr title="Türkiye Büyük Millet Meclisi">TBMM</abbr> 23 Nisan 1920 tarihinde kuruldu.</p>

Cite ve Abbr Etiketi Çıktısı;

Normal Yazı.
“Her zaman millet hükümetin bekçisi olmalıdır.”
TBMM 23 Nisan 1920 tarihinde kuruldu.

<dl>, <dt> ve <dd> Etiketleri

<dl> etiketi tanım listeleri oluşturmak için kullanılır , İngilizce’de definition  list cümlesinin kısaltmasıdır tanım listesi anlamına gelmektedir.

<dt> etiketi tanım listesinin elemanlarını oluşturmak için kullanılır , İngilizce’de definition item cümlesinin kısaltmasıdır.

<dd> etiketi ise tanım liste elemanlarını tanımlar.

Bu kodların hiyerarşik sırası şu şekildedir. <dl> -> <dt> -> <dd>

Dl , Dt ve Dd Etiketi Örneği ;

<dl>
    <dt>Meyve Çeşitleri</dt>
    <dd>Ayva</dd>
    <dd>Elma</dd>
    <dd>Armut</dd>
    <br />
    <dt>Sebze Türleri</dt>
    <dd>Patlıcan</dd>
    <dd>Kabak</dd>
    <dd>Pırasa</dd>
</dl>

Dl , Dt ve Dd Etiketi Çıktısı;

dl-dt-dd-etiketi

<ol>, <ul> ve <li> Etiketleri

Yazılarımızda liste şeklinde içerikler üretmek için bu etiketler kullanılır.

<ol> etiketi sıralı liste oluşturmamızı sağlar ve İngilizce’de ordered list cümlesinin kısaltmasıdır sıralı liste anlamına gelmektedir.

<ul> etiketi ise sırasız liste oluşturmamızı sağlar ve İngilizce’de unordered list cümlesinin kısaltmasıdır , sırasız liste anlamına gelmektedir.

<li> etiketi ile bu liste türlerinin içerisine elemanlar eklemek için kullanılır.

Web sitesi yaparken sıklıkla kullanacağınız bu etiketler , sitelerin menülerinin ve yan barlarda ki listelerinin yapımında sıklıkla kullanılır.

Ol , Ul , Li etiketi Örneği ;

<ul>
    <li>PHP</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>
<ol>
    <li>Kendine inan.</li>
    <li>Sınırlarını zorla.</li>
    <li>Hevesli ol.</li>
    <li>Kodlama öğren.</li>
</ol>

Ol , Ul , Li etiketi Çıktısı ;

  • PHP
  • HTML
  • CSS
  • Javascript
  1. Kendine inan.
  2. Sınırlarını zorla.
  3. Hevesli ol.
  4. Kodlama öğren.

Tebrikler! Bu derste  HTML’de İçerik Etiketlerini öğrendiniz. Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.

HTML Derslerinin dördüncü kısmı olan dersimizde , HTML’de  İçerik Etiketlerinin kullanımı gibi konuları öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !

Test’e katıl öğrendiklerini pekiştir !

TESTE BAŞLAMAK İÇİN TIKLAYINIZ!

Bir sonraki derse  “HTML Dersleri 5 – Belge Tipi Bildirimi (DOCTYPE)” geçmek için tıklayınız !

Beğendiysen makaleyi paylaşarak destek olabilirsiniz!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir