HTML Dersleri 5 İçerik Biçimlendirme

İÇERİK BİÇİMLENDİRME

Bu dersimizde yazdığımız bir içeriği nasıl biçimlendirebileceğimizi ve biçimlendirmede kullandığımız etiketleri öğreneceğiz. Metin biçimlendirme etiketleri kalın, italik, eğik şekilde yazmayı ve üst indis, alt indis gibi matematik ve fen alanlarında kullanılan çeşitli formülleri yazmanızı sağlayan etiketlerdir. Biçimlendirme etiketleri, Microsoft Word gibi kelime işlemci yazılımında yapılan biçimlendirmeleri HTML ile yapmamızı sağlar. Metin biçimlendirme etiketlerini üç başlık altında anlatacağım. Bu elementler aşağıdaki tabloda belirtilmiştir.

METİN BİÇİMLENDİRME ETİKETLERİ
ELEMENT AÇIKLAMA
<b> Koyu metin
<strong> Güçlü metin
<em> Vurgulanmış metin
<i> İtalik metin
<sub> Alt indis metni
<sup> Üst indis metni
<small> Küçük metin
<big> Büyük metin
<ins> Altı çizili metin
<del> Üstü çizili metin
<br /> Satır oluşturur..
<hr /> Yatay çizgi oluşturur.
<center> Metni ortalamayı sağlar. Fakat bunun yerine styles kullanınız.
<s> Üzeri çizili metin yazar. Fakat bunun yerine <del> kullanınız.
<strike> Üzeri çizili metin yazar. Fakat bunun yerine <del> kullanınız.
<u> Altı çizili metin yazar. Fakat bunun yerine styles kullanınız.
PROGRAMLAMA DİLLERİ ETİKETLERİ
ELEMENT AÇIKLAMA
<code> Programlama dili metini
<kbd> DOS (klavye) metni
<samp> Örnek bilgisayar kodu metini
<tt> Tele tip metin
<var> Değişken
<pre> Biçimlendirilmemiş metin.
<listing> Önemsiz etiket, bunun yerine <pre> kullanınız.
<plaintext> Önemsiz etiket, bunun yerine <pre> kullanınız.
<xmp> Önemsiz etiket, bunun yerine <pre> kullanınız.
ALINTILAR VE AÇIKLAMALARLA İLGİLİ ETİKETLER
ELEMENT AÇIKLAMA
<abbr> Kısaltma
<acronym> Baş harfleri ile kısaltma
<address> Adres öğesi
<bdo> Metin yönü
<blockquote> Uzun alıntı
<q> Kısa alıntı
<cite> Alıntı
<dfn> Tanımlama terimi

METİN BİÇİMLENDİRME ETİKETLERİ

<strong> ve <b> 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 <b> etiketini kullanalım.

Şimdi aşağıdaki kodu inceleyelim:

Çıktısına bakalım…

Şimdi de <b> etiketi ile deneyelim…

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

Gördüğünüz gibi arada bir fark yok. Her iki etikete ait yazıma beraber bakalım:

<b> Elementi Kullanımı <strong> Elementi Kullanımı

Şöyle bir soru soruyor olabilirsiniz. Her iki etikette yazımızı kalın yapıyor. Buna ne gerek var?

<b> ve <strong> elementleri, okuyucu için sayfayı tarayıcıda görsel olarak izlerken herhangi bir farklılık yaratmaz, ikisi de sonuçta yazının kalın görünmesini sağlar. Ayrıldıkları nokta şudur: <b> takısı sadece yazının stilini değiştirir. <strong> takısı ise, yazının stilini değiştirmekle kalmayıp, ona önem katar. Arama motorları sayfayı indekslerken <strong> takıları arasındaki kelimelerin, diğer kelimeler ile karşılaştırıldığında daha önemli olduğunu var sayar. Aynı şekilde, sayfayı bir okuma yazılımına okutursanız, <strong> takıları arasındaki kelimeleri daha yüksek sesle okur. Diğer yandan <b> takısının böyle bir işlevi yoktur, tek yaptığı yazıyı kalın göstermedir ve css ile biçimlendirilmesine imkan sağlar.

<em> ve <i> 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 italik kelimesinin kısaltması olan <i> etiketidir.

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

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

<em> Elementi Kullanımı <i> Elementi Kullanımı

Bir örnek daha yapalım.

Bu örneğimize ait çıktı ise şu şekilde olacaktır…

<em> Elementi Kullanımı

<i> ve <em> elementleri arasındaki fark <b> ve <strong> elementleri arasındaki fark ile aynıdır.

<sub> ve <sup> Etiketi

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

Örneğimizi inceleyelim…

Çıktısı ise…

<sub> ve <sup> Elementi Kullanımı
<s>, <u>, <strike> ve <del> 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. Yine de birçok tarayıcı hâlâ bu etiketi desteklemektedir. 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…

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

<s>, <u>, <strike> ve <del> Elementi Kullanımı
<small> ve <big> Etiketi

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…

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

<small> ve <big> Elementi Kullanımı
<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…

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

<center> Elementi Kullanımı

center etiketini p elementi ile align özelliğini tanımlayarak aşağıdaki gibi kullanmamız daha iyi olacaktır.

 <br /> ve <hr /> Etiketi

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

Çıktısına bakalım…

<br /> ve <hr /> Elementi Kullanımı
<hr /> ETİKETİNİN ALDIĞI ÖZELLİKLER
ÖZELLİK AÇIKLAMA
align Çizginin sayfadaki konumunu belirler.
size Piksel olarak çizgi kalınlığını belirler. Varsayılan değer 2px’ dir.
width Çizginin boyutunu belirler. Varsayılan değer %100′ dür.
color Çizginin rengini belirler.
noshade Gölgeli olmayan çizgi

Paragraf ile satır etiketi arasındaki farkı görelim.

Bunu bir örnek ile açıklayalım.

Çıktısına bakalım…

<br /> ve <p> Elementi Arasındaki Fark

<br /> ile <p> etiketi arasındaki en bariz fark aralarındaki boşluktan ibaret… <p> komutunda paragraf boşluğu oluşurken <br />komutunda satır boşluğu oluşmaktadır.

<ins> Etiketi

Bu etiketimiz geçerliliğini yitiren bir değerin yeni bir değer ile güncellenmesini sağlar.

Aşağıdaki örnek <p> etiketi ile oluşturulan bir paragraf içinde geçerliliğini yitiren bir değerin <del> etiketi ile silinmesini, <ins> etiketi ile yeni değerin eklenmesini göstermektedir. Ayrıca, yeni eklenen metnin eklenme tarihi datetime, ilgili sitenin adresi cite ve ekleme ile ilgili kısa not title özellikleri ile belirtilmiştir.

Bu etikete ait ekran çıktısı şu şekildedir.

<ins> Elementi Kullanımı
<nobr> Etiketi

Ekran çözünürlüğüne bağlı olarak içeriğin yatayda kaydırılmasını engeller. İçerik tek satırda görüntülenir.

ÖRNEK:

<p> elementi ile şu şekilde gözükür:

Bu koda ait ekran çıktısı şu şekilde olacaktır.

Görüldüğü gibi cümle sonunda alt satıra geçiyor. Aynı işlemi <nobr> etiketi ile yapalım.

Ekran çıktısı şu şekilde olacaktır:

Yazdığım 3 cümle tek satır halinde ekrana yazdırıldı ve oluşan scroolbar sayesinde cümlenin ekrana sığmayan tarafını okuyabiliyoruz.

PROGRAMLAMA DİLLERİ ETİKETLERİ

 <kbd> Etiketi

Bir çoğumuz eskiden kullandığımız DOS ekranına aşinayız. HTML <kbd> etiketi, içerdiği metnin DOS ekranındaki gibi sabit genişlikte gösterileceğini belirtir.

Aşağıdaki örnek, HTML kbd etiketinin kullanımını göstermektedir.

Ve çıktımıza bakalım.

<kbd> Elementi Kullanımı
<tt> Etiketi

İngilizce’ de teletype kelimesinin kısaltması olan <tt> etiketi daktilo tipi yazılar yazmamızı sağlar.<tt>…</tt> etiketleri arasındaki tüm metinler eş aralıklı font ile görüntülenir. Eş aralıklı fontlar daktilo harflerinde olduğu gibi her harfin aynı genişliğe sahip olduğu font çeşididir.

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

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

<tt> Elementi Kullanımı
<samp> Etiketi

HTML <samp> etiketi, içerdiği metnin bir programın, betiğin (script) veya kodun çalıştırılması sonucu elde edilen çıktı olduğunu belirtir.

ÖRNEK :

Aşağıdaki örnek, HTML samp etiketi ile bir tarayıcı (browser) uyarısının belirtilmesini göstermektedir.

Ekran çıktısı;

<samp> Elementi Kullanımı
<var> Etiketi

HTML <var> (variable) etiketi, içerdiği metnin bir program argümanı veya değişkeni olduğunu belirtir. varetiketinin içerdiği metni tarayıcılar, genelde italik göstermesine karşın farklılık gösterebilir.

ÖRNEK :

Ekran çıktısı:

<var> Elementi Kullanımı
<listing>, <xmp> ve <plaintext> Etiketi

Bu etiket metinleri yazıldığı şekli ile görüntülememizi sağlar. Her üç elementte aynı şekilde kullanılır. Fakat bu elementler HTML’ in ilerleyen versiyonlarında desteklenmeyebilir. Zaten kullanımı azalmıştır. Bu elementlerin yerine şu anda pre elementi kullanılmaktadır.

Kullanımı şu şekildedir.

Ekran çıktısı ise;

<listing>, <xmp> ve <plaintext> Elementi Kullanımı

<code> Elementi

HTML <code> etiketi, içerdiği metnin bilgisayar kod parçası olduğunu belirtir. <p> etiketi gibi metin bloklarının içinde kullanılması durumunda blok ile uyumlu gösterilerek, metni kesintiye uğratmaz. İçerdiği metin sabit genişlikli yazı tipi ile gösterilir.

Aşağıdaki örnek, HTML code etiketi kullanılarak <p> etiketi ile oluşturulan bir paragraf içinde, metin bloğunu kesintiye uğratmadan bir fonksiyon adının kod olarak belirtilmesini göstermektedir.

Ekran görüntüsü ise şu şekildedir:

<pre> Elementi

Bu etiketin içine yazdığımız metinlerin içeriğinde beyaz boşluk olarak ifade edilen, boşluk, sekme (tab) ve satır sonu gibi karakterlerin korunarak, karakterlerin sabit genişlikte gösterilmesini sağlar.

Tarayıcı, diğer etiketlerin içeriğini yorumlarken beyaz boşlukların miktarını ya 1’e indirir ya da temizler. Fakat pre etiketi içeriğindeki beyaz boşlukları gözardı ederek tekrar düzenlemez.

Aşağıdaki örnekte normal yazı ve pre kullanımını görebilirsiniz:

Ekran görüntüsü ise şu şekildedir:

 

ALINTILAR VE AÇIKLAMALAR İLE İLGİLİ ETİKETLER

<q> Etiketi

HTML <Q> etiketi, içerdiği metnin tırnak işaretleri (“”) arasında gösterilerek, kısa bir alıntı olduğunun belirtilmesini sağlar. Internet Explorer 8, tırnak işaretleri veya « ile » işaretleri arasında gösterir fakat, önceki sürümlerinde herhangi bir işaret kullanılmamaktadır.

« : Sol guillemet (Sol köşeli çift tırnak)
» : Sağ guillemet (Sağ köşeli çift tırnak)

ÖRNEK:

Aşağıdaki örnek, HTML Q etiketi ile Atatürk’ün bir sözünün alıntı yapılmasını göstermektedir.

Ekran çıktısı :

<q> Elementi Kullanımı
<dfn> Etiketi

HTML <dfn> etiketi, içerdiği metnin bir terimin tanımı/açıklaması olduğunun belirtilmesini sağlar.

Aşağıdaki örnek, paragraf içindeki bir metnin HTML dfn etiketi ile bir tanımlama olduğunun belirtilmesini göstermektedir.

Ekran çıktısı şu şekildedir:

<dfn> Elementi Kullanımı

<cite> ve <abbr> Etiketi

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…

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

<cite> ve <abbr> Elementi Kullanımı
<acronym> Etiketi

HTML <acronym> etiketi, içerdiği kelimenin, bir kelime grubunun baş harflerinden oluşan bir kısaltma olduğunu belirtir. Bununla birlikte <acronym> etiketine HTML 5‘te hiç yer verilmediği için her türlü kısaltmayı <abbr> etiketi ile tanımlamak alışkanlık açısından faydalı olacaktır.

ÖRNEK :

Aşağıdaki örnek, HTML acronym etiketi ile özel isimlerin baş harflerinden oluşan kısaltma tanımlanmasını göstermektedir.

Ekran çıktısı aşağıdaki gibidir.

<acronym> Elementi Kullanımı
<address> Etiketi

<address> etiketi sayfa ya da site sahibi hakkında iletişim bilgilerini içermek için kullanılan bir etikettir. Eğer <body> etiketi içerisinde yazarsak sayfa sahibi hakkında iletişim bilgileri içermelidir. <address> etiketi içindeki bilgiler italik gösterilir. <address> etiketi sitemizin footer kısmı olarak tabir edilen site bilgilerinin olduğu kısımda <small> etiketi ile birlikte kullanılırsa en uygun yazım biçimini elde etmiş oluruz. <article> etiketi içerisinde yazarsak ise yazdığımız makale hakkında iletişim bilgileri içermelidir. <article> ve <footer> etiketini size daha öğretmediğim için şimdilik bu konuda takılmanıza gerek yok. 

Örneğimizi inceleyelim…

Çıktımıza bakalım…

<address> Elementi Kullanımı
<bdo> Etiketi

HTML <bdo> etiketi, sayfa yorumlanırken içerdiği metnin yönünün yönlendirme algoritmasından hariç tutularak dir özelliği ile belirtilen yönde gösterilmesini sağlar.

ÖRNEK :

Aşağıdaki örnek, sağdan-sola yazılan Arapça bir metin içindeki Türkiye yazısının HTML bdo etiketi kullanılarak soldan-sağa olması gerektiğinin belirtilmesini göstermektedir.

Ekran çıktısı şu şekildedir.

<bdo> Elementi Kullanımı
<blockquote> Etiketi

HTML <blockquote> etiketi, içerdiği metnin geniş bir alıntı içeriği olduğunu belirtir. <blockquote> etiketinin içeriği blok olarak gösterilir.

ÖRNEK :

Aşağıdaki örnek, HTML blockquote etiketi ile alıntı yapılmasını göstermektedir.

Ekran çıktısı şu şekildedir.

<blockquote> Elementi Kullanımı
Evet böylelikle HTML derslerinde 5. dersimizi de bitirmiş olduk.  Umarım faydalı bir ders olmuştur. HTML içerik biçimlendirme elementlerini öğrenmiş olduk. Herhangi bir eksiklik varsa veya derslerden memnun kaldıysanız değerli yorumlarınızı yazarsanız sevinirim.

Bir sonraki dersimizde HTML tablolar konusunu işleyeceğiz.  Bir sonraki dersimizde görüşmek üzere…

About egitimkanalim.com

Bir Cevap Yazın

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