HTML Resimler ~ HTML öğrenin: HTML Resimler

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 tür 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 etmeniz 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.

Ve sitenizde görseller görüntülerken, yayınladığınız görsellerin telif hakkıyla korunmadığından her zaman emin olun - yani ücretsiz olması- çünkü telif hakkı varsa, görsellerin sahibi seni kolayca şikayet edebilir ve bu da telif siteni silinmesine nedeni olabilir.

Sayfaya bir resim eklemek

Genel olarak, bir sayfadaki bir resmi görüntülemek için bu <img src="url">gibi <img> etiketini kullanırız.

Url kelimesinin yerine görüntülemek istediğimiz resmin yolunu koyuyoruz.

Aşağıdaki örnekte, <img> etiketini kullanarak sayfaya bir resim ekledik.

<img src="https://src.k-html.com/html5.png"/>

kod dene

Resim için alternatif bir metin yerleştirmek

Sayfada resim görüntülerken ortaya çıkabilecek yaygın sorunlardan biri, site geliştiricisi resmin yerini değiştirmiş ve sayfalardaki yolunu değiştirmeyi unutmuş gibi bir nedenden dolayı gösterilecek resmi bulamamaktır , ya da kullanıcının internetinin çok yavaş olması ve görüntülenecek resim getirilirken 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 koymak için alt özelliğini ekliyoruz ve resim görüntülenmiyorsa görünecek metni ona iletiyoruz.

Aşağıdaki örnekte, sayfaya kasıtlı olarak yanlış olan ve alternatif metin içermeyen bir resim ekledik.
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="ens.png">

kod dene

Aşağıdaki örnekte, yolu kasıtlı olarak yanlış olan sayfaya bir resim ekledik ve yerine görünmesi için alternatif bir metin yerleştirdik.

<img src="ens.png" alt="ens fotoğraf"/>

kod dene

Resmin boyutunu belirlemek

Sayfada görüntülediğiniz resimler, boyutunu kendiniz belirtmediğiniz 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ı belirtmezseniz, 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 belirtin, sayfada görüntülemeyi düşündüğünüz resimlerin boyutunu her zaman belirtin.

Aşağıdaki örnekte, genişliği 200 piksel ve yüksekliği 200 piksel olan bir resim ekledik.

<img src="https://src.k-html.com/400X400px.png" width="200" undefined"200"/>

kod dene

önceki ders sonraki ders