Eğitim Yazılım

HTML 5 Dersleri – Standart HTML Özellikleri

Standart HTML Özellikleri

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>

Contextmenu (HMTL5)

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.

Yorum bırak