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

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.

 

Daha fazla...

HTML5 Grafik Elemanları

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

 

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

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

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.

 

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