Bir Web Sitesine Resim Nasıl Gömülür

İçindekiler:

Bir Web Sitesine Resim Nasıl Gömülür
Bir Web Sitesine Resim Nasıl Gömülür

Video: Bir Web Sitesine Resim Nasıl Gömülür

Video: Bir Web Sitesine Resim Nasıl Gömülür
Video: Okul Web Sitesine Galeri Oluşturmak ve Resim Eklemek - Nasıl Yapılır 2024, Mayıs
Anonim

Ziyaretçinin site sayfalarında gördüğü her şey, sunucu tarafından kendisine gönderilen ayrıntılı talimatlara göre tarayıcı tarafından görüntülenir. Bu talimatlara sayfanın html kodu denir ve her bir öğenin türünü, görünümünü ve konumunu ayrı ayrı tanımlayan ayrı "etiketlerden" oluşur. Herhangi bir yeni öğeyi (örneğin bir resim) bir sayfaya yerleştirmek için kaynak koduna karşılık gelen bir talimat - bir etiket - eklemeniz gerekir. Bunu yapmanın en kolay yolunu düşünün.

Bir sayfaya resim ekleme
Bir sayfaya resim ekleme

Talimatlar

Aşama 1

Herhangi bir içerik yönetim sistemi kullanıyorsanız, bunun bir sayfa düzenleyici içermesi çok muhtemeldir. Öncelikle, bu düzenleyicide istediğiniz sayfayı açmanız gerekir. Daha fazla - seçenekler mümkündür. En iyi durumda, sayfa düzenleyicinin bir "görsel modu" olacaktır, başka bir deyişle - "WYSIWYG modu" (Ne Görürseniz Onu Alırsınız - "ne görürseniz onu alırsınız"). Bu modda, orijinal html koduyla hiç uğraşmanıza gerek kalmayacak! Editördeki sayfa sitedekiyle aynı görünecek, fareyi istediğiniz yere dürtmeniz ve editör panelindeki "resim ekle" düğmesine basmanız yeterli olacaktır.

Adım 2

Sonuç olarak, istediğiniz resmi seçmeniz gereken bir iletişim kutusu açılacaktır. Henüz yüklemediyseniz, bilgisayarınızda bir resim seçip sunucuya yüklemek için bir düğme de vardır. Ek olarak, bu iletişim kutusunda görüntünün etrafındaki çerçevenin rengini ve genişliğini, çerçeve ile görüntü arasındaki dolgunun mesafesini ve rengini, araç ipucu metnini ayarlayabilirsiniz. Burada boyutları belirtmek gerekli değildir, ancak sayfa yüklemeyi hızlandırmak ve tasarımın bozulmasını önlemek için bunu yapmak daha iyidir. İletişim kutusunun tüm gerekli alanları doldurulduğunda, "Tamam" ı tıklayın ve ardından düzenlenen sayfayı kaydedin.

Resim Ekle İletişim Kutusu
Resim Ekle İletişim Kutusu

Aşama 3

Kontrol sistemleri için tek bir standart olmaması nedeniyle, sisteminizin görsel moduna bir görüntü ekleme prosedürü biraz farklı olabilir, ancak prensip aynı olacaktır. Aynı nedenle sitenizin yönetim sisteminde WYSIWYG modu görünmeyebilir. O zaman yine de sayfanın kaynak kodunu HTML'de düzenlemeniz gerekir (Köprü Metni İşaretleme Dili - "köprü metni işaretleme dili"). Tarayıcıya resmi burada göstermesini söyleyen kodun doğru yerine bir etiket eklemeniz gerekecek. En basit haliyle, şöyle görünmelidir: İşte görüntünün "göreceli adresi" - bu adreste tarayıcı, görüntü dosyasını ondan almak için sunucuyla iletişim kurmalıdır. Adres göreceliyse, tarayıcı dosyanın sayfanın kendisiyle aynı sunucu klasöründe (veya bir alt klasörde) olduğunu varsayacaktır. Ancak, yanılmamak için "mutlak adresi" belirtmek daha iyidir - örneğin, şöyle: Doğal olarak, sunucunun görüntüyü bulması ve tarayıcıya göndermesi için belirtilen adrese yüklenmesi gerekir. yer. Bunu yapmanın en kolay yolu, her içerik yönetim sisteminde ve barındırma şirketinizin kontrol panelinde bulunan dosya yöneticisidir. Bunu FTP protokolünü (Dosya Aktarım Protokolü - "dosya aktarım protokolü"), özel bir program - FTP istemcisi kullanarak da yapabilirsiniz. Hem ücretli hem de ücretsiz birçoğu var - örneğin, Cute FTP, FlashFXP, WS FTP, vb. Ancak, elbette, programı kurmak, mastering yapmak ve yapılandırmak zaman alacaktır, bu nedenle ihtiyacınız olan her şeyi indirmek için bir dosya yöneticisi tarayıcı daha kolay bir seçenektir.

4. Adım

Resmin html etiketindeki adrese ek olarak, ek bilgileri belirtebilirsiniz - etiketin "nitelikleri". Örneğin, alt="Görüntü" özniteliği, fare imlecini görüntünün üzerine getirdiğinizde açılan araç ipucu metnini içerir: - başlık özniteliği ile değiştirilebilir: - Tarayıcının içinde olması gereken dikdörtgenin boyutu görüntüyü görüntülemek genişlik ve yükseklik öznitelikleri tarafından ayarlanır: - border özniteliği, görüntünün etrafındaki sınırın genişliğini belirtir (piksel olarak): Görüntü bir bağlantı yapılırsa, tarayıcı etrafına mavi bir kenarlık çizer. Bundan kurtulmak için kenarlık değerini sıfıra ayarlayın: - Diğer iki nitelik, resmin bitişik öğelerden (metin satırlarından, diğer resimlerden, vb.) girinti miktarı hakkında bilgi içerir - hspace, görüntünün boyutunu ayarlar. girinti yatay (sol ve sağ), vspace - dikey (alt ve üst):

Önerilen: