Resim eklemek istediğiniz Web sayfasının HTML dosyasını Not Defteri veya Web geliştirme yazılımı gibi bir metin düzenleyicide açın.
Dosyaya bir etiket ekleyin. Etiketi, HTML dosyası bir tarayıcıda açıldığında altında görünmesini istediğiniz öğenin arkasına yerleştirin. Etiketin ayrı bir kapanış etiketi yoktur. Etiketi içerisinde, görselin internetteki konumunu aşağıdaki adres ile yazarak görüntülemek istediğiniz görselin kaynağını belirtmelisiniz. kaynak bağlanmak. Görüntü, HTML dosyasıyla aynı klasörde saklanıyorsa, görüntünün adını ve uzantısını yazın. Resim başka bir yerde saklanıyorsa, resmin tam URL'sini yazın.
Ekle alt etiketinize öznitelik. HTML5'te alt niteliği gereklidir. Resmin yüklenememesi durumunda açıklamak için bu özelliği kullanın. Bir resim yüklenemiyorsa, tarayıcı alt özelliğinden sonra girdiğiniz metni görüntüler. Ayrıca alt özelliği, görme engelli kişilerin kullandığı ekran okuyucu yazılımlar için önemlidir. Yazılım, alt özniteliğindeki metni okur, böylece web sitenizi görüntüleyen görme engelli bir kişi, göremese bile resimde ne olduğunu duyabilir.
ile görüntünün boyutlarını piksel cinsinden belirtin. boy uzunluğu ve Genişlik Öznitellikler. Boyutları belirtmezseniz, tarayıcı sayfa yüklenirken görüntü için ne kadar alan bırakacağını bilemez. Bu, metin önce yüklendiğinden, görüntü için küçük bir alan bıraktığından, ardından görüntü yüklendikçe birbirinden atladığından ve alanın genişlemesine neden olduğundan, sayfanın kesikli yüklenmesine neden olur. Belirtilen boyutlarla, tarayıcı, yükleme bittiğinde görüntünün doldurması için sayfadaki diğer öğeler arasında tam olarak doğru miktarda boşluk bırakır.
HTML dosyanızı bir tarayıcıda açarak görüntünün doğru yerde görüntülendiğinden emin olmak için kodunuzu test edin.
Bir görüntüyü ekranın soluna veya sağına taşımak veya etrafına metin sarmak için CSS'yi kullanın. Örneğin, style="float: left;" kullanabilirsiniz. veya style="float: sağ;" etiketin içinde.
Bir görüntünün hem yüksekliğini hem de genişliğini bilmiyorsanız, yalnızca yükseklik veya genişlik özniteliğini kullanmakta bir sakınca yoktur. Yüksekliği ve genişliği belirtmek için CSS'yi de kullanabilirsiniz; örneğin, 100'e 100 piksellik bir görüntüyle, style niteliğini kullanın: style="height: 100px; genişlik: 100 piksel."
Etiketi bir "a href" etiket çifti içine yerleştirerek resmi tıklanabilir bir bağlantı haline getirin. Örneğin, bir görselin Facebook'a bağlanmasını istiyorsanız, aşağıdakini yazın.
Sayfanızın SEO'sunu artırmaya çalışmak için alt özelliğini kullanmayın. Arama motorları, bazı Web tasarımcılarının alt niteliğini fazladan anahtar kelimelerle doldurmaya çalıştıklarının uzun süredir farkındadır ve bu nedenle alt özelliğindeki metni görmezden gelirler.
