herhangi birine bak web sayfası bugün çevrimiçi ve bazı ortak noktaları paylaştıklarını fark edeceksiniz. Bu ortak özelliklerden biri de imajlardır. Doğru görseller bir web sitesinin sunumuna çok şey katar. Bir şirketin logosu gibi bu görsellerden bazıları, sitenin markalaşmasına ve bu dijital varlığın fiziksel şirketinize bağlanmasına yardımcı olur.
HTML Kullanarak Bir Web Sayfasına Nasıl Resim Eklenir?
Web sayfanıza bir resim, simge veya grafik eklemek için, bir sayfanın HTML kodunda etiketi kullanmanız gerekir. yerleştirirsiniz.
IMGetiketleyin. HTML tam olarak grafiğin görüntülenmesini istediğiniz yer. Sayfanın kodunu oluşturan web tarayıcısı, sayfa görüntülendiğinde bu etiketi uygun grafikle değiştirecektir. Şirket logosu örneğimize geri dönersek, bu görseli sitenize nasıl ekleyebileceğiniz aşağıda açıklanmıştır:
SRC Özelliği
Yukarıdaki HTML koduna baktığınızda, elementin iki nitelik içerdiğini göreceksiniz. Her biri görüntü için gereklidir.
İlk nitelik "src" dir. Bu, kelimenin tam anlamıyla sayfada görüntülenmesini istediğiniz görüntü dosyasıdır. Örneğimizde "logo.png" adlı bir dosya mı kullanıyoruz. Bu, web tarayıcısının siteyi oluşturduğunda göstereceği grafiktir.
Ayrıca bu dosya adından önce bazı ek bilgiler eklediğimizi fark edeceksiniz, "/images/". Bu dosya yolu. İlk eğik çizgi, sunucuya dizinin kök dizinine bakmasını söyler. Ardından "images" adlı bir klasör ve son olarak "logo.png" adlı dosyayı arayacaktır. Bir sitenin tüm grafiklerini depolamak için "görüntüler" adlı bir klasör kullanmak oldukça yaygın bir uygulamadır, ancak dosya yolunuz sitenizle alakalı olana değiştirilir.
Alt Nitelik
İkinci gerekli nitelik "alt" metindir. Bu, görüntünün herhangi bir nedenle yüklenememesi durumunda gösterilen "alternatif metindir". Örneğimizde "Şirket Logosu" yazan bu metin, resim yüklenemezse görüntülenecektir. Neden böyle olsun? Çeşitli nedenler:
- Yanlış dosya yolu
- Yanlış dosya adı veya yazım hatası
- İletim hatası
- Dosya sunucudan silindi
Bunlar, belirtilen görüntümüzün neden eksik olabileceğine dair birkaç olasılıktır. Bu durumlarda, bunun yerine alternatif metnimiz görüntülenir.
Alternatif Metin Ne İçin Kullanılır?
Alternatif metin, ekran okuyucu yazılımı tarafından, görme engelli bir ziyaretçiye görüntüyü "okumak" için de kullanılır. Görüntüyü bizim gördüğümüz gibi göremedikleri için bu metin, görüntünün kendisinin ne olduğunu bilmelerini sağlar. Bu nedenle alternatif metin gereklidir ve görüntünün ne olduğunu açıkça belirtmesi gerekir!
Alternatif metnin yaygın bir yanlış anlaşılması, arama motoru amaçlarına yönelik olmasıdır. Bu doğru değil. Google ve diğer arama motorları, görselin ne olduğunu belirlemek için bu metni okurken (unutmayın, resminizi de "göremezler"), yalnızca aramaya hitap etmek için alternatif metin yazmamalısınız motorlar. İnsanlara yönelik açık bir alternatif metin yazar. Etikete arama motorlarına hitap eden bazı anahtar kelimeler de ekleyebilirseniz, sorun değil, ancak her zaman emin olun. alternatif metin, grafikleri göremeyen herkes için görüntünün ne olduğunu belirterek birincil amacına hizmet ediyor dosya.
Diğer Resim Nitelikleri
.
IMG.
etiketinin ayrıca web sayfanıza bir grafik koyduğunuzda görebileceğiniz iki özelliği daha vardır: genişlik ve yükseklik. Örneğin Dreamweaver gibi bir WYSIWYG düzenleyici kullanıyorsanız, bu bilgileri sizin için otomatik olarak ekler. İşte bir örnek:
.
GENİŞLİK.
ve.
YÜKSEKLİK.
öznitelikler tarayıcıya görüntünün boyutunu söyler. Tarayıcı daha sonra mizanpajda tam olarak ne kadar yer ayıracağını bilir ve resim indirilirken sayfadaki bir sonraki öğeye geçebilir. Bu bilgiyi HTML'nizde kullanmanın sorunu, resminizin her zaman tam olarak bu boyutta görüntülenmesini istemeyebilirsiniz. Örneğin, eğer bir.
duyarlı web sitesi
Ziyaretçi ekranına ve cihaz boyutuna göre boyutları değişen görsellerinizin esnek olmasını da isteyeceksiniz. HTML'nizde sabit boyutun ne olduğunu belirtirseniz, duyarlı ile geçersiz kılmanın çok zor olduğunu göreceksiniz.
CSS medya sorguları
. Bu nedenle ve stil (CSS) ve yapı (HTML) ayrımını korumak için HTML kodunuza genişlik ve yükseklik özellikleri EKLEMEMENİZ önerilir.
Bir not: Bu boyutlandırma talimatlarını kapalı bırakırsanız ve CSS'de bir boyut belirtmezseniz, tarayıcı görüntüyü yine de varsayılan boyutunda gösterecektir.
Düzenleyen Jeremy Girard