EFEKLİ SAYFA GİRİŞ ÇIKIŞLARI
tek bir satır kodu kullanarak sayfanıza giriş ve çıkışlarda efeklerr oluşturacaksınız.
<HEAD></HEAD> komutları arasına yerleştirilen <META> komutu içine yerleştirdiğiniz yeni bir ifade geçiş yapmaya olanak tanıyor.
Aşağıdaki satırları HTML sayfanızın ilgili yerlerine girdikten sonra başka bir URL'ye atlayın ve geri dönün, sonuç sizi oldukça şaşırtacaktır. İfadeyi nasıl özelleştireceğinizi aşağıda bulacaksınız.
1. Siteye Girişte
<META HTTP-EQUIV="Site-Enter" content="revealTrans(Duration=1.0,Transition=23)">
2. Site Ayrılırken
<META HTTP-EQUIV="Site-Exit" content="revealTrans(Duration=1.0,Transition=23)">
3. Sayfa Açılışlarında
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">
dediğiniz HTTP-EQUIV ifadesinin açılımı şöyle "Hypertext Transfer Protocol Equivilant". Basit olarak bu ifade HTTP protokolünü kullanan HTML sayfasının nasıl görüntüleneceğinini tanımını yapar. "Site-Enter" kelimesi sayfanıza girildiğinde neler olacağını, "revealTrans" ifadesi ise daha önceki sayfanın belirlenen methodla "kaybedileceğini" söylüyor.
META tag'ı içerisinde kullanılan Duration=1.0 ifadesi geçişi gerçekleştirilen her bir bloğun 1saniye içerisinde işleneceğini, Transition=23 ifadesi ise diğer 22 geçişten bir tanesinin rasgele olarak seçileceğini belirtiyor.
Geçiş Numaraları:
Örneğimizdeki 23 numarasını kullandığınızda ise aşağıdaki numaralardan rasgele bir tanesi seçilecektir.
# Geçiş
1 İçten dışa geçiş
2 Dıştan içe geçiş
3 Ortadan dışa doğru geçiş
4 Alttan üste geçiş
5 Üstten alta geçiş
6 Soldan sağa geçiş
7 Sağdan sola geçiş
8 Soldan sağa dikey çözülme
9 Üstten aşağı yatay çözülme
10 8 ve 9'un birleşimi
11 8'e oldukça benziyor
12 Piksel piksel çözülme
13 Dıştan içe dönerek geçiş
14 İçten dışa dönerek geçiş
15 Üstten ve alttan geçiş
16 Ortadan üste ve alta kapanma
17 Sağdan sola çapraz geçiş
18 Diğer açıdan sağdan sola çapraz geçiş
19 17'nin aynısı, aksi yönüne
20 18'in aynısı, aksi yönüne
21 Rasgele yatay çizgiler
22 Rasgele dikey çizgiler
LİNK VERMEK
1-) Bir Web sitesine Link vermek2-) Site içi Link vermek
3-) Mail adresine Link vermek
4-) Sayfa içine Link vermek
5-) Bir Resme Link vermek
6-) Dokümana link vermek.
HTML sayfasına bağ (link) yerleştirmek
<a> ve </a> : bu komutla bağ (link) yapılır.
Bir web sayfasına link vermek.
<a href="www.html-dersi.blogspot.com"> html dersleri </a>
Biçiminde kullanılır.
Mail adresine link vermek
<a href=mailto:html-dersi@blogspot.com> Mail Gönder </a>
Site İçine Link vermek
<a href=”html-link.htm”>Tıklarsan bu sayfa tekrar açılır </a>
Resme link vermek.
<a href="resim.gif"> Resmi Görüntülemek için tıklayın</a>
Dökümana link vermek.
<a href="ornek.zip"> Bu Dosyayı indirin </a>
<a> tagının parametreleri.
Target parametresi
Bağlantının açılacağı pencereyi belirtmek için kullanılan"target"
parametresini kullanılır.
Kullanımı:
<a href="html-dersler.htm" target="..." >html dersleri</a>
target="_blank" , Bağlantı yeni bir pencerede açılır.
target="_self" , Bağlantı aynı pencere içerisinde açılır.
target="_top" , Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
target="_parent" , Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
target="çerçeve adı" , Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.( Ayrıntı için "Çerçeveler" konusuna bakın.)
Linklere Klavye Tuşları ile Kısa Yol Atamak
Linklerinize klavye kısa yolları atayabilirsiniz. Böylece klavye tuşları kullanarak sitenizin içerisinde gezilebilir. Bunu <a> tagının elemanı olan accesskey ile yapabiliriz.
Kullanımı:
Link için atadığınız kısa yol harfi tek başına çalışmaz. Yani yazacağınız harf ile "ALT" tuşuna basarak linki aktif hale getirebilirsiniz.yani ALT+A
Title ile linklere acıklama verin; mouse link üzerine getirildiginde link hakkında ayrı bir açıklama yapması sağlayabilirsiniz.
<a href="www.html-dersi.blogspot.com" title="Html dersleri Ana Sayfaya Dön">Ana Sayfa</a>
Bir resme nasıl link verilir.
Resme tıklandığında bu sayfa tekrar yüklenecektir.
Resimlerde 'MAP' kullanarak link yapmak.
Map'ler bir resmin değişik yerlerine tıklandığında değişik bağların yüklenmesi olarak tanımlanır.
Kullanımı;
<area shape="poly" coords="108,87,48,33,151,21" href="#">
<area shape="rect" coords="8,45,80,95" href="#">
<area shape="circle" coords="31,11,17" href="#">
</map>
<img src="logo_plain.png" width="160" height="100" ISMAP usemap="#falanca">
name ile belirttiğimiz isim '<img ..' içinde usemap="#..." ile kullandığımızın aynısı.
shape belirteci ile dikdortgen, daire, ya da poligon tanımlayabiliyoruz. Dikdörtgenin koordinatlarını: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biçiminde 'coords="..." ' kısmında belirtiyoruz. 'href="..." ' bölümü ise bu dikdortgen alana tıklanıldığında neyin yüklenmesi gerektiğini söylüyor.
web sitesi alanında bir çember için X-merkez,Y-merkez,R-yarıçap biçiminde koordinat tanımlıyoruz.
Poligon tanımlarken sırayla her bir köşenin X,Y biçiminde koordinatlarını html kodları içine giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarını saat-yönünde tanımlamamız gerektiğidir. Ayrıca poligonu kapamaya da tarayıcı programlar arasında uyumsuzluk nedeniyle dikkat etmeliyiz. Yukarıdaki üçgen örneğini incelemek aslında poligon tanımı yapabilmek için yeterli. Üçgen için dört nokta kullandık (dördüncü ilkinin dibinde). Aynı zamanda bu üçgenin X,Y betimlemeleri de saat-yönünde girilmiş (noktaları kağıt üzerinde yaklaşık olarak işaretlerseniz bu 'saat-yönü' kavramını daha iyi anlayabilirsiniz).
son olarak da '<area shape="default" nohref>' ile resmin diger bölgelerine tıklanıldığında hiç bir sey yapılmaması gerektiğini söylüyoruz.
Çapa Yaratmak
Çapa bir sayfanın bir yerinden aynı sayfanın başka bir yerine gitmek için yapılılan linke denir. Mesela sayfa sonundaki "Sayfa Başı" na tıkladığında sayfa başına gidilmesi. Bunu çapa ile yaparız.
Çapa yaparken <a> tagının name elemanını kullanılır.
Yukarıda sayfa başılığımız olan "Html Dersleri"ne "#" işareti ile isim verdik.
Şimdide sayfa sonunda oluşturacağımız linki nasıl oluşturacağımızı inceleyim.
Örnek için tıklayınız- Sayfa Başı -
Dikkat edilmesi gereken name elemanını verdiğiniz isim ile href'in alacağı name aynı olmalı aksi halde linkiniz çalışmaz.
Çapa yaparken başka bir sayfanın herhangibir ilgili yerinin açılmasınıda sağlayabiliriz.
tasarim1.htm sayfasında da ilgili yere aşagıdaki çapayı yazıyoruz.
<a name="ilgiliyer">İlgili Yerimizin başlığı</a>