Yazı Metnin Boyutunu ve Fontunu Değiştirmek

2.5. Metnin Boyutunu ve Fontunu Değiştirmek W8 Metni kalın yapmak için ve etiketlerini kullanın. Örneğin; ...

...

2.5. Metnin Boyutunu ve Fontunu Değiştirmek W8
Metni kalın yapmak için ve etiketlerini kullanın. Örneğin; dikkate değer bir metin ifadesi Web tarayıcınızda dikkate değer bir metin olarak görünecektir.
Metni italik yapmak için metin 
Metni altı çizili yapmak için metin 
Metnin fontunu değiştirmek için metin formatını kullanın. Örneğin Times New Roman fontunu kullanmak için aşağıdaki kodu kullanın;
 metni bu aralığa girin 
Font ismi kısmında dilediğiniz fontu tanımlayabilirsiniz, örneğin courier, comic sans serif vs. Fakat bu fontlar bu sayfayı ziyaret eden kullanıcıların bilgisayarlarında bu fontlar yüklüyse görebileceklerdir aksi takdirde bilgisayarları bu fontun karşılığı olan bir fontu bazen de rasgele bir fontu gösterecektir.

İşi şansa bırakmamak için yaygın olarak kullanılan Arial, Times New Roman ve Courier New gibi fontları kullanın. Dilerseniz birden fazla seçenek belirtebilirsiniz. Örneğin;
 kodunu girerseniz öncelikle ilk font kullanılacaktır. Eğer bu font yoksa ikinci font kullanılacaktır

Şekil 2.8
Web sayfanızda değişik fontlar ve biçimlendirmeleri kullanabilirsiniz.Soldaki Web sayfasının kaynak kodu sağda görülmektedir. Not :Bilgisayarlarda yaygın olarak bulunan belli başlı fontlar şunlardır:Arial,Times New Roman,Courier New,Garamond,Verdana,Tahoma,Impact
Uyarı: HTML dosyaları hakkında bir kaç uyarı
Karşınıza gelen Kaydet (Save) seçeneğinde her zaman doğru dosya uzantısını ve
(.htm ya da .html) kullanın Dosya isimlerinde her zaman için küçük harfleri kullanın. Birçok Web sunucusu (Web server) büyük harflere karşı çok gıcıktır ve dosyanızı göstermeme olasılığı vardır.Dosya isimlerinde boşluk karakteri kullanmayın (uzun aralık tuşuna basınca çıkan karakter ekranda görülmese de aslında bir karakterdir). Boşluk karakteri Internet Explorer ya da Netscape gibi Web tarayıcılarının kafasının karışmasına yol acar.
Dosya isimlerinde Türkçe karakterler (ü, ş, ç, ğ, ö, İ, ya da ı gibi) kullanmayın.
2.6. Metni Renklendirmek
<BODY> etiketine metinle ilgili bazı özellikler ekleyerek Web sayfasındaki metnin rengini belirleyebilirsiniz. Bunun için <BODY> etiketinin içine TEXT= “#0000FF” komutunu ekleyin. Bu örnekteki #0000FF numarası metin rengini mavi yapacaktır ya da doğrudan mavi ismini girebilirsiniz yani blue (tabii ki İngilizcesini). Bu işlem sayfanın içindeki tüm metnin rengini kırmızı yapacaktır:
<BODY TEXT= “blue”>
renkler olan KIRMIZI, YEŞİL ve MAVİ’dir (RGB yani İngilizce Red-Green-Blue kelimelerinin baş harfleri). Temel renkleri kullanarak bütün renkleri oluşturmak mümkündür.Bir renk oluşturulurken şu palet biçimi kullanılır: #kırmızı-yeşil-mavi
Yani #000000 rengi demek; kırmızıdan sıfır kadar koy, yeşilden sıfır kadar koy, maviden de sıfır kadar koy demektir. Sonuçta siyah rengi elde ederiz.
Yukarıdaki değerler on altılık (hexadecimal) sistemde verilmiştir. Kırmızının alacağı değer sayısı 256’dır. Aynı şekilde mavinin alacağı sayıda 256’dır. Sonuçta bu şekilde elde edebileceğiniz renk sayısı 256x256x256=16.777.216’dır ama tabii ki bu kadar renge ihtiyacımız olmayacak.
Renk kodları aşağıda verilmiştir. Renkleri kullanırken Web güvenli renkleri (Web safe colors) kullanmanızı tavsiye ederim. 16 milyon renk arasından seçilen 216 renk her tür monitörde görünebilecektir.
Black
#000000
Siyah
White
#FFFFFF
Beyaz
Red
#FF0000
Kırmızı
Green
#00FF00
Yeşil
Blue
#0000FF
Mavi
Magenta
#FF00FF
Bordo
Cyan
#00FFFF
Gök mavi
Yellow
#FFFF00
Sarı
Linklerinizin belirli bir renkte olmasını istiyorsanız aşağıdaki etiketi kullanın;
<BODY LINK=“renk” VLINK=“renk” ALINK=“renk” >
VLINK ziyaret edilmiş linklerin (visited link) nasıl gösterileceğini belirler, ALINK ise aktif olan linklerin (active link) rengini belirlemek için kullanılır.
Eğer metnin sadece bir kısmının renklerin değiştirmek istiyorsanız FONT etiketinin COLOR özelliğini kullanabilirsiniz.

Örneğin:

Bu etiketten sonra yazacağınız tüm metinler ekranda kırmızı olarak görünecektir.
2.7. Link Eklemek
Başlarda belirttiğimiz gibi hipermetin dokümanları ve tabii ki Web birbirine linklerle (yani bağ) birbirine bağlanmış sayfalardan oluşmuştur. Link eklemek için kullanacağımız etiket ise <a> etiketidir.
Bir sayfadan diğer sayfaya link eklemek için aşağıdaki kodu dosyam2.htm dosyasına ekleyin ve kaydedin.
<BODY>
<A HREF=“dosyam.htm”> benim kişisel bilgilerim </A>
için lütfen tıklayın.
</BODY>
dosyam2.htm dosyasını bir Web tarayıcı ile açın. kişisel bilgilerim kısmını tıklarsanız Web tarayıcınız dosyam.htm dosyasını görüntüleyecektir. Link olan kısmın nasıl farklı renkte ve altı çizili olduğuna dikkat edin. Tarayıcınız metnin bir link içerdiğini göstermek için farklı renkte ve altı çizili olarak gösterecektir.Web sayfanız içinde sadece metinleri değil aynı zamanda resimlere de link ekleyebilirsiniz. Diyelim ki kendi resminizin daha büyük halini bir başka Web sayfasına koydunuz ve bu sayfaya atlamak için aşağıdaki linki ekleyebilirsiniz.
<BODY>
resmimi daha büyük görmek için
<A HREF= “resim.htm”><IMC SRC=“resmim.jpg”> </A>
</BODY>
Bu dosyayı ana.htm olarak kaydedin. Bu dosyayı bir Web tarayıcı ile açtığınızda farenin (işaret eden bir parmak şeklindeki) imlecini resminizin üstüne getirin ve tıklayın. resim.htm dosyası açılacaktır. Web’de bu türden milyonlarca link vardır. Site içinde gezinmenizi sağlayan ok resimleri buna tipik bir örnektir.
Eğer link eklediğiniz Web sayfası başka bir dizindeyse örneğin web sayfam ana dizini altında resimler dizininde bulunuyorsa linki şu şekilde eklemeniz gerekir:
<A HREF=“resimler/dosyam.htm”> benim kişisel bilgilerim </A> için lütfen tıklayın.
2.8. Sayfa İçinde Bir Yere Link Eklemek
Bir ya da iki ekran boyutunu aşan uzun sayfalarda sayfa içindeki belirli noktalara link koyabilirsiniz. Böylece oldukça uzun sayfa içinde okuyucunun hareket etmesini kolaylaştırmış olursunuz. Örneğin sayfanın sonuna geldiğinde başa dönmek için durmadan PageUp tuşuna basmak yerine en alta bir link koyup, okuyucunun sayfanın başına tek bir tıklamayla geri dönmesini sağlayabilirsiniz. Kim buldu bilmiyorum ama oldukça dahiyane bir fikir.Web sayfasının adını ya da URL adresini girmeniz yeterli değildir. Sayfa içinde gidilecek yeri belirlemeniz gerekir. Bunun içinde o noktaya bir çapa (anchor) atmanız gerekir. Bunun için <a> etiketini name özelliği ile birlikte kullanmanız gerekir.
Örneğin; < A NAME=“capa”> Burası sayfanın başıdır </A>
Burada capa yerine başka bir isim de kullanabilirsiniz.Böylece Burası sayfanın başıdır cümlesi bir çapaya dönüşür. Şimdi bu çapayı kullanarak sayfa içinde herhangi bir yerden bu noktaya atlanmasını sağlayabilirsiniz.
<A HREF=“#capa”> sayfanın başına dönmek için lütfen tıklayın </a>
Sadece aynı sayfa içinde değil bir başka sayfa içinde yer alan bir çapaya da link koyabilirsiniz. Örneğin sayfam.htm’de bulunan baslangic çapasına index.htm dosyasından geçiş yapılmasını istiyorsanız, aşağıdaki html kodunu yazmanız yeterlidir.

<A HREF=“sayfam.htm#baslangic”> sayfam dosyasının başına gitmek için lütfen tıklayın </A>
2.9. Diğer Web Sitelerine Link Eklemek
Çok beğendiğiniz ve sık sık ziyaret ettiğiniz Web sitelerini, sitenizi ziyaret edenlerle paylaşmak istiyorsunuz. Böylece sizin sitenizden bu sitelere atlamak mümkün olabilsin. Bu işlemde yukarıdakinden farklı değildir, sadece linkle eklediğiniz sitenin tüm URL adresini vermeniz gerekir (URL’nin ne olduğunu unutmadınız umarım). Örneğin NASA’nın Web sitesine bir link ekleyelim (http://www.nasa.gov).
<a href=“http://www.nasa.gov”> Astronomi ile ilgili birçok kaynak için NASA’nın sitesini öneririm </a>
Dilerseniz bir başka Web sitesinde yer alan bir çapaya da link verebilirsiniz. Örneğin;
<a href=“http://www.nasa.gov/mars/index.htm#middle”> Mars keşfi ile ilgili heyecan verici bilgiler </a>
2.10. Diğer Link Türleri
Bir URL adresinin başında bulunan http:// aktarım protokollerinden sadece biridir. Bunun anlamı, iki bilgisayar arasında bu dokümanın http protokolünün kurallarına göre aktarılacağını anlatır. Bunun dışında başka protokoller de vardır.
mailto Protokolü
Bunlar arasında en önemlisi Web tarayıcıya bir e-posta göndermesini söyleyen mailto protokolüdür. Varsayılan e-posta programı açılır ve mailto ile tanımlanmış adres, gidecek yer adresi olarak açılır ve kullanıcı kolaylıkla bir e-posta gönderebilir. Web sitenizi ziyaret edenlerin size ulaşmasını ya da site hakkındaki görüş ve düşünceleri bildirmeleri için ideal bir araçtır.
Örneğin:
<BODY>
Bana ulaşmak ve düşüncelerinizi bildirmek için
<A HREF=“mailto:eminari@yahoo.com”> e-posta gönderebilirsiniz </A>
</BODY>
Yukarıdaki örnekte eminari@yahoo.com adresini doğal olarak kendi e-posta adresinizle değiştirmeniz gerekir.
FTP Protokolü
Bir diğer protokol ise ftp’dir (File Transfer Protocol - Dosya Aktarım Protokolü). Bir dosya aktarım sunucusunun adresini ve bu sunucuda yer alan belirli bir dosyayı biliyorsanız, bu dosyanın kullanıcının bilgisayarına aktarılmasını sağlayabilirsiniz.
<BODY>
Candan Erçetin’in son parçasının MP3 formatını yüklemek için
<A HREF=“ftp://muzikalite.com/turkce/candan/yalan.mp3”> lütfen tıklayın </A>
Başka birçok protokol vardır ama bu üçü sizin işinizi fazlasıyla görecektir.
2.11. Resim Eklemek
Bir Web sayfasına resim eklemek için IMG etiketini kullanacağız:
<IMG SRC= “dosyaadı”>
SRC İngilizce source yani kaynak kelimesinin kısaltılmışıdır. dosyaadı olarak ise bir dosyanın adını ve uzantısını girmeniz gerekli, örneğin aile.gif gibi.
<IMG SRC=“aile.gif”>
Web sayfasını oluşturan HTML dosyasının ve resim dosyasının aynı dizinde olması gerektiğini söylememe gerek yok. Resim dosyalarını bir resim dizini altında topluyorsanız yukarıdaki kodu, <IMG SRC= “resim/aile.gif” > olarak yazmanız gereklidir. Böyle bir dizin resimlerinizin daha derli toplu durmasını sağlayacaktır.
Piksel Nedir?
Bilgisayar ekranı resimleri piksel dediğimiz ufak noktaları bir araya getirerek oluşturur. Bilgisayar ekranını büyük bir mozaik resim olarak düşünebilirsiniz. Örneğin 800x600 çözünürlük denildiğinde yatay olarak 800, düşey olarak 600 piksellik bir nokta mozaiğini gözünüzün önüne getirin. Ekran çözünürlükleri ne kadar değişse de, en çok kullanılan çözünürlük 800x600’dır. Sayfanızı tasarlarken bu çözünürlüğe göre hareket ederseniz herkesin sayfanızı görebileceğinden emin olabilirsiniz.
Web Tarayıcınız Resimlerinizi Göstermiyorsa ;
Eğer Web tarayıcınız resmi göstermiyorsa, resim yerine bir kocaman X işareti veriyorsa öncelikle sakin olun. Aşağıdaki hatalardan birini yapmışsınız demektir.
Resim belirtilen dizinde yoktur.
Resminize İnternet üzerinden bakıyorsanız muhtemelen resmi İnternet’e yüklememişsiniz demektir. Web sayfalarınızın bulunduğu sunucuda resim bulunmuyordur. Tekrar yüklemeyi deneyin.Resmin isminin büyük harf- küçük harfe karşı duyarlı olduğunu unutmayın. Yani AILE.GIF ve aile.gif isimleri sunucu tarafından farklı dosyalar olarak algılanacaktır.
IMG etiketini düzgün yazdığınızdan emin olun.
Bir Resmin Genişliğini ve Yüksekliğini Ayarlamak
IMG etiketinin WIDTH (genişlik) ve HEIGHT (yükseklik) özelliklerini aşağıdaki gibi kullanabilirsiniz:
<IMG SRC=“aile.gif” WIDTH=90 HEIGHT=100>
Buradaki değerler piksel olarak verilmiştir. Resmin orijinal boyutunun yüzdesi olarak vermek istiyorsanız aşağıdaki gibi yazabilirsiniz:
<IMG SRC=“aile.gif” WIDTH=90% HEIGHT=90%>
Bu HTML kodu resmi yüzde doksan oranında küçültecektir. Küçültme ya da büyültme sırasında oranları aynı tutmaya gayret edin yoksa insanlar ve binalar bir garip görünecektir.
Resmin metin içinde hizalanması için ALIGN özelliği kullanılır. ALIGN özelliğinin alabileceği değerler şunlardır:
TOP:Metin resmin üstüne hizalanır
MIDDLE:Metin resmin ortasına hizalanır
BOTTOM:Metin resmin altına hizalanır
LEFT:Resim ekranın soluna yaslanır ve metin resmin etrafında yer alır.RIGHT:Resim ekranın sağına yaslanır ve metin resmin etrafında yer alır.

Şekil 2.10 Şekil 2.10 Bir resmin gösterilemediği durumlar vardır. Web tarayıcıların bazıları metin tabanlıdır (hâlâ kaldıysa tabi), bazen de kullanıcılar hızlı tarama yapmak için Web tarayıcılarının resim gösterme özelliğini kapatırlar. Bu durumda kullanıcıya göremediği resmin ne olduğunu söylemeniz iyi olur. Bunun için alternatif metin özelliğini kullanın. Web tarayıcı resmi göstermediği durumlarda bu metni ekranda gösterecektir. Bazı durumlarda resim yüklenmeden önce bu metin görülebilir. <IMG SRC=“dosyaadı” ALT=“Alternatif metin olarak gireceğiniz metin”> <IMG SRC=“aile.gif” ALT=“Ailemin resmi”> Resimle metin arasına bir mesafe koymak istiyorsanız bunu piksel olarak belirtebilirsiniz; <IMG SRC=“dosya adı” HSPACE=h VSPACE=v>