HTML Görseller

HTML Görseller Nedir?

HTML, web sayfalarını oluşturmak için kullanılan bir işaret dilidir. Bu dil, metinler, bağlantılar, tablolar ve görseller gibi çeşitli unsurları bir araya getirerek kullanıcıya görsel ve içerik zengini bir deneyim sunar. Görseller, web sayfalarının görsel olarak daha çekici ve etkileyici hale gelmesini sağlar. Ancak, görselleri doğru bir şekilde eklemek ve kullanmak önemlidir.

HTML İçinde Görseller Nasıl Eklenir?

HTML içerisinde bir görsel eklemek için <img> etiketinden yararlanılır. Bu etiket, src özelliği ile görselin kaynak dosyasını belirtir. Ayrıca, görselin alternatif metnini (alt text) belirtmek için alt özelliği kullanılır. Örneğin:

<img src=”resim.jpg” alt=”Bu bir resimdir”>

Bu kod, “resim.jpg” adlı bir görseli ve “Bu bir resimdir” alternatif metnini sayfada görüntüler.

HTML’deki diğer çeşitli etiketler ve özellikler kullanılarak görseller üzerinde boyutlandırma, açıklama ekleme ve galeri oluşturma gibi işlemler de gerçekleştirilebilir. HTML, görsel düzenlemelerin yanı sıra site performansı ve erişilebilirlik gibi önemli faktörlere de dikkat etmek için kullanışlı özellikler sunar.

HTML İçinde Görseller Nasıl Eklenir?

HTML, web sayfalarının temel yapısını oluşturan bir dildir ve işaretlemeler kullanılarak içeriklerin düzenlenmesini sağlar. Bu içerikler içerisinde görseller de bulunabilir ve bu görsellerin eklenmesi de oldukça kolaydır. HTML içinde görselleri eklemek için <img> etiketi kullanılır. Bu etiket sayesinde web sayfasına görseller kolaylıkla eklenir ve sayfanın daha ilgi çekici ve görsel olarak daha zengin hale gelmesi sağlanır.

HTML içinde görsel eklemek için <img> etiketinin yanı sıra bazı özellikleri de belirtmek gerekmektedir. Bu özellikler arasında en önemlisi src özelliğidir. src özelliği, görüntünün kaynak adresini belirtir ve bu adres, resmin bulunduğu dizini veya tam URL olabilir. Örneğin;

Örnek Resim Etiketi

Özellik	Açıklama
src	Resmin URL’sini belirtir
alt	Resmin alternatif metnini belirtir
width	Resmin genişliğini belirtir
height	Resmin yüksekliğini belirtir

Örneğin;<img src=”resim.jpg” alt=”Örnek Resim” width=”500″ height=”300″> şeklinde bir etiket ile resim eklemiş oluruz. Bu etiket sayesinde resim.jpg adlı resmi görüntülerken, tarayıcı resmin boyutunu 500 piksel genişlik ve 300 piksel yükseklik olarak belirleyecektir.

HTML’de Görsel Boyutlandırma Nasıl Yapılır?

HTML’de görsel boyutlandırma yapmak oldukça kolaydır. İster bir resmi küçültmek isteyin, ister büyütmek isteyin, HTML size bu imkanı sunar. Bu özellik sayesinde web sayfalarınızda görsellerinizi istediğiniz şekilde boyutlandırabilirsiniz.

HTML’de görsel boyutlandırmak için width ve height özelliklerini kullanabilirsiniz. Bunlar, piksel cinsinden değer alır. Örneğin, bir resmi genişlik olarak 500 piksel, yükseklik olarak da 300 piksel olarak boyutlandırmak isterseniz, HTML kodunda şu şekilde belirtmelisiniz:

Yukarıdaki örnekte, width özelliği 500 piksel olarak belirtilmiş ve resmin genişliği 500 piksel olacak şekilde boyutlandırılmıştır. Aynı şekilde height özelliği 300 piksel olarak belirtilmiş ve resmin yüksekliği de 300 piksel olacak şekilde boyutlandırılmıştır.

HTML’de Alternatif Metin (Alt Text) Kullanımı

HTML’de Alternatif Metin (Alt Text), bir görselin metin tabanlı bir açıklaması veya betimlemesidir. Web siteleri ve uygulamalar, kullanıcıların tarayıcılarında görselleri görüntüleyememesi durumunda, görselin yerine geçecek metni sağlamak için Alternatif Metin kullanır. Bunun yanı sıra, görsellerin taranabilmesi ve erişilebilirlik için de önemlidir. Alternatif metin ayrıca görme engelli kullanıcılar için ekran okuyucu yazılımları tarafından sesli bir şekilde okunabilir.

Alternatif Metin eklemek için alt özelliği kullanılır. Aşağıda bir örnek görsel etiketi verilmiştir:

• src: Görselin kaynağını (dosya yolunu veya URL’yi) belirtir.
• alt: Görselin alternatif metin açıklamasını belirtir.

Görsel	Alternatif Metin
	Renkli çiçekler
	Yeşil orman

Yukarıdaki örnekte, bir çiçek resmi ve bir orman resmi için alternatif metinler verilmiştir. Bu metinler, görsellerin içeriği hakkında bilgi verir ve kullanıcıların görselleri anlamasına yardımcı olur.

HTML Görsel Açıklamaları (Caption) Eklemek

HTML’de görsellerin yanında açıklama eklemek istediğinizde, <caption> etiketinden yararlanabilirsiniz. <caption> etiketi, bir görselin altında veya yanında yer alan metin tablosunu oluşturmanızı sağlar. Bu metin tablosu, görselin altında veya yanında görüntülenen bir açıklama sağlayarak kullanıcılara daha fazla bilgi sunmanızı sağlar.

Örneğin, bir fotoğraf galerisi oluşturduğunuzu varsayalım. Her fotoğrafın altında bir açıklama göstermek istiyorsunuz. İşte bunu yapmak için <caption> etiketini kullanabilirsiniz. Örneğin:

Bu fotoğraf güzel manzarayı göstermektedir.

Bu fotoğraf harika bir günbatımını göstermektedir.

Bu şekilde, her fotoğraf için bir açıklama ekleyebilirsiniz. Açıklamalar, görsellerin altında gösterilecektir ve kullanıcılara daha fazla bilgi sağlayacaktır.

HTML’de Görsel Bağlantıları (Image Links) Oluşturmak

Web sitenizin görselleri, sadece görsel içerik sunmakla kalmaz, aynı zamanda ziyaretçilerin belirli bir bağlantıya tıkladığında farklı bir sayfaya yönlendirilmesini sağlar. HTML’de görsel bağlantıları (image links) oluşturmak oldukça kolay ve etkili bir yöntemdir. Bu makalede, HTML kodunu kullanarak nasıl görsel bağlantıları oluşturabileceğinizi öğreneceksiniz.

HTML’de bir görseli bağlantılı hale getirmek için a etiketini ve href özelliğini kullanırız. Bu, bağlantıya tıklanarak yönlendirilecek sayfanın URL’sini belirtmemizi sağlar. Ayrıca, görselin alt özelliğini kullanarak alternatif metni belirleyebiliriz. Bu, görselin yüklenmediği durumlarda ekran okuyucuları ve arama motorları için önemlidir.

Aşağıda çeşitli görsel bağlantıları için bir örnek bulunmaktadır:

Görsel	URL
	Sayfa 1’e Git
	Sayfa 2’ye Git
	Sayfa 3’e Git

Bu örnekte, her bir görselin altında bir bağlantı metni bulunur ve tıklanabilir bir bağlantıya dönüştürülmüştür. Her bağlantı, belirli bir sayfaya yönlendirilmektedir.

HTML Görsel Galerileri Oluşturmak

HTML Görsel Galerileri, web sayfalarında birden fazla görselin düzenli bir şekilde görüntülenmesini sağlayan bir özelliktir. Bu galeriler, kullanıcıların görseller arasında gezinmelerini ve sayfalarındaki içeriği daha etkileyici hale getirmelerini sağlar. HTML’de görsel galerileri oluşturmak için çeşitli yöntemler bulunmaktadır.

Birinci yöntem, HTML listeler kullanarak galeri oluşturmaktır. ul veya ol etiketlerini kullanarak bir liste oluşturabilir ve ardından her bir liste öğesine li etiketi içinde bir img etiketi ekleyebilirsiniz. Bu şekilde, galeri görüntülerini yan yana sıralayabilirsiniz. Ayrıca, gerektiğinde CSS kullanarak görüntülere stiller de uygulayabilirsiniz.

İkinci yöntem ise, HTML tablolarını kullanmaktır. Bir tablo oluşturarak her hücreye bir görsel ekleyebilirsiniz. Tablolar, görselleri düzenli bir şekilde yan yana veya alt alta hizalamanıza olanak sağlar. Tabloları kullanırken, caption etiketi ile tabloya bir açıklama da ekleyebilirsiniz. Bu, kullanıcıların görsellerin içeriği hakkında daha fazla bilgi edinmelerine yardımcı olur.

Sık Sorulan Sorular

HTML Görseller Nedir?

HTML görseller, HTML dokümanlarına resim eklemek için kullanılan bir etiket olan <img> etiketiyle eklenen resim dosyalarıdır.

HTML İçinde Görseller Nasıl Eklenir?

Görseller HTML dokümanlarına <img> etiketi kullanılarak eklenir. Etiketin src özelliği, resmin dosya yolunu belirtir ve alt özelliği ise resmin alternatif metnini temsil eder.

HTML’de Görsel Boyutlandırma Nasıl Yapılır?

HTML’de görsel boyutlandırmak için width ve height özellikleri kullanılabilir. Bu özellikler, resmin genişlik ve yüksekliğini belirlemek için piksel cinsinden değerler alır.

HTML’de Alternatif Metin (Alt Text) Kullanımı

Alternatif metin (alt text), bir resmin açıklamasıdır ve tarayıcılar tarafından gösterilirken veya resim yüklenmediğinde metin olarak görüntülenir. Bu metin, görme engelli kullanıcılar için resmin içeriğini anlamalarına yardımcı olur.

HTML Görsel Açıklamaları (Caption) Eklemek

Görsel açıklamaları, bir resme ilişkin metin açıklamalarını belirtmek için kullanılır. Bunun için <figure> ve <figcaption> etiketleri kullanılır. <figure> etiketi, resimle ilişkili içeriği gruplamak için kullanılırken, <figcaption> etiketi, resim açıklamalarını belirtmek için kullanılır.

HTML’de Görsel Bağlantıları (Image Links) Oluşturmak

HTML’de görsel bağlantıları oluşturmak için <a> etiketi kullanılır. Bu etiket, resmin tıklanabilir bir bağlantıya dönüştürülmesini sağlar. href özelliği ise bağlantının hedef URL’sini belirtir.

HTML Görsel Galerileri Oluşturmak

HTML’de görsel galerileri oluşturmak için genellikle CSS ve JavaScript kullanılır. HTML’de birçok resmi galeri olarak düzenlemek için <div> veya <ul> gibi etiketler kullanılabilir. Ardından CSS ve JavaScript ile bu etiketlere stiller ve işlevler eklenir.