Numaralandırılmış liste etiketli çok benzer. Tek fark, numaralandırılmış listedeki her öğenin önüne grafik işaretleyiciler yerine sıralı sayılar veya harfler otomatik olarak yerleştirilmesidir.

Etiketler kullanılarak numaralandırılmış bir liste belirtilir. Madde işaretli listede olduğu gibi, her öğe bir etiketle tanımlanır

anahtar kelime KASET.

BANT = 1 - Standart numaralandırma (1,2,3,4,5, ...)

BANT = A - Büyük harfler (A, B, C, D, ...)

BANT = a - Acil harfler (a, b, c, d, ...)

BANT = I - Romen rakamları (I, II, III, IV, ...)

TAPE = i - Romen küçük rakamları (i, ii, iii, iv, ...)

Tanım listeleri, diğer liste türlerinden biraz farklı görünür. Bu durumda, listedeki her bir öğeyi tanımlamak için bir etiket değil iki etiket kullanılır.

1. ... Etiket
   tek bir öğeyi, yani tanımlanmakta olan terimi ve etiketi belirtir.
   - sonraki satırda görüntülenen bilgilerin geri kalanı girintili. İkinci bilgi satırı denir tanım. Tanım listesi, diğer listelerle aynı şekilde belirtilir. Tek fark, her öğenin iki etiket gerektirmesidir.

   Listelerle ilgili harika şeylerden biri, onları iç içe yerleştirme yeteneğidir. Bir listeyi bir listeye yerleştirmek, basitçe bir liste oluşturmakla aynıdır. Bunun için özel olanlar yok. HTML etiketleri... Tarayıcının kafasını karıştırmamak için, her bir iç listeyi etiketiyle kapattığınızdan emin olun.... Birbirinize bile yatırım yapabilirsiniz. Çeşitli tipler listeler.

   Yukarıdaki listelerin tümünü oynat

   Listelerin bir dezavantajı vardır - tek boyutludurlar. Bu, yalnızca ardışık satırlara bilgi yerleştirebileceğiniz anlamına gelir. Tablolar ise verileri yalnızca satırlar halinde değil, sütunlar halinde de düzenlemenizi sağlar.

   Tabloları tanımlamak için çeşitli etiketler kullanılır. Etiketler:

   ve tüm tabloyu çerçeveler ve bir dizi başka etiket, bilgilerin nasıl görüntüleneceğini belirler. tablo gösterir Tam tanım tablo etiketleri.

   
   
   

   Tablo oluşturmak için HTML etiketleri:

   Etiketler Açıklama

   ve Bu etiketler tabloyu kaplar. Etiket

   tarayıcılara tablonun bir açıklamasının takip ettiğini söyler. Satırları ve sütunları ayıran ızgaranın görünür olmasını istiyorsanız, BORDER anahtar sözcüğünü ekleyin.

   başlık olarak görüntülenir. Başlığı ayarlamak için etiketleri de kullanabilirsiniz. ve.

   Etiketler, metni satır veya sütun başlıklarıyla biraz daha büyük kalın yazı tipiyle görüntüler.

   ve Etiketler tablonun her satırını tanımlar. Etiket isteğe bağlıdır, ancak HTML kodunuzu daha eksiksiz ve anlaşılır hale getirir.

   Bu etiket çifti, tablodaki her hücrenin metnini ayırır.

   Beş satır ve beş sütun içeren bir tablo oluşturmak için bir dosya oluşturun.

   Tablonun arka plan ve ızgara renklerini ayarlamanıza izin veren bir dizi etiket vardır. İlk durumda, BGCOLOR anahtar sözcüğü etikete eklenir.

   ve bu etiketlerle işaretlenmiş Metin,

   ve
   ve

   aşağıdaki resimler:

   BGCOLOR anahtar sözcüğünün yanı sıra rengi kontrol etmenin başka yolları da vardır:

   BORDERCOLOR Tablo ızgarasının rengini değiştirin

   BORDERCOLORDARK / Ağı değiştirmek için kullanılır

   BORDERCOLORLIGHT ek 3D efekti

   3D efektli tablo ızgara rengini değiştirme.

   Ders 12-13. Grafikleri kullanma

   Resimler ve grafikler WWW için çok önemlidir. Ekrandaki hem görselleri hem de metni aynı anda görüntülemenizi sağlayan tek İnternet aracıdır.

   Bir web sayfasına resim yerleştirmek için etiketi nasıl uygulayacağınızı bilmeniz gerekir. ... etiketi girin ve hangi grafiklerin indirileceğini belirtmek için SRC = anahtar sözcüğü.

   

   Bu etiketi girerken, dosyanın HTML dosyanızla aynı klasörde bulunması gerektiğini lütfen unutmayın.

   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 img etiketi 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 verilerinin ve html metni tek bir dosyada birleştirmek imkansızdır, sitede gösterilmeleri 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, bunlara bağlantılar içeren özel etiketler kullanılır. ayrı dosyalar... Özellikle, böyle bir etiket img etiketi... Bir adrese sahip böyle bir etiketle karşılaştığında, tarayıcı önce ilgili görüntü, ses veya video dosyasını Web sunucusundan talep eder 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 "img" etiketine ayrıntılı olarak bakmadan önce, grafik formatları hakkında biraz bilgi edinmeye değer.

   Grafik görüntü biçimleri.

   Birç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 uzantıları, jpe, jpeg.

   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.

   Site oluştururken genellikle JPEG veya GIF formatındaki görüntüleri kullanırlar, ancak bazen PNG kullanırlar. 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 img etiketi... Tarayıcı, resmi web sayfasında img etiketiyle karşılaştığı yere yerleştirir.

   html içine bir resim 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. Resimler html sayfalarıyla birlikte web'de depolandığından, her resim 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, sayfaya mysite.ru sitesinden 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.

   img etiketi bir satır içi öğedir, bu nedenle onu bir blok öğesinin içine, örneğin "P" etiketinin - bir paragrafın içine yerleştirmek daha iyidir:

   Hadi pratik yapalım ve daha önceki makalelerden sayfamıza yapıştıralım. html resmi... 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:

   

   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, "img" etiketinin diğer birkaç önemli ö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, indirme işlemi ek dosyalarönemli miktarda zaman alacaktır. Daha da kötüsü, görüntü sizin bilginiz dışında sunucudan kaldırılırsa.

   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:

   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 olduğunu 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. Sayfa oluşturulurken resimlerin boyutunun belirtilmesinin 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 ekleyeceğimizi ele alacağız ...

   HTML 5 kullanarak video ve ses gömme

   Yeni html5 spesifikasyonu, 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... Ses klibinin saklandığı dosyanın adresi, zaten bilinen src özniteliği kullanılarak belirtilir:

   "Ses" etiketi, sayfada bir blok öğesi oluşturur. Varsayılan olarak, tarayıcı ses klibini oynatmaz. Bunu yapabilmesi için ses etiketinde özel bir nitelik belirtilmelidir. otomatik oynatma... Özel çünkü önemli değil. Bu özelliğin etikette bulunması, etkili olması için yeterlidir.

   Varsayılan olarak, ses klibi web sayfasında hiçbir şekilde görüntülenmez. Ancak "ses" etiketine değeri olmayan bir özellik koyarsanız kontroller, tarayıcı, ses etiketinin yerleştirildiği web sayfasının yerinde, ses klibini oynatma kontrollerini görüntüler. Bunlara bir oynat / duraklat düğmesi, bir oynatma çubuğu ve bir ses kontrolü dahildir.

   Yüzlerce grafik biçimi vardır, ancak yalnızca birkaçı web tarayıcıları tarafından desteklenir. Bu yazıda, web tasarımcılarının kullanabileceği çeşitli grafik dosya formatlarını ve bunların ne zaman kullanılması gerektiğini anlatacağız.

   En popüler web tarayıcıları tarafından desteklenen grafik dosya biçimleri şunlardır: Grafik Değişim Biçimi (GIF), Ortak Fotoğraf Uzmanları Grubu (JPEG), Taşınabilir Ağ Grafikleri (PNG) ve vektör grafikleri. Grafik dosyalarının bazı özellikleri:

   • Şeffaflık - bu özellik, bir görüntünün katıdan tamamen şeffafa değişen derecelerde şeffaflık olmasını sağlar.
   • Sıkıştırma - Bu özellik, bir piksel grubunu tek bir öğe olarak ele almak için matematiksel algoritmalar kullanarak bir görüntünün çok daha küçük bir dosyaya kaydedilmesine olanak tanır.
   • Dokuma - görüntünün önce tek satırlara, sonra çift satırlara yüklenmesine izin verir. Bu, ziyaretçinin görüntüyü daha hızlı görmesini sağlar.
   • Animasyon - bir dizi ardışık çekim yaparak hareketin görünümünü yaratır. Animasyonlu GIF, bir tarayıcı eklentisi gerektirmez ve neredeyse tüm cihazlarda çalışabilir.
   • Aşamalı Yükleme - Dokumaya benzer, çünkü başlangıçta görüntünün yalnızca bir kısmını indirir, ancak aralıklı olarak değil.

   GIF, 1980'de kuruldu ve 1990'ların başında web tasarımcıları tarafından ana akım olarak kabul edildi. grafik formatı web sayfaları için. GIF dosyaları, hızlı yükleme için dosya boyutunu küçülten bir sıkıştırma algoritması kullanır. GIF, 256 renk (8 bit), saydamlık ve geçmeli grafik desteği ile sınırlıdır. Bu formatı kullanarak animasyonlu grafikler oluşturmak da mümkündür. Tüm tarayıcılar GIF dosyalarını sorunsuz bir şekilde görüntüleyebilir.

   GIF'in faydaları:

   • En yaygın olarak desteklenen grafik formatı
   • Diyagramlar bu formatta daha iyi görünüyor
   • Şeffaflık desteği

   Dosyalar sıkıştırılmıştır, ancak “gerçek renkleri” (24-bit) destekler ve kalitenin önemli olduğu fotoğraflar için tercih edilen formattır. JPEG, görüntüyü neredeyse anında görmenizi sağlayan ve indirme bittiğinde kaliteyi artıracak olan aşamalı formatı destekler.

   GIF dosyalarından farklı olarak, web tasarımcıları sıkıştırılmış JPEG dosyalarını değiştirerek farklı görüntü kalitesi ve dosya boyutları seviyelerine izin verebilir.

   JPEG'in Faydaları:

   • Daha büyük sıkıştırma, daha hızlı indirme hızları anlamına gelir.
   • üretir mükemmel kalite fotoğraflar ve karmaşık çizimler için.
   • 24 bit renk desteği.

   PNG, GIF dosyalarına alternatif olarak tanıtılan nispeten yeni bir formattır. PNG, 24 bit'e kadar rengi, saydamlığı, taramayı destekler ve arama motorları tarafından kullanılan görüntünün kısa bir metin açıklamasını içerebilir.

   PNG'nin Faydaları:

   • GIF'te 8 bitlik renk kısıtlamalarının üstesinden gelir
   • Arama motorları için resimlerin metinsel açıklamasına izin verir
   • Şeffaflığı destekler
   • Şemalar JPEG'den daha iyi görünüyor

   Vektör grafikleri

   Çoğu web grafiği, bit eşlem veya renkli piksellerden oluşan bir ızgaradan oluşan bir çizim. Çizimler, görüntünün çizgi şekillerini ve renklerini oluşturan her bir öğenin matematiksel bir açıklamasından oluşan vektör grafiklerinde oluşturulmalıdır. Vektör grafikleri, aşağıdaki gibi ilgi çekici programlarla oluşturulur. Adobe illüstratör veya CorelDRAW. Vektör grafikleri, web sayfalarında kullanılmak üzere herhangi bir GIF, JPEG veya PNG formatına dönüştürülmelidir.

   Hangi formatı kullanmalısınız?

   Bir web tasarımcısı, çoğu uygulama için GIF veya JPEG formatını seçebilir. Ama boyutundan beri GIF dosyaları genellikle boyutuna göre küçük JPEG dosyasıÇoğu web tasarımcısı, arka planlar, kutular, çerçeveler ve 8 bit renkle harika görünen diğer grafikler için GIF kullanır.

   Çoğu tasarımcı, sıkıştırmanın görüntünün görsel kalitesinden ödün vermediği fotoğraflar ve çizimler için JPEG formatını seçecektir.

   Bu eğitim size bir web sayfasını grafik ekleyerek nasıl dekore edeceğinizi gösterecektir. En yaygın resim formatlarını tanıyacağız, sayfaya resim eklemek için hangi etiketin kullanıldığını öğreneceğiz, alternatif başlıklar ve metin ve grafiklerin hizalanması ile ilgileneceğiz. Ayrıca görüntülerin ana özelliklerini tanıyacağız ve görüntünün genişliğini ve yüksekliğini nasıl ayarlayacağımızı öğreneceğiz. Ardından, resimleri bağlantı olarak kullanma ve küçük resimlerin ne olduğu hakkında birkaç söz. Son olarak, bir web sayfasında grafikleri kullanmak için bazı genel ipuçları vardır.

   Bir web sayfasına resim ekleme
   Web sayfası metinsel bilgilerden başka bir şey içermiyorsa, üzerinde sunulan bilgiler sayesinde birisi için ilginç görünebilir, ancak herhangi birinin onu çekici olarak adlandırması pek olası değildir. Bir web sayfasına resim eklemek çok kolaydır. Sayfaya profesyonel bir görünüm kazandırabilecek grafikler eklemek biraz bilgi gerektirir. Aslında, bugünün dersi neye adanmıştır.

   İnternette en yaygın kullanılan iki grafik formatı GIF ve JPEG'dir. Joint Photographic Experts Group (JPEG) tarafından geliştirilen ve adlandırılan format, genellikle fotoğraflar gibi yumuşak renk geçişlerine sahip görüntüleri depolamak için kullanılır.

   Hemen hemen tüm diğer grafik öğeleri, grafik verilerinin değiş tokuşu için bir biçim olan GIF'e (Grafik Değişim Biçimi) kaydedilir. Şu anda, giderek daha fazla popülerlik kazanan yeni bir grafik formatı daha var: PNG (Taşınabilir Ağ Grafikleri). Sonunda GIF formatının yerini alması bekleniyor. Ancak, tüm tarayıcılar tarafından hala desteklenmese de, tüm grafik dosyalarınızı bu biçimde yeniden kaydetmek için acele etmeyin.

   Tüm resimler, resim kaynak etiketi adı verilen aynı etiket kullanılarak web sayfasına eklenir. ... Muhtemelen, şimdi bu girişin etiketten oluştuğunu kendiniz belirleyebilirsiniz. , özniteliği (scr) ve bu özniteliğin değeri (konum). Ancak scr özniteliğini kullanmak zorunlu olduğundan, bu girdiyi tek bir genel etiket olarak düşünmek daha uygundur. Muhtemelen resim kaynak etiketinin karşılık gelen bir bitiş etiketi olmadığını da fark etmişsinizdir. Bu ayrı, bağımsız bir etikettir, bu nedenle sonuna eğik çizgi eklemeyi unutmayın: .

   # 1058; D XHTML 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd "> İlk resimler f> Bu resim ilk web sayfama eklendi. >

   

   Alternatif Etiketler Ekleme
   İnternette gezinirken, fare imlecini bir web sayfasının bazı grafik öğelerinin üzerine getirdiğinizde görüntülenen çeşitli yazıtları muhtemelen fark etmişsinizdir. Bu yazıtlar genellikle bir tür Ek bilgi görüntünün kendisi veya kapladığı sayfanın alanı hakkında.

   

   Aşağıdaki HTML kodu, alt özelliğinin etiketin içine nasıl eklendiğini gösterir. ... src niteliğine benzer şekilde, alt niteliği web tarayıcısına resim hakkında bazı ek bilgiler verir ve ayrıca her zaman etiketle birlikte kullanılabilir. .

   alt özelliği, web sayfasına eklenen grafik öğesi için alternatif metni tanımlar. Bu metne alternatif denir çünkü ekranda görüntünün kendisine alternatif olarak gösterilebilir. Alt niteliğinin çok önemli bir amacı daha vardır. Düşük veri hızına sahip kanalları kullanan birçok İnternet ziyaretçisi, tarayıcılarına grafik bilgileri indirmemeleri veya görüntülememeleri konusunda talimat verebilir. Bu, web sayfalarının bilgisayarlarına yüklenmesini hızlandırmalarını sağlar.

   Ayrıca, tüm tarayıcıların pencerelerinde grafik görüntüleyemediğini unutmayın. Örneğin, Lynx tarayıcısı bu özelliği hiç desteklemez. Bu nedenle, alt özelliği, web tasarımcısının, web sayfasını ziyaret eden bir ziyaretçinin ekranında bir görüntü görmemesi durumunda, en azından o görüntüye eklenen metin bilgilerini görebileceğinden emin olmasını sağlar.

   Alt niteliği her etiket için tanımlanabilse de , bazı grafik öğelere uygunsuz metin mesajları atamamaya dikkat edin. Örneğin, bir web sayfasının dış tasarımının çeşitli öğelerine alternatif metin etiketleri eklemek mantıklı değildir. Bu tür hatalardan kaçınmak için, bu tür öğelerin alt niteliğini boş bir değere ayarlayabilirsiniz (alt = ""). Başka bir öznitelik ayarlamazsanız, tarayıcı görüntünün üst kenarını bitişik metin satırının üst kenarıyla hizalayarak görüntüyü orijinal boyutunda işler. Stil sayfası etiketlerini kullanarak bu parametrelerin her ikisini de değiştirebilirsiniz.

   Görüntü Özellikleri
   etiket için Resmi yeniden boyutlandırmak için nitelikler sağlanır. Bu niteliklerden bazıları aşağıda listelenmiştir.
   boy uzunluğu- Piksel veya yüzde olarak belirtilir - Resmin yüksekliğini belirtir
   Genişlik- Piksel veya yüzde olarak belirtilir - Resmin genişliğini belirtir.

   Resmin yüksekliğini ve genişliğini ayarlama
   Web sayfasına yerleştirilen görüntünün boyutları, yükseklik ve genişlik öznitelikleri kullanılarak belirlenebilir. Bu özniteliklerin değerleri ya sabit piksel sayıları olarak ya da sayfa boyutuna göre yüzde olarak belirtilir. Aşağıdaki HTML koduna bir göz atın. İlk etiket, bu öğreticinin önceki resimlerinde gördüğünüz orijinal görüntünün boyutlarını dikey olarak 60 piksel ve yatay olarak 60 piksel olarak ayarlar. İkinci etiket, aynı görüntünün genişliğini sayfa genişliğinin %6'sına ve yüksekliği de sayfa yüksekliğinin %10'una ayarlar. Şekil, bu iki görüntünün bir tarayıcı penceresinde nasıl göründüğünü göstermektedir.

   

   Tarayıcı, resmi penceresinde görüntüleyerek, hem piksel hem de yüzde olarak ayarlanan değerleri işlemede eşit derecede iyidir. Ancak, web sayfanızın ziyaretçilerinin bilgisayarlarının, yüklenenden farklı bir ekran çözünürlüğüne ayarlanabileceğini unutmayın. monitörünüz. Bundan ne çıkar? Örneğin, monitör 800x600 çözünürlüğe sahiptir. Önceki örnekte, web sayfasına eklenen resim, bu çözünürlükte 48 piksel olacak şekilde, sayfa genişliğinin %6'sı kadar genişliğe ayarlanmıştır. Aynı görüntüyü 1024x800 çözünürlüğe sahip bir monitörde izlerseniz, belirtilen sayfa genişliğinin %6'sı 61 piksele eşit bir genişliğe karşılık gelir.

   Resmi yeniden boyutlandırırken, yüksekliğine ve genişliğine karşılık gelen her iki değeri de ayarlamayı unutmayın. Bu değerlerden yalnızca birini değiştirirseniz, görüntünün kendisi ekranda dikey veya yatay olarak uzar. Alternatif seçenek bir grafik düzenleyici kullanarak görüntünün boyutunu ayarlamaktan oluşur.

   Daha hızlı görüntü yükleme yanılsaması yaratabilirsiniz. Resmin yeniden boyutlandırılıp boyutlandırılmadığına bakılmaksızın, tarayıcıya yerleştirme için sayfada ne kadar alan ayrılması gerektiği hakkında önemli bilgiler vereceğinden, her zaman yükseklik ve genişlik özelliklerinin değerlerini ekleyin. bu rakamın... Bu durumda, tarayıcı görüntü için gerekli alanı belirleyebilecek ve görüntünün kendisini indirmeyi durdurmadan diğer sayfa öğelerini oluşturmaya devam edebilecektir. Bu, sayfanın daha hızlı yüklendiği izlenimini verir, çünkü ziyaretçilerin sayfada sunulan diğer bilgileri nihayet görmek için görüntünün tamamen yüklenmesini beklemesi gerekmez.

   Resmin sayfanın genişliği boyunca tam olarak doğru miktarda alana sığmasını gerçekten istiyorsanız, yüzdeleri kullanın. Bu durumda, herhangi bir monitörün ekranında görüntü, sayfanın ekranınızdakiyle aynı bölümünü kaplayacaktır. Çizimin çözünürlüğünün (piksel cinsinden boyutu) sabit kalmasını istiyorsanız, piksel cinsinden ifade edilen değerleri kullanın.

   Metin ve grafikleri hizalayın
   Etiket hizalama özelliği Görüntüyü metin satırının sağ (sağ değer) veya sol (sol değer) kenarına hizalamanıza olanak tanır. Bu özelliğin kullanımına ilişkin örnekler şekilde gösterilmiştir.

   Aynı öznitelik, görüntüyü dikey olarak hizalamak için kullanılabilir (yine, metin dizisine göre). Üst, alt ve merkez olmak üzere diğer üç değeri alabilir. Hizalama özniteliği top olarak ayarlanırsa görüntünün üst kısmı, çevreleyen metnin üst kısmıyla hizalanır. Hizalama özniteliği alta ayarlanırsa görüntünün altı, çevreleyen metnin altıyla hizalanır. Hizalama özelliği merkeze ayarlanırsa, görüntünün merkezi metin satırının ortasına hizalanır.

   Resimleri bağlantı olarak kullanma
   Görseller sadece web sayfası tasarımı için iyi değildir. Diğer belgelere köprüler olarak başarıyla kullanılabilirler. V verilen HTML Görev basittir, çünkü görüntüler, etiketlerle tam olarak aynı şekilde köprülere dönüştürülür. Bunu yapmak için, başka bir belgeye bağlantı olması gereken bir web sayfası öğesini kapsayan bir etiket de uygulamanız gerekir. Bu nedenle, herhangi bir resme tıkladıktan sonra bir köprüye geçiş yapılacaksa, bu resmin etiketini etiketin içine almak gerekir.

   bir>

   Bu durumda, bir web sayfası ziyaretçisi bu resmin üzerine geldiğinde, imlecin yanında “Bu benim kendi portrem!” metin mesajı görüntülenecektir. Resme tıkladıktan sonra, köprü ile gösterilen DOC2.htm belgesi açılacaktır.

   Küçük resimler
   HTML'nin köprüleme yeteneğinin bir başka yaygın kullanımı, bazı görüntüleri diğerlerine gitmek için kullanmaktır. Bu ne için? Mesele şu ki, bir web sayfasında yayınlamak istediğiniz görsellerin boyutu genellikle çok büyüktür ve ziyaretçilerin yüklemenin bitmesini bekleyecek sabrının olmayacağı kesin değildir. Bu gibi durumlarda, tarayıcının çok daha hızlı yükleme ile başa çıkacağı küçük resim adı verilen orijinal görüntünün küçük bir kopyası oluşturulur. Bir ziyaretçi görselle ilgileniyorsa ve görselin tam bir kopyasını indirmek istiyorsa, bu küçük resme tıklaması yeterli olacaktır. Karşılık gelen HTML kodları böyle görünür.

   bir>

   Gördüğünüz gibi küçük resim.jpg resmine tıklamak başka bir resim dosyasını (image.jpg) açar. Alt niteliğinin değeri olarak belirtilen bir metin dizesi, ziyaretçiye ana resmi nasıl açacağını söyler.

   Görselleri Başarıyla Kullanmanın Sırları
   Görseller ilgi çekici ve çekicidir, çok sayıda görsel bilgi içerir ve web sayfalarına eklenmesi çok kolaydır, ancak gerçekten İnternet kullanıcıları arasında popüler olacak bir site oluşturmak istiyorsanız aşağıdaki kurallardan bazılarını izlemelisiniz.

   Görüntü dosyasının boyutu ne kadar büyük olursa, kullanıcının bilgisayarına indirilmesi o kadar uzun sürer. Çoğu İnternet ziyaretçisi, ağa erişmek için hala düşük iletişim kanalları kullandığından verim, indirilen dosyaların boyutları onlar için hala temel öneme sahiptir. Bunu aklınızda bulundurun ve resimleri web sayfalarınızda mümkün olduğunca küçük tutmaya çalışın.

   Önemli olan yalnızca tek tek görüntünün dosya boyutu değil, aynı zamanda tüm görüntünün toplam dosya boyutudur. HTML belgesi... Web sayfasına ne kadar çok resim eklenirse, küçük olsalar bile, nihai belgenin dosya boyutu o kadar büyük olur. Uygulamak Ön izleme sayfanız farklı tarayıcılar ve her tarayıcının onu yüklemesinin ne kadar süreceğini tahmin edin.

   Alt özelliği çok önemli olduğu için (her etiket için tanımlamanız önerilir) , kullanırken dikkatli olun. içerik olduğundan emin olun. SMS her zaman görüntünün kendisiyle eşleşir, aksi takdirde sayfa ziyaretçilerinizin kafası karışabilir. Aynı açıklama tam tersi için de geçerlidir: Görsellerin web sayfasında verilen metinsel bilgilerle eşleştiğinden emin olun. Bir uçak fotoğrafı, bir hava seyahat sitesinde uygun, vahşi yaşam alanında ise tamamen gereksiz olacaktır.

   İnternette birçok ilginç resim bulabilir ve bunları bilgisayarınıza kolayca kaydedebilirsiniz. Ancak, bu görüntülerin çoğu telif hakkıyla korunmaktadır. Ticari bir sitede beğendiğiniz bir görsel bulursanız, orada herhangi bir telif hakkı mesajı olup olmadığına ve bu görselin ücretsiz olarak kullanılabilir olup olmadığına bakın.

   Web sayfasındaki görselin telif hakkı yoksa, bilgisayarınıza kopyalayabilirsiniz. Bunu yapmak için bu resme tıklamanız yeterlidir. sağ tık tıklayın ve açılan menüden Resmi Farklı Kaydet komutunu seçin. Görüntüyü bilgisayarınıza kaydettikten sonra, başka herhangi bir çizim gibi kullanabilirsiniz.

   Çoğu Web sayfası grafik içerir. Bilgileri renkli ve net bir şekilde sunmanızı sağlar. Çoğu durumda, uzun bir metin açıklaması vermektense bir resim göstermek daha iyidir.

   Bir sayfaya grafik yerleştirmenin iki yolu vardır:

   • tek tek resimlerin eklenmesi;
   • arka planı bir resimle doldurmak.

   Her durumda, grafik görüntü dosyadan alınır.

   Grafik ekleme

   Bir grafik formatı dosyasından bir grafik görüntüsü, etiketi kullanılarak sayfaya eklenir. (İngilizce'den, resim - resim) dosya adresini SRC özniteliğine bir argüman olarak belirterek:

   < IMG SRC = "адрес_графического_файла" >

   Adres grafik dosyası- muhtemelen bir yol içeren bir URL veya dosya adıdır. Örneğin, logotip.jpg grafik dosyasını görüntülemek için şu etiketi yazın:

   < IMG SRC = "logotip.jpg" >

   Bir etiketteki grafik görüntüsünün aktarım hızını artırmak için niteliğini kullanabilirsiniz ( ek parametre) Bir grafik dosyasının adresini argüman olarak alan LOWSRC. İki grafik dosyası oluşturabilirsiniz: biri (örneğin, logotip.jpg) yüksek çözünürlüklü bir resim içerir ve diğeri (örneğin, logotip.gif) düşük çözünürlüklü bir resim içerir. O zaman etiket:

   < IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

   ... tarayıcıya önce logotip.gif dosyasını indirmesini ve ardından alındığında logotip.jpg dosyasıyla değiştirmesini söyleyecektir.

   Grafiklerin yüklenmesini hızlandırmanın başka bir yolu, özellikleri kullanarak grafiklerin yerleştirileceği dikdörtgen alanın boyutunu ayarlamaktır. GENİŞLİK(genişlik) ve BOY UZUNLUĞU(yükseklik) piksel cinsinden ölçülür. Bu öznitelikleri belirtirseniz, tarayıcı önce grafikler için alan ayırır, belge düzenini hazırlar, metni görüntüler ve ancak bundan sonra grafikleri yükler. Tarayıcının, belirtilen boyuttaki çerçevelere sığdırmak için görüntüyü küçülttüğünü veya uzattığını unutmayın. Bir görüntünün boyutunu belirtmeye bir örnek:

   < IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

   Grafikler genellikle metinle birlikte kullanılır, bu nedenle metin ve grafikleri hizalama görevi ortaya çıkar. Bu görev, öznitelik kullanılarak gerçekleştirilir. HİZALAMA etiket çeşitli argümanlar kullanarak. Örneğin, metnin resmin etrafında sağa veya sola akmasını isteyebiliriz. Genellikle resim, çirkin olabilen metne yakın gömülür. Bunu önlemek için çizimin etrafında boş kenar boşlukları ayarlayabilirsiniz. Alanlar, nitelikler kullanılarak oluşturulur VSPACEüst ve alt kenar boşlukları için ve UZAY etiketteki kenar boşlukları için ... Bu öznitelikler için argümanlar, piksel cinsinden kenar boşluklarının boyutunu belirten sayılar olarak belirtilir. Grafiklerin etrafındaki metin akışını iptal etmek için etiketini kullanın.
   .

   Aşağıdaki etiket logotip.jpg dosyasından sağa doğru grafik akışını ayarlar (resim metnin solunda olacaktır):

   < IMG SRC = "logotip.jpg" ALIGN = LEFT >

   Resmi metnin sağına yerleştirmek istiyorsanız, özniteliğe ihtiyacınız vardır. HİZALAMA bir argüman ata SAĞ:

   < IMG SRC = "logotip.jpg" ALIGN = RIGHT >

   Resmin etrafındaki alanları ayarlamak için aşağıdaki gibi bir etiket yazmanız gerekir:

   < IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

   Burada 20 ve 10 sayıları alanların boyutlarını belirler.

   Bir örnek düşünelim paylaşmak grafikler ve metinler. Not Defteri'ni açın ( Metin düzeltici Not Defteri) Windows. Yukarıda tartışılan etiketleri kullanarak içine HTML kodu yazın. Aşağıda bazı metin ve grafik çıktıları veren bir program bulunmaktadır. Sahip olduğunuz dosyalardan herhangi biri grafik dosyası olarak kullanılabilir. Bu logotip.gif dosyasını kullanır.

   < HTML >

   < HEAD >

   < TITLE >1. Egzersiz< / TITLE >

   < / HEAD >

   < BODY BGCOLOR = "YELLOW" >

   < IMG SRC = "logotip.gif " ALIGN = LEFT >

   < H1 >Metin sağa doğru grafikleri sarar< / H1 >

   Pirinç. 657... Metin sağdaki resmin etrafını sarar

   Sayfadaki görüntülerin (ve diğer öğelerin) hassas bir şekilde konumlandırılması için geniş fırsatlar, tablolar ve stiller... Bunlar HTML öğeleri daha sonra tartışılacaktır. Örneğin, görünür çerçevesi olmayan bir tablo tanımlayabilir ve bu tablonun hücrelerine resim, metin ve diğer öğeleri yerleştirebilirsiniz.

   Telif hakkı © 2021 win-keys.ru - Windows işletim sistemi hakkında her şey