HTML Div Etiketi

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 ile kullanılabilecek özellikler;

• id
• class
• position
• float
• top, left, right, bottom
• width (35% veya 35px) yüzde veya tam ölçü verilebilir
• height (35% veya 35px) yüzde veya tam ölçü verilebilir
• z-index
• padding (padding-top, padding-bottom, padding-left, padding-right)
• margin (margin-top, margin-bottom, margin-left, margin-right)
• border
• background
• text-align

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.

Kullanımı: <div id=”verdiginiz_id”></div>

class:  Class özelliği stil dosyanızda belirlediğiniz özellikleri div etiketinize aktarmanıza yarar.

Kullanımı: <div class=”stil_sayfanizdaki_class”></div>

position:  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.
   

   Kullanımı: <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.
   

   Kullanımı: <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.
   

   Kullanımı: <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.
   

   Kullanımı: <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.
   

   Kullanımı: <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.

Kullanımı: <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.

Kullanımı: <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.

Kullanımı: <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.

Kullanımı: <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.

Kullanımı: <div style=”padding; 0 10px 15px 20%;”>İçerik</div>

Kullanımı: <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.

Kullanımı: <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.

Kullanımı: <div style=”margin; 0 10px 15px 20%;”>İçerik</div>

Kullanımı: <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.

Kullanımı: <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.

Kullanımı: <div style=”border:1px solid #161616;”>İçerik</div>

Çerçevelerinin noktalı olmasını isterseniz

Kullanımı: <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.

Kullanımı: <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

Kullanımı: <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.

Kullanımı: <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>

HTML tags: DIV

The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once. For instance, by wrapping a set of paragraph elements into a <div> element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the <div> tag instead of coding the same style for each paragraph element.

Group together text elements within a <div> tag to slice up HTML documents.

HTML Div Element Code:

<div id="myDiv" name="myDiv" title="Example Div Element">
  <h5>Subtitle</h5>
  <p>This paragraph would be your content paragraph...</p>
  <p>Here's another content article right here.</p>
</div>

With these text elements now grouped together under a <div> element, we can alter the appearance of each underlying element collectively by applying a style attribute to the <div> tag.

HTML Div Element Code:

<div id="myDiv" name="myDiv" title="Example Div Element" style="color: #0900C4; font: Helvetica 12pt;border: 1px solid black;">
  <h5>Subtitle</h5>
  <p>This paragraph would be your content paragraph...</p>
  <p>Here's another content article right here.</p>
</div>

HTML Div Element in Action:

Subtitle This paragraph would be your content paragraph... Here's another content article right here.

Elements housed within a <div> tag acquire any styles or properties applied to the master div element. Therefore the paragraph and heading elements should now be rendered blue in a Helvetica font. In addition, we've applied a border to the <div> element just to help visualize the grouping of elements together.

HTML - Div inside of Div

Placing <div> elements inside of other <div> elements allows these elements to be further subdivided.

HTML Div Subdivision:

<div id="myDiv" name="myDiv" title="Example Div Element" style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">
  <div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: #FF0000; border: 1px dotted black;">
    <h5>Section 1</h5>
    <p>This paragraph would be your content paragraph...</p>
    <p>Here's another content article right here.</p>
  </div>
  <br />
  <div id="subDiv2" name="subDiv2" title="Subdivision Div Element" style="color: #FF00FF;border: 1px dashed black;">
    <h5>Section 2</h5>
    <p>This paragraph would be your content paragraph...</p>
    <p>Here's another content article right here.</p>
  </div>
</div>

Divs Inside of Divs:

Section 1 This paragraph would be your content paragraph... Here's another content article right here.

Section 2 This paragraph would be your content paragraph... Here's another content article right here.

This concept is the foundation of which most web pages are now built. HTML documents that are properly divided and subdivided are easy to maintain and modify.

 

Sitene 3D Oyun Ekle

KOD :  <div align=”center”><iframe height=”700″ src=”http://www.3doyun.net/3doyun.php?max=20&h=700&bg=555555&yr=FFFFFF&lr=333333&br=333333&baslik=3D Oyun&tur=1&grup=&link=1″ frameborder=”0″ width=”600″ scrolling=”no” style=”border-bottom: #222222 1px solid; border-left: #222222 1px solid; width: 504px; height: 712px; border-top: #222222 1px solid; border-right: #222222 1px solid”></iframe> <a href=”http://www.htmlkodlari.net/” style=”display: none”>Html Kodları</a></div>

Sitene Duyuru Panosu Ekle

Sitenize duyuru kodu eklemek isterseniz gerçekten kaliteli bir kod diyebilirim. Bu kodu sitenize ekleyerek şık görünüm kazandırabilirsiniz. Aşağıdaki html kodlarını kopyalayıp yapıştırmanız yeterli olacaktır.

KOD : <center><!– htmlkodlari.net duyuru panosu Kodu Baslangici –> <style type=”text/css”> <!– a:link { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #0066FF; text-decoration: none; } a:active { color: #000000; text-decoration: none; } –> </style><table width=”200″ height=”250″ cellspacing=”2″> <tr> <th valign=”top” background=”http://img.webme.com/pic/h/html-kodlari/decorative4.png” scope=”col”><table width=”200″ height=”248″ cellspacing=”2″> <tr> <th height=”10″ valign=”top” scope=”col”><a href=”http://htmlkodlari.net” _fcksavedurl=”http://htmlkodlari.net” target=”_blank”>Duyuru</a> </th> </tr> <tr> <th scope=”row”><marquee onmouseover_fckprotectedatt=”%20onmouseover%3D%22this.stop()%22″ onmouseout_fckprotectedatt=”%0Aonmouseout%3D%22this.start()%22″ direction=”up” onmouseover_fckprotectedatt=”%0Aonmouseover%3D%22this.stop()%3B%22″ onmouseout_fckprotectedatt=”%20onmouseout%3D%22this.start()%3B%22″ SCROLLAMOUNT=”1″ scrollDelay=”50″ > <center> <div>YAZINIZ 1 </div> <div>YAZINIZ 2</div> <div>YAZINIZ 3</div> </center></marquee></th> </tr> </table></th> </tr> </table> <!– htmlkodlari.net duyuru panosu Kodu Bitisi –>

Sitene TV İzleme Kodu Ekle

 html kodları aşağıda yazmaktadır. Yapmanız gereken tek şey kodu kopyalayıp siteniz eklemek olacaktır.

Html kodu : 

<!–Tv Matik – www.htmlkodlari.net–><iframe src=”http://app.fbmlkod.com/tv-matik.htm” marginwidth=”0″ marginheight=”0″ height=”83″ width=”468″ name=”tvmatik” title=”tvizler.net” scrolling=”no” border=”0″ frameborder=”0″>Tv-Listesi-Yukleniyor…</iframe><!–Tv Matik – www.htmlkodlari.net–>

Siteye Döviz Kuru ekle

Döviz Kuru Ekleme Kodu

KOD : 

<div align=”center”>
<iframe width=”205″ height=”166″ frameborder=”0″ scrolling=”no” src=”http://www.euroyatirim.com.tr/kurlar_pariteler.asp”></iframe> <a href=”http://www.evdeneveistanbul.net/” style=”display: none” target=”_blank”>evden eve nakliyat</a> <a href=”http://www.htmlkodlari.net/” style=”display: none” target=”_blank”>Html Kodları</a>
</div>

Siteye Müzik Ekleme Kodu

<embed src="http://www.box.net/static/flash/widget_player.swf" type="application/x-shockwave-flash" FlashVars="subString=folderId=lirkoup6lv,color=0C5C98,title=Turkce Karma" wmode="transparent" width="281" height="300"></embed><br/><font face="Arial" size="1" color="#000000"><a href="http://www.htmlkodlari.net" target="_new">Müzik Kutusu</a></font>

CSS Beginner - Borders

CSS Borders

Borders can be applied to most HTML elements within the body.

To make a border around an element, all you need is border style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.
border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width.
Finally, border-color sets the colour.
Add the following code to the CSS file:

h2 {
 border-style: dashed;
 border-width: 3px;
 border-left-width: 10px;
 border-right-width: 10px;
 border-color: red;
}

This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).

CSS Beginner - Margin and Padding

Margins and Padding

margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.

Change the CSS code for h2 to the following:

h2 {
 font-size: 1.5em;
 background-color: #ccc;
 margin: 1em;
 padding: 3em;
}

You will see that this leaves one-character width space around the secondary header and the header itself is fat from the three-character width padding.
The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding,left, padding-right and padding-bottom are the self-explanatory properties you can use.

The Box Model

Margins, padding and borders are all part of what's known as the Box Model. The Box Model works like this: in the middle you have the content area (let's say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:

Margin box

Border box

Padding box

Element box

You don't have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that's a powerful thing!

CSS Beginner - Text

Text

You can alter the size and shape of the text on a web page with a range of properties, outlined below:

font-family

This is the font itself, such as Times New Roman, Arial, or Verdana.
The font you specify must be on the user's computer, so there is little point in using obscure fonts. There are a select few 'safe' fonts (the most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by commas. The purpose of this is that if the user does not have the first font you specify, the browser will go through the list until it finds one it does have. This is useful because different computers sometimes have different fonts installed. So font-family: arial, helvetica, for example, is used so that similar fonts are used on PC (which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have arial and so helvetica, which it does normally have, will be used).
Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman".

font-size

The size of the font. Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use headings (h1,h2 etc.) even though, in practice, you could make the font-size of a paragraph larger than that of a heading (not recommended for sensible people).

font-weight

This states whether the text is bold or not. In practice this usually only works as font-weight: bold or font-weight: normal. In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900, but seeing as many browsers shake their heads and say "I don't think so", it's safer to stick with bold and normal.

font-style

This states whether the text is italic or not. It can be font-style: italic or font-style: normal.

text-decoration

This states whether the text is underlined or not. This can be:

• text-decoration: overline, which places a line above the text.
• text-decoration: line-through, strike-through, which puts a line through the text.
• text-decoration: underline should only be used for links because users generally expect underlined text to be links.

This property is usually used to decorate links, such as specifying no underline with text-decoration: none.

text-transform

This will change the case of the text.

• text-transform: capitalize turns the first letter of every word into uppercase.
• text-transform: uppercase turns everything into uppercase.
• text-transform: lowercase turns everything into lowercase.
• text-transform: none I'll leave for you to work out.

body {
 font-family: arial, helvetica, sans-serif;
 font-size: 0.8em;
}

h1 {
 font-size: 2em;
}

h2 {
 font-size: 1.5em;
}

a {
 text-decoration: none;
}

strong {
 font-style: italic;
 text-transform: uppercase;
}

Text spacing

The letter-spacing and word-spacing properties are for spacing between letters or words. The value can be a length or normal.
The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font. It can be a number (which specifies a multiple of the font size, so '2' will be two times the font size, for example), a length, a percentage or normal.
The text-align property will align the text inside an element to left, right, center or justify.
The text-indent property will indent the first line of a paragraph, for example, to a given length or percentage. This is a style traditionally used in print, but rarely in digital media such as the web.