HTML Eğitim Ders -Div Etiketi

<div style="border: 0px; color: #444444; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div style="border: 0px; color: #444444; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <ol style="border: 0px; margin: 0px 0px 20px 30px; outline: 0px; padding: 0px; vertical-align: baseline;"><div style="border: 0px; line-height: 21px; margin-bottom: 22px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s200-p/html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s200-p/html.jpg" width="200" /></a></div> Html dilinde olmazsa olmazlardan bir tanesi div etiketidir. Div sayfanın her yerine yerleştirebileceğiniz bir bloktur. İçine her türlü içerik girilebilir. Divin asıl amacı sayfayı belirli bloklara bölerek içerik girişlerinin daha rahat yapılması, arka planların daha rahat atanması, özelliklerin daha rahat kullanılmasıdır. Basit olarak div aşağıda yer alan özellikler ile birlikte kullanılır ve bunlar genellikle bir stil sayfasında tutulur. Gördüğünüz sinir bozucu sayfaların ortalarında çıkan reklamlar, uyarı kutucukları, yazıların birbirinden ayrılması, sayfa yapıları üst kısım orta kısım alt kısım olarak genellikle bunların hepsi div etiketleriyle oluşturulur.</div> <div style="border: 0px; line-height: 21px; margin-bottom: 22px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span id="more-153" style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span></div> <div style="border: 0px; line-height: 21px; margin-bottom: 22px; outline: 0px; padding: 0px; vertical-align: baseline;"> Div ile kullanılabilecek özellikler;</div> <ul style="border: 0px; margin: 0px 0px 20px 30px; outline: 0px; padding: 0px; vertical-align: baseline;"> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">id</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">class</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">position</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">float</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">top, left, right, bottom</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">width (35% veya 35px) yüzde veya tam ölçü verilebilir</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">height (35% veya 35px) yüzde veya tam ölçü verilebilir</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">z-index</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">padding (padding-top, padding-bottom, padding-left, padding-right)</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin (margin-top, margin-bottom, margin-left, margin-right)</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background</li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">text-align</li> </ul> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">id: </strong>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.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div id=”verdiginiz_id”></div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">class: </strong> Class özelliği stil dosyanızda belirlediğiniz özellikleri div etiketinize aktarmanıza yarar.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div class=”stil_sayfanizdaki_class”></div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">position: </strong> Blok parçanızın nasıl durucağını belirtir.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <ol style="border: 0px; margin: 0px 0px 20px 30px; outline: 0px; padding: 0px; vertical-align: baseline;"> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Static:</strong> 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.<br /><div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 27.5px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”position:static;”>İçerik</div></div> </li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Relative: </strong>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.<br /><div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 27.5px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”position:relative;”>İçerik</div></div> </li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Absolute: </strong>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.<br /><div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 27.5px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”position:absolute; left:10px; right:10px; top:10px; bottom:10px;”>İçerik</div></div> </li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Relative + Absolute: </strong>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.<br /><div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 27.5px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”position:relative;”><div style=”position:absolute; left:10px; top:5px;”>İçerik</div></div></div> </li> <li style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Fixed:</strong> 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.<br /><div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 27.5px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”position:fixed; left:10px; top:50%;”>İçerik</div></div> </li> </ol> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">float: </strong>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> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”float:left;”>İçerik</div></div> </div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">top: </strong> 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.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">bottom: </strong> 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.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">right: </strong> 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.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">left: </strong> 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.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">width: </strong>Blok parçanızın genişliğini belirtir. Yüzde veya piksel olarak kullanılabilir.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”width:450px;”>İçerik</div> veya <div style=”width:50%;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">height:</strong> Blok parçanızın yüksekliğini belirtir. Yüzde veya piksel olarak kullanılabilir.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”height:450px;”>İçerik</div> veya <div style=”height:50%;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">z-index:</strong> Ü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> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”z-index:-9999;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">padding: </strong>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> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”padding; 0 10px 15px 20%;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”padding-top:10px;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> 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> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”padding:10px;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin: </strong>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> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”margin; 0 10px 15px 20%;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”margin-top:10px;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> 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> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”margin:10px;”>İçerik</div></div> </div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border: </strong>Blok parçanıza çerçeve eklemek için kullanılır. Çerçevenin kalınlığını, tipini ve rengini ayarlayabilirsiniz.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”border:1px solid #161616;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> Çerçevelerinin noktalı olmasını isterseniz</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”border:1px dotted #000;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background: </strong> 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.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> 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> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”background:url(adres.jpg) repeat-x;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> Arka planın devam etmesini istemiyorsanız eğer aşağıdaki kodu kullanın</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”background:url(adres.jpg) no-repeat;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">text-align: </strong>Blok parçanız içindeki içeriğin nasıl hizalanması gerektiğini ayarlamanız için kullanılır.</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert white" style="background-color: white; border-bottom-color: rgb(228, 228, 228); border-bottom-style: solid; border-top-color: rgb(228, 228, 228); border-top-style: solid; border-width: 1px 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> Kullanımı: <div style=”text-align:center;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> Blok parçanızda scroll istiyorsanız aşağıdaki özelliği ekleyebilirsiniz</div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <div class="alert red" style="background-color: #ffd7d8; border-bottom-color: rgb(249, 186, 199); border-bottom-style: solid; border-top-color: rgb(249, 186, 199); border-top-style: solid; border-width: 1px 0px; color: #d54c4c; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; outline: 0px; padding: 12px 29px; text-align: center; vertical-align: baseline;"> <div style=”overflow:auto;”>İçerik</div></div> </div> <div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> Bu HTML Dersimizin sonu oldu. Tabiki tam olarak son değil. Pek çok yerde verilmeyen HTML etiketlerini de sizerle paylaşacağız.</div> </ol> </div> </div>

HTML Eğitim Ders -Div Etiketi

Html dilinde olmazsa olmazlardan bir tanesi div etiketidir. Div sayfanın her yerine yerleştirebileceğiniz bir bloktur. İçine her türlü ...

Devamı »

HTML Eğitim Ders 4-Tablolar

<h3> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s320/html.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s320/html.jpg" width="165" /></a>Tablolar</h3> <div> Tablolar çok kolaydır. Fakat büyük tabloları ve hücreleri birleştirilmiş tabloları kontrol etmek hiç kolay değildir. Neyse hadi başlayalım.</div> <div> <br /></div> <div> Tablo açmak için ilk olarak <table> etiketini kullanırız. Her satır için <tr> etiketini her satıra sütun eklemek için <tr> etiketinin içine <td> etiketi koyarız. Örneğin:</div> <div> <br /></div> <div> <table></div> <div> <tr></div> <div> <td>1</td></div> <div> <td>2</td></div> <div> </tr></div> <div> <tr></div> <div> <td>3</td></div> <div> <td>4</td></div> <div> </tr></div> <div> </table></div> <div> <br /></div> <div> İlk olarak tablo etiketini açtık. Sonra bir satır oluşturduk. Satırda daha kaç sütun olduğu belli değil. Sonra satıra sütun ekledik. Satırı kapattığımız zaman sütün sayısı belli oldu. Aynı şeyi aşağıyada yapıp tablomuzu bitirdik. Burası kolay kısım. Şimdi gelelim hücre birleştirmeye.</div> <div> <br /></div> <div> <div> <table></div> <div>       <tr></div> <div>          <td colspan="2">1</td></div> <div>       </tr></div> <div>       <tr></div> <div>          <td rowspan="2">2</td></div> <div>          <td>3</td></div> <div>       </tr></div> <div>       <tr></div> <div>          <td>4</td></div> <div>       </tr></div> <div>    </table></div> </div> <div> <br /></div> <div> Burada sütunları birleştirmek için "colspan". Satırları birleştirmek için "rowspan" kullandık. Bu özelliklerin hemen yanındaki kaç satırlık ya da sütunluk yer kapladığını gösterir. Örneğin 1. satırda 1 ve 2'yi birleştirmek için, yada onun yerini tutması için 2 sütunluk yer kaplamasını sağladık. Bir adet sağ doğru uzadı diye düşünelim. Sonra satırları alt alta 2 kere birleşsin diye "rowspan"a 2 yazdık. Böylece bir alta kaydı. Fakat başta "colspan" bir sütun sağa kayıp tabloyu uzatmıştı. Bundan dolayı "rowspan" ile bu uzatmaları tek tek tamamlamalıyız. Eğer boyutlarını değiştirmek istiyorsanız "width" ve "height" kullanabilirsiniz. Tablo içindeki yazıları ortalamak veya sağa, sola almak istiyorsanız "aling="center"" özelliğini kullanın. Anlamadığınızı biliyorum. Bunları kod deneme editöründe deneyerek öğrenebilirsiniz. </div> <div> <br /></div> <div> Bu ders bu kadar. Tabloları anlamak zordu. Sitenize tablolardan ekleyin ve biraz çalışın. Sonraki dersimizde tablo özelliklerini göreceğiz. Kolay gelsin.</div> <!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-QvBwULpRCQc%2FTv4KUofXazI%2FAAAAAAAAAY0%2FL00FBpge9iU%2Fs320%2Fhtml.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s320/html.jpg" -->

HTML Eğitim Ders 4-Tablolar

Tablolar Tablolar çok kolaydır. Fakat büyük tabloları ve hücreleri birleştirilmiş tabloları kontrol etmek hiç kolay değildir. Neyse hadi ...

Devamı »

HTML Eğitimi Ders 3-Frame

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s320/html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s320/html.jpg" width="165" /></a></div> <h3> Frame Nedir?</h3> Frame Html'de birden fazla belgeye tek bir sayfada yer vermek amacıyla açılan pencerelerdir. Çok fazla kullanılmaz. Ama çok işe yarar.<br /> <br /> <h3> Başlayalım</h3> <div> Frame oluşturmak için <frameset> etiketini kullanırız. Frame desteklemeyen tarayıcılar için ayrı bir mesaj <noframes> etiketleri arasına konur. Dikey frame için "cols", yatay frame için "rows" kullanılır. Örneğin bir sayfayı iki bölüme böleceğiz ve birinci bölüm %20, ikinci bölüm %80 dikey yer kaplayacak. (Piksel olarak da verilebilir)</div> <div> <br /></div> <div> <frameset cols="20%,80%"></div> <div> <div>       <frame src="frame_1.htm"></div> <div>       <frame src="frame_2.htm"></div> <div>    </frameset></div> </div> <div> <br /></div> <div> Dikkat etmemiz gereken "cols" ve "rows"dur. Gerisi çok kolaydır. Eğer "%10,%50,*" diye frame yazarsak 1. frame %10, 2. frame %50, 3. frame kalan yerleri kaplar. Yani "*" işareti kalan yerleri kapla anlamındadır. Eğer "cols" ve "rows"u birlikte kullanacaksak:</div> <div> <br /></div> <div> <div>  <frameset rows="75%,25%"></div> <div>    <frame src="frame_1.htm"></div> <div>       <frameset cols="25%,75%"></div> <div>          <frame src="frame_b.htm"></div> <div>          <frame src="frame_c.htm"></div> <div>       </frameset></div> <div>    </frameset></div> </div> <div> <br /> Burada da dikkat etmemiz gereken sıralardır. Frame kendisini sizin yazdığınız sıraya göre ayarlar. Frame fazla kullanmayacağınızdan bunu tam olarak öğrenmenize gerek yok.</div> <div> <br /></div> <h3> Iframe</h3> <div> Başka bir sitedeki frame kendi sitene aldığın zaman ıframe olur. Örneğin aşağıdaki kodu sitenize ekleyin. (<body> ve </body> arasına değil)</div> <div> <div>   </div> <div> <iframe src="http://kodboy.blogspot.com" frameborder="1" width="200" height="200" ></iframe><br /> <br /> Gördüğünüz gibi "width" ve "height" kullanarak ıframe'ın boyutunu ayarladık. "frameborder"ı kullanarak kenar genişliğini ayarladık.Diğer ıframe ayarları aşağıdadır.<br /> 1.scrolling="no"    Kaydırma çuğuğunu göstermez.<br /> 2.noresize="noresize"    "frame src="#" koduna eklenince boyut ayarlama engellenir.<br /> <br /> Bu derslik bu kadar. İsterseniz KodBoy'un iframe'nı sitenize ekleyebilirsiniz. Bir sonraki derste en sevdiğim konu tabloları göreceğiz. Kolay gelsin.<br /> <br /></div> <div>    </div> </div> <div> <br /></div>

HTML Eğitimi Ders 3-Frame

Frame Nedir? Frame Html'de birden fazla belgeye tek bir sayfada yer vermek amacıyla açılan pencerelerdir. Çok fazla kullanılmaz. Ama...

Devamı »

HTML Eğitimi Ders 2-Etiket Özellikleri

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s320/html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s320/html.jpg" width="264" /></a></div> <h3> </h3> <h3> Element Özellikleri</h3> <div> Element özelliklerinden 1. derste bahsetmiştik. özellik="değer" şeklinde kullanılan bu özellikler siteyi daha kullanışlı hala getirir. Hadi bazılarına göz atalım.</div> <h3> <h1></h3> <div> <h1 align="center">Yazı</h1> </div> <div> Bu özellik başlığın orta, sağ, sol gibi herhangi bir yerde durmasını sağlar. "center" yazan "right","left" de yazılabilir.</div> <div> <br /></div> <div> <a href="Adres" title="Tıkla">Bağlantı</h1></div> <div> Bir başlığa link vermenizi sağlar. "title="Yazı" özelliği mousenin yazı üzerinde bekletildiğinde çıkan yazıyı belirtir. <a> etiketinin de özelliğidir. "Bağlantı" yazan yere Yazı yazılıp "Adres" yazan yere link yazılır.</div> <div> <br /></div> <div> Hadi bakalım şimdi sitenizin başlığına bir adres verin. Adresi siz belirleyin. Bu arada birde başlığı ortalasanız iyi olabilir.</div> <div> <br /></div> <h3> <a></h3> <div> <a href="Adres" title="Tıkla">Bağlantı</a><br /> <a href="Adres" target="_blank" title="Tıkla">Bağlantı</a></div> <div> <h1> etiketinin özelliği gibidir fakat başlığa değil yazıya link verilir. "target=_blank"" sayfayı başka bir sayfada açar. Dikkat. Site adresinin başına "https://" koymayı unutmayın. Yoksa hata verebilir.</div> <div> <br /></div> <div> <a title="Hey">Burada Bekle</a></div> <div> <h1> etiketinin özelliği gibi mouseyi yazı üzerinde bekletince çıkan yazıdır.<br /> <br /> <a name="KodBoy> KodBoy Eğitim </a><br /> Bu name özelliği kodda bir değişiklik yapmaz ve sadece bizim kodları kolay yazmamızı sağlar. Yani herhangi bir koda isim koyuyormuş gibi düşünün.<br /> <h3> <body></h3> </div> <div> <body bgcolor="yellow"> <a> KodBoy </a> </body><br /> Sayfaya arka plan rengi eklemeyi sağlar. "yellow" yazan yeri diğer ingilizce renklerle değiştirebilirsiniz. Bu arada sitenize bir arka plan rengi ekleyin.<br /> <br /> Bu ders bu kadar. Sitenizi bu kodlarla geliştirin. Bir sonraki derste frame'i göreceğiz. Zor bir ders olacak. Kolay gelsin.<br /> <br /> <br /></div>

HTML Eğitimi Ders 2-Etiket Özellikleri

Element Özellikleri Element özelliklerinden 1. derste bahsetmiştik. özellik="değer" şeklinde kullanılan bu özellikler sitey...

Devamı »

Html Eğitimi Ders 1- Başlangıç

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s320/html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2-xaWOC16vmR9H3zwyFNXYyOpdLVZg9k4JXlAT2KNhnblQqLN_U6fas_I-lMsTALjZWyraqeUk0w6PNsN8m7RKkmNQxLsmPI1W-TXWVRZ0SGgYuAxdJCTUXaOqDaq7X2JmJjWHXp_-o/s320/html.jpg" /></a></div> Merhaba,<br /> Html kod eğitimine hem eğlenerek hem de istekli bir şekilde başlayalım. Biz diğer sıkıcı dersler gibi değil, daha kolay ve anlaşılır bir şekilde ders anlatacağız. İlk olarak çalışmalarımızı toplayacağımız bir dosya edinelim. Adını "Kod Eğitimi" koyabilirsiniz. Dosyanın içine bir adet daha adı "Html Kodu" olan bir dosya açalım. Daha sonra çalışmalar yaptıkça kendiniz bu dosyaya farklı dosyalar ekleyebilirsiniz. Kolay gelsin...<br /> <br /> <h3> Html Kodu Nedir?</h3> <div>       Html kodu bir uzantı çeşidi olup dosya uzantısıdır. Bu kodlar site üzerinde gözükmez. Çünkü tarayıcı kodu sitede yorumlayarak gösterir. Hiç korkmayın. Html kodu çok basit bir koddur. Biraz çalışırsanız kolaylıkla öğrenirsiniz.<br /> <h3> Nasıl Yazılır?</h3> <div>       Html kodları etiketler yardımıyla yazılır. Etiketler "<" ile başlayıp ">" ile biter. Bazı etiketler dışında bütün etiketlerin kapanma etiketi vardır. Bir etiketi kapatmak için etiketten önce "/" konulması gerekir. Örneğin "<a> etiketinin kapanışı "</a>"dır. Her etiketlerin özellikleri bulunur. "özellik="değer" şeklindedir. Örneğin "<a href="https://www.google.com.tr">Google</a>" link verme özelliğidir. Merak etmeyin, bunları yakında öğreneceğiz.</div> <h3> Başlayalım</h3> Bir "Not Defteri" açalım. İçine aşağıdaki kodları yapıştıralım:</div>    <html><br />    <head><br />       h2>Benim Sayfam</h2> <h4>İsminiz</h4><br />    </head><br />    <body><br />      <a><b>Merhaba</b></br>Siteme Hoşgeldiniz,</a></br><p>Sitem çok yakında güzelleşecek.</p></br><li>Adınız</li><br />    </body><br />    </html><br /> Adını "Sitem.htm" olarak kaydedelim. Şimdi kodu incelemeye başlayalım.<br /> 1.<html> Her kodun başlangıcıdır.<br /> 2.<head> Sitenin üst kısmını oluşturur.<br /> 3.<body> İçeriğin bulunduğu kısımdır.<br /> 4.<a> Yazı kümesidir. Önemli bir etikettir.<br /> 5. <b> Yazıyı kalın yapar.<br /> 7. <li> Yazıyı italik haline dönüştürür.<br /> 6.<h1> ... <h6> Başlık büyüklükleridir. Büyükten küçüğe <h1>.....<h6> şekildedir.<br /> 7. </br> Enter görevi görür.<br /> 8.<p> Paragraf açmanızı sağlar.<br /> <br /> Siz bu açıklamaları kullanarak siteniz üzeride değişiklikler yapın. Bu şekilde bunlar aklınızda kalıcı hale gelecektir. Eğer farkettiyseniz kısa bir anlatım yaptık. Sıkılmanızı istemeyiz.<br /> <br /> <h3> <a> Etiketi</h3> <div> <a> etiketi önemli etiketlerden biridir. Bunu unutmamanız gerekir. Çok özelliği vardır. Bir yazı kümesi oluşturur. Örneğin:</div> <div> <a<SkyCoa<a>     =>    SkyCoa<br /> Herhangi bir fark olmaz fakat bir küme oluşturup düzeni sağlar. Aşağıdan kod önizle editörü ile deneyeceğiniz bazı kodlar. Sitenizde bu kodlar ile değişiklik yapın (<a> etiketi içindir):<br /> 1.button   Buton oluşturmanızı sağlar.<br /> 2.fieldset   Yazıyı şekil içine alır.<br /> 3.textarea    Yazıyı büyük bir kutu içine alır.<br /> 4.marquee     Yazıyı hareketlendirir.<br /> <br /> Bu derslik bu kadar. Bir sonraki derste etiketlerin özelliklerini göreceğiz. Zevkli olacak. Sitenize renk katın.</div>

Html Eğitimi Ders 1- Başlangıç

Merhaba, Html kod eğitimine hem eğlenerek hem de istekli bir şekilde başlayalım. Biz diğer sıkıcı dersler gibi değil, daha kolay ve anlaş...

Devamı »