HTML'de Görüntüler – HTML Eğitimi – Web Uygulaması Geliştirme

Görüntüler binlerce kelime konuşabilir. Evet, resimsiz bir web sayfası, kullanıcılarını uzun süre içinde tutamaz. HTML'deki resimler sadece web sayfasını güzel ve çekici kılmak için kullanılmaz, aslında resimler görsel olarak da önemli mesajlar verir.

Görseller tasarımın önemli bir parçasıdır ve görsellerin yardımı olmadan herhangi bir web tasarımı, görsel destekli tasarımın yapabileceği etkiyi yaratamaz. Örneğin, web sayfanızda logo olmadan. İşletmenizin markalaşmasını doğru bir şekilde yapabileceğinizi düşünüyor musunuz? Bunu yapabileceğini sanmıyorum ve logo HTML'deki Image etiketi yardımıyla yerleştirilebilir.

Web sayfasında görüntüleri kullanan birkaç bölüm vardır. Örneğin web sitenizde gördüğünüz reklamlar aynı zamanda görsel desteklidir. Web sitenizin logosu, kaydırıcı resimleri, afişler, profil resimleriniz, hizmet resimleri ve çok daha fazlası. Umarım artık HTML'deki resimlerin önemini anlıyorsunuzdur. Şimdi HTML'de resim etiketinin nasıl kullanılacağını görelim.

HTML Sayfasına Resim Nasıl Eklenir?

Diğer etiketlere benzer şekilde, resim etiketi çok basittir ancak HTML'deki resim etiketinin herhangi bir bitiş etiketi yoktur. Resim etiketi aslında farklı bir kapanış etiketine sahip olmak yerine kendi içinde kapanır. HTML'deki resim etiketi <img ile başlar ve kendisiyle /> biter, böylece tam etiket <img /> olabilir. src=”” gibi iç öznitelikler görüntünün URL'sini tanımlar. Alt özelliği, resmin açıklamasıdır. HTML resim kodu örneğine bir göz atalım.

 <img src="japanese_flag.jpg" alt="Japan Flag" />

Yukarıdaki örnekte <img etiketinin iki farklı niteliğe sahip olduğunu görebiliriz.

HTML Görüntü Sözdizimi

Resim etiketi <img ile başlar ve /> ile biter, src="" etiketi ise resim için URL'yi sağladığınız yerdir. <img etiketinin resim aldığı ve web sayfasında görüntülendiği yerden resmin konumunun src="" içinde olacağını söyleyebilirsiniz.

Resim etiketindeki Alt Nitelik

Resim etiketindeki alternatif öznitelik anlamına gelen alt özniteliğin görselin kendisinden daha önemli olduğunu söylersem. Bu yanlış olmaz çünkü herhangi bir web sayfası oluşturmaktaki asıl amacınız arama motorlarında sıralanmak ve trafik çekmektir. Alt özelliği, arama motorlarına ve diğer botlara görüntünün ne hakkında olduğunu söyleyen şeydir. Alt özelliği, görüntü yüklenemediğinde yer tutucu metni de görüntüler. Alternatif metin kullanmayı benimsemeniz veya resimlerinizi kelimelerle tanımlamaya başlamanız çok önemli ve iyi bir uygulamadır. Sadece alt="" kullanın ve resminizi güzel bir şekilde tanımlayın, bu da harika sonuçlar almanıza çok yardımcı olacaktır. Ve eğer başkaları için çalışıyorsanız, müşterilerinize veya patronunuza da fayda sağlayacak olan budur.

Not: Resimlerinizin uzantısına her zaman dikkat etmelisiniz. Ayrıca resimleri adlandırırken resim adında boşluk olmamalıdır. Özel karakter kullanılamaz. Ancak – ve _'yi de kullanabilirsiniz.

Aşağıda, resimleri veya diğer html belgelerini nasıl adlandırmanız gerektiğine bakın.

Doğru Resim adları:

• japonyaBayrak.jpg
• japan_flag.jpg
• japonya bayrağı.jpg
• japon bayrağı.jpg

Yanlış Resim adları:

• japonya flag.jpg alanı kullanılıyor
• japan&flag.jpg özel karakter
• japon bayrağı Eksik uzantı

Görüntü Boyutu – Genişlik ve Yükseklik

Görüntülere genişlik ve yükseklik sağlamanın iki farklı yolu vardır. Önerilen yöntem, yüksekliği düzeltmek istediğinizde en boy oranınızı uygun tutabilen ancak buna göre ayarlamak için genişliği otomatik hale getirebilen CSS nedenidir. HTML'de resimler için genişlik ve yükseklik özelliklerine sahibiz ve bunlar kullanılabilir.

HTML nitelikleri Genişlik ve Yükseklik örneği

 <img src="japanese_flag.jpg" alt="Japan Flag" width="300px" height="300px" />

CSS genişlik ve yükseklik örneği.

 <img src="japanese_flag.jpg" alt="Japan Flag" /> <!-- auto adjust width --> <img src="japanese_flag.jpg" alt="Japan Flag" /> <!-- fix width and fix height --> <img src="japanese_flag.jpg" alt="Japan Flag" />

Başka Bir Klasördeki Görüntüler

Mevcut sayfanızın nerede olduğu gibi farklı durumlar vardır. Resim, o dosyanın veya web sayfanızın yanındaki bir klasörün içindedir. Diğer durum, klasörün bir adım geri olması olabilir. Peki nasıl erişebilirsiniz?

 <!-- Image in Same Folder as Web Page. /--> <img src="japanese_flag.jpg" alt="Japan Flag" /> <!-- Image in Next Folder from Web Page. /--> <img src="images/japanese_flag.jpg" alt="Japan Flag" /> <!-- Image in Back Folder as Web Page. /--> <img src="../images/japanese_flag.jpg" alt="Japan Flag" />

../ , kullanıcıyı bir klasöre geri götürür ve ardından dosya adını bulmak için oraya başka bir klasöre girer. Ve bir sonraki klasörün olması durumunda, sadece klasör adını ve / dosya adını sağlayın. Resminiz jpg, png, jpeg veya gif ise uzantıyı unutmayın.

Başka Bir Sunucudaki Görüntüler

Görüntü farklı veya başka bir sunucudayken. Bu, resmin web sitesinin URL'sinin web sayfanızın sahip olduğu URL'den farklı olduğu anlamına gelir. Böyle bir durumda, o sunucunun dizinlerine doğrudan giremezsiniz, görüntünün tam referansını sağlamanız gerekir. Hangi bu web sitesinde bu dizinde bu dosya adını söyler. Bu nedenle, tam resim url'sinin nasıl verileceği aşağıdaki örneğe bakın.

 <img src="https://www.webfulcreations.com/wp-content/uploads/2017/05/webfulcreationsvision-1.png" alt="Webful Creations" />

Hareketli Görüntüler

Bir görüntüyü canlandırmak için HTML ile hiçbir şey yapamazsınız. Aslında görüntülerin kendileri, örneğin gif görüntüleri gibi hareketli görüntülerdir. Tarayıcılar gif resmini destekliyorsa ve bu hareketli resmi html etiketinizle eklerseniz. Animasyon, resim yüklendikçe çalışacaktır.

 <img src="japanese_flag.gif" alt="Japan Flag" />

Bağlantı olarak resim

Normal bağlantı gibi, resim etiketini bağlantı etiketine sarmanız gerekir. Bu, resmi tıklanabilir hale getirecek ve bağlantı etiketinin href="" içindeki URL'yi açacaktır. Aşağıdaki örneğe bakın. Gördüğünüz gibi <a etiketi <img etiketinden önce başlar ve </a> /> işaretinden sonra kapanır, bu da resmin <a> içinde olduğu anlamına gelir, bu da onu bağlantılı bir resim yapar.

 <a href="https://www.webfulcreations.com/"> <img src="japanese_flag.jpg" alt="Japan Flag" /> </a>

Görüntü Yüzer

Çoğunlukla yüzer, CSS sınıfları veya satır içi CSS tarafından gerçekleştirilir. Ayrıca birçok HTML etiketinde align niteliğine sahibiz. Bu, görüntüleri bazı metinler veya diğer öğeler boyunca sola veya sağa kaydırmamıza yardımcı olabilir.

align="left", align="right" , görüntüyü hizalamak için kullanılabilecek farklı biçimlerdeki hizalama özniteliğidir. Varsayılan olarak görüntü bir bloktur; bu, görüntünün tam genişliği tuttuğu ve görüntüyü CSS veya align nitelikleriyle hizalamadığınız sürece sola veya sağa başka hiçbir şeyin gelmesine izin vermeyeceği anlamına gelir.

 <!-- Align Left Example /--> <img src="japanese_flag.jpg" alt="Japan Flag" align="left" /> <!-- Align right Example /--> <img src="japanese_flag.jpg" alt="Japan Flag" align="right" />

CSS ile stili kullanabilir ve ardından sola veya sağa kaydırabilirsiniz. Sınıfları hizalama için yapabilir ve en iyi uygulama olan bunları kullanabilirsiniz. Ama burada size satır içi CSS örneği vereceğim.

 <!-- Float Left Example /--> <img src="japanese_flag.jpg" alt="Japan Flag" /> <!-- Float right Example /--> <img src="japanese_flag.jpg" alt="Japan Flag" />

Resmi Ortaya Hizala

Görüntüye ve hizalama merkezine uygulayabileceğiniz doğrudan bir CSS veya görüntü özelliği yoktur. Görüntüyü bir div veya başka bir html blok öğesine sarmanız gerekir. Önceki HTML sürümlerinde, görüntüyü bu etiketlere saran <center></center> html etiketlerine sahiptik, görüntüyü merkeze hizalayabilirdi. Ancak etiket hala çoğu tarayıcı tarafından destekleniyor ancak HTML kodunuzun W3C doğrulama testini geçmesine izin vermiyor.

Böylece görüntüyü merkezde güzel bir şekilde hizalayabilirsiniz. Sadece metin hizalama: Görüntüyü merkeze hizalamak için CSS özelliği yeterlidir. Görüntüye düzeltme genişliği vermek istiyorsanız, marjı otomatik olarak da ayarlanabilen ancak bu önerilmez.

 <div> <img src="japanese_flag.jpg" alt="Japan Flag" /> </div>

Çeşitli HTML etiketleri ve bunların nasıl kullanılacağı hakkında daha fazla bilgi edinmek istiyorsanız. Bu HTML5 Periyodik Tablosu size yardımcı olabilir.

Çözüm

Resimler HTML sayfalarının çok önemli bir parçasıdır. Tasarımı güzelleştirir ve ziyaretçilere güçlü bir mesaj verirler. Bu nedenle, görüntülerin yardımı olmadan hayatta kalabilecek tek bir web sayfası yoktur. HTML'de profesyonel olmak istiyorsanız, iyi bir resim alıştırması yapmanız önerilir. Ayrıca bir video hazırladık lütfen aşağıdan izleyin.

Html görüntüleri öğreticisinin tam kodunu almak istiyorsanız, lütfen aşağıdaki bağlantıdan indirin.

Lütfen HTML'deki Görsellerin kod örneğini görüntüleyin

Lütfen HTML'deki Görsellerin kodunu/kaynaklarını indirin

Önceki Dersi Görüntüle: HTML'deki Bağlantılar

Sonraki Ders: HTML'de Tablolar – HTML Eğitimi – Web Uygulaması Geliştirme