HTML ile Web Sayfalarına Resim Ekleme

Merhaba sevgili Webkolog okurları,

Bugün sizlere, web sayfalarımızın vazgeçilmez bir parçası olan görselleri, HTML 4.01 kullanarak nasıl ekleyeceğimizi anlatacağım. Web, sadece metinlerden ibaret sıkıcı bir yer olmamalı, değil mi? İşte bu yüzden görseller, sayfalarımızı daha çekici ve anlaşılır kılmak için harika bir yoldur.

Öncelikle HTML'nin ne olduğuna kısaca değinelim. HTML (HyperText Markup Language), web sayfalarının temelini oluşturan bir işaretleme dilidir. Yani, web tarayıcılarına içeriğin nasıl yapılandırılacağını ve görüntüleneceğini söyleyen özel etiketlerden oluşur. HTML, bir programlama dili değildir; sadece içeriği düzenlemek ve sunmak için kullanılır.

Genel bir HTML sayfası, temel olarak metin içeriği ve bu içeriği biçimlendirmek için kullanılan etiketlerden oluşur. Henüz detaylarına girmeyeceğimiz birçok farklı etiket bulunmaktadır, ancak bugün odaklanacağımız nokta resim eklemek olacak.

HTML 4.01'de bir sayfaya resim eklemek için <img> etiketini kullanırız. Bu etiket, tarayıcıya belirtilen adresteki (source) resim dosyasını alıp sayfada göstermesini söyler.

Temel Kullanım

En basit haliyle bir resmi sayfanıza eklemek için şu kodu kullanabilirsiniz:

<img src="resim_dosyasi.jpg" alt="Resim açıklaması">

• <img>: Resim etiketinin başlangıcıdır.
• src (source): Görüntülenecek resmin dosya yolunu veya internet adresini belirtir. Örneğin, resminiz aynı klasördeyse sadece "resim_dosyasi.jpg" yazmanız yeterlidir. Farklı bir klasördeyse, klasör yolunu da belirtmeniz gerekir (örneğin, "images/resim_dosyasi.jpg"). İnternetteki bir resmi kullanmak için ise resmin tam URL'sini yazmalısınız.
• alt (alternate): Resim çeşitli nedenlerle (örneğin, dosya bulunamadı, bağlantı hatası, ekran okuyucu kullanan ziyaretçiler) görüntülenemediğinde gösterilecek alternatif metni belirtir. Arama motorları için de önemlidir.

Genişlik ve Yükseklik Belirleme

Resimlerinizin sayfanızda nasıl boyutlandırılacağını kontrol etmek için width (genişlik) ve height (yükseklik) özelliklerini kullanabilirsiniz. Değerler piksel cinsinden belirtilir.

<img src="resim_dosyasi.jpg" alt="Genişliği ve yüksekliği ayarlanmış resim" width="300" height="200">

Başlık Eklemek

Fare imlecini resmin üzerine getirdiğinizde küçük bir açıklama metni göstermek isterseniz, title özelliğini kullanabilirsiniz.

<img src="resim_dosyasi.jpg" alt="Başlıklı resim" title="Bu bir örnektir.">

Örnek Bir Kullanım

İşte size basit bir örnek:

<img src="https://www.google.com.tr/images/srpr/logo11w.png" alt="Google Logosu" title="Google'ın Sevimli Logosu" width="200" height="50">

Bu kod, Google'ın logosunu 200 piksel genişliğinde ve 50 piksel yüksekliğinde sayfanıza ekleyecektir. Resim görüntülenemezse "Google Logosu" yazısı görünecek ve fare üzerine geldiğinde "Google'ın Sevimli Logosu" ibaresi çıkacaktır.

Harita Alanları Tanımlama (Image Maps)

HTML 4.01 ayrıca "image map" olarak adlandırılan bir özellik sunar. Bu özellik sayesinde bir resim üzerindeki farklı bölgelere tıklanabilir bağlantılar tanımlayabilirsiniz. Bunun için <img> etiketiyle birlikte <map> ve <area> etiketleri kullanılır.

<img src="planets.gif" width="145" height="126" alt="Gezegenler" usemap="#gezegenharitasi">
<map name="gezegenharitasi">
  <area shape="rect" coords="0,0,82,126" href="gunes.html" alt="Güneş">
  <area shape="circle" coords="90,58,3" href="merkür.html" alt="Merkür">
  <area shape="circle" coords="124,58,8" href="venüs.html" alt="Venüs">
</map>

• usemap="#gezegenharitasi": Bu özellik, resmin hangi haritayı kullanacağını belirtir. '#' işareti ile başlayan değer, aynı sayfadaki <map> etiketinin name özelliği ile eşleşmelidir.
• <map name="gezegenharitasi">: Resim üzerindeki tıklanabilir alanları tanımlayan bölümdür. name özelliği ile haritaya bir isim verilir.
• <area>: Resim üzerindeki bir tıklanabilir alanı tanımlar.
  • shape: Alanın şeklini belirtir. Değerleri şunlar olabilir: rect (dikdörtgen), circle (daire), poly (çokgen), default (tüm resim alanı).
  • coords: Alanın koordinatlarını belirtir. Değerler shape özelliğine göre değişir:
    • rect için: sol üst köşe x ve y koordinatları, sağ alt köşe x ve y koordinatları (x1,y1,x2,y2).
    • circle için: dairenin merkezinin x ve y koordinatları ve yarıçapı (x,y,radius).
    • poly için: çokgenin köşe noktalarının x ve y koordinatları (x1,y1,x2,y2,...,xn,yn).
  • href: Alan tıklandığında gidilecek olan bağlantıyı belirtir.
  • alt: Alan için alternatif metin.

Bu basit örnekte, "planets.gif" adlı resim üzerinde üç farklı tıklanabilir alan tanımlanmıştır: bir dikdörtgen (Güneş) ve iki daire (Merkür ve Venüs). Her bir alan tıklandığında farklı bir HTML sayfasına yönlendirme yapılacaktır.

Umarım bu yazı, HTML 4.01 ile web sayfalarınıza nasıl resim ekleyeceğiniz konusunda size temel bir anlayış kazandırmıştır. Unutmayın, görseller web sayfalarınızı daha etkileşimli ve ilgi çekici hale getirmenin önemli bir yoludur. Bir sonraki yazımızda görüşmek üzere!

Webkolog'u takipte kalın!

Hepinize bol kodlu günler dilerim!