▌HTML 5 Öğreniyorum > Ders 2 | HTML5 Etiketleri

[Kronik2143]

Bugünkü dersimizde Html5 dili içinde bulunan tüm etiketleri anlatıcam ve konu sonunda websitesi tasarlamak için ideal
programları listeleyip anlatabildiğim kadarıyla anlatacağım.

HTML5 dilinde elemanlar saklayabilcekleri içerik türlerine göre gruplandırılmıştır. Bu gruplandırma
içerik modeli ( Content Models ) olarak adlandırılır. İçeri modeli elemanların ne çeşit bir içeriğe sahip olabilceklerini tanımlar.
Bir eleman birden fazla içerik türünü destekleyebilir.
​

+ Embedded : Dış kaynaklı, başka bir etiketleme dili ile ya da programatik olarak tanımlanan içeriklerdir.
Örnek : audio, canvas, embed , iframe, img, math, object, svg, video

+ Flow : Metin, başka bir eleman ya da gömülü olarak tanımlanan içeriklerdir.
Örnek : a, abbr, address, article, aside

+ Heading : Bir bölümün başlığını tanımlayan içeriklerdir.
Örnek : h1, h2, h3, h4, h5, h6, hgroup

+ Sectioning : Article, aside, nav, section, elemanlarının içerik türüdür.

+ Metadata : Base, command, link, meta, noscript, script, style, title elemanlarının içerik türüdür.
Sayfaların görselliğini ve davranışları değiştirebilen içeriklerdir.

+ Phrasing : Metin ya da satır içi elemanların oluşturdukları içeriklerdir.
Örnek : a, em, strong, small, mark, abbr

+ Interactive : Kullanıcı ile etkileşim için tanımlanmış interaktif içeriklerdir.
Örnek : button, details, embed, iframe, keygen, label, select, textarea

STANDART ÖZELLİKLER

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

* accesskey
* class
* contenteditable
* contextmenu
* dir
* draggable
* dropzone
* id
* lang
* spellcheck
* style
* tabindex
* title
* hidden

✔ ACCESSKEY
Alabilceği Değeler ; Karakter
HTML elemanına klavye kısa yolu 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)
Sınıf seçici ile etiketlendirilmiş bir CSS bildirim bloğuna bir HTML elemanına atamak için kullanılır.
✔ CONTENTEDITABLE
Alabilceği değerler ; true, false
Eleman içeriğinin düzenlenebilir olup olmayacağını ayarlamak için kullanılır. Bu özelliğe true değeri atanmışsa eleman içeriği
kullanıcı tarafından düzenlenebilir. False değeri atanmışsa eleman içeriği kullanıcı tarafından düzenlenemez.

Örneğin ;
<div contenteditable></div> şeklindeki bir kullanım geçersizdir yanlış olur.
Doğru kullanımı şu şekilde olmalı <div contenteditable="true" ></div>

✔ CONTEXTMENU
Alabilceği değerler ; menu elemanı id değeri.
Bir elemanı menu elemanı ile ilişkilendirmek için kullanılır.
✔ DIR
Alabilceği değerler ; ltr (left-to-right), rtl (right-to-left), auto
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
Alabilceğ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 verilmiş ise eleman kullanıcı tarafından sürüklenebilir
* false değeri verilmiş ise eleman sürüklenmez.
* auto değeri atanmış ise ve yukarıdaki değerler kullanılmamışsa, tarayıcı kendi varsayılan değerini kullanır.
✔ DROPZONE
Alabilceği değerler; copy, move, link
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, işlemin bittiği yerde sürüklenen dosyanın kopyası oluşturur.
* move değeri atanırsa, sürüklenen dosya oraya taşınır.
* link değeri atanırsa, sürüklenen yerde sürüklenen dosyaya bir link oluşturur.
✔ ID
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.
✔ SPELLCHECK
Alabilceğ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 etmez. Bu özelliği
düzenlenebilir içeriğe sahip elemanlarda kullanabilirsiniz.
✔ STYLE
Alabilceği Değerler ; CSS bildirimleri (Değerler - Önemli Elemanlardan)
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 öncelikli tanımlamalar olacaktır.
✔ TABINDEX
Alabilceği Değerler ; Rakam
HTML elemanı için sekme sırasını ayarlar.
✔ TITLE
Alabilceği Değerler ; Metin
HTML etiketine bilgi ve açıklama ekleyebilirsiniz.
✔ HIDDEN
Alabilceği Değerler ; hidden
HTML elemanını gizlemek için kullanılır.

Yukarıda anlatabildiğim kadarıyla anlattım umarım işinize yaramıştır şimdi daha rahat bir websitesi
nasıl yapabilceğiniz programı indirme linki ile açıklıyorum alt tarafta.

Adobe Dreamweaver CC
indirerek yapacağınız tasarımları kodların anlık olarak nasıl çalıştığını gösterebilirsiniz bu program ile
bunun yanı sıra Adobe Dreamweaver CC programda size 3 - 4 Adet hazır şablon veriyor o hazır şablonlar ile acemi bir web site
tasarımı oluşturabilirsiniz Buraya Tıkla yarak indirebilirsiniz. Öncelikle kayıt olmanız gerekmekte ve kayıt
olduktan sonra 30 Günlük deneme sürümü başlar bunu cracklama işlemleri webde bulunmakta küçük bir araştırma ile crack
yapabilirsiniz.



✠ Bir sonraki ders.


Ders Listesi
HTML Ders 1
HTML Ders 2

Konu ilgi görmediğinden dolayı dondurulmuştur.

​

 

[cilginwonstafher]

Dreamweaver çok saçma bir program.
Bunun yerine Npp ve Sublime Text gibi güzel programlar var.

 

[Kronik2143]

Dreamweaver çok saçma bir program.
Bunun yerine Npp ve Sublime Text gibi güzel programlar var.

Çok saçmamı ? Dreamweaver başlangıç için en iyi program acemi durumdayken çok iş görür sizin yazdığın programlar normal not defterinin gelişmiş haldeki olmuşları bu bir tasarım editörü onlar ayrı bu ayrı.