22 Haziran 2016 Çarşamba

HTML Ders 4:Resim ve multimedya dosyalarını kullanmak

<HR> Etiketi ile Çizgi OluĢturma
Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde,
belirtilen parametrelere göre yatay bir çizgi çizilmesini
sağlar. Bu etiketin kapanıĢıĢ çifti yoktur. Pencere
boyunca çizgiyi çizer ve iĢlevi biter. Parametreleri
Ģunlardır;
 Width : Çizginin geniĢliğini ayarlamak için
kullanılır.
 Size : Çizginin kalınlığını ayarlamak için
kullanılır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
69
 Color : Çizginin rengini ayarlamak için
kullanılır.
 Align :Bu parametre right,left ve center değerlerini
alabilir. Çizginin sayfadaki
yatay konumunun sola, sağa veya ortaya
hizalanmasını sağlar.
Örnek:
<HR><p> Türk Milli Takımı Kadrosu </p>
<HR width=400><p> Türk Milli Takımı Kadrosu </p>
<HR size =12 color=‖#cccccc‖><p> Türk Milli Takımı
Kadrosu </p>
Resim ve Multimedya Dosyalarını Kullanmak
Belgeye resim, video, ses dosyaları eklemek normal
içerik eklemekle aynı değildir. Örneğin bir tablo içine
istediğinizi yazıp; belgeyi açtığınızda bu yazıyı
görebilirsiniz. O metin belge içeriğinin bir parçası
durumundadır. Ama iĢ resim, ses ve video dosyalarına
gelince bu aĢamada iĢ değiĢir ve HTML sayfasında
dosyanın bulunduğu yeri belirtmeniz gerekir.
Bu iĢlem için URL adreslerinden faydalanılır. Belge
metinleri begenin içindeki yer alırken resim vs dosyaların
kendileri değilde sadece URL adresleri HTML sayfasında
yer alır. Web server böyle bir bağlantı gördüğü anda ilgili
dosyayı kontrol eder ve bulursa talepte bulanan
tarayıcıya iletir. Tarayıcılar, resim formatı olarak JPG,
GIF, PNG türlerini desteklerler.
<HTML>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
70
<HEAD>
<TITLE>ÖRNEK SAYFA</TITLE>
<META http-equiv="Content-Type"
content="text/html;charset=windows-1254">
</HEAD>
<BODY text="#0000CC">
<DIV align="center"><IMG src="img/logo1.jpg"
alt="Logo resmi"></DIV>
<H1 align="center">Fenerbahe Spor Kulübü<BR>
2006-2007 ġampiyonu</H1>
</BODY>
</HTML>
IMG etiketinin çeĢitli parametreleri vardır. Bunlar
 ALT : Resim için alternatif metin belirtir. Eğer
kullanıcı tarayıcısını resimleri göstermemeye
ayarlamıĢsa, tarayıcı resim gösterme kapasitesine
sahip değilse veya en önemlisi eğer resim verilen
adreste yoksa bu metin ekranda görüntülenir.
 WIDTH: Resmin ekranda görüntülenecek
boyutunu belirtir. Belirtilmez ise orijinal boyutunda
gösterilir. Farklı boyut verilirse resim fiziksel
olarak etkilenmez sadece ekranda gösterilirken
yeniden boyutlandırılır
 HEIGHT: Resmin ekranda gösterilecek yüksekliğini
belirtir. Belirtilmez ise orijinal boyutunda gösterilir.
Farklı boyut verilirse resim fiziksel olarak
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
71
etkilenmez sadece ekranda gösterilirken yeniden
boyutlandırılır
 BORDER: Resim için bir çerçeve çizilmesini sağlar.
 ALIGN = Resmin hizalamasını belirtir. LEFT ile
sola, RIGHt ile sağa, CENTER ile ortaya hizalanır.
<IMG src="img/logo1.jpg" alt="Logo resmi">
img klasörü içindeki logo1.jpg dosyasını sola hizalı olarak
görüntüle. Alternatif metin olarak gerekirse ―logo resmi‖
metnini kullan.
<IMG src="img/logo2.jpg" width="200" height="180">
<IMG src="img/logo2.jpg" width="100" height="90">
<IMG src="img/logo2.jpg" width="50" height="45">
Resimler aynı zamanda link verme iĢlemi için
kullanılabilirler.Bu konu ilerleyen kısımlarda iĢlenmiĢtir.
Marquee ile Resim Ve Metin Kaydırma
Marque etiketi verilen parametrelere göre bir metnin
yada resmin bir yerden bir yere verilen yönde ve hızda
hareket ettirilmesi için kullanılır. Parametreleri;
 Direction : Bu parametre right,up,down
değerlerinden birisini alır ve buna göre içerğin
hangi yöne kayacağı belirlenir. Up yukarı, right
sağdan, down ise aĢağı doğru kaymayı
gerçekleĢtirir.
 Behavior : DavranıĢla ilgili bir parametredir.
Alternate değeri verilirse yazılar kaybolmadan
pencere içinde gider gelir. YaĢı yetenler Kara
ĢimĢek filmindeki arabanın önünde sağa sola giden
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
72
ıĢığı hatırlayacaktır. Bu iĢlem aynı etkiyi
vermektedir.
 Bgcolor : Kayan yazıların arka plan rengini
belirler.
 Height : Yazının kayacağı alanın yüksekliği
 Width : Yazının kayacağı alanın geniĢliği
 Loop : Yazının kaç kez kayacağı belirlenir.
Daha sonra da yazı durur.
 Scrolldelay : Kaydırma hızı, iki hareket
arasındaki süreyi ms cinsinden belirtir
 Srollamount: Kayan yazının bir defada kaç piksel
hareket edeceğini belirtir.
Marquee aslında Internet explorer‘a özgü bir etiket olup
diğer tarayıcılar tarafından kerhen desteklenmektedir.
KiĢisel tecrübelerime göre marquee etiketi çok dikkatli
kullanılmalıdır. Mutlaka diğer tarayıcılar ilede
denenmelidir. Özelikle alternate parametresi farklı
tarayıcılarda farklı davranmaktadır. Bu bakımdan
dikkatli olup tarayıcı uyumunu maksimumda
tutulmasında fayda vardır.
Marquee en çok haber baĢlıklarının dar bir alanda geçiĢ
yapması için alandan tasarruf ve vurucu etki açısından
kullanılır. Sayfaya bir nebze olsun hareket katar. Ancak
ne olursa olsun sayfada 4-5 tane her biri ayrı yöne kayan
marquee etiketi çok berbat bir dizayna sebep olur.
<MARQUEE BEHAVIOR=tip BGCOLOR=renk
DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
73
SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n
WIDTH=n>
Resimleri Kullanırken Dikkat Edilecekler;
1. ĠĢin durumuna göre PNG, GIF KPG kullanımına
karar verilmelidir. GIF dosyaları sadece 256 renge
kadar desteklerler. Ama daha keskin görünürler.
JPG resimler isedaha az yer kaplarlar ancak kayıplı
bir format olduğundan resimde hassasiyet kaybı
olacaktır. PNG ise GIF formatının lisans sorunlarına
çare olarak geliĢtirilmiĢ gir formattır. Ancak IE6
sürümü transparan PNG resimlerle sorunludur.
2. Büyük resimleri kullanmaktan gerekli olmadıkça
kaçınmalıdır. Hiç kimse dakikalarca bir resmin
yüklenmesini beklemez. Resim kendisi için çok
önemli ise ayrı tabii. ĠĢte bu yüzden her zaman
resimlerin boyutunun küçük, miktarının az
utulması tavsiye edilir.
3. Eğer büyük resimler kullanmak zorunlu ise,
bunların JPEG formatına çevrilip ve kalitesinin
düĢürülmesi tavsiye edilir. JPEG resimler daha hızlı
yüklenirler.
4. Siteye her girenin en son tarayıcı ve Windows
kullandığı düĢünülmeden, herkes için kod
yazılmalıdır.Resimlere her zaman ALT tagı
kullanılarak alternatif metinler verilmelidir. Böylece
resim özelliğini kapatanlar yada metin bazlı tarayıcı
kullananlarda o ekranda resim olduğunu
görebilsinler.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
74
5. GIF ve PNG dosyaları kullanıken "Interlaced" haline
getirilmeleri daha uygun olacaktır. Interlace tipli
resimler kademe kademe yüklenir ve yavaĢ yavaĢ
netleĢerek resmi daha hızlı yükleniyormuĢ gibi
gösterir. Aksi tadirde resmin tamamı yüklenmeden
görüntülenmeyecektir.
Video ve Ses Dosyalarının Kullanımı
Eğer sayfa yüklendiğinde bir ses dosyasının çalınması
istenirse <BGSOUND> etiketi kullanılabilir.
<BGSOUND SRC='ses.wav.mid' LOOP=5>
Bu Ģekilde yüklene ses sürekli aynı olacak ve
durdurulması istendiğinde bir iĢlem yapılamayacaktır.
ĠĢte bu yüzden bu yöntem çok önerilmez. Ama dinamik
bir dil yardımı ile ses dosyası rastgee değiĢecek Ģekilde
bir iĢlem yapılırsa daha iyi bir etki bırakabilir.
Video dosyası göstermek içinse <Object> etiketinin
kullanımı gerekir.
Dikkat edilecek nokta desteklenen uzantılardır.
Ayrıca kullanıcı tarafında gerekli codeclerin yüklü
olup olmadığınıda hesap etmek ve çok nadir
bulunan formatlardan kaçınmak gerekir.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013  alıntıdır.

Hiç yorum yok:

Yorum Gönder