HTML KODLARI - htmlders4

Sayfaya link ekleme

Bu b�l�mde hazırladığımız web sayfamıza gerekli g�rd�ğ�m�z yerlerine uygun linkleri nasıl ekleyeceğimizi g�receğiz. Evet bir web sayfasının en �nemli �zelliği etkileşimli olmasıdır.

Link i�in kullanacağımız tag a dır. Bu tagında bir�ok �nemli parametresi var. Şimdi bir link i�in ne yapmamız gerekir g�relim.

<html>
<head> <title>Sayfaya link eklemek </title> </head>
<body>
Birinci sayfa <p> <a href="iki.html">
Buradan ikinci sayfaya ge�ebilirsiniz</a>
</body>
</html>

�ncelikle birinci sayfamızı yazalım ve bir.html olarak kayıt edelim. Sonra yeni bir sayfa tanımlayalım ve iki.html olarak kayıt edelim. Burada �rd�ğ�m�z gibi link tagı <a href="yenisayfa">Tıklanacak yazı </a> şeklinde yazılır. Burada a link tagı href ise bu taga eklenmiş bir parametredir. Bu parametre gidilecek sayfanın yerini ve adını belirler. �ncelikle kodlarımızı yazdıksa bir kontrol edelim.

Bu denemede a tagının nasıl �alıştığını g�rd�k. href parametresini anlamaya �alışalım. Href browsere gidilecek sayfa ve adresini verir. Gidilecek sayfa adresi i�in birka� konum vardır. Şimdi bunları tek tek inceleyelim.

<html>
<head> <title>Sayfaya link eklemek </title> </head>
<body>
İkinci sayfa <p> <a href="bir.html">
Buradan birinci sayfaya ge�ebilirsiniz</a>
</body>
</html>

Gidilecek sayfa bulunduğumuz sayfa ile aynı klas�rde ( aynı yerde ).
Bu durumda link verirken yapmamız gereken sadece yeni html dosyasının adını yazmaktır.
<a href="yeni.html">Tıklanacak metin</a> gibi.
Gidilecek sayfa bulunduğumuz sayfanın bir alt klas�r�nde. Yani bulunulan klas�r�n i�inde bulunan başka bir klas�rde.
Bu durumda link verirken gidilecek klas�re gidilecek adı ve html dosyasına yeni.html adı verirsek.
<a href="gidilecek/yeni.html">Tıklanacak metin</a> şeklinde bir bağlantı yapmamız gerekir.
Gidilecek dosya bulunulan klas�r�n bir �st klas�r�nde ise. Yani bulunulan klas�r gidilecek klas�r�n i�inde ise.
<a href="../yeni.html">Tıklanacak metin</a> şeklinde bir ifade kullanırız.
Gidilecek html dosyası başka bir adreste ise bu durumda.
Gidilecek adresin tam yolunu ve dosya adını yazmamız gerekir.
Mesela counter.com adlı sayfaya link verecek isek şu şekilde bir link kullanırız.
<a href="http://www.counter.com">Link adı buraya </a>
Burada dikkat etmeniz gereken nokta gidilecek adresin tam yolunu ve gidilecek html dosyasını doğru yazmaktır.

Şimdi de a tagının yeni bir parametresini g�relim. Target parametresi ile gidilecek sayfanın hangi pencerede (browser) g�sterileceğini belirleyebilirsiniz. Şu anda �ğreneceğimiz parametre _blank parametresidir. Bu parametre ile gidilecek sayfanın yeni bir pencerede a�ılması sağlanır. Kullanımı;
<a href="http://boyozgur.8m.com/grsburad.htm" target=_blank>Bedava Online</a> şeklindedir.

Link tagını kullandığımızda, tıklanacak metin kısmı altı �izgili ve farklı bir renkte g�r�l�r. Bu renk �nceden tanımlı olarak mavidir.

<html>
<head> <title>Body tagı link parametresi </title> </head>
<body link="#00ff00" vlink="#0000ff">
Link denemeleri.
<p> <a href="http://boyozgur.8m.com/programlar.htm">
Renk nasıl</a>.
</body>
</html>

Bu tanımlamayı değiştirmek i�in body tagı i�inde link parametresini kullanabiliriz. Bu parametre:
<body link="rengin tanımı"> şeklindedir.Ayrıca gidilmiş bir linkin rengini belirlemek i�in vlink parametresi:
&body link="renk tanımı" vlink="renk tanımı"> şeklinde kullanılır. Yandaki kodları yazın ve kayıt edin. Bu dosyayı �alıştırın. Renk nasıl adlı link ilk �alıştığında rengi yeşildir. Bu linki tıklayalım. Yeni bir sayfa a�ılacak. Tekrar geri gelelim. Şimdi Renk nasıl linkine bakalım. Artık mavi rengine d�nm�ş olmalıdır. Burada rengin nasıl belirlendiğini �ğrenmek istersek, bilgisayarda renk tanımı RGB dir. Yani Red-Green-Blue ( Kırmızı-Yeşil-Mavi ) a�ılımına sahip olan bu tanım bilgisayarda rengi tanımlar. Bu konuyu biraz araştıralım ��nk� �nemli bir konu ve renk kullanımı �nemli bir konudur.

Renk tanımı yapılırken bu �� ana rengin tonları kullanılır. Bu renklerin değerleri 000'dan başlar 255'e kadar uzanır. 000 iken bu renk tonu hi� kullanılmaz. 255 iken ise bu renk tonu maksimum d�zeyde kullanılır. Bu değerleri şu şekilde tanımlayabiliriz:

Kırmızı 000, yeşil 192, mavi 192 bu renk tanımını bir g�relim. yeşilin
bir tonu
Kırmızı 255, yeşil 255, mavi 064 bu renk tanımını bir g�relim. sarının
bir tonu
Kırmızı 000, yeşil 000, mavi 256 bu renk tanımını bir g�relim. mavinin
bir tonu

Renklerin oranlarını değiştirerek nasıl yeni renkler oluşturulduğunu g�rd�k. Dikkat etmemiz gereken bu oranları html dosyası i�inde kullanırken ondalık olarak değil onaltılık (hexadesimal) sistemde kullanmamız gerektiği. Bunun i�in ya başlat/programlar/donattılar/hesapmakinesi 'den hesap makinesini �alıştırıp bilimsel mod da �nce onluk d�zeyde istediğimiz renk oranını yazıp sonra onaltılık d�zene �evireceğiz ki bunu her renk oranı i�in tek tek yapacağız. Yada Paint Shop Pro 'da renk tanımlaması yaparken beğendiğimiz rengin değerini html code yazan kutucuktan �ğrenebiliriz. On altılık d�zende renk değeri 00'dan FF'e kadar değişir. Yukarıdaki değerleri onaltılık kodda verirsek:

Kırmızı 00, yeşil C0, mavi C0 bu renk tanımını bir g�relim. yeşilin bir tonu
Kırmızı FF, yeşil FF, mavi 40 bu renk tanımını bir g�relim. sarının
bir tonu
Kırmızı 00, yeşil 00, mavi FF bu renk tanımını bir g�relim.

Bu konuda değişik değerler vererek denemeler yapın anlamadığınız yer varsa bana sorabilirsiniz.

Artık link olarak bir resmin kullanılmasını g�rebiliriz. Bu �nemli bir �zellik. Sayfa tasarlarken g�rsel etkilerden faydalanmayı sağlar. Evet link olarak bir resim kullanabiliriz.

<html>
<head> <title>Resimlere link vermek </title> </head>
<body>
Link denemeleri.
<p> <a href="http://boyozgur.8m.com/mesela.htm">
<img alt"web nedir" src="../resimler/webne.gif"></a>.
</body>
</html>

Linklerde resim kullanmak i�in tıklama da kullandığımız yazı yerine img tagı ile bir resim koyuyoruz. Yapmamız gereken sadece bu kadar. Yandaki kodları incelersek a href den sonra <img alt="web nedir" src="../resimler/webne.gif"> şeklinde bir resmi sayfaya yerleştirdik. Aslında buraya bir anahtar kelime yazmamız gerekiyordu. Bu şekilde biz kelimeler yerine resim kullanmış olduk. Yine <a> ile linkimizi kapatalım. İşlem tamam. Bir deneyelim mi?.

Bir resme link verdik ama dikkat edilirse resmin etrafında bir �er�eve belirdiğini g�receksiniz. Bu �er�eve her zaman hoş g�r�nt� vermiyor. �er�eveyi kaldırmak i�in yapmamız gereken img tagını border=0 parametresi ile beraber kullanmak. Bu şekilde bir kullanım resmin etrafındaki �er�eveyi kaldırmaya yetiyor. İki link arasındaki �er�eve farkına dikkat! Linkler ile ilgili yeni bir konuya ge�ebiliriz. Fakat şunu unutmayın web sayfası tasarlayacak iseniz bol miktarda deneme yapın ve her konuyu anlayın. Anlamadığınız yerde soru sormaya �ekinmeyin. Yeni konumuz bir sayfanın i�inde herhangi bir yere link vermek. Bir konuyu anlatırken sayfanın i�inde herhangi bir yere link verebilirsiniz. Bunun i�in de a tagını kullanacağız. Bu tagın yanında name parametresi kullanılacak. Bir �rnekle bu konuya giriş yapalım. Şu anda �alıştığımız sayfanın başına d�nelim. �ncelikle link vereceğimiz yere bir isim veriyoruz. Bu sayfada sayfa başına giris_bolumu adı verdim. Sayfanın başlangıcına <a name="giris_bolumu"> kodunu giriyoruz. Bu bir etikettir. Bu b�l�me gitmek i�inse <a href="#giris_bolumu">tıklanacak metin</a>şeklinde bir link veriyoruz. Burada dikkat etmemiz gereken # karakterinin mutlaka kullanılması gerektiği. Bu karaktere AltGr+3 ile ulaşabiliriz. Eğer başka bir sayfada bulunan bir etikete tanımlanmış bir b�l�me link vermek istersek bu durumda yapmamız gereken sayfanın yolunu da href etiketi ile belirtmek. <a href="sayfa adı#b�l�metiketi adı>. Mesela web nedir sayfasında protokoller b�l�m�ne gitmek istersek <a href="../w_nedir.html#protokoller">web de hangi protokoller kullanılır</a> şeklinde bir kod girmemiz gerekecek. Bir deneyin.

Ders3 / Ders5