noimage

İçeriği Paylaş:

WEB SAYFALARINA LİNK/BAĞLANTI EKLEMEK

HREF

  • HREF=”url”
  • Bu adres, kendi sabit diskinizde bir klasör (ve alt-klasörler) içindeki bir dosyanın adı olabileceği gibi, HTTP, FTP veya elektronik posta yoluyla ulaşılabilecek bir Web alanı ve o alanın içindeki bir dosya
  • Örnekler:

HTTP:<a href=”http://www.karabuk.edu.tr“>Karabük Üniversitesi</a>FTP:<a href=“ftp://software.com/pub/ “>Bedava Yazılımlar </a> E-Posta:<a href=“mailto:kbuzem@karabuk.edu.tr “>Sorularınız için tıklayınız</a> Dosya:<a href=”http://www.karabuk.edu.tr/bahar/ödev.pdf“>Ödev dosyanız</a>Dosya:<a href=”http://www.karabuk.edu.tr/yayin/makale.doc“>Okunacak döküman</a>ACCESSKEY, TARGET

  • ACCESSKEY=”metin”: Bu özellikle, bağlantının fare ile tıklamak yerine, klavyede bir veya birden fazla tuşa basarak yapılmasını sağlayabilirsiniz. “Metin” kelimesinin yerine yazacağınız karakterler, klavye kestirmesi
  • TARGET=”pencere”: Bu bağlantı sağlandığı zaman alınacak HTML sayfasının nerede kullanılacağını gösterir.

_blank: Alınacak sayfa veya unsur için yeni bir tarayıcı penceresi açılır._parent: Alınacak unsur, o anda açık sayfayı oluşturmuş bir ana sayfa varsa, onun yerine konulur._self: Alınacak sayfa mevcut sayfanın bulunduğu tarayıcı perceresine konulur._top: Alınacak sayfa mevcut pencereye en üstten itibaren konulur.ÖRN:<a href=”http://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a> Grafik Ögelere (Resme) Link vermek

  • Aynen metne link vermek gibidir. Farkı Metnin yerine resim ekleme etiketleri yazılır. Böylece başta belirlenen link eklenen resimlere verilmiş

<a href=” http://www.karabuk.edu.tr “><img src=“KBUamblem.jpg” alt=“KBU” width=”32″ height=”32″ /></a>Hatırlatma: Metne link verme:<a href=”http://www.karabuk.edu.tr”>Karabük Üniversitesi</a>ÖRN: <html><body> <p>Create a link of an image:<a href=”default.asp”><img src=”smiley.gif” alt=”HTML tutorial” width=”32″ height=”32″ /></a></p> <p>No border around the image, but still a link:<a href=”default.asp”><img border=”0″ src=”smiley.gif” alt=”HTML tutorial” width=”32″ height=”32″ /></a></p> </body></html>1COORDS ve SHAPE – Resmin belirli kısımlarına link vermek / image map

  • COORDS=”X1, Y1, X2, Y2… Xn, Yn”: Bu özellik, bağlantının metinde değil, bir grafik üzerinde oluşturulması halinde, resmin hangi koordinatları arası tıklanırsa, bağlantının sağlanacağını gösterir. Bu etiket, SHAPE yüklemi ile birlikte kullanılır.
  • SHAPE=(RECT/CIRCLE/POLY/DEFAULT): Bu özellik ve karşısına yazacağınız ifade ile, tarayıcıya bir grafik unsurun üzerine konmuş bağlantı noktasının biçimini tanımlarsınız. Rect şeklin dörtgen, circle daire, poly çok kenarlı ve default ise arayıcının varsayılan bağlantı şekli olduğunu ifade eder. Bu özelliği COORDS yüklemi ile birlikte kullanırsınız. Bu durumda COORDS’ün önüne yazacağınız “X1, Y1, X2, Y2, Xn, Yn” şeklindeki koordinatların da anlamı farklı olur. SHAPE’i “rect” olarak bildirirseniz, X1 ve Y1 şekin sol üst köşesinin, tarayıcı penceresinin sol üst köşesinden itibaren kaç pixel sağa ve aşağı konulacağını; X2 ve Y2 ise şeklin sağ alt köşesinin koordinatlarını gösterir (Örnek: SHAPE=rect, COORDS=”0,0,9,9”). SHAPE’i “circle” olarak tanımlarsanız, koordinatlar dairenin merkezini ve çapını gösterir (Örnek: SHAPE=circle COORDS=”10,10,5). Çok kenarlı bir şekil tanımlamanız halinde, her bir koordinat diğerine, son koordinat da birinciye bağlanır (Örnek SHAPE=poly COORDS=”10,50,25,20,20,50”). Şeklinde DEFALUT olarak bırakılması ise kullanılmamaktadır.COORDS  ve SHAPE – Resmin belirli kısımlarına link vermek / image mapÖRN:<html><body><p>Click on the sun or on one of the planets to watch it closer:</p><img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap” /><map name=”planetmap”><area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”sun.htm” /><area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”mercur.htm” /><area shape=”circle” coords=”124,58,8″ alt=”Venus” href=”venus.htm” /></map></body></html>Denemek İçin Tıklayın: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap
  • Sayfa içinde belirli bir noktaya link vermek
    • NAME özelliği ile yapılır.
    • NAME=”metin” şeklinde kullanılır.
    • Anchor’a, yani gidilecek linke isim vererek, daha sonra bu noktaya atıfta bulunma imkanı kazandırır.
    • Sayfadaki belirli bir konumu isimlendirmek:

    <a name=“soru 1″>Soru 1: Ders kayıtları ne zaman?</a>

    • İsimlendirilen konuma link vermek:

    <a href=”#soru1″>11-18 Şubat</a>

    • Bir başka sayfadan, isimlendirilen bu konuma link vermek:

    <a href=”http://www.karabuk.edu.tr/Sorular.htm#soru1“> Soru 1: Ders kayıtları ne zaman?</a>ÖRN: <a href=”#cevap1″>Uzaktan Eğitim nedir?</a><br><a href=”#cevap2″>Örgün eğitimle uzaktan eğitimin farkı nedir?</a><br><a href=”#cevap3″>Karabük Üniversitesi Uzaktan Eğitim Merkezinin web sitesi adresi nedir? </a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name=”cevap1″></a><a href=”#top”>Yukarı</a><br>1. Uzaktan Eğitim nedir?</b>Uzaktan Eğitim, öğrenci ile öğretenin birbirinden uzakta olmalarına karşın eş zamanlı ya da farklı zamanlı olarak bir araçla iletişim kurdukları bir eğitim sistemidir.<br><br><br><br><br><a name=”cevap2″></a><a href=”#top”>Yukarı</a><br>2. Örgün eğitimle uzaktan eğitimin farkı nedir?</b></font></p><br><p><font face=”Arial”>Örgün eğitim; öğreten ve öğrenenin aynı fiziksel ortamda bulunduğu eğitim şeklidir. Uzaktan eğitimde ise; öğreten ve öğrenenin aynı fiziksel ortamda bulunma zorunluluğu yoktur.<br><br><br><br><br><a name=”cevap3″></a><a href=”#top”>Yukarı</a><br>3. Karabük Üniversitesi Uzaktan Eğitim Merkezinin web sitesi adresi nedir?</b>http://kbuzem.karabuk.edu.tr<br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Alıştırma

    • Linkler
    • Çerçeveler ve linkler

    Aşağıdaki kodlardan oluşan dört ayrı HTML dosyası oluşturun ve aşağıdaki gibi isimlendirin (ilk üçünde sadece başlıklar ve renkler farklıdır).Her üç dosyayı da aynı klasörde saklayın ve ardından liste.htm’yi çalıştırın. Bağlantılara tıklayarak sonuçları izleyin.                     ogut1.htm                        ogut2.htm                          ogut3.htm                                 liste.htm1Ardından aşağıdaki dosyaları da oluşturun.1Şimdi de aşağıdaki dosyayı oluşturun ve ardından tarayıcınızda çalıştırın. Linklere tıklayarak bir önceki uygulamadan farkına dikkat edin.

    ogutler.htm

    <HTML><HEAD> <TITLE>Ogutler</TITLE><meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″></HEAD> <FRAMESET BORDER=”0″ COLS=”240,*”><FRAMESET ROWS=”180,*”><FRAME SRC=”anim.htm”  NAME=”anim”  NORESIZE  SCROLLING=”no”  MARGINHEIGHT=”0″ MARGINWIDTH=”0″><FRAME SRC=”liste.htm” NORESIZE SCROLLING=”no” NAME=”liste” MARGINWIDTH=”10″ MARGINHEIGHT=”10″></FRAMESET><FRAMESET ROWS=”271,61%”><FRAME SRC=”temp1.htm” NORESIZE SCROLLING=”no” NAME=”baslik” MARGINWIDTH=”10″  MARGINHEIGHT=”10″><FRAME SRC=”ogut1.htm” NORESIZE SCROLLING=”auto” NAME=”ogut” MARGINWIDTH=”10″   MARGINHEIGHT=”1″></FRAMESET></FRAMESET> <NOFRAMES><BODY><P>Maalesef bu sayfayı çerçeveli olarak göremiyorsunuz. Onun için size düz bir liste veriyoruz:</P><P><B><FONT SIZE=”5″ COLOR=”Red”><A HREF=”ogut1.htm”>Grafikle İlgili İlkeler</A></FONT></B></P><P><FONT SIZE=”5″ COLOR=”Red”><B><A HREF=”ogut2.htm”>İçerikle İlgili İlkeler</A></B></FONT></P><P><FONT SIZE=”5″ COLOR=”Red”><B><A HREF=”ogut3.htm”>Davranışla İlgili Kurallar</A></B></FONT></P></BODY></NOFRAMES></HTML>

İçeriği Paylaş:
İlginizi Çekebilir
Yorum Yapılmamış

Henüz Hiç Yorum Yapılmadı..

Yorum Yaz

WEB SAYFALARINA LİNK/BAĞLANTI EKLEMEK

HTML

22/08/2017 | Yorum Yok | 49 | Mustafa Küçükakarsu