İçindekiler
Sosyal Durak olarak kullanıcılarımıza Temel HTML 5 Dersleri sunmaya karar vermiştik. Daha önce yazmış olduğumuz HTML – Giriş dersinde HTML hakkında bilgi vermiş daha sonra HTML 5 etiketlerini incelemiştik. Dersin Bir bölümünde Örnek HTML sayfası da yapmıştık. Bu dersimizde ise Standart HTML Özellikleri hakkında bilgi verecek ve örnekler yapacağız. Ders sonunda anlamadığınız veya merak ettiğiniz konuları yorum kısmından bildirebilirsiniz.
Derse geçmeden önce HTML 5’in normal HTML’ye göre artılarını aktarayım;
Eski sürümlerdeki hata ayıklama sorunlarında daha etkili.
Yapısal Ögeler ve Etiketler geliştirildi.
Yerleşik Apiler Sayesinde Web Uygulama geliştirmede kolaylık sağlıyor.
Yeni Gelen Kodlarla Ses ve Video kullanımında Kolaylık sağlıyor.
Web tasarımın şu günlerde Javascript üzerinde yoğunlaşması nedeni ile html5 de 3.parti yazılımlara, araçlara ve eklenti desteği getirdi.
Standart HTML Özellikleri
| Özellik | Değer | Açıklama |
| Accesskey | Karekter | HTML elemanına klavyeden bir kısayol tanımlamak için kullanılıyor. |
| Class | Sınıf adı | Sınıf seçici ile etiketlendirilmiş bir CSS bildirim bloğunu HTML elemanına atamamıza yarar. |
Buna örnek olarak ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> HTML 5 Dersleri </title>
<style type="text/css">
tittle{
font-size:30px;
}
div {
float:center;
width:250px;
height:200px;
margin:19px;
box-shadow : inset 3px 3px 15px 4px rgba( 24, 23, 214, 0.5);
}
.kutu1 {
font-size:18px;
}
.kutu2 {
font-size:24px;
}
</style>
</head>
<body>
<div class="kutu1">
İlk dive kutumuz. </br>
Sosyal Durak
</div>
<div class="kutu2 kutu1">
İkinci div kutumuz. </br>
Sosyal Durak
</div>
<body>
</html>
Id
HTML elamanlarını benzersiz şekilde isimlendirmek için kullanılır. Bir nevi elemana kimlik oluşturmak için kullanılmaktadır.
JS ve CSS özeliklerini daha iyi şekilde kullanmamızı sağlar.
Lang
Değer: Dil Kodu
HTML elemanlarının özelliklerine ya da metinlerin aldıkları değerlerin dilini ayarlamamızı sağlamaktadır.
Örneğin; Almanca için : de, Türkçe için : tr, İngilizce için : en
Dir
Değerleri: auto, rtl (right to left), ltr (left to right)
Html5 elemanın içerdiği metnin yazılış yönünü ayarlamamızı sağlamak için kullanılmaktadır.
Style
Değer: CSS
Bu özellik ile HTML elemanlarının satır aralarına CSS kodları yazmamızı sağlamaktadır.
Tabindex
Değer: Rakam ya da sayı
Elemanın sekme sırasını ayarlamak için kullanılmaktadır.
Title
Değer: Metin
Sayfamıza başlık tanımlamak için kullanılmaktadır.
Contenteditable (HTML5)
Değerleri: false, true
Eleman içeriğini düzenleyebilir olup olamadığını ayarlamak için kullanılır. Bu özelliğe true 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ğer ile beraber kullanmak şarttır.
Örneğin ;
<div contenteditable> Sosyal Durak </div> şeklinde kullanılmış ise bu yanlış bir kullanımdır.
<div contenteditable=”false”> Sosyal Durak </div> veya
<div contenteditable=”true”> Sosyal Durak </div> şeklinde kullanılması gerekir.
Buna örnek olarak;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<tittle> HTML 5 Dersleri </tittle>
<style type="text/css">
div {
float:center;
width:250px;
height:200px;
margin:19px;
</style>
</head>
<body>
<div contenteditable="true"> Sosyal Durak (Düzenlenebilen içerik) </div>
<div contenteditable="true"> <img alt="düzenleyin" src="sosyaldurak.png" /> </div>
</body>
</html>
Değer: menu elemanının id değeridir.
Herhangi bir elemanı menu elemanı ile ilişkilendirmek için kullanılmaktadır.
Draggable (HTML5)
Değerleri: auto, false, true
Bir HTML5 elamanın sürüklenip sürüklenmeyeceğini ayarlamamızı sağlamaktadır.
False: eleman sürüklenemez.
True: elemanı mouse ile sürüklenebilir.
Auto: eleman tarayıcının varsayılanını kullanır.
Dropzone (HMTL5)
Değerleri: move, copy, link
Sürükle-Bırak olayında tarayınıcın davranışını tanımlamak için kullanılmaktadır.
Move: veriyi sürüklediğimiz yere taşır
Copy: sürüklediğimiz yerde verinin kopyası oluşur.
Link: sürüklenen yerde verinin bir linkini oluşturur.
Hidden (HMTL5)
Değer: Hidden
Elemanı gizlemek için kullanılmaktadır. – Standart HTML Özellikleri
Spellcheck (HMTL5)
Değerleri: false, true
True: elemanın içindeki metinlerin yazım hatalarını kontrol eder.
False: elemanın içindeki metinlerin yazım hatalarını kontrol etmez.
İlk ders için buraya tıklayabilirsiniz.
