HTML Görseller

HTML kullanılarak belgede görüntü gösterilebilir.

Örnek

Resim Ekleme
Bu örnek, web sayfasında nasıl görüntü göstereceğinizi gösterir.
Farklı konumlardan resim ekleme
Bu örnek, diğer klasörler veya sunuculardaki resimleri web sayfasına nasıl göstereceğinizi gösterir.

(Daha fazla örnek, bu sayfanın altında bulunabilir)

Görüntü etiketi (<img>) ve kaynak özelliği (Src)

HTML'de, görüntü <img> etiketi ile tanımlanır.

<img> boş etikettir, yani sadece özellikler içerir ve kapanış etiketi yoktur.

Sayfada görüntü göstermek için kaynak özelliğini (src) kullanmanız gerekecektir. src, "kaynak" anlamına gelir. Kaynak özelliğinin değeri, görüntünün URL adresidir.

Görüntünün tanımlanması için kullanılan dilbilgisi şu şekildedir:

<img src="url" />

URL, görüntünün saklandığı konumu belirtir. Eğer "boat.gif" adlı görüntü www.codew3c.com adresindeki images dizininde yer alıyorsa, URL'si http://www.codew3c.com/images/boat.gif olacaktır.

Tarayıcı, görüntüyü belgedeki görüntü etiketi yerinde gösterir. Eğer görüntü etiketini iki paragraf arasında yerleştirirseniz, tarayıcı önce ilk paragrafı, ardından resmi ve son olarak da ikinci paragrafı gösterecektir.

Metin Değiştirme Özelliği (Alt)

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

alt özelliği, görsel için bir dizi ön hazırlanmış değişken metin tanımlamak için kullanılır. Değişken metin özelliğinin değeri kullanıcı tarafından tanımlanır.<img src="boat.gif"

alt="Büyük Bot"

>

Tarayıcı görseli yükleyemeyince, değişken metin özelliği okuyuculara kaybettiği bilgileri bildirebilir. Bu durumda, tarayıcı bu alternatif metni görsel yerine görüntüler. Web sayfasındaki tüm görsellere değişken metin özelliği eklemek iyi bir alışkanlıktır ve bu, bilgiyi daha iyi göstermeye yardımcı olur ve sadece metin tarayıcıları kullanan kişiler için çok faydalıdır.

Temel İpuçları - Kullanışlı Bilgiler:

Eğer bir HTML dosyası on iki görsel içeriyorsa, bu sayfanın doğru görüntülenmesi için 13 dosya yüklenmesi gerekebilir. Görselleri yüklemek zaman alır, bu yüzden önerimiz: Görselleri dikkatlice kullanın.
Daha Fazla Örnek
Arka plan görseli
Bu örnek, HTML sayfasına nasıl arka plan görseli ekleyebileceğinizi gösterir.
Görseli düzenle
Bu örnek, nasıl metin içinde görseli düzenleyebileceğinizi gösterir.
Görseli yükle
Bu örnek, nasıl görseli paragrafın soluna veya sağına yükledebileceğinizi gösterir.
Görseli değişik boyutlara ayarla
Bu örnek, nasıl görseli değişik boyutlara ayarlayabileceğinizi gösterir.
Görsel bağlantı oluştur
Bu örnek, görseli bir bağlantı olarak nasıl kullanabileceğinizi gösterir.
Görsel harita oluştur
Bu örnek, tıklanabilir alanlar içeren bir görsel haritası nasıl oluşturulduğunu gösterir. Her bir alan bir superlinktir.
Görseli görsel haritaya dönüştür
Bu örnek, nasıl normal bir görseli görsel haritaya dönüştürebileceğinizi gösterir.

Görsel etiketi

Etiket Tanım
<img> Görsel tanımlar.
<map> Görsel haritayı tanımlar.
<area> Görsel harita içinde tıklanabilir alanları tanımlar.