Yazar: merhaba arkadaşlar.
yeni bir html yazısı ile sizlerleyim.
bu yazımda html biçimlendirme konusuna değineceğim.
bu yazımda tüm metin biçimlendirme etiketlerine değineceğim.
bu konu oldukça önemli ve uzun olacak. biran önce başlayalım.
html metin biçimlendirme etiketleri <body etiketleri içerisinde yer alırlar.
bir web sayfasının görünen kısmı body etiketi içerisinde yer alırlar, yazmış olduğumuz metnin düzgün bir biçimde yer almasını sağlayan etiketlerin tümüne metin biçimlendirme etiketleri adını vermekteyiz.
ilk ele alacağımız etiketimiz;
<h1>… </h1>
bu etiketimiz metni büyükten küçüğe doğru başlıklar halinde bölmemize yarayan bir etikettir.
birden altıya kadar değerler alırlar.
başlığımızı sağa, sola ve ortaya alabiliriz.
align parametresi içerisinde belirtiriz.
örnek kullanımı şu şekilde olmalıdır.
<html>
<head>
<title> metin başlıkları </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<h1> büyük bir başlık </h1>
<h2> daha küçük bir başlık </h2>
<h3> daha küçük başlık </h3>
<h4> küçük bir başlık </h4>
<h5> küçük bir başlık </h5>
<h6> en küçük başlık </h6>
</body>
</html>
yukarıda metin başlıklarını büyükten küçüğe yazmış olduk.
şimdide bir örnek yapalım bu örneğimizde başlıkları align parametresi ile kullanalım.
<html>
<head>
<title> metin başlıkları </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<h1 align=”center”> ortalanmış bir başlık </h1>
<h1 align=”left”> sola yaslanmış bir başlık </h1>
<h1 align=”right”> sağa yaslanmış bir başlık </h1>
</body>
</html>
yukarıdaki örnekte ise align parametresi ile başlıkları ortaladık, sola ve sağa yasladık.
bir web sayfasında uzun yazılarımız olabilir ve yazılarımızı paragraf halinde yazmak okunabilirliği artıracaktır.
<p> … </p>
<p> etiketi ile html’de paragraf kullanabiliriz.
metin başlıklarında olduğu gibi align parametresi ile paragrafımızı ortalayabilir, sola ve sağa yaslayabiliriz.
<p align=”center”>
<p align=”left>
<p align=”right”>
şimdi küçük bir örnek yaparak konuyu pekiştirelim.
<html>
<head>
<title> html de paragraf </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<p>
bu bir html konusudur. bu yazımızda html metin biçimlendirme konusunu işlemekteyiz. </p>
</body>
</html>
yukarıdaki örnekte küçük bir yazı ile paragraf mantığını sizlere anlatmaya çalıştım.
şimdide aynı örneğimiz üzerinde align parametremizi kullanarak metnimizi hizalayalım.
<html>
<head>
<title> html de paragraf </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<p align=”center”>
yazmış olduğumuz bu yazı sayfamızda ortalanmıştır.
</p>
<p align=”left”>
yazmış olduğumuz bu yazı sola hizalanmıştır.
</p>
<p align=”right”>
yazmış olduğumuz yazımız sağa hizalanmıştır.
</p>
</body>
</html>
bu örneğimizde tüm hizalama özellikleri kullanılmıştır. paragrafımızı ortaya, sola ve sağa hizaladık.
<br>
<br>: bu etiketimiz ile bir alt satıra geçilmektedir. bir web sayfasında bu etiket kullanılmadığı zaman tarayıcımız otomatik olarak kendi satır geçecek, ancak bu pekte hoş bir görüntü olmayacaktır. bu yüzdende bu etiketi mutlaka kullanmalısınız.
şimdi basit bir örnek yapalım.
<html>
<head>
<title> alt satıra geçme </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
html’de alt satıra geçmek için br etiketi kullanılmaktadır. <br>
bu etiket önemli bir etikettir. <br>
</body>
</html>
web sayfanızda görüntülediğinizde bu yazmış olduğumuz yazının iki satırda görüntülendiğini sizlerde fark edeceksiniz.
<br> etiketini koymadan birde sayfanızı açın ve aradaki farkı sizlerde fark edeceksiniz.
<b>… </b>
bu etiket arasında yazılan yazılar kalın bir şekilde yazılacaktır.
bazı durumlarda yazıyı kalın yazmak isteyebiliriz bu durumda <b> etiketini kullanmak gerekecektir.
bir örnek ile açıklayalım.
<html>
<head>
<title> kalın yazı yazma </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<b> bu bir kalın yazı </b>
<br>
bu da normal bir yazı
</body>
</html>
sayfayı kayıt edip tarayıcınızda görüntülediğinizde ilk yazının kalın yazıldığını göreceksiniz.
<i>… </i>
bu etiket ile yazılarımız hafif sağa yatık italik yazılacaktır.
italik belirtmek istediğimiz yerlerde bu etiketi kullanabiliriz.
bir örnek yapalım.
<html>
<head>
<title> italik yazmak </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<i> bu bir italik yazıdır. hafif sağa yatıktır. </i>
<br>
buda normal bir yazıdır.
</body>
</html>
yukarıdaki örnekte ilk yazmış olduğumuz yazının sağa yatık olduğunu fark etmişsinizdir. ikinci yazımız ise normal gözükecektir.
<u>.. </u>
bu etiketi kullandığımızda yazdığımız yazılar altı çizili olacaktır.
bazı durumlarda yazılarımızın altını cizerek önemli olduğunu gösterebiliriz.
bir örnekle açıklayalım.
<html>
<head>
<title> altı çizili yazmak </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<u> yazımızın altı çizili olacaktır. </u>
<br>
bu yazımız normal gözükecektir.
</body>
</html>
bu örnekte ilk yazımızın altı çizilidir. ikinci yazımız ise normal, düz bir yazıdır.
<del>… </del>
yukarıdaki etiketin tam tersine bu etiket ise üstü çizili yazmak için kullanılır.
bir örnek yapalım ve görelim.
<html>
<head>
<title> üstü çizili yazmak </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<del> üstü çizili yazı. </del>
<br>
buda normal bir yazı.
</body>
</html>
diğer örneklerde olduğu gibi ilk yazıda üstü çizili yazılmış ve ikinci yazı ise aradaki farkı görmeniz için düz bir şekilde yazılmıştır.
<sup>…</sup>
bu html etiketi ile üst hizada yazılar yazmak için kullanılmaktadır.
ben çok gerekli olduğunu düşünmüyorum ama sizin tercihiniz kullanmak yönünde olabilir.
bir örnek ile açıklayalım.
<html>
<head>
<title> üst hizada yazmak </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<sup> bu yazı üst hizada yazılmış bir yazıdır. </sup>
<br>
bu da normal bir yazıdır.
</body>
</html>
dosyayı kayıt ettiğinizde aradaki farklı sizlerde göreceksiniz. ilk yazı üst hizalıdır. ikinci yazı ise normal bir şekildedir.
<sub>…</sub>
bu etiket yukarıdaki etiketin tam tersine bir işlem yapmaktadır. alt hizada yazı yazmak için kullanılmaktadır.
diğer komutlarda olduğu gibi bir örnekle açıklayalım.
<html>
<head>
<title> alt hizada yazı yazmak </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<sub> bu yazı alt hizada yazılmıştır. </sub>
<br>
bu yazı tarayıcıda normal bir şekilde gözükecektir.
</body>
</html>
örneği incelerseniz sizlerde her iki yazıdaki farklılığı göreceksiniz.
<big>…</big>
bu etiketi yazılarımızı büyük yazmak isterken kullanırız.
bir web sayfasında büyük yazmak bağırmak anlamına gelmektedir. bu yüzden bu etiketin pek tercih edileceğini sanmıyorum. ama yinede incelemekte fayda olacaktır.
bir örnek ile görelim.
<html>
<head>
<title> büyük yazı yazmak </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<big> bu büyük bir yazı. </big>
<br>
bu da normal bir yazı.
</body>
</html>
evet ilk yazımız büyük yazılacak ikicisi ise normal bir yazı olacaktır.
<small>…</small>
bu etiket ile yazılarımızı küçük yazmak için kullanırız.
bir örnek ile daha net ifade etmek doğru olacaktır.
<html>
<head>
<title> küçük yazı yazmak </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<small> küçük bir yazı </small>
<br>
bu bir normal bir yazı.
</body>
</html>
bu örnektede gördüğünüz gibi ilk yazımız küçük yazılmıştır. ikinci örnekte small etiketi kullanılmadığından küçük gözükmeyecektir.
<strong>…</strong>
bu etiket ile sayfamızda bir konu anlattığımızı varsayalım ve vurgu yapmak istediğimiz önemli noktalar olabilir. bu noktaları vurgulamak için kullanılan bir etikettir.
vurgulanacak yazıyı etiket içerisinde gösterdiğimizde yazımız vurgulanacaktır.
bir örnek ile ifade edelim.
<html>
<head>
<title> vurgulu yazı yazmak </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<strong> bu vurgulanması gereken bir yazıdır. </strong>
<br>
buda düz bir yazıdır.
</body>
<html>
ilk yazımızı <strong etiketi ile vurguladık. bu etiket ile çok sık karşılaşacaksınız. belkide sık sık kullanacağınız bir etiket olacaktır.
ikinci yazı ise aradaki farkı net olarak anlatmak için yazılmıştır.
metin biçimlendirme etiketlerinin sayısı oldukça fazladır. ancak kullanımı sık olan ve en kullanışlıları bunlardır.
bu etiketler ile web sayfalarınızda fazlasıyla metinlerinizi biçimlendirebilirsiniz.
elimden geldiği kadar sizlere tüm detayları ile metin miçimlendirme etiketlerini anlatmaya çalıştım. umarım faydalı bir yazı olmuştur.
sorularınızı yazımın altına yorumlarda bana bildirebilirsiniz.
iyi bloglamalar herkese.
Bir önceki yazımız olan html meta etiketleri başlıklı makalemizde html meta etiketleri, html meta tagları ve html meta tagları kullanımı hakkında bilgiler verilmektedir.