Br internet sitesini yapmaya başlanıldığında olmaz ise olmazlardan bir tanesi de o internet sitesinde kullanacağınız görseller olacaktır. Bu görselleri sadece kullanmakla kalmayıp, boyutunu, yer konumunu, arama motorlara bu resimler hakkında bilgi vermekte sizin göreviniz olacaktır.
HTML’ye HTML5 resim etiketleri ile gelen tek yeni şey aslına bakarsanız <picture> etiketidir. Diğer etiketleri olduğu gibi kullanmanızda hiç bir sakında yoktur. Sizlere sırası ile resim etiketi eklerken neler yapılabileceğini, ne gibi özellikler eklenebileceğini göstereceğim.
HTML5 Resim Etiketleri Nelerdir ?
Şimdi ise sizlere HTML resim nasıl eklenir ve bu ekleyeceğimiz resim dosyasına ne gibi özellikler eklenebileceğini, sağ ve sol tarafa nasıl yaslanabileceği gibi çeşitli özelliklerden bahsedeceğim. Bunları incelemek için ise aşağıda oluşturmuş olduğum akordiyon menü sayesinde takip edebilirsiniz.
[accordion] [accordion_content title=”HTML Resim Eklemek” icon=”” active=”active”]İlk başta öğrenmemiz gereken şey ise HTML resim eklemek olacaktır. Hiç bilmeyen arkadaşlar için ise sıra sıra adımlar şeklinde giderek hem yeni bir şeyler öğretmek hemde öğrenilen şeylerin üzerine bir şeyler koymaya çalışacağız.
<img src="resim-adi.jpg">
Yukarıda yer alan kodu HTML kodlarınız arasından <body> kısmına eklediğinizde resim-adi.jpg dosya gözükecektir. Buraya bir url’den resim yolu yazabilir yada resim dosyanızın uzantısına göre adıyla beraberinde yazdığınızda kolaylıkla o internet sayfası içine ekleyebilirsiniz.[/accordion_content][accordion_content title=”HTML Resim Alt Özelliği” icon=”” active=”active”]Şimdi ki özelliğimiz ise eğer görüntü ekranda gösterilmez ise bunun yerine gösterilecek resmi tanımlayan bir metin özelliğidir. Hem bu metin resmi tanımlar iken hemde ekleyeceğiniz resim hakkında arama motorlarına bilgi vererek resmin neyi ifade ettiğini belirtmektedir.
<img src="resim-adi.jpg" alt="deneme resmi">
Yukarıda yer alan şekilde kullanılır. Asıl amacı ise olası bir sorun ile karşılaşıldığında resmin yerine bu metin gösterilir. Bu sayede bazı uyumluluk sorunundan dolayı yüklenmeyen resimlerin yerinde bu yazı yer alır iken bir yandan da arama motorlarına bu resimde bu var şeklinde bilgilendirme işlemini yapar.[/accordion_content][accordion_content title=”HTML Resmin Boyutunu Ayarlamak” icon=”” active=”active”]Sizi internet sitenizin her hangi bir sayfasında kullanacağınız bir resim için istediğiniz boyutta görüntülenmesini isteyebilirsiniz. Bunun için ise resme yükseklik ve genişlik değerleri eklemeniz mümkündür. Bu sayede seçtiğiniz resmi o boyutta görüntülenmesini sağlarsınız.
<img src="resim-adi.jpg" width="500px height="500px">
Yukarıda yer alan kod kullanıldığında resim 500 piksel yüksekliğinde ve 500 piksel genişliğinde görünecektir. Piksel değerleri yerine yüzde değerlerini eklemekte mümkündür. Bu sayede resmin boyutuna göre o oranda büyültme yada küçültme işlemi sağlanabilir. HTML resim boyutu ayarlamak için ise diğer bir gösterim şeklide ise:
<img src="resim-adi.jpg" style="width:500px;height:500px;">
Yukarıda yer alan kodda still öznitelik ekleyerek HTML ile oluşturulacak internet sayfalarında resmin boyutunu ayarlayabilmek mümkündür.[/accordion_content][accordion_content title=”HTML Resmi Arka Plan Yapmak” icon=”” active=”active”]İnternet sitesi yapar iken en çok dikkat etmeniz gereken özelliklerden bir tanesi de internet sitesinin arka planı yada her hangi bir metin oluşturduğunuzda onun arka planıdır. Yazıların arkasına yada tüm sitenin arkasına arka plan resmi ekleyerek görünümü güzelleştirebilirsiniz.
<body style="background-image:url('arka-plan.jpg')">Yukarıda yer alan kısımda ki kodu <body> içine eklediğimiz için internet sitesinin arka plan resmi arka-plan.jpg isimli resim dosyası olacaktır. Arka plan resmi olarak ekleyeceğiniz her ne ise tamamen size kalmış bir durumdur. Durum böyle olunca sadece internet sitesinin arka planına değil her hangi bir etikete de bu sayede arka plan resmi ekleyebilirsiniz. Tek yapmanız gereken şey ise <body> yerine ekleyeceğiniz <p>,<h1> etiketi gibi ismini yazmanız yeterli olacaktır.[/accordion_content][accordion_content title=”HTML Sayfada Resimleri Konumlandırma” icon=”” active=”active”]Küçükken proje ve performans ödevlerinde en çok kullandığımız özelliğin birine geliyoruz hazır mıyız ? Bir resmi paragrafın sol yada sağ tarafına koyarak ve yanından yazmaya başlamak göze hoş gelen ve iyi bir şekilde hitap eden bir görüntüdür. Sizde ekleyeceğiniz resmi paragrafın sol yada sağ tarafına yaslayabilirsiniz.
<p><img src="gülücük.png" alt="Gülme Emojisi" style="float:right;width:50px;height:50px;"> Bu emoji geçtiğimiz günlerde WhatsApp'ta en çok gönderilen emoji ifadelerinin başında gelmektedir..</p>
Yukarıda yer alan kodda still içine eklediğimiz float etiketi sayesinde bir resmi sola yada sağa yaslamak mümkündür. Left yada Right yazarak bu resmi konumlandırma işlemini gerçekleştirmeniz mümkündür.[/accordion_content][accordion_content title=”HTML
<picture> <source media="(min-width: 550px)" srcset="resim-1.jpg"> <source media="(min-width: 365px)" srcset="resim-2.jpg"> <img src="resim.jpg" alt="Flowers" style="width:auto;"> </picture>
<a href="https://webdunya.com"><img src="resim.gif"></a>
Yukarıda ki kod parçacığı kullanıldığında resim.gif ‘in üzerine tıklanıldığında yukarıda yazmış olduğumuz webdunya.com adlı adrese gidecektir. Bu sayede HTML ‘de resimlere link ekleyebilirsiniz. [/accordion_content] [/accordion]
Yukarıda yazılan kod parçacıkları sayesinde artık HTML resim kodlarını biliyor olacaksınız. Yukarıda yer alan kodları ancak ve ancak deneyerek öğrenebilirsiniz. Sizde yukarıda ki kodlara göz attıktan sonrasında ise yapmanız gereken işlem kendiniz denemeniz ve yukarıda yer olan kodları pekiştirmeniz gerekmektedir.
çok teşekkür ederim size. ama sanırım benim bir çok problemim var tek tek bunları halletmem gerekiyor. çok sağolun tekrardan
merhaba. bu adımları sırasıyla nasıl yapmamız gerektiğini anlatabilir misiniz?. bu kodları nasıl ekleyeceğiz?. bir wordpress eklentisi gerekiyor mu yoksa header dosyasıyla alakalı olan birşey mi?. html dosyası nedir tam olarak?. ben daha yeniyim bu işte ve seo da sitemi arattırdığım zaman bu tip sıkıntılarla karşılaşıyorum . nasıl çözeceğim hakkında pek bir bilgim yok
Merhaba. Aslına bakarsanız bunun için paylaştığım https://www.youtube.com/watch?v=NV9TeWJ8ajA&list=PLkds6hcKWp0RvyvNGmQX1vIQJvmNvsxDv playlastine göz atabilirsiniz. Videoları sırayla izleyip videounun altında yer alan linklerden sitemiz ile eş bağlantılı takip edebilirsiniz. WordPress ‘e bir HTML dosyası eklemek istiyor iseniz bunun için ise yazı editörünüzün sağ üst tarafında “Görsel” ve “Metin” olarak iki buton bulunmaktadır. “Metin” butonuna tıklayarak HTML kodlar ekleyebilirsiniz. Header ise bam başka bir konudur.
çok teşekkür ederim size. ama sanırım benim bir çok problemim var tek tek bunları halletmem gerekiyor. çok sağolun tekrardan