HTML'de en önemli unsurlardan birisi olan Bağlantılar(Köprüler, Links) sayesinde hazırlanan birçok sayfayı birbirleriyle ilişkili hale getirmektir. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür. Örneğin, sol tarafta konuları veren bir menü bölümü olsun.
Kullanıcı bu bağlantılardan birisini tıkladığında ilgili konu açılır, sayfa sonlarındaki ileri-geri düğmeleriyle de bağlantılar oluşturulmuş, bunlar da tıklandığında ilgili sayfa açılır.
Bu yöntemle, ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri, bunların hepsine bağlantı kazandırmak mümkündür. Ayrıca yapılacak bağlantı sayfa içinde, yani dahili bir bağlantı da olabilir.
Yapmak istenilen bağlantıya göre kullanılacak komutları:
<a href="....">...</a>
Bu tag yardımıyla oluşturulan bağlantı ile yeni bir sayfa açabilir, kullanıcı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunulan bir dosyaya ulaşması sağlanabilir.
<a>...</a> tag’ları arasına yazılan yazılar bağlantı(link) özelliğine sahip olacaktır, yazının bağlantılı olduğunu, tarayıcı varsayılan bağlantı olarak altı çizili ve mavi renkli gösterir.
<a href="nilufer.gif"> buraya tıklandığında nilufer.gif resmi açılacak </a>
Birinci örnekte "buraya tıklandığında nilufer.gif resmi açılacak" yazısına bağlantı özelliği kazandırıldığından tarayıcı tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu bağlantıya tıkladığında tarayıcı o anda açık bulunan sayfa ile aynı dizinde bulunan nilufer.gif resmini açacaktır. Nilüfer.gif resim dosyası farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır.
<a href="midi.zip"> sıkıştırılmış midi dosyası için tıklayın </a>
İkinci örnekte aynı şekilde "sıkıştırılmış midi dosyası için tıklayın" yazısına bağlantı özelliği kazandırıldı.
Bu örnekte, dosya tipinden kaynaklanan bir fark var; ilk örnekte nilufer.gif'e tıklandığında tarayıcı resmi açacaktır, fakat bu örnekte tarayıcı kullanıcıya midi.zip dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açacaktır.
Tarayıcı(Internet Explorer), htm, html, txt, jpg, gif, uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyemez.
<a href="sayfa1.html"> sayfa1.html dosyasına gitmek için tıklayın </a>
Yine üçüncü örnekte oluşturulan linke tıklandığında aynı klasörde bulunan sayfa1.html isimli bir html dökümanı açılacaktır.
<a href="resim/resim1.jpg"> Bir numaralı resim </a>
<a href="resim/image/resim2.gif"> İki numaralı resim </a>
<a href="../araba/palio.jpg"> otomobil resmi </a>
Yukarıdaki örnekte altklasörlere/üstklasörlere verilen bağlantı örnekleri verilmiştir, resimler konusunda belirtilen kurallar burada da geçerli.
<a href="http://www.ege.edu.tr/"> tıklayın sitemizi ziyaret edin </a>
Bu örnekte de bir internet adresi verildi.
<a href="ftp://ftp.bilmuh.ege.edu.tr/"> tıklayın dosyaları indirin </a>
Burada bir ftp adresine verilen örnek link verildi.
<a href="mailto:kacan@bilmuh.ege.edu.tr"> mail atın </a>
Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to(kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.
Kullanıcı sayfadaki bir bağlantıyı tıkladığında, başka bir html dosyasının açılmasını isterse, örnek tag;
<a href="http://bilmuh.ege.edu.tr/~kurslar/bilgi.html"> Bu linke tıklanırsa bilgi.html dosyası açılır </a>
şeklinde olacaktır.
Konuyla ilgili kod aşağıda belirtilmiş ve web tarayıcısındaki görünümü ise, Şekil
<html><head><title></title></head>
<body background="snow.jpg">
<body background="snow.jpg" bgcolor="#FFFFFF" bgproperties="fixed" topmargin="3" topMargin=10 marginheight="10" marginwidth="10"
text="#fff000" WIDTH="100%" link="red" vlink="purple" alink="teal">
<p align="center"><font color="#80FFFF" size="4"><em><strong>
<img src="ege_logo.gif" width="60" height="60"></strong></em></font>
<a href="http://ege.edu.tr"><font color="#80FFFF" size="4"><em><strong>
<img src="logo2.gif" border="0" width="366" height="70"></strong></em></font></a>
<font color="#80FFFF" size="4"><em><strong>
<img src="ege_logo.gif" width="60" height="60"> </strong></em></font></p>
<table border="6" cellpadding="8" cellspacing="6" bordercolorlight="#FF0000" bordercolordark="#0000ff" align="center">
<tr>
<td valign="top" rowspan="6" width="600" background="arka1.gif" bgcolor="#FFff00">
<img src="baum2.gif" align="left" border="2" hspace="0" vspace="0" width="150" height="250">
<p align="center"><font color="#ffffff" face="Arial, Helvetica, sans-serif" size="4"><b>
<font color="white" face="comic sans ms">
BİLGİSAYAR EĞİTİM PROGRAMLARI</font></b> </font></p>
<p align="center">
<font color="#0000FF" size="2" face="Verdana, Arial, Helvetica, sans-serif">
<a href="http://bilmuh.ege.edu.tr/~kurslar/bilgi.html">
<b>TEMEL BİLGİSAYAR KULLANIM SERTİFİKA PROGRAMI </b></a>
</font></p>
<p align="center"> <font color="#0000ff" size="2"><strong>
<a href="http://bilmuh.ege.edu.tr/~kurslar/etep.html">
ELEKTRONİK TİCARET UZMANLIĞI EĞİTİM PROGRAMI </a>
<br> </strong></font>
<p align="center"> <font color="#0000FF" size="2"><strong>
<a href="http://bilmuh.ege.edu.tr/~kurslar/vbprg.html">
VISUAL BASIC 6.0 ile PROGRAMLAMAYA GİRİŞ </a>
<br> </strong></font>
<p align="center"> <font color="#00FF00" size="2"><strong>
<a href="http://bilmuh.ege.edu.tr/~kurslar/delphi.html">
DELPHI 5.0 ile PROGRAMLAMAYA GİRİŞ </a>
<br> </strong></font>
<p align="center"> <font color="#0000FF" size="2"><strong>
<a href="http://bilmuh.ege.edu.tr/%7Ekurslar/belge1.html">
BİLGİSAYAR PROGRAMCILIĞI, SİSTEM ANALİSTLİĞİ<br>
ve WEB TASARIMCILIĞI SERTİFİKA PROGRAMI </a>
</strong></font>
<p align="right"> <font color="#000000" size="2" face="Times New Roman">
<strong>( 01 Ekim 2001-19 Ağustos 2002 Hafta İçi Sertifika Programı-DOLMUŞTUR) <br> ( 06 Ekim 2001-19 Ağustos 2002 Hafta Sonu Sertifika Programı-DOLMUŞTUR)
</strong></font></p>
</table> </body> </html>
Şekil 17. Web sayfasının görünümü
Örneğin kullanıcı DELPHI 5.0 ile PROGRAMLAMAYA GİRİŞ bağlantısına tıkladığında delphi.html sayfası(Delphi ile ilgili kurs sayfası) tarayıcı ekranında görüntülenecektir.
Sayfa içi(dahili) bağlantılar
<a href="#....">..........</a><a name="....">..........</a>
Sayfa içi(dahili) bağlantılar, bu komut kullanarak hazırlanır. Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konu açılsın.
Böyle bir sayfa hazırlamak için yapacağımız işlemler:
- "tıklandığında" açılacak konuyu işaretlemek
<a name="....">................</a>
- Tarayıcıya, hazırlayacağımız menüye "tıklandığında" bu işaretli konuya gitmesini bildirmek.
<a href="#...">.................</a>
Sayfa içerisindeki başlıkları <a name>...</a> komutları arasına alınır, name kısmına başlığı hatırlatıcı bir isim verilebilir. <u> ve <b> etiketleri, önceden başlığı altı çizili ve koyu olarak yazar. Yine 1-2-3 başlıklarıyla oluşturulan menü bağlantıları(link) <a href> komutuyla hazırlanır, burada dikkat edilecek husus; name kısmında başlığa verilen hatırlatıcı ismin önüne # işaretini koyarak href kısmına yazılmasıdır.
Bu konuyla ilgili olarak hazırlanan örnekte, kursta verilen derslerle ilgili bağlantılar ve bağlantılarla ilgili yerler(ilgili kursun içerikleri) aynı html dosyasında Şekil 18.’de görüldüğü gibi hazırlanmış olsun(dersicerikler.htm). İlgili kod yazılımı aşağıda verilmiştir.
<html>
<head>
<title>Dersicerikleri</title>
</head>
<body background="chalk.gif">
<p align="center"><font color="#800000" size="4"><strong><b>
<img src="logo3.gif" width="62" height="62">
<img src="logo2.gif" width="360" height="72">
<img src="logo3.gif" width="62" height="62"> </b> </strong> </font></p>
<hr size="10" color="#333366">
<p align="center"><font color="#800040" size="6"><b>Ders İçerikleri</b></font>
<a href="belge.html"><font color="#800040"><b>[Ana Sayfaya Dön]</b></font></a>
</p>
<ol>
<li><a href="#1">BPSA102 ALGORİTMA VE PROGRAMLAMA</a></li>
<li><a href="#2">BPSA202 VERİ VE DOSYA ORGANİZASYONU</a></li>
<li><a href="#3">BPSA403 SİSTEM ANALİZİ (DİZGE ÇÖZÜMLEME) VE PROJE YÖNETİMİ</a></li>
<li><a href="#4">BPSA302 VISUAL BASIC İLE GÖRSEL PROGRAMLAMA </a></li>
<li><a href="#5">BPSA301 VERİTABANI SİSTEMLERİ </a></li>
<li><a href="#6">BPSA201 PASCAL İLE PROGRAMLAMA </a></li>
<li><a href="#7">BPSA401 DELPHI İLE GÖRSEL PROGRAMLAMA </a></li>
<li><a href="#8">BPSA101 BİLGİSAYARA GİRİŞ DERSİ İÇERİĞİ</a></li>
<li><a href="#9">BPSA203 WEB TASARIMI</a></li>
<li><a href="#10"> BPSA303 INTERNET PROGRAMLAMA </a></li>
<li><a href="#11">BPSA103 BİLGİSAYAR AĞLARI ve INTERNET UYGULAMALARI </a></li>
<li><a href="#12">BPSA402 AĞ İŞLETİM SİSTEMİ</a></li>
</ol>
<hr size="6" color="#333366">
<p> <a name="1"></a><font color="#800000" size="4"> <strong><b>BPSA102
ALGORİTMA VE PROGRAMLAMA</b></strong></font></p>
<ol type="1" start="1">
<li><font face="Bookman Old Style">PROBLEM ÇÖZME. </font></li>
<li><font face="Bookman Old Style">GİRİŞ-İŞLEM-ÇIKIŞ SÜRECİ.
</font></li>
<li> <font face="Bookman Old Style"> ALGORİTMA TASARIMI. ALGORİTMALARDA KESİNLİK, SONLULUK, ETKİNLİK, GİRİŞ-ÇIKIŞ. </font></li>
<li><font face="Bookman Old Style">PROGRAMLAMA DİLLERİ. </font></li>
</ol>
<blockquote>
<ul>
<li><font face="Bookman Old Style">Quick Basic Programlama Dili: </font></li>
</ul>
<dir>
<li><font face="Bookman Old Style">Sabitler, değişkenler ve ifadeler. </font>
<p><font face="Bookman Old Style">Aritmetiksel, ilişkisel ve mantıksal işlemciler. </font></p>
<p><font face="Bookman Old Style">Giriş-Çıkış deyimleri. </font></p>
<p><font face="Bookman Old Style">Koşul ve Tekrar deyimleri. </font></p>
<p><font face="Bookman Old Style">Vektör ve matris gösterimleri. </font></p>
<p><font face="Bookman Old Style">
Karakter bilgi işlemleri.
</font></p>
<p><font face="Bookman Old Style">
Altyordam ve Fonksiyon altprogramları.
</font></p>
</li>
</dir>
</blockquote>
<blockquote>
<ul>
<li><font face="Bookman Old Style">
Güncel problemlere yönelik örnekler ve uygulamalar.</font></li>
</ul>
</blockquote>
<p> <a name="2"><font color="#800000" size="4"> <strong>
<b>BPSA202 VERİ VE DOSYA ORGANİZASYONU</b> </strong></font></a></p>
<p> <a name="2"> <font face="Bookman Old Style">
DOSYA ORGANİZASYONU</font></a></p>
</body></html>
Şekil 18. Web sayfasının görünümü
Kullanıcı örneğin, BPSA102 ALGORİTMA ve PROGRAMLAMA linkine tıkladığında, aynı sayfada ilgili yer olan BPSA102 ALGORİTMA ve PROGRAMLAMA başlıklı dersin içeriği bölümüne yönlenecektir. Örnekle ilgili web sayfası görünümü Şekil 19.’da görülmektedir.
Şekil 19. Web sayfasının görünümü
Hiç yorum yok:
Yorum Gönder