HTML'de görsel eklemek için <img> elemanı kullanılır. <img> elemanı sadece açılış etiketiyle kullanılan bir elemandır ve işlevi niteliklerle sağlanır.
src niteliği ile gösterilecek olan görselin adresi belirtilir. Bunun yanında alt niteliği ile görselin gösterilememesi durumunda gösterilecek alternatif bir yazı belirtilmelidir. Ayrıca yerleştirilen bir görselin genişlik ve yüksekliği de belirtilmelidir. Bunun için sırasıyla width ve height nitelikleri kullanılabilir. Bu niteliklerin karşısına girilen değerler piksel olarak değerlendirilir.
<!DOCTYPE html>
<html>
<head>
<title>Görsel Örneği</title>
</head>
<body>
<img src="picture.jpg" alt="Örnek görsel" width="400" height="400">
</body>
</html>
Yukarıdaki kodla bir HTML dosyası oluşturun ve dosyanın bulunduğu klasörün içinde "picture.jpg" isimli bir JPEG görseli koyun. Bu durumda HTML sayfasını bir tarayıcıda açtığınızda "picture.jpg" görüntülenecektir. Resmin genişliği de yüksekliği de 400 piksel olacaktır.
Görsel elemanı <a> etiketleri arasına da konulabilir. Bu şekilde görselin link olması sağlanır. Bir önceki örnekte oluşturduğunuz dosyadaki kodları aşağıdakilerle değiştirmeniz durumunda "picture.jpg" görseline tıklandığında Google ana sayfasına gidilecektir.
<!DOCTYPE html>
<html>
<head>
<title>Görsel Örneği</title>
</head>
<body>
<a href="http://www.google.com"><img src="picture.jpg"
alt="Örnek görsel" width="400" height="400"><a>
</body>
</html>
Oluşturulan görselin koordinatları kullanılarak tıklanabilir alanlar da oluşturulabilir. Bunun bir yolu ismap niteliğini kullanmaktır. Bu nitelik herhangi bir değer almadan kullanılır ve bu nitelik kullanıldıysa <img> elemanı uygun bir <a> elemanı içerisinde bulunmalıdır. Bu nitelik görsel üzerinde tıklanan noktanın koordinatlarının sunucuya URL sorgusu olarak gönderilmesini sağlar.
Karşısına "#değer" şeklinde değer girilerek kullanılan usemap niteliği ise doğrudan görselin farklı bölgelerinin farklı adreslere bağlantı vermesini sağlar. Bunun kullanımı aşağıda <map> ve <area> etiketleriyle birlikte anlatılacaktır.
<img> etiketiyle kullanılabilen bir başka nitelik de crossorigin niteliğidir. Bu nitelik görselin daha ileriki konularda anlatılacak olan <canvas> elemanıyla kullanımıyla ilgilidir. Normalde bir başka sitede barındırılan görsellerin <canvas> elemanı ile kullanımında kısıtlamalar vardır. Bu şekilde kullanılan görsellerden veri alınamaz. Fakat yapılan ayarlarla bazı siteler görsellerinin kısıtlamasız kullanımına izin vermektedir. Bu izni alabilmek için siteye talep gönderilmelidir. Bazı siteler anonim olarak yapılan taleplere izin verirken bazıları da talep edenin bilgileriyle birlikte istek yapıldığında izin vermektedir. crossorigin niteliği bu isteği yapmaya yarar. Bu niteliğe anonymous değeri girilirse istek anonim olarak yapılır. use-credentials değeri ile ise bilgiler verilerek talep gerçekleştirilir.
<map> etiketi ile verilen bir görselin tıklanabilecek bölgeleri tanımlanır. <map> etiketleri arasına <area> elemanları konularak tıklanabilecek bölgeler tanımlanır. <map> etiketine name niteliği eklenmeli ve karşısına kısımlara ayrılması istenen görsele yerleştirilen usemap niteliğinin karşısındaki değer # işareti olmadan yazılmalıdır.
<area> elemanları kapanmaz, <map> elemanlarının arasına yazılır ve tıklanabilecek alanları tanımlar. Tıklanacak alanın görüntülenememesi durumunda gösterilmesi için alternatif bir yazı alt niteliği ile eklenmelidir.
shape niteliği ile tanımlanacak alanın şekli belirtilir. Girilen değer default olursa görselin tamamının tıklanacak alan olduğu belirtilmiş olur. Kullanılabilecek diğer değerler circle, rect ve poly'dir. circle tanımlanacak alanın daire olduğunu, rect dikdörtgen olduğunu ve poly çokgen olduğunu belirtir.
coords niteliği ile tanımlanacak alanın koordinatları belirtilir. Girilecek değerler shape niteliğine girilen değerlere göre değişiklik gösterir. Eğer shape niteliği ile tanımlanacak alanın dikdörtgen olduğu belirtilmişse değer şu şekilde girilir: coords="x1,y1,x2,y2". Burada x1,y1 dikdörtgenin sol üst köşesinin koordinatları x2,y2 dikdörtgenin sağ alt köşesinin koordinatlarıdır. Daire için girilecek değer "x1,y1,r" formatındadır x1,y1 dairenin merkezinin koordinatlarını, r değeri dairenin yarıçapını belirtir. Çokgen için girilecek değerler "x1,y1,x2,y2,...,xn,yn" şeklindedir. Her x,y ikilisi bir köşenin koordinatını verir. Eğer ilk koordinatlarla son koordinatlar aynı değilse tarayıcı otomatik olarak bu iki köşeyi birleştirir.
<area> elemanı ile kullanılan diğer nitelikler verilecek bağlantı ile ilgilidir. href niteliği ile bağlantı verilecek dokümanın adresi, hreflang niteliği ile de bağlantı verilen dokümanın dili belirtilir.
target niteliği bağlantı verilen sayfanın nerede açılacağını belirtir ve _self, _blank, _parent, _top ve çerçeve_ismi olmak üzere alabileceği beş farklı değer vardır. Hangi değerin ne işe yaradığı Linkler konusunda anlatılmıştır.
download niteliği download="dosya_ismi" şeklinde kullanılır ve verilen bağlantının indirilmesini sağlar. dosya_ismi yerine girilecek değer indirilecek dosyanın ismi olacaktır. Bu nitelik yazının yazıldığı an itibari ile bilinen tarayıcılardan Google Chrome, Mozilla Firefox ve Opera tarafından desteklenmektedir.
<area> elemanıyla media, type ve rel nitelikleri de kullanılabilir. Bunların kullanımı da Linkler konusunda detaylı olarak açıklanmıştır. Bu niteliklerin <area> etiketinde kullanılması <a> etiketindekiyle aynıdır.
Görsellerde tıklanabilir alanlar oluşturulmasına yönelik aşağıdaki örnek dosya indirilebilir:
<!DOCTYPE html>
<html>
<head>
<title>Imagemap</title>
</head>
<body><img src="imagemap.png" width="391" height"275" usemap="#deneme">
<map name="deneme">
<area shape="circle" coords="135,83,39" href="http://www.google.com">
<area shape="poly" coords="217,86,270,50,323,87,304,146,238,147" href="http://www.yandex.com">
<area shape="rect" coords="129,168,256,249" href="http://www.bing.com">
</map>
</body>
</html>
Örnekte verilen HTML dosyası yukarıdaki kodu içermektedir.
<figure> ve <figcaption>
Eğer bir görsel içeriğin akışından bağımsız şekilde yerleştirilmek istenirse <figure> elemanının içerisine yerleştirilebilir. Bu durumda görsel ayrı bir blok içerisinde yer alacaktır. <figcaption> elemanı ile <figure> elemanının içerisinde görsele başlık eklenebilir. <figcaption> elemanı <figure> elemanının içerisine yerleştirilmelidir. Bu elemanların çalışmak şeklinin görülmesi için aşağıdaki örnek dosya indirilebilir.
İndirilen dosyadaki HTML dosyası aşağıdaki kodu içermektedir.
<!DOCTYPE html>
<html>
<head>
<title>Figure Örneği</title>
</head>
<body>
<p>
Türk bayrağı, 29 Mayıs 1936'da 2994 Sayılı Türk Bayrağı Kanunu ile şekillendirilmiş
ve Türkiye'nin ulusal bayrağı olarak kabul edilmiştir.
22 Eylül 1983'te 2893 Sayılı Türk Bayrağı Kanunu ile
bayrak ölçütleri belirlenmiş ve bayrak son halini almıştır.
</p>
<figure>
<figcaption>Türk Bayrağı</figcaption>
<img src="bayrak.png" alt="bayrak" width="240" height="160">
</figure>
</body>
</html>