Web Tasarım ve Programlama #4-: Bağlantı(Köprü) Oluşturma

1. Sayfa içi Bağlantı Oluşturma:

Html kodları kullanarak, sayfa içi bağlantılar oluşturabilirsiniz. Bir sayfadaki metne tıklayarak, aynı sayfanın başka bir bölümüne gidebilirsiniz.

<a href=”#…”>…</a>, <a name=”….”>…</a> komutları kullanılarak yapılmaktadır.

Örnek:Aşağıdaki örnekte donanım elamanlarıyla ilgili bir sayfamız vardır. Bu sayfada üstte madde madde verilmiş olan donanım elamanlarının üzerine tıklandığında alt kısımdaki açıklamasının bulunduğu yere gitmesini sağlayınız.?

Donanım Elemanları

  1. Anakart
  2. İşlemci
  3. Ram
  4. Haddisk
  5. Ekran Kartı

1. ANAKART
Kasanın içindeki  donanımlar arasında iletişim kurulmasını sağlayan karttır.

2.İŞLEMCİ
Bilgisayarın beynidir.

3.Ram
Bilgilerin geçici olarak kaydedildiği bellektir.

4.HARDDİSK
Bilgilerin kalıcı olarak saklandığı birimdir

5.EKRAN KARTI
Ekrana görüntünün gelmesini sağlayan karttır.

YAPILIŞI:

<body>
<p>Donanım Elemanları</p>
<ol>
<li><a href=”#anakart”>Anakart</a></li>
<li><a href=”#işlemci”>İşlemci</a></li>
<li><a href=”#ram”>Ram</a></li>
<li><a href=”#harddisk”>Haddisk</a></li>
<li><a href=”#ekran”>Ekran Kartı</a></li>
</ol>

<p><a name=”anakart”>1. ANAKART<br />
Kasanın içindeki  donanımlar arasında iletişim kurulmasını sağlayan karttır. </p>
<p><a name=”işlemci”>2.İŞLEMCİ<br />
Bilgisayarın beynidir.</p>
<p><a name=”ram”>3.Ram<br />
Bilgilerin geçici olarak kaydedildiği bellektir.</p>
<p><a name=”harddisk”>4.HARDDİSK<br />
Bilgilerin kalıcı olarak saklandığı birimdir</p>
<p><a name=”ekran”>5.EKRAN KARTI<br />
Ekrana görüntünün gelmesini sağlayan karttır. </p>
</body>

2. Sayfa Dışı Bağlantı Oluşturma:

Hazırlamış olduğunuz web sayfaları arasında bağlantılar tanımlayarak başka sayfalar, dokümanlar, resimler arasında geçiş yapabilirsiniz. Sayfa dışına herhangi bir bağlantı (link, köprü) oluşturmak için <a href>…</a> html etiketleri kullanılır.

  • Herhangi bir web sayfasına bağlantı oluşturmak;   <a href=”http://www.erkandos.com.tr”> ERKANDOS</a>
  • Hazırlamış olduğumuz site içerisinde link vermek; <a href=”index.html”>Ana Sayfa</a>
  • Herhangi bir yazıya tıkladığınız zaman resim açılması için; <a href=”okul.jpg”>Okulumuzun Resmini Görmek İçin Tıklayınız</a>
  • Herhangi bir dosyaya link vermek için; <a href=”anakartlar.pdf”>Portlar modülünü indirmek için tıklayınız…</a>
  • Herhangi bir dosyayı indirmek için<a href=”resimler.zip”>Bilgisayarınıza indirmek için tıklayınız</a>

Target parametresini kullanarak, açılacak olan sayfa, resim veya dosyanın açılacağı pencereyi belirtebiliriz.
<a href=”…” target=”…” > </a>
target=”_blank”: Bağlantının, yeni bir pencerede açılmasını sağlar.
target=”_self”: Bağlantının, aynı pencere içerisinde açılmasını sağlar.
target=”_top”: Bağlantının, aynı pencere içerisinde en üstten itibaren açılmasını sağlar.
target=”_parent” : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerinde açılmasını sağlar.
target=”çerçeve(frame) adı”: Bağlantının, adı verilen çerçevede açılmasını sağlamak için kullanılır.
<a href=”http://www.erkandos.com.tr” target=”_blank”> ERKANDOS</a>

3.E-Posta Adresine Bağlantı Oluşturma

E-posta adresine bağlantı oluşturmak için;
<a href=”mailto:e-posta adresi”>….</a> komutu kullanılır.
Örnek:
<a href=”mailto: erkandos@hotmail.com”> E-posta göndermek için tıklayınız.</a>

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir