WEB TABANLI PROGRAMLAMA 6. ve 7. DERS Köprü Ekleme (hyperlinks) ve Map (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA
HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için <A> Anchor etiketi kullanılır. <A> etiketini kullanarak; Kendi Web Sitenizde başka bir Web Sayfasına http hyperlinki, Başka bir Web Sitesinin bir sayfasına http hyperlinki, Dosya download etmek için bir ftp linki, Mail mesajı oluşturmak için bir mailto linki oluşturabilirsiniz. Basit bir Anchor etiketinin (<A>) yazılışı; <A href= protokol:address > Gözükecek Metin </A>
HYPERLINKS - KÖPRÜ HREF Değeri href= bilg007.html href= bilg4/ bilg007.html href=../bilg007.html href=../web/index.html href= http://www.istanbul.edu.tr href= ftp://www.istanbul.edu.tr/uy gulamalar.zip href= mailto:my2@gmail.com Açıklama Çalışma dizini (klasörü) içerisindeki bilg007.html dosyasına link oluşturur. Çalışma dizini (klasörü) içerisindeki bilg4 alt dizininde bulunan bilg007.html ye link oluşturur. Bir yukarı düzey dizinde bulunan bilg007.html ye link oluşturur. Bir yukarı düzey dizinde bulunan web dizinindeki index.html ye link oluşturur. Başka bir web sitenin varsayılan ana sayfasına link oluşturur. FTP de bulunan bir dosyaya link oluşturur. Sitenizden indirilmesini istediğiniz dosyaya bir link oluşturur. my2@gmail.com e-posta adresine e-posta göndermek için bir link oluşturur. Eğer protokol adını yazmazsanız [ http:// yada ftp:// gibi] dosya (file) olarak alınır.
Örnek: 009_links.htm HYPERLINKS - KÖPRÜ <HTML> <HEAD> <TITLE>BİLG3 Link Sayfası (009_links.htm)</TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY bgcolor="yellow" text="blue" link="green vlink="red" alink="fuchsia"> <H1>Bazı Sık Kullanılan Linkler</H1> <H3> <A href=" bilg4001 ">001bilg4.html</A><BR> <A href="../web/ bilg4002.html ">002bilg4.html</A><BR> <A href= http://nucleus.istanbul.edu.tr/~bilg3>bilgisayar Ders Notları</A> </H3> </BODY> </HTML> <A> etiketinin TARGET özelliğine _blank değerini atayarak linkin yeni bir Web Tarayıcısı penceresinde açılmasını sağlayabiliriz. Çalışma: İç içe birkaç klasör açıp dosyaları bu klasörlere koyarak ta bu dosyalara link veriniz. Linklerden bir kısmını yeni pencerede açınız.
HYPERLINKS - KÖPRÜ Örnek: 010_yerimi.html Yer imi (Named Anchor) Kullanımı Yer imi uzun bir dokümanın içerisinde dokümanın belli kısımlarına linkler vermek için kullanılır. Yerimi oluşturmak için; 1. NAME özelliğine bir yer adı yazarak <A name> etiketi oluşturunuz. 2. Başka bir <A> etiketi ile # işareti kullanarak önceki verdiğiniz isme bağlantı oluşturunuz. <HTML> <HEAD> <TITLE>Bilg4 Link Sayfası </TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY bgcolor="yellow" text="blue" link="green" vlink="red" alink="fuchsia"> <H1><A name="ust">mevcut Kitaplarımız</A></H1> <H3> <A href="#sozluk">bilgisayar Terimleri Sözlüğü</A><BR> <A href="#builder">borland C++ Builder 6</A><BR> <A href="#flashmx">makromedia Flsah MX</A><BR> </H3><BR><BR> <H2><A name="sozluk">bilgisayar Terimleri Sözlüğü</A><A href="#ust">yukarı</a></h2> <BR><BR><BR><BR><BR><BR><BR><BR> <H2><A name="builder">borland C++ Buiilder 6</A><A href="#ust">yukarı</a></h2> <BR><BR><BR><BR><BR><BR><BR><BR> <H2><A name="flashmx">makromedia Flash MX</A><A href="#ust">yukarı</a></h2> <BR><BR><BR><BR><BR><BR><BR><BR> </BODY> </HTML>
WEB SAYFASINA RESİM EKLEMEK-HATIRLATMA Resim ve Hyperlink ler Bir resme hyperlink eklemek için <IMG> ve <A> etiketlerini birlikte kullanırız. Örnek: 014_resim4.html <HTML> <HEAD> <TITLE>Bilg4 </TITLE> <META http-equiv="content-type" content="text/html; charset=windows-1254"> </HEAD> <BODY> <A href="bilg4_resim1.html"><img src="nukegif.gif" align="middle border="0"></a> 011_image1.htm -- Resim Örneği <br clear="left"><br> <!Yeni pencerede linki açar target="_blank" --> <A href="bilg4_resimhizalama.html" target="_blank"><img src="nukegif.gif" align="middle border="0"></a> 012_image2.htm -- Resmin Align Özelliği <br clear="left"><br> <!Aynı çerçevede linki açar target="_self" --> <A href="bilg4_resimhizalama2.html" target="_self"><img src="nukegif.gif" align="middle border="0"></a> 013_image3.htm -- BR etiketinin clear özelliği <br clear="left"><br> <!Tüm sayfada linki açar target="_top" --> <A href="bilg4_resimwidth.html" target="_top"><img src="nukegif.gif" align="middle border="0"></a> 014_image4.htm -- Width ve Height Özelliği <br clear="left"><br> <!Üst Çerçevede linki açar target="_parent" --> <A href=" bilg4_resimlink.html " target="_parent"> <IMG src="nukegif.gif" align="middle border="0"></a> 015_images.htm -- Sayfanın Kendisi </BODY> </HTML>