Top

dersleri Tag

  • All
  • Analiz
  • Dijital pazarlama
  • Dijital, İyi Şeyler Podcast
  • E-Ticaret
  • Eğitim
  • Growth hacking
  • İnceleme
  • Kişisel
  • Rehber
  • Reklam
  • Sosyoloji
  • Teknoloji
  • Wordpress

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:

FormatIEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.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, XHTML ve HTML Dom ‘da yeni standart HTML 5 olacaktır. Bir önceki versiyon 1999’da çıkmıştır. O zamandan bu yana ise çok şey değişmiştir.

HTML5 hala bir değişim sürecinde. Bununla beraber çağdaş birçok tarayıcı bazı HTML5’e ait  standartları sunmakta.


HTML5, W3c(World Wide Web Konsorsiyumu) ile WHATWG(Web Hypertext Aplication Technology Worgking Group) ‘un ortak çalışmasının sonucu.

WHATWG web formları ve uygulamaları ile, W3C de XHTML 2.0 ile uğraşıyordu. 2006’da, yeni bir HTML versiyonunda birleşmeye karar verdiler.

Belirlenmiş bazı HTML5 kuralları;

  • Yeni özellikler HTML,CSS, DOM ve Javascript’e göre olmalı,
  • Harici eklentilere ihtiyaç azaltılmalı,
  • Daha iyi hata işleme,
  • Script’leme yerine daha fazla işaretleme,
  • HTML5 cihazlardan bağımsız olmalı,
  • Geliştirme süreci halk tarafından görünür kılınmalı

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com‘dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools’a ait paylaşacak olduğum online editörü kullanabilirsiniz.


HTML, Web Sunucuları

Ürettiğiniz web sitesini tüm dünyaya duyurmak ve 7/24 sunmak için web sunucu üzerinde depolamanız gerekmektedir.

Bu durum 3 tip maliyet doğurur;

Donanım maliyeti;

Gerçek bir web sitesi için; birtakım güçlü sunucu donanımı alma ihtiyacı doğurur. Düşük fiyatlı bir bilgisayarın bunu yapabileceğini düşünmeyin. Çünkü 24 saat ve devamlı yüksek bağlantıda çalışması gereklidir.

Yazılım maliyeti;

İstemcilerin yani sıradan bilgisayar kullanıcılarının sahip olması gereken lisansların (programların herbir tanesinin lisansı olur.) da kat be kat üzerinde tutar sunucuların(server’ların) yazılımlarının lisansı. Sunucu lisansları aynı zamanda kullanıcı limitine de sahip olabilir. Buna dikkat etmeniz gereklidir.

Emek maliyeti;

Düşük emek harcanacağını sanmayın. Kendi donanım ve yazılımınızı kurarsınız, bug’lar ile virüsler ile uğraşırsınız ve server’ı daima herşeyin olabileceği bir ortamda açık, çalışır tutmak zorundasınızdır.

İnternet servis sağlayıcı kullanmak

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com‘dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools’a ait paylaşacak olduğum online editörü kullanabilirsiniz.


URL’lere dair bilgiler

Açık hali Uniform Resource Locators’tır. Bir Web Adresinin diğer bir adıdır. Bir url sözcük bütününden oluşur. Tıpkı “nefarkederki.com” gibi. Ve aslında “nefarkederki.com”‘un ardında bir ip adresi mevcuttur. IP internet protokolüdür. 4 basamaklı ve her bir basamak 255 haneye sahip olabilir. Siz aslında tarayıcıya nefarkederki.com adlı url’yi girdiğinizde tarayıcı nefarkederki.com’a ait ip adresini çevirmektedir. İsimleri hatırlamak daha kolaydır. Bu yüzden onları kullanırız.

Siz bir bağlantıya tıkladığınızda bir HTML sayfasındayken, altı <a> etiketiyle çizilmiş bir adrese ulaşılır World Wide Web üzerinde.

Bir Uniform Resource Locator ise world wide web üzerindeki bir belge ya da veriyi adreslemek için kullanılır.

Bir web adresi “http://www.nefarkederki.com/images/logo.gif” gibi bir söz dizimi kuralı kullanır.

Şema olarak;

scheme://host.domain:port/path/filename   ‘dır.

Açıklaması;

  • scheme – Internet Servisinin tipini tanımlar ve genel olarak http’dir.
  • host – Domain host’unu(alan sahipliği yani) tanımlar. Temel olarak http için www’dur.
  • domain – Internet alan adını tanımlar tıpkı nefarkederki.com gibi.
  • :port – Host’a ait Port numarasını tanımlar. Http için port 80’dir varsayılan olarak.
  • path – Sunucudaki bir yolu tanımlar. Eğer ifade edilmediyse, web siteniz hosting paketinizdeki disk alanının root’u dur yani kök dizinidir.
  • filename – Dökümanın veya kaynağın ismini tanımlar.

Genel URL Şeması;

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com'dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools'a ait paylaşacak olduğum online editörü kullanabilirsiniz.HTML, Özel karakterler / Entities, URL ve...

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 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.


Temel etiketler

Bir web sayfası için temel etiketler şunlardır;

<html>

<head>

<title>Burası başlık,yukarıdaki Ne Fark eder ki yazan yer gibi(tarayıcıda)</title>

</head>

<body>

</body>

</html>

Bu etiketleri uygulamayı unutmayın. Bunları yeni metin.txt’ye gördüğünüz gibi yazıyorsunuz. CTRL+S ile metin belgesine kayıt edin ilk önce ki yazdıklarınız kaybolmasın. Ardından farklı kaydet ile index.html’yi değiştirin. Ve index.html’yi çift tık ile tarayıcıda gösterin. Yazdığınız kodlar ile sayfa bembeyaz olacak yalnız tarayıcıda title etiketinde yazan yazı gözükecektir.

HTML’de başlıklar

Html’de başlıklar(headings) <h1>’den <h6>’ya kadar gider. En büyük olan 1 numaralı, en küçük olan 6 numaralıdır.

Örnek olarak bunları da uygulayabilirsiniz. Uygulayacağınız başlık etiketlerini <body> ile </body> arasına yazmalısınız. Body etiketi web sayfasının tamamen beyaz görünen kısmını temsil eder. Örneklerimiz;

<h1>Bu başlık h1 etiketine sahip.</h1>

<h2>Bu başlık h2 etiketine sahip.</h2>

<h3>Bu başlık h3 etiketine sahip.</h3>

<h4>Bu başlık h4 etiketine sahip.</h4>

<h5>Bu başlık h5 etiketine sahip.</h5>

<h6>Bu başlık h6 etiketine sahip.</h6>

 

HTML’de paragraf