HTML ile bir resim ekleyin

Yazar: Christy White
Yaratılış Tarihi: 4 Mayıs Ayı 2021
Güncelleme Tarihi: 1 Temmuz 2024
Anonim
Html dersleri-8 resim ekleme
Video: Html dersleri-8 resim ekleme

İçerik

Web sitenize veya sosyal ağ profilinize görseller eklemek, web sayfanızı güzelleştirmek için mükemmel bir yoldur. HTML (HyperText Markup Language), web sayfaları oluşturmak için birçok işleve sahiptir, ancak neyse ki, görüntüleri eklemeniz için gereken kod çok zor değildir.

Adım atmak

Yöntem 1/1: HTML ile Resim Ekleme

  1. Resminizi, sıcak bağlantıya izin veren Photobucket veya TinyPic gibi ücretsiz bir barındırma web sitesine yükleyin. Sıcak bağlama, bir görüntünün web sitesi sunucusuna doğrudan bağlanmasına izin verir; Bazı sağlayıcılar, sıcak bağlantı bant genişliğini kullandığından ve sunucularında yer kapladığından bunu yasakladı.
    • Ücretli bir barındırma hesabınız varsa, resimleri doğrudan web sitenizin yerleştirildiği sunucuya yükleyin. Bu her zaman ücretsiz bir siteden daha güvenilirdir ve hiç de pahalı olması gerekmez.
  2. Bir metin düzenleyicide yeni bir belge açın (ör., Not Defteri / Not Defteri) veya web sitenizde / profilinizde HTML kodunu doğrudan değiştirebileceğiniz sayfayı açın.
  3. İle başlayın img etiket. The img etiketi boş, yani kapanış etiketi gerekmiyor. Ancak, XHTML doğrulaması için önüne yine de bir boşluk ve eğik çizgi koyabilirsiniz. daha büyük işaret.
    • img />
  4. Kullanılabilir birçok özellik vardır, ancak yalnızca biri gereklidir:src. Bu, görüntünüzün konumu / adresi veya aynı zamanda URL'sidir.
    • img src = "resmin URL'si" />
  5. Sonra yapmalısın alt öznitelik ekleyin. Bu, görüntünün yüklenememesi durumunda alternatif bir metin gösterir. Bu aynı zamanda görme engelliler için ekran okuyucu kullanan bir hizmettir.
    • İmleci bir görüntünün üzerine getirirseniz, bu metin bir araç ipucu olarak da gösterilir, ancak bu yalnızca Internet Explorer'da geçerlidir. Tüm tarayıcılarla çalışan çözüm (Firefox et al.) ona göre Başlık ek olarak kullanılacak özellik alt. (Görüntünün bir araç ipucuna sahip olmasını istemiyorsanız, ikincisini atlayabilirsiniz.)

Örnek olarak:img src = "Resmin URL'si" alt = "Her ihtimale karşı" title = "Araç İpucu" />


  1. Şimdi görüntünün boyutunu şu şekilde belirtebilirsiniz: yükseklik ve Genişlik özniteliği ve pikselleri veya yüzdeyi belirterek. Bu şekilde yeniden boyutlandırmanın görüntünün boyutunu değil, yalnızca görünümün boyutunu değiştirdiğini unutmayın. Bir görüntünün yükleme süresini kısaltmak için, özellikle büyük görüntülerde, bunları fotoğraf düzenleme yazılımıyla veya PicResize.com gibi çevrimiçi bir hizmetle önceden yeniden boyutlandırmak daha iyidir.
    • img src = "Resmin URL'si" alt = "Her ihtimale karşı" title = "Araç ipucu" yükseklik = "% 50" genişlik = "% 50" />
    • img src = "Resmin URL'si" alt = "Her ihtimale karşı" title = "Araç ipucu" height = "25px" width = "50px" />

İpuçları

  • Bu özniteliklerin değeri, piksel cinsinden veya% 1-100 arasında yüzde olarak verilir.
  • Görüntü, üst, alt, orta, sağ, sol gibi çeşitli biçimlendirme nitelikleri kullanılarak web sayfasında herhangi bir yere yerleştirilebilir.
  • Hspace niteliği bir görüntünün soluna ve sağına yatay boşluk eklemek için kullanılırken, vspace özniteliği görüntülerin ve diğer nesnelerin üstünde ve altında yer açmak için kullanılır.
  • Görüntülerle fazla şımartmayın. Dağınık ve amatörce görünüyor.
  • GIF resimleri logolar veya çizgi filmler için uygundur, ancak bu dosya türü birçok renkli fotoğraflar ve diğer resimler için daha az uygundur.
    • GIF görüntüleri, bir görüntü için yalnızca maksimum 256 renk içeren 8 bit rengi destekler. Bu nedenle, 16 veya 24 bit renkli bir illüstrasyon veya fotoğrafın çoğaltılmasının o kadar iyi olmaması beklenir.
    • GIF resimleri de şeffaflığı destekler. Bir bit şeffaflık mümkündür, bu da bir rengin şeffaf hale getirilebileceği anlamına gelir.
    • Taramalı görüntü aynı zamanda GIF görüntüleriyle de desteklenir; bu, site ziyaretçisinin görüntünün tamamen yüklenmeden önce nasıl görüneceği konusunda bir fikir edeceği anlamına gelir.
    • GIF formatı ayrıca animasyonu da destekler.
  • URL'nin resmin dosya biçimini belirttiğinden emin olun (.webp .gif vb.).

Uyarılar

  • Hotlink etmeyin!