ETİKETLER

web-programlama

İÇERİK TÜRLERİ

Çerçeve ve Alternatif Metin Ekleme

Bu eğitimde sizlere web sayfasında kullanacağınız görsellerin çerçeve ayarlarını nasıl tanımlayacağınızı, alternatif metin tanımlamayı ve görseli bir bağlantıya yönlendirmeyi anlatacağız.

 

Görselin çerçeve kalınlığının belirlenmesi

Web sayfası üzerinde görüntülenecek olan görselin çerçeve kalınlığı border= parametresiyle belirlenebilir. Oluşturulacak çerçevenin kalınlığını piksel cinsinden belirtebilirsiniz.

Örnek bir kullanımı aşağıdaki örnekte görebilirsiniz:

HTML5 ve JavaScript

HTML5 sayfalarının dinamik yani gelen taleplere anında cevap verebilmesi ve etkileşimli (interactive) olabilmesi için bir betik diline ihtiyacı vardır. Bu dil, günümüz uygulamalarına baktığımızda en yaygın dil olan JavaScript dilidir. JavaScript, HTML5 içine gömüldükten (embedded) sonra çalışır.

HTML'de Görseller

Tarayıcılar resim ve görüntü dosyalarını gösterebilir. İnternet'te yaygın olarak kullanılan dosya tipleri bitmap (.bmp), GIF, JPEG ve PNG şeklinde sıralanabilir. Bu eğitim içeriğinde web sayfanıza bir görseli nasıl ekleyeceğinizi göreceksiniz.

Kod şablonumuz şu şekilde olacak:

Link Oluşturmak

HTML'in önemli özelliklerinden biri, bir metin parçası ya da bir resim üzerinden başka bir belgeye bağlantı kurabilmesidir. Bu bağlantı, link adı verilen yapılar sayesinde gerçekleştirilmektedir. Bir resim ya da metnin rengi değiştirilerek ya da metin alt çizgili hale getirilerek bu resim ya da metnin bir hipermetin linki (hypertext link) ya da sadece link olduğu belirtilir.

Bir link oluşturmak için aşağıdaki adımlar izlenmelidir:

HTML Stilleri

Her HTML etiketi önceden tanımlanmış stil renklerini barındırır. Bu yazılar için siyah, arka plan için beyaz şeklindedir. Style özelliğini kullanarak dilediğiniz gibi renklendirme yapabilirsiniz.

 

Arka plan renginin değiştirilmesi

Arka plan rengini değiştirmek için bgcolor özelliğini kullanmalısınız. Aşağıdaki örnekte ayrıntılı şekilde görebilirsiniz:

HTML5 Yeni Form Elemanları

Bu bölümde, HTML5'in yeni form elemanları olan, <datalist>, <keygen> ve <output> elemanlarını inceleyeceğiz. Form elemanı kullanıcı tarafından verileri sunucuya göndermek için kullanılır ve bu nedenle de çok sayıda <input> elemanı içerebilir.

Yeni form elemanları ve sınıfları (attribute)

HTML5 aşağıdaki yeni form elemanlarına sahiptir:

  • <datalist>
  • <keygen>
  • <output>

HTML5'teki yeni form özellikleri ise şöyledir:

HTML5 Girdi (Input) Elemanları

Bu bölümde HTML5'in girdi (input) elemanlarını tanıyacağız. <input> etiketi, <form> ve </form> etiketleri arasında yer alır ve kullanıcının bilgi girişi yapacağı alanları tanımlar.

HTML5, aşağıda verilen yeni girdi tiplerini sunar:

HTML5 Web İşçileri

Bir web çalışanı ya da işçisi (web worker), arka planda çalışan ve sayfanın performansını etkilemeyen bir JavaScript kodudur. Bir HTML sayfası çalışırken, çalışan betik sona erene kadar sayfa cevapsız hale gelir yani reaksiyon alınamaz. Oysa bir web işçisi, diğer betiklerden bağımsız olarak arka planda çalışan ve sayfanın performansını etkilemeyen bir koddur. Web işçisi arka planda çalışırken yapmak istediğiniz şeyi yapmaya devam edebilirsiniz; mesela bir düğmeyi tıklayabilir, bazı elemanları seçebilirsiniz.

HTML5 Uygulama Önbellekleme

Bir web sayfasının/uygulamasının bir kez önbelleğe atılınca, çevrimdışı modda da çalışabilir olmasına HTML5'te "Uygulama Önbellekleme" denir.

Web uygulamasının bir çevrimdışı sürümünü yapmak için bir manifest dosyası oluşturmanız ve manifest sınıfını (attribute) belgenin HTML etiketine eklemeniz gerekir:

<html manifest="uygulama1.appcache">
//  ...
</html>

 

Manifest dosyası nedir?

 

HTML5'te Yerel Depolama

HTML5'te web sayfaları, veriyi yerel (local) olarak, tarayıcı (browser) içinde saklayabilir. Veri, sadece sorgulama olduğu zaman kullanılır; eskisi gibi sunucunun her talebinde verinin tekrar yüklenmesi söz konusu değildir. HTML5'in bir diğer büyük avantajı ise, web sitesi ya da mobil uygulamanın performansını kötü etkilemeden, büyük miktarlarda veri depolama olanağı sağlamasıdır. Veriyi, yerelde saklamak için HTML5'in sağladığı iki yeni nesne mevcuttur:

Abone ol web-programlama