Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

Resimler. Resimler  Resim seçiminde, seçti ğ imiz resmin gif yada jpg formatında olması zorunlulu ğ u dı ş ında herhangi bir kısıtlama yok. (telif hakları.

Benzer bir sunumlar


... konulu sunumlar: "Resimler. Resimler  Resim seçiminde, seçti ğ imiz resmin gif yada jpg formatında olması zorunlulu ğ u dı ş ında herhangi bir kısıtlama yok. (telif hakları."— Sunum transkripti:

1 Resimler

2 Resimler  Resim seçiminde, seçti ğ imiz resmin gif yada jpg formatında olması zorunlulu ğ u dı ş ında herhangi bir kısıtlama yok. (telif hakları kanunu dı ş ında tabi)  GIF (Graphics Interchange Format) genellikle küçük resimler ya da hareketli animasyonlar için kullanılır. Gif sıkı ş tırıldı ğ ında resmin kalitesinde bozulma olmaz.  JPEG Genellikle büyük ebatlardaki resim formatıdır. Jpeg resimlerini sıkı ş tırdı ğ ımız ölçüde kalitesinde azalma olur. Yalnız bu bozulmalar insan gözü ile pek belli olmaz.  Not: Yeni browserların destekledi ğ i yeni bir üçüncü tip resim formatı da PNG (Portable Network Graphics). Png formatı, Gif’in yerine geçebilir. Bu format hakkında daha detaylı bilgi almak için adresine bakabilirsiniz.

3 Resimler  Resim ekleme i ş i gayet kolay. Yapmamız gereken browser'a sayfaya koyaca ğ ı resmin nerede oldu ğ unu göstermekten ibaret. Her ne kadar ş art olmasa da resmin pixel cinsinden en ve boy uzunlu ğ unu belirtmeniz sizin faydanıza olacaktır. Kullanaca ğ ımız etiket ş u ş ekilde olacak;

4 Resimler Etiketinin Özellikleri HTML ’nin ço ğ u taglarından farklı olarak etiketinin kapama etiketi yoktur. Bazı özellikleri ş unlardır;  src: resmin bulundu ğ u dosya ve yol ismi  alt: Resim göstermeyi desteklemeyen tarayıcılar ya da resim yüklenirken resmin yerinde gözükecek olan metindir.  align: Resmin sayfada farklı hizalamada kullanılır. Left, right, top, middle veya bottom olabilir.  hspace: Resmin etrafındaki yatay bo ş luk  vspace: Resmin etrafındaki dikey bo ş luk  height: pixel olarak resmin yüksekli ğ i  width: pixel olarak resmin geni ş li ğ i  border: Resmin etrafındaki çerçeve kalınlı ğ ıdır. “0” de ğ eri verilerek çerçeve kaldırılabilir. (Bir resme hyperlink verildi ğ inde bu iyi bir yoldur. Neden?)

5 Resimler  Örne ğ in bu sevimli kediyi sayfamıza ekleyelim, peki i ş te size bir soru: bu resmin nerede oldu ğ unu browser'a nasıl izah ederiz?  Diyelim ki resmimizin adı kedi.gif eni 65, boyu da 91 piksel, e ğ er bu resim html sayfamızla aynı dizinde duruyorsa sorun yok, kod aynen ş u ş ekilde olmalı: 

6 Resimler  Fakat siz diyorsunuz ki; benim birden çok eklemek istedi ğ im resmim var ve bunları resim adlı bir alt klasörde topladım.  Bu durumda browser'ınız o an çalı ş an html dosyasının bulundu ğ u klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer ş u ş ekilde kullanaca ğ ız :  Bölü işaretinin yönüne dikkat edin. Bu Windows'ta ya da Dos'ta dizinler için kullandığımız ters bölü işaretinin tersi, yani normal bölü işareti. HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır. Ziyaret ettiğiniz Internet adreslerini hatırlayın.

7 Resimler  Alt dizine ula ş abildik. Fakat üst dizinlere nasıl ula ş aca ğ ız? O da kolay. Bu seferde html dosyamızı bir klasör olu ş turup o klasörün içine koyalım, mesela klasörün adı da html olsun. Kedicik bulundu ğ u resim klasöründe kalsın. Son durum ş öyle olacak;  c:\html_ders\html\deneme.htm yolunda html dosyamız,  c:\html_ders\resim\kedi.gif yolunda resim var.  İ zlememiz gereken yol ş öyle: browser deneme.htm dosyasının bulundu ğ u klasörü kök dizin kabul etti. Önce bir üst dizine çıkmalıyız ardından resim dizinine girmeliyiz. Üst dizine çıkmayı../ ifadesiyle belirtiyoruz. 

8 Resimler  Bu ş ekilde ardarda../ ifadesiyle istedi ğ imiz kadar üst dizine geçebiliriz.  E ğ er iki üste geçeceksek../../ ifadesi i ş imizi görecektir.

9 Resmi Hizalama  Resim artık sayfamızda, fakat daima hep solda duruyor. Bir hizalama (align) komutuyla resmi sa ğ a, ortaya ya da sola alabiliriz.  Bir metinle kullandı ğ ınızda ise buradaki gibi bir sonuç alabilirsiniz, hizalama komutu resmi bu sefer metni gözönüne alarak hizalayacaktır. 

10 Resimler Etiketinin Özellikleri Align Özelli ğ i Sayfadaki di ğ er elemanlarla resmin nasıl hizalanaca ğ ını kontrol etmek için bu özelli ğ i kullanırız. Varsayılan olarak tarayıcı resmi sola hizalar ve resimden sonra gelen eleman resmin yanına yerle ş ir.  Top: Resimden sonra gelen metinlerin üst satırı resmin üstü ile hizalanır.  Middle: Resimden sonra gelen metinlerin üst satırı resmin ortası ile hizalanır.  Bottom: Resimden sonra gelen metinlerin üst satırı resmin altı ile hizalanır.  Left: Resim sayfanın soluna hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin sa ğ ına yerle ş ir.  Right: Resim sayfanın sa ğ ına hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin soluna yerle ş ir.

11 Resmi Hizalama Örnek: Resim Hizalama Resmin Align Özelliği Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.

12 Resmi Hizalama

13 Etiketinin Kullanımı  Bazen align özelli ğ ine verdi ğ imiz de ğ ere göre metin resmin etrafını çevreler.  Align özelli ğ ini kaybetmesini istedi ğ imiz yerde etiketini kullanırız.

14 Resmi Hizalama Örnek: Resim Hizalama Resmin Align Özelliği Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.

15 Resmi Hizalama

16 Artalana Resim Koyalım  Artalanı renklendirmeyi ö ğ renmi ş tik: ifadesiyle bu i ş i kolayca yapıyorduk. Bu ifadeyi ş u ş ekilde yazarsak resmimiz artalana dö ş enecektir.   background ifadesinin kar ş ısına yukarıda anlattı ğ ımız kurallar çerçevesinde istedi ğ imiz resmi koyabiliriz. Fakat bu sefer en ve boy ifadesini kullanmamıza gerek yok. Seçti ğ imiz resim browser tarafından tüm sayfayı kaplayacak ş ekilde sayfaya yerle ş tirilecektir.

17 Resme alternatif metin eklemek  Resimlere alternatif olarak metin yazılabilir. Ziyaretçi e ğ er browser'ını sadece metinleri göstermek üzere ayarlamı ş sa, resim yerine alternatif açıklama görüntülenecektir.  alt="..." parametresiyle açıklama ekliyoruz, bu açıklama aynı zamanda kullanıcı fare imlecini resim üzerine getirdi ğ inde sarı bir çerçeve içinde görüntülenir. 

18 Resimler  Gökyüzünü artalana koyalım, dünyayı da ortalanacak ş ekilde sayfaya yerle ş tirelim.


"Resimler. Resimler  Resim seçiminde, seçti ğ imiz resmin gif yada jpg formatında olması zorunlulu ğ u dı ş ında herhangi bir kısıtlama yok. (telif hakları." indir ppt

Benzer bir sunumlar


Google Reklamları