Turkcell | Geleceği Yazanlar

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.

 

Daha fazla...

HTML5'te Temel Yapısal Elemanlar

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

 

Daha fazla...

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.

 

Daha fazla...

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.

Daha fazla...

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.

Daha fazla...

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:

Daha fazla...

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:

Daha fazla...

HTML5'te Yerel Depolama

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.

Daha fazla...

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.

Daha fazla...

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:

Daha fazla...

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)

Daha fazla...

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.

Daha fazla...

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.

Daha fazla...

CSS Yazım Kuralları (Syntax)

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.

 

Daha fazla...

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.

Daha fazla...

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,

Daha fazla...

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:

Daha fazla...

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:

Daha fazla...

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:

Daha fazla...

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.

 

Daha fazla...

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.

Daha fazla...

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:

Daha fazla...

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:

Daha fazla...

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.

Daha fazla...

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:

Daha fazla...

CSS Padding

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

Daha fazla...

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:

Daha fazla...

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.

Daha fazla...