Sayfa içeriği
Görüntülerin önemi ve türleri
Resimlerin sayfalarda gösterilmesi, resim kullanıcının gözü çekmesi nedeniyle çok önemlidir.
Site yazılı açıklamalar sağlıyorsa, resimler açıklamalara mükemmel bir ek olacaktır, özellikle de kullanıcıyı bilgisayarında bir sorunu çözme veya adım adım bir program yükleme gibi bir işlemi nasıl gerçekleştireceğini bilgilendirmeyi amaçlıyorsa resimler çok faydalı olur.
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 beklemekte zorunda kalacaktır
Sitende görseller görüntülerken, yayınladığın görsellerin telif hakkıyla korunmadığından her zaman emin olmalısın 'yani ücretsiz değildir' çünkü telif hakkı varsa görsellerin sahibi seni kolayca şikayet 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ılıyor.
URL kelimesinin yerine göstermek istediğin resmin yolunu eklemelisin.
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 bir metin gösterebilirsin.
Bu sayede kullanıcı, görünmeyen resmin konusunun ne olduğunu bilecek ve hatta hatayı çözmek için sana mesaj atabilir.
Görsele alternatif bir metin eklemek için <a> etiketi alt özelliğini ekleyebilirsin ve resim görüntülenmiyorsa görünecek metni ona değer olarak iletebilirsin.
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 ekledim.
- <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ü daha kolay ve 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ılıyor.
- height: Görüntülenecek görüntünün piksel olarak uzunluğunu belirtmek için kullanılıyor.
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"/>