W8
2.5. Metnin Boyutunu ve Fontunu De�i�tirmek
Metni kal�n yapmak i�in <B> ve </B> etiketlerini kullan�n. �rne�in; <B> dikkate de�er bir metin </B> ifadesi Web taray�c�n�zda dikkate de�er bir metin olarak g�r�necektir.
Metni italik yapmak i�in <I> metin </I>
Metni alt� �izili yapmak i�in <U> metin </U>
Metnin fontunu de�i�tirmek i�in <FONT FACE= �Font ismi�> metin </FONT> format�n� kullan�n. �rne�in Times New Roman fontunu kullanmak i�in a�a��daki kodu kullan�n;
<FONT FACE= �times new roman�> metni bu aral��a girin </FONT>
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;
<FONT FACE=�Times New Roman, Arial, Courier�> kodunu girerseniz �ncelikle ilk font kullan�lacakt�r. E�er bu font yoksa ikinci font kullan�lacakt�r
A | B |
�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.
<FONT COLOR= �renk�>
�rne�in:
<FONT COLOR=�red�>
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.
Not
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=�dosyaad� HSPACE=h VSPACE=v>
0 yorum:
Yorum Gönder