HTML Görselleri
Görüntüler, bir web sayfasının tasarımını ve görünümünü iyileştirebilir.
Örnek
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Örnek
<img src="img_girl.jpg"
alt="Girl in a jacket">
Örnek
<img src="img_chania.jpg"
alt="Flowers in Chania">
HTML Görüntüleri Sözdizimi
HTML <img>etiketi, bir web sayfasına bir resim gömmek için kullanılır.
Görüntüler teknik olarak bir web sayfasına eklenmez; resimler web sayfalarına bağlıdır. <img>etiketi, başvurulan görüntü için bir tutma alanı oluşturur .
Etiket <img>boş, yalnızca öznitelikleri içeriyor ve bir kapanış etiketi yok.
Etiketin <img>iki gerekli özelliği vardır:
- src - Resmin yolunu belirtir
- alt - Resim için alternatif bir metin belirtir
Sözdizimi
<img src="url" alt="alternatetext">
src Özelliği
Gerekli srcöznitelik, görüntünün yolunu (URL) belirtir.
Not: Bir web sayfası yüklendiğinde, o anda görüntüyü bir web sunucusundan alan ve sayfaya ekleyen tarayıcıdır. Bu nedenle, görüntünün web sayfasına göre aynı noktada kaldığından emin olun, aksi takdirde ziyaretçileriniz kırık bir bağlantı simgesi alır. altTarayıcı resmi bulamıyorsa, kopuk bağlantı simgesi ve metin gösterilir.
Örnek
<img src="img_chania.jpg" alt="Flowers
in Chania">
alt Özellik
Gerekli altöznitelik, kullanıcı herhangi bir nedenle görüntüleyemezse (yavaş bağlantı, src özniteliğindeki bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa) bir resim için alternatif bir metin sağlar.
Özelliğin değeri alt, resmi açıklamalıdır:
Örnek
<img src="img_chania.jpg" alt="Flowers
in Chania">
Bir tarayıcı bir resim bulamazsa, alt
özniteliğin değerini görüntüler:
Örnek
<img src="wrongname.gif" alt="Flowers
in Chania">
İpucu: Ekran okuyucu, HTML kodunu okuyan ve kullanıcının içeriği "dinlemesine" olanak tanıyan bir yazılım programıdır. Ekran okuyucular, görme engelli veya öğrenme engelli kişiler için kullanışlıdır.
Görüntü Boyutu - Genişlik ve Yükseklik
styleBir görüntünün genişliğini ve yüksekliğini belirtmek için özniteliği kullanabilirsiniz .
Örnek
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatif olarak, widthand heightözniteliklerini kullanabilirsiniz:
Örnek
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
ve öznitelikleri her zaman görüntünün genişliğini ve yüksekliğini piksel cinsinden tanımlar width.height
Not: Her zaman bir görüntünün genişliğini ve yüksekliğini belirtin. Genişlik ve yükseklik belirtilmezse, resim yüklenirken web sayfası titreyebilir.
Genişlik ve Yükseklik veya Stil?
, widthve heightniteliklerinin styletümü HTML'de geçerlidir.
styleAncak, özniteliği kullanmanızı öneririz . Stil sayfalarının görüntülerin boyutunu değiştirmesini engeller:
Örnek
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Başka Bir Klasördeki Görüntüler
srcResimleriniz bir alt klasördeyse, özniteliğe klasör adını eklemelisiniz :
Örnek
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Başka Bir Sunucudaki/Web Sitesindeki Görüntüler
Bazı web siteleri başka bir sunucudaki bir resme işaret eder.
Başka bir sunucudaki bir resme işaret etmek için, srcöznitelikte mutlak (tam) bir URL belirtmelisiniz:
Örnek
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Dış görsellerle ilgili notlar: Dış görsellerin telif hakkı alınmış olabilir. Kullanmak için izin almazsanız, telif hakkı yasalarını ihlal ediyor olabilirsiniz. Ayrıca, harici görüntüleri kontrol edemezsiniz; aniden kaldırılabilir veya değiştirilebilir.
Hareketli Görüntüler
HTML, animasyonlu GIF'lere izin verir:
Örnek
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Bağlantı olarak resim
Bir resmi bağlantı olarak kullanmak için <img>etiketi etiketin içine yerleştirin <a>
:
Örnek
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Görüntü Yüzer
floatResmin bir metnin sağına veya soluna kaymasını sağlamak için CSS özelliğini kullanın :
Örnek
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
İpucu: CSS Float hakkında daha fazla bilgi edinmek için CSS Float Eğitimimizi okuyun .
Ortak Görüntü Formatları
Tüm tarayıcılarda (Chrome, Edge, Firefox, Safari, Opera) desteklenen en yaygın görüntü dosyası türleri şunlardır:
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Bölüm özeti
<img>Bir görüntüyü tanımlamak için HTML öğesini kullanınsrcResmin URL'sini tanımlamak için HTML özelliğini kullanınaltBir resim görüntülenemiyorsa, bir resim için alternatif bir metin tanımlamak üzere HTML niteliğini kullanın.-
Resmin boyutunu tanımlamak için HTML
widthveheightnitelikleri veya CSSwidthve özellikleri kullanınheight floatResmin sola veya sağa kaymasına izin vermek için CSS özelliğini kullanın
Not: Büyük resimlerin yüklenmesi zaman alır ve web sayfanızı yavaşlatabilir. Görselleri dikkatli kullanın.
HTML Alıştırmaları
HTML Resim Etiketleri
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .