Ekranınızı 1024x768 çözünürlüğe ayarlamanız önerilir
e-mail atmak için tıklayın Sık Kullanılanlar menusune eklemek için tıklayın Korfez.net'i İnternete başlangıç sayfası yapmak için tıklayın  





Demekki bir Web Sayfası hazırlamak istiyorsunuz!
   İşiniz var..
    Ders 4!..




Birazda Link vermesi (yada köprü de derler) öğrenelim.

Gerçekten çok basit. Örneğin Korfez.net'e bağlanmak için, şunu deneyin...

<BODY BGCOLOR="#FFFFFF">
Korfeze gidin!
</BODY>
Korfeze gidin!


Sonra bir çift anchor etiketi ekleyin.

<BODY BGCOLOR="#FFFFFF">
Korfeze <A> gidin!</A>
</BODY>
Korfeze gidin!


Sonra URL'sini ekleyin ve tamam!.. URL (Universal Resource Locator) demektir. URL esasında basit anlamda adres demektir.

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.korfez.net/">korfez.net!</A>
</BODY>
Korfeze gidin!


Email linki de aynı şekilde çalışır. Sadece sayfa adresi yerine Email adresi kullanırız.

<BODY BGCOLOR="#FFFFFF">
Bana <A HREF="mailto:kemal@webdersleri.com">E-Mail</A> yollayın!..
</BODY>
Bana E-Mail yollayın!..

 

SSS: E-mail mesajının Konu kısmını önceden nasıl doldurabiliriz?
Cevap: Çok kolay, işte aynen böyle:

<A HREF="mailto:kemal@webdersleri.com?subject:bir soru sormak istiyorum!">

...bu şekilde emailinizin konusunu önceden belirlemiş olurunuz, size emaillerinizi okumadan önce yada okuduktan sonra sınıflandırma kolaylığı sağlar.

 

SSS: Linklerin altındaki çizgiden nasıl kurtulabilirim?
Cevap: Teknik olarak HTML ile yapamazsınız, fakat Style Sheets kullanarak bunu başarmanız mümkün. Aşağıdaki kodu HTML dökümanınızın <HEAD> </HEAD> etiketleri arasına yerleştirin, sonsuza kadar çizgilerden kurtulun..

<style type="text/css"><!--
a:link, a:visited, a:active {text-decoration: none}
--></style>


Eğer dilerseniz bir resimden de link verebilirsiniz. Yukardaki 'Korfeze Gidin' örneğindeki gidin yerine bir resim koyabiliriz.

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.korfez.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101></A>
</BODY>
Korfeze

Not: Adaşımız korfez.com'a her nekadar tanışmasak da bir jest yapmış olalım, olur ya belki yolunuz düşer (ama önce fiyatlarını bir kontrol etmenizi tavsiye ederim.)


   

SSS: O çirkin mavi çerçeveden nasıl kurtulabilirim?
Cevap: Basit IMG etiketine BORDER=0 ekleyiniz!...

<BODY BGCOLOR="#FFFFFF">
Korfeze <A HREF="http://www.korfez.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 BORDER=0></A>
</BODY>
Korfeze

Linkler hakkında bir önemli konu daha... Başkalarının sayfalarına sormadan link verebilirsiniz, zaten webi web yapan da bu değil mi? Bizi nasıl buldunuz sanıyorsunuz? Bu arada hazır link vermesini öğrenmişken, bize de link verirseniz memnun oluruz. Hangi adres mi? Kolay,

<A HREF="http://www.korfez.net/htm/">En Güzel Web Dersleri</A>
En Güzel Web Dersleri

Büyük bir merak ve hevesle link derlemeye başlayabilirsiniz, ama sizden ricam, link vereceğiniz siteleri önce bir inceleyin. Çünkü rasgele link verirseniz, yada herkesin bildiği Yahoo, Altavista yada bizden Superonline, Turk.net gibi sitelere verirseniz kimseye çok fazla bir faydanız olmaz. Ama surf yaparken rasladığınız bir çok güzel site vardır, bence onları iyice inceledikten sonra linklerinizin arasına katınız.


Sayfanıza resimler koyarken, unutmatın, sayfanın yüklenme hızı epeyi düşecektir. Resmin kilobyte büyüklüğünü düşürmek için, ölçülerini düşürmek, hatta renk sayısını düşürmek gerekir. Örneğin;

Dimensions 310 x 304
Renk sayısı- 238
Büyüklük - 69 Kb

Dimensions 207 x 203
Renk sayısı- 238
Büyüklük - 34 Kb
Dimensions 207 x 203
Renk sayısı- 48
Büyüklük - 19 Kb

Gördüğünüz gibi, ilk resim, daha büyük, güzel ve kaliteli, fakat şöyle düşünün... resimlerinizi yüklemek, sonsuza kadar sürecekse, ziyaretçileriniz uçup gidecekler ve büyük olasılıkla hiçbir şeyi görmemiş olacaklar, (buna dikkat, sadece resimleri değil, hiçbir şeyi)
Siz bu web sayfalarını insanlar görsün diye yapmamışmıydınız?

Resimlerin nasıl küçültüldüğünü aşağıdaki GIF Optimizer'ı deneyerek görün. Resminizi yolluyorsunuz, ve "optimize" olmuş olarak geri geliyor. Unutmayın, Gif Optimizer bu derslerin bir parçası değil, başka bir sunucudaki bir program olup, kullanmak için online olmanız gerekmektedir.

GifOptimizer ücretsiz olup, GIF resimlerinizin ölçüsünü %75 kadar azaltabilmektedir. Optimize işi 4 basamakta yapılmaktadır.
  1. GIF resminizi GIF Optimizer sunucusuna Upload ediniz.
  2. Resimdeki renklerin sayısını azaltınız
  3. Resmin en ve yükseklik ölçülerini azaltınız,
  4. Optimize edilmiş resmi PC nize kaydediniz.
GifOptimizer, büyüklüğü 150kb kadar olan resimlerinizi küçültebilir,
hatta animasyonlu GIFleri bile. İstediğiniz kadar kullanınızi, bedavadır..
Adım 1: Upload GIF
Uzak dosya
Eğer, optimize edeceğiniz resim webde başka bir sunucuda ise:
  1. GIF'in URLsini aşağıda http:// diye başlayan kısıma devam ederek yazınız (Dikkat: resmin URLsi dedim, resmin olduğu sayfanın URLsi değil.)
  2. "Upload" buttonuna basınız...
(Örnek: http://www.herhangibir.com/resim.gif )

Yerel Dosya
Eğer optimize etmek istediğiniz GIF dosyası kendi bilgisayarınızda ise
  1. Aşağıdaki Gözat buttonunu tıklayın.
  2. Harddiskinizdeki yerel dosyanızı bulunuz,
  3. "Upload" buttonunu tıklayınız.


Media Builder'in diğer bedava araçlarını inceleyiniz:
GIFWorks • Animated Banner Maker • 3D Text Maker • ButtonMaker • FontMapper
Animated GIFs • Backgrounds • Borders • Icons • Lines • Fonts

Bir diğer opsiyon, eğer birçok resim göstermek istiyorsanız thumbnail görüntülerini sağlayabilirsiniz. Böylece sayfanın yüklenmesi kısa zaman alabileceği gibi, ziyaretçiler de gerçekten ilgi duydukları resimlerin yüklenmesini zaten bekleyecekleri için, hiç bir yere de gitmezler. Thumbnail resimleri tıklayanlar da daha büyük resmin olduğu sayfaya giderler.


Daha büyük resmi görmek için thumbnaili tıklayınız.

İlk yapacağınız şey, resim editörünüzü çalıştırıp (image editör), resimlerinizin daha küçük versiyonlarınızı yapacaksınız. Bu aynı zamanda resmin renk derinliğini de düşürecektir. Resimlerin küçük versiyonunu yapma işlemi çok önemli. Bazı kimseler thumbnail resimler yapma gayretiyle resmin <IMG> etiketindeki ebatlarını küçültüyorlar, bu da herşeyi iç içe sokmaktan başka bir işe yaramıyor. Bütün yapmanız gereken sadece daha küçük bir kopya yapmak, hepsi bu.

Haydi bir tane yapalım, sanırım ben Corvette'i kullanacağım (yani mavi arabayı.) Küçük ve büyük resimleri çalıştığınız klasörün içine koyunuz.

<IMG> etiketinizle başlayınız

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62>
</BODY>


<A> etiketlerini ilave ediniz.

<BODY BGCOLOR="#FFFFFF">
<A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=90></A>
</BODY>


URL'yi de eklediniz mi, tamamdır!

<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>


Bu arada, isterseniz o mavi çerçeveden kurtulmak için aşağıdaki gibi BORDER=0 şeklinde etiketin içine yazmayı unutmayın.

<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></A>
</BODY>


Bir başka link verme şekli ise, bir sayfanın tamamı yerine, yalnızca bir kısmına link vermek. Burayı tıklarsanız, gayet hoş biçimde URL'den ilk bahsetmeye başladığımız kısma gidersiniz. Örnek vermesi zor olduğundan size dilim döndüğünce anlatmaya çalışacağım.

İlk önce insanları yollamak istediğiniz kısımla işe başlayalım. O bölümün ilk cümlesinin ilk kelimesini bulun, ve <A> etiketlerinin içine alınız.

<A>Sonra</A> URL'sini ekleyin ve tamam!


İkinci etapta bir isim (NAME) verin.

<A NAME="yukari">Sonra</A> URL'sini ekleyin ve tamam!

Yaptığınız iş o noktayı işaretlemek oldu. Artık oraya birini yönlendirebilirsiniz.


Şimdi ise gönderen bölümün linkini hazırlayalım.

<A>Burayı</A> tıklarsanız, gayet hoş biçimde


Şimdi de yönlendireceğimiz dökümanı ekleyelim...

<A HREF="ders_4.html">Burayı</A> tıklarsanız, gayet hoş biçimde...


En son olarak ise anchor NAMEi aşağıdaki gibi bağlayın...

<A HREF="lesson04.html#yukari">Burayı</A> tıklarsanız, gayet hoş biçimde...

Tamamı bu kadar; gördüğünüz gibi yüksek matematik bilgisi filan gerektirmiyor değil mi??

Gerçekte bu konuyu anasayfadaki menu başlıklarında Sayfa İçine Link Vermek diye ele almıştık, hatta orada da belirttiğimiz gibi Sıkça Sorulan Sorular bölümleri de aynı mantık ile hazırlanmaktadır, dilerseniz tıklayarak bir inceleyin.

< Ders 3        Ders 5 >