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