html div kullanımı

Şubat 24th, 2014 by admin No comments »

Sponsorlu Bağlantılar

Html in olmazsa olmazlarındandır div etiketi, kodun her yerinde kullanabilirsiniz. Div etiketinin içine istediğiniz bütün içerikleri ekleyebilirsiniz. Div neden olmazsa olmazı konusuna geldiğimiz de html kodlarınızın görsel tasarlama kısmında css ile şekillendirmeye güzellik katmaya geldiğiniz de anlarsınız. Div lerinizi düzenleyerek daha güzel bir görünüme ve düzen sağladığını derli toplu bir görünüme kavuşacaktır. O yüzden siteler div etiketi kullanılarak kodlanır.

class="entry-content">

Div ile kullanılabilecek özellikler;

id: Bu sizin divinize vericeğiniz benzersiz bir isim veya numara olabilir. Görünümü etkilemez ancak o div etiketinin nereye ait olduğunu ve stil dosyasında tanımlanmışsa özelliklerini rahat bulmanıza yarar.
class="alert white">
<div id=”verdiginiz_id”></div>
class:  Class özelliği stil dosyanızda belirlediğiniz özellikleri div etiketinize aktarmanıza yarar.
width: 100%;"><div class=”stil_sayfanizdaki_class”></div>

height: 1.5em;">position: height: 1.5em;"> Blok parçanızın nasıl durucağını belirtir.

  1. Static: Hiç bir değer girmezseniz div etiketi “static” özelliğini kendi atar ve blok parçanız bir bütün olarak durup, pozisyonu belli olmadığını ve varsayılan değerde gözüküceğini belirtir. Static özelliğini daha önce belirttiğiniz bir stili boşaltmanız için kullanabilirsiniz. Genellikle kullanılmaz ve birden çok div etiketi kullandığınızda başka bir değer atamadığınızda bloklarınız alt alta sıralanır.
    width: 100%;"><div style=”position:static;”>İçerik</div>
    
  2. Relative: Relative özelliğini seçerseniz top, bottom, left veya right seçeneklerini kullanabilirsiniz. Blok düzenini gözüktüğü pozisyondan sağa sola yukarıya veya aşağıya kaydırmanıza yarar.
    border: 1px dashed #999999; line-height: 14px; padding: 5px; overflow: auto; width: 100%;"><div style=”position:relative;”>İçerik</div>
    
  3. Absolute: Absolute özelliğini seçtiğinizde blok parçanız sayfaya göre ayarlanır ve relative gibi top, bottom, left veya right özelliklerini alır. İç içe geçmiş bazı divler dışında sayfanızda sabit tutmak istediğiniz parçalar için kullanır. Bir sonraki özellikte başka bir div’in içerisinde nasıl sabit tutulucağını görüceksiniz.
    border: 1px dashed #999999; line-height: 14px; padding: 5px; overflow: auto; width: 100%;"><div style=”position:absolute; left:10px; right:10px; top:10px; bottom:10px;”>İçerik</div>
    
  4. Relative + Absolute: Bir blok parçasının içerisinde sabit yeri değişmeyen başka bir blok parçası yaratmak istediğimizde dıştaki blok relative özelliğini alır ve içerideki blok absolute özelliğini alır. Daha sonra absolute özelliğinin aldığı top, bottom, left veya right özellikleri dıştaki blok parçasına göre hizalanır.
    background-color: #eee; font-size: 12px; border: 1px dashed #999999; line-height: 14px; padding: 5px; overflow: auto; width: 100%;"><div style=”position:relative;”><div style=”position:absolute; left:10px; top:5px;”>İçerik</div></div>
    
  5.  Fixed: Fixed özelliği gözümüzün gördüğü yeri baz alarak hizalama yapar. Sayfayı aşağıya yukarıya oynatmanız blok parçasının yerini değiştirmez. Yukarıda bahsettiğim sinir bozucu reklamlar gibi siz sayfada aşağı veya yukarı gitseniz de onun yeri gözümüzün gördüğü kısma yerleştirilmiş olduğu için sabit kalacaktır. Bir web sitesine imza atmak istediğinizde, ortada reklam çıkartmak istediğinizde, facebook’un eski chat özelliği gibi sürekli aşağıda gözükür biçimde bloklar oluştrmak için kullanabilirsiniz.
    background-color: #eee; font-size: 12px; border: 1px dashed #999999; line-height: 14px; padding: 5px; overflow: auto; width: 100%;"><div style=”position:fixed; left:10px; top:50%;”>İçerik</div>
    
float: Bazen ölçülerin hepsini tam giremeyiz özellikle dinamik dökümanlarda yükseklik sürekli değişebileceğinden dolayı position özelliğini kullanmak sitede sorunlara yol açabilir. Bloklarımızı birbirine dayamaya yarayan float özelliğini kullanabiliriz. Float özelliği left ve right olarak iki özellik ile kullanılabilir. Bloklarınızı mümkün olduğu kadar sağa veya sola dayamanıza yarar.
<div style=”float:left;”>İçerik</div>
top:  Absolute ve relative ile kullanılır. Yüzde veya piksel olarak kullanılabilir. Üst kısımdan uzaklığı belirlemek için kullanılır.
bottom Absolute ve relative ile kullanılır. Yüzde veya piksel olarak kullanılabilir. Alt kısımdan uzaklığı belirlemek için kullanılır.
right Absolute ve relative ile kullanılır. Yüzde veya piksel olarak kullanılabilir. Sağ kısımdan uzaklığı belirlemek için kullanılır.
left Absolute ve relative ile kullanılır. Yüzde veya piksel olarak kullanılabilir. Sol kısımdan uzaklığı belirlemek için kullanılır.
width: Blok parçanızın genişliğini belirtir. Yüzde veya piksel olarak kullanılabilir.
<div style=”width:450px;”>İçerik</div> veya <div style=”width:50%;”>İçerik</div>
height: Blok parçanızın yüksekliğini belirtir. Yüzde veya piksel olarak kullanılabilir.
<div style=”height:450px;”>İçerik</div> veya <div style=”height:50%;”>İçerik</div>
z-index: Üst üste gelen bloklarınız varsa bunların sırasını belirtir. En arkada kalmasını istediğiniz bloklar için genellikle -9999 değeri kullanılır. Apartman katları gibi düşünülebilir. Sayı büyüdükçe blok üst kata çıkar. Z-index’i 1 olan blok, Z-index’i 2 olan blok parçasının altında kalacaktır.
<div style=”z-index:-9999;”>İçerik</div>
padding: Blok parçanızın içindeki içeriğin blok kenarlarına olan uzaklığını ayarlamak için kullanılır. Padding’i tek seferde padding: 10px 20px 30px 40px; olarak (10px  üst kısım, 20px sağ kısım, 30px alt kısım ve 40px sol kısım) veya padding-left, padding-right, padding-top ve padding-bottom diye ayrı ayrı değerler girerek kullanabilirsiniz.
<div style=”padding; 0 10px 15px 20%;”>İçerik</div>
<div style=”padding-top:10px;”>İçerik</div>
Eğer üst alt sağ ve sol taraftan aynı boşluk olmasını isterseniz 4 kez değer girmenize gerek yoktur aşağıdaki gibi kullanabilirsiniz.
<div style=”padding:10px;”>İçerik</div>
margin: Blok parçanızın etrafındaki boşlukları ayarlamak için kullanılır. Margin’i tek seferde margin: 10px 20px 30px 40px; olarak (10px  üst kısım, 20px sağ kısım, 30px alt kısım ve 40px sol kısım) veya margin-left, margin-right, margin-top ve margin-bottom diye ayrı ayrı değerler girerek kullanabilirsiniz.
<div style=”margin; 0 10px 15px 20%;”>İçerik</div>
<div style=”margin-top:10px;”>İçerik</div>
Eğer üst alt sağ ve sol taraftan aynı boşluk olmasını isterseniz 4 kez değer girmenize gerek yoktur aşağıdaki gibi kullanabilirsiniz.
<div style=”margin:10px;”>İçerik</div>

 border: Blok parçanıza çerçeve eklemek için kullanılır. Çerçevenin kalınlığını, tipini ve rengini ayarlayabilirsiniz.

<div style=”border:1px solid #161616;”>İçerik</div>
Çerçevelerinin noktalı olmasını isterseniz
<div style=”border:1px dotted #000;”>İçerik</div>
background:  Blok parçanızın arka planını ayarlamak için kullanılır. Arka plana rengini ayarlayabilir veya bir resim yerleştirip resimin yerini ayarlayabilirsiniz. Aynı zamanda koyduğunuz resmin tekrar etmesini veya bittiği yerde hangi arka plan renginin ayarlanmasını istediğinizide belirtebilirsiniz.
Degrade bir çizgi yaptınız ve bunun sağa doğru devam etmesini istiyorsunuz. Aşağıdaki repeat-x komutunu ekleyerek arka planıın sadece x ekseni boyunca devam etmesini sağlayabilirsiniz.
<div style=”background:url(adres.jpg) repeat-x;”>İçerik</div>
Arka planın devam etmesini istemiyorsanız eğer aşağıdaki kodu kullanın
<div style=”background:url(adres.jpg) no-repeat;”>İçerik</div>
text-align: Blok parçanız içindeki içeriğin nasıl hizalanması gerektiğini ayarlamanız için kullanılır.
<div style=”text-align:center;”>İçerik</div>
Blok parçanızda scroll istiyorsanız aşağıdaki özelliği ekleyebilirsiniz
<div style=”overflow:auto;”>İçerik</div>
Takıldığınız yer yada sormak istediğiniz herhangi bir soru olursa sormaktan çekinmeyin elimden geldiği kadarıyla yardımcı olmaya çalışırım…

html tablo oluşturma

Şubat 24th, 2014 by admin No comments »

Sponsorlu Bağlantılar

Html de tablo oluşturmak o kadar basittir ki; sizler de kolaylıkla tablolarınızı oluşturabilirsiniz. Tek yapmanız gereken kafanız da canlandırmak tablo oluşumunu sonra kodlar kendiliğinden oluşacaktır. Kaç satır ve sutundan oluşacağına karar verin yeter.

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<table>

satır oluşturmak için

<tr></tr>

sutun oluşturmak için

<td></td>

kullanılır.

html boşluk karakteri

Şubat 24th, 2014 by admin No comments »

Html de birden fazla boşluk bırakmak için space tuşuyla yapamazsınız.Birden fazla boşluk bırakmak istediğiniz de onun ayrı bir kodu vardır. O kodu kullanarak istediğiniz kadar boşluk bırakabilirsiniz. Kodun kullanımı basittir boşluk bırakmak istediğiniz yere bu kodu yazarak istediğiniz kadar boşluk bırakabilirsiniz.

Kodun kullanımı

&nbsp;

copyright kodu

Şubat 21st, 2014 by admin No comments »

Nerdeyse bütün web sitelerin footer yani sayfanın alt kısmında gördüğümüz “©” işarettir. Kopyalanamaz anlamı içeren bu işareti site ismi ve sitenin açılış yılı arasında sıklıkla kullanılır.

Bu işareti kopyalayıp yapıştırsanız dahi kodunu yazmadığınız sürece zor çalışır.

html kod : ©

&copy;

html kodları

Şubat 21st, 2014 by admin No comments »

html kodları olarak kaldığımız yerden başlamayı bende isterdim ama izlemiş olduğum seo çalışması sonucunda belli bir süre siteyi kaptmam gerekdi şimdide sıfırdan başlıyorum. Umarım eski zamanındaki popületirliğini yakın zamanda sizlerinde sayesinde kazanır. Yeni web sitesiyle uğraşan acemi olan veya bu işe merak saran ziyaretçilerimize gerek hazır kodlarla hazırlanmış eklentiler gerek sıfırdan kodlamasını göstererek sizlere öncü olmak istiyorum…

Genelde html ve css konusunda sormak istediğiniz varsa çekinmeden sorabilirsiniz. Elimden gelen yardımı gösteririm.

Switch to our mobile site