Web siteleri, kendilerinden önce gelen herhangi bir iletişim aracından farklıdır. Web sitelerini, baskı, radyo ve hatta televizyon gibi önceki medya formatlarından ayıran ana şeylerden biri de " hiperlink " kavramıdır.
Genellikle "bağlantılar" olarak da bilinen köprüler, Web'i bu kadar dinamik yapan şeydir. Başka bir makaleye veya başka bir kaynağa başvurabilen basılı bir yayının aksine, web siteleri ziyaretçileri bu diğer sayfalara ve kaynaklara göndermek için bu bağlantıları kullanabilir. Başka hiçbir yayın ortamı bunu yapamaz. Radyoda bir reklamı duyabilir veya TV'de görüntüleyebilirsiniz, ancak bu reklamlardaki şirketlere sizi web sitelerinin kolayca yapabilecekleri şekilde yönlendiren köprüler yoktur. Linkler gerçekten harika bir iletişim ve etkileşim aracı!
Çoğu zaman, bir web sitesinde bulunan bağlantılar, ziyaretçileri aynı sitenin diğer sayfalarına yönlendiren metin içeriğidir. Bir web sitesinin navigasyonu, uygulamadaki metin bağlantılarına bir örnektir, ancak bağlantıların metin tabanlı olması gerekmez. Ayrıca görüntüleri web sitenize kolayca bağlayabilirsiniz. Bunun nasıl yapıldığına bakalım, ardından görüntü tabanlı köprüler kullanmak istediğiniz bazı örneklerle takip edelim.
Görsel Nasıl Bağlanır?
Yapmanız gereken ilk şey, resmin kendisini HTML belgenize yerleştirmektir. Görüntü tabanlı bir bağlantının yaygın kullanımı sitenin logo grafiğidir ve daha sonra sitenin ana sayfasına geri bağlanır. Aşağıdaki örnek kodumuzda, kullandığımız dosya logomuz için bir SVG'dir . Bu, görüntü kalitesini ve küçük bir dosya boyutunu korurken, görüntünün farklı çözünürlükler için ölçeklendirilmesini sağlayacağından, iyi bir seçimdir.
Resminizi HTML belgesine nasıl yerleştirirsiniz:
Görüntü etiketinin etrafında, görüntüden önce sabitleme elemanını açıp bağlantıyı kapattıktan sonra bağlantıyı eklerdiniz. Bu, metinleri nasıl bağlayacağınız ile benzerdir, sadece bağlantı etiketleri ile bağlantı kurmak istediğiniz sözcükleri sarmak yerine, görüntüyü sarmalarsınız. Aşağıdaki örneğimizde, sitemizin "index.html" olan ana sayfasına geri bağlantı veriyoruz.
Bu HTML'yi sayfanıza eklerken, bağlantı etiketi ile resim etiketi arasında boşluk bırakmayın. Bunu yaparsanız, bazı tarayıcılar görüntünün yanında küçük tutacaklar, bu da garip görünecektir.
Logo görüntüsü artık bu günlerde bir web standardı olan bir ana sayfa düğmesi olarak da işlev görecekti. HTML biçimlendirmemizde görüntünün genişliği ve yüksekliği gibi herhangi bir görsel stil içermediğimize dikkat edin. Bu görsel stilleri CSS'ye bırakacağız ve HTML yapısının ve CSS stillerinin temiz bir şekilde ayrılmasını sağlayacağız.
CSS'ye ulaştığınızda, bu logo grafiğini hedeflemek için yazdığınız stiller , çoklu cihaz dostu görüntüler için duyarlı stillerin yanı sıra kenarlık veya CSS gibi görüntü / bağlantıya eklemek istediğiniz görseller de dahil olmak üzere görüntünün boyutlandırılmasını içerebilir. gölgeler. Ayrıca, CSS stillerinizle kullanmak için ek "kanca" ya ihtiyacınız varsa, resminizi verebilir veya bir sınıf özelliği bağlayabilirsiniz.
Görüntü Bağlantıları için Kılıfları Kullan
Yani bir görüntü bağlantısı eklemek oldukça kolaydır. Gördüğümüz gibi, yapmanız gereken tek şey görüntüyü uygun bağlantı etiketleri ile sarmak. Bir sonraki sorunuz, "daha önce anılan logo / anasayfa link örneğinin yanında bunu ne zaman pratikte yapacaksınız?"
İşte bazı düşünceler:
- Bu resimlerin daha büyük sürümlerine bağlantı veren bir galeride küçük resimler.
- Bir e-ticaret web sitesinin ürün fotoğrafları gibi içeriği temsil etmek için tek başına kullanılan resimler.
- Bir blog makalesi veya basın bülteni gibi diğer içeriğin bir parçası olan teaser görseller, bu içeriğin, kullanıcıların tam makaleyi okumak için tıklamak veya tıklamak için bir hedef alan sağladığını fark etmelerini teşvik eder.
- Belirli işlevlere veya sitedeki sayfalara bağlanmak için düğmeler olarak kullanılan simge resimleri.
- Bu site veya şirket için önemli olan çeşitli sosyal medya sitelerinin tanınabilir logolarını kullanan sosyal medya bağlantıları.
- Form gönderimleri gibi belirli işlevler için düğmeler olarak kullanılan resimler (en iyi uygulama notları - web sitesi performans perspektifinden, yalnızca CSS ile biçimlendirilmiş düğmeler resim düğmelerinden daha iyi bir seçimdir).
Görüntüleri Kullanırken Bir Hatırlatma
Görüntüler, bir web sitesinin başarısında önemli bir rol oynayabilir. Yukarıda verilen örneklerden biri, bu içeriğe dikkat çekmek ve insanları okumasını sağlamak için diğer içeriğin yanında görüntülerin kullanılmasından bahsetmiştir.
Resimler kullanılırken, ihtiyaçlarınız için doğru görüntüyü seçmeniz gerekir . Bu, doğru resim konusunu, biçimini ve web sitenizde kullandığınız tüm görsellerin web sitesi teslimatı için uygun şekilde optimize edilmesini sağlar . Bu sadece görüntüleri eklemek için çok iş gibi görünebilir, ama karşılığı buna değer! Görüntüler, bir sitenin başarısına gerçekten çok fazla şey ekleyebilir.
Sitenizde uygun görselleri kullanmaktan çekinmeyin ve gerektiğinde içeriğinize etkileşimli olarak eklemek için bu görüntülere bağlantı verin, aynı zamanda bu görüntüdeki en iyi uygulamalara dikkat edin ve bu grafik / bağlantıları web tasarım işinizde doğru ve sorumlu bir şekilde kullanın.