İçerik Biçimlendirme HTML

[DumanInc]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

İç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:​

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

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

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

Bu metin normal yazıldı.
Bu metin kalın yazıldı.
Şimdi de <b> etiketi ile deniyelim...​

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

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

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

Bu metin normal yazıldı.
Bu metin kalın yazıldı.
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...

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

1 2 3

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

Bu metin normal yazıldı.
Bu metin yatık yazıldı.
Bu metin de yatık yazıldı.​

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

1 2 3

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

Bu metin normal yazıldı.
Bu metnin bu kısmı altta yazıldı.
Bu metnin bu kısmı üstte yazıldı.​

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

1 2 3 4 5

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

Bu metin normal yazıldı.
Bu metin üzeri çizili yazıldı.
Bu metin de üzeri çizili yazıldı.
Bu metin de üzeri çizili yazıldı. Fakat kodu yanlış.
Bu metin altı çizili yazıldı.​

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

1 2 3

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

Bu metin normal yazıldı.
Bu metin küçük yazıldı.
Bu metin büyük yazıldı.​

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

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

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

Bu metin normal yazıldı.
​

Bu metin ortalandı.

​

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

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

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

Bu metin normal yazıldı.
Bu metin daktilo tipinde yazıldı.
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...​

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

1 2 3

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

Bu metin normal yazıldı.
"Bu metin alıntı şeklinde yazıldı."
TBMM 23 Nisan 1920 tarihinde kuruldu.​

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

1 2 3 4 5

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

Bu metin normal yazıldı.
Bu metin
iki satırda yazıldı.​

---

Bu metin normal yazıldı.
Bu metin

üç satırda yazıldı.​

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

1 2 3 4 5 6 7 8 9 10 11 12

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

• Çiçek
• Böcek
• Kuş
• Balık

1. Toplama
2. Çıkarma
3. Çarpma
4. Bölme

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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

1 2 3 4 5 6 7 8 9 10 11

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

 

[ByESiNTi]

Eline sağlık Paylaşım için teşekkürler.

 

[DumanInc]

Eline sağlık Paylaşım için teşekkürler.

Rica Ederim

 

[Replicant]

Paylaşım için teşekkürler.

 

[DumanInc]

Paylaşım için teşekkürler.

Rica Ederim