Web Tasarım - Grafik Tasarım

Standart Özellikler

HTML5’de her eleman aşağıdaki ortak özelliklere sahiptir. Şimdi bu özelliklerin neler olduğuna bakalım.

  • accesskey • id
  • class • lang
  • contenteditable [HTML5] • spellcheck [HTML5]
  • contextmenu [HTML5] • style
  • dir • tabindex
  • draggable [HTML5] • title
  • dropzone [HTML5] • hidden [HTML5]

 

accesskey

Alabileceği Değer: {Karakter}

HTML elemanına klavye kısayolu tanımlamak için kullanılır.

class

Aldığı Değerler: {Sınıf Seçici Adı [*Birden fazla sınıf seçici adı yazılabilir]}

Oluşturulmuş bir sınıf seçiciyi HTML elemanına atamak (uygulanmasını sağlamak)

için kullanılır.

<!DOCTYPE HTML>

<html>

<head>

<meta         charset=”utf-8” />

<title>class özelliği</title>

<style type=”text/css”>

/*Bu  Kitap boyunca uygulamalarda CSS ve  JavaScript dilleri  ile ilgili kısa ve  uygulamaya yönelik bilgiler verilecektir.*/

/*box-shadow  özelliği; html  elemanı için  tanımlı  olan kutuya gölge efekti vermek için  kullanılır ve  CSS3  ile tanımlanan bir  özelliktir.

Söz Dizimi:

box-shadow:inset <offset-x><offset-y><blur-radius><spread-radius><color> ;

inset,blur-radius,spread-radius,color ; isteğe bağlı

<offset-x> <offset-y>:gerekli*/

.shadow{

margin-top:20px; width:230px; height:100px;

background-color:khaki;

/*Firefox  3.5  ve  3.6  için*/

-moz-box-shadow:20px -10px crimson;

/*IE9 ,  Opera 10.5  , Firefox 4.0   için   CSS3 Özelliği*/

box-shadow:20px -10px                       crimson;

/*Safari için*/

-webkit-box-shadow:20px -10px                               crimson;

/*IE9 alt  sürümleri için*/ filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=20, OffY=-10,                    Color=’crimson’, Positive=’true’);

}

</style>

</head>

<body>

.renk{

font-family:calibri;

color:blue;

}

<p class=”shadow”>Birinci div elemanı</p>

<div class=”renk shadow”>İkinci div elemanı</div>

</body>

</html>

 

Eğer class özelliğine birden fazla sınıf seçici adı yazılmış ise, son yazılan sınıf seçici en öncelikli olur.

Firefox 3.6 ekran görüntüsü

 

IE8 ekran görüntüsü

contentedıtable [HTML5]

Alabileceği Değerler: {true, false}

Eleman içeriğinin düzenlenebilir olup olmadığını ayarlamak için kullanılır.

 

  • true değeri atanmışsa eleman içeriği kullanıcı tarafından düzenlenebilir/değiş- tirilebilir.
  • false değeri atanmışsa eleman içeriği kullanıcı tarafından düzenlenemez.

 

Eğer bu özellik bir elemana atanmışsa kalıtsal olarak elemanın içinde bulunan alt elemanlara geçer. Bu özelliği değeri ile beraber kullanmak şarttır.

 

Örneğin;

<div contenteditable></div> şeklindeki bir kullanım yanlış olacaktır.

 

Doğrusu;

<div contenteditable=”true” ></div> şeklinde olmalıdır.

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8” />

<title> contenteditable özelliği</title>

<style type=”text/css”>

</style>

</head>

<body>

<div contenteditable=”true”> Düzenlenebilir İçerik</div>

<div contenteditable=”true”>

<img alt=”düzenle” src=”html5.png” />

</div>

</body>

</html>

Dikkat ederseniz sayfada bulunan div elemanları için contenteditable özelliği true değeri ile tanımlanmıştır. Bu durumda iki div elemanının da içerikleri kullanıcı tarafından değiştirilebilir. Burada şuna dikkatinizi çekmek istiyorum. ikinci div elemanı- nın içerisinde bulunan img elemanı, bu özelliği kalıtsal olarak almaktadır. Tüm tarayıcılar img elemanının kullanıcı tarafından silinmesine izin verir, fakat sadece IE ve Firefox img elemanının sayfa üzerindeki boyutlarını değiştirmemize izin verecektir.

Tarayıcı Desteği: Internet Explorer 5.5 +, Firefox 3+, Opera 9.0+, Safari (Desteği var.)

NOT    + karakteri belirtilen sürüm ve daha sonra çıkan sürümler anlamına gelmektedir.

 

contextmenu [HTML5]

Alabileceği Değer: {menu elemanı id değeri}

Bir elemanı menu elemanı ile ilişkilendirmek için kullanılır.

Tarayıcı Desteği: Internet Explorer (Yok), Firefox (Yok), Opera (Yok), Safari (Yok)

Alabileceği Değerler: {ltr, rtl}

HTML elemanının içerdiği metnin yazılış yönünü ayarlamak için kullanılır. ltr ile rtl değerlerinden birini alır.

draggable [HTML5]

Alabileceği Değerler: {true, false, auto}

Bir HTML elemanının sürüklenebilir olup olmayacağını ayarlamak için kullanılır.

  • true değeri atanmışsa kullanıcı mouse ile elemanının konumunu değiştirebilir. (Eleman sürüklenebilir)
  • false değeri atanmışsa eleman sürüklenemez.
  • auto değeri atanmışsa ve yukarıdaki değerler kullanılmamış ise tarayıcı kendi varsayılan değerini kullanılır.

Tarayıcı Desteği: Internet Explorer (Yok), Firefox 3.5+, Opera (Yok), Safari 5.0+ dropzone

Alabileceği Değerler: {copy, move, link }

 

NOT    Bu özellik, Drag and Drop isimli bölümde  ayrıntılı bir şekilde anlatılacaktır.

Sürükle-bırak işlemlerinde bırakma anındaki tarayıcı davranışını tanımlamak için kullanılır.

  • copy değeri atanırsa sürükleme işleminin bittiği yerde sürüklenen datanın kop- yası oluşturulur.
  • move değeri atanırsa sürüklenen datayı sürükleme işleminin bittiği yere taşır.
  • link değeri atanırsa sürükleme işleminin bittiği yerde sürüklenen dataya bir link oluşturur.

Tarayıcı Desteği: Yok.

ıd

Alabileceği Değer: {Bir HTML elemanın id özelliğine atanan değer}

HTML elemanlarına benzersiz bir isim vermek için kullanılır. Aslında id özelliği ile HTML elemanlarına bir kimlik numarası verilir. JavaScript ile id özelliğine de-

ğer atanmış yani bir kimliği olan elemanlara ulaşabilir ve çalışma anında bu elema- nın stil ve yapısal özelliklerini değiştirebiliriz.

Örnek:

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8” />

<title>id özelliği</title>

<script type=”text/javascript”>

var goster = function (){

var yeni_text = document.createTextNode(“id özelliği”);

/* Yeni bir  text (metin) düğümü oluşturmak için  createTextNode() metodunu kullandık.

*Kullanımı:

*createTextNode(String):String (Bu  gösterim Metodun hangi tip  değer aldığını  ve  metodun geri  döndürdüğü değer türünü tanımlar.)

*Dom Level 1,2

*/

var div = document.getElementById(“icerik”);

/* id özelliğine “icerik” değerini almış  div  elemanının referansını

aldık. getElementById() metodu belirtilen id değerini almış  elemanı

obje(Nesne) olarak döndürür.

*Kullanımı:

*getElementById(String):HTMLElement

*Dom Level 1,2

*/

div.appendChild(yeni_text);

/* yeni_text isimli  metin düğümünü appendChild() metodu ile div  elemanı

içerisine ekledik.

*Kullanımı:

*appendChild(Node):Node

*Dom Level 1,2

*/

}

</script>

<style type=”text/css”>

#icerik

{

}

</style>

</head>

<body>

height: 50px;

width: 200px;

background-color: lightblue;

overşow:hidden;

 

<div id=”icerik” onmouseover=”goster();”>

</div>

</body>

</html>

lang

Alabileceği Değer: {Dil Kodu}

HTML elemanlarının içerdikleri metinlerin ya da özelliklerine aldıkları değerlerin dilini ayarlamak için kullanılır. Örneğin; Türkçe: tr, Almanca: de, ingilizce: en

spellcheck [HTML5]

Alabileceği Değerler: {true, false}

Eğer true değeri atanmışsa eleman içindeki metinde dilbilgisi ve yazım hataları kontrol edilir. false değeri atanmışsa kontrol edilmez. Bu özelliği düzenlenebilir içeriğe  sahip  elemanlarda  kullanabilirsiniz.  Örneğin;  textarea,  input ya  da

contenteditable=”true” değerini almış diğer elemanlar.

Tarayıcı Desteği: Internet Explorer (Yok), Firefox 2+, Opera (Yok), Safari (Yok)

style

Alabileceği Değerler: {CSS tanımlamaları(Özellik:Değer)}

Bu özelliği kullanarak HTML elemanlarına satır içi CSS kodları yazabilirsiniz. Bu CSS kodları style özelliği ile yazıldıkları HTML elemanına uygulanır. Style özelliğine yazılan CSS kodları bir elemanı hedef alan CSS kodları içinde en önce- likli tanımlamalar olacaktır.

Örnek:

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8” />

<title>style özelliği</title>

<style type=”text/css”>

p

{

}

</style>

</head>

<body>

color: Maroon; /*color tanımlaması, p elemanına uygulanmaz.

Çünkü öncelikli olan color tanımlaması style özelliğine yazılan tanımlamadır.*/

width: 100px;

<p style=”background-color: khaki; color:hsl(360,100%,50%)”> Her Yönüyle HTML5

</p>

</body>

</html>

p elemanına  atanan  CSS özellikleri

tabındex

Alabileceği Değer: {Sayı}

HTML elemanı için sekme sırasını ayarlar.

tıtle

Alabileceği Değer: {Metin}

HTML etiketine bilgi ve açıklama ekleyebilirsiniz.

hıdden [HTML5]

Alabileceği Değer: {hidden}

HTML elemanını gizlemek için kullanılır.

Tarayıcı Desteği: Internet Explorer (Yok), Firefox 4.0, Opera (Presto/2.7.7), Safari (Nightly Build* ile)