Kod Dersleri
Hazır Kod
Kod Önizleme
Blogger Widget
Siteni Ekle
Google+ Sayfamız
Tekrar Merhaba! Bu dersimizde html resim elementinin özelliklerini ve başlık elementlerini inceleyeceğiz.
Merhaba! bu dersimizde bazı elementlerin özelliklerini ve kullanım örneklerini öğreneceğiz.
Bu yazıyı bitirince yapabilecekleriniz:
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:
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 http:// 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 http://birsite.tr.gg ise, ve kod <a href="/anasayfa.html">Bir site</a> gibiyse, yazıya tıklandığında http://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:
<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:
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!
[ Devamını Görmek İçin Tıklayın ]
Bu yazıyı bitirince yapabilecekleriniz:
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="http://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="http://google.com">Tıkla</a> | Tıkla |
Ancak burada bilmeniz gereken önemli bir şey var. Eğer href değerinin başına http:// 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 http://birsite.tr.gg ise, ve kod <a href="/anasayfa.html">Bir site</a> gibiyse, yazıya tıklandığında http://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="http://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!
Ö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> 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>
Ö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ı:
<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="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>
[ Devamını Görmek İçin Tıklayın ]
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="http://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="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>
HTML her şeyden önce bir dildir. HTML'i bir ayda öğrenilebilecek kadar kolay yapan şey ise mantığının çok basit olmasıdır. Yabancı dillerde yüzlerce gramer kalıbı vardır. Html'de ise uymanız gereken tek bir kalıp vardır.
HTML kolay bir dildir. Bizim kullandığımız teknik ile öğrenmek daha da kolay olacak. Ancak her şeyden önce, sabredip bu bir sayfalık yazıyı okumalısınız. Yoksa ne bu sitede, ne de başka bir sitede pek bir şey anlayamayacaksınız.
[ Devamını Görmek İçin Tıklayın ]
