Merhaba sevgili blog okuyucuları! Bu yazıda, hakkında her şeyi öğreneceksiniz html sayfasına resim nasıl eklenir... Sayfanıza koymak istediğiniz birkaç görseliniz mi var yoksa web sitenize bir logo mu koymak istiyorsunuz? Bütün bunlar kolay. Bu makaleyi okuduktan sonra, html sayfalarınıza herhangi bir zorluk çekmeden resim ekleyebileceksiniz. Bunu yapmak için, hakkında ayrıntılı olarak konuşacağız. etiket gif, jpeg ve png gibi grafik dosya biçimlerine hızlıca göz atın ve sitenize video ve ses eklemeyi kolaylaştıran yeni HTML5 özelliklerini görün.

Grafik verileri ve html metni tek bir dosyada birleştirilemediğinden, bunları sitede görüntülemek için html sayfalarının diğer öğelerinden farklı bir yaklaşım kullanılır. Her şeyden önce, grafik görüntüler ve diğer multimedya verileri ayrı dosyalarda saklanır. Bunları bir web sayfasına gömmek için, bu ayrı dosyalara bağlantılar içeren özel etiketler kullanılır. Özellikle, böyle bir etiket etiket ... Bir adrese sahip böyle bir etiketle karşılaştığında, tarayıcı önce Web sunucusundan bir görüntü, ses veya video içeren ilgili dosyayı ister ve ancak bundan sonra Web sayfasında görüntüler.

Tüm grafik görüntülere ve genel olarak web sayfasından ayrı dosyalarda saklanan herhangi bir veriye denir. uygulandı sayfa öğeleri.

Resim eklemeden ve etiketi detaylı olarak düşünmeden önce , grafik formatları hakkında biraz bilgi edinmeye değer.

Grafik görüntü biçimleri.

Pek çok farklı grafik biçimi vardır, ancak tarayıcılar yalnızca birkaçını destekler. Bunlardan üçüne bir göz atalım.

1. JPEG formatı(Birleşmiş Fotoğraf Uzmanları Grubu). Görüntüleri depolamak için kullanılan oldukça popüler bir format. 24 bit rengi destekler ve fotoğraflardaki tüm yarı tonları değiştirmeden tutar. Ancak jpeg saydamlığı desteklemez ve görüntülerdeki küçük ayrıntıları ve metni bozar. JPEG, esas olarak fotoğrafları depolamak için kullanılır. Bu formattaki dosyalar jpg, jpe, jpeg uzantılarına sahiptir.

2. GIF formatı(Grafik Değişim Formatı). Bu formatın ana avantajı, birkaç görüntüyü aynı anda tek bir dosyada saklama yeteneğidir. Bu, tüm animasyonlu videolar oluşturmanıza olanak tanır. İkincisi, şeffaflığı destekler. Ana dezavantajı, fotoğrafları depolamak için iyi olmayan yalnızca 256 renk desteğidir. GIF esas olarak logoları, afişleri, saydam alanları olan ve metin içeren görüntüleri depolamak için kullanılır. Bu formattaki dosyalar gif uzantısına sahiptir.

3. PNG formatı(taşınabilir Ağ Grafikleri). Bu biçim, eski GIF'in ve bir dereceye kadar JPEG'in yerini alacak şekilde geliştirilmiştir. Şeffaflığı destekler, ancak animasyona izin vermez. Bu biçim png uzantısına sahiptir.

Siteler oluştururken genellikle JPEG veya GIF formatındaki görüntüleri kullanırlar, ancak bazen PNG kullanılır. Ana şey, hangi durumlarda hangi formatı kullanmanın daha iyi olduğunu bulmaktır. Kısacası:

JPEG, metin içermeyen fotoğrafları veya gri tonlamalı görüntüleri depolamak için en iyi şekilde kullanılır;

• GIF, öncelikle animasyon için kullanılır;
• PNG, diğer her şeyin (simgeler, düğmeler vb.) biçimidir.

html sayfalarına resim ekleme

Peki bir web sayfasına bir görseli nasıl yerleştirirsiniz? Bir resim ekle, tek bir etiket ... Tarayıcı, resmi web sayfasının etiketle karşılaştığı yere yerleştirir. .

Resim kodunu html'ye göm sayfa şöyle görünür:

Bu html kodu, web sayfasıyla aynı klasörde bulunan image.jpg dosyasında saklanan web sayfasına bir resim yerleştirecektir. Fark etmiş olabileceğiniz gibi, resmin adresi şurada belirtilmiştir: kaynak niteliği... Sana zaten söylediğim şey. Bu nedenle, src niteliği, dosyanın resimle birlikte adresini belirtmeye yarayan gerekli bir niteliktir. src özelliği olmadan img etiketi anlamsızdır.

Resimli bir dosyanın adresini belirtmek için birkaç örnek daha vereceğim:

- bu html kodu, web sitesinin kökünde bulunan resimler klasöründe saklanan sayfaya image.jpg adlı bir resim ekleyecektir.

src niteliği, göreli görüntü bağlantılarından daha fazlasını belirtmenize olanak tanır. Görüntüler html sayfalarıyla birlikte web'de depolandığından, her görüntü dosyasının kendi url'si vardır. Bu nedenle, görüntünün url'si src özniteliğine eklenebilir. Örneğin:

Bu kod, mysite.ru web sitesinden sayfaya bir resim ekleyecektir. Bir URL adpec'i, genellikle başka bir sitedeki bir resme işaret ettiğinizde kullanılır. Sitenizde depolanan resimler için göreli bağlantıları kullanmak en iyisidir.

Etiket satır içi bir öğedir, bu nedenle onu bir blok öğesinin içine, örneğin bir etiketin içine yerleştirmek daha iyidir

- paragraf:

Pratik yapalım ve html ile ilgili önceki makalelerden bir görseli sayfamıza ekleyelim. Sayfamın html dosyasının yanında bir "images" klasörü oluşturacağım ve oraya "bmw.jpg" resimli bir dosya koyacağım, şuna benziyor:

Ardından, eklenen görüntünün bulunduğu sayfanın html kodu şöyle olacaktır:

Arabalar hakkında site.

Araba web sitemize hoş geldiniz. Burada arabalar, teknik özellikleri ve özellikleri hakkında birçok ilginç ve faydalı makale bulacaksınız.

bilimsel dil otomobil bu:

En az 4 tekerlekli mekanik motorlu izsiz yol aracı.

---

Araba sınıflandırması

Arabalar aşağıdaki tiplerdendir:

• Yolcu;


• Kargo;


• SUV;


• araba;


• Almak;


• Spor Dalları;


• Yarışma.

Her hakkı saklıdır. 2010 yılı.
Arabalar hakkında site.

Ve tarayıcıda görüntülemenin sonucuna bakıyoruz:

Gördüğümüz gibi web sayfalarına görsel yerleştirmenin zor bir tarafı yok. Şimdi, diğer birkaç önemli etiket özelliğine bakalım. .

alt özelliği bir geri dönüş

Görüntü dosyaları web sayfalarından ayrı olarak depolandığından, tarayıcının bunları almak için ayrı isteklerde bulunması gerekir. Peki ya sayfada çok fazla resim varsa ve ağ bağlantısının hızı düşükse, ek dosyaların indirilmesi çok zaman alacaktır. Görüntünün sizin bilginiz dışında sunucudan kaldırılması daha da kötüdür.

Bu durumlarda, web sayfasının kendisi başarıyla yüklenecek, resimler yerine yalnızca beyaz dikdörtgenler görüntülenecektir. Bu nedenle görüntünün ne olduğu konusunda kullanıcıyı bilgilendirmek için uygulanır. Bu öznitelik, resim yüklenene kadar boş bir dikdörtgende görüntülenecek olan sözde değiştirme metnini belirtir:

Ve bunun gibi bir şey şuna benziyor:

Resmi boyutlandır

Hala bilmeniz gereken birkaç img etiketi özelliği var. Bunlar birkaç özellik Genişlik ve boy uzunluğu... Resmin boyutlarını belirtmek için bunları kullanabilirsiniz:

genişlik = "300" yükseklik = "200">

Her iki özellik de boyutu gösterir piksel... Genişlik özniteliği, tarayıcıya görüntünün ne kadar geniş olması gerektiğini ve yükseklik özniteliğinin ne kadar uzun olması gerektiğini söyler. Bu iki nitelik birlikte veya ayrı ayrı uygulanabilir. Örneğin, yalnızca genişlik özniteliğini belirtirseniz, tarayıcı belirtilen genişlikle orantılı olarak ve ayrıca yalnızca yükseklik özniteliğinin kullanılması durumunda yüksekliği otomatik olarak seçer. Bu öznitelikleri hiç belirtmezseniz, tarayıcı ekranda görüntülemeden önce görüntünün boyutunu otomatik olarak belirleyecektir. Yalnızca, resimlerin boyutunun belirtilmesinin, sayfayı görüntülerken tarayıcıyı biraz hızlandıracağını belirtmekte fayda var.

Bu şimdilik sayfalara resim eklemekle ilgili, daha sonra siteye nasıl ses veya video ekleyebileceğimizi ele alacağız ...

HTML 5 kullanarak video ve ses gömme

Yeni html5 özelliği, medya dosyalarını yerleştirmeyi çok kolaylaştıran birkaç yeni etiket sunar. Bu öncelikle video ve ses için geçerlidir.

Eklemek için ses HTML5, eşleştirilmiş bir etiket sağlar Ses klibinin saklandığı dosyanın adresi, zaten bilinen src özniteliği kullanılarak belirtilir:

Etiket

Varsayılan olarak, ses klibi web sayfasında hiçbir şekilde görüntülenmez. Ama eğer etiketteyse

Bir web sayfasına video eklemek için eşleştirilmiş bir etiket kullanın ... Bu etikette her şey etikette olduğu gibi aynı

Html sayfalarına resim ve multimedya eklemek için söylenecek fazla bir şey yok. bir soru bekliyorum "Bir html sayfasına nasıl resim eklenir?" Sana cevap verdim. yani sadece özetlemek gerekirse:

için html'ye resim ekleme sayfa tek bir etiket kullanıyor ve öznitelikte resim bulunan dosyanın adresini belirtin kaynak: ;

• kullanarak alt nitelik etiket görüntünün yüklenmemesi durumunda değiştirilecek metni ayarlayabilirsiniz;
• nitelikleri kullanma Genişlik ve boy uzunluğu web sayfasındaki görüntünün boyutunu ayarlayabilirsiniz;
• html5'e ses ve video eklemek için eşleştirilmiş etiketler var

Bir şey net değilse, yorumlarda sorun ve blogumdaki güncellemelere abone olmayı unutmayın. Sonraki yazılarda görüşmek üzere!

Herkese merhaba!!! Bu makalede, bir HTML belgesine nasıl resim ekleneceğini öğreneceksiniz. Hiç de zor değil. Ama önce, bir web sayfasındaki resimler için size birkaç yönerge vermek istiyorum.

Tavsiye: bir web sayfasına resim gönderirken, hareketli resimlere kapılmayın, çünkü bu okuyucunun dikkatini en önemli şeyden, metinden uzaklaştırır. Animasyonsuz normal bir resim kullanmak daha iyidir.
Web sayfalarınızda benzersiz resimler kullanmaya çalışın. Eşsiz bir fotoğrafın nasıl yapıldığını okuyabilir, güzel fotoğraflar çekebilirsiniz.

Başlayalım.

Html'ye nasıl resim eklenir?
Dediğim gibi - burada karmaşık bir şey yok, bu html kodunu ekleyin.

kartinka resmin adıdır
jpg bir resim uzantısıdır. Uzantı gif, png, bmp olabilir.

Resim, resimler klasöründe bulunuyorsa, resmin yolu aşağıdaki gibi olacaktır:

resimler - "kartinka.jpg" resminin bulunduğu klasörün adı.

Resim başka bir sitedeyse, kod şöyle olacaktır:

https: //www.site web sitesinin adresidir.

Örnek :

Bunu yapmak için, resmi başvurulan öğenin arasına yerleştirmeniz yeterlidir:

Görüntüler için nitelikler

ALIGN - bu özellik, resmin yatay akışı veya hizalanması için tasarlanmıştır.
sol - sola hizalama, metin sağa doğru sarılır.
sağ - sağa hizalı, metin sola akar.

Sonuç :

sağa hizalama

HSPACE - resimden yatay sapmalar (piksel olarak).
VSPACE - resimden dikey sapmalar (piksel olarak).

Sonuç :

resimdeki girintiler

YÜKSEKLİK - görüntü yüksekliği (piksel).
GENİŞLİK - görüntü genişliği (piksel).

Sonuç :

BAŞLIK - bu resmin başlığı. Fare imlecini resmin üzerine getirirseniz başlık görüntülenecektir.

başlık = "(! LANG: Herkese merhaba - site !!!!}">

Sonuç :

resim başlığı

KENARLIK - bu özellik, resmin etrafındaki kenarlığın boyutundan sorumludur. Bir resmi bağlantı yaptığınızda bu gibi durumlarda çerçeveler görünür. KENARLIK özniteliğini sıfıra ayarlarsanız, kenarlık görüntülenmez.

Sonuç :

Ve sınır değerini 5 olarak değiştirirsek:

Sonuç :

Herhangi bir resim arka plan olarak kullanılabilir. Bunu yapmak için, gövde etiketine arka plan niteliğini yazın.

arka plan = "arkaplanınız.jpg">

Metin, resmin arka planında görüntülenebilir.

Örnek :

Sonuç :

arka plan olarak resim

Bu notta, "HTML'ye nasıl resim eklenir" konusu bitirilebilir, ancak birçok kişinin bu soruyla ilgilendiğini biliyorum, ancak resim nasıl ortaya konur.
Resmi ortaya koymak için bu numarayı uygulamanız yeterlidir:

Artık bu kesin. Bir sonraki derse geçilir.

Bu yazıda size bir sayfaya resim ve grafik eklemek için çok önemli HTML etiketlerinden bahsedeceğim, çünkü bu olmadan güzel ve iyi bir site oluşturmak zor.

Resimler sitenizi benzersiz kılacak ve kalabalığın arasından sıyrılacaktır. Ancak, bir web sitesinde aşırı grafik kullanımının kötü bir faktör olabileceğini unutmayın.

Html sayfasını resimlerle ödüllendirmeyin, sayfa hafif olmalı ve ziyaretçileri korkutmamalıdır. Ziyaretçi her zaman ana bilgileri özümsemeli ve dikkati dağılmamalı, resimleri HTML'ye yalnızca gerektiğinde yerleştirmelidir.

BODY etiketinin Nitelikleri sayfasında, resimlerin bir html sayfasının arka planı olabileceğini zaten söylemiştim ve şimdi size aynı resimlerin arka plandan daha yüksek düzeyde nasıl kullanılabileceğini anlatacağım.

Bu nedenle, bir HTML sayfasına resim eklemek için etikete ihtiyacınız vardır. en önemli SRC özelliğine sahiptir. Bu özellik, resmin adresini belirtmek için gereklidir. Diyelim ki image.jpg resmini html sayfasında bir yere koymanız gerekiyor ve resmimiz sayfa ile aynı klasörde (dizin) olacak, sonra aşağıdaki html kodunu yazmanız gerekiyor:

Resim ve html sayfası farklı klasörlerde veya dizinlerdeyse, resmin yolunu sayfaya göre yazmanız gerekir. Örneğin, html sayfamız haber klasöründe veya dizinde bulunur, pop alt dizini (klasör) image.jpg'mizin bulunduğu aynı dizinde veya klasörde bulunur, ardından eklemek için şöyle yazmanız gerekir:

Etiketin src özelliğine ek olarak birkaç isteğe bağlı ancak önemli özellik daha var:

• genişlik - görüntü genişliği (piksel veya yüzde belirtebilirsiniz);
• yükseklik - görüntü yüksekliği (piksel veya yüzde belirtebilirsiniz).

Bu öznitelikleri belirtmezseniz, tarayıcı görüntünün gerçek boyutlarını yükleyecektir. Bununla birlikte, bu niteliklerin değerleriyle aşırıya kaçmamalısınız, çünkü bir resmin uzunluğundaki veya genişliğindeki bir artış onu bozabilir, bu da onu mahvedebilir, örneğin, bir kişinin bir fotoğrafının oranlarının olduğu bir kişinin fotoğrafı. kişi değişikliği.

Daha önce yazdığım gibi, resmin boyutu hem piksel hem de yüzde olarak belirtilebilir. Size sadece bir örnek vereceğim:

başka bir html kodu örneği:

Tarayıcıda resimler de dahil olmak üzere grafik görüntüleme özelliğinin devre dışı bırakıldığı ve sayfanızın anlamını kaybetmemesi için, resim yüklenmemişse alternatif metin yazdığımız alt özelliğinin kullanıldığı zamanlar vardır. sayfa. örneğin html kodu:

• sol - resim solda olacak ve yanındaki metin sağda olacak;
• sağ - resim sağda olacak ve yanındaki metin solda olacak.

İşte HTML kodu:

Resmin yanında metin.

ve tarayıcı aşağıdakileri görüntüler:

Resmin yanında metin.

Doğru değer için HTML kodu:

Resmin yanında metin.

html sayfasında şöyle olacak:

Resmin yanındaki metin.

Metnin resmin etrafından akmasını önlemek için, HTML'de Metni Biçimlendirme sayfasında daha önce bahsedilen BR etiketini kullanabilirsiniz. Bu arada, BR etiketinin kendi değerleriyle net bir özelliği vardır:

• sol - sola hizalanacak metni kaydırmayın;
• sağ - sağa hizalanacak metni kaydırmayın;
• tümü - sol ve sağ kenarlara hizalanacak metni kaydırmayın.

Hizalama özelliği olmadan, metin varsayılan olarak resmin sağına kaydırılır ve neredeyse aynı hizadadır. Metnin resmin etrafına sarılmamasını istiyorsanız, aşağıdaki öznitelikleri kullanabilirsiniz:

• vspace - üst ve alt kenar boşluklarını piksel olarak yapar;
• hspace - piksel cinsinden kenar boşlukları (sol ve sağ) yapar.

Örneğin basit bir html kodu vereceğim:

İşte çok güzel bir resim.

Bu örneğe göre neyin ortaya çıkacağını görmeye çalışın.

Ayrıca border niteliğini kullanarak resmin etrafında bir kenarlık oluşturabilir ve boyutunu piksel olarak belirleyebilirsiniz. Değer ne kadar yüksek olursa, görüntünün etrafındaki çerçeve o kadar büyük olur. HTML kodu şu şekilde olacaktır:

html sayfasında şöyle görünecek:

Bir html sayfasına resim eklemek için gereken temel HTML etiketlerini yazdım. Ardından, HTML'de nasıl bağlantı oluşturulacağını ve ayrıca bir resmi nasıl bağlantı yapacağınızı göstereceğim.

Yayınlanma tarihi: 15 Mayıs 2012

Etiket, bir HTML belgesine resim eklemekten sorumludur. ve ana olarak kabul edilebilecek özellikleri kaynak resmin adresini belirterek. Gereklidir, çünkü resmin nereden alınacağını belirtmezseniz tarayıcı sayfaya ne ekleyeceğini bilemez.

Bir resim eklemek için en basit durum şöyle görünecektir (resme image.png denir ve HTML belgesiyle aynı klasörde bulunur):

Daha önce etiket gerekli bir özellik daha vardı - alt ancak HTML 5'in gelişiyle arzu edilir hale geldi. alt aniden yüklenmezse kullanıcının resim yerine göreceği metni ayarlar. Bu özellik, arama motorlarında yükselmeye olumlu etkisi olduğuna inanıldığı için bazı SEO'lar tarafından da tavsiye edilmektedir.

Görüntü için herhangi bir ek nitelik belirtmezseniz, tam boyutta görüntülenecektir ve bu her zaman gerekli değildir. Neyse ki, öznitelikler kullanılarak resmin istenen boyutu ayarlanabilir. Genişlik(genişliği gösterir) ve boy uzunluğu(yüksekliği belirler). Boyutlar piksel veya yüzde olarak yazılabilir. İkinci durumda, tarayıcı ana öğeden (örneğin, resmin eklendiği paragraf) yüzdeyi hesaplayacaktır.

Diyelim ki sayfaya bir resim eklememiz gerekiyor resim.png"Sadece bir resim" alternatif metniyle, 420 piksel genişliğinde ve 280 piksel uzunluğunda. Bu durumda kod aşağıdaki gibi olacaktır:

Navigasyon haritası

Bir önceki yazımızda nasıl resim link yapılacağından bahsetmiştik. Bununla birlikte, HTML, bir görüntüde birden fazla bağlantı, ancak aynı anda birkaç bağlantı ayarlamanıza olanak tanır. Sonuç olarak, kullanıcı aynı resmin farklı yerlerine tıklayarak farklı internet adreslerine gidecektir. Bu özellik, örneğin göz alıcı menüler, etkileşimli testler veya görsel grafik modeller oluşturmak için kullanılabilir.

Bir görüntü haritası oluşturmak için (açıklanan özelliğin adı budur), aşağıdaki etiketlere ve niteliklere ihtiyacınız vardır:

• - görüntü haritasının tanımlandığı kapsayıcı.
• - içeride etiketle resmin bir alanını tanımlayan. Görüntüyü kaç aktif alana bölmeyi planlıyorsunuz, pek çok unsur ve teslim etmek zorunda. Demet - paketlerle tamamen aynı şekilde çalışır
  -
  1. ve
     -
     • listeler oluşturmak.
     • şekil- etiket özelliği bağlantının biçimini belirtir. Aktif alan bir dikdörtgen, çokgen veya daire şeklinde olabilir.
     • kordonlar- alanın koordinatlarını tanımlayan nitelik. Ayrıca etikete ait ... Bir dikdörtgen için, bir çokgen için sol üst ve sağ alt köşelerin koordinatları belirtilir - bir daire tanımlayan köşelerin koordinatları, merkezinin ve yarıçapının koordinatlarını belirtmelisiniz.
     • kullanım haritası- etiket özelliği resim bu, görüntüyü haritaya bağlar. Onun sayesinde tarayıcı, kapsayıcıda olduğunu anlar. bu özel şeklin haritası açıklanmıştır.

     Resim haritası örneği

     Yukarıdakilerin tümünün nasıl kullanılacağını netleştirmek için basit bir örnek vereceğim. bir çizim var harita.jpg... İki aktif alana bölünmesi gerekiyor. Üst kısma (yeşil) tıklamak Odnoklassniki web sitesini açarken, alt kısım (mavi) VKontakte'ye yol açacaktır. Bağlantılar yeni bir sekmede açılmalıdır. Bir harita oluşturmak için aşağıdaki adımları izleyin.

     1. Resmi sayfaya yerleştirin ve aşağıdaki kodu yazdığımız gelecekteki karta (sosyal olarak adlandırılacaktır) bağlayın:

     

     2. Resimdeki gelecekteki aktif alanları ve bunlara karşılık gelen koordinatları tanımlayın. Bu, Paint, Photoshop veya başka herhangi bir grafik düzenleyicide yapılabilir. Bizim durumumuzda her şey basit: dikdörtgenler yükseklik (114 piksel) ve genişlik (384 piksel) olarak eşittir.

     3. Bir harita oluşturmaya başlıyoruz: etiketi açın ve adını, görüntünün kendi usemap özelliğinin değeriyle eşleşmesi gereken name niteliğine yazın:

     4. Alan etiketlerini kullanarak aktif alanları tanımlayın:

     5. Kartı kapatın:

     Çalışmanın sonucu, farklı bölümlerine tıklamak farklı sosyal ağların açılmasına yol açan bir resimdi ve bu HTML kodu:

     

     Aklınıza gelebilecek en basit durum örnek olarak düşünülmüş olsa da, navigasyon haritaları oluşturma ilkesini açıkça göstermektedir. Ayrıca - HTML açısından bir teknoloji ve koordinatların belirlenmesi meselesi, hiçbir şey karmaşık değildir.

     Bu kişi hakkında bilinen her şey
     cezaevinde olmadığı, ancak neden cezaevinde olmadığı bilinmiyor.
     Mark Twain.

     Bu hakkında bir ders HTML'ye nasıl resim eklenir, nasıl düzenlenir, bir resmin etrafında metin akışı nasıl yapılır, vb. Sonuçta, resimlerin bir siteyi diğer kaynaklardan daha çekici ve farklı kıldığı bilinmektedir, bu nedenle etiketi ve özelliklerini kullanma yeteneği modern İnternet'te çok faydalıdır. Ama buradaki en önemli şey orantı duygusu!

     Çok sayıda grafik, html sayfasını daha ağır hale getirecek ve buna bağlı olarak yükleme süresini artıracaktır. Ek olarak, çok sayıda görüntünün varlığı, ziyaretçilerin dikkatini sitenin ana içeriğinden uzaklaştıracaktır (tabii ki, grafikler sitenin ana içeriği değilse). Bu yüzden dikkatli olun ve yalnızca ihtiyacınız olan yerde kullanın. Ve mutlu olacaksın!

     Bununla ilgili derste, resimleri bir html belgesinin arka planı olarak nasıl kullanabileceğinizden zaten bahsettim. Şimdi bir html sayfasının "üst katmanında" grafiklerin nasıl kullanıldığı hakkında konuşalım.

     
     

     § 1. Resim nasıl eklenir

     HTML'ye resim eklemek için etiketi kullanın IMG ile birlikte zorunlu bağlanmak kaynak... Bu öznitelik, tarayıcıya görüntü dosyasının yolunu söyler. Onlar. resim eklemek için logo.jpg adıyla sayfada belirli bir yere (hem sayfanın hem de resmin yer alması şartıyla) bir klasörde(dizin)) bu yere aşağıdaki html kodunu eklemeniz gerekir:

     kaynak = "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, html sayfası site dizininde (klasör) ise, resimler alt dizini (klasör), logo.jpg resmimizin bulunduğu aynı dizinde (klasör) bulunur, sonra eklemek için yazmanız gerekir. bunun gibi:

     resimler / logo.jpg ">

     Ve acı çekemez ve gösteremezsiniz resmin tam adresi... Örneğin, bunun gibi:

     http: //www..png ">

     İkinci durumda, tarayıcı aşağıdaki gibi kodu görüntüler:

     Not. resim yer alıyorsa bilgisayarınızda, ve onu eklemek istiyorsun İnternette bir sayfaya o zaman elinden bir şey gelmez. Bunu yapmak için, resmin önce bir yere taşınması gerekir. internette(Örneğin, ). Ve sayfa kodunda tam adresi belirtin bir resim ile bu yere.

     
     

     Gerekli özelliğe ek olarak kaynak etikette IMG birkaç isteğe bağlı özellik daha var. Onları daha ayrıntılı olarak ele alalım.

     § 2. Resmin boyutunun belirtilmesi

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

     • Genişlik- piksel veya yüzde olarak resmin genişliği;
     
     
     • boy uzunluğu- piksel veya yüzde olarak resmin yüksekliği.
     
     

     Bu öznitelikler kullanılırsa, önce grafikler için alan ayıracak, belge düzenini hazırlayacak, metni gösterecek ve ancak bundan sonra resmi yükleyecektir. Aynı zamanda, resmin gerçek genişliği ve yüksekliği daha büyük (küçültülmüş) veya daha küçük (uzatılmış) olsa bile, resmi seçilen boyutta bir dikdörtgene yerleştirecektir. Bu özniteliklerin kullanılmaması durumunda, tarayıcı görüntüyü hemen yükleyecek ve onu takip eden metnin ve diğer öğelerin çıkışı gecikecektir.

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

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

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

     § 3. Alternatif metin

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

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

     Yine, kullanıcı grafiklerin görüntülenmesini devre dışı bıraktıysa bu gerçekleşir. Değilse, resim alternatif metni gizleyecektir.

     § 4. Görüntü hizalama

     Zaten bildiğiniz bir özelliğin yardımıyla hizalamak html sayfasının diğer öğelerine göre resimlerin hizalamasını kontrol edebilirsiniz. öznitelik hizalamak birkaç değer var, ancak şu anda en çok iki tanesiyle 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ı böyle gösterecek

     Ve bu HTML kodu:

     şöyle görünecek:

     Resmin etrafında metin akışını durdurmak için etiketini kullanabilirsiniz. BR(hakkında son bölümden bize tanıdık). Etiket BR bir özellik var açık, üç değer alabilir:

     • sol- sola hizalanmış görüntülerin etrafında metin akışını durdurun;
     
     
     • sağ- sağa hizalanmış resimler üzerinde metin akışının sonlandırılması;
     
     
     • herşey- hem sola hem de sağa hizalanmış görüntülerin etrafında metin akışını durdurun.