Y Giriş Yap

   Tarih:
Merhaba! bu dersimizde bazı elementlerin özelliklerini ve kullanım örneklerini öğreneceğiz.
 

Bu yazıyı bitirince yapabilecekleriniz:
    Yazılara link vermek
    Linklerin yeni pencerede veya aynı pencerede açılmasını sağlamak
    Bilgilendirici not eklemek
    Yazılara class, id veya name atamak

    Öyleyse lafı fazla uzatmayalım ve dersimize başlayalım:

    A Elementinin Özellikleri

    Geçtiğimiz derste, her bir elementin nasıl açıldığını, element özelliklerinin nasıl eklendiğini anlatmıştık. Şimdi içinde "merhaba" yazan bir a elementi oluşturalım:
    <a>Merhaba</a>

    A elementinin özelliklerini şu şekilde kullandığımızı söylemiştik:
    <a özellik="deger">Merhaba</a>

    Şimdi a elementinin en çok kullanılan özelliklerini ve alabilecekleri değerleri tablo halinde göstermek istiyorum:


    Özellik Alabileceği Değerler Örnek
    name herhangi bir kelime <a name="naber"> Merhaba </a>
    href link <a href="https://google.com"> Merhaba </a>
    target _blank_top , _self veya _parent <a target="_blank"> Merhaba </a>
    class herhangi bir kelime <a class="naber"> Merhaba </a>
    style CSS kodları <a style="text-decoration:underline;"> Merhaba </a>
    title Herhangi bir yazı <a title="karşılama mesajı"> Merhaba </a>



    Şimdi bu özellikleri tek tek ele alalım:

      Name özelliğinin etkisi, web sayfasında doğrudan görünmez. Açıkçası name özelliğinin tek kullanım amacı, sayfadaki yazılara ve bazı başka elementlere kısa adlar koyarak daha sonra bunlara daha kolay ulaşmaktır. Daha sonra bahsedeceğim "sayfa içine köprü kurmak" yönteminde de kullanılırlar.

      Ayrıca javascript dilinde de bazı elementlere ulaşmak için kullanılır. Bunu şöyle düşünün:  javascript dilinde, sayfanızdaki bir paragrafa bir efekt vereceksiniz diyelim. Mesela o paragraf küçülerek kaybolsun istiyorsunuz. Bu durumda önce paragrafa bir name değeri verirsiniz. Örneğin adı "paragrafımm" olsun. Javascript komutlarını oluştururken, tarayıcıya şöyle dersiniz: "paragrafımm isimli elementi getir, sonra ona şu şu efektleri uygula". Bu kısmı okumak veya anlamak zorunda değilsiniz. Sadece meraklılar için ek bir bilgi bu.

      href özelliği, tahmin edebileceğiniz gibi, elemente link vermeye yarar. Elbette her elemente link veremezsiniz. Örneğin bir tablonun kenarlığına tıklandığında bir adrese gitmesini sağlayamazsınız çünkü tablo elementinin href özelliği yoktur. Bunu daha sonra göreceğiz. Href özelliği kısaca,yazıya tıklandığında açılacak olan linki belirlemek için kullanılır. Eğer href özelliğini yazmazsanız, yazıya link vermemiş olursunuz.


    Kod Önizlemesi
    <a href="https://google.com">Tıkla</a> Tıkla

      Ancak burada bilmeniz gereken önemli bir şey var. Eğer href değerinin başına https:// koymazsanız, tarayıcı, yazdığınız değerin başına, o anki sitenin adresini ekler. Yani eğer kodun bulunduğu sayfanın adresi https://birsite.tr.gg ise, ve kod <a href="/anasayfa.html">Bir site</a> gibiyse, yazıya tıklandığında https://birsite.tr.gg/anasayfa.html adresine gidilir. Bu kısımla ilgili sorunuz varsa yorum olarak yazabilirsiniz.


       target özelliği (ingilizce hedef demek) , linkin nasıl açılacağını belirler. target değeri _blank olan bir link, yeni, boş bir sayfa veya sekmede açılır. target özelliği _self olan link, tıklandığı sayfada açılır. _parent ve _top değerlerini ise başka bir dersimizde, iframe'den bahsederken açıklayacağız.
    Kod Önizlemesi
    <a href="https://google.com" target="_blank">Tıkla</a> Tıkla

      class özelliği yazılara sınıf atamanızı sağlar. Yani 4000 kişilik bir okul olduğunu düşünün. Eğer öğrencileri sınıflara ayırmazsanız büyük bir kargaşa olurdu değil mi? Sınıflar, css kodlarında, yazılan bir kodun hangi elemente uygulanacağını belirlemeye yarar.

      Aslında henüz css öğrenmeyeceksiniz. Ama class özelliğini anlamanız için küçük bir örnek yapalım:

      Genelde sitemizde iki dosya bulundururuz. Birinde CSS, diğerinde HTML kdolarımız bulunur. Css kodları, html kodlarındaki renkleri, arkaplanları, genişlikleri ve hatta saydamlıkları belirlememize yarar. Örneğin html kodumuz şöyleyse:

    <a>kırmızı</a>
    <a>normal</a>
    <a>bu da kırmızı</a>

    birinci ve üçüncü yazının kırmızı olmasını istiyorsak, bu yazılara ortak bir sınıf veririz. sınıfın adı herhangi bir kelime olabilir:

    <a class="midyedolma">kırmızı</a>
    <a>normal</a>
    <a class="midyedolma">bu da kırmızı</a>

    ardından css dosyamıza, şu css kodunu ekleriz:

    .midyedolma{ color:red; }

    yukarıdaki css kodlarını anlamanıza gerek yok. Sadece, class özelliğinin, css kodlarının uygulanacağı elementleri seçmek için kullanıldığını anlayın.


      style  özelliği de yine css ile ilgilidir.Belli bir elemente css kodları uygulamak için, kodları direkt o elementin içine yerleştirebiliriz. Örnek:

    <a style="color:red;"></a>
     gibi. Ancak bu da css konusuna girdiği için, bu özelliği şimdilik anlamanıza gerek yok.

      title özelliği, kullanıcı elementin zerinde faresini beklettiği zaman görünecek olan bilgilendirici bir not eklememizi sağlar. Bu özeliği geçen dersimizde örneklemiştik:

    Kod Önizlemesi
    <a title="teşekkürler!">bu yazının üstüne gelip bekleyin</a> bu yazının üstüne gelip bekleyin



      id özelliği de class özelliği gibidir. Ancak id özelliği css dışında, javascriptte de çok işe yarar. Bu özelliği de şimdilik bilmenize gerek yok.


      Bu dersimizi bunlarla sınırlı tutmamız daha iyi olacak. Biliyorum, bu yazıda öğrendikleriniz pek eğlenceli değil. Ancak bu ders mümkün olduğunca basit ve anlaşılır bir şekilde anlatıldığı için, sonraki derslerde daha yetenekli pek çok elementi, daha basit ve hızlı bir şekilde anlayabileceksiniz.

      Bir sonraki dersimizde img, h1,h2,h3,h4,h5,h6 elementlerini inceleyeceğiz. İyi çalışmalar!
    Kod Dostu
    Kod Dostu tarafından eklenmiş hazır kodlar için tıklayın.

    Kod Puanı: Çok
    kodNinjaları: Siyah Kuşak

    Yorumlar:

    Koddostu Ekip Üyeleri Arıyor! Tıkla Başvur!