201: HTML5 & CSS Bu başlangıç seviyesi derslerimizde HTML5 ve CSS ile bilgimizi bir adım öteye taşıyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

HTML5 ve CSS Üzerine Genel Bilgiler

Web Programlama dersimizin 101 bölümünde HTML ile ilgili temel bilgileri öğrendiniz. Artık HTML5 ve CSS ile uğraşmaya başlama zamanı...

Bir web sayfası oluşturmak için ihtiyacımız olan bileşenlerden ikisi, HTML5 ve CSS'tir. HTML5 ile temel yapıyı tanımlarken, CSS ile kullanıcı arayüzünü oluşturup, stil, biçim ve sunumları hazırlarsınız. Bu bileşenlerden ilki olan HTML5'e bakalım.

 

HTML5'te Temel Yapısal Elemanlar

HTML5 ile beraber yeni pek çok etiket geldi. Bu etiketlere kısaca göz atalım:

 

<article> etiketi

<article> etiketi, web sayfası üzerine yerleştirilecek haber, makale vb. metinleri tanımlamak ve yerleştirmek için kullanılır.

HTML5 Çokluortam Elemanları

HTML5'te çokluortam (multimedia) dosyalarını, Silverlight ya da Flash gibi eklentilere ihtiyaç duymadan web sayfanıza gömebilirsiniz. 

 

<audio> etiketi

<audio> etiketi, ses içeriğini tanımlamak için kullanılır.

 

<video> etiketi

<video> etiketi, video ya da filmleri web sayfasına yerleştirmek için kullanılır.

 

<source> etiketi

<source> etiketi, çokluortam kaynaklarını tanımlamak için kullanılır.

 

HTML5 Grafik Elemanları

HTML5, grafik elemanlarını çizebilmek için <canvas> ve <svg> elemanlarını barındırır.

 

canvas elemanı

<canvas> elemanını, özellikle JavaScript kullanarak, farklı çizimler yaratmak için kullanabilirsiniz. <canvas> elemanı, grafikler için sadece bir taşıyıcıdır. Grafik çizimi ise, JavaScript gibi bir betik (script) dili yardımıyla gerçekleştirilir.

HTML5 Konum Elemanları (Geolocation)

HTML5'te, Geolocation API'ları sayesinde, sayfanızı ziyaret edenler, kendi fiziksel konumlarını sizin web uygulamanızla paylaşabilirler. Bu tür uygulamalarda tarayıcı, kullanıcının konumunu paylaşmak isteyip istemediğini soracaktır. O andaki konum bilgisi ve ziyaretçinin IP adresi, en yakın kablosuz ağ erişim noktasından alınır.

Bulunduğunuz enlem ve boylamı, JavaScript yardımıyla belirleyip arka planda web sunucusuna gönderebilirsiniz. Sonuç olarak belirlenen konumu harita üzerinde gösterebilir, belli bir adresi arayabilirsiniz.

HTML5 Olayları (Events)

HTML5'te, tarayıcıdaki çeşitli eylemleri harekete geçirmek üzere, olaylar (events) kullanabilirsiniz; örneğin kullanıcı fareyi tıklayınca bir JavaScript kodunu devreye sokabilirsiniz.

HTML5, aşağıdaki tipte olayları kullanıma sunmaktadır:

HTML5'te Sürükle Bırak (Drag & Drop)

HTML5'te, herhangi bir eleman için ekranın bir yerine sürükleme işlemi uygulanabilir ayrıca native bir sürükle-bırak API'ını hizmete sunmaktadır.

Sürükle-bırak işlemi ile ilişkili en çok kullanılan olaylar aşağıda listelenmiştir:

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:

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

CSS'e Giriş

CSS öğrenmeye başlarken ön koşul, temel düzeyde HTML ve XHTML bilgisidir. CSS, Cascading Style Sheets (Basamaklı Biçim Sayfaları) ifadesinden oluşturulmuş bir kısaltmadır. Biçimler (styles), HTML elemanlarının nasıl görüntüleneceğini tanımlar.

 

HTML ve stil sorunu

HTML'de, bir belgeyi biçimlendirmek için kullanılabilecek etiketler mevcut değildir. HTML etiketleri, bir belgenin içeriğini tanımlamak için kullanılır.

CSS Yazım Kuralları (Syntax)

Bir CSS kural kümesi, bir seçici (selector) ve bir bildiri bloğundan (declaration block) oluşur. Selector, biçim (style) bilgilerini yükleyeceğiniz HTML elemanını işaret eder. Declaration block (bildiri bloğu) bir ya da daha fazla bildiriden oluşur. Değiştirilmek istenen birden fazla özellik varsa bildiriler arasına ";" sembolü konur. Her bildiri, bir özellik adı (property name) ve bir değer (value) içerir. Aralarına ":" sembolü yerleştirilir.

Bir CSS bildirimi daima bir noktalı virgül sembolüyle sonuçlanır ve bildiri grupları "{}" sembolleri arasına alınır.

CSS Kodlarını Ekleme Yöntemleri

Bir biçim (style) sayfasını eklemenin üç farklı yolu mevcuttur: Dış stil sayfası (External Style Sheet), İç stil sayfası (Internal Style Sheet), Çevrimiçi (Inline) stil.

 

Dış Stil Sayfası

Stil çok sayıda sayfaya uygulanacaksa, dış stil sayfası kullanmak uygun bir yöntemdir. Dış stil sayfasıyla, bütün web sayfasının görünümünü sadece bir tek dosyayla oynayarak gerçekleştirebilirsiniz. Her sayfa, <link> etiketiyle, stil sayfasına gönderen bir bağlantı içermelidir; <link> etiketi head bölümünün içinde olmalıdır.

CSS Zemin Özellikleri

CSS zemin özellikleri, bir elemanın zemin özel tanımlamak için kullanılır. Bu özellikler;

  • Zemin rengi,
  • Zemin görseli,
  • Zemin tekrarı,
  • Zemin ekleri,
  • Zemin pozisyonu'dur.

 

Zemin rengi

Bir elemanın zemininin rengini belirler. Sayfanın zemin rengi, body kısmında tanımlanır.

CSS Metin İşlemleri

Metinlerin özellikleri CSS kullanılarak değiştirilebilir.

 

Metin rengi (Text Color)

Renk özelliği, bir metnin rengini atamak için kullanılır. CSS'te renk atama,

  • bir HEX değerle: "#ff0ee0",
  • bir RGB (red-green-blue, kırmızı-yeşil-mavi) değerle: "rgb(200,10,50)",
  • ya da bir renk adı belirtilerek gerçekleştirilebilir.

Bir sayfa için varsayılan renk, body seçicisi ile tanımlanır.

CSS Yazıtipi Özellikleri

CSS yazıtipi (font) özellikleri, yazıtipi ailesini, boyutu, kalın/italik olup olmama durumunu ve metnin biçemini (stil) tanımlamak için kullanılır.

 

Yazıtipi aileleri

CSS'de, yazıtipi aileleri iki temel gruba ayrılır:

CSS Linkler

Web bağlantılarına (link) herhangi bir CSS özelliği kullanılarak (color, font-familiy, background vb) stil verilebilir. Bunun dışında linkler, hangi durumda (state) bulunduklarına göre de şekillendirilebilirler. Dört bağlantı durumu aşağıdaki gibidir:

CSS Listeleri

CSS listesi özellikleri, sıralı listeler için farklı liste elemanı işaretçileri, sırasız listeler için farklı liste elemanı işaretçileri, liste elemanı işaretçisi olarak da bir resim atama işlemlerini gerçekleştirir.

HTML'de iki tip liste vardır:

  1. Sırasız liste: Liste elemanları "." (bullet) ile işaretlenir.
  2. Sıralı liste: Liste elemanları harf ya da rakamla işaretlenir.

Liste elemanı işaretçisinin tipi, list-style-type özelliğiyle belirlenir.

CSS Tablolar

CSS'in sağladığı araçlarla HTML'in tablo oluşturma olanakları büyük ölçüde iyileştirilmiştir. Bu eğitim içeriği ve alt içeriklerinde tabloları nasıl daha güzel ve kullanışlı tasarlayacağınızı göstereceğiz.

 

Tablo sınırları

CSS'te tablo sınırlarını belirlemek için border özelliğini kullanmalısınız.

table, th, td {
   border: 2px solid black;
}

Aşağıdaki örnek, tablo, th ve td elemanları için siyah sınırlar belirliyor:

CSS Kutu Modeli

Tüm CSS elemanları birer kutu olarak düşünülebilir. CSS'te tasarım ve düzenden bahsediliyorsa, "Kutu Modeli" terimi kullanılır. CSS Kutu Modeli esasında HTML bileşenlerinin etrafını saran ve margin (kenar mesafesi), border (sınır), padding (boşluk) ve content (içerikten) oluşan elemanlardan ibarettir.

CSS Kutu Modeli, bize elemanların etrafına bir sınır ekleme (border) ya da elemanlar arasında bir boşluk (padding) tanımlama olanağı sağlar.

Aşağıdaki şema, CSS Kutu Modeli elemanlarını daha iyi kavramanıza yardımcı olacaktır:

CSS Bir Elemanın Genişliği ve Yüksekliği

Bir elemanın genişlik ve yüksekliğinin bütün tarayıcılarda doğru çalışmasını garantilemek için kutu modelinin nasıl çalıştığını bilmek gerekir. Bunun için aşağıdaki örnek üzerinden bir hesaplama yapalım:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    padding: 0;
}

Burada biraz uzun bir toplama işlemi gerekecek:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right padding)
= 350px

 

Tarayıcı Uyumluluğu

Internet Explorer 8 ve önceki sürümlerde boşluk (padding) ve sınır (border), genişlik özelliği içine katılıyordu. Internet Explorer 8 ve öncesi sürüm web tarayıcılarla uyum probleminden kaçınmak için, HTML sayfasına <!DOCTYPE html> ifadesini ekleyiniz.

Örnek bir <!DOCTYPE html> ifadesini aşağıda bulabilirsiniz:

CSS Sınır (Border) Özelliği

CSS Sınır (border) özellikleri, bir elemanın sınırlarına ait biçim (stil), boyut ve renkleri belirler.

Bu eğitim içeriğimizin devamında sınır stillerini nasıl değiştereceğinizi, renk, genişlik gibi özellikleri nasıl kullanacağınızı göreceksiniz.

CSS Dış Çizgileri

Dış çizgi (outline) denilince, elemanların etrafına (sınır çizgileri dışına) çizilecek çizgiler anlaşılır; bundan amaç dikkati buraya çekmektir. Atanacak olan outline özellikleri, bir dış çizginin genişliği, rengi ve stilini belirler.

Örneğimizle konu daha iyi anlaşılacaktır:

CSS Padding

CSS padding özellikleri, elemanların etrafındaki boşluğu tanımlar.

Padding: Padding, bir eleman etrafındaki bir alanı siler (border'ın dışında). Padding'in bir zemin rengi yoktur ve tamamı ile saydamdır. Ayrı özellikler kullanılarak, üst (top), sağ (right), alt (bottom) ve sol (left) padding'ler bağımsız olarak değiştirilebilir. Ayrıca bir kısayol (shorthand) padding'i ile tümü birden de atanabilir.

 

CSS Boyutları

CSS boyut (dimension) özellikleri bir elemanın genişlik ve yüksekliğini kontrol etmenizi sağlar.

Konuyu bir örnekle anlatamaya başlamak daha doğru olacak:

CSS Görüntüleme ve Görünürlük

Display özelliği elemanın nasıl görüntüleneceğini, visibility özelliği ise bir elemanın görünür mü yoksa gizli mi olacağını belirler.

Bir Elemanı Gizlemek

Bir elemanı gizlemek ya display özelliğini “none” yaparak ya da visibility özelliğini “hidden” yaparak gerçekleştirilir. Bununla birlikte bu iki metot farklı sonuçlar üretir:

visibility: hidden ataması elemanı gizler ancak eleman sayfada aynı yeri kaplar. Eleman gizlenecektir fakat hala genel çerçevede yer alacaktır.