Önemli uyarı
Bu site yapım aşamasındadır ve henüz bitmemiştir.
Daha fazla yardım siteler eklenecek ve mevcut olanlar tamamlanacak, tüm dili kapsayan daha fazla ders eklenecek ve değiştirilecektir.
Sitede veya bir derste fikirlerini belirtmek gibi farklı şekillerde bana yardımcı olabilirsin ve bu beni çok mutlu edecektir.
Sitede reklam göstermediğimi bilerek, daha iyi bir site oluşturmak yardımcı olması için reklam engelleyiciyi kapatabilirsin.
reklam engelleyiciyi kapatmak, sitenin istatistiklerini yükseltmeme yardımcı oluyor.
anlayışınız için teşekkür ederim.
adblock photo
Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragrafları
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • Diğer dersler
  • Database - Veritabanları
  • ens

K-kudo

HTML öğren

Menü

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Yardım
  • Araştırma

HTML Resimler

önceki ders sonraki ders
Sayfa içeriği
  • ›Görüntülerin önemi ve türleri
  • ›Sayfaya bir resim eklemek
  • ›Resim için alternatif bir metin yerleştirmek
  • ›Resmin boyutunu belirlemek

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"/>
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 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">
kod dene

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"/>
kod dene

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"/>
kod dene
önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2022 HTML öğren.