SAYFAYA RESİM YERLEŞTİRME VE RESİMLERE LİNK VERME İŞLEMLERİ

Bu sayfamızda Web (HTML) sayfalarınna resim yerleştirme ve resimlere link verme uygulamalarını anlatacağım.

web sayfamızda görsel zenginlikler katmak için sayfamıza gerekli resimler yerleştirebilir ve hatta tercih ederseniz bunlara link bağlantısı uygulayarak başka sayfalara geçiş sağlayabiliriz,
Sayfaya resim yerleştirme <body> </body> tagları arasında <img src="........." tağında noktalı yerlere resim adı ve adresi yazılarak tanımlanır.


Önce sayfamıza resim yerleştirmekle başlayalım.
Ön hazırlık olarak çalışmamızda kullanılmak üzere masa üstüne 1 adet fotoğraf hazırlayınız, ve sonra bir boş Noteped (metin belgesi) açın. sonra aşağıdaki kodu kopyalayın ve Noteped belgesine yapıştırın,

Daha önce hazırladığınız resim dosyasının adresini ve adını belirtikten sonra belgeyi resim.html olarak kaydederek işlemi sonlandıralım resim.html dosyasını açarak bakalım, sonuça Link işlemlerinin ne işe yaradığını kavramak için örneğimize bir atalım sizin resimde örneğimizdeki gibi çıkması gerekir,
burada bir konuyu belirteyim; Benim kullandığım resimin eni=606px, boyu=340px ve boyutları ile orantılı olarak hacmi=24Kb dır. Kullandığınız resim boyutu orjinal hali ne ise aynı boyutlarda görüntülenecektir. bu her zaman istenilen bir durum değildir, çünkü resim boyutu sayfamızda görüntülenmesini istediğimiz alana sığmayabilir, bu da sayfa görünümüzü bozarak hoş olmayan bir sorun çıkarabilir. ayrıca büyük hacimli resimler sayfaya yüklenmesi zaman alacağından buda istenmeyen bir durumdur.

Bu gibi sorunları aşmak için iki yöntem verdır, 1. yöntem resim dosyasını paint veya başka bir resim etid proğramı ile resim dosyasının boyutunu küçülterek istediğiniz boyutlarda farklı bir resim elde ederek bu resim dosyasını kullanabiliriz. 2. bir yöntem ise az önce kullandığımız resim yerleştirme koduna boyut parametresi ekleyerek resimleri istediğimiz boyutlarda görüntüleyebiliriz.

Tabi ki bu iki yöntem arasında profesyonel bir düşünce ile 2. yöntemi kullanacağız, çünkü tek bir resim dosyasını aynı resim yerleştirme kodunu kullanarak başka sayfalarda başka boyutlarda defalarca kullanabiliriz.


Biraz önceki çalışmamızda bir resim eklemiştik, şimdi bu Noteped dosyamızı açarak az önce kullandığımız resim yerleştirme koduna widht="150" height="110" resim boyutları kodunu yerleştirelim. hadi ben bu eklentiyi yaparak size aşağıda hazır bir kod vereyim.

kodu Noteped belgesine yapıştırdıktan sonra kaydedin resim.html dosyasını açarak sonuca atın. Sizin çalışmanızda örneğimizdeki gibi boyutlandırılmışsa tamamdır.

Şimdi de web sayfamızda görsel bir show yapalım, boyutlandırdığımız bir resim dosyasına link bağlantısı verelim.

ilk çalışmamızda bir resim dosyasını sayfada görüntülemiştik, daha sonra bu resim dosyasını en-boy olarak boyutlandırmıştık, şimdi de ikinci çalışmamız olan resim yerleştirme ve boyutlandırma kodunun önüne<a href="http:............."> link kodunu ekleyelim. hadi yine ben bu eklentiyi yaparak size aşağıda hazır bir kod vereyim.



Bu kodu son Noteped dosyamıza yapıştırarak "http://www.turktelekom.com.tr" olan bölümü isterseniz kendi isteğinize göre başka bir site adresini verebilirsiniz. Sonra dosyayı tekrar kaydedin ve resim.html dosyasını açarak bir bakalım, mause'yi son eklediğiniz resim üzereine geldiğinizde mause el simgesi oluyor ve tıklandığında belirtilen siteye yönlendiriliyorsa istediğimizi elde etmiş oluyoruz.

<figcaption> etiketi;

<figcaption> etiketi ile resim alt kısmına yazı yazılmasını öğreneceğiz.
Şimdi aşağıdaki kodu inceleyelim.

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Windovs
GECE VE DENİZ

Bu dersimizde Burada sona erdi,

  

Copyright © 2018 Hüseyin Tepe