HTML Lessons

HTML Div Etiketi

2013-02-18T08:57:00.003-08:00

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.

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>
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>
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>
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>
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

2013-02-18T08:17:00.000-08:00

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

2013-02-16T13:34:00.000-08:00

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

2013-02-16T13:29:00.002-08:00

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

2013-02-16T13:27:00.000-08:00

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

2013-02-16T13:23:00.000-08:00

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

2013-02-16T13:19:00.000-08:00

<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

2013-02-13T07:19:00.000-08:00

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

2013-02-13T07:14:00.000-08:00

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

2013-02-13T07:08:00.000-08:00

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.

CSS Beginner - Colours

2013-02-13T07:02:00.000-08:00

Colours

CSS brings 16,777,216 colours to your disposal. They can take the form of a name, an rgb (red/green/blue) value or a hex code.

red
Is the same as
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
Which is the same as
#ff0000
Which is the same as
#f00

There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
transparent is also a valid value.
The three values in the rbg value are from 0 to 255, 0 being the lowest level (for example no red), 255 being the highest level (for example full red). These values can also be a percentage.
Hexadecimal (previously and more accurately known as 'sexadecimal') is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.
The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). The three-digit version is easier to decipher (the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit version gives you more control over the exact colour.

'color' and 'background-color'

Colours can be applied by using color and background-color (note that this must be the American English 'color' and not 'colour').
A blue background and yellow text could look like this:


h1 {
 color: yellow;
 background-color: blue;
}

These colours might be a little too harsh, so you could change the code of your CSS file for slightly different shades:


body {
 font-size: 0.8em;
 color: navy;
}

h1 {
 color: #ffc;
 background-color: #009;
}

Save the CSS file and refresh your browser. You will see the colours of the first heading (the h1 element) have changed to yellow and blue.
You can apply the color and background-color properties to most HTML elements, including body , which will change the colours of the page and everything in it.

CSS Beginner - Selectors,Properties & Values

2013-02-13T06:59:00.000-08:00

CSS Selectors, Properties, and Values

Whereas HTML has tags, CSS has 'selectors'. Selectors are the names given to styles in internal and external style sheets. In this CSS Beginner Tutorial we will be concentrating on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific tag.

For each selector there are 'properties' inside curly brackets, which simply take the form of words such as color, font-weight or backgroud color
A value is given to the property following a colon (NOT an 'equals' sign) and semi-colons separate the properties.


body {
 font-size: 0.8em;
 color: navy;
}

This will apply the given values to the font-size and color properties to the body selector.
So basically, when this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 0.8 ems in size and navy in colour.

Lengths and Percentages

There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.
em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.
px (such as font-size: 12px) is the unit for pixels.
pt (such as font-size: 12pt) is the unit for points.
% (such as font-size: 80%) is the unit for... wait for it... percentages.
Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).
When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

A web page is not a static, absolute medium. It is meant to be flexible and the user should be allowed to view the web page how the hell they like, which includes the font size and the size of the screen.
Because of this, it is generally accepted that 'em' or '%' are the best units to use for font-sizes (and possibly even heights and widths, which we shall come across in the CSS Advanced Tutorial), rather than 'px', which leads to non-resizable text in most browsers, and should be used sparingly, for border sizes for example.

CSS Beginner - Applying CSS

2013-02-13T06:56:00.000-08:00

Applying CSS

There are three ways to apply CSS to HTML.

------------

In-line

In-line styles are plonked straight into the HTML tags using the style attribute.
They look something like this:


<p style="color: red">text</p>

This will make that specific paragraph red.
But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.

Internal

Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.
This would look something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
 p {
  color: red;
 }

 a {
  color: blue;
 }
</style>
...

This will make all of the paragraphs in the page red and all of the links blue.
Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour...

External

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:


p {
 color: red;
}

a {
 color: blue;
}

If this file is saved as "web.css" then it can be linked to in the HTML like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>CSS Example</title>
 <link rel="stylesheet" type="text/css" href="web.css" />
...

To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as "web.css" in the same directory as your HTML file.
Now change your HTML file so that it starts something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
 <title>My first web page</title>
 <link rel="stylesheet" type="text/css" href="web.css" />
</head>
...

Save the HTML file. This now links to the CSS file, which is empty at the moment, so won't change a thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did before.

HTML Beginner - Putting It All Together

2013-02-13T06:49:00.000-08:00

Putting It All Together

If you have gone through all of the pages in this HTML Beginner Tutorial then you should be a competent HTMLer.
In fact, due to the fact that most people who use HTML use it rather badly, you should be better than most.

The following code incorporates all of the methods that have been explained in the previous pages:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

 <title>My first web page</title>

 <!-- By the way, this is a comment -->

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>
<p>A simple page put together using HTML. <strong>A simple page put together using HTML.</strong> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>

<h2>Why this is</h2>
<ul>
 <li>To learn HTML</li>
 <li>
  To show off
  <ol>
   <li>To my boss</li>
   <li>To my friends</li>
   <li>To my cat</li>
   <li>To the little talking duck in my brain</li>
  </ol>
 </li>
 <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

<h2>Where to find the tutorial</h2>
<p><a href="http://www.htmldog.com"><img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" /></a></p>

<h3>Some random table</h3>
<table border="1">
 <tr>
  <td>Row 1, cell 1</td>
  <td>Row 1, cell 2</td>
  <td>Row 1, cell 3</td>
 </tr>
 <tr>
  <td>Row 2, cell 1</td>
  <td>Row 2, cell 2</td>
  <td>Row 2, cell 3</td>
 </tr>
 <tr>
  <td>Row 3, cell 1</td>
  <td>Row 3, cell 2</td>
  <td>Row 3, cell 3</td>
 </tr>
 <tr>
  <td>Row 4, cell 1</td>
  <td>Row 4, cell 2</td>
  <td>Row 4, cell 3</td>
 </tr>
</table>

<h3>Some random form</h3>
<p><strong>Note:</strong> It looks the part, but won't do a damned thing</p>

<form action="somescript.php" method="post">

<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>

<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>

<p><input type="submit" /></p>

<p><input type="reset" /></p>

</form>

</body>

</html>

There you have it. Save the file and play around with it - this is the best way to understand how everything works. Go on. Tinker.

HTML Beginner - Forms

2013-02-13T06:44:00.002-08:00

Forms

Forms can be used to send data across the web and are often used as contact forms to convert information inputted by a user into an email, such as the one used on this website.

On their own, forms are useless. They need to be hooked up to a program that will process the data inputted by the user. These take all manner of guises and are outside of the remit of this website. If you use an internet service provider to host your HTML, they will be able to help you with this and will probably have clear and simple instructions on how, for example, to make a form-to-email form work.
The basic tags used in the actual HTML of forms are form, input, textarea, select and option.
form defines the form and within this tag, there is one required action attribute which tells the form where its contents will be sent to when it is submitted.
The optional method attribute tells the form how the data in it is going to be sent and it can have the value get (which is default) or post. This is commonly used, and often set to post which hides the information (get latches the information onto the URL).
So a form element will look something like this:


<form action="processingscript.php" method="post">

</form>

The input tag is the daddy of the form world. It can take ten forms, outlined below:

<input type="text" /> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
<input type="password" /> is similar to the textbox, but the characters typed in by the user will be hidden.
<input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format <input type="checkbox" checked="checked" />, and makes the initial state of the check box to be switched on, as it were.
<input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox.
<input type="file" /> is an area that shows the files on your computer, like you see when you open or save a document in most programs, and is used to enable users to upload files.
<input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button (as you can with button and reset types - see below) with the value attribute, for example <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
<input type="image" /> is an image that will submit the coordinates of where the user clicked on it. This also requires a src attribute, like the img tag.
<input type="button" /> is a button that will not do anything without extra code added.
<input type="reset" /> is a button that when selected will reset the form fields to their default values.
<input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.

Note that the input tag closes itself with a "/>" at the end.
A textarea is, basically, a large textbox. It requires a rows and cols attribute and is used like this:
<textarea rows="5" cols="20">A big load of text here</textarea>
The select tag works with the option tag to make drop-down select boxes.
They work like this:


<select>
 <option value="first option">Option 1</option>
 <option value="second option">Option 2</option>
 <option value="third option">Option 3</option>
</select>

When the form is submitted, the value of the selected option will be sent.
Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, which would be used in the format <option value="mouse" selected="selected">Rodent</option>.
All of the tags mentioned above will look very nice presented on the page, but if you hook up your form to a form-handling program, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge" />
A form might look like the one below. (Note: this form will not work unless there is a "contactus.php" file, which is stated in the action attribute of the form tag, to handle the submitted date)


<form action="contactus.php" method="post">

 <p>Name:</p>
 <p><input type="text" name="name" value="Your name" /></p>

 <p>Comments: </p>
 <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

 <p>Are you:</p>
 <p><input type="radio" name="areyou" value="male" /> Male</p>
 <p><input type="radio" name="areyou" value="female" /> Female</p>
 <p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
 <p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>

 <p><input type="submit" /></p>

 <p><input type="reset" /></p>

</form>

There is a whole other level of comlexity you can delve into in the HTML Advanced Tutorial if you are so inclined.

HTML Beginner - Tables

2013-02-13T06:40:00.001-08:00

Tables

Across the worldwide web, HTML tables are used and abused to layout pages. We will come across how to layout a page without tables, in the CSS Advanced tutorial. The correct use for tables is to do exactly what you would expect a table to do - to structure tabular data.

There are a number of tags used in tables, and to fully get to grips with how they work is probably the most difficult area of this HTML Beginners Tutorial.
Copy the following code into the body of your document and then we will go through what each tag is doing:


<table>
 <tr>
  <td>Row 1, cell 1</td>
  <td>Row 1, cell 2</td>
  <td>Row 1, cell 3</td>
 </tr>
 <tr>
  <td>Row 2, cell 1</td>
  <td>Row 2, cell 2</td>
  <td>Row 2, cell 3</td>
 </tr>
 <tr>
  <td>Row 3, cell 1</td>
  <td>Row 3, cell 2</td>
  <td>Row 3, cell 3</td>
 </tr>
 <tr>
  <td>Row 4, cell 1</td>
  <td>Row 4, cell 2</td>
  <td>Row 4, cell 3</td>
 </tr>
</table>

The table element defines the table.
The tr element defines a table row.
The td element defines a data cell. These must be enclosed in tr tags, as shown above.
If you imagine a 3x4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.

HTML Beginner - Images

2013-02-12T04:09:00.002-08:00

Images

Things might seem a little bland and boring with all of this text formatting. Of course, the web is not just about text, it is multi-media and the most common form of media is the image.

The img tag is used to put an image in an HTML document and it looks like this:


<img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" />

The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as "alienpie.jpg" in a directory called "images" then the code would be <img src="images/alienpie.jpg"...
The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
The alt attribute is the alternative description. This is used for people who cannot or choose not to view images. This is a requirement in the latest versions of HTML.
Note that, like the br tag, because the img tag does not have a closing tag, it closes itself, ending with "/>"
The construction of images for the web is a little outside of the remit of this website, but it is worth noting a few things...
The most commonly used file formats used for images are GIFs and JPEGs. They are both compressed formats, and have very different uses.
GIFs can have no more than 256 colours, but they maintain the colours of the original image. The lower the number of colours you have in the image, the lower the file size will be.
GIFS SHOULD BE USED FOR IMAGES WITH SOLID COLOURS.
JPEGs on the other hand use a mathematical algorithm to compress the image and will distort the original slightly. The lower the compression, the higher the file size, but the clearer the image.
JPEGS SHOULD BE USED FOR IMAGES SUCH AS PHOTOGRAPHS.
Images are perhaps the largest files a new web designer will be handling. It is a common mistake to be oblivious to the file size of images, which can be extremely large. Web pages should download as quickly as possible, and if you keep in mind that most people still use modems that download at less than 7Kb a second (realistically it is less than 5Kb), you can see how a large file will greatly slow down the download time of a full page.
You need to strike a balance between image quality and image size. Most modern image manipulation programs allow you to compress images and the best way to figure out what is best suited for yourself is trial and error.

HTML Beginner - Links

2013-02-12T04:03:00.001-08:00

Links

So far you've been making a stand-alone web page, which is all very well and nice, but what makes the internet so special is that it all links together.
The 'H' and 'T' in 'HTML' stand for 'hypertext', which basically means a system of linked text.

An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.
Add this to your document:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
 <title>My first web page</title>
</head>

<body>

 <h1>My first web page</h1>

 <h2>What this is</h2>
 <p>A simple page put together using HTML</p>

 <h2>Why this is</h2>
 <p>To learn HTML</p>

 <h2>Where to find the tutorial</h2>
 <p><a href="http://www.htmldog.com">HTML Dog</a></p>

</body>

</html>

The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as "http://www.htmldog.com", or it can be relative to the current page.
So if, for example, you had another file called "flyingmoss.html" then the line of code would simply be
<a href="flyingmoss.html">The miracle of moss in flight</a> or something like this.
A link does not have to link to another HTML file, it can link to any file anywhere on the web.
A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example <h2 id="moss">Moss</h2>, and then link to it by using something like this: <a href="#moss">Go to moss</a>. Selecting this link will scroll the page straight to the element with that id.
The a tag allows you to open the link in a newly spawned window, rather than replacing the web page the user is on, which at first thought may sound like a good idea as it doesn't take the user away from your site.
There are a number of reasons why you shouldn't do this however.
From a usability point of view, this method breaks navigation. The most commonly used navigation tool on a browser is the "back" button. Opening a new window disables this function.
On a wider, more general usability point, users do not want new windows to be popping up all over the place. If they want to open a link in a new window then they can choose to do so themselves.

HTML Beginner - Lists

2013-02-12T04:02:00.002-08:00

Lists

There are three types of list; unordered lists, ordered lists and definition lists. We will look at the first two here, and definition lists in the HTML İntermediate Tutorial.

Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.
The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.
Change your code to the following:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
 <title>My first web page</title>
</head>

<body>
 <h1>My first web page</h1>

 <h2>What this is</h2>
 <p>A simple page put together using HTML</p>

 <h2>Why this is</h2>
 <ul>
  <li>To learn HTML</li>
  <li>To show off</li>
  <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
 </ul>

</body>

</html>

If you look at this in your browser, you will see a bulleted list. Simply change the ul tags to ol and you will see that the list will become numbered.
Lists can also be included in lists to form a structured hierarchy of items.
Replace the above list code with the following:


<ul>
 <li>To learn HTML</li>
 <li>
  To show off
  <ol>
   <li>To my boss</li>
   <li>To my friends</li>
   <li>To my cat</li>
   <li>To the little talking duck in my brain</li>
  </ol>
 </li>
 <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

Et voil. A list within a list. And you could put another list within that.And another within that. And so on and so forth.

HTML Beginner - Headings

2013-02-12T04:01:00.000-08:00

Headings

The p tag is just the start of text formatting.
If you have documents with genuine headings, then there are HTML tags specifically designed just for them.

They are h1,h2,h3,h4,h5 and h6, h1 being the almighty emperor of headings and h6 being the lowest pleb.
Change your code to the following:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
 <title>My first web page</title>
</head>

<body>
 <h1>My first web page</h1>

 <h2>What this is</h2>
 <p>A simple page put together using HTML</p>

 <h2>Why this is</h2>
 <p>To learn HTML</p>
</body>

</html>

HTML Beginner - Paragraphs

2013-02-12T04:00:00.001-08:00

Go back to your text editor and add another line to your page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
 <title>My first web page</title>
</head>

<body>
 This is my first web page
 How exciting
</body>

</html>

Look at the document in your browser.
You might have expected your document to appear as you typed it, on two lines, but instead you should see something like:
This is my first web page How exciting.
This is because web browsers don't usually take any notice of what line your code is on. It also doesn't take any notice of spaces (you would get the same result if you typed "This is my first web page How exciting").
If you want text to appear on different lines, you need to explicitly state that.
Change your two lines of content so that they look like this:


<p>This is my first web page</p>
<p>How exciting</p>

The p tag is for paragraph.
Look at the results of this. The two lines will now appear on two lines.
Think of the HTML content as if it were a book - with paragraphs where appropriate.

Emphasis

You can emphasise text in a paragraph using em(emphasis) and strong (strong emphasis). These are two ways of doing pretty much the same thing, although traditionally, browsers display em in italics and strong in bold.


<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</p>

Line breaks

The line-break tag can also be used to separate lines like this:


This is my first web page<br />
How exciting

However, this method is over-used and shouldn't be used if two blocks of text are intended to be separate from one another (because if that's what you want to do you probably want the p tag).
Note that because there's no content involved with the line-break tag, there is no closing tag and it closes itself with a "/" after the "br".

HTML beginner - Page Title

2013-02-12T03:59:00.001-08:00

To add a title to your page, change your code so that it looks like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
 <title>My first web page</title>
</head>

<body>
 This is my first web page
</body>

</html>

We have added two new elements here, that start with the head tag and the title tag (and see how both of these close).
The head element (that which starts with the <head> opening tag and ends with the </head> tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window.
We will see later on that other elements can appear inside the head element, but the most important of them is the title element.
If you look at this document in the browser (save and refresh as before), you will see that "My first web page" will appear on the title bar of the window (not the actual canvas area). The text that you put in between the title tags has become the title of the document (surprise!). If you were to add this page to your 'favourites' (or 'bookmarks', depending on your browser), you would see that the title is also used there.

HML Beginner - Tags

2013-02-12T03:58:00.001-08:00

Attributes

Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag attribute="value">Margarine</tag>. We will come across tags with attributes later.

Elements

Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas '<title>' and '</title>' are tags, '<title>Rumple Stiltskin</title>' is a title element.

HTML Beginner - Getting Started

2013-02-12T03:51:00.002-08:00

Getting Started

Most of the stuff on the web is no different than the stuff on your computer - it's just a whole load of files sorted into a whole load of directories.
HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor.

Notepad is a common text editor (on Windows this is usually found under the Programs > Accessories menu).
Type this in to your text editor:


This is my first web page

Now create a folder called 'html' in your C drive (or anywhere else you fancy) and save the file as "myfirstpage.html". It is important that the extension ".html" is specified - some text editors, such as Notepad, will automatically save it as ".txt" otherwise.
To look at HTML files, they don't even need to be on the web. Open a web browser such as Mozilla Firefox or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, "c:\html\myfirstpage.html") and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file.
Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.
We've said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Adobe Dreamweaver or Microsoft Frontpage.
You should be very careful when using these programs, especially if you are a beginner, because they often throw in unnecessary or non-standard code to "help" you.
If you're serious about learning HTML, you should read through a tutorial such as this first, so that you at least have a basic understanding of what is going on.
Software programs such as these will never give you the same control over a web page as coding by hand.

EgoPay Hesabı Açmak

2012-07-23T06:52:00.001-07:00

Arkadaşlar geçtiğimiz günlerde Payza belirli sebeplerden ötürü JBP gibi gelir sitelerine para aktarımını durdurdu.Bunun yerine de EgoPay diye ayrı bir site ayarladı.Aşağıda bu siteye nasıl üye olacağınızı göstereceğim :)

[ 1 ] Öncelikle EgoPay'a girip 'Create EGOPAY Account'a basıyoruz.

[ 2 ] Personal seçeneğini seçtikten sonra aşağıda istenen bilgileri yazıyoruz ve ardından 'Sign Up' butonuna tıklıyoruz.

[ 3 ] Açılan bu ekranda e-mail adresimizi kontrol etmemiz isteniyor.

[ 4 ] Adresimize gelen mail'i açıyoruz ve içindeki aktivasyon bağlantısına tıklıyoruz.

[ 5 ] Bilgilerimizi girip Next'e basıyoruz.

[ 6 ] Kayıtta belirlediğimiz PIN Kodunu giriyoruz.

[ 7 ] Kişisel bilgilerimizi dolduruyoruz.

[ 8 ] Hesabımız artık aktif.

Eğer Payza'da birikmiş paranız varsa ve bunu yatırım sitelerine aktarmak isterseniz, Payza'dan EgoPay'a %1 komisyon karşılığı para aktarabilirsiniz.

HTML Lessons

HTML Div Etiketi

HTML tags: DIV

HTML Div Element Code:

HTML Div Element Code:

HTML Div Element in Action:

Subtitle

HTML - Div inside of Div

HTML Div Subdivision:

Divs Inside of Divs:

Section 1

Section 2

Sitene 3D Oyun Ekle

Sitene Duyuru Panosu Ekle

Sitene TV İzleme Kodu Ekle

Siteye Döviz Kuru ekle

Siteye Müzik Ekleme Kodu

CSS Beginner - Borders

CSS Borders

CSS Beginner - Margin and Padding

Margins and Padding

The Box Model

CSS Beginner - Text

Text

font-family

font-size

font-weight

font-style

text-decoration

text-transform

Text spacing

CSS Beginner - Colours

Colours

'color' and 'background-color'

CSS Beginner - Selectors,Properties & Values

CSS Selectors, Properties, and Values

Lengths and Percentages

CSS Beginner - Applying CSS

Applying CSS

In-line

Internal

External

HTML Beginner - Putting It All Together

Putting It All Together

HTML Beginner - Forms

Forms

HTML Beginner - Tables

Tables

HTML Beginner - Images

Images

HTML Beginner - Links

Links

HTML Beginner - Lists

Lists

HTML Beginner - Headings

Headings

HTML Beginner - Paragraphs

Emphasis

Line breaks

HTML beginner - Page Title

HML Beginner - Tags

Tags

Closing tags

Attributes

Elements

HTML Beginner - Getting Started

Getting Started

EgoPay Hesabı Açmak