8. Grafikler ve Dosya Biçimleri

8.  Grafikler ve Dosya Biçimleri

 

İnternet üzerinden sadece text göndermek klasik e-mail’dan farklı değildir. Grafikleri kullanmaya başladığınızda mesajlarınız çok daha çarpıcı hale gelir.

 

Web’in Grafik Biçimleri

 

Bilgisayar grafikleri için bir çok grafik biçimi vardır. PICT. GIF. TIFF. EPS. BMP. JPEG…

 

Bir browserın grafikleri gösterme yolu, HTML formatında grafik dosyasının yerini ve ismini belirtmektir. Bu format birçok browserın tanıyabileceği bir format olmalıdır.

 

Teknik olarak söylemek gerekirse, resim formatınız platform bağımsız olmalıdır. HTML’in kendisi platform bağımsızdır, sonuçta text karakterleri tüm bilgisayarlar tarafından anlaşılabilir.

 

Bir web sayfasında görüntülenebilen standart format GIF ya da “Graphics Interchange Format”dır. GIF, resim boyutunu sıkıştırır (dolayısıyla boyutlarını küçültür) ve sonucu internette gönderilebilecek ikilik (binary) sisteme çevirir. GIF sıkıştırması, grafik büyük boyutlarda tek renk olursa çok etkilidir; ve bir renk yatayda sürekli olursa sıkıştırma çok daha iyidir.

 

Web de kullanılan diğer dosya formatı JPEG’dir (ismini bu formatı dizayn eden gruptan, Joint Photographic Expert Group, alır). Eskiden, JPEG resimleri browserlarda direk olarak gösterilmez, bunun için yardımcı bir program kullanılır ve resim ayrı bir ekranda görünürdü. Bugün browserların tamamına yakını bu formatı destekler.

 

JPEG sıkıştırması fotoğrafik resimlerde genellikle çok etkilidir. Bazen dosya boyutunu 1/10 a kadar düşürür.

 

Grafik kullanırken akılda tutulması gereken bazı noktalar

 

Artık web sayfanızı tasarlamaya başladığınıza göre, resimlerinizi GIF ya da JPEG formatında kullanmayı öğrenmelisiniz.

 

  • Büyük ve çok sayıda resim sayfanızın mükemmel görünmesini sağlayabilir fakat bu resimlerin yüklenmesini bekleyecek kullanıcılar için sonuç sıkıcı ve yorucu olur. Bir tavsiye olarak, resimlerinizin boyutlarını 100k’dan  az tutmanız iyidir. Küçük boyutlar her zaman iyidir.
  • Grafik boyutlarını çok büyük tutmamanız (genişlik 480, yükseklik 300 pixeli genelde geçmemeli) iyidir, sonuçta sayfanızı görüntüleyenlerin ekran boyutları her zaman 21 inch olmaz! Verdiğim boyutların üzerindeki görüntüleri ekranda görebilmek için genelde ekranı sağa-sola ya da yukarı-aşağı kaydırmak gerekir.
  • Macintosh bilgisayarlarında birçok koyu ton Windows bilgisayarlarında görünmez.
  • Tüm resimleri bir anda göstermek yerine bu resimlere bağlantılar (link) koymak daha iyidir, bazen internete yavaş bağlantısı olanlar bu resimleri görüntülemeyerek zaman kazanmak isteyebilirler.
  • Tek bir resim (mesela bir düğme) sayfanın bir çok yerinde kullanılabilir. Bu durumda browser her defasında resimi baştan yüklemek yerine ilk yüklemeden sonra geri kalan yerlerde bunu hafızadan yükler.
  • En önemlisi, kullanacağınız resimin o sayfa için gerekli olup olmadığından emin olun. Böylece gereksiz resimlerin yüklemeyi yavaşlatmasını engellemiş olursunuz.

 

Büyük resimlerden oluşmuş ve güzel görünen bir sayfa tasarlamış olabilirsiniz, fakat sayfanızı görüntülüyecek insanlar yavaş bir modemden ve yavaş bir hattan sayfanıza ulaşmaya çalışıyor olabilir.

 

Sayfanız için grafikler bulmak

 

Şimdi, tasarladığınız sayfa için bir kaç resim bulmanın tam zamanı. İnternete girip konuyla ilgili biraz araştırma yapabilirsiniz. Sayfanız için yararlı olabilecek birkaç resim bulmaya çalışın. Deneyebileceğiniz bir kaç yer: http://www.yahoo.com, http://altavista.digital.com

 

 

8a. Resim Kullanımı

 

Resimleri Gömmek için HTML Belirteçleri

 

Gömülen resim, bir web sayfasının texti ile birlikte görülen

resimdir. Buradaki “Büyük M” harfi gibi.

 

Gömülen resim için HTML belirteci:

 

<img src=”dosyaismi.gif”>

 

Buradaki dosyaismi.gif, HTML dökümanınızın bulunduğu dizinde bulunan grafik dosyasıdır. “gömülen” kelimesiyle kastımız, bir browser bu resimi textlerin arasına yerleştirir.

 

Yukarıda “Büyük M”nin yanındaki yazıyla aynı satırda olduğuna dikkat edin. Eğer bu resimin kendi başına bir satırda olmasını isteseydik ne yapardık? Resmin kendi başına bir satırda görünmesini sağlamak için,

yanlızca belirtecinin başına bir paragraf belirteci yerleştirin:

 

<p> <img src=”dosyaismi.gif”>

 

Text ve Gömülen Resimin Düzeni

 

<img…> belirteciyle bazı özellikleri kullanarak text ve resim arasında nasıl bir düzen olmasını istiyorsanız ayarlayabilirsiniz. <img> belirtecinin içine yerleştirilen align özelliği sayesinde aşağıdaki efektleri yapabilirsiniz:

 

  1. 1.   align=top

 

            <img align=top src=”dosyaismi.gif>

           

Yazı buraya gelecek. Dikkat ederseniz, ilk satırdan sonraki yazı    

boşlukları dolduruyor.

 

  1. 2.   align=middle

 

<img align=middle src=”dosyaismi.gif”>

 

Yazı buraya gelecek. Bu sefer “align=middle” yani “orta” dediğimiz

           için yazı grafiğin ortasından devam ediyor.

 

  1. 3.   align=bottom (normal)

 

            <img align=bottom src=”dosyaismi.gif”>

 


 

Yazı bu sefer buraya gelecek. “align=bottom” demekle yazının en

 

alt kısımda olacağını belirttik.

 

HTML Dökümanımıza Resim Yerleştirelim

 

Bu çalışmada, üzerinde çalıştığımız dökümana bir giriş resmi koyacağız.

 

  1. 1.   Çalışmanızı, açık değilse tekrar açın.
  2. 2.   Text editörünüzde volkanlar.html dosyasını açın.
  3. 3.   <h1>Volkanlar Sayfası<h1> başlığının üzerine şunu yazın:

 

<img src=”lava.gif”>

 

Bu belirteç, sayfanızın en üstüne daha önce bulduğunuz volkan resimini yerleştirir. “lava.gif”, bu dosyanızın ismidir; eğer dosyanızın ismi değişikse, “lava.gif” yerine o ismi yazmalısınız.

  1. 4.   Dosyanızı kaydedin ve browserınızda tekrar yükleyin.

 

NOT: Dikkat etmeniz gereken nokta, lava.gif ya da kullandığınız resim dosyası HTML dökümanınızla aynı dizinde olmalıdır. Eğer değilse, dosyanın bulunabileceği yerin tam yolunu yazmalısınız.

 

Resimi yerleştirdiğinizde aklınıza neden resim belirtecinden sonra <p> belirtecini kullanmadığınız gelebilir, bunun sebebi resim belirtecinden hemen sonraki belirtecin bir başlık <hN> belirteci olmasıydı; daha önce gördüğümüz gibi bir browser başlık belirteçlerinden önce ve sonra bir satır boşluk bırakır (paragraf belirtecine gerek kalmaz).

 

Alt=”…” Özelliği

 

Eğer sayfanız yanlızca text tanıyan bir browser kullanan kullanıcılar tarafından görüntülenecekse, bu kullanıcılar tarafından hiç bir resim görüntülenemez. Ya da bazen, kullanıcılar daha hızlı erişim için browserın resimleri yükleme özelliğini kapatırlar. Bu durumda <img…> belirtecinde kullanacağınız “alt” özelliği resimin yerine, orada bir resim olduğunu belirten bir boşluk koyarlar.

 

Bu gibi durumlarda, yanlızca text kullanan bir browser sizin yaptığınız sayfanın başlangıç kısmını şu şekilde görürler:

 

[IMAGE]

Volkanlar Sayfası

Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız.

 

Bu sayede kullanıcı, sayfanın başında bir resim olduğunu anlar. Buna ek olarak <img…> belirtecini bu gibi durumlarda buraya boşluk gelmesi yerine bir text gösterecek şekilde düzenleyebilirsiniz. Mesela, düzenlediğimiz sayfada bu gibi durumlarda resimin yerine “Volkanlar üzerine bir inceleme” yazısının gelmesini sağlayalım. Bunun için textinizde şu değişikliği yapın:

 

<img alt=”Volkanlar üzerine bir inceleme” src=”lava.gif”>

 

Buradaki alt=”…”  özelliği gerekli olduğunda resimin yerine verdiğiniz textin yerleşmesini sağlar. Çalışmamızın bu bölümü artık yanlız text özelliği olan browserlarda şu şekilde görünür:

 

Volkanlar üzerine bir inceleme

Volkanlar Sayfası

Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız.

 

Yükseklik (height) ve genişlik (width) özellikleri

 

<img…> belirtecinize dahil etmek isteyeceğiniz başka iki özellik de “height” ve “width” özellikleridir. Bunlar resimin boyutlarını pixel olarak belirlemenizi sağlar. Neden? Normal olarak browserınız bu boyutlara kendi karar vermek zorundadır, eğer boyutları siz belirlerseniz sayfanızın yüklenmesi daha hızlı olabilir. Ayrıca, bazen HTML 2.0 standratlarını kullanan kullanıcıların başına gelen browserlarının çökmesi sorununu engelleyebilirsiniz.

 

Bu özelliği eklemek için gerekli biçim şöyledir:

 

<img src=”dosyaismi.gif” width=X height=Y >

 

Burada X resimin genişliği, Y de yüksekliğidir (pixel cinsinden).

 

Bizim kullandığımız “lava.gif” dosyasının boyutları 300 pixel genişlik ve 259 pixel yüksekliktir. Bu durumda son olarak şu değişikliği yağmalıyız:

 

<img alt=”Volkanlar üzerine bir inceleme” src=”lava.gif” width=300 height=259>

 

NOT: Belirtecin içinde kullanılan özelliklerin sırası önemli değildir.

 

Üzerinde çalıştığımız dosyanın son görünüşü şöyle olmalı:

 

 

 

Volkanlar Sayfası

 

Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız.

 

Giriş

 

Volkan, bir gezegenden erimiş kaya veya mağmanın yüzeye çıktığı noktadır. Bu çıkış, büyük bir patlama ile olabileceği gibi sessiz ve yavaş bir şekilde de olabilir

 

Volkanlar, insanlardan çok önce dünya tarihinde yer almışlardır. İnsanların birkaç milyon yıllık tarihini, dört milyar yıl ile karşılaştırın.

 

Volkan Terminolojisi

 

Volkan araştırmaları, ya da Volkanoloji, birçok garip terim içerir.

 

  • kaldera
  • vesikularite
  • pahoehoe
  • reoloji
  • lahar

 

St Helen Dağı

 

Long Valley

 

Mars’ta Volkan Bölgeleri

 

Araştırma Projesi

 

Göreviniz, yukarıdaki listenin dışında son yüz yıl içinde faaliyete geçmiş bir volkan hakkında bilgi toplayıp rapor etmek. Raporunuzda şunlar olmalı:

 

1.Volkanın çeşiti

2.Jeografik konumu

3.En yakın şehrin ismi, popülasyonu, ve volkana uzaklığı

4.En son faaliyeti ve verdiği hasar.

5.Faaliyetle birlikte görülen olaylar (toprak kaymaları, depremler, vs.)

 

Sonra, bu volkanın yol açtığı genel hasarlar üzerine bir gözlem ve bunların azaltılması için neler gerektiği konusunda bir paragraf yazın.

 

Referanslar

Bir cevap yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.