HTML: Metin Düzenleme Etiketleri

2
9730

Konu

#1
Bu yazımda Html ile metin düzenleme ve biçimlendirme işlemlerinin nasıl yapılacağı anlatacağım. Eğer html, body, head gibi etiketlerin ne anlama geldiğini bilmiyorsanız, ders 1’i inceleyebilirsiniz.

Peki metnin biçimlendirilmesi ne demek? Biçimlendirme yazdığımız yazıların boyutu, şekli, rengi, yazı tipi, kalınlığı gibi özelliklerin değiştirilmesi anlamına gelir.

Not: Tüm metin biçimlendirme etiketleri <body> tagının içerisine yazılır. Şimdi maddeler halinde bu etiketleri (tag) açıklayalım.

Metin Biçimlendirme Etiketleri
[b]1)<h> Başlık Etiketi: Bu etiket yazılara başlık eklemek için kullanılır. Zaten etiketin ismi ingilizce heading yani başlık kelimesinin baş harfinden alınmıştır. Farklı büyüklükte başlıklar kullanılabileceği için h1, h2, h3, h4, h5, h6 olmak üzere 6 farklı başlık büyüklüğü mevcuttur. Burada en büyük başlık <h1> en küçük ise <h6> dır.[/b]


Kod:
<html>
<head>
<title>Html ile Metin Biçimlendirme</title>
<head>
<body>
     <h1>Kodlama Merkezi</h1>
     <h2>Kodlama Merkezi</h3>
     <h6>Kodlama Merkezi</h6>
<body>
</html> 


2) <b> Kalınlık Etiketi: Bu etiket yazıları kalın yapmak için kullanılır. İngilizce bold (kalın) kelimesinden gelmektedir. Web sayfalarında ziyaretçilerin dikkatini çekmek için kullanılır.

Kullanımı aşağıdaki gibidir.



Kod:
<b>Bu metin kalın olarak yazıldı.</b>
Sadece bu kısım <b>kalın</b> yazıldı. 


3) <i> İtalik (eğik yazı) Etiketi: Bu etiket metni eğik yazmak için kullanılır. Italic kelimesinden gelmektedir. Bu etikette ziyaretçinin dikkatinin çekilmesi istenen yerlerde kullanılır.

Kullanımı aşağıdaki gibidir.



Kod:
<i> Bu metin eğik yazıldı.</i> 


4) <u> Altını Çiz etiketi: Bu etiket metnin istenen kısımlarının altını çizmek için kullanılır. İngilizce underline (altı çizili) kelimesinin baş harfinden gelmektedir.

Kullanımı aşağıdaki gibidir.




Kod:
<u> Bu yazının altı çizilidir.</u> 

5) <br> Alt Satıra Geç Etiketi: Html dili ile web sitesi oluştururken bir alt satıra geçmek için Enter tuşunun işe yaramadığını görürsünüz. Html’de alt satıra geçmek için <br> etiketi kullanılır.



Kod:
Burası 1.satır <br>
Burası 2.satır 


Yukarıdaki yazım yerine aşağıdaki gibi yazılsa da sonuç değişmeyecektir.


Kod:
Burası 1.satır <br> Burası 2.satır 

6) <p> Paragraf Etiketi: Yazdığımız metini paragraflara bölmek için kullanılır. Uzun yazılarda okunabilirliği arttırır.


Kod:
<p> 1. paragraf:Html, web sayfalarının hazırlanmasında kullanılan bir işaretleme dilidir.</p>
 
<p>2.paragraf: Web tarayıcıları bu kodları anlayarak görsel web sayfalarına dönüştürür.</p> 


7) <font> Etiketi: Font etiketi metin rengini ayarlama, yazı tipini değiştirme ve boyutunu ayarlamak için kullanılır. Tek bir etiketin bu 3 özelliği değiştirebilmesi aldığı parametreler sayesinde olmaktadır.
  • Size parametresi: Metnin boyutunu ayarlamak için kullanılır. Yazının büyüklüğü 1 ile 7 arasında değer alır.
Kod:
<font size="4">Metnin boyutunu değiştiriyorum.</font> 
  • Face parametresi: Yazı tipini değiştirmek için kullanılır. Bilgisayarda kullandığımız birçok yazı tipi geçerli olarak kullanılabilir. Fakat okunabilirlik ve tarayıcı desteği açısından Arial, Times New Roman gibi yazı tipleri tercih edilmelidir.
Kod:
<font face="Arial"> Bu metin Arial fontuyla yazıldı.</font> 
  • Color parametresi: Yazı rengini değiştirmek için kullanılır. Red, blue, yellow gibi renklerin ingilizcesi kullanılabileceği gibi #3b457c gibi renk kodlarıda kullanılabilir.
Kod:
<font color="red"> Bu metin kırmızı renklidir.</font>
 
<font color="#4bb3a2">Bu metin renklendirilmiştir.</font> 


Not: Font etiketinin aldığı parametrelerin hepsi tek bir <font> etiketi içerisinde kullanılabilir.



Kod:
<font face="Times New Roman" color="blue" size="5"> Font etiketiyle yazı biçimlendirildi.</font> 


Bu derimizde burada sona erdi bir sonraki derste Html ile Listeleme Etiketleri konusuna değineceğim.

İyi forumlar.
Discord: PawNod#6281 - Instagram - Eklenti yazmayı bıraktım sadece marketteki eklentilerin satışı için ulaşabilirsiniz.
Son Düzenleme: 20-01-2020, 14:02, Düzenleyen: PawNod'.
Cevapla
#2
Teşekkürler
Cevapla
#3
Teşekkürler
Cevapla

Bir hesap oluşturun veya yorum yapmak için giriş yapın

Yorum yapmak için üye olmanız gerekiyor

ya da
Kayıt Ol