HTML Resimleri

Sayfa içerisinde resim veya fotoğraf görüntülemek için de image anlamına gelen img etiketini kullanıyoruz. Img etiketinin kullanımını aşağıda görebilirsiniz. src ise source anlamına geliyor ve resmin yolunu burada belirtiyorsunuz. img etiketinin kapanışı da dikkat ederseniz diğer etiketlerden farklı.

<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="resim.jpg" alt="Resim" title="Html Resimleri 1">

Bir görsele link vermek isterseniz a etiketinde gördüğümüz kod kısmında Tıkla yazan yere imajın etiketini koyabilirsiniz. Örneği aşağıda. Böylece görsele tıklandığında a href etiketindeki sayfaya yönlendirilecektir.

<a href="sayfa.html"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="resim.jpg" alt="Resim" title="Html Resimleri 1"></a>

Dosya yollarının olduğu link ve görsel etiketlerine bir parantez açmak istiyorum. CSS, JS ve görsellerin olduğu web sitelerinde tüm dosyalar aynı klasörde olmaz. Mesela css dosyaları CSS klasörünün içinde, görseller img klasörünün içinde olabilir. index.html ile birlikte bir img klasörü düşünün ve img klasörünün altndaki bir logoya ulaşmaya çalışalım. Bunu da aşağıdaki kodla yapabiliyoruz.

<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/logo.png" alt="Logo" title="Html Resimleri 3">

Popular Eğitimler

HTML Metin Biçimlendirme
HTML Metin Biçimlendirme

HTML’in, yazdığınız paragrafta Microsoft Word’deki bazı özellikler gibi şekle sokmanızı sağlayan özellikleri…

HTML’de Sayfalara Yorum Eklemek
HTML’de Sayfalara Yorum Eklemek

Sayfa içeriğinde görünmeyen ancak kendinize ya da sitenin kodlarına ulaşabilecek diğer insanlar…

HTML Paragrafları
HTML Paragrafları

Web sitesi hazırlarken yazdığınız herhangi bir paragrafı, paragraph etiketi anlamına gelen p…

HTML Nedir ve HTML Etiketleri Nasıl Kullanılır?
HTML Nedir ve HTML Etiketleri Nasıl Kullanılır?

Bir web sitesinin ne şekilde göründüğü ile ilgili kodların bulunduğu yapıdır HTML….

HTML Alıntıları
HTML Alıntıları

Bize ait olmayan sözleri sitemizde yayınlarken alıntı şeklinde yayınlarız ki sözün ya…

HTML’de RGB, HEX ve HSL Renk Kodları Kullanımı
HTML’de RGB, HEX ve HSL Renk Kodları Kullanımı

Web siteleri hazırlarken kullandığınız renkleri farklı şekillerde gösterebilirsiniz. HTML’de renk değerleri renk…