Temel Seviye
İleri Seviye
Sayfamıza bir görsel eklemek için " <img/> " etiketini kullanacağız. Bu etiket açıldığı gibi kapanır. Bir web sayfasından yada server'dan görsel ekleyeceksek " src " yani source (kaynak) özniteliğini kullanmamız gerekmektedir. Ayrıca görselin yüklenemediği durumlar için mutlaka " alt " özniteliğini kullanmamız gerekir, bu kod içerisine "Yüklemedi" ya da benzeri şeyler yazabiliriz.
Not: " <img> " etiketi "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" gibi etiketler içinde kullanılmaıldır. Aksi takdirde kodumuz hata verecektir.
Eğer mouse ile fotoğraf üzerine geldiğimizde yazı ya da bilgi çıksın istiyorsak " title " özniteliğini kullanabiliriz. " alt " özniteliğini Internet Explorer tarayıcıları " title " olarak yorumlamaktadır.
Not: " img " etiketi sadece " veri " gösterirken kullanılmaıdır, tasarım amacıyla " img " etiketi kullanılmamalıdır. CSS öğrendiğimiz zaman tasarımda görsel kullanmayı öğreneceğiz. Örneğin, " img " etiketini sayfamıza " Fotoğraf Galerisi " eklerken kullanabiliriz.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Linkinizi bir görsel olarak gösterebilirsiniz. Örneğin " istanbul.jpg " adlı görselimize tıklandığında kullanıcımızı istediğimiz bir sayfaya yönlendirebiliriz.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
" src " kısmında bulunan linkte bir kaç karakter değiştirirseniz görsel yüklenmeyecektir.
HTML dosyanız masaüstünde ise " src " link alanına görselin adını yazarak örneğin " a.jpg " diyerek görseli sayfamızda gösterebiliriz. Sayfamızı bir klasör içine attıysak " klasor_adi/a.jpg " şeklinde çağırabiliriz.
Görseller, sayfanın yüklenme hızını azaltacağından dolayı görselleri az kullanmanızı öneririm ayrıca kullanılan görsellerin boyutlarını olabildiğince düşük tutmanız sayfanızın hızlı kalmasını sağlayacaktır.