Ç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:

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

Her durumda, grafik 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 = "адрес_графического_файла" >

Görüntü dosyası adresi, 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 argüman olarak bir grafik dosyasının adresini alan (isteğe bağlı) LOWSRC özniteliğini kullanabilirsiniz. İki grafik dosyası oluşturabilirsiniz: biri (örneğin, logotip.jpg dosyası olsun) şuradan elde edilen görüntüyü içerir. yüksek çözünürlük ve diğeri (örneğin, logotip.gif) düşük çözünürlüklü bir resimdir. 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, nitelikleri kullanarak grafiğin yerleştirileceği dikdörtgen alanı boyutlandırmaktır. GENİŞLİK(genişlik) ve YÜKSEKLİK(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 ondan 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 görüntünün 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.
.

Sonraki 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.

Grafik ve metin paylaşımına bir örnek düşünelim. 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.

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 ayrılmış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.

Neredeyse 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 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 bunu kendiniz belirleyebilirsiniz. bu giriş etiketin kendisinden oluşur , özniteliği (scr) ve bu özniteliğin değeri (konum). Ancak scr özniteliği gerekli olduğundan, bu girdiyi tek bir genel etiket olarak düşünmek daha uygundur. Muhtemelen resim kaynak etiketinin karşılık gelen bir bitiş etiketine sahip 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ıları 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 örneği, alt niteliğinin etiketin içine nasıl eklendiğini gösterir. ... src özniteliğine benzer şekilde, alt özniteliğ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 belirtir. Bu metin, görüntünün kendisine alternatif olarak ekranda görüntülenebildiği için alternatif olarak adlandırılır. 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östermemeleri talimatını 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. Böylece, 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 nitelikler 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.
yükseklik- Piksel veya yüzde olarak belirtilir - Resmin yüksekliğini belirtir
Genişlik- Piksel veya yüzde olarak belirtilir - Resmin genişliğini tanımlar.

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 zaten görmüş olduğunuz 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ı. Aynı görüntüyü 1024x800 çözünürlüğe sahip bir monitörde görüntülerseniz, 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 fazlasının yanılsamasını yaratabilirsiniz hızlı yükleme Görüntüler. Resmin yeniden boyutlandırılıp boyutlandırılmadığına bakılmaksızın, her zaman yükseklik ve genişlik özniteliklerinin değerlerini ekleyin, çünkü bunlar tarayıcıya resmi yerleştirmek için sayfada ne kadar alan ayrılması gerektiği hakkında önemli bilgiler verecektir. 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. Görüntünün çözünürlüğünün (piksel boyutu) sabit kalmasını istiyorsanız piksel değerlerini kullanın.

Metin ve grafikleri hizalayın
Bağlanmak hizalama etiketi 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 satırına 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 özniteliğ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ı dekorasyonu için iyi değildir. Diğer belgelere köprüler olarak başarıyla kullanılabilirler. HTML'de bu kolaydır, çünkü görüntüler metin kutularıyla tam olarak aynı şekilde köprülere dönüşür. Bunu yapmak için, başka bir belgeye bağlantı olması gereken bir web sayfası öğesini çevreleyen bir etiket de uygulamanız gerekir. Bu nedenle, herhangi bir görsele tıkladıktan sonra bir köprüye geçiş yapılacaksa, bu görselin etiketini etiketin içine almak gerekir.

bir>

V bu durumda, bir web sayfası ziyaretçisi imleci resmin üzerine getirdikten sonra, imlecin yanında “Bu benim kendi portrem!” metin mesajı görüntülenir. 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 diğer yaygın kullanımı, bir görüntüyü diğerine 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ükleme bitene kadar 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 minyatür 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 özelliğ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örüntüler ilginç ve ilgi çekicidir, bir ton görsel bilgi taşır 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 izlemeniz gereken bazı yönergeler vardır.

Nasıl daha fazla boyut görüntü dosyası, kullanıcının bilgisayarına indirilmesi daha 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 HTML belgesinin toplam dosya boyutudur. Web sayfasına ne kadar çok resim eklenirse, küçük de olsa, nihai belgenin dosya boyutu o kadar büyük olur. Uygulamak Ön izleme sayfanızı farklı tarayıcılarda kullanın 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 için de geçerlidir ters yön: Görüntüleri web sayfasında sağlanan metin bilgileriyle eşleştirdiğinizden 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 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 sağ 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.

2 numaralı pratik çalışma

HTML belgesine resim ekleme

Amaç. Bir HTML belgesine resim eklemek için temel etiketlere aşinalık, bir belgedeki resimleri dönüştürmek için öznitelikler hakkında bilgi edinme.

Edebiyat. Ders Notları.

3. İşe hazırlık. "Grafikler" konusundaki ders notlarını inceleyin.

Ekipman listesi. Bilgisayar.

Egzersiz yapmak.

5.1. Bir HTML belgesine resim eklemek için temel etiketler hakkında bilgi edinin.

5.2. Görüntüleri dönüştürmek için temel özellikleri keşfedin.

5.4. Web sayfalarındaki resimleri süslemeyi öğrenin.

İşin sırası.

6.1. Bir web sayfasına resim ekleme.

1. aç boya programı ve örneğe göre üç resim oluşturun: her resim ayrı bir dosyada.

Şekil 1 Şekil 2 Şekil 3

Bu dosyaları isimler altında kaydedin blok1.gif, blok2.gif, blok3.gif klasörünüzde.

2. Metin düzenleyici Not Defteri'ni açın ve örneğe göre bir web sayfası oluşturun:

Web sayfası kodu:

algoritma.html.

6.2. Yatay çizgiler ve diğer nesnelerin oluşturulması.

1. Metin düzenleyici Not Defteri'ni açın ve örneğe göre 2 web sayfası oluşturun:

Web sayfası kodunun snippet'i:

3. Alınan belgeyi klasörünüze kaydedin ve dosyaya bir ad verin linii.html.

4. Tarayıcınızı başlatın Internet Explorer... Ortaya çıkan web sayfasını içinde görüntüleyin.

5. İkinci bir web sayfası oluşturun.

Web sayfası kodunun snippet'i:

6. Alınan belgeyi klasörünüze kaydedin ve dosyaya bir ad verin liste.html.

7. Çalıştır internet tarayıcısı Gezgin. Ortaya çıkan web sayfasını içinde görüntüleyin.

Bir görüntü haritasının oluşturulması ve sürünen bir çizginin eklenmesi.

1. Aşağıdaki resmi kullanarak bir web sayfası oluşturun. Masaüstünde, klasörde bulunur Pratik iş HTML tarafından.

2. Fareyi bilgisayarınızdaki belirli bir aygıtın üzerine getirdiğinizde adının görüntülenmesi için bir görüntü haritası oluşturun.

3. Aynı sayfada sürünen bir çizgi oluşturun:

Oynamayı sever misin bilgisayar oyunları, kendini programlamayı sev!

4. Alınan belgeyi klasörünüze kaydedin ve dosyaya bir ad verin carta.html.

5. Internet Explorer tarayıcısını başlatın. Ortaya çıkan web sayfasını içinde görüntüleyin.

7.1. Dosyalar algoritma.html, linii.html, liste.html, carta.html klasörünüzde.

8. Test soruları.

8.1. Bir HTML belgesine resim eklemek için hangi etiket kullanılır?

8.2. Görüntü dosyasının adını belirtmenize izin veren öznitelik hangisidir?

8.3. Hangi nitelikler resmin boyutunu ayarlamanıza izin verir?

8.4. Hangi nitelik, görüntünün konumunu çevreleyen metne göre ayarlamanıza izin verir?

8.5. Hangi özellik resmin etrafındaki kenarlığın kalınlığını ayarlamanıza izin verir?

8.6. ... Resmin solundaki, sağındaki, üstündeki ve altındaki boş alan miktarını hangi nitelikler belirler?

8.7. Görüntü haritaları oluşturmak için hangi etiket kullanılır? Hangi nitelikler kullanılır?

8.8. Hangi etiket tarama satırı oluşturmak içindir?

Ek.

grafik

Grafiklerin bir web sayfasına yerleştirilmesi. Grafik dosya biçimleri

İnternetteki en popüler iki grafik formatı GIF ve JPEG'dir.

Genellikle kullanın:

JPEG - pürüzsüz renk geçişlerine sahip çok karmaşık renk gamına sahip fotoğraflar ve resimler için (uzantıda JPG olarak yazılmıştır).

GIF - logolar, resim yazıları, başlıklar, net renk kenarlıkları olan resimler için.

GIF formatı

Bu formattaki resimler 256 rengi destekler. GIF formatı üç Ek özellikler:

Animasyon. Animasyonlu GIF düzenleyiciyi kullanarak basit bir "çizgi film" oluşturmak kolaydır: tek tek kareler çizin, dizideki gecikme süresini ayarlayın, "filmi döngüye alın" veya kareleri yalnızca bir kez gösterin. Animasyon hazır olduğunda diske normal bir GIF dosyası olarak yazılır. Ancak bu dosya bir değil, tam bir GIF koleksiyonu ve çeşitli yapılandırma bilgileri içerir.

HTML'de basit bir GIF veya hareketli bir GIF belirtmek arasında bir ayrım yoktur.

Şeffaf grafikler. GIF formatı, bir resimdeki bir veya daha fazla rengin şeffaf olarak bildirilmesine izin verir. Bu, kesinlikle dikdörtgen resimlerden kurtulmaya ve çizimi belgeye daha çekici bir şekilde sığdırmaya yardımcı olur:

Geçmeli tarama. Büyük GIF'ler için kullanılır. Çizim, orijinal resmin boyutunda dört parçaya bölünmüştür. İlk bölüm 1, 5, 9 vb. içerir. orijinal görüntünün çizgileri. İkincisi 2., 6., 10. vb. Üçüncüsü 3., 7., 11. vb. Dördüncü - 4., 8., 12., vb.

Tarayıcı ekranda önce resmin ilk bölümünü, ardından üçüncü ve dördüncü bölümünü oluşturur. Görüntünün kademeli gelişiminin etkisi elde edilir.

JPEG formatı

Bu format, fotoğrafların aktarılması için özel olarak geliştirilmiştir. Milyonlarca rengi destekler ve çok yüksek kaliteli görüntüler üretir.

Elbette, yüksek kalite dosya boyutlarına da yansır. Fakat JPEG formatı bir özelliği vardır: JPG editöründe, diske yazarken, ihtiyacınız olan kalite derecesini belirleyebilir ve böylece “kalite-dosya boyutu” çubuğunda dengeleyerek istediğiniz uzlaşmayı sağlayabilirsiniz. Gerçekten de, taranan bir fotoğrafta bir milyon renkten sadece 10.000'ini bırakırsanız, kalan renkleri yakın olanlarla değiştirirseniz, böyle bir değişimi gözle tespit etmek neredeyse imkansız olacak ve dosya boyutu önemli ölçüde azalacaktır.

JPEG formatı, geçmeli GIF'e benzer bir modu destekler. Ancak GIF'in aksine, parçalara bölme çizgilerle değil, resimden tam boyutlu parçaları çıkarmak için kullanılan algoritma ile gerçekleşir. Ayrıca, sonraki her parça bir öncekinden daha kalitelidir. Bu özelliğe sahip JPEG'e aşamalı denir.

eleman

eleman belgenin gövdesine bir grafik resim eklemek için kullanılır.

Sözdizimi:

Ayrıca, eleman görüntünün konumunu çevreleyen metin ve içeriğe göre belirleyen çeşitli nitelikleri destekler ağ genel olarak sayfalar. Görüntü, satırın soluna, sağına, üstüne veya altına hizalanabilir veya pencerenin ortasına yerleştirilebilir.

Öznitellikler:

kaynak(URL'sini belirterek bir grafik dosyasına işaret eder).
Sözdizimi:
alt(resim yerine, türün alternatif bir metnini gösterir, şirket logosu buraya çizilir).
Sözdizimi:
hizalamak(resmin penceredeki konumunu ve hizalamasını ayarlar, aşağıdaki değerleri alabilir: Tepe- üst kenar boyunca, alt- alt kenar boyunca, orta-merkezinde, sağ-sağda, ayrıldı-ayrıldı).

Sözdizimi:

Genişlik(görüntü için pencerede ayrılan piksel cinsinden alanın genişliğini ayarlar).

Sözdizimi:

yükseklik(görüntü için pencerede ayrılan alanın yüksekliğini piksel cinsinden ayarlar).

Sözdizimi:

hspace(resmin sağındaki ve solundaki beyaz alanı piksel cinsinden belirtir).
Sözdizimi:
sınır(resmin etrafındaki kenarlığın genişliğini piksel olarak ayarlar).
Sözdizimi:
uzay(resmin üstündeki ve altındaki beyaz boşluğu piksel olarak ayarlar).
Sözdizimi:
ismap(bir kısmı bağlantılara bağlı olan ve geçişlere izin veren görüntülerin kullanımına izin verir. Bu tür görüntülere MAP haritası denir, bir öğe ile birlikte kullanılırlar. ... Bu durumda, sunucu haritadaki bir tıklamaya yanıt verir).
Sözdizimi:

kullanım haritası ( bazı bölümleri haritalarla ilişkilendirilmiş görüntülerin kullanımına izin verir, bunlar öğeyle birlikte kullanılır

Görüntü haritaları.

eleman

eleman

Sözdizimi:

eleman

eleman bağlamak için tıklayabileceğiniz haritanın etkin alanlarını belirtir. Öğenin bitiş etiketi yok. Harita görüntüleri ile çalışmak uygundur. standart uygulama Windows için - görüntünün BMP formatına dönüştürülmesi gereken Paint düzenleyicisi. Yakınlaştırma modlarında Ctrl + G tuşlarına basarak ve Seçim aracını seçerek, fare işaretçisi ince bir çarpıya dönüştüğünde, imlecin koordinatları bir piksel doğrulukla belirlenebilir. Bu doğruluk, haritanın aktif alanlarının koordinatlarını belirlerken çok faydalı olabilir. eleman çeşitli nitelikleri destekler:

Sözdizimi: URL'si ">

alt(desteklemeyen tarayıcılar için alternatif metni ayarlar) bu ürün).
Sözdizimi:

Başlık(fareyi bu öğenin üzerine getirdiğinizde açılan tarayıcılar için alternatif metin ayarlar).

Sözdizimi:

şekil(haritadaki aktif alanın şeklini ve koordinatlarını ayarlar, aşağıdaki değerleri alabilir: "daire" koordinatları = X, Y, R, burada X, Y, R dairenin merkezinin koordinatlarıdır ve yarıçap, "poli" koordinatları = X1, Y1, X2, Y2, X3, Y3 ..., burada X1, Y1, X2, Y2, X3, Y3 ... çokgenin köşelerinin koordinatlarıdır. bir dikdörtgen ise, sol üst ve sağ alt köşelerini "doğru" koordinatlarını belirtmek yeterlidir = X1, Y1, X3, Y3).
Sözdizimi: Daire"kodlar = X, Y, R >

Örnek Resim - Haritalar:

Web sayfalarını metinden sonra doldurmanın ikinci en önemli bileşeni kuşkusuz, grafik Tasarım. Bunlar çeşitli türde çizimler, fotoğraflar ve hatta belki video kliplerdir. Web sayfalarını görüntülemek için film müziği de kullanabiliriz.
Grafikleri yerleştirerek başlayacağız. Tarayıcılar yalnızca üç tür grafik dosyasını görüntüleyebilir. Bunlar GIF, JPEG ve PNG dosyalarıdır. GIF dosyaları, hareketli görüntüler oluşturmanıza olanak tanır. JPEG dosyaları, fotoğrafik görüntüleri depolamak için yaygın olarak kullanılır. Yeni ortaya çıktı PNG formatı birleştirmenizi sağlar iyi kalite görüntüler ve az miktarda grafik dosyası. Ancak görüntü bir grafik dosyasına paketlendikten sonra, yine de bir şekilde bir Web sayfasına gömülmesi gerekir.

Bunun için etiket uygulanır birçok parametre ile. Bu etiketin bir bitiş çifti yoktur, çünkü görüntüleme kuralı için herhangi bir kapsam oluşturmaz, Web sayfasının içeriğine yalnızca bir grafik görüntü gömer. Aslında, bir grafik görüntü ayrıca bir köprü olabilir veya hatta birkaç köprüyü arkasına gizleyebilir, ancak bu bölümün sonraki bölümünde köprüler hakkında konuşacağız, ancak şimdilik etiketi kullanma kurallarını anlayalım. .

Etiketin ana ve gerekli özelliği src özelliğidir. Bu özelliğin değeri, eklenecek grafik dosyasının adresi veya daha doğrusu URL'sidir. Grafik dosyası aynı Web sunucusunda bulunuyorsa, alt dizinlerdeki yolu da dahil olmak üzere dosyanın tam adını yazmak yeterlidir, yani. resimler içeren resimler dizini ise, grafik resim ekleme etiketi olacaktır. Bunun gibi:

Bu örnekte, pictl.gif adlı bir dosyada bulunan ve sırasıyla images adlı bir dizinde bulunan bir GIF görüntüsünü kullanıyoruz. Eğik çizgilerin, DOS ve Windows ailelerinin işletim sistemlerinin dosya yollarında kullanıldığındakinin tersi yönde eğimli olan eğik çizgiler olduğuna dikkat edilmelidir. Gerçek şu ki, Web sunucuları orijinal olarak dosya sistemini bu tür eğik çizgilerle destekleyen Unix işletim sistemine dayanıyordu. Artık web sitesini barındıran sunucunun hangi işletim sisteminde olduğu önemli değil, tüm yollar aynı şekilde kaydediliyor ve doğru şekilde işleniyor. yazılım sunucu.

WWW geliştirmenin başlangıcında, tarayıcılar yalnızca metin bilgilerini gösteriyordu, hiçbir grafik desteklenmiyordu. Şimdi pratik olarak bulunamadılar, ancak her tarayıcının grafik indirmeyi devre dışı bırakma yeteneği var. Bu nedenle, her zaman resmin alternatif bir metinsel temsilini kullanmalısınız. Basitçe, herhangi bir nedenle tarayıcı tarafından yüklenemezse, resim yerine görüntülenecek bir metin hazırlamanız gerekir. Bu metin etikete eklendi değeri istenen metin dizisi olan ait parametresini kullanarak, yani yaklaşık olarak aşağıdaki yapıyı elde edersiniz:

Grafik görüntüsünün tarayıcı tarafından hala görüntülenmesi durumunda, kullanıcı fare imlecini istenen grafik görüntünün üzerine getirdiğinde, alternatif metin gösteriminin metni bir "ipucu", kısa bir metin istemi biçiminde görüntülenir.

Ancak, bu tür metin istemleri oluşturmak için daha ayrıntılı bir seçenek de vardır. longdesc parametresi, İnternet kaynağının adresini ayarlar. Tam tanım bu grafiğin. Bu parametrenin değeri, elbette, görüntünün açıklamasıyla birlikte kaynağın URL'sidir.

name parametresi, Web sayfasının tasarımının bu öğesini tanımlayan görüntü için benzersiz bir ad belirtmenize olanak tanır. Bu parametre geriye dönük uyumluluk amacıyla tutulur, önceki sürümler HTML standardı. Artık tüm etiketler bu amaç için id parametresini kullanır.

Varsayılan olarak, grafik görüntü, aynı dikey ve yatay boyutlarla tam olarak oluşturulduğu gibi gösterilir. Ancak, resmin boyutunu kendi takdirimize bağlı olarak açıkça belirleme olanağına sahibiz. Bunun için yükseklik ve genişlik parametreleri kullanılır. Boyutların piksel veya yüzde olarak nasıl ayarlanacağını zaten biliyoruz. Yalnızca, tarayıcıların resmin orantılarını koruma eğiliminde olduklarına dikkat edilmelidir, bu nedenle, oranları değiştiren açık bir boyut ayarı tarayıcı tarafından göz ardı edilebilir ve tarayıcı, boyuta mümkün olduğunca yakın olacak boyutları seçecektir. oranlar bozulmadan kullanıcı tarafından belirtilenler. Bu nedenle grafik görseller genellikle Web sayfalarında görüntülendiğinde kullanılacak boyutlarda Web sayfaları için hazırlanır. Ve bir görüntünün farklı boyutlarda birkaç kez görüntülenmesi gerekiyorsa, o zaman birkaç grafik dosyası hazırlamak, görüntülerinizi Web sayfalarının tüm düzenini bozabilecek bir tarayıcıya vermekten daha kolaydır.

Parametrelerin yardımıyla, grafik görüntüyü Web sayfası tasarımının çevresindeki diğer öğelerden ayıracak beyaz boşluk miktarını belirleyebiliriz, yani aslında resmin girintisini ayarlayabiliriz. Bunun için hspace ve vspace parametreleri kullanılır. hspace parametresi yatay dolguyu piksel olarak ayarlar ve vspace parametresi dikey dolguyu ayarlar. Bu parametreler için yalnızca piksel cinsinden mesafeleri gösteren sayısal değerlerin değer olarak kullanılabileceğini unutmayın. Bu parametreler için sıfır değeri yoktur, ancak genellikle her tarayıcı, sıfır olmayan küçük bir değer kullanır.

Ve border parametresi ile resmi çevreleyen sınırın kalınlığını ayarlayabiliriz. Her zamanki gibi, parametre değeri piksel cinsinden kalınlığı gösteren bir sayıdır. Varsayılan, sınırı görünmez yapan sıfırdır.

Grafik nesnesinin çevresinde akan metne göre hizalanmasından da bahsetmek gerekir. Bunun için align parametresi kullanılır. Ön tanımlı bir anahtar kelime grubundan bir anahtar kelime, değeri olarak kullanılabilir. Alt, orta ve üst değerler, resmin etrafında dikey olarak akan metnin ilk satırını konumlandırmak için kullanılır. En üstteki değer onu yukarıya, aşağıya - aşağıya doğru hareket ettirir ve ortadaki değer, satırın dikey olarak ortalanmasına izin verir. Grafiği yatay olarak hizalamak için sol ve sağ değerler kullanılır. Soldaki ilk değer, tahmin edebileceğiniz gibi, resmi, görüntülendiği kutunun sol kenarına ve sağdan sağa kaydırır.

Şimdi bir resmi nasıl konumlandırabileceğimizi ve onu istenen grafiğin etrafında akması gereken metinle nasıl birleştirebileceğimizi örneklerle görme zamanı.

Liste 1.11

"http://www.w3.org/TR/htm!4/strict.dtd">




<р>
Bu, çizimin etrafını saran metindir.
Bu, çizimin etrafını saran metindir.

Bir tarayıcı kullanılarak görüntülendiğinde bu HTML belgesinin görünümü Şekil 2'de gösterilmektedir. 1.11.

Pirinç. 1.11. Liste 1.11'deki dosyanın görüntülenmesinin sonucunu gösteren tarayıcı penceresi

Bu örnekte, temiz bir resim ekleme etiketi kullandık. ek parametreler... Gördüğümüz gibi, resim, etiketi yerleştirdiğimiz ilk cümleden hemen sonra eklenir. ... Aynı zamanda, tarayıcı görünüm penceresinin boyutunu yatay olarak küçültürsek, böylece ilk cümle ve resim aynı satıra sığmaz, o zaman önce cümle görüntülenir ve zaten onun altında resim, basılı olarak basılır. görünümün sol kenarı. Sağında, satırın taban çizgisi resmin alt kenarı ile hizalanacak şekilde onu takip eden metin görüntülenmeye başlayacaktı.

Şimdi resim görüntüleme etiketine bir yatay hizalama seçeneği ekleyelim. Ortaya çıkan kod Liste 1.12'de gösterilmektedir.

Liste 1.12

"http://www.w3.org/TR/html4/strict.dtd">


<р>Bu, çizimin etrafını saran metindir. hizalama = "eft">
Bu, resmin etrafını saran metindir. Bu, çizimin etrafını saran metindir.
Bu, çizimin etrafını saran metindir.

Görüldüğü gibi bu durumda metin tekrar görüntülenmeye başlar, ardından grafik resim sol kenara bastırılır, align parametresi kullanılarak verilen yönergeye göre metnin geri kalanı ekranın sağına yerleştirilir. görüntü (Şekil 1.12), yani metin ondan önce başladığı için görüntü ilk satırı alamaz. Aynısı, hizalama parametresini sağ değeriyle uygularsanız gerçekleşir, ancak resim yalnızca görünümün sağ kenarına yapıştırılır ve metin sol taraftan onun etrafından akar. Tüm değişiklikler bu.

Şimdi dikey hizalamanın nasıl çalıştığına bakalım. Resim etiketine hizalama ayarı eklenmiş olsa da, en dikkat çekici değişiklikler resmi çevreleyen metinde görülür. Bir örnekle dikey hizalama parametresinin etkisini görelim.

Pirinç. 1.12. Liste 1.12'deki dosyanın görüntülenmesinin sonucunu gösteren tarayıcı penceresi

Liste 1.13

"http://www.w3.org/TR/html4/striqt.dtd">




<р>Bu, çizimin etrafını saran metindir. hizalama = "orta">
Bu, çizimin etrafını saran metindir. Bu metin,
hangi çizimin etrafını sarar.
Bu, çizimin etrafını saran metindir.

Bu HTML belgesini oluşturmanın sonucu Şekil 2'de gösterilmektedir. 1.13.

Pirinç. 1.13. Liste 1.13'te dosyanın görüntülenmesinin sonucunu gösteren tarayıcı penceresi

Bu örnekte, dikey hizalamayı ortaya, yani resmin sağındaki boş alanın dikey merkezinde görüntü ekleme etiketi görüntülendikten sonraki metnin ilk satırına ayarladık. Metnin geri kalanı resmin altında görüntülenir. Hizalama parametresini top olarak ayarlarsak, resmin üst kenarının yanında ilk satır görüntülenecektir. Ve alt değeri kullanırken, metnin ilk satırı resmin altına yakın görüntülenecektir. Lütfen tarayıcının yalnızca bir hizalama parametresini tanıdığını, yani dikey veya yatay hizalamayı belirleyebileceğimizi unutmayın. Resmi konumlandırma ve hizalama için yerleşik araçlar yeterli değilse, tabloları kullanarak yerleşim sürecine dönebilirsiniz. Tabloların kullanımına bu bölümün ilerleyen bölümlerinde bakacağız.

Web sayfalarının tasarımında videoları kullanma imkanımız var. Bu video kaynaklarını içeren dosyalar genellikle oldukça büyük olduğundan, kullanımlarına çok dikkat etmelisiniz. Ve uzaktaki bir kullanıcının bunları tarayıcısında görebilmesi için bu dosyayı tamamen makinesine indirmesi gerekecek. Çoğu İnternet kullanıcısı için mevcut olan kanalları kullanarak, böyle bir prosedür oldukça uzun zaman alabilir. Hiçbirimiz bir Web sayfasının yüklenmesini beklemekten hoşlanmayız.

Tarayıcılar genellikle video dosyalarını AVI, Real Video ve Windows media... Ve bir Web sayfasına girişleri aynı etiket kullanılarak yapılır. ... Ancak dunscr parametresi, video dosyasının konumunu belirtmek için kullanılır. Varsayılan olarak, bir Web sayfasına katıştırılmış bir video klip, sayfa tamamen yüklendikten hemen sonra bir kez oynatılır. Ancak, bir klibi oynatma sürecini düzenlemek veya kullanıcıya oynatmayı kontrol etme yeteneği vermek için bazı olanaklarımız var.

etiket ise start parametresini etkinleştiririz, ardından tarayıcının yüklenen video klibi oynatmak zorunda kalacağı olayı açıkça belirtebiliriz. Bu parametrenin değerleri kullanılabilir anahtar kelimeler fareyle üzerine gelin ve dosya açın. Bunlardan ilki, kullanıcı fare imlecini video ekleme için ayrılan alana yerleştirdikten sonra klibin oynatılması gerektiğini belirtir ve ikincisi, oynatmanın HTML dosyası tamamen yüklendikten hemen sonra başlayacağını belirtir. Ancak bu iki seçeneği birleştirebiliriz. Bu durumda, video ekleme etiketi şöyle görünecektir:

Döngü parametresini kullanarak videonun kaç kez oynatılması gerektiğini belirtebiliriz. Bu parametrenin değeri, video klibin tekrarlanma miktarını belirleyen bir sayıdır. Ancak, videonun sabit sayıda tekrar olmadan sürekli olarak oynatılmasını istiyorsak, sonsuz değeri kullanmalıyız. Ve loopdelay parametresi yardımıyla video klibin tekrarları arasındaki zaman gecikmesini ayarlayabiliriz. Bu parametrenin değeri, milisaniye cinsinden süreyi gösteren bir sayıdır. Örnek olarak aşağıdaki kod parçasını kullanarak bu parametrelerin uygulamasına bakalım:

Burada, video klibin web sayfası yüklenir yüklenmez, tekrarlar arasında beş saniyelik bir gecikmeyle iki kez oynatılacağını açıkça belirtiyoruz.

Bu durumda, video dosyasının görüntüsünü kendimiz kontrol ediyoruz. Ancak bu ayrıcalığı web sayfasını yükleyecek olan uzak kullanıcıya da aktarabiliriz. Bunu yapmak için etikete girmelisiniz herhangi bir değeri olmayan kontroller parametresi. Etikette bu parametrenin bulunması, oynatma kontrollerinin Web sayfasında video kliple birlikte görüntüleneceğini açıkça gösterir.

Göz önünde bulundurduğumuz parametreler, video dosyalarının bir Web sayfasının içeriğine doğru şekilde yerleştirilmesi için yeterlidir. Ayrıntılı bir örneği ele alalım (şekil 1.14).

Liste 1.14

"http://www.w3.org/TR/html4/strict.dtd">
.

<р>Düz metin.

Pirinç. 1.14. Liste 1.14'te dosyanın görüntülenmesinin sonucunu gösteren tarayıcı penceresi

Doğal olarak, bir Web sayfasının gövdesine bir video parçası ekleme prosedürü grafik eklemenin özel bir durumu olduğundan, etiket için geçerli olan diğer tüm parametreler video parçası ekleme etiketine uygulanır. , hizalama seçenekleri, açık boyut ve diğerleri gibi.

Web sayfasının ses tasarımı da multimedya özelliklerine aittir. Ancak sesi yalnızca arka plan formu olarak kullanabiliriz, yani uzaktaki kullanıcının Web sayfasını yükledikten sonra bilgisayarında belirli bir ses dosyası oynatılacaktır. Tabii ki, bilgisayarına bir ses kartı takılıysa, yani önce uzaktaki kullanıcının bilgisayarına bir Web sayfası içeren bir HTML dosyası indirilir ve ardından bu Web sayfasının tasarımında kullanılan diğer tüm dosyalar yüklenir, örneğin grafik dosyaları, video - ve ses klipleri olarak.

Bu nedenle, bir Web sayfasını ses reprodüksiyonunun eşlik etmesi için görüntülemek için, etiketi sayfa koduna eklemeniz gerekir. ... Etiket, bir Web sayfasının gövdesine değil, başlığına, yani etiketlerin arasına yerleştirilir. ve... Bu etiket, değeri dahil edilenin URL'si olan gerekli bir src parametresine sahiptir. ses dosyası... Tarayıcıların MIDI ve WAV ses dosyalarını tanıması ve oynatması garantilidir. MP3 ve Real Audio gibi diğer formatların çoğaltılması, yalnızca tarayıcılara ek modüller bağlandığında mümkündür.

Video kliplerde olduğu gibi, loop parametresini kullanarak ses dosyasının kaç kez oynatılacağını ayarlayabiliriz. Bu parametrenin değeri tekrar sayısıdır. Bir ses parçasını sürekli olarak çalmanız gerekiyorsa, "-1" değerini kullanmalısınız, yani bir Web sayfası yüklerken belirli bir ses dosyasının sürekli olarak çalınmasını istiyorsak, aşağıdaki yapıyı kullanmalısınız:

Bu, multimedya kullanımına ilişkin değerlendirmemizi sonlandırıyor ve grafik nesneleri Web sayfalarının tasarımında ve ilk bölümün bir sonraki bölümüne geçin.

Üzerinde şu an Web'deki hemen hemen tüm görüntüler iki biçimdedir: GIF ve JPEG. Bahsetmeye değer üçüncü bir rakip olan PNG formatı, tarayıcı desteği ve dikkati için yarışıyor. Daha öte - kısa inceleme"üç büyük" çevrimiçi grafik formatları. Daha fazla bilgi için, her formatın bölümlerine bakın.

GIF- GraficInter değişiklik Formatı, geleneksel Web dosya formatı olarak adlandırılabilir. Web tarayıcıları tarafından desteklenen ilk dosya formatıydı ve bu güne kadar Web'deki ana grafik formatı olmaya devam ediyor.

Özellikleri aşağıdaki gibidir:

• - 256'dan fazla rengi desteklemez (daha azı mümkündür ve genellikle gereklidir);
• - bir renk paleti kullanır;
• - LZW yöntemine göre bilgi kaybı olmadan sıkıştırma kullanır (PKZIP arşivleyicide kullanılana benzer ve bu nedenle GIF dosyaları gelecekte pratik olarak sıkıştırılmaz);
• - Geçmeli taramayı destekler;
• - bir akış biçimidir, yani resmin görüntülenmesi aktarım sırasında başlar;
• - şeffaf GIF'ler oluştururken kullanılan paletteki renklerden birine şeffaf bir nitelik atamanıza izin verir;
• - uygulamasını animasyonlu GIF'lerin üretiminde bulan birkaç görüntüyü tek bir dosyaya kaydetme yeteneğine sahiptir;
• - Dosyaya yorum eklemenize (örneğin telif hakkı hakkında), görüntü gösterimleri arasındaki gecikmeye vb. izin veren kontrol bloklarını dosyaya ekleme yeteneğini destekler.

Ve şimdi biraz açıklama - bu özelliklerin nelere yol açabileceği. Yazdığımız gibi, GIF 256'dan fazla rengi desteklemez; bu, GIF biçiminde kaydettiğimiz tüm resimlerin açık veya örtülü olarak renk sayısını bu sınıra sığacak şekilde azalttığı anlamına gelir ( farklı programlar değişen derecelerde başarı ile). Ve dolayısıyla sonuç - alırsanız güzel fotoğrafİle yumuşak geçişler ve ince renk tonları, sonra dönüşümden sonra her şey çok daha kötü olacak - gölgeler artık zor olmayacak ve tüm fotoğraf doğal olmayan, gerçekçi olmayan bir görünüm alacak. Bu nedenle, fotoğrafı hala GIF formatında kaydetmeniz ve tüm tonları aktarmanız gerekiyorsa, hilelere gitmeniz gerekir. Örneğin, bir fotoğrafa bir tür sanatsal filtre uygulayabilir ve onu bir çizime dönüştürebilir veya tonlama uygulayabilirsiniz. Ancak çizimleri ve çizimleri bu formatta kaydetmede sorun yoktur, kural olarak iyi sıkıştırılırlar ve çok fazla renk içermezler.

Web'deki en popüler ikinci görüntü formatı JPEG - Joint Photographic Experts Group'tur. 24 bit renk bilgisi içerir. Bu, GIF formatının 256 renginin aksine 16,77 milyon renktir. JPEG, kayıplı sıkıştırma olarak bilinen şeyi kullanır. Bu, sıkıştırma işlemi sırasında görüntülerle ilgili bazı bilgilerin atıldığı anlamına gelir, ancak çoğu durumda görüntü kalitesindeki bozulma zararsızdır ve çoğu zaman fark edilmez bile.

Fotoğraflar veya pürüzsüz renk geçişlerine sahip herhangi bir görüntü, daha küçük bir dosyaya sığabilecek daha yüksek kaliteli görüntüler sunduğundan en iyi şekilde JPEG biçiminde kaydedilir. Ancak, JPEG değil en iyi çözüm tek renkli alanlara sahip grafikler için, çünkü bu biçim renklerde benekli olma eğilimindedir ve sonuçta ortaya çıkan dosya genellikle aynı görüntü için GIF'ten biraz daha büyük olacaktır.

Web'de kalıcı kullanım için rekabet eden üçüncü bir grafik formatı vardır. Bu, bazı avantajlarına rağmen, 1994'ten beri aşağı yukarı gölgede kalan bir PNG - Portable Net work Graphic formatıdır. Tarayıcılar, gömülü grafik olarak PNG'yi desteklemeye henüz yeni başladı, ancak PNG, Web'de çok popüler bir biçim olma potansiyeline sahiptir. Bu yüzden burada "büyük üç"e dahil edildi. PNG, kayıpsız bir sıkıştırma şeması kullanarak 8 bit dizine alınmış renkleri, 16 bit gri tonlamalı veya 24 bit tam renkli görüntüleri destekleyebilir. Bu, GIF'lerden daha yüksek kaliteli görüntüler ve bazen daha az dosya sağlar. Dahası, PNG dosyaları yerleşik gama kontrolü ve değişken şeffaflık seviyeleri gibi bazı harika özelliklere sahiptir (bu, arka plan görüntüsünün yumuşak gölgeler aracılığıyla gösterilmesini sağlar).

Web görüntüleri yalnızca bir ekranda mevcut olduğundan, çözünürlüklerini inç başına piksel (ppi - piksel/perinch) cinsinden ölçmek teknik olarak doğrudur. Çözünürlük için başka bir ölçü birimi - nokta/inç (dpi - dotsperinch), yazdırılan görüntülerin çözünürlüğünü ifade eder ve yazdırma cihazının çözünürlüğüne bağlıdır.

Fakat, grafiklerin gerçek boyutları ekran çözünürlüğüne bağlı olduğundan, inç cinsinden ölçüm Web ortamı için kabul edilemez hale gelir. Tek anlamlı ölçü birimi pikseldir.

72 ppi görüntü oluşturmak pratiktir (bu en iyi yol görüntüleme için), yalnızca piksel cinsinden genel boyutlara dikkat ederek. Web'de grafik oluşturma sürecinde inç kullanmanıza hiç gerek yok. Önemli olan, sayfadaki diğer resimlere kıyasla resmin boyutu ve tarayıcı penceresinin genel boyutudur.

Örneğin, birçok kullanıcı hala 640x480 pikselli 14" ekran kullanıyor. Açılış ekranının tüm ekran alanını doldurmasını sağlamak için, genişliği en fazla 600 piksel yapmak en iyisidir (sağ ve soldaki piksellerin bir kısmının pencere ve kaydırma çubuğu için kullanılacağını varsayarak). Sayfadaki diğer düğmelerin ve resimlerin boyutu, 600 piksel genişliğindeki afişe göre piksel cinsinden ölçülmelidir.

Web'i bugün gördüğümüz şekilde yapan şüphesiz grafiklerdi, ancak bir tasarımcı olarak birçok kullanıcının Web'deki grafiklere karşı bir sevgi ve nefret duygusuna sahip olduğunu bilmelisiniz. Grafiklerin bir Web sayfasının ağ üzerinden aktarılması için gereken süreyi artırdığını unutmayın; büyük miktarda grafik, özellikle standart bir çevirmeli bağlantı kullanarak dışarıyı çevirirken okuyucunun sabrını test edecek olan önemli indirme süreleri anlamına gelir.

V Bu bağlamda, web tasarımcısı için en önemli bir kural vardır: grafik görüntünün dosya boyutu mümkün olduğunca küçük olmalıdır! Bir ağ üzerinden iletilmek üzere tasarlanan görüntülerin oluşturulması, geliştiricilere yükleme sürelerini ciddiye alma sorumluluğunu yükler.