HTML Multimedya

ASP, PHP, PERL, CGI, HTML gibi web programcılık dilleri hakkında yardım, tartışma ve paylaşımlar.
Cevapla
Kullanıcı avatarı
UnreaL
Fast Friend
Fast Friend
Mesajlar: 207
Kayıt: 24-12-2005 17:26

HTML Multimedya

Mesaj gönderen UnreaL »

Multimedya

Geldik bir başka zevkli bölüme. Daha önceki bölümlerden birinde <img src="..."> kod ve parametresiyle resim dosyalarının nasıl yerleştirildiğini görmüştük.

Anime Resim Gösterimi

Animasyonlu resimlerin de görüntülenmesi aynı kodla (<img>) sağlanabilmektedir.

Kod: Tümünü seç

<html>
<head>
  <title>Anime Gif Dosyası</title>
</head>
<body>
<center>
  Bu bir anime gif (animated gif) dosyasıdır:<br>
  <img src="kedi.gif" width="250" border="0">
</center>
</body>
</html> 
Anime gif dosyalarını kendiniz yapabildiğiniz gibi (Flash derslerinde öğreneceksiniz), internetten de araklayabilirsiniz. Bazı web sayfaları size bir çok anime gif örneğini ücretsiz olarak sunmaktadır.

Görüntü ve Ses Programlarını Web Sayfası Üzerinde Çalıştırma


Anime giflerin HTML sayfasında <img src="..."> kodu ile gösterilebilmesi, her türlü animasyon uygulamasının bu kodlarla gösterilebileceği anlamına gelmemektedir. Örneğin Flash dosyalarını (swf dosyalarını) göstermek için <embed src="...">...</embed> (embed; içine koy) kod ve parametresi kullanılmaktadır. Bu <embed> kodu üzerinde biraz daha açıklama yapayım, bu kod HTML sayfalarına program uygulamalarını yerleştirmeye yaramaktadır. Örneğin Macromedia Flash bir vektörel animasyon programıdır ve Flash dosyalarının çalışması için Flash yazılımına ihtiyaç vardır. <embed> kodu bu yazılımın uygulamasını web sayfalarına yerleştirir. Tabi bu sadece grafik veya animasyon programları için değil, ses programları için de geçerlidir. Örneğin aşağıdaki uygulamada wav dosyası <embed> koduyla seslendirilmektedir.

Kod: Tümünü seç

<html>
<head>
  <title>MultiSound</title>
</head>
<body>
  <center>
    Bu bir wav ses dosyasıdır:<br>
    <embed src="gitar.wav" width="450" border="0"></embed>
  </center>
</body>
</html> 
Bu uygulamamız <embed> kodunun neye yaradığını daha güzel anlatıyor. Tabi web sayfalarına <embed> kodu ile ses yazılımlarını yerleştirmeden, seslendirmek de mümkün.

Sesli Sayfalar

Web sayfaları yüklenirken ses efekti veya müzik koymak isteniyorsa, <bgsound src="..."> kodu ve parametresi kullanılır. Aşağıdaki uygulamamıza bakalım, sayfa ses efektiyle açılıyor.

Kod: Tümünü seç

<html>
<head>
  <title>Başlangıç Ses Efekti</title>
</head>
<body>
<center>
  Bu bir wav ses dosyasıdır:<br>
  Dinlemek için speaker'ın sesini açın lütfen...
  <bgsound src="yep.wav">
</center>
</body>
</html> 

Nasıl? Şu ana kadar öğrendiklerinizle çok güzel, tanıtım üzerine bir web sitesi inşa edebilirsiniz. Sesin sadece başlangıçta çalmasını değil, sürekli olarak veya istediğiniz sayıda tekrarlanmasını isteyebilirsiniz. Bunun için loop="..." parametresi atanır. Eğer loop="5" ise ses efekti 5 defa tekrarlanıp sona erer. Eğer ses efektinin devamlı olarak tekrar etmesini istiyorsanız loop="-1" veya loop="infinite" (infinite; sonsuz) değerlerini kullanırız. Şimdi hem sesli, hem de animasyonlu bir web sitesi yapalım, yani tam bir multimedya örneği:

Kod: Tümünü seç

<html>
<head>
  <title>Asker Kedi</title>
</head>
<body>
<center>
  Bu bir Multimedia uygulamasıdır:<br>
  <img src="kedi.gif" border="0" width="250">
  <bgsound src="asker.wav" loop="-1">
</center>
</body>
</html> 

Kayan Yazılar

HTML'in kendisine ait (başka araç kullanmadan) yazılara animasyon veren bir kodu var: <marquee>...</marquee>. Bu kod arasındaki yazıların sağdan sola doğru yavaşça kaymasını sağlıyor. Tabi yazıların yönünü değiştirebiliyoruz; bunun için direction="..." parametresine right (sağ) veya left (sol) değerleri atanır. Hangi yönü seçersek, yazılar o yöne doğru kayar.

Kod: Tümünü seç

<html>
 <head>
  <title>Marquee kodu</title>
</head>
<body>
<center>
  Bu bir <b>marquee</b> uygulamasıdır:<br><br>
  <marquee direction="right">Tak etti canıma bu maskeli balo ve onun sahte yüzleri...</marquee><br><br>
  <marquee direction="left">Tak etti canıma bu maskeli balo ve onun sahte yüzleri...</marquee>
</center>
</body>
</html> 
Marquee'nin yaptığı hareketin şeklini de değiştirebiliriz. Bunun için behavior="..." (İngiliz İngilizcesindeki gibi yazılırsa (behaviour) çalışmaz; davranış anlamına geliyor) parametresine scroll, slide veya alternate değerlerini verebiliyoruz. Ayrıca yazıların geçtiği satırın rengini bgcolor="..." parametresi ile belirleyebiliyoruz:

Kod: Tümünü seç

<html>
<head>
<title>Marquee kodunun çeşitleri</title>
</head>
<body>
  <center>
  Bu bir <b>marquee</b> uygulamasıdır:<br><br>
  <b>scroll</b> hareketi:<br>
  <marquee behavior="scroll" bgcolor="#fff8dc">Tak etti canıma bu maskeli balo ve onun sahte yüzleri...</marquee><br><br>
  <b>slide</b> hareketi:<br>
  <marquee behavior="slide" bgcolor="#ffd700">Tak etti canıma bu maskeli balo ve onun sahte yüzleri...</marquee><br><br>
  <b>alternate</b> hareketi:<br>
  <marquee behavior="alternate" bgcolor="#e6e6fa">Tak etti canıma bu maskeli balo ve onun sahte yüzleri...</marquee><br><br>
</center>
</body>
</html> 

Elbette <marquee> kodunun birçok başka parametresi de var, bunların bazılarına kısaca değineyim: loop parametresini burada da kullanabiliyorsunuz. (yukarılarda bir yerlerde anlattım, aynen kullanılıyor) Ayrıca scrollamount="..." parametresi ile yazının rotası üzerinde kaç yazı karakteri kullanılacağını belirleyebiliyor, scrolldelay="..." parametresi ile marquee metninin karakterler arasındaki kayma süresini milisaniye cinsinden tayin edebiliyorsunuz. Bu iki parametreyi kullanarak marquee metninin kayma hızını artırabilirsiniz. (Kısaca açıklamak gerekirse, scrollamount parametresi aşılacak yolun uzunluğunu, scrolldelay parametresi ise birim mesafeyi katetme süresini veriyor. Hızın, yol ve zamana bağlı bir fonksiyon olduğunu sanırım hepimiz biliyoruz, değil mi?)


Volkan Derinbay'a tşkler.
Cevapla
  • Benzer Konular
    Cevaplar
    Görüntüleme
    Son mesaj

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 1 misafir