Top

web Tag

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

Hiçbir eklentiye gerek kalmaksızın direkt tarayıcı üzerinden oyun motoru aracılığıyla oyun çalıştırılabiliyor. Oyunun akışı normal akışa çok yakın bir performans sergiliyor. Denenen oyunlar; Epic's Soul ve Swing Ninja. Altta da açıklamayı görebilirsiniz konuyla ilgili Mozilla yöneticisi Brendan Eich'a ait; Devamı yazımızda;...

Facebook bugün, pazarlamacılara yardımcı olacak yeni özellikleri başlattı. Cihazlar/araçlar arası insanlara ulaşıp onları eylemde bulunmaya teşvik etmek adına özelliklerin içeriği. Hedef kitle orjinal adıyla Custom Audiences, daha önce reklamı yapılan, pazarlanılan siteyi ya da mobil uygulamayı ziyaret edenleri hedefleyen mesajlar ulaştırmaya izin veren bir...

Buraya tıkalyarak ulaşabilirsiniz. İstatistiklere göre İnternet Explorer'ın kullanımı gitgide azalmakta ve buna karşın chrome liderliği ele alıyor ve fark atıyor görünüyor. Safari de biraz kıpırdama var yükselişte. Ve diğer tarayıcılar hep düşüyor görünüyor. Ama geliştiriciler onları da dikkate almak durumundalar tabi. İşletim sistemi olarak win7 yaygın hala...

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

Ç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 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 iFrame

Web sayfasının içinde web sayfası gösterimi iFrame ‘dir.

<iframe src=”URL”></iframe> şeklinde kullanılır. URL alınması istenen sayfadır.

Iframe – Height ve Width

Height ve Width genişlik ve yüksekliğin belirlenmesini sağlar iframe’de de. Piksel olarak olduğu gibi yüzdelik olarak da belirtilebilir.

<iframe src=”iframe.htm” width=”200″ height=”200″></iframe> gibi kullanılır.

Iframe  – Sınırları/Çerçeveyi yani border’i kaldırma

Frameborder özelliği border boyutu belirlenir ve bu sayede isterseniz kenarları gösterirsiniz isterseniz göstermezsiniz 0 değeri ile.

<iframe src=”iframe.htm” frameborder=”0″></iframe>

Bir hedef ya da bağlantı olarak iframe’i kullanma

Bir iframe bir bağlantı için hedef çerçeve/frame olarak kullanılabilir.

Linke bağlı target/hedef özelliği iframe’in name özelliğinin değerini taşıması gerekir.

<iframe src=”iframe.htm” name=”iframe”></iframe>

<p><a href=”http://nefarkederki.com” target=”iframe”>Nefarkederki</a></p>

gibi kullanılabilir.

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 Çerçeveleri/Frames

Çerçevelerle daha doğrusu frame’ler ile,  bir tarayıcı penceresinde birden fazla html belgesi görüntüleyebiliyorsunuz. Çağırılan her bir html belgesi bir çerçeve olarak anılır, her bir frame(çerçeve) de diğerlerinden bağımsızdır.

Çerçeveleri kullanma neden avantajlı değildir;

  • HTML’nin ileri versiyonlarında destek bulamayabilir
  • Kullanımı zordur çünkü tüm sayfayı basmak zordur.
  • Web geliştiricisinin birçok HTML belgesini takip etmesi gerekir.

HTML, Frameset Elementi

Frameset elementi bir veya daha fazla frame elemanını tutar. Her bir frame elementi ayrı bir belgede tutulur.

Frameset elemanı frameset’te kaç tane sütun ve satır olacağını belirler ve kaçının ne kadar pixel ya da yüzdelik alan kaplayacağını belirler.

HTML, Frame Elementi

<frame> etiketi belirli bir pencereyi tanımlar bir frameset içinde.

Aşağıdaki örnekte 2 sütunlu bir frameset mevcut.

Birinci sütun tarayıcının %25’ini kaplıyor. İkincisi ise %75’ini kaplıyor. “frame_a.htm” birinci sütunda, “frame_b.htm” ise ikinci sütundadır.

Misal;

<frameset cols=”25%,75%”>
<frame src=”frame_a.htm” />
<frame src=”frame_b.htm” />
</frameset>

Not; frameset’in sütunlarının alanı yanı cols, piksel cinsinden de yazılabilir ve sütunlardan geriye kalan yıldız ile kalan alanı kaplaması sağlanabilir.  (cols=”200,500″) ve (cols=”25%,*”) gibi.

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 Listeleri

En genel HTML Listeleri sıralı ve sırasız listelerdir.

HTML Sıralı Listeler

<ol> etiketi ile başlar sıralı listeler. Her bir liste elemanı da <li> tag ı ile başlar.

Liste elemanları numaralanmış olarak gözükür.

  1. Kahve
  2. Süt

gibi. Kodlar da şöyle;

<ol>
<li>Kahve</li>
<li>Süt</li>
</ol>

HTML Sırasız listeler

Sırasız listeler de <ul> etiketi ile başlar. Elemanları da <li> etiketi ile…

Küçük siyah daireler ile işaretlidir liste;

  • Kahve
  • Süt

gibi, kodları da şöyle;

<ul>
<li>Kahve</li>
<li>Süt</li>
</ul>

HTML, Tanımlı Listeler