Bu adam hakkında bilinen tek şey
cezaevinde olmadığını ancak neden cezaevinde olmadığı bilinmiyor.
Mark Twain.

Bu bununla ilgili bir derstir HTML'ye resim nasıl eklenir, nasıl tasarlanacağı, metnin bir resmin etrafına nasıl sarılacağı vb. Sonuçta, resimlerin bir siteyi daha çekici ve diğer kaynaklardan farklı kıldığı bilinmektedir, bu nedenle bir etiket ve onun niteliklerini kullanma yeteneği modern internette çok faydalıdır. Ancak buradaki en önemli şey orantı duygusudur!

Fazla grafik, html sayfasını ağırlaştıracak ve buna bağlı olarak yükleme süresini artıracaktır. Ayrıca çok sayıda görselin varlığı, ziyaretçileri sitenin ana içeriğinden uzaklaştıracaktır (tabii ki sitenin ana içeriği grafikler değilse). Bu nedenle, ölçülü tutun ve yalnızca ihtiyaç duyulan yerde kullanın. Ve mutlu olacaksın!

İlgili derste, resimleri bir HTML belgesinin arka planı olarak nasıl kullanabileceğinizden zaten bahsetmiştim. Şimdi bir html sayfasının “üst katmanında” grafiklerin nasıl kullanıldığına değinelim.

§ 1. Resim nasıl eklenir

HTML'ye resim eklemek için etiketini kullanın IMGİle zorunlu bağlanmak SRC. Bu özellik tarayıcıya görüntü dosyasının yolunu bildirir. Onlar. resim eklemek için logo.jpg adıyla sayfada belirli bir yere (hem sayfanın hem de resmin bulunması şartıyla) tek bir klasörde(dizin)) bu yere aşağıdaki html kodunu eklemeniz gerekir:

src = "logo.jpg">

Resim ve sayfa şurada bulunuyorsa farklı dizinler (klasörler), ardından görüntünün yolunu belirtmeniz gerekir nispeten sayfalar. Örneğin, bir html sayfası dizin (klasör) sitesinde bulunuyorsa, aynı dizinde (klasör), logo.jpg görselimizin bulunduğu bir alt dizin (klasör) görselleri vardır, o zaman onu eklemek için yapmanız gerekir. şöyle yaz:

resimler/logo.jpg">

Veya endişelenmenize ve belirtmenize gerek yok resmin tam adresi. Örneğin şöyle:

http://www..png">

İkinci durumda, tarayıcı kodu şu şekilde görüntüleyecektir:

Not. Resim bulunuyorsa bilgisayarınızda, ancak eklemek istiyorsunuz İnternet sayfasına, o zaman bundan hiçbir şey çıkmayacak. Bunu yapmak için önce görüntüyü bir yere taşımalısınız. internette(Örneğin, ). Ve sayfa kodunda tam adresi belirtin bu noktaya kadar bir resimle.

Gerekli özelliğe ek olarak SRC etikette IMG Birkaç isteğe bağlı özellik daha var. Gelin onlara daha yakından bakalım.

§ 2. Resmin boyutunu belirtme

Ayarlamanıza izin veren özelliklerle başlayalım. resim boyutları(daha doğrusu sayfalarda bu boyutlar için yer ayırın). İşte buradalar:

• Genişlik- piksel veya yüzde cinsinden görüntü genişliği;


• yükseklik- görüntünün piksel veya yüzde cinsinden yüksekliği.

Bu niteliklerin kullanılması durumunda, önce grafikler için yer ayıracak, belge düzenini hazırlayacak, metni gösterecek ve ancak ondan sonra görüntüyü yükleyecektir. Aynı zamanda, görüntünün gerçek genişliği ve yüksekliği daha büyük (sıkıştır) veya daha küçük (uzat) olsa bile, görüntüyü seçilen boyuttaki bir dikdörtgenin içine yerleştirecektir. Bu niteliklerin kullanılmaması durumunda, tarayıcı görüntüyü hemen yükleyecek ve metnin ve onu takip eden diğer öğelerin görüntülenmesi gecikecektir.

Görüntülerin genişliği ve yüksekliği hem piksel cinsinden (görüntünün boyutu ekran çözünürlüğüne bakılmaksızın sabit olacaktır) hem de yüzde olarak (görüntünün boyutu kullanıcının ekranının çözünürlüğüne bağlı olacaktır) belirtilebilir. Örneğin:

genişlik = "50" yükseklik = "20">

genişlik = "10%" yükseklik = "5%">

§ 3. Alternatif metin

Kullanıcı, tarayıcı ayarlarında görüntülerin görüntülenmesini devre dışı bıraktıysa, resim yerine, orada ne tür grafiklerin olması gerektiğini açıklayan alternatif metin görüntülenebilir. Bu özellik kullanılarak elde edilir ALT:

Bu durumda tarayıcı görsel için sayfada yer ayıracaktır ancak görselin kendisi yerine nitelik değerine yazdığınız metni gösterecektir. ALT:

Tekrar ediyorum, kullanıcı grafiklerin görüntülenmesini devre dışı bırakırsa bu gerçekleşir. Aksi takdirde resim alternatif metni gizleyecektir.

§ 4. Resmin hizalanması

Zaten bildiğiniz bir özelliği kullanma hizalamak resimlerin html sayfasının diğer öğelerine göre hizalamasını kontrol edebilirsiniz. Özellikte hizalamak Birkaç anlamı var ama şu anda en çok ikisiyle ilgileniyoruz:

• sol- resim sayfanın sol kenarında bulunur ve metin sağdaki resmin etrafında akar;


• Sağ- resim sayfanın sağ kenarında bulunur ve metin ve diğer öğeler soldaki resmin etrafında akar.

Örneğin HTML kodu

tarayıcı bu şekilde görünecek

Ve bu HTML kodu:

şöyle görünecek:

Metnin bir görselin etrafına sarılmasını durdurmak için etiketini kullanabilirsiniz. BR(önceki bölümden bize tanıdık geliyor). Etikette BR bir nitelik var temizlemeküç değer alabilen:

• sol- sola hizalanmış görsellerin etrafına metin sarmayı durdurun;


• Sağ- sağa hizalanmış görsellerin etrafına metin sarmayı durdurun;


• Tümü- hem sola hem de sağa hizalanmış görsellerin etrafına metin sarmayı durdurun.

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 edilmesinin kullanılması.

Web siteleriyle çalışırken görsel kısım en önemli unsurlardan biridir. Elbette işlevsellik açısından yetersizdir, ancak bunu önceden göz ardı etmemek gerekir. Bugün web sitenize bir HTML görselinin nasıl kurulacağından bahsedeceğiz. Bunun için tek bir olasılık mı var yoksa birkaçı mı? Diğer kullanıcıların görebilmesi için web siteme nasıl bir HTML resmi ekleyebilirim? Bu amaç için hangisi daha iyidir – sunucu mu yoksa bilgisayar mı? HTML nedir? Bu kısaltma şu şekilde çözülebilir: hiper metin belgesi biçimlendirme dili.

Bu dil kullanılarak gelecekteki sitenin temeli oluşturulur. Sitenin tüm ana unsurlarının yerleşimi de burada gerçekleştirilir. Daha sonra veri aktarımından ve basamaklı stil sayfalarından sorumlu olan php dosyaları burada yapılandırılır. Herhangi bir web sayfasının temeli HTML'dir. Bu dili kullanarak görüntü ayarlamaları da yapabilirsiniz. Bu işlemi başka şekillerde de gerçekleştirebilirsiniz, ancak bazı basit nesnelerin ilk yüklenmesini sağlamanız gerekiyorsa, onu kullanmak daha iyidir. HTML resmi eklemeyle ilgili sorunu keşfetmeye başlayalım.

img etiketi nasıl kullanılır?

Grafik kullanma konusuna geçelim. Bir HTML belgesine nasıl resim ekleyebilirsiniz? Öncelikle bu işlem, bir dosyayı ayrı bir sayfa nesnesi olarak eklemek anlamına gelir. Bu ekleme için img etiketi kullanılır. Bu etiket, değiştirilebilir içerik içeren satır içi öğeleri ifade eder. Köprü metni biçimlendirme dilinin yalnızca dört bölümünü içerir. Bunlardan biri src, yükseklik, genişliktir. Onlar hakkında daha fazla konuşacağız. Diğer parçalar ise object, embed ve iframe'dir. Etiket sanki bir satır içi öğeye sahipmiş gibi çalışır. Aradaki fark, yabancı harici içeriğin kullanılması ve görüntülenmesidir. Bu durumda yüklenecek üçüncü taraf bir dosyanın olması gerekir. HTML'de bir arka plan resmini geri yüklemeyle ilgili sorularınız varsa, bunları hemen silmek en iyisidir. Yalnızca görüntünün bulunduğu bilgisayar çalışırken görüntülenecektir.

src niteliğini kullanma

Bir HTML belgesine grafik resim ekleme sorunu üzerinde çalışıyoruz. Yüklenecek resmin yolunu belirtmek için src'yi kullanın. Genel şema şu şekildedir: Bu özelliği, eşittir işaretini kullanmanız ve adresi girmeniz gerekir. Tarayıcı HTML’yi ayrıştırırken etikete ulaştığında inline elementin görüntüleneceği bir alan oluşturacaktır. Harici dosya gelecekte buna yüklenecektir. Programın gideceği yer burası olduğundan bu yol hata içermemelidir. Bu program dosyayı bulamazsa, estetik açıdan pek hoş görünmeyen bir hata simgesi görüntülenecektir.
Bir HTML belgesindeki tabloya resim eklemek için gerekli tüm kodu istediğiniz hücreye yazmanız gerekir.

Görüntü Ayarları

Artık HTML'ye nasıl resim ekleyeceğinizi biliyorsunuz. Nasıl yapılandırılabileceğini bulalım. Dosya kullanıcının bilgisayarına indirilmeye başladığında görselin boyutu otomatik olarak belirlenecektir. Dosyanın başlangıç ​​parametreleri istenilen değerlere uymuyorsa, piksel cinsinden belirtilen genişlik ve yükseklik parametreleri bu durumda yardımcı olabilir. Bu durumda kod şu şekilde yazılacaktır: src ve ardından dosya adresi. Benzer bir talimat aynı zamanda genişliği belirtir ve olması gereken genişliği ayarlar. Son parametre yükseklik ve yüksekliktir. Çoğu zaman, web yöneticileri şu hatayı yaparlar: sunucuya, boyutu birkaç MB'a ulaşan büyük bir dosya yüklerler. Daha sonra yol yazılır ve görüntü istenilen boyuta ayarlanır. Böylece kullanıcı küçük bir görselin ne kadar yavaş yüklendiğini görebilir. Dışarıdan pek çekici görünmüyor.

İş için öneriler

Çalışmanızda olumsuzluklardan kaçınmak için görselin boyutunu önceden küçültmeye çalışın. Elbette, çekici bir görünüm için hangi parametreleri kullanmanız gerektiğinden kesinlikle emin değilseniz, o zaman bir kopya oluşturabilir ve onunla denemeler yapabilirsiniz. Ayrıca görüntü ağırlığını optimize ederken daha dikkatli olmanız gerekir. Dosyaları diğer uzantılara dönüştürerek, özel programlar ve çevrimiçi hizmetler kullanarak grafik dosyalarının ağırlığını kalite kaybı olmadan azaltmak gerekir. Bu sadece site kullanıcıları tarafından değil aynı zamanda web yöneticisi tarafından da takdir edilecektir. Bu tür dosyalar hostinginizde daha az yer kaplayacak ve daha hızlı yüklenecektir.

Kayıt yeteneklerine örnek

Görüntünün yolunu nasıl belirleyebileceğinizi düşünelim.

1.Yalnızca dosya adını ayarlayın;
2. Yerel bilgisayarda (sunucuda) bulunan görüntünün adresini belirtin;
3. Başka bir ana bilgisayarda bulunan dosyanın konumunun ayrıntılı yolu.

İlk noktadan itibaren örneği kullanırsanız görselin aynı dizinde olması gerekir. İkinci durumda konum, geçerli sayfaya göre bir alt klasördür. Üçüncü örnek, aranan görselin bulunabileceği mutlak yolu belirtir. İkinci durumda, şu noktaya dikkat etmekte fayda var: resim herhangi bir sunucuda olabilir, eğer htaccess dosyasında bu tür bir kullanım yasak değilse, ancak oradan silinirse sitenizde resim kaybolacaktır. HTML dilinin özelliği yalnızca bir biçimlendirme belgesinin gerekli olmasıdır. Diğer tüm bileşenler üçüncü taraf sunuculardan indirilebilir. Bu yöntemler genellikle indirme hızını artırmak için kullanılır. Burada bu aracı nasıl kullanacağınızı bilmeniz gerekir.

Alt ve başlığın amacı

Herhangi bir nedenle grafik dosyası HTML belgesiyle birlikte yüklenmezse ne yapmalıyım? Yanlış yazılmışsa alt özelliğini kullanmanız gerekir. Bu özellik, resmin alternatif bir temsili görevini yerine getirir. Diyelim ki grafikler yüklenmiyor ancak tarayıcı yine de görüntü için bir alan oluşturacak. Bu aynı zamanda kullanıcının yüklemeyi beklediği durumlarda da gereklidir ve ona programın grafikleri kabul etmeye hazırlandığını göstermek gerekir. Eşlik eden metni göstermek için başlık özelliğini kullanmanız gerekir. Bu aslında sadece bir araç ipucudur ve neredeyse tüm görünür HTML öğelerinde kullanılabilir. Bu iyi bir şey çünkü bazı spesifik hususların açıklığa kavuşturulmasına yardımcı oluyor. Bu alt başlıkta verilen iki özelliğin kullanımı şu şekildedir: daha önce tartışılan örneğe önce yükseklikten sonra alt eklenir ve ardından başlık eklenir.Bu özellikler yalnızca ziyaretçinin rahatlığını sağlamaya hizmet etmez. Ayrıca web sitesinin tanıtımı üzerinde olumlu bir etkisi olabilir. Bu nedenle içlerinde sürekli olarak anahtar kelimeler kullanmalısınız. Bu, kaynağın arama motoru görsel hizmetlerindeki ve web sitesi derecelendirmelerindeki sıralamasını iyileştirecektir. Ancak her şeyde rasyonelliğe ve dikkatliliğe bağlı kalmanız gerekir.

Resimleri hizalama

Hizalama özelliği, daha önce bahsedilen dört işaretleme dili öğesinin tümü için tanıtıldı. Bu özelliği kullanarak resmin konumunu kolayca değiştirebilirsiniz. Varsayılan olarak alta hizalanmıştır. Bunun sorumlusu alt kısımdır. Üst hizalama nasıl yapılır? Bunu yapmak için üst kullanmanız gerekir. Uygulamada şu şekilde görünecektir: Kullanıcının resim adresini belirttiği src özelliğinden sonra, align özelliği ve değeri eklenir. Resmin bulunduğu satırda üst kenara hizalanacaktır. HTML'de bir görüntü nasıl ortalanır? Görüntüyü hizalamak için başka bir seçenek daha var: orta. Bu işlevin kullanılması hiçbir şeyi temelden değiştirmeyecektir.

Bu kodu kullanırken görüntü ortaya hizalanacaktır. Metnin resmin etrafında akmasını sağlayabilirsiniz. Bunun için sol ve sağ özellikler kullanılır. Bu gibi durumlarda görüntü kayan hale gelir. Sola kaydırma diğer yazımlarla aynı görünür. Doğru niteliğin kullanılması benzer bir sonuç üretir ancak tek bir farkla: görüntü sağa yerleştirilecektir. Bu yapıların kullanımının kendine has özellikleri vardır. Örneğin önemli sorunlardan biri metnin görsele çok yakın olmasıdır. Sonuç olarak, gözler için çok rahatsız edici olan sözde yapışma etkisi yaratılır. Bu, HTML kodu veya Basamaklı Stil Sayfası kullanılarak düzeltilebilir. Bu tür değişiklikler için hspace ve vspace niteliklerini kullanmanız gerekir. Birincisi sağ ve sol kenar boşluklarını ayarlar, ikincisi ise alt ve üst kenar boşluklarını ayarlar.

Arka plan nasıl ayarlanır

Bir HTML web sitesi sayfasına resim eklerken arka plan özelliği çok kullanışlıdır. Bu özellik gövde öğesinin bir parçasıdır. Amaç, ayrı bir hücreyi, tabloyu veya sayfayı doldurması gereken grafik dosyasının yolunu ayarlamaktır. Bu nesnenin pratikte kullanımı şuna benzer: Kullanılan görüntünün adresi bodybackground parametresinin değeri olarak yazılır. Bu şekilde ayarlanan arka plan görüntüsü, sol üst köşeden başlayarak apsis ve ordinat eksenleri boyunca tekrarlanacaktır.

Bu makalenin sizin için yararlı olacağını umuyoruz. İyi okumalar!

Görseller, belirli bir sitenin veya makalenin bizim için ne kadar ilgi çekici olabileceğini anında anlamamızı sağlar, bir ruh hali yaratır ve bir konuyu yeni bir şekilde ortaya çıkarabilir. Bazen bir fotoğraf bin kelimeye bedeldir.

Ancak Instagram'ınız veya çevrimiçi mağazanız yoksa bunlara katılmamalısınız. Resimlerin şu şekilde olması tavsiye edilir:

• bilgilendiriciydi
• sitenizin renk şemasıyla eşleşin
• uygundu

Uygun bir fotoğrafınız yoksa sözde kullanabilirsiniz. fotoğraf stoğu (fotoğraf bankası) - birçok fotoğrafın, illüstrasyonun ve vektör grafiğinin depolandığı bir yer. Bu tür pek çok kaynak var, hatta en büyüklerinden biri olan Shutterstock'u duymuş olabilirsiniz, ancak oradaki indirmeler ücretlidir.

Fazla ödeme yapmaktan hoşlanmayanlar için hazırladığımız yazının sonunda bonus- Çok sayıda yüksek kaliteli güzel materyali tamamen ücretsiz olarak indirebileceğiniz birkaç fotoğraf bankasının listesi :)

Resim formatları

World Wide Web'de kullanılan başlıca 3 tür görsel vardır:

gif(Grafik Değişim Formatı - görüntü alışverişi formatı)

Bu internette kullanılmaya başlanan ilk formattır. Bu formatın avantajları kullanılabilirliktir. animasyonlar ve küçük boyutlu olduğundan sayfa hızlı yüklenir. Ayrıca şeffaflığı da destekler. Dezavantajı - yalnızca kullanılmış 256 renk(aslında boyutun küçük olmasının nedeni budur), yani. tam renkli görüntüler için kullanılamaz.

jpeg, diğer adıyla jpg(Birleşmiş Fotoğraf Uzmanları Grubu - Birleşmiş Fotoğraf Uzmanları Grubu - bu, geliştirme organizasyonunun adıdır)

tam renkli, yüksek kaliteli görüntüler oluşturmaya uygundur, fotoğraflar. Bu tür görüntülerin boyutu büyüktür, dolayısıyla genellikle sunucuya büyük bir yük getirirler. Bir jpeg'i sıkıştırmanız gerekiyorsa (daha küçük bir görüntü ağırlığı için), son görüntünün boyutunu almanızı öneririz. sekizin katı Böylece kalite kaybı minimum düzeyde olacaktır.

png(Taşınabilir Ağ Grafikleri - taşınabilir Ağ Grafikleri. Ping ile aynı şekilde telaffuz edilir; )

bu format başlangıçta web için geliştirildi, yani. Görüntü genellikle hafiftir ve yüklenirken sayfayı yavaşlatmaz. Bu format, eski gif'in yerini almak için oluşturuldu, ancak ondan farklı olarak animasyonu desteklemiyor. Png-8 gif gibi yalnızca 256 renk kullanır. Biçim png-24 Zaten oldukça ağır olmasına rağmen 16 milyon rengi destekliyor. Png-32 png-24 ile aynı sayıda renk içerir ve ayrıca bir görüntü elde etmenizi sağlar şeffaf arkaplanlı ve şeffaflık derecesini ayarlayabilirsiniz. Png'nin boyutu küçültüldüğünde renk kalitesinde herhangi bir kayıp olmaz.

Özetleyelim

gif- animasyon için

jpeg- fotoğraflar için

png- şeffaf arka plana sahip simgeler, düğmeler, arka planlar, logolar, ekran görüntüleri, çizimler, metinler, fotoğraflar için

Bir html dosyasına resim ekleme

Sayfaya resim eklemek için şunu kullanın: etiket (İngilizce resimden - resim, resim). Bu tek bir etikettir ve kapanış etiketine ihtiyaç duymaz. Bu etiketin içinde nitelikler bulunur.

Bağlanmak kaynak(İngilizce kaynaktan - kaynak) dosyanın yolunu (görüntünün bulunduğu yer) belirtir. Resim bilgisayarınızda (site halen geliştirilme aşamasındadır) veya sunucunuzdaysa ilgili bağlantıyı kullanın. Görüntü ağdan geliyorsa mutlak bir bağlantıya ihtiyaç vardır. Bunun nasıl yapılacağını "Bağlantılar" makalesinde okuyun.

Dolayısıyla, bir görseli web sayfanıza bağlamak için şöyle bir kod yazmanız gerekir:

alternatif özellik(İngilizce alternatiften - alternatif), görselin yüklenmemesi durumunda kullanıcının göreceği metni belirtir. Yol yanlış belirtilmiş, resim silinmiş, kötü İnternet - birçok neden olabilir ve kişinin bu nefret edilen simgenin arkasında ne olduğunu anlaması arzu edilir.

Arama motorları bu özelliğin doldurulmasına çok dikkat eder. Ve html doğrulayıcı (kodun doğruluğunu kontrol etmek için bir kaynak), alt özelliğinin yokluğunu bir hata olarak algılayacaktır. Eğer tüm özellikler Doldurulacak ve mümkünse anahtar kelimeler de içerecektir - sitenizin görünürlüğü önemli ölçüde artacaktır; aramalarda daha sık gösterilecektir. Bu SEO alanındandır ve bu aşamada böyle bir özelliğin olduğunu bilmemiz yeterlidir ve “canlı” bir sitenin bunu doldurması gerekir. Site diskimizdeyken boş bırakmak oldukça mümkündür.

Aşağıdaki örnekte, alt özelliğinin nasıl çalıştığını görebilmeniz için görsel için kasıtlı olarak var olmayan bir yol belirledik.

Resimlerin yüksekliği ve genişliği

Orijinal görüntü örn. ise görüntünün yüksekliğini ve genişliğini de ayarlayabilirsiniz. ihtiyacın olandan daha fazlası.

HTML5'te bunun CSS veya kullanılarak yapılması önerilir. stil özelliği , bunun gibi:

Bu örnekte, orijinal görüntünün değil, tarayıcı penceresi boyutunun genişliğinin %30'unu aldık. Genişlik = %100 olduğunda resim tarayıcının tam genişliğinde açılır. Bu özelliği hatırla yüzdeölçü birimleri olarak.

Bu arada sadece genişliği yazsaydık sonuç aynı olurdu, şunu deneyin:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "ağaçtaki panda" stil = "genişlik:%30;" >

Ayrıca genişliği ve yüksekliği de ayarlayabilirsiniz. piksel. Orijinal boyutları 1196 x 796 piksel olan pandamız söz konusu olduğunda, hayvanın sıkıştırıldığında acı çekmemesi için oranları korumamız gerekiyor ve burada hesap makinesi olmadan yapamazsınız. Diyelim ki resmin boyutunu 3 kat küçültmek istiyoruz, ardından boyutları 399 x 265 piksel olarak ayarlamamız gerekiyor.

Lütfen görüntüyü orantılı olarak büyütürsek, örneğin yalnızca bir parametre belirtmenin yeterli olacağını unutmayın. Genişlik. Akıllı tarayıcı görüntünün tam boyutunu kendisi hesaplayacaktır.

Bu kodu çalıştırmayı deneyin ve sonuca bakın:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "ağaçtaki panda" stil = "genişlik:399 piksel;" >

Her zaman görüntü boyutlarını ayarlayın. Genellikle görsellerin yüklenmesi, html kodunun geri kalanından daha uzun sürer. Tarayıcı görseller için ne kadar alan ayıracağını biliyorsa görsellerin yüklenmesini beklemeden siteyi yüklemeye devam edebilir.

Küçük bir naftalin

HTML-4'te veya daha eski bir sürümde oluşturulmuş bir sitenin koduyla uğraşırsanız, resim boyutlarının özel olarak ayarlandığını fark edeceksiniz. genişlik nitelikleri Ve yükseklik. Bu, kullanımdan kaldırılmış bir yöntemdir, ancak HTML5'te hala geçerlidir. Ancak stil kullanmanızı öneririz çünkü Genişlik ve yükseklik nitelikleri, tarayıcınızda veya CSS dosyanızda bulunacak dahili veya harici stillerden etkilenebilir. CSS'ye baktığımızda bunun hakkında daha fazla ayrıntıya gireceğiz, ancak şimdilik sadece stillerin yükseklik ve genişlik niteliklerini nasıl etkilediğini gösteren bir örneğe bakalım.

Bu pencerede 3 sekme vardır: İlkinde html kodunu, 2. CSS kodunu ve sonuncusunda ise her zaman olduğu gibi sonucu görürsünüz. Bu, ilk sekmenin bir index.html dosyası, ikincisi bir style.css dosyası ve üçüncüsü bir tarayıcıymış gibi çalışır. Artık CSS'miz img etiketine sahip tüm öğelerin %100 genişliğe sahip olduğunu söylüyor. Genişlik ve yükseklik niteliklerinin varsayılan boyutları piksel cinsindendir, dolayısıyla buraya herhangi bir birim eklemenize gerek yoktur.

Sonuçlardaki fark ortada :)

Ayrıca HTML'nin eski sürümlerinde aşağıdaki özellikler kullanılıyordu:

hizalamak görüntüyü yatay veya dikey olarak hizalamak için kullanıldı.

hspace- görüntünün solunda ve sağında çevredeki içeriğe göre girinti (örneğin, metin veya bitişik bir görüntü)

vspace- görüntünün üstünde ve altında, etrafındaki içeriğe doğru girintiler.

sınır- görüntünün etrafındaki çerçevenin kalınlığını ayarlayın (varsayılan olarak sıfırdır)

Günümüzde, tüm bu manipülasyonlar (ve çok daha fazlası) CSS kullanılarak yapılıyor, bu yüzden sizi burada rahatsız etmemeye karar verdik. Bu özelliklerle nasıl çalışılacağıyla hala ilgileniyorsanız, yorumlara yazın, bu öğeyi ekleyeceğiz :)

Koda resim yerleştirme

Etiketimizi yerleştirdiğimiz yerden tarayıcıda nasıl görüntüleneceğine bağlıdır.

Örnek No. 1 - paragraftan önce:

Gibi unsurlar

VE

başvurmak blok elemanları . Her zaman yeni bir satırda başlarlar ve tarayıcı penceresinin mevcut genişliğinin tamamını kaplarlar. Eğer ilk sırada yer alırsan , ve ondan sonra bir blok öğesi, örneğin bir paragraf, bir sonraki satıra taşınacaktır.

Örnek No. 2 - paragrafın başında

Bu bir satır içi öğedir, bir blok öğesinin içine sığar ve yeni bir satır başlatmaz. Yukarıdaki örnekte kod, metin resmin çevresine sarılır. içeride kayıtlı

Resimler için başlıklar

Sayfadaki bir fotoğrafı işaretlemek veya imzalamak için şunu kullanın: etiket

(İngilizce şekil - çizimden). Bu etiket, içerisinde illüstrasyon, fotoğraf, diyagram vb. içeriklerin yer alacağını belirtir.

Etiket