HTML'ye resim kodu nasıl eklenir? HTML'de görsellerle çalışma (resim nasıl eklenir, boyutu nasıl değiştirilir, resim nasıl bağlantı yapılır). Genişlik ve Yükseklik niteliklerini kullanarak görüntünün genişliğini ve yüksekliğini ayarlayın

Resmin görüntülenmesinden sorumlu HTML etiketi

• HTML resmi PNG, JPEG ve GIF formatındaki herhangi bir resim olabilir.
• Resim için HTML kodu etiketiyle tanımlanmış .
• HTML resmi bir web sayfasının arka planı olabilir.
• HTML resmi hiperlink olarak tanımlanabilir.

D\My_first_site\ klasörüne veya index.html dosyasının bulunduğu başka bir klasöre, örneğin .jpg uzantılı bir resim yerleştirin ve ona istediğiniz adı verin, örneğin xxx.

Bir sayfanın HTML koduna resim ekleme:

Etiket - eşleştirilmemiş. Kapanma şekline dikkat edin.

Nitelikler ve değerler

• - gerekli, görüntünün kaynağını gösterir.
• alt = "" - bir web sayfasının içeriğini analiz ederken arama robotu tarafından okunan bir yorum olan alternatif metni tanımlar. Ayrıca belirlenmesi gerekiyor.
• genişlik = "" - görüntünün genişliğini piksel cinsinden belirtir.
• height = "" - görüntünün yüksekliğini piksel cinsinden belirtir.

Gerçek boyutları belirtin; bu şekilde orijinal görüntü kalitesini korursunuz.

Web geliştirme için üç formattaki görseller geçerlidir: PNG (.png), JPEG (.jpg) ve GIF (.gif). Adobe Photoshop, web siteleri için grafikler oluşturmaya yönelik özel bir araçtır. Bir görüntü formatını diğerine dönüştürmek için kullanılabilir.

HTML resmi | Yatay ve dikey kenar boşlukları

veya arasındaki yatay ve dikey mesafe resim ve metin

Sonuç:

Nitelikler ve değerler

• hspace = "" - tanımlar resim ve metin arasındaki yatay mesafe.
• vspace = "" - tanımlar resim ve metin arasındaki dikey mesafe.

HTML arka plan resmi

veya bir görsel tarafından tanımlanan sayfa arka planı

Aşağıdaki görüntüye sahibiz:

Ayrı bir sayfanın kodunu yazalım:

Arka plan ve arka plan görüntüsü nitelikleri bölümünde tartışılmıştır.

Resim ekleme ve sırası → ../images/primer-img.jpg → bkz.

HTML resmi - bağlantı

Örnek kod:

border = "0" - grafik bağlantısının kenarlığını iptal eder.

veya görüntüleri ortalamanın tüm olası yolları

Örnek kod:

Burada nelere dikkat etmeniz gerekiyor? → Öncelikle boyutların belirtilmesi görüntünün yüklenmesini hızlandırır. İkinci olarak, alternatif metin olmasa bile yapılması oldukça arzu edilen alt = "" nitelikleri belirtilir. İlk durumda merkezleme belirlendi HTML parametre ve ikincisinde - basamaklı stil sayfalarının doğrusal olarak dahil edilmesini kullanmak.

İnternette dolaşırken elbette birçok sitede çeşitli resimler, bannerlar, fotoğraflar, grafik görseller görüyorsunuz. Bugün bir HTML sayfasına nasıl resim ekleyeceğimizi öğreneceğiz.

Resim eklemek iki aşamada gerçekleşir: Öncelikle gerekli boyut ve formatta grafik dosyası hazırlanır ve ardından etiket aracılığıyla web sayfasına eklenir: . HTML belgesinin kendisi yalnızca gerekli görüntüyü göstermeye yöneliktir; hiç değiştirmeden.

Görsellerinizi hazırlarken dikkat etmeniz gereken birkaç nokta var.

1. Web sayfası ağ üzerinden yüklendiğinden önemli bir faktör grafik dosyasının boyutu ("ağırlık"), bir web belgesine gömülü. Ne kadar küçük olursa görüntü o kadar hızlı görüntülenir.

2. Çoğu zaman, bir görüntünün fiziksel boyutlarının (genişlik ve yükseklik) genişlik ve yükseklik ile sınırlandırılması (küçültülmesi) gerekir. Örneğin genişliği 700-800 pikselden fazla olmayacak şekilde ayarlayın. Aksi takdirde görüntünün tamamı tarayıcı penceresine sığmaz ve kaydırma çubukları görünür.

Web siteleri için grafik formatları

Web grafikleri için en yaygın olarak kullanılan iki ana format şunlardır: GIF Ve JPEG. Çok işlevlilik, çok yönlülük, yeterince iyi kaliteye sahip küçük miktarda kaynak dosya gibi nitelikler, bu formatlara iyi hizmet etmiş, aslında onları web görüntüleri için standart olarak tanımlamıştır.

Bir de format var: PNG, resim eklerken tarayıcılar tarafından da desteklenir ve iki şekilde sunulur: PNG-8 Ve PNG-24. Bununla birlikte, PNG formatının popülaritesi, tanınma açısından GIF ve JPEG formatlarından çok daha düşüktür..

Genellikle kök dizindeki resimler (resimler) için ayrı bir klasör oluşturulur ve siteye ait tüm resimler buraya yerleştirilir. Bazen bu tür birkaç klasör bulunur (site yapısı bunu gerektiriyorsa veya gezinmeniz daha kolaysa). Bu klasöre çoğunlukla şu ad verilir: img veya Görüntüler (Görüntüler). Web sayfası kodunda, grafik dosyasının (görüntünün bulunduğu yer) tam yolunu ve ayrıca html belgesine eklemek istediğiniz bu dosyanın (resim) adını yazın.

Bir web sayfasına resim eklemek için kod yazıyoruz

Görüntüleri bir HTML belgesine eklemek için, belirtilen yapıyı kullanın. Listeleme 8.1. Bu kod web sayfasında istenilen yere (resmi görmek istediğiniz yere) eklenir.

Arabalara özel we-sayfamızda iki görsel hazırlayıp ekledim. Liste 8.1'de ilk görüntünün yerleştirme kodunu görebilirsiniz.

Listeleme 8.1.

Sitenin web sayfasına eklenen ilk görsel şöyle görünecek:

Ve şimdi yazılanlar hakkında daha ayrıntılı yorum yapacağım Listeleme 8.1.

Resmin kendisi şu etiket kullanılarak "eklenir": img kaynağı. Tam giriş şöyle görünür: img src = "img/mers1.jpg", Nerede "img/mers1.jpg"– resmimizin klasörde olduğunu gösterir: img ve grafik dosyasının adı (resim): mers1.jpg.

Prensip olarak bu, bir web sayfasına resim eklemek için zaten yeterlidir, geri kalan parametreler isteğe bağlıdır, ancak yine de bunları her zaman kaydetmenizi öneririm, aksi takdirde resim geometrik bozulmalara maruz kalabilir.

Ek seçeneklere bakalım:

kenarlık = "0"– görüntünün etrafında çerçeve olmadığını belirtir; 0'ı başka bir sayıyla değiştirmeyi deneyin; örneğin 1 , - görüntünün etrafındaki çerçevenin kalınlığına karşılık gelir 1 piksel, 2 – görüntünün etrafındaki çerçevenin iki piksellik vb. kalınlığına karşılık gelir.

Önemli! Bir görseli bağlantı haline getirmeyi planlıyorsanız değeri belirttiğinizden emin olun: kenarlık = "0".

genişlik = "400"– görüntü genişliğinin şu şekilde olduğunu belirtir: 400 piksel(görüntülerinizin genişliği için gerçek bir sayı girin).

yükseklik = "209"- görüntü yüksekliğinin şu şekilde olduğunu belirtir: 209 piksel(görüntülerinizin yüksekliği için gerçek bir sayı girin).

Parametre belirtmezseniz: Genişlik Ve yükseklik bu durumda görüntü geometrik bozulmalara maruz kalabilir.

hspace = "20"– görüntünün etrafında 20 piksellik metin girintisini belirtir.

hizala = "sola"– bu size zaten tanıdık gelen bir etiket….. Doğru, sola hizalama anlamına geliyor, aynı zamanda şu anlama da gelebilir: Sağ- doğru hizalama.

alt="Arabanın önden görünümü" !}– fareyi resmin üzerine getirdiğinizde görüntülenen alternatif metin buraya yazılır.

Aynı şekilde ikinci görseli de web sayfasına “ekleyeceğiz”, tek fark sağa hizalanacak.

Bu makaleye ilişkin yorumlar (ders):

Lütfen bana img klasörünü tam olarak nerede oluşturmam gerektiğini söyle?

img klasörü sadece geleneksel bir isimdir, daha sonra anladığınız sürece onu istediğiniz gibi adlandırabilirsiniz. Kolaylık sağlamak için onu herhangi bir yerde oluşturabilirsiniz, kök dizinde oluşturabilir ve tüm görüntüleri oraya koyabilirsiniz.

Mesele şu ki, resim gösterilmiyor, sadece yazıt gösteriliyor. Ne yanlış olabilir? Teşekkür ederim.

Yukarıdaki Liste 8.1'e yakından bakın. Hepsini kendine al. Kök dizinde (sitenizin tüm HTML dosyalarının bulunduğu yer) bir img klasörü oluşturun. Tüm görsellerinizi bu klasöre yerleştirin. Listede mers1.jpg dosyasını dosyanızın adıyla değiştirin. Ayrıca genişlik ve yükseklik değerlerini dosyanızın gerçek boyutlarına göre değiştirin. İyi şanlar.

Çok teşekkür ederim, her şey yolunda gitti.

Merhaba, önceki konuşmacıyla aynı durumu yaşıyorum: Kodu sizinki gibi yazıyorum, yalnızca dosya adını değiştiriyorum: mers.1/jpeg yerine Mercedes/jpeg bağlantısını ekliyorum. Sayfada yalnızca üstte "Arabanın ön görünümü" yazısı var ve görüntü yok. Bana göre tarayıcı fotoğrafın yolunu bulamıyor veya doğru yazılmamış. İŞTE KODUM: B

img/mercedes/jpeg kodunuza dikkatlice bakın. Doğru anladınız, tarayıcı grafik dosyasının yolunu bulamıyor. 2. Dosya adı yanlış, mers1.jpg'nin nasıl olduğuna bakın

Peki, kodu kopyalayıp yapıştırdım, resimsiz bir ovalim var, ovalin içinde üstte bir bağlantı var!

Merhaba sorun aynı, site dokümanları ile aynı yerde img adında bir klasör oluşturdum, 1.jpg isimli görseller bu klasöre kaydediliyor, her şeyi örneğinizdeki gibi yazıyorum.

Resmimin img klasöründe olduğunu fark ettiyseniz

Yeni başlayan web yöneticileri için çok yararlı bir makale. "Alt" özelliğine yönelik tek uyarı. Şekille ilgili olarak yazıda şu yoruma yer verilmektedir: "alt="Arabanın ön görünümü" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

işte kodum PEKİ, GÖREV MERKEZDE OLDUĞUNDA, RESİM NEDEN YAN ÜZERE YERLEŞTİRİLİYOR?

Peki başka birinin sitesinden resim alırsam bu telif hakkı ihlali olmaz mı?

Sunucuya bir HTML belgesi yüklerken çerçevede resimler yerine neden boş alanlar bulunduğunu açıklayın. Gösterimden önce görüntüler olması gerektiği gibiydi.

Dmitry, mucizeler olmaz, bir yerde hata yaptın, resimlere giden tüm yolları kontrol et, yani. resimlerin kodda nasıl yazıldığı.

Bu benim kodum, sayfada resim dışında her şey ortaya çıkıyor, bütün gün mümkün olan her yolu denedim ama hiçbir şey olmadı. lütfen bana ne yapacağımı söyle

AndreyK, lütfen mektubumda benimle iletişime geç, hiçbir şekilde resim ekleyemiyorum, her şeyi doğru giriyorum ama hiçbir şey giremiyorum, sadece çerçeve ve yazı görünüyor

Elvira, mektubunu ve diğer yorum ve mektupları okudum. Ama büyükbabamın köyüne nerede cevap vereyim???

Neden herkesin bu kadar üzgün olduğunu bilmiyorum!? Sadece kodları kopyalayıp yapıştırmanız gerekmiyor, kendiniz yazın, her şey işe yarayacak... işte resmimin metni

İlanınızı kopyaladım, değerlerimi yapıştırdım - resim var, sonra aynı şeyi aşağıya yazıyorum (manuel olarak) resim yok - ne mucize?

AndreyK lütfen bana hatanın nerede olduğunu söyle? Ne kadar denesem de olmuyor ((

Andrey, bana resmi neden göremediğimi söyle. Kodum: Yazı var ama resim yok. Benim adresim: [e-posta korumalı] Teşekkür ederim.

Ben de uzun süre acı çektim ama işe yaradı! Aslında imj klasörünün bir HTML belgesinde açılması gerekir.

Kesinlikle deneyeceğim, teşekkürler

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Ben de uzun süre acı çektim, resimlerin bulunduğu klasörün index.html ile aynı yerde olması gerektiği ortaya çıktı, teşekkürler Elena

Andrey ekliyorum:

Andrey ekliyorum: ve belgede resim yok, sadece yazı var!!! [e-posta korumalı]

kodum... resim de yok. img klasörü index ile aynı klasörde... lütfen yardım edin. [e-posta korumalı] Teşekkür ederim!

İyi bilmiyorum. Tüm yorumları okudum. Her şeyi denedim. Bilgilerimi kopyalayıp yapıştırdım. Hiç birşey çalışmıyor. Resimlerin (img) bulunduğu klasör, index.html ile aynı yerde bulunur. Ama resim yok. Onun yerine kırmızı bir çarpı işareti ve bir yazı var, IE tarayıcısında çalışıyorum. İşte girdiğim şey:

Derste fotoğrafın yerine sayfanın HTML koduna baktım: Sayfadaki kod, listedeki koddan farklıdır. Neden? ve bu arada sayfada “mers1.jpg” kodunun altı çizili. Altı çizili kopyalama başarısız oldu. Bu şekilde eklemeye çalıştım. Hala resim yok. Sorun ne?

Kendimize soruyoruz, kendimiz cevaplıyoruz. Uzun süre acı çektim ve resim eklenmedi. Ortaya çıktı: 1, src etiketi yerine srk 2'ye sahiptim. Resmin yolunu oluştururken kafam karıştı. Klasörü IMG olarak yeniden adlandırdım ve her şey işe yaradı. Bunun için neredeyse iki gün harcadım ama değdi.

Sevgiler ama artık bunu ömrünüzün sonuna kadar hatırlayacaksınız :) Şaka yapıyorum tabi ki, kusura bakmayın. Ama cidden, eğer bir kişi iade adresini bırakmazsa benim ona yardım etmem neredeyse imkansız.

Merhaba, bana bir resmi en üste, ikincisini sola ve üçüncüsünü sağ alta nasıl yerleştireceğimi söyle))))

..........eksik resim hatam nedir?

Koddaki her şey doğru, eğer hiçbir şey berbat değilse her şeyin çalışması gerekir. Ancak dosyanın (resim) adını İngilizce harflerle yazın. Birçok sunucu Latin alfabesini kabul etmemektedir.

Ama tuhaf olan şu... Klasöre farklı isimler verirken, yol doğru yazılmış olmasına rağmen resim görünmek istemedi. IMG'yi aradığım anda hemen ortaya çıktı. Amaç ne?

Marina, hile ya da provokasyon yok :). Liste 8.1'in kodunda. bu görüntünün şu klasörde olduğu belirtiliyor: img. Ana makinenizdeki resimlere ait klasörün adını değiştirirseniz, bunu listede değiştirin, tüm hile budur.

Bir resim eklemeye çalışıyorum!!! Her şeyi not defteri kullanarak yazıyorum, her şeyi doğru yapıyorum, belki not defteri kullanmaya değmez mi?

Ve her şeyi en son Mozilla Fire Fox'ta açıyorum))

Resmimin yolu C:Documents and SettingsdenisDesktopkoffevinogradwwwImg ve resmin adı gif, adı da 1.gif içeriyor...Bunu not defterinde yapıyorum Yaptım ve tam yol çıkmıyor, mozilla explorer fotoğrafını görmüyor ve kırmızı çarpı işaretiyle vurguluyor

Denis, Img klasörünü img olarak yeniden adlandır. hepsi büyük harflerle ve ona giden yolu da yeniden adlandırın. Birçok sunucu büyük harf durumunu doğru şekilde görüntülemez.

Hala aynı sorum var: neden resimler değil de sadece yazıt. Site için ayrı bir klasör oluşturdum: İçinde bir Web sayfası ve bir çizim var. Eklendi: YARDIM POSTA HATASI NEDİR: [e-posta korumalı]

Büyütülmesi veya küçültülmesi için bir resim nasıl yapılır?

Nedense resim bende de merkezlenmiyor. İşin püf noktası nedir?.. Kod şu şekildedir:

Merhaba, site sitesinin sevgili okuyucuları. Bugün daha ilginç bir konuya geçelim, yani ekleme Görüntüler. Tarayıcımızın resim içeren bir sayfayı hızlı bir şekilde yükleyip açabilmesi için OPTIMIZE edilmiş bir resme ihtiyacımız var (resimlerin neden ve nasıl optimize edileceği hakkında). Böyle önceden optimize edilmiş bir görseli indirmek için adresine gidin ve bu görseli sağ tıklayıp “Resmi farklı kaydet” seçeneğini seçerek kaydedin.

Etiket ve görüntülerin bulunduğu klasörün konumu

Görselleri saklamak için HTML klasörümüzde başka bir “Görüntüler” klasörü oluşturacağız ve görseli oraya yerleştireceğiz.

Başlık ile ilk paragraf arasına resimli resmimizi eklemeye çalışalım. Bunun için kod içerisine tagımızı yazacağız. . Bu, İngilizce image - image kelimesinin kısaltmasıdır ve tek bir etikettir.

Etiketin kendisi tarayıcıya gerçekten hiçbir şey söylemez. Bu nedenle etiketin özelliklerini mutlaka belirtmemiz gerekiyor. Niteliklerden en önemlisi niteliktir. kaynak – kaynak. İmajımızın kaynağını belirtmeliyiz. Bizim durumumuzda resim, HTML klasörüne göre resimler klasörünün içinde bulunur. Onlar. resim alarm.jpg dosyamızın resimler klasöründe bulunduğunu belirtmemiz gerekiyor. Ve görünen de bu.

Etiket için belirtilen bu özellik ile tarayıcı bu kodla karşılaştığında resimler klasörüne gidecek ve alarm.jpg resmini alacaktır.

Ama hepsi bu değil. Bu görüntünün genişliğini ve yüksekliğini de belirtmeniz önerilir, çünkü tarayıcının bu görüntü için tam olarak ne kadar alan ayıracağını bilmesi gerekir ve tüm yükleme daha hızlı ve en önemlisi blok ofsetleri olmadan gerçekleşecektir.

Genişlik ve yükseklik özellikleri

Boyutları belirtmezsek tarayıcı da görüntüyü doğru bir şekilde gösterecektir ancak bu biraz zaman alacaktır. daha fazla zaman alacaktır çünkü önce görüntüyü yüklemesi gerekecektir ve ancak o zaman ne kadar alan ayırması gerektiğini belirleyebilecektir. Başlangıçta görüntünün boyutlarını belirtirseniz, bu tarayıcının işini basitleştirecektir. Ayrıca koddaki görsel boyutunu değiştirerek tarayıcı, onu belirtilen boyutlara göre de yeniden boyutlandıracaktır.

Resmin boyutunu bulmak için üzerine sağ tıklayın ve "Özellikler" menü öğesini seçin. Daha sonra “Ayrıntılar” sekmesine gidin.

Gördüğünüz gibi görselin genişliği 307 piksel, yüksekliği ise 450 pikseldir. Boyutları kodla yazalım:

Alternatif başlık için Alt özelliği

Başka bir etiket özelliği Bir resim eklerken belirtilmesi tavsiye edilen alt'tır. Tarayıcılarında resimlerin görüntülenmesini devre dışı bırakan İnternet kullanıcılarına yöneliktir. Onlar. tarayıcıda resimler devre dışı bırakılırsa kullanıcı resmimiz yerine alt özelliği için yazdığımız kelimeyi veya ifadeyi görecektir. Ayrıca arama motorları sitenizin değerini belirlerken görsellerin alt özelliğine odaklanır, dolayısıyla dahil edilmesi zorunludur.

Bir etiket için bu dört özellik Sayfaya resim eklerken belirtmeniz tavsiye edilir. Bu dört özelliğe tekrar dikkat çekeceğim: kaynak, genişlik, yükseklik ve alternatif metin.

Göstergeyi kontrol edelim:

Çizimimiz tam olması gerektiği yerde ortaya çıktı. Ancak fark ettiyseniz görselimiz yalnızca 307 piksel genişliğinde olmasına rağmen tarayıcı tüm satırı ona ayırıyor. Çoğu zaman görev, görüntünün etrafından akmasından sonra metni yapmak için ortaya çıkar, yani. onunla aynı çizgide durdu. Bu olasılık mevcuttur. Tanıdık bir kişinin yardımıyla uygulanır. özelliği hizala– hizalama.

Bir görüntüyü hizalamak için hizalama özelliği

Bu özellik etiketimiz için geçerlidir . Bu görüntü için sağa hizalamayı belirtebiliriz ( Sağ), ardından resim ekranın sağ tarafına gidecek ve metin sol tarafta onun etrafında akacaktır. Veya sola hizalamayı belirtebiliriz ( sol) – daha sonra resim ekranın sol tarafına gidecek ve metin sağ tarafta onun etrafında akacaktır. Etiketimiz için sola hizalamayı ayarlayalım .

Şimdi tarayıcıda ne olduğunu kontrol edelim.

Resme sola hizalama verdiğimiz için metnin sağ tarafta resmin çevresine sarıldığını görebilirsiniz. Şimdi hizalamayı sağ kenar olarak değiştirelim.

Bir HTML sayfasına resim eklemek için etiketini kullanın IMG. Desteklenen resim formatları: PNG, GIF ve JPEG. Zorunlu etiket nitelikleri şunları içerir: kaynak, görüntü dosyasının adresini belirtir.

Bir html web sitesine resim eklemenin basit bir yolu:

Ancak bu formda görüntü, hizalama olmadan, ek bilgi olmadan orijinal boyutlarıyla görüntülenecektir. Bu nedenle resmi daha güzel ve doğru eklemek için ek parametreler kullanmanız gerekir. Onlara daha detaylı bakalım.

IMG Etiketi Nitelikleri

Bir resmi etiket kullanarak görüntülemek için IMG Aşağıdaki parametreler kullanılır:

• en boy- görüntünün genişliğini/yüksekliğini belirtir (yüzde veya piksel cinsinden);
• hizalamak- görüntü hizalaması (sağ, sol, orta);
• sınır- resmin etrafındaki çerçevenin kalınlığını belirler (piksel cinsinden). Öznitelik açıkça ayarlanmamışsa varsayılan değer (border=0) kullanılır;
• hspace/vspace- görüntüden çevredeki içeriğe kadar olan yatay/dikey girintinin boyutunu belirtir.

Şimdi html kodunda nasıl resim yapılacağına bakalım:

Burada boyutlar piksel cinsinden verilmiştir.

HTML kullanan uyarlanabilir resim boyutları

“Akışkan” veya “uyarlanabilir” bir web sitesi tasarımı oluşturuyorsanız görselin html kodunda boyutları yüzde olarak belirtmelisiniz. Aşağıdaki kodla bir HTML sayfası oluşturmayı (HTML dosyasının yanına “img.jpg” isimli görseli yerleştirdikten sonra) ve tarayıcı penceresini yeniden boyutlandırmayı deneyin. Pencerenin boyutuna bağlı olarak görüntü boyutunun değişeceğini göreceksiniz.

Paragraf 1

2. paragraf

Nubex web sitesi oluşturucusunda düzenleyici araçlarını kullanarak resim ekleyebilirsiniz. Bu konuda daha fazla bilgiyi makaleden öğrenebilirsiniz.

Daha sonra, bir HTML belgesine nasıl resim ekleyeceğimize ve görüntüsünü nasıl yapılandıracağımıza bakacağız. Çalışmak için yalnızca yukarıda belirtilen düzenleyiciye ve tarayıcıya ihtiyacınız var.

Hala Notepad++'ınız yoksa veya indirmede sorun yaşıyorsanız ve şu soruyla boğuşuyorsanız - not defterinde html'ye resim nasıl eklenir?

Cevap basit, normal bir not defterinde çalışmak, yalnızca okunabilirlik ve kodun metnin kendisinden ayrılması için kodu farklı renklerde vurgulamaması bakımından farklılık gösterir.

HTML sayfasına resim nasıl eklenir

Düzenleyiciyi yükledikten sonra, herhangi bir dosyaya sağ tıkladığınızda açılan içerik menüsünde ilgili öğe görünecektir.

Şimdi, böyle bir dosyayı düzenlemek için, üzerine sağ tıklayarak içerik menüsünü çağırmanız ve ardından “Notepad++ ile Düzenle” seçeneğini seçmeniz yeterlidir.

Koddaki değişikliklerin sonuçlarını gözlemlemek için bir test sayfası kullanılacaktır.

Html koduna resim eklemek için tek satırlı etiket kullanın img. Ana özelliği fotoğrafın kaynağıdır.

Bu, sabit sürücüdeki herhangi bir dosya veya ağda mevcut bir görüntünün bağlantısı olabilir. Etiketlerle çerçevelenmiş < p> p>.

Fotoğraf eklemek için aşağıdaki satırı girmeniz gerekecektir:

Editörde şu şekilde görünecek:

Ve varlığı sayfada şu şekilde görüntülenecektir:

Kaynak görüntünün kaynağını belirtir. Resim dosyası html belgesiyle aynı dizindeyse bir dosya adı yeterlidir.

Fotoğraf başka bir dizinde bulunuyorsa, html dosyasının bulunduğu klasörden başlayarak fotoğrafın yolunu belirtmeniz gerekecektir.

Tavsiye! Belirli bir fotoğraf dosyasının yolunun Kiril karakterleri içermemesi gerektiğini dikkate almak önemlidir. Ayrıca dosya adı yazarken büyük/küçük harf önemlidir.

Kaynak olarak internetten bir illüstrasyon kullanabilirsiniz. Bunu yapmak için, sabit sürücüdeki konum yerine yalnızca öznitelikte ona bir bağlantı belirtmeniz gerekir.

Dosya yolu biçimlendirme tablosu

Bir resmi yeniden boyutlandırmak için iki özellik eklemeniz gerekir: Genişlik Ve yükseklik. Değer, herhangi bir öznitelikle aynı şekilde biçimlendirilir.

Eşittir işaretinden sonra boyutu piksel cinsinden belirtmeniz gerekir.

İllüstrasyonun açıkça tanımlanmış boyutları varsa sayfada aşağıdaki gibi görüntülenecektir:

Resmi hizalama ve düzenleme

Merkeze html'ye fotoğraf nasıl eklenir? Resmin sayfadaki konumunu atamak için şunu kullanın: hizalamak, etiketle ilgili P.

Bunun için çeşitli değerlere izin verilir: merkez(merkez), sol(sol kenar) ve Sağ(Sağ kenar).

İşte görüntünün sayfada sağ kenarda ortalanmış hali.

Önemli! Fotoğrafın konumunu sayfa yerine metne göre atamak için img etiketinde align özelliğinin kullanılması gerekir.Değerler tag özelliğiyle aynıdır.

Belirtilen değere bağlı olarak görselin metne göre konumu değişecektir.

Metne resim yerleştirmek için etiketi girmeniz yeterlidir img(tüm kenarlıklarla birlikte) bir metin bloğunda .

Kenarlık eklemek için kenarlığın kalınlığını piksel cinsinden belirten sayısal bir değere sahip kenarlık özelliğini kullanın.

Dikey ve yatay kenar boşluklarını ayarlamak için şunu kullanın: vspace Ve hspace. Sayısal değerleri, metinden görüntüye olan mesafeyi doğrudan piksel cinsinden ifade eder.

Örnekte, özellik vspace değer 50 piksele ayarlanmıştır.

Yatay dolgu boyutu, görüntünün etrafına sarılırken metnin yerleştirileceği mesafeyi gösterecektir.

İki kullanışlı özellik daha - alternatif Ve başlık. İlki görüntü için alternatif metni ayarlar.

Bununla birlikte, eğer görüntü herhangi bir nedenle yüklenmezse, bunun yerine nitelik değerinde belirtilen metin görüntülenecektir.

Özniteliğin yeteneklerini denemek için dosyayı kodda belirtilen dizinden taşıyabilirsiniz.

Özellik değeri olarak belirtilen metin başlık, fareyi doğrudan görselin üzerine getirdiğinizde bir araç ipucu görüntüleyecektir. Kodda tasarımı diğer özelliklerden farklı değildir.

Sayfayı yeniledikten sonra sonuç şu şekilde olacaktır:

Etiket Özellik Tablosu img

Yukarıdaki bilgileri anladıktan sonra görsellerle çalışmak artık sorun olmayacaktır.

Sayfaya resim eklemek, biçimlendirmek ve yerleştirmek basit ve keyifli olacaktır.

HTML'nin Temelleri. Bir web sayfasına resim nasıl eklenir

HTML'ye resim nasıl eklenir - düzenleme, hizalama, nitelikler