Html sayfanıza resim eklemek ya da link vermek istediğinizde kullanmanız gereken etiketlerden bahsedeceğim ve örnekle anlatacağım.
Bir resmi html sayfamıza eklemek için kullanacağımız etiket <img> dir. Bu etiketin birkaç özelliği vardır
src => Ekleyeceğimiz resmin yolu yazılır
alt => Resmin üstüne geldiğimizde çıkacak yazı yazılır
height => Resmin yüksekliği girilir (piksel cinsinden)
width => Resmin eni girilir (piksel cinsinden)
border => Resme çerçeve eklersek,çerçevenin kalınlığı yazılır (piksel cinsinden)
Bu özelliklerin kullanımına örnek olarak ;
<img src="manzara.jpg" alt="Manzaramız" width="50px" height="60px" />
Bu kodda resmimizin genişliği,yüksekliği,yolu ve açıklama kısmı belirtildi Buradaki manzara.jpg adresi,html dosyalarımızın olduğu klasörde ise resmimizin adresi doğrudan manzara.jpg olarak verilebilir.Fakat herhangi bir sitedeki resim eklenecekse sitenin adresi (https://….) verilmelidir
Bağlantı derken neyi kasdediyoruz önce onu açıklayalım. Aşağıdaki gibi üzerine tıklandığında belirtilen adrese giden yapılardır
ÖRNEK : Google adresine gitmek için tıkla Bunu html kodları ile yapmak istersek kullanacağımız etiket <a> dır.Bu etiket açıldığında kapatılması gerekir (</a> ) . Bu etiketin de kendine has özellikleri bulunmaktadır. Bunları aşağıda inceleyelim;
href => En önemli özelliktir.Gidilecek sayfanın adresi belirtilir.Başka sitelere gitmekle beraber,içinde bulunduğumuz sayfanın en altına veya en üstüne de gidilebilir.Bunun için #adres yapısı kullanılır
name =>Bağlantımıza verilecek özel bir isimdir. ID gibi düşünebiliriz.Özel erişimlerde kullanılır
target =>Bağlantımızın yeni sekmede mi yoksa içinde bulunduğumuz sitenin yerine mi açılacağını gösterir Bu anlattığımıza örnek verelim;
<html>
<head>
<title>Bağlantı Ekleme</title>
</head>
<body>
<a href="www.google.com" target="_blank"> Google sitesine gitmek için tıklayın </a>
</body>
</html> –>target kısmına “_blank” yazarsak yeni sekmede açacaktır. target=”_self “ yazarsak aynı pencerede açacaktır Buradaki kod parçasını Notepad programında yapıştırıp,uzantısını .html olarak kaydederseniz üzerine tıkladığınızda aşağıdaki çıktıyı elde edeceksiniz.
Ek Bilgiler : –>Yazımızın altındaki çizgiyi kaldırmak istersek <a> etiketinin özellik kısmına style=”text-decoration: none” eklemeliyiz
–>Link rengini değiştirmek istiyorsak <body> etiketinin özelliklerine link=”renk_adi” kısmını eklemeliyiz.Yani <body link=”red”> yaparsak linklerimiz kırmızı renkli olacaktır
–>İmlecimizi linkin üzerine getirdiğimizde veya linkten ayırdığımızda,link renginin değişmesini istiyorsak <a> etiketinin özelliklerine onmouseover=”this.style.color=’red'” onmouseout=”this.style.color=’green'” kodunu ekleyelim
–>Link değil de mail yollamak istiyorsak <a href=mailto:mehmet.kirazli> Mail göndermek için TIKLA </a> etiket yapısını kullanmalıyız
Bağlantı ekleme konusunda eklenecek linkin yeni bir sayfaya gitmesine örnek verdik. Şimdi,aynı sayfa içinde sayfanın en altına veya en üstüne gitmesine örnek verelim;
Sayfamızın en altına gitmek için sayfamızda en alta kadar boşluk koymamız gerekiyor ki bastığımızda en alta gitsin ve en alttaki linke tıkladığımızda da en üste gidebilsin.Bunun için yazdığımız kod şu şekilde olacaktır;
<html>
<head>
<title>Sayfamızın içinde gezinme</title>
<body>
<p>
<a name="top"></a>
</p>
<p>
<a href="#bottom">Sayfa Sonuna Git</a> </br> Burası sayfamızın başı
<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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br /> </p>
<p><a href="#top">Sayfa Başına Git</a>
<a name="bottom"></a>
<br/> Burası sayfamızın sonu</p>
</body>
</html> Merhaba. Firebase Events'e istatistik attığınızda not set şeklinde bir değer görüyorsanız olası çözümünü göstereceğim. (daha&helliip;) Daha Fazla Oku
Merhaba. Android cihazlar için hazırladığım Namaz Vakitleri uygulaması ile 200'e yakın ülkede tüm namaz-ezan vakitlerini… Daha Fazla Oku
Selamlar. İnsanlar için faydalı olması amacıyla geliştirdiğim Kaza Namazı ve Oruç Takip Uygulamasını sizlere tanıtmak… Daha Fazla Oku
Volley, Android uygulamalarımızda kullandığımız AsyncTask'ın alternatifi olarak ortaya çıkarılan, Google I/O 2013 sunumunda duyurulan bir… Daha Fazla Oku
Merhaba. Bu yazımda Android platformunda kullanıma sunulan, bazı kod bloklarını basitleştiren ve okunabilirliği arttıran ButterKnife… Daha Fazla Oku
Merhaba. Bu yazımda artık baş belası olmuş TikTok reklamlarını, Android uygulamalarımızdaki Admob reklamlarından nasıl kaldıracağımızı… Daha Fazla Oku
Yorumları Göster
güzrlll
tşk ler paylaşım için
gerçekten güzel paylaşım aramaktan iyidir herkes böyle olsa :)
gercekten cok acıklayıcı ve güzel bir site
Faydalı paylaşım. Faydalı Bilgi. Emeğiniz için teşekkürler
süper wep siteniz var
Peki Mehmet Bey, bu göstereceğimiz resim ftp de bulunan images klasöründeyse nasıl yapacağız?
O resmin linkini vereceksiniz. Ftp adresini verebilirsiniz bir deneyin.
harika teşekkürler
Abi siteye girince beli bir süre bekliyip link e tıklama kodunu paylaşırmısın
cok bilgilendirinci begendim zevkle okudum emegi gecene tesekkurler