Önceki dersimizde size html'in kümelerden oluştuğunu, bu kümelere element dediğimizi söylemiştik. Ayrıca her kümenin(elementin) kendi özellikleri olduğunu da söylemiştik.
Hatırlarsanız bir element, bir açılış etiketi, bir içerik ve bir kapanış etiketi ile oluşturuluyordu.
Örneğin:
a elementinin bir özelliğini kullanacaksak, bunu açılış etiketinin içinde kullanırız:
Eğer sembolü div olan bir elemetin bir özelliğini kullanacak olsaydık, şöyle yapardık:
Örneğin a kümesinin bir özelliği href dir. href özelliği link vermeye yarar. Bu özelliğin değeri ise adres tir
Başka bir örnek yaparsak daha iyi anlarsınız. Şimdi bir body elementi oluşturalım. Body elementi, bulunduğu yeri kaplayan bir alan oluşturur ve içine başka elementler konulur. Biz de body elementimizin içine bir a elementi koyacağız:
Body elementinin bir özelliği bgcolor dır. bgcolor özelliği arkaplan rengini değiştirmeye yarar. Bu özelliğin değeri ise doğal olarak renk adıdır. özellik="değer" kalıbımızı kullanıyoruz:
Şimdi a elementinin title özelliğini kullanalım. Title özelliği, elementin üzerine mouse ile beklediğinizde küçük bir kutucukta açıklama oluşturmaktır. Title özelliğinin değeri yazıdır. yani herhangi bir yazı kullanabilirsiniz:
Burada bir başka şeye daha dikkat çekmek istiyorum. farkedeceğiniz gibi, Kodu yazarken arayaboşluklar ve boş satırlar koydum. Bunu yapmamın sebebi size bir şeyi göstermek:
HTML kodlarında bir veya daha fazla boşluk koyarsanız bu bir boşluk olarak görünür.
Satır atlamak ise gereksizdir çünkü html kodlarında istediğiniz kadar satır atlayın, tüm kodlarınızı aynı satıra yazmanızdan hiç bir farkı olmaz.
Gayet makul bir soru. Satır atlamaya yarayan bir element var. Evet var. Sembolü br olan bu kümenin tek özelliği bir satırlık atlama oluşturması:
Dikkatinizi çekecek şey muhtemelen <br/> nin çok saçma görünmesi olacak.
Evet, bu elementin bir açılış ve kapanış etiketi yok. Çünkü Gerek Yok.
Diyelim ki br kümesi şöyle bir şey olsaydı:
İçine ne koyacaktık? Satır atlamanın içi olmaz. Bu nedenle bu element tek bir etiketle hem açılıp hem kapatılıyor:
Burada kafanız karışmaya başlamasın. İçine birşey konulamadığı için bu şekilde yazılan elementler sadece birkaç tane:
örneğin <hr/> elementi yatay bir çizgi yerleştirmeye yarar. HTML dili yaratılırken <hr></hr> şeklinde kararlaştırılmamasının sebebi, çizginin içine bir şey konulamayacak olmasıdır:
Bu dersi iyi çalışın. Bundan sonraki birkaç dersimizde a img table div gibi elementleri öğreneceğiz. Ozamana kadar bir ön hazırlık yapmak isteseniz Kod Deneme Editörümüz 'de şu kodları deneyebilir, değişiklikler yapıp pratiğinizi geliştirebilirsiniz:
Peki bu özellikler nasıl kullanılır?
Hatırlarsanız bir element, bir açılış etiketi, bir içerik ve bir kapanış etiketi ile oluşturuluyordu.
Örneğin:
<a> Merhaba </a>gibi.
a elementinin bir özelliğini kullanacaksak, bunu açılış etiketinin içinde kullanırız:
<a özellik="değer"> Merhaba </a>
Eğer sembolü div olan bir elemetin bir özelliğini kullanacak olsaydık, şöyle yapardık:
<div özellik="değer"> İçerik </div>
Özellik ve değer?
Örneğin a kümesinin bir özelliği href dir. href özelliği link vermeye yarar. Bu özelliğin değeri ise adres tir
| Kod: | Önizlemesi: |
| <a href="https://google.com">Merhaba</a> | Merhaba |
Başka bir örnek yaparsak daha iyi anlarsınız. Şimdi bir body elementi oluşturalım. Body elementi, bulunduğu yeri kaplayan bir alan oluşturur ve içine başka elementler konulur. Biz de body elementimizin içine bir a elementi koyacağız:
| Kod: | Önizlemesi: |
| <body> <a> Merhaba </a> </body> | Merhaba |
Body elementinin bir özelliği bgcolor dır. bgcolor özelliği arkaplan rengini değiştirmeye yarar. Bu özelliğin değeri ise doğal olarak renk adıdır. özellik="değer" kalıbımızı kullanıyoruz:
| Kod: | Önizlemesi: |
| <body bgcolor="red"> <a> Merhaba </a> </body> | Merhaba |
Şimdi a elementinin title özelliğini kullanalım. Title özelliği, elementin üzerine mouse ile beklediğinizde küçük bir kutucukta açıklama oluşturmaktır. Title özelliğinin değeri yazıdır. yani herhangi bir yazı kullanabilirsiniz:
| Kod: | Önizlemesi: |
<a title="Merhaba!"> Bu yazının üzerinde farenizi bekletin. </a> | Bu yazının üzerinde farenizi bekletin. |
Burada bir başka şeye daha dikkat çekmek istiyorum. farkedeceğiniz gibi, Kodu yazarken arayaboşluklar ve boş satırlar koydum. Bunu yapmamın sebebi size bir şeyi göstermek:
HTML kodlarında bir veya daha fazla boşluk koyarsanız bu bir boşluk olarak görünür.
Satır atlamak ise gereksizdir çünkü html kodlarında istediğiniz kadar satır atlayın, tüm kodlarınızı aynı satıra yazmanızdan hiç bir farkı olmaz.
Yazılar arasında nasıl satır atlıyoruz?
Gayet makul bir soru. Satır atlamaya yarayan bir element var. Evet var. Sembolü br olan bu kümenin tek özelliği bir satırlık atlama oluşturması:
| Kod: | Önizlemesi: |
| <a>selam</a> <br/> <a>Nasılsın</a> | selam
Nasılsın |
Dikkatinizi çekecek şey muhtemelen <br/> nin çok saçma görünmesi olacak.
Bu da ne??
Evet, bu elementin bir açılış ve kapanış etiketi yok. Çünkü Gerek Yok.
Diyelim ki br kümesi şöyle bir şey olsaydı:
<br> </br>
İçine ne koyacaktık? Satır atlamanın içi olmaz. Bu nedenle bu element tek bir etiketle hem açılıp hem kapatılıyor:
<br/>
Burada kafanız karışmaya başlamasın. İçine birşey konulamadığı için bu şekilde yazılan elementler sadece birkaç tane:
<br/>
<input/>
<img/>
<hr/>
örneğin <hr/> elementi yatay bir çizgi yerleştirmeye yarar. HTML dili yaratılırken <hr></hr> şeklinde kararlaştırılmamasının sebebi, çizginin içine bir şey konulamayacak olmasıdır:
Bu dersi iyi çalışın. Bundan sonraki birkaç dersimizde a img table div gibi elementleri öğreneceğiz. Ozamana kadar bir ön hazırlık yapmak isteseniz Kod Deneme Editörümüz 'de şu kodları deneyebilir, değişiklikler yapıp pratiğinizi geliştirebilirsiniz:
<a href="https://www.koddostu.com" target="_blank">
<img src="https://ssl.gstatic.com/s2/oz/images/settings/privacy/vis-profile.png" />
<br/><br/><b><font color="red">Yaşasın!</font> </b>
</a>