Kodlama Merkezi Yazılımcı Dostu Paylaşım Merkezi
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
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.
|
1 2 3 4 5 6 7 8 9 10 |
<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.
|
1 2 |
<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.
|
1 |
<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.
|
1 |
<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.
|
1 2 |
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.
|
1 |
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.
|
1 2 3 |
<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.
|
1 |
<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.
|
1 |
<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.
|
1 2 3 |
<font color="red"> Bu metin kırmızı renklidir.</font> <font color="#4bb3a2">Bu metin renklendirilmiştir.</font> |
|
1 |
<font face="Times New Roman" color="blue" size="5"> Font etiketiyle yazı biçimlendirildi.</font> |
Sayın Admin;
Html dersleri 3 nerde ben bulamıyorum yardımcı olurmusun.
http://www.kodlamamerkezi.com/web-tasarim/html/html-dersleri-3-baglanti-link-olusturma/
sanırım burda dostum..
yazı boyutlarını yapmada neden head ve bodyi sonlandırmamışsın ( yapmamıssın)?
güzel anlatım teşekkürler
bir konuda yardım istiyorum . bir kaç kod yazdım ve doğru bir şekilde etiketlediğime de eminim ama masaüstüne kaydedip açınca sitede yazdığım yazı bozuluyor ve aynı zamanda bütün etiketler de görünüyor. nasıl düzeltebilirim? yardımcı olursanız sevinirim