Top

Hasan Yasin TÜRKYILMAZ > Dijital Pazarlama Uzmanı, Growth Hacker, Dijital Stratejist, Sosyolog

ID ve Class Seçicileri

HTML elementlerini biçimlendirmenin ötesinde CSS kendi seçicilerinizi id ve class olarak oluşturmanızı sağlar.

ID Seçici

ID seçici yegane tek bir element için stillendirme yapar.

HTML elementinin id özelliğinin değeri kullanılır ve css dosyasında ‘#’ değeri kullanılarak tanımlama yapılır ve biçimlendirilir css’te.

Örnek; menu id’sine sahip element için css yazımı;

#menu
 {
 text-align:center;
 color:red;
 }

ID’yi sayıyla başlatmayın Firefox’ta çalışmaz çünkü.

Class Seçici

Class seçici, html elementler grubunu biçimlendirmek için kullanılır. ID seçicisinin haricinde, class seçici birçok kez kullanılabilir.

Bu da sayılar ile başlamamalı çünkü Internet Explorer desteklememekte.

Aynı class ile belirli birçok HTML elementini şekillendirebilirsiniz.

HTML’nin class özelliğini kullanarak ve css’te başına nokta koyarak tanımlarsınız bu seçiciyi.

Örnekte merkez class’ına sahip bir css stilini göreceksiniz;

 .merkez{text-align:center;}

Şunu da yapabilirsiniz class ile; sadece belirlediğiniz HTML elementlerinin class tarafından etkilenmesini sağlayabilirsiniz.

Mesela tüm p etiketlerine merkez class’ı uygulanır bu da hepsini merkeze alır tanımdan yola çıktığımızda.

p.center {text-align:center;}

Css öğrenmeye başlamadan önce  HTML veya XHTML bilmeniz gerekmektedir. Bilmiyorsanız buraya tıklayarak öğrenmeye başlayabilirsiniz.

Css Nedir?

Css yığma stil dosyasıdır.

  • Stiller HTML elementlerinin nasıl gösterileceğini tanımlarlar.
  • Stiller bir problemi çözmek için eklenmişti HTML 4.0’a.
  • Harici Stil dosyaları birçok işten kurtarır.
  • Harici stil dosyaları CSS dosyalarında tutulur.

CSS’e ait bir demo var. Bunu görüntülemek için buraya tıklayın; ilk üçü farklı stillere sahip, without yazan stilsiz görünüm ve alttaki üçü de stil dosyalarının içerikleridir.

Stilleri büyük bir problemi çözdü

HTML, bir belgeyi biçimlendirmek için etiketler içeren bir şekilde tasarlanmamıştı.

Bir belgenin içeriğini belirlemek için tasarlanmıştı; tıpkı:

<h1>Bu bir başlık</h1>
<p>bu bir paragraf</p>

HTML 3.2’de <font> etiketi gibi etiketler eklendiğinde web geliştiricileri için bir kabus oldu bu durum. Büyük siteleri geliştirmek, fontları ve renk bilgilerini tek tek er sayfa için değiştirmek uzun ve pahalı bir süreç haline geldi.

Bu problemi çözmek içinse; WWW konsorsiyumu CSS’i oluşturdu.

HTML 4.0’da tüm formatlar HTML belgesinden arındırıldı ve ayrı bir css dosyasında barındırılmaya başlandı.

Günümüzde tüm tarayıcılar css’i desteklemekte.

CSS bizi iş yükünden kurtardı

CSS HTML elemanlarının nasıl gösterileceğini tanımlar.

Bu sayede birçok sayfaya bağlı olan css dosyasını değiştirdiğimizde tüm sayfalarımız da değişecektir. Bizleri uğraştan kurtaracaktır.

 

XHTML HTML’nin ve XML’in (EXtensible Markup Language)  karışımından oluşur.

XHTML; HTML 4.01’in tüm elementlerine dayanır, XML’in katı söz dizimini de içerir.


Neden/nedir XHTML?

İnternet üzerindeki çoğu sayfa düzgün olmayan yani kötü html’e sahiptir.

Bir tarayıcıda görüntülerken alttaki kodlar düzgün görüntülenecektir. (HTML kurallarına uymasa dahi):

<html>
<head>
<title>Bu düzensiz HTML</title>
<body>
<h1>düzensiz HTML
<p>Bu bir paragraf
</body>

XML bir işaretleme dili ve herşeyin düzgün işaretlenmesi gerekir ki bu tür belgelere de well-formed yani düzgün biçimli belgeler denir.

XML verileri tanımlamak için tasarlanmıştır, ve HTML verileri görüntülemek için.

Farklı firmalara ait tarayıcıların günümüz pazarında , kimisi bilgisayarlarda çalışmakta kimisi de mobil cihazlar gibi küçük cihazlarda çalışmakta. Son bahsettiğimizde herhangi bir güç ya da kaynak yoktur  düzensiz HTML’i düzeltecek.

Bununla birlikte -HTML ve XML’in birleşimi, W3C tarafından gelecek için ve şu an için en yararlı olan işaretleme dili olduğudur – XHTML.

Genel Olay Özellikleri

HTML 4; tarayıcıda, olaylara tetikleme izni vermiştir, tıpkı bir elemente tıklayınca çalışan Javascript gibi.

Javascript ve nesneye yönelik HTML de anlatacaklarım listesinde.

Aşağıdaki genel olay özellikler HTML5 içerisinde olayların etkileşimde bulunmasını sağlamakta.

Yeni : HTML5’teki yeni olay özellikleri.


Window(pencere) Olay Özellikleri

Window nesnesi için olay tetikleyicileri.

<body> tag’ına uygulanırlar:

Özellik Değer Tanım
onafterprint  Yeni script Belge basıldıktan sonra çalışır
onbeforeprint  Yeni script Belge basılmadan önce çalışır
onbeforeonload  Yeni script Belge yüklenmeden önce çalışır
onblur script Pencere odaklanmasını kaybedince çalışır
onerror   Yeni script Bir hata gerçekleştiğinde çalışır
onfocus script Pencereye odaklandığında çalışır
onhaschange  Yeni script Belge değiştirildiğinde çalışır
onload script Belge yüklendiğinde
onmessage  Yeni script Mesaj tetiklendiğinde
onoffline  Yeni script Belge çevrimdışı olduğunda
ononline  Yeni script Belge çevrimiçi olduğunda
onpagehide  Yeni script Pencere gizli olduğunda
onpageshow Yeni script Pencere görünür olduğunda
onpopstate  Yeni script Pencerenin tarihi değiştiğinde ya da durumu
onredo  Yeni script Belge bir tekrar yapma işlemine sahne olduğunda
onresize  Yeni script Pencere yeniden boyutlandırıldığında
onstorage  Yeni script Bir belge yüklendiğinde
onundo  Yeni script Belge bir geri alma işlemine sahne olduğunda
onunload  Yeni script Kullanıcı belgeden ayrılınca



Form Olayları

Bir HTML formu içerisinde olay tetiklenir.

Tüm HTML5 elementlerine uygulanır,fakat çoğu form elementlerine uygulanır:

Özellik Değer Tanım
onblur script  bir element odaklanmasını yitirdiğinde
onchange script bir elment değiştiğinde
oncontextmenu Yeni script  bir kaynak menu tetiklendiğinde
onfocus script  Bir elemente odaklanıldığında
onformchange Yeni script  Bir form değiştiğinde
onforminput Yeni script  Bir form kullanıcı veri girişi aldığında
oninput Yeni script  Bir element veri girişi aldığında
oninvalid Yeni script  Bir element doğru olmadığında (invalid)
onreset script  Bir form resetlendiğinde
HTML5 desteklemiyor
onselect script  Bir elment seçildiğinde
onsubmit script Bir form onaylandığında

Tüm HTML5 etiketlerince desteklenen özellikler aşağıda listelenmiştir birkaç istisna haricinde. HTML5 Genel Özellikleri Yeni : HTML5'teki yeni özellikler. Özellik Değer Tanım accesskey character Bir elemente erişmek için klavye kısayolu tanımlar. class classname Bir element için class adı oluşturur (stil dosyası için). contenteditable  Yeni true false Kullanıcının içeriği düzenleyip düzenlememe izni verilip verilmemesi - true, izinli - false, değil-. contextmenu  Yeni menu_id Bir element...