Html5 on Nazım Can Altınova

HTML5 Contenteditable Attribute'ü ile Değiştirilebilir CSS

Tue, 25 Nov 2014 03:11:49 +0200

contenteditable attribute’ü nedir?

HTML5 ile birlikte gelen attribute’lerden biri olan contenteditable, hangi elemente eklenmişse o elementin içeriğinin değiştirilebilir olmasını sağlıyor. Tamamen client tarafında yapılan bu değişiklikler herhangi bir yerde saklanmıyor ve sayfayı yenilediğimiz zaman kayboluyor. Contenteditable; true, false ve inherit olmak üzere 3 değer alabilir. Varsayılan değeri ise inherit.

Bir örnek vermek gerekirse:

<!DOCTYPE html>
<html lang="tr">
<head>
	<meta charset="UTF-8">
	<title>Contenteditable Örneği</title>
</head>
<body>
	<div class="title" contenteditable="true">Merhaba Dünya!</div>
</body>
</html>

Yukarıdaki örnekte, title class’ına sahip div’imize contenteditable="true" ekleyerek div’i değiştirilebilir hale getiriyoruz. Artık tarayıcımızda sayfayı açıp div’de değiştirmek istediğimiz yere tıklayarak içeriği değiştirebiliriz.

HTML Imports (HTML İçe Aktarım) - Kısım 2

Tue, 18 Nov 2014 18:47:25 +0200

Yazının birinci kısmına buradaki linkten ulaşabilirsiniz.

Web Componentlerinin iletimi

HTML Importlar, tekrar kullanılabilir içerikleri yükleyebilmek için tasarlanmıştır. Özellikle Web Componentlerinin dağıtımı için en ideal yoldur. Buna HTML <template> etiketleri, Shadow DOM ve Custom Element’ler de dahil. Bütün bu teknolojiler bir araya geldiğinde HTML Import artık Web Component’lerimiz için bir #include gibi oluyor.

Template’leri include etmek

HTML Template ile HTML Import birbirleriyle bir uyum içindedir. <template> etiketi bizim import edilecek uygulamamızda HTML için gayet güzel bir iskelet görevi görüyor. Ayrıca içeriği <template> içerisine almak, bizim içeriğimizin kullanılana kadar durağan bir şekilde kalmasını sağlıyor. Template’in içinde kalan scriptler ise DOM’a eklenene kadar çalışmıyor.

HTML Imports (HTML İçe Aktarım) - Kısım 1

Wed, 12 Nov 2014 23:30:54 +0200

Neden Import?

Web’de farklı türdeki kaynak dosyalarını nasıl yüklediğinizi düşünün. JavaScript için <script src=""> tag’ini kullanıyoruz. CSS için ise <link rel="stylesheet" href=""> tag’ini kullanarak HTML sayfamıza kaynakları ekliyoruz. Bu örneklere resim, video ve ses dosyalarını da ekleyebiliriz. Peki makalemizde ne anlatmaya çalışıyoruz? Bu makalede kaynak dosyası olarak düşündüğümüz şey HTML ve biz bir HTML dosyasını başka bir HTML dosyasında çağırmayı öğreniyor olacağız. Peki daha önce bir HTML’i başka bir HTML dosyasında nasıl çağırıyorduk? Hemen bakalım: