Bildiğiniz gibi internet, çağımızda her zaman kullanmaya muhtaç olduğumuz bir araç oldu. Bu aracı, web sitelerini ziyaret etmek için sık sık kullanıyoruz. Peki ya bu sitelere nasıl ulaşıyoruz? Arkaplanda aslında neler oluyor? Blogumu yanlışlıkla ziyaret etmediyseniz bunları merak ediyor olmalısınız.
Link dediğimiz bağlantılar siteden siteye ya da site içinde başka bir sayfaya geçmemizi sağlarken aslında arkaplanda nasıl kodlar yazılıyor? İşte ben de bu konuya değineceğim bu yazıda. Önceki anlatımımda biçimlendirme üzerinde durmuştum. Şimdi de linklere değinirken aynı zamanda da sayfa hazırlarken kullandığımız temel özelliklere değineceğim.
Link oluşturmak için <a> etiketini kullanmak gerekiyor. a = anchor (dayanak) anlamındadır. Linkin yönlendirdiği dosyanın kaynağını belirtirken de href (hyperlink reference) parametresini kullanmalıyız. Örneğin bir text dosyasına şöyle yazalım.
<html>
<head>
<title>İkinci Sayfam</title>
<body>
<h1>Sayfa Başlığı<h1>
<font face="Times New Roman" color="green" size="3"><b>Çeşitli yazılar. Çeşitli yazılar. Çeşitli yazılar</b></font><br><br>
<font face="Times New Roman" size="3"><a href="http://www.ogu.edu.tr/" target="_blank" title="ESOGU" >Esogü ana sayfası için tıklayınız</a></font><br>
</body>
</html>
Buradaki <font> etiketi yazı yazılacağını ve bu yazıyla ilgili özelliklerin kendi içerisine yazılacağını anlatmaktadır. Bu etiket arasında yazdığım ilk özellik face'tir. face özlelliği yazının hangi tipte yazılacağını belirtmek için vardır. İkinci yazdığım özellik color'dır. color, yazının rengini belirtmek için kullanılır. size özelliği ise yazının büyüklüğünü ayarlamak için vardır. Sayı büyüdükçe yazı büyüklüğü artar.
Bir de verdiğim bağlantıya geçiş için belirttiğim gibi <a> etiketini kullandım. Etiket içindeki href içine dosya kaynağı veya ulaşılacak adres yazılmalıdır. target özelliği ise linke tıklandığında açılacak sayfanın aynı sayfada mı yoksa farklı bir sekme veya pencerede mi açılacağını belirtmek için kullanılır. Özetle:
_blank : Link yeni bir pencerede açılır.
_self : Yeni sayfa varolan sayfanın bulunduğu pencerede açılır. Eğer bir frame ise aynı frame'de açılır. Bağlantının bulunduğu sayfa kaldırılır ve yerine yeni sayfa gösterilir. Herhangi bir target girilmediği zaman bu değer geçerlidir.
_parent : Güncel sayfada bir veya daha fazla frameset kullanılmışsa link, frameset elementinin sayfada kapladığı bölgede açılır. Eğer güncel sayfa bir çerçeve içinde değilse bu parametre
_top : Bağlantının bulunduğu sayfanın tarayıcnın tüm penceresi içerisinde gösterilir. (Tüm framset sistemleri kaldırılır.)
Son olarak da title özelliği linkin üzerine gelindiğinde belirecek yazıyı belirtmek için kullanılır.
Bu yazdığım örneğin çıktısı şöyledir:
Buradaki <font> etiketi yazı yazılacağını ve bu yazıyla ilgili özelliklerin kendi içerisine yazılacağını anlatmaktadır. Bu etiket arasında yazdığım ilk özellik face'tir. face özlelliği yazının hangi tipte yazılacağını belirtmek için vardır. İkinci yazdığım özellik color'dır. color, yazının rengini belirtmek için kullanılır. size özelliği ise yazının büyüklüğünü ayarlamak için vardır. Sayı büyüdükçe yazı büyüklüğü artar.
Bir de verdiğim bağlantıya geçiş için belirttiğim gibi <a> etiketini kullandım. Etiket içindeki href içine dosya kaynağı veya ulaşılacak adres yazılmalıdır. target özelliği ise linke tıklandığında açılacak sayfanın aynı sayfada mı yoksa farklı bir sekme veya pencerede mi açılacağını belirtmek için kullanılır. Özetle:
_blank : Link yeni bir pencerede açılır.
_self : Yeni sayfa varolan sayfanın bulunduğu pencerede açılır. Eğer bir frame ise aynı frame'de açılır. Bağlantının bulunduğu sayfa kaldırılır ve yerine yeni sayfa gösterilir. Herhangi bir target girilmediği zaman bu değer geçerlidir.
_parent : Güncel sayfada bir veya daha fazla frameset kullanılmışsa link, frameset elementinin sayfada kapladığı bölgede açılır. Eğer güncel sayfa bir çerçeve içinde değilse bu parametre
_selfgibi davranır.
_top : Bağlantının bulunduğu sayfanın tarayıcnın tüm penceresi içerisinde gösterilir. (Tüm framset sistemleri kaldırılır.)
Son olarak da title özelliği linkin üzerine gelindiğinde belirecek yazıyı belirtmek için kullanılır.
Bu yazdığım örneğin çıktısı şöyledir:
Yazıya tıklandığında target özelliği _blank olarak seçili olduğundan Esogü ana sayfası yeni sekmede açılacaktır.
Şimdi biraz daha şekillendirelim. Gezindiğimiz sitelerde dikkatinizi çeken bir şey de linklere tıklandığında renk değiştirmeleridir. Bunu da şöyle yapıyoruz, <body> etiketinin içine şunu yazalım:
<body alink="Cyan" vlink="Blue" link="Red" text="gray" >
alink, "active link" anlamındadır. Yani tıklandığı andaki rengidir. vlink, "visited link" anlamındadır. Yani linkin tıklandıktan sonraki halidir. link ise linkin normal durumdaki rengidir. Burada bir de text özelliğini kullandım. Bu da body içindeki yazı rengini belirler.
NOT: Bir de hatırlatma yapayım arkadaşlar. <title> ve <head> parametre (özellik) almayan etiketlerdir. Ayrıca herhangi bir etiket kapandığı sırada parametre alamaz.
HTML'de base Etiketi:
Bir tarayıcı, sayfa içinde tam yolu belirtilmemiş herhangi bir bağlantının güncel sayfanın bulunduğu dizinde olduğunu varsayar.
HTML <base> etiketi de, sayfa içinde kullanılacak resim ve css dosya bağlantıları gibi tüm bağlantılar için taban adresin tanımlamasını yapar. <base> etiketi, <head> içinde kullanılmalıdır.
Örneğin:
<html>
<head><title>Base Örnek</Title>
<base href="http://elifbayrakdar.blogspot.com/">
</head>
<body alink="Cyan" vlink="Blue">
<font face="Times New Roman">
<a href="/p/iletisim_27.html" target="_blank" title="İletişim"> İletişim için tıklayınız </a></font><br>
</html>
Eğer linke tıklarsak bizi bu blogun iletişim sayfasına götürür. Görüldüğü gibi linkin kökü <base> etiketindeki href içinde yazılmıştır. Kalanı ise <a> etiketindeki href içinde yazılmıştır.
Mail Adresine Yönlendirme
Eğer kullanıcıları bir mail adresine yönlendirmek istiyorsak şöyle bir şey yazmalıyız:
<a href="mailto:example@example.com" title="İletişim">Bana yazın</a>
Sayfa İçinde Başka Noktaya Yönlendirme
<a href="#address">adres burada</a>
<p>Çeşitli yazılarla burası dolu
ve sayfanın sonundayız.</p>
<a name="address">sauletekis 39A</a>
Bilgisini verdiğimiz bir noktaya aynı sayfa içinden farklı bir yerden ulaşmak istenirse bu şekilde bir kod yazıyoruz arkadaşlar. "adres burada" yazısına tıklandığında sayfadaki scrollbar otomatik olarak adresin yazıldığı yere doğru çekilecektir.
Sonuç olarak link işlemlerinin ve html özelliklerinin genel bilgileri böyle arkadaşlar. İlerleyen yazılarımda lazım oldukça diğer özellikleri de paylaşacağım. Sonraki yazımda "web sayfasında tablo nasıl oluşturulur"u inceleyeceğiz.
Hoşçakalın...
Hocam çok sağolun ne kadar sitede araştırma yaptıysam doğru bilgiyi sizin sitenizde buldum
YanıtlaSilAradığınızı bulduğunuza sevindim.
YanıtlaSilEmeğinize sağlık.Yeni başlayanlar için güzel bilgiler.
YanıtlaSil