HTML Temelleri - Görüntüleri Görüntüleme

• Mayıs Ayı 2, 2024

Web sitenizin metnini beğeninize göre biçimlendirdikten ve biçimlendirdikten sonra, sayfayı birkaç resim ile renklendirme zamanı. Görüntüler sayfalarınıza renk ve hayat katmakla kalmaz, bunları normal metin ve biçimlendirmeyle zor veya imkansız olan metin efektleri oluşturmak için de kullanabilirsiniz. Örneğin, yazı tipi seçimleriniz genellikle ziyaretçilerin bilgisayarlarına yüklendiğinden emin olabileceğiniz az sayıda yazı tipi ile sınırlı olacaktır, çünkü yazı tipi yüklü değilse sitenizde göremezler! Kullanılamayan bir yazı tipinde metin yayınladığınızda, ziyaretçilerin bilgisayarları onu mevcut yazı tipine en yakın şekilde oluşturur, bu da genellikle web sitenizin tasarımına zarar verebilir.

Öte yandan, süslü bir yazı tipinde metin yakalamak ve sitenizde GIF veya JPEG olarak yayınlamak için bir görüntü düzenleme programı kullanırsanız, herhangi bir ziyaretçi tam olarak istediğiniz gibi görecektir - çünkü artık bir metin resmi değil metnin kendisi. Bu, başlıklarınızda hayali yazı tiplerini kullanmanıza ve bunları olağandışı yollarla gruplamanıza izin verebilir.

Görüntüleri görüntülemek için kullanılan temel etiket şudur:



Yukarıdaki kod HTML'de mükemmel şekilde çalışacaktır. XHTML kullanıyorsanız veya sitenizin XHTML'ye hazır olduğundan emin olmak istiyorsanız, etiketi kapatmak için eğik çizgi eklemelisiniz, çünkü XHTML'de açık uçlu etiketler kullanamazsınız:



'Src' kaynağı kısadır ve görüntünüzün dosya yolunu belirtmek için kullanacaksınız - başka bir deyişle, tarayıcınıza görüntünün sitenizde nerede bulunabileceğini söylemek için kullanacaksınız. Görüntülerinizi web sayfalarınızla aynı klasörde tutarsanız, klasörü 'src' metninde listelemenize gerek yoktur; yalnızca görüntü dosya adını yazabilirsiniz.

Görüntü kaynağınızı belirledikten sonra, görüntülerinizden en iyi şekilde yararlanmak için bu temel çerçeveyi çeşitli isteğe bağlı niteliklerle geliştirebilirsiniz. Neredeyse her zaman kullanmanız gereken bir özellik 'alt' özelliğidir. Bu, herhangi bir nedenle resminizi gösteremiyorsa tarayıcının hangi metni göstermesi gerektiğini belirtmenize olanak tanır. 'Alt' metni aşağıdaki gibi hazırlanır:



Bir diğer yararlı özellik kümesi 'genişlik' ve 'yükseklik' etiketleridir. Bunlar, görüntüleri gerçek görüntü boyutundan farklı bir boyutta görüntülemenizi sağlar. Görüntünüzü ince ayar yapmak için kullanabilirsiniz, böylece genel sayfa tasarımınıza mükemmel uyum sağlar. Bununla birlikte, görüntü düzenleme programlarını kullanarak gerçek görüntü boyutunu değiştirmek ve ardından görüntüyü iki nedenden dolayı çevrimiçi olarak göndermek genellikle tercih edilir. İlk olarak, görüntü düzenleme yazılımı neredeyse her zaman boyutu elle ayarlamaktan daha iyi bir sonuç verecektir. İkincisi, 'genişlik' ve 'yükseklik' etiketlerini değiştirmek gerçek görüntünün dosya boyutunu değiştirmez, bu nedenle küçük resim olarak görüntülediğiniz muazzam bir görüntünüz varsa, görüntünün yüklenmesi kadar uzun sürer ve tam boyutta görüntülemiş gibi bant genişliği.

Bir görüntünün boyutunu belirlerken yüksekliği, genişliği veya her ikisini birden listeleyebilirsiniz. Boyutlar, aşağıda görebileceğiniz gibi piksel tarafından belirtilir:



Ayrıca, resimlerinizi metninizin akışıyla sorunsuz bir şekilde çalışmak için 'hizalayabilirsiniz'. Sola hizalamayı seçerseniz, metin görüntünün sağında başlayacaktır. Sağa hizalamayı seçerseniz, görüntü sayfanın sağ tarafında görüntülenir ve metniniz görüntünün sol tarafına gelir ve ardından yeni bir satıra gider.

Görüntü hizalama aşağıdaki gibi ayarlanır:



Görüntüyü metin satırının üstü veya altıyla aynı hizaya getirmek için hizalamayı "üst," "alt" veya "orta" olarak da ayarlayabilirsiniz. Hizalama belirtmezseniz görüntü varsayılan olarak "alt" olur.

Yan not olarak, resim niteliklerinizi (src, hizalama, alt vb.) Resim etiketlerine herhangi bir sırayla ekleyebilirsiniz. Kişisel tercihim ilk önce 'src' niteliğini listelemektir, çünkü bu en temel özelliktir ve her resim etiketine dahil edilmelidir, ancak sizin için en doğal hissi veren diziyi kullanabilirsiniz.

Video Talimatları: HTML Dersleri -1 / Giriş (Mayıs Ayı 2024).