Merhaba! bu dersimizde bazı elementlerin özelliklerini ve kullanım örneklerini öğreneceğiz.
Bu yazıyı bitirince yapabilecekleriniz:
Öyleyse lafı fazla uzatmayalım ve dersimize başlayalım:
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 elementinin özelliklerini şu şekilde kullandığımızı söylemiştik:
Şimdi a elementinin en çok kullanılan özelliklerini ve alabilecekleri değerleri tablo halinde göstermek istiyorum:
Ş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.
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.
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:
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:
ardından css dosyamıza, şu css kodunu ekleriz:
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:
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:
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!
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!