İçerik Biçimlendirme

Bu dersimizde yazdığımız bir içeriği nasıl biçimlendirebileceğimizi ve biçimlendirmede kullandığımız etiketleri öğreneceğiz.

<strong> etiketi

<strong> etiketi yazdığımız yazıları kalınlaştırmak için kullanılır. Alternatifi bold kelimesinin kısaltması olan <b> etiketidir. Biz yine de <strong> etiketini kullanalım.

Şimdi aşağıdaki kodu inceleyelim:

<p>Bu metin normal yazıldı.</p>
<p>Bu metin kalın yazıldı.</p>
    

Çıktısına bakalım...

Şimdi de <b> etiketi ile deniyelim...

<p>Bu metin normal yazıldı.</p>
<p><b>Bu metin kalın yazıldı.</b></p>
    

Ve çıktısına bakalım...

Gördüğünüz gibi arada bir fark yok.

<em> etiketi

<em> etiketi yazdığımız yazıları yatıklaştırmak için yani yazılarımızı italik hâle getirmek için kullanılır. Alternatifi italic kelimesinin kısaltması olan <i> etiketidir.

Aşağıdaki örneğimize bakalım...

<p>Bu metin normal yazıldı.</p>
<p><em>Bu metin yatık yazıldı.</em></p>
<p><i>Bu metin de yatık yazıldı.</i></p>
    

Çıktısı ise şu şekilde olacaktır...

<sub> ve <sup> etiketleri

İngilizce subscript ve superscript kelimelerinin kısatlmaları olan sub ve sup dilimizde altyazı ve üstyazı gibi bir anlama gelmektedir. Adından da anlaşılacağı gibi yazıları altyazı ve üstyazı hâline getirmeye yarar. Bilimsel makaleler dışında çok sık kullanılmaz.

Örneğimizi inceleyelim...

<p>Bu metin normal yazıldı.</p>
<p>Bu metnin <sub>bu kısmı</sub> altta yazıldı.</p>
<p>Bu metnin <sup>bu kısmı</sup> üstte yazıldı.</p>
    

Çıktısı ise...

<s> ve <u> etiketleri

<s> etiketi İngilizce'de strike kelimesinin kısaltmasıdır. Yazıların üzerini çizmeye yarar. <strike> şeklinde de yazılır; fakat HTML5 bu yazım formatını desteklemez. Bunun yerine <del> etiketini kullanmalısınız.

<u> etiketi İngilizce'de underline kelimesinin kısaltmasıdır. Yazıların altını çizmeye yarar.

Aşağıdaki örneğimizi inceleyelim...

<p>Bu metin normal yazıldı.</p>
<p><s>Bu metin üzeri çizili yazıldı.</s></p>
<p><del>Bu metin de üzeri çizili yazıldı.</del></p>
<p><strike>Bu metin de üzeri çizili yazıldı. Fakat kodu yanlış.</strike></p>
<p><u>Bu metin altı çizili yazıldı.</u></p>
    

Çıktısı şu şekilde olacaktır...

<small> ve <big> etiketleri

Small ve big dilimizde küçük ve büyük anlamındadır. <small> ve <big> etiketleri sırasıyla yazıları küçük ve büyük yazmaya yarar. <small> etiketi çoğu zaman sitelerin copyright yani telif hakkı kısmındaki metinde kullanılır.

Örneğimizi inceleyelim...

<p>Bu metin normal yazıldı.</p>
<p><small>Bu metin küçük yazıldı.</small></p>
<p><big>Bu metin büyük yazıldı.</big></p>
    

Çıktısı şu şekilde olacaktır...

<center> etiketi

Center dilimizde merkez anlamına gelmektedir. <center> etiketi yazıları ortalamak için kullanılır. HTML5 bu etiketi desteklemez. Bunun yerine CSS kodları tercih edilir. Yine de birçok tarayıcı hâlâ bu etiketi desteklemektedir.

Örneğimizi inceleyelim...

<p>Bu metin normal yazıldı.</p>
<p><center>Bu metin ortalandı.</center></p>
    

Çıktısı ise şu şekilde olacaktır...

<tt> etiketi

İngilizce'de teletype kelimesinin kısaltması olan <tt> etiketi daktilo tipi yazılar yazmamızı sağlar.

Aşağıdaki örneği inceleyelim...

<p>Bu metin normal yazıldı.</p>
<p><tt>Bu metin daktilo tipinde yazıldı.</tt></p>
    

Çıktısı şu şekilde olacaktır...

Pek bir fark gibi gözüküyor; fakat başka bir font kullandığınızda farkı anlayacaksınız.

<cite> ve <abbr> etiketleri

Cite dilimizde alıntı anlamına gelmektedir. <cite> etiketi ise alıntı yaptığımızda kullanılır. <abbr> etiketi ise dilimizde "kısaltma" anlamına gelen İngilizce'deki abbreviation kelimesinin kısaltmasıdır. <abbr> ise kısaltma şeklinde yazılan bir kelimenin tanımını verir. title atıfı yardımı ile yazılır. Fare imleci ile kısaltılmış kelimenin üzerine gelince tanım ortaya çıkar.

Aşağıdaki örnekleri inceleyelim...

<p>Bu metin normal yazıldı.</p>
<p><cite>"Bu metin alıntı şeklinde yazıldı."</cite></p>
<p><abbr title="Türkiye Büyük Millet Meclisi">TBMM</abbr> 23 Nisan 1920 tarihinde kuruldu.</p>
    

Çıktılarını inceleyelim. TBMM'nin üzerine fare imleciniz ile geliniz ve tanım açıklamasını okuyunuz.

<br /> ve <hr /> etiketleri

<img /> etiketi gibi <br /> ve <hr /> etiketleri de "boş etiket" sınıfındadır. Daima bu şekilde yazılırlar. <br /> etiketi dilimizde "satır boşluğu" anlamına gelen line break sözüne ithaf eder. Bir satırlık boşluk oluşturmak için kullanılır. <hr /> etiketi ise dilimizde "yatay cetvel" anlamına gelen horizontal rule kelimelerinin kısaltmasıdır. Bir satırlık yatay bir çizgi oluşturmaya yarar.

Şimdi aşağıdaki örneğimizi inceleyelim...

<p>Bu metin normal yazıldı.</p>
<p>Bu metin<br />iki satırda yazıldı.</p>
<hr>
<p>Bu metin normal yazıldı.</p>
<p>Bu metin<br /><br />üç satırda yazıldı.</p>
    

Çıktısına bakalım...

<ol>, <ul> ve <li> etiketleri

Bu etiketler liste oluşturmak için kullanılır. <ol> dilimizde "sıralı liste" anlamına gelen ordered list kelimelerinin kısaltmasıdır. Sıralı liste oluşturmamıza yarar. <ul> ise dilimizde "sırasız liste" anlamındaki unordered list kelimelerinin kısaltmasıdır. Sırasız liste oluşturmamızı sağlar. <li> ise "liste elemanı"nın kısaltması olan list item kelimelerinin baş harflerini simgeler. Sıralı ya da sırasız listelerdeki elemanları <li> etiketinin içine yazarız. <ul> ve <li> etiketleri sıklıklıkla sitelerin menüleri oluşturulurken kullanılır.

Şimdi örnek kodumuza bakalım...

<ul>
    <li>Çiçek</li>
    <li>Böcek</li>
    <li>Kuş</li>
    <li>Balık</li>
</ul>
<ol>
    <li>Toplama</li>
    <li>Çıkarma</li>
    <li>Çarpma</li>
    <li>Bölme</li>
</ol>
    

Çıktımız ise şu şekilde olacaktır...

<dl>, <dt> ve <dd> etiketleri

<dl> etiketi İngilizce'deki definition list kelimelerinin kısaltmasıdır. Dilimizde "tanımlama listesi" gibi bir anlama denk gelmektedir. Tanım listeleri oluşturmak için kullanılır. <dt> (definition item) etiketi tanım listesinin elemanlarını belirtirken; <dd> (definition description) etiketi ise liste elemanlarını tanımlar.

Örneğimizi inceleyelim...

<dl>
    <dt>Kahve Türleri</dt>
    <dd>Kolombiya</dd>
    <dd>Kenya</dd>
    <dd>Brezilya</dd>
    <br />
    <dt>Çay Türleri</dt>
    <dd>Türk çayı</dd>
    <dd>Seylon çayı</dd>
    <dd>İngiliz çayı</dd>
</dl>
    

Çıktımıza bakalım...

Bu dersi burada bitiriyorum arkadaşlar. Umarım faydalı olmuştur. Öğrendiklerinizi Notepad++'ı kullanarak tekrar etmeyi unutmayın. Ne kadar çok kod yazarsanız o kadar kolay öğrenirsiniz.

Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.