Arkadaşlar merhaba,
Bu derste HTML5 ile metin biçimlendirme/içerik şekillendirme/text formatting olarak tanımlanan metin üzerinde düzenleme özellikleri hakkında bilgi vermeye çalışıp, basit bir uygulama yapılacaktır.
İlk derste de bahsetmiştim, HTML5 ile bazı elementler artık desteklenmiyor. Bunlar içerisinde konumuzu ilgilendiren elementler/etiketler de mevcut.
Aşağıdaki tabloda bu hususta gösterim yapılmış ve desteklenmeyen özelliğin yerine kullanılan özellikler verilmiştir.
METİN ŞEKİLLENDİRME (TEXT FORMATTİNG)
Bu yazımız diğerlerine nispet ile daha kısa olacaktır. Özet ile ve resimle ile anlatmaya gayret ettim.
Yukarıdaki tabloda kullanılan etiketler ile web site içerisindeki metinlere biçimlendirme yapılabilmektedir.
Şimdi bu elementlerin nasıl çalıştığını, hepsini bir arada kullanacağımız bir alıştırma ile, kodun çıktısını görerek inceleyelim.
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 metin içerik şekillendirme.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<b>Bold'un kısaltılışı. Metni koyulaştırır.</b><br/><hr/>
<strong>Güçtü metin yazım formatı.Bold etiketine benzer. </strong><hr/>
<i>İtalik yazım formatı.</i><br/><hr/>
<em>İtalik yazım formatı.</em><br/><hr/>
<small>Küçük metin yazılır.</small><br/><hr/>
<p>Bu etiket <sub>alt indis</sub> yazımını sağlar.</p><hr/>
<p>Bu etiket <sup>üst indis</sup> yazımını sağlar.</p><hr/>
<ins>Bu etiket metnin altını çizer.</ins><br/><hr/>
<del>Bu etiket metnin üstünü çizer.</del><hr/>
</br>
<code>
$degisken=53;
if(degisken==53)
{
echo "Rize'nin plaka kodu";
}
</code><hr/>
<pre>Metnin biçimlendirilmiş olduğunu belirtir. Düzenlenmiş yazı ?()!</pre><hr/>
<blockquote>
Uzun yazılar için kendine has bir yazım formatı oluşturur.</br>
Örneğin; bir makale paylaşımı yaparken, yazı içinde belli olacak şekilde </br>
uzun bir yazıyı alıntılayabilir ve dikkat çekmesini sağlayabilirsiniz.
</blockquote><hr/>
<p>Paylaşılan cümle veya kelimenin <mark>renklendirirerek vurgulanması </mark>sağlayabilirsiniz.</p><hr/>
<address>
Yenidoğan/Sancaktepe/İstanbul<br/>
</address><br/><hr/>
<q>Bizi takibe devam !</q>
</body>
</html>
Geniş bir kod bloğu yazdık , şimdi de sonucunu görelim.
Kod Çıktısı:
3.yazımız da burada nihayete ermiştir.
Bir sonraki yazıda görüşmek üzere.
Not : Eksik kaldığımız ve tamamlamak istediğiniz yerler için lütfen irtibata geçiniz, katkınız olsun !
Selamet ile.
