Top

src Tag

  • All
  • Dijital medya
  • Dijital reklam
  • Dijital strateji
  • Eğitim
  • Growth hacking
  • Haber
  • İnceleme
  • Kişisel
  • Kurumsal
  • Markalar
  • Medya
  • Rehber
  • Teknoloji

HTML5 ses dosyaları çalmak için de bir satandart sunmakta.


Web’te ses/audio

Şu ana kadar, web sayfaları üzerinde ses çalmak için bir standart yoktu.

Günümüzde ise, çoğu ses parçası flash gibi eklentilerle çalışmakta. Bununla beraber, tüm tarayıcılar aynı eklentiyi desteklememekte.

HTML5 audio elementi ile bir ses parçası standardı getirmekte.

Audio elementi ses parçalarının çalınmasını sağlar, veya bir ses akışının çalınmasını.


Audio Türleri

Varsayılan olarak, audio elementine uygun 3 tür mevcut:

Tür IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis Hayır Evet Evet Evet Hayır
MP3 Evet Hayır Hayır Evet Evet
Wav Hayır Evet Evet Evet Evet

 


Nasıl Çalışır

Ses çalabilmek için tüm ihtiyacınız olan şey:

<audio src=”song.ogg” controls=”controls”>
</audio>

Control özelliği play, pause, ve volume gibi yani çal, duraklat ve ses gibi kontrol düğmelerini sağlar.

<audio> ve </audio> etiketleri arasına audio elementini desteklemeyen tarayıcılar için uyarı yazsıı konulabilir.

Yukarıdaki Ogg dosyası örneği Firefox, Opera ve Chrome’da düzgünce çalışmaktadır.

Internet Explorer ve Safari’de de çalabilmesi için  türü mp3 olan bir dosya eklemelisiniz.

Audio elementi çoklu kaynağa sahip elementleri kabul etmekte. Source(kaynak) elementleri farklı ses dosyalarına bağlanabilmekte. İlk tanınan formatı çalacaktır tarayıcılar:

 

Tüm <audio> Özellikleri

Web üzerinde video

Şu ana kadar, bir web sayfası üzerinde video göstermenin standardı yoktu.

Günümüzde, flash gibi bir eklenti ile videolar gösterilmekte. Bununla beraber, tarayıcıların hepsi aynı tür eklentilere sahip değiller.

HTML5 video eklemek için bir standart belirlemekte, video elementi ile.


Video Formatları

Varsayılan olarak, video elementince desteklenen 3 tip format mevcut:

Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
  • Ogg = Ogg dosyaları Theora video codec’i  ve Vorbis audio codec’i ile çalışır.
  • MPEG4 = MPEG 4 dosyaları H.264 video codec’i ve AAC audio codec’i ile çalışır.
  • WebM = WebM dosyaları VP8 video codec’i ve Vorbis audio codec’i ile çalışır.

Nasıl çalışır?

HTML5’te video göstermek için, ihtiyacınız olan şey:

<video src=”movie.ogg” controls=”controls”>
</video>

Control özelliği oynatmayı eklemek için, durdurmayı, ve de ses kontrollerini…

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.

Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.


HTML, Resimler/imajlar <img> etiketi ve src özelliği

HTML’de görüntüler <img> tagı ile tanımlanır.

<img> etiketi boştur yani özellik içerir sadece ve kapanış tagı yoktur.

Sayfada bir görüntü göstermek için görüntünün kaynağını src ile yani source ile göstermeniz gerekir. Göstermek istediğiniz resimin url değerini alır src çift tırnak içinde.

Misal;

<img src=”url” alt=”some_text“/>

url yerine nefarkederki.com/resimler/logo.gif, some text yerine de nefarkederk i logosu gibi bir yazı gelebilir. Ek olarak kapanışa dikkat etmelisiniz.

Url resimin depolandığı yeri gösterir. Genelde depolamamız bir resim klasöründe olur. Yukarıda URL’nin içindeki resimler yazan yere images, img gibi dosya isimleri de geldiği olur.

Tarayıcı belgenin neresinde img etiketi varsa orada görüntüler resimi.

HTML Resimlerindeki Alt Özelliği

Resim eğer gösterilmezse diye alt özelliği gireriz. Çünkü resim gözükmediğinde alt özelliğinin değeri gözükür. Yazar tarafından tanımlanır değeri.

<img src=”boat.gif” alt=”Big Boat” />

Burada şuna dikkat etmek gerek. Alt özelliğinin değeri, resime dair kesin bilgi veren 2 bilemediniz 3 kelimelik bir ifade olmalı. Ayrıca engellileri de düşünmelisiniz ki web sayfalarında ne olduklarını onlara da söyleyin bu sayede. Üstelik doğru olan ve w3C’nin istediği alt verilerinin girilmiş olmasıdır. Ayrıca kimi tarayıcılar sorunlar nedeniyle nesneleri gösteremeyebilir. Kısaca alt verisini girmek zorundayız.