HTML DERSLERİ ( Ders3: Yazı biçimi )

yorum yok
247 okuma
20 Ocak, 2018

Bu dersimizde makale karakterlerinin biçimi, font ailesi, büyüklüğü benzeri konular işlenecek. Fakat bu konular üzerinde CSS dersleri esnasında yoğunlaşacağımız amacıyla, yüzeysel bir tanıtımda bulunacağım.

Yazı Tarzları
HTML’de harfleri koyu, eğik ve ya altı çizili yapmaya yarayan komutları görmüştük. Aşağıda hem Daha önceden gördüklerimiz, hatta yeni göreceğimiz kodlar bulunuyor:

<b></b> Harfleri koyulaştırır.(bold)
<strong></strong> Harfleri koyulaştırır.
<big></big> Harflerin boyutunu büyütür.
<small></small> Harflerin boyutunu küçültür.
<em></em> Harfleri eğik bir hale getirir.(emphasized)
<i></i> Harfleri eğik hale getirir.(italic)
<sub></sub> Harfleri alt simge durumuna getirir. (subscript)
<sup></sup> Harfleri üst simge durumuna getirir. (superscript)
<del></del> Harfleri üstü çizili hale getirir. (deleted)
<ins></ins> Harfleri altı çizili bir hale getirir. (inserted)
<u></u> Harfleri altı çizili hale getirir.(underlined)
Bazı scriptlerin aynı fonksiyonu gördüğünü farketmişsinizdir. Aşağıdaki program üstünde göz gezdirirseniz, bu kodlar üstünde yeterince durmuş olacağımız düşüncesindeyim.

<html>
<head>
<title>HTML Yazı Biçimi</title>
</head>
<body>
<b>&#60;b&#62;:</b> trabzonsporun son <b>şampiyonluğunun</b> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;strong&#62;:</b> trabzonsporun son <strong>şampiyonluğunun</strong> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;big&#62;:</b> trabzonsporun son <big>şampiyonluğunun</big> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;small&#62;:</b> trabzonsporun son <small>şampiyonluğunun</small> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;em&#62;:</b> trabzonsporun son <em>şampiyonluğunun</em> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;i&#62;:</b> trabzonsporun son <i>şampiyonluğunun</i> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;sub&#62;:</b> trabzonsporun son <sub>şampiyonluğunun</sub> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;sup&#62;:</b> trabzonsporun son <sup>şampiyonluğunun</sup> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;del&#62;:</b> trabzonsporun son <del>şampiyonluğunun</del> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;ins&#62;:</b> trabzonsporun son <ins>şampiyonluğunun</ins> 100. yıl dönümünü kutlarız.<br/><br/>
<b>&#60;u&#62;:</b> trabzonsporun son <u>şampiyonluğunun</u> 100. yıl dönümünü kutlarız.<br/><br/>
</body>
</html>

Font Formatı
HTML’de fontların rengini, büyüklüğünü ve karakterini belirlemek için <font>…</font> kodundan ve bu kodun parametrelerinden yararlanırız.

Font Büyüklüğü
Fontların büyüklüğü için HTML; Word gibi piksel değil, kendince ölçü birimleri kullanır. (Tabi pixel ve ya point kullanması da mevzubahis fakat onları henüz anlatmayacağım. CSS derslerini bekleyin.) Fontların büyüklüğünü belirlemek için “size=” (ölçü) parametresi tüketilir. En ufak birim 1’e, en büyük birim ise 7’ye eşittir. Siz herhangi bir değer vermezseniz (“size” parametresini kullanmazsanız), HTML 3 birim büyüklüğünde fontlar kullanacaktır.

<html>
<head>
<title>Fontların Boyutları</title>
</head>
<body>
<font size=”1″>Korktukça Tutsak, Umut Ettikçe Özgürsün!</font><br/><br/>
<font size=”2″>Korktukça Tutsak, Umut Ettikçe Özgürsün!</font><br/><br/>
<font size=”3″>Korktukça Tutsak, Umut Ettikçe Özgürsün!</font><br/><br/>
<font size=”4″>Korktukça Tutsak, Umut Ettikçe Özgürsün!</font><br/><br/>
<font size=”5″>Korktukça Tutsak, Umut Ettikçe Özgürsün!</font><br/><br/>
<font size=”6″>Korktukça Tutsak, Umut Ettikçe Özgürsün!</font><br/><br/>
<font size=”7″>Korktukça Tutsak, Umut Ettikçe Özgürsün!</font><br/><br/>
<font>Korktukça Tutsak, Umut Ettikçe Özgürsün!</font>

 

Yukarıdaki uygulamayla fontların 1’den 7’ye kadar bütün boyutlarını görebiliyoruz. Gözden kaçmaması gereken başka bir nokta da şu: Son satırda “size” parametresini kullanmamıştık, bu yüzden HTML bu ifadeyi 3 birim boyutta yazdı. HTML’in fontlar için varsayılan (default) değerinin 3 olduğunu yazmıştık. Eğer siz ölçü birimi olarak -1 yazarsanız, HTML bunu 2 (varsayılan değerin bir eksiği) olarak algılar, 2 yazarsanız, HTML bunu 5 (varsayılan değerin 2 fazlası) olarak algılar. Daha detaylı bulguyu CSS derslerinde göreceğiz.

Font Rengi
Bir diğer <font> parametresi de “color” (renk) kodudur. Tahmin edeceğiniz üzere bu parametrenin fonksiyonu fontların rengini belirlemektir. Fazla söze lüzum yok, programa baksak yeterli olur di mi?

<html>
<head>
<title>Fontların Renkleri</title>
</head>
<body>
<font color=”blue”>Biliyormusunuz dostlar.</font><br/>
<font color=”red”>Birkaç gündür boy boy,</font><br/>
<font color=”purple”>İlanlarım çıkıyor gazetelerde:</font><br/>
<font color=”orange”>Tipsiz ve kişiliksiz bir cüce</font><br/>
<font color=”green”>Kendine eş arıyor diye.</font><br/>
<font color=”black”>Ve mektuplar, mektuplar, mektuplar.</font><br/>
<font color=”pink”>Meğer ne kadar da çokmuş</font><br/>
<font color=”brown”>Etrafta kişiliksiz ve de tipsiz cüce</font><br/>
<br/>
<font color=”crimson”><b>Orçun POLAT</b></font>
</body>
</html>

Tabi HTML bizi herkezin bildiği İngizlizce renk isimleriyle kısıtlamamış, color parametresi çoğu bilgisayar yazılımlarının kabul etmiş olduğu RGB (red-green-blue) renk sistemini kabul etmiştir. Bu renk sistemini ayrı bir sayfada anlatıyorum: RGB renk sistemi Gözünüzde büyütmeyin, anlaması çok kolay birşey.

Font Türü
Fontların renklerini ve boyutlarını belirleyebiliyoruz artık. Sıra geldi fontların türünü belirlemeye. O da yine <font> kodunun face parametresiyle belirleniyor. Burada önemli olan iki husus var. Birincisi, düşük sürümlü navigator’lar her fontu desteklemez (ama artık kimse düşük navigator’lı ikinci derslik insanları iplemiyor), ikincisi ise internet kullanıcısının hard diskinde sizin belirlediğiniz fontlar yoksa, metinleri kendi bilgisayarının varsayılan font türü ile okur. Bu nedenle süregelen olmayan fontları kullanmamaya çalışın. Aşağıdaki uygulamada çok sarfedilen font türlerinden misaller verdim:

<html>
<head>
<title>Font Türleri</title>
</head>
<body>
<font face=”Arial”>Arial</font><br/>
<font face=”Arial Black”>Arial Black</font><br/>
<font face=”Courier”>Courier</font><br/>
<font face=”Courier New”>Courier New</font><br/>
<font face=”Modern”>Modern</font><br/>
<font face=”Terminal”>Terminal</font><br/>
<font face=”Symbol”>Symbol</font><br/>
<font face=”Comic Sans”>Comic Sans MS</font>
</body>
</html>

Aslında <font> kodunun başka parametreleri de var. Ama bunları şuanlık anlatmıyorum. Bu kadarı başlangıç amacıyla yeter de artar bile. Bu sayfalık dersimiz sonlanmıştır, çok sıkılmadınız umarım. (ben biraz sıkılmaya başladım, fakat ileride yapacağımız uygulamaları düşününce bu sıkıntıya değeceğini düşünüyorum.)

Bundan sonraki sayfamızın konusu  Ders4: Linkler girmek için tıklayın..


Bir önceki yazımda « makalem var.
ReGoR

Site web editörü olan admin makale yazarlığı yapar. Site web editörü olan admin .

Benzer Yazılar

Van Sohbet   Genel olarak Van sohbet sitelerine bağlanan kişilerin ...

aşkın gücü

Hayatın Anlamı Hayatımda yalnızca Tanrı ve dünya hakkında düşündüğüm ...

Aşkım Bir Rüya Gökyüzüne baktığımızda suratını görüyorum, senin ...

Yorumlar



Bir Yorum Yazmak İstermisiniz ?