MyBB, XenForo, vBulletin rakibi DiyoBB çok yakında beta süreci ile webailesi.com adresinde! Tıkla ve detayları görüntüle

HTML: Metin Düzenleme Etiketleri

2
18851

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 - Satın alımlar ve satış konuları desteği için ulaşabilirsiniz :  WhatsApp
Son Düzenleme: 20-01-2020, 11: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

Benzer Konular

63
Yorum
15.627
Okunma
19-06-2022, 15:06
20
Yorum
14.567
Okunma
15-06-2022, 09:29
28
Yorum
19.522
Okunma
04-05-2022, 07:14
18
Yorum
14.654
Okunma
04-05-2022, 07:09
17
Yorum
15.873
Okunma
02-04-2022, 15:03
28
Yorum
15.888
Okunma
12-12-2021, 03:28
Task
Kayıt Ol
Discord Adresimize Katılın