Web sitelerinin tasarımlarının güzel olmasında en önemli etken kaliteli görsel kullanılması ve bu görsellerin doğru bir şekilde kullanılmasıdır. Web sayfalarının görünümleri ve kullanım kolaylığı hakkında olan eğitimlerimize de UX UI Eğitimi göz atabilirsiniz.
HTML’de görsel eklemek için
< img >
etiketini kullanıyoruz. < img > etiketi diğer bir çok html etiketinden farklı olarak sadece açılış etiketine sahiptir. Kapanış etiketi kullanmayız. Ayrıca görseli kaynağından çekmesine yardımcı olan
src=”resimadresi “
niteliği kullanılmalıdır.
Örnek:
<img src="shaman.jpg" >
Önizleme:
< img > etiketinin içerisinde width=”” ve height=”” gibi öz nitelikler bulunmaktadır. Bunlar sayesinde görsellerin genişliklerini ve yüksekliklerini ayarlayabiliriz.
Bir görselin hem yüksekliğini hem genişliği aynı anda belirlemek görselimizin oranını bozduğu için kaymalar olabilecektir. Bu sebepten dolayı en iyi boyutlandırma tek bir düzlemde boyutlandırmadır. Tek bir düzlemde boyutlandırma yaptığımız zaman diğer düzlemi on göre optimize edecektir.
Örnek:
<img width="200px" src="shaman.jpg" >
Önizleme:
Görsellere < img > İçerisinde Alt Tagi Ekleme ve Seo
Google görseller her gün milyonlarca sayfa gösterimi yapmaktadır. Haliyle bu bölgede bulunan içerikler popülerleşmekte ve talep görmektedir. Arama motorları görselleri tanımlarken. Görsel ismi, bulunduğu sayfa gibi kriterlere baksa da en önemli unsurlardan biri bir açıklama metni yani alt tagi olmasıdır. Alt tagi şu şekilde eklenmektedir;
Örnek:
<img width="200px" src="shaman.jpg" alt="Amerika şamanizmi bufalo ilustrasyonu" >
Önizleme:
Yukarıda da göründüğü gibi alt tagi sayfa tasarımında hiç bir etki yaratmaz sadece arama motorları ve diğer yazılımlara bu konuda bilgi verir.