HTML Dersleri 4 – İçerik 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 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>

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>

tt Etiket

< 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>

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>

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>

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>

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>

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 !

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim HTML Dersleri
Kategori Web Programlama
Ders Adeti 19 Ders
Dil Türkçe
Güncelleme 12/2020
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla