Buradasınız

HTML Etiketleri 3

 BAĞLANTI (KÖPRÜ, LİNK) OLUŞTURMA

 Sayfa içi veya başka bir web adresine gitmek için kullanılan etiket <a> dir. <a> etiketi ile sayfa içinde, web sitemiz içinde veya başka bir web sitesine bağlantı oluşturabiliriz.

 

 Parametre

Değer

Açıklama

href

URL

Sayfa adı

Resim adı

Bölüm adı

E-posta adresi

Linkin tıklandığında gideceği hedefin adresidir. Bu bir başka sitenin URL’si, site içindeki başka bir sayfanın yada resmin adı, aynı sayfa içindeki bölümün adı veya e-posta adresi olabilir.

name

İsteğe bağlı bir isim olabilir

Aynı sayfa içinde linkler oluşturmak için linkin gideceği yerde işaret oluşturmak için kullanılır. Bir başka deyişle sayfa içinde bölüm oluşturmak için kullanılır. Sonra aynı sayfadaki linkler bu bölümlere yönlendirilir.

target

_blank _parent _self _top

_blank: Bağlantıyı yeni bir pencerede açar.

_parent: Açılan bağlantı, açık sayfanın yerinde bağlantıyı açar.

_self: Bağlantıyı aynı pencere içerisinde açar.

_top: Bağlantıyı aynı pencere içerisinde sayfanın en üstünden itibaren açar.

 

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

Bir sayfada belirli bölgelere ulaşmak için etiketler kullanılabilir. <a href="#...">...</a>, <a name="...."> komutlarını kullanarak sayfa içi (dahili) bağlantıları hazırlayabiliriz.

 

Sayfada tıklanmasını istediğiniz yere yazılacak etiket(# koyularak herhangi bir başlıkyazılabilir #bolum1,#sayfabasi gibi)

<a href="#...">...</a>

 

sayfa içinde gidilmesi istediğiniz yeri belirlemek için kullanılan etiket ust kısımda kullanılan etiket yazılır # konulmadan.

<a name="...."></a>

 

 

Aşağıdaki örnek ile inceleyelim.

 

<HTML>  
  <HEAD>       <TITLE> Bağlantı ayarları </TITLE>     </HEAD> 
<BODY>  
     <ol> 
<li>    <a href=#1>ASP nedir?</a>
 <li>   <a href=#2>ASP nasıl çalışır?</a>
 <li>   <a href=#3>ASP ile bileşen kullanma</a>
     </ol> 
   <P><A NAME="1"></A><FONT SIZE=+1><FONT COLOR="red">1.ASP  
    nedir?</FONT></FONT> 
    Sunucu taraflı bir teknoloji olan ASP, (Active Server Pages/Aktif Sunucu Sayfaları) kullanıcı  
    tarafına etkileşimli, dinamik Web sayfaları göndermek için kullanılır. ASP, WEB  
    programcılarına HTML, scripting ve kullanıcıdan bağımsız veritabanı uygulamalarını  
    özgürce kullanma fırsatı verir. 
      
    <P><A NAME="2"></A><FONT SIZE=+1><FONT COLOR="red">2.ASP nasıl   
    çalışır?</FONT></FONT> 
    ASP arabiriminin işleyişi oldukça basit, sisteminize ASP eklentisini yüklediğinizde Internet     
    Information Server'ınızın zaten sahip olduğu scripting özellikleri işlemeye başlıyor. İstemci   
    tarafı sunucudan normal bir HTML sayfasını istediğinde, IIS bu dosyayı sabit diskten   
    çağırarak istemci tarafındaki WEB tarayıcıya yollar. İstemci tarafından yapılan istek bir ASP   
    sayfasıysa IIS bunu sayfanın uzantısından anlayarak ASP eklentisini devreye sokar. ASP    
    eklentisi sayfa içindeki scriptleri yine IIS'a çalıştırdıktan sonra oluşan HTML sayfasını  
    istemci  tarafındaki WEB tarayıcısına yollar. 
 
    <P><A NAME="3"></A><FONT SIZE=+1><FONT COLOR="red">3.ASP ile bileşen  
    kullanma</FONT></FONT> 
    Microsoft'un sunucu teknolojisi ASP için birçok ikinci parti bileşen bulunuyor. ASP   
    sayfaları ile uyum içerisinde çalışarak sonuç sayfalarının oluşturulması, WEB sayfası  
    sahiplerine işlenmiş bilgi aktarılması gibi işlere yarayan bileşenlerden en popüler olanları   
    ASPMail ve  RoboHTTP. Server Objects firmasının bu iki ürünü, sayfadaki formların  
    içeriğinin kullanıcıya e-mail olarak kullanılması, misafir defteri oluşturulması ve birçok   
    değişik bilginin bir sayfada toplanması gibi işlemleri kolayca hallediyor. 
</BODY>  </HTML>

 

 

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

Yayınlana sitenin dışındaki farklı bir site yada sayfaya gitmek için <a href="http://"    >...</a> komutunu kullanırız. Sitenin yada sayfanın URL adresi tam şekilde yazılmalıdır.

Bu komutlar arasına yazmış olduğunuz ifade mavi renkte ve altı çizili olarak ekrana gelir. İfadenin üzerine tıkladığınızda yazmış olduğunuz WEB adresine sizi yönlendirecektir.

 

<A HREF="http://www.bilimokulu.net">  Ekranda lin için görünecek ifade</A> 

 

Örnek

<HTML>  
  <HEAD>       
        <TITLE> Bağlantı ayarları </TITLE>     
  </HEAD> 
    <BODY>  
     Bilişim bölümünün web sitesine gitmek için 
     <a href=” "http://www.bilimokulu.net ">tıklayınız.</a>
    </BODY>  

</HTML>

 

Örnek

<html> 
    <head> 
        <title>Bağlantılar</title> 
    </head> 
    <body> 
        <h2>Yararlı Linkler</h2> 
        <ul type="square"> 
            <li><a href="http://www.google.com.tr">Google</a></li> 
            <li><a href="http://www.bilimokulu.net">Bilişim Bölümü</a></li> 
            <li><a href="http://www.meb.gov.tr">MEB</a></li> 
        </ul> 
    </body> 
</html>

 

3.Site İçi Bağlantılar

Bu tür bağlantılarda kendi sitemiz içindeki farklı bir sayfaya link veririz. Gidilecek olan sayfanın adresi bulunduğumuz sayfaya göre yazıldığı için göreceli yol kullanılmış olur. Göreceli yollarda; “Bulunduğumuz yere göre gitmek istediğim sayfa nerede kalıyor?” sorusunu sormak gerekir.

Eğer gitmek istediğimiz sayfa;

  • Bulunduğumuz yerde ise: <a href=”sayfa.html”>Git</a>
  • Bir üst dizinde ise: <a href=”../sayfa.html”>Git</a>
  • İki üst dizinde ise: <a href=”../../sayfa.html”>Git</a>
  • Bir alt dizinde ise: <a href=”dizin/sayfa.html”>Git</a>
  • İki alt dizinde ise: <a href=”dizin1/dizin2/sayfa.html”>Git</a>

Görüldüğü gibi bir üst dizine çıkmak için ../ kullanılmıştır. Bir dizine girmek için dizin/ ifadesi kullanılmıştır. Buradan örnekle diyelim ki bir üst dizindeki dersler dizininde bulunan ders1.html sayfasına giden bir link vermek istersek:
<a href=”../dersler/ders1.html>Git</a> şeklinde bir adres yazmalıyız.

 

Örnek: Ana sayfamızda linklerine tıklandığında sitemiz içindeki ilgili sayfaya giden linkler kuralım.

 

  • index.html sayfasından > donguler.html sayfasına bağlantı
    • <a href=”dersler/donguler.html”>Döngüler</a>
  • ifelse.html sayfasından > index.html sayfasına bağlantı
    • <a href=“../index.html”>Ana Sayfa</a>
  • degiskenler.html sayfasından > degiskenornekleri.html sayfasına bağlantı
    • <a href=”../uygulamalar/basit/degiskenornekleri.html”> Örnekler için tıklayınız </a>
  • giris.html sayfasından > calisma.jpg resmine bağlantı
    • <a href=”resimler/calisma.jpg”>Büyük resim için tıklayınız</a>
  • index.html sayfasından > hizlibakis.docx dosyasına bağlantı
    • <a href=”download/docx/hizlibakis.docx”>İndir</a>
  • ifelseornekleri.html sayfasından > bolum1.pdf dosyasına bağlantı
    • <a href=”../../download/pdf/bolum1.pdf”>Bölüm 1 indir</a>
  • iletisim.html sayfasından > index.html dosyasına bağlantı
    • <a href=”index.html”>Ana Sayfa</a>
  • temelbilgiler.html sayfasından > donguler.html sayfasına bağlantı
    • <a href=”donguler.html”>Döngüler</a>
  • hakkimizda.html sayfasından > iletisim.html sayfasına bağlantı
    • <a href=”iletisim.html”>Bize ulaşın</a>
  • donguornekleri.html sayfasından > index.html sayfasına bağlantı
    • <a href=”dersler/donguler.html”>Ana Sayfa</a>
  • degiskenornekleri.html sayfasından > degiskenler.html sayfasına bağlantı
    • <a href=”../../dersler/degiskenler.html”>Değişkenler</a>

 

4.E-Posta Adresine Bağlantı
Sayfa içerisinde tıklandığında e-posta adresine mail göndermek için kullanılan bağlantılardır. Bu bağlantılara tıklandığında sistemdeki e-posta programı (Outlook, Thunderbird, Kmail, …) mail göndermek için açılır. Href ile mail adresi belirtilirken önüne mailto: ifadesi eklenir.

Örnek: iletisim@bilimokulu.net adresine mail gönderen linki oluşturalım.

<html> 
    <head> 
        <title>Bağlantılar</title> 
    </head> 
    <body> 
        Soru, öneri, şikayet ve diğer düşüncelerinizi bize iletmek için 
        <a href="mailto:iletisim@bilimokulu.net">tıklayınız.</a>
    </body> 
</html>

 

 

Resim Ekleme

Web sayfasına resim eklemek için <img> etiketi kullanılır. Bu etiketin kapanışı yoktur. Parametreleri şunlardır.

Parametre

Değer

Açıklama

src

Yol+Resim adı

Gösterilecek olan resmin yolunu ve adını belirtmek için kullanılır.

Not: site içi yol kavramı A etiketinde anlatıldığı gibi geçerlidir.

alt

Metin

Resmin yerinde görüntülenecek olan alternatif metindir.

title

Başlık

Resmin üzerine fare ile gelindiği zaman görünecek olan başlıktır.

align

center, left, right

Resmin sayfa içindeki konumunu yani hizalamasını belirtir.

border

Piksel

Resmin kenarlık genişliğini piksel olarak belirtir.

width

Piksel, %

Resmin genişliğini belirtir. 100 veya 25%

height

Piksel, %

Resmin yüksekliğini belirtir. 100 veya 25%

hspace

Piksel

Resmin yatay olarak sağındaki ve solundaki boşluğu belirtir

vspace

Piksel

Resmin dikey olarak üstündeki ve altındaki boşluğu belirtir

 

Örneği inceleyelim.

<html>
<body background="resimler/bg3.jpg">
 
<img src="resimler/kedi.gif" alt="Kedi Resmi" >
 
<p> Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada 
istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en 
önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet 
gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi 
yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği 
hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar 
da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat 
burada konumuz bunu tartışmak değil tablolar konusunu işlemek. </p>
 
</body>
</html>

 

Resmin yazının sağında veya solunda olmasını istiyorsak. 
<img src="resimler/kedi.gif" alt="Kedi Resmi" >  ifadesine align parametresi eklenir. Left veya right değerlerini alır

 

Örneği inceleyelim.

 

<html>
<body background="resimler/bg3.jpg">
 
<img src="resimler/kedi.gif" align=left alt="Kedi Resmi" >
 
<p> Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada 
istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en 
önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet 
gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi 
yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği 
hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar 
da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat 
burada konumuz bunu tartışmak değil tablolar konusunu işlemek. </p>
 
</body>
</html>

 

Resimlere bağlantı özelliği kazandırmak

Resimlere bağlantı vermek istiyorsak img etiketini a etiketi kapsayacak şekilde yazmalıyız. Resimlere link verdiğiniz zaman mavi link kenarlığının görünmemesi için img etiketi içinde border="0" parametresi kullanılmalıdır.

 <a href=".....">
<img src="....." title="....." border="0">
</a>

 

 

Yorum ekle

Konuyla İlgili Yazılar

HTML Giriş

Bölüm 1: Genel Kavramlar  1.LAN (Local Area Network)   Yerel alan ağ anlamına gelen LAN, yakın bilgisayarların fiziksel olarak... devamı...

HTML Etiketleri 2

CSS Giriş

HTML Etiketleri 1

HTML Giriş