Sayfa içeriği
Görüntülerin önemi ve türleri
Sayfalarda resimlerin gösterilmesi, kullanıcının gözlerini büyük ölçüde çekmesi nedeniyle çok önemlidir ve site yazılı açıklamalar veriyorsa, özellikle amaç kullanıcıyı böyle bir işlemin nasıl gerçekleştirileceğini bildirmekse, açıklamalar içerisinde resimler mükemmel bir katkı olacaktır. bilgisayarındaki bir sorunu çözmek veya adım adım bir program yüklemek gibi.
Görüntülenebilecek görüntü türleri
Bazıları tüm tarayıcılar tarafından desteklenen ve bazıları da bazı tarayıcılar tarafından desteklenen birçok görüntü türü vardır.
Her popüler tarayıcıda (Chrome, Edge, Firefox, Safari, Opera,brave) çalışan görüntü türleri:
.apng -.gif - .jpg - .jpeg - .ico - .cur - .jfif - .pjpeg - .pjp - .svg - png
Görüntü boyutları ve telif hakkı
Sayfadaki resimleri görüntülerken dikkat etmeni gereken şeylerden biri, özellikle boyutları büyükse, çok sayıda resmi görüntülememek, çünkü resimlerin boyutu büyüdükçe tarayıcının bunları yüklemesi çok sure alır ve kullanıcı yüklemeyi bitirmek kadar bekliyecektir.
Sitende görseller görüntülerken, yayınladığın görsellerin telif hakkıyla korunmadığından her zaman emin ol - yani ücretsiz değildir - çünkü telif hakkı varsa görsellerin sahibi seni kolayca ihbar edebilir ve bu da sitenin silinmesine neden olabilir.
Sayfaya bir resim eklemek
Genelde, sayfada bir resim görüntülemek için <img> etiketini <img src="url"> olarak kullanırız.
url kelimesinin yerine göstermek istediğimiz resmin yolunu koyuyoruz.
Aşağıdaki örnekte, <img> etiketini kullanarak sayfaya bir resim ekledim.
- <img src="https://src.k-html.com/html5.png"/>
Resim için alternatif bir metin yerleştirmek
Sayfada resim görüntülerken ortaya çıkabilecek yaygın sorunlardan biri, site geliştiricisi resmin konumunu değiştirmiş ve sayfalardaki yolunu değiştirmeyi unutmuş gibi, gösterilecek resmi bir nedenden dolayı bulamamaktır, ya da kullanıcının internetinin çok yavaş olması ve görüntülenecek olan resmi getirirken aniden kesintiye uğraması.
Bunun için, görüntülenmemesine neden olan herhangi bir sorun olması durumunda, görüntünün yerini gösteren bir metin hazırlayabilirsiniz.
Bu sayede kullanıcı, görünmeyen görüntünün konusunun ne olduğunu bilecek ve hatta bunu size kolayca söyleyebilecektir.
Görsele alternatif bir metin eklemek için alt özelliğini ekleyeceksin ve resim görüntülenmiyorsa görünecek metni ona iletiyorsun.
Aşağıdaki örnekte, sayfaya kasıtlı olarak yanlış olan ve alternatif metin içermeyen bir resim ekledim.
Not: Görüntülenecek görüntü yoksa, tarayıcı genellikle görüntülenecek görüntünün bulunamadığını belirten bir simge yerleştirir.
- <img src="html-logo.png">
Aşağıdaki örnekte, yolu kasıtlı olarak yanlış olan sayfaya bir resim ekledim ve yerine görünmesi için alternatif bir metin yerleştirdim.
- <img src="html-logo.png" alt="ens fotoğraf"/>
Resmin boyutunu belirlemek
Sayfada görüntülediğin resimler, boyutunu kendini belirtmediğin sürece gerçek boyutlarında görüntülenir.
Genellikle resimlerin boyutunu CSS koduyla belirtiriz çünkü kolay ve daha iyi yollar sağlar, ancak HTML çalıştığımız için resimlerin boyutunu belirlemek için HTML'nin bize sağladığı özelliklere odaklanacağız:
- width Piksel olarak görüntülenecek görüntünün genişliğini belirtmek için kullanırız.
- height Görüntülenecek görüntünün piksel cinsinden uzunluğunu belirtmek için kullanırız.
Görüntü boyutunu ayarlamanın önemi
Görüntülenecek görüntülerin boyutlarını belirtmezsen, tarayıcı görüntüleri yüklendikten sonra sayfada görüntülemeye çalıştığında büyük olasılıkla yanıp sönecektir, çünkü tüm sayfayı bir anda yeniden çizecektir, bu nedenle kullanıcı bunu bir flaş olarak görüyor.
Bu nedenle, ister HTML özellikleriyle ister CSS koduyla belirtmelisin, sayfada görüntülemeyi düşündüğün resimlerin boyutunu her zaman belirtmeyi unutma.
Aşağıdaki örnekte, genişliği 200 piksel ve yüksekliği 200 piksel olan bir resim ekledim.
- <img src="https://src.k−html.com/400X400px.png" width="200" height="200"/>