Resim Ekleme
Resim Etiketi (<img/>)
Sayfaya resim eklemek için <img/> etiketini kullanırız.
Not: <img/> etiketi de <br/> etiketinin olduğu gibi boş bir etikettir; yani kapanış etiketi yoktur. Açılış etiketinin sonuna '/' eklenir.
src Niteliği (<img src='...'/>)
Bu şekilde yazılan bir içerik ilgili resmi aşağıdaki gibi ekranda gösterir.
Resmin nerede olduğu <img> etiketine ait src niteliği ile belirtilir. Burada … yazılı yere göstereceğimiz resim dosyasının sunucuda bulunduğu yeri, resmin adı ile birlikte (http:\\www.site_adi.com\resimler\resim_adi.jpg gibi) yazarız.
Resim dosyasının bulunduğu yeri gösteren src niteliğinin içeriğini iki yöntem kullanarak yazabiliriz.
1- İlk yöntemde, resim dosyasının bulunduğu yeri, tam olarak belirtecek şekilde yazmamız gerekir. Bu yönteme kesin yol (absolute path) adı verilir. Aşağıdaki şekilde yazılır:
2- İkinci yöntemde resim dosyasının bulunduğu yeri gösterirken, resim dosyasının, içinde bulunduğumuz sayfanın adresine göre yerini ifade etmemiz gerekir. Bu yönteme göreceli yol (relative path) adı verilir. Web sitemizin aşağıdaki şekilde bir dizin yapısı olduğunu varsayalım:
Diyelim sayfa1.html içerisine, resimler dizinindeki resim1.jpg dosyasını eklemek istiyoruz. Sayfaya ekleyeceğimiz <img/> etiketinin src niteliğini "..\resimler\resim1.jpg" olacak şekilde girersek resim dosyasını göreceli yol kullanarak eklemiş oluruz. Buradaki ".." sayfanın içinde bulunduğu dizinin bir üstündeki dizini, "resimler" resim dosyasının içinde bulunduğu dizini, "resim1.jpg" te eklenecek dosyanın adını göstermektedir.
Kök dizinde yer alan giris.html sayfasına resim2.jpg dosyasını eklemek istiyorsak sayfaya ekleyeceğimiz <img/> etiketinin src niteliğini bu kez "resimler\resim2.jpg" olacak şekilde girmemiz gerekmektedir. Resmi ekleyeceğimiz dosya ile resmin içinde bulunduğu klasör aynı dizinde bulunduğu için bir önceki örnekteki gibi ".." kullanmamız gerekmiyor.
Son örnek olarak; alt_sayfalar dizininde yer alan alt_sayfa1.html sayfasına resim1.jpg dosyasını eklemek istersek, sayfaya ekleyeceğimiz <img/> etiketinin src niteliğini "..\..\resimler\resim1.jpg" olarak yazmamız gerekir. İki defa kullanılan ".." iki üst dizine çıkılacağını belirtmektedir. Bu şekilde iki defa "..." kullanmak yerine sadece "\resimler\resim1.jpg" kullanmakta yeterli olacaktır. Baştaki "\" kök dizine gidilmesi gerektiğini belirtmektedir.
alt Niteliği (<img src='...' alt='...'/>)
Bazı nedenlerden dolayı resim dosyasının yüklenmesi uzun sürebilir. Bazen yüklenecek resim sitede bulunamayabilir. Ya da sayfayı görüntüleyen tarayıcı resim gösterimini desteklemiyor olabilir. Bu gibi durumlarda resmin yerinde açıklayıcı bir metin görüntülensin isteyebilirsiniz. Bu nitelik bu amaçla kullanılmaktadır.
Aşağıda, olmayan bir resim dosyası yerine alt niteliği ile yazılan bir metin örneği görmektesiniz:
width ve height Nitelikleri (<img src='...' width=... height=... />)
Resmin ekranda görüntülenmesini istediğiniz büyüklüğü belirlemenizi sağlayan niteliklerdir. Aşağıdaki şekilde kullanılır:
Bu sayfanın başında görüntülenen resim 112 piksel yüksekliğinde ve 200 piksel genişliğinde idi. Aynı resmin 224 piksel yüksekliğinde ve 400 piksel genişliğinde görüntülenmesi için width ve height niteliklerini aşağıdaki şekilde kullanabiliriz:
Sonuç aşağıdaki şekilde olacaktır:
border Niteliği (<img src='...' border="..." />)
Ekleyeceğiniz resmin etrafında bir çerçeve çizilmesini istiyorsanız bu nitelikten faydalanmalısınız. Aşağıdaki şekilde kullanılır:
Resmimizin etrafında bir çerçeve çizilmesi için aşağıdaki şekilde yazmamız gerekmektedir:
Bu şekilde eklenen resim aşağıdaki şekilde görüntülenir:
Buradaki 1 değeri resmin etrafına çizilen çerçevenin piksel türünden kalınlığını göstermektedir. 5 piksel kalınlığında çerçeve çizmek istiyorsak aşağıdaki şekilde yazmamız gerekir:
Bu şekilde eklenen resim ise aşağıdaki şekilde görüntülenir:
Sayfaya resim eklemek için <img/> etiketini kullanırız.
Not: <img/> etiketi de <br/> etiketinin olduğu gibi boş bir etikettir; yani kapanış etiketi yoktur. Açılış etiketinin sonuna '/' eklenir.
src Niteliği (<img src='...'/>)
<img src='basketbol_maci.jpg'/>
Bu şekilde yazılan bir içerik ilgili resmi aşağıdaki gibi ekranda gösterir.
Resmin nerede olduğu <img> etiketine ait src niteliği ile belirtilir. Burada … yazılı yere göstereceğimiz resim dosyasının sunucuda bulunduğu yeri, resmin adı ile birlikte (http:\\www.site_adi.com\resimler\resim_adi.jpg gibi) yazarız.
Resim dosyasının bulunduğu yeri gösteren src niteliğinin içeriğini iki yöntem kullanarak yazabiliriz.
1- İlk yöntemde, resim dosyasının bulunduğu yeri, tam olarak belirtecek şekilde yazmamız gerekir. Bu yönteme kesin yol (absolute path) adı verilir. Aşağıdaki şekilde yazılır:
<img src='http:\\www.site_adi.com\resimler\resim_adi.jpg'/>
2- İkinci yöntemde resim dosyasının bulunduğu yeri gösterirken, resim dosyasının, içinde bulunduğumuz sayfanın adresine göre yerini ifade etmemiz gerekir. Bu yönteme göreceli yol (relative path) adı verilir. Web sitemizin aşağıdaki şekilde bir dizin yapısı olduğunu varsayalım:
Diyelim sayfa1.html içerisine, resimler dizinindeki resim1.jpg dosyasını eklemek istiyoruz. Sayfaya ekleyeceğimiz <img/> etiketinin src niteliğini "..\resimler\resim1.jpg" olacak şekilde girersek resim dosyasını göreceli yol kullanarak eklemiş oluruz. Buradaki ".." sayfanın içinde bulunduğu dizinin bir üstündeki dizini, "resimler" resim dosyasının içinde bulunduğu dizini, "resim1.jpg" te eklenecek dosyanın adını göstermektedir.
Kök dizinde yer alan giris.html sayfasına resim2.jpg dosyasını eklemek istiyorsak sayfaya ekleyeceğimiz <img/> etiketinin src niteliğini bu kez "resimler\resim2.jpg" olacak şekilde girmemiz gerekmektedir. Resmi ekleyeceğimiz dosya ile resmin içinde bulunduğu klasör aynı dizinde bulunduğu için bir önceki örnekteki gibi ".." kullanmamız gerekmiyor.
Son örnek olarak; alt_sayfalar dizininde yer alan alt_sayfa1.html sayfasına resim1.jpg dosyasını eklemek istersek, sayfaya ekleyeceğimiz <img/> etiketinin src niteliğini "..\..\resimler\resim1.jpg" olarak yazmamız gerekir. İki defa kullanılan ".." iki üst dizine çıkılacağını belirtmektedir. Bu şekilde iki defa "..." kullanmak yerine sadece "\resimler\resim1.jpg" kullanmakta yeterli olacaktır. Baştaki "\" kök dizine gidilmesi gerektiğini belirtmektedir.
Kesin yol mu göreceli yol mu?
Resim dosyalarının bulunduğu yeri kesin yol yöntemi ile gösterdiğimiz durumda, bir gün gelir web sitemizin kök dizinini ya da web sitemizin dizin yapısını değiştirmemiz gerekir ise web sitemizdeki bütün resimlerin adreslerini tek tek yeni kök dizin ya da dizin yapısını yansıtacak şekilde değiştirmemiz gerekir.
Önceki örneğimizi ele alalım; www.site_adi.com olan site adımızı tr alanına taşımaya karar verdik diyelim. Yani yeni adresimiz www.site_adi.com.tr olacak. Bu durumda bütün <img/> etiketlerimizin src niteliklerindeki www.site_adi.com yazan kısmı, www.site_adi.com.tr olacak şekilde değiştirmemiz gerekmektedir. Bu durum çok fazla resim içeren web siteleri için zahmetli ve hataya açık bir çalışma yapmayı gerektirir.
Eğer resim dosyalarının bulundukları yeri göreceli yol yöntemi ile belirtir isek, web sitemizin adı değişse bile, dizin yapısı aynı kaldığı sürece, web sitemizdeki resimler hiç bir düzenleme yapmaya ihtiyaç duyulmadan gösterilmeye devam edecektir.
Resim dosyalarının bulunduğu yeri kesin yol yöntemi ile gösterdiğimiz durumda, bir gün gelir web sitemizin kök dizinini ya da web sitemizin dizin yapısını değiştirmemiz gerekir ise web sitemizdeki bütün resimlerin adreslerini tek tek yeni kök dizin ya da dizin yapısını yansıtacak şekilde değiştirmemiz gerekir.
Önceki örneğimizi ele alalım; www.site_adi.com olan site adımızı tr alanına taşımaya karar verdik diyelim. Yani yeni adresimiz www.site_adi.com.tr olacak. Bu durumda bütün <img/> etiketlerimizin src niteliklerindeki www.site_adi.com yazan kısmı, www.site_adi.com.tr olacak şekilde değiştirmemiz gerekmektedir. Bu durum çok fazla resim içeren web siteleri için zahmetli ve hataya açık bir çalışma yapmayı gerektirir.
Eğer resim dosyalarının bulundukları yeri göreceli yol yöntemi ile belirtir isek, web sitemizin adı değişse bile, dizin yapısı aynı kaldığı sürece, web sitemizdeki resimler hiç bir düzenleme yapmaya ihtiyaç duyulmadan gösterilmeye devam edecektir.
alt Niteliği (<img src='...' alt='...'/>)
Bazı nedenlerden dolayı resim dosyasının yüklenmesi uzun sürebilir. Bazen yüklenecek resim sitede bulunamayabilir. Ya da sayfayı görüntüleyen tarayıcı resim gösterimini desteklemiyor olabilir. Bu gibi durumlarda resmin yerinde açıklayıcı bir metin görüntülensin isteyebilirsiniz. Bu nitelik bu amaçla kullanılmaktadır.
Aşağıda, olmayan bir resim dosyası yerine alt niteliği ile yazılan bir metin örneği görmektesiniz:
width ve height Nitelikleri (<img src='...' width=... height=... />)
Resmin ekranda görüntülenmesini istediğiniz büyüklüğü belirlemenizi sağlayan niteliklerdir. Aşağıdaki şekilde kullanılır:
<img src='...' width=... height=... />
Bu sayfanın başında görüntülenen resim 112 piksel yüksekliğinde ve 200 piksel genişliğinde idi. Aynı resmin 224 piksel yüksekliğinde ve 400 piksel genişliğinde görüntülenmesi için width ve height niteliklerini aşağıdaki şekilde kullanabiliriz:
<img src='basketbol_maci.jpg' width=400 height=224 />
Sonuç aşağıdaki şekilde olacaktır:
border Niteliği (<img src='...' border="..." />)
Ekleyeceğiniz resmin etrafında bir çerçeve çizilmesini istiyorsanız bu nitelikten faydalanmalısınız. Aşağıdaki şekilde kullanılır:
<img src='...' border="..." />
Resmimizin etrafında bir çerçeve çizilmesi için aşağıdaki şekilde yazmamız gerekmektedir:
<img src='basketbol_maci.jpg' border="1" />
Bu şekilde eklenen resim aşağıdaki şekilde görüntülenir:
Buradaki 1 değeri resmin etrafına çizilen çerçevenin piksel türünden kalınlığını göstermektedir. 5 piksel kalınlığında çerçeve çizmek istiyorsak aşağıdaki şekilde yazmamız gerekir:
<img src='basketbol_maci.jpg' border="5" />
Bu şekilde eklenen resim ise aşağıdaki şekilde görüntülenir:
Bu sayfada öğrendiğimiz etiket ve niteliklerden oluşan HTML sayfamızın bir örneği aşağıdaki şekildedir:
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML,tags,etiketler,resim">
<title>Resim Ekleme</title>
</head>
<body>
<img
alt="Basketbol maçı"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkvfw40oiOkM8_ecTMb3fmiPfWhuG9cPOlvTbBRyM68c5_VceC5BJI-tHnR1wiZXejOX302DU4Fvz0bWUd0lqb8HkRwYAKopJRNDJ1lmT-2vk0dP2oNiSbACKImKJVXZXn-x20bEdHso/s200/2018-12-01.jpg"
/>
<br/>
<br/>
<img
alt="Basketbol maçı"
src=""
/>
<br/>
<br/>
<img
alt="Basketbol maçı"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkvfw40oiOkM8_ecTMb3fmiPfWhuG9cPOlvTbBRyM68c5_VceC5BJI-tHnR1wiZXejOX302DU4Fvz0bWUd0lqb8HkRwYAKopJRNDJ1lmT-2vk0dP2oNiSbACKImKJVXZXn-x20bEdHso/s200/2018-12-01.jpg"
height="224"
width="400"
/>
<br/>
<br/>
<img
alt="Basketbol maçı"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkvfw40oiOkM8_ecTMb3fmiPfWhuG9cPOlvTbBRyM68c5_VceC5BJI-tHnR1wiZXejOX302DU4Fvz0bWUd0lqb8HkRwYAKopJRNDJ1lmT-2vk0dP2oNiSbACKImKJVXZXn-x20bEdHso/s200/2018-12-01.jpg"
border=1
/>
<br/>
<br/>
<img
alt="Basketbol maçı"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkvfw40oiOkM8_ecTMb3fmiPfWhuG9cPOlvTbBRyM68c5_VceC5BJI-tHnR1wiZXejOX302DU4Fvz0bWUd0lqb8HkRwYAKopJRNDJ1lmT-2vk0dP2oNiSbACKImKJVXZXn-x20bEdHso/s200/2018-12-01.jpg"
border=5
/>
</body>
</html>
| << Paragraf ve Yeni Satır Ekleme << | >> Bağlantı Ekleme >> |
Yorumlar
Yorum Gönder