10-20-2013, 12:14 AM
Ö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.
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:
gibi..
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:
Ö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
Önizlemesi:
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:
Önizlemesi:
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:
Önizlemesi:
Merhaba(arka planlı kırmızı renk şeklinde)
Ş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:
Önizlemesi:
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ı:
Önizlemesi:
selam
Nasılsın
Dikkatinizi çekecek şey muhtemelen
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ı:
İç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
elementi yatay bir çizgi yerleştirmeye yarar. HTML dili yaratılırken
ş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:
alıntı
kaynak: koddostu.com
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:
Kod:
<a> Merhaba </a>a elementinin bir özelliğini kullanacaksak, bunu açılış etiketinin içinde kullanırız:
Kod:
<a özellik="değer"> Merhaba </a>Eğer sembolü div olan bir elemetin bir özelliğini kullanacak olsaydık, şöyle yapardık:
Kod:
<div özellik="değer"> İçerik </div>Ö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:
<a href="http://google.com">Merhaba</a>Önizlemesi:
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:
<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:
<body bgcolor="red"> <a> Merhaba </a> </body>Önizlemesi:
Merhaba(arka planlı kırmızı renk şeklinde)
Ş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:
<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:
<a>selam</a> <br/> <a>Nasılsın</a>Önizlemesi:
selam
Nasılsın
Dikkatinizi çekecek şey muhtemelen
Kod:
<br/>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ı:
Kod:
<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:
Kod:
<br/>Burada kafanız karışmaya başlamasın. İçine birşey konulamadığı için bu şekilde yazılan elementler sadece birkaç tane:
Kod:
<br/>
<input/>
<img/>
<hr/>örneğin
Kod:
<hr/>Kod:
<hr></hr>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:
Kod:
<a href="http://siteneeklekodlari.blogspot.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>alıntı
kaynak: koddostu.com
