HosChat.Net Chat , Sohbet , Mirc , Mirc indir , Mirç yükle , mirç

Archive for the ‘Web (HTML)’ Category

Tablolar (html)

Haziran 23rd, 2009 |

Author: admin

Tablolar, sayfaları

satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML’nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek. İşte tablolar,

Sonbahar	Kış	İlkbahar	Yaz
Eylül	Aralı k	Mart	Haziran
Ekim	Ocak	Nisan	Temmuz
Kası m	Şubat	Mayı s	Ağ ustos

Tabloyu renklendirelim,

Sonbahar	Kış	İlkbahar	Yaz
Eylül	Aralı k	Mart	Haziran
Ekim	Ocak	Nisan	Temmuz
Kası m	Şubat	Mayı s	Ağ ustos

Ba

şka bir örnek (farklara dikkat ediniz)

		ÖLÇÜLER
		Boy	Kilo
1.	Hakkı	1.77	80
2.	Mustafa	1.82	75
3.	Osman	1.75	83

Bu örneklerde de görüldüğ

ü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:

Tablo Ba

şlığı (thead)

Sütun Ba şlığı #1	Sütun Ba şlığı #2	Sütun Ba şlığı #3	Sütun Ba şlığı #4
hücre	hücre	hücre	hücre
hücre	hücre	hücre
hücre		hücre
Tablonun alt yazı sı(caption)

Bu kadar örnek yeterli,

şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle <table>…</table>yoruz ve arasını doldurmaya başlıyoruz. <tr>rları <td> oluşturuyoruz.

hücre	<table border=”1″> <tr> <td>hücre</td> </tr> </table>
hücre1 hücre2	<table border=”1″> <tr> <td>hücre1</td> <td>hücre2</td> </tr> </table>
hücre1 hücre2	<table border=”1″> <tr> <td>hücre1</td> <tr> </tr> <td>hücre2</td> </tr> </table>
hücre1 hücre2 hücre3 hücre4	<table border=”1″> <tr> <td>hücre1</td> <td>hücre2</td> </tr> <tr> <td>hücre3</td> <td>hücre4</td> </tr> </table>

Tabloda ba

şlık ve gövdeTablolar da HTML sayfası

nda olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead>na yazarız. <caption>klama vermek mümkündür. Sütun ba

şlıklarına gelince, her bir başlık <th>u gibi <tr>…</tr>na yazılır.Tabloda satı

r ve sütunları belirten <tr>na alınır.Yukarı

daki örneklerden birisini değiştirerek bu anlattıklarımızı uygulayalım;

Tablo Ba

şlığı (thead)

alt-yazı

(caption)

1.Sütun

2.Sütun

3.Sütun

hücre1

hücre2

hücre3

hücre4

hücre5

hücre6

hücre7

hücre8

hücre9

<table border=”1″>

<thead>Tablo Ba

<caption align=”bottom”>

alt-yazı

<caption>

<tr>

  <th>1.Sütun</th>

  <th>2.Sütun</th>

  <th>3.Sütun</th>

</tr>

<tbody>

<tr>

  <td>hücre1</td>

  <td>hücre2</td>

  <td>hücre3</td>

</tr>

<tr>

  <td>hücre4</td>

  <td>hücre5</td>

  <td>hücre6</td>

</tr>

<tr>

  <td>hücre7</td>

  <td>hücre8</td>

  <td>hücre9</td>

</tr>

</tbody>

</table>

şlığı (thead)</thead>
(caption)

Parametreler

<table

border=”…”

cellpadding=”…”

cellspacing=”…”

align=”…”

width=”…”

height=”…”>

border

nlığını belirtir. border=0lar.

hücre

<table border=”0″>

<tr>

  <td>hücre</td>

</tr>

</table>

hücre

<table border=”2″>

<tr>

  <td>hücre</td>

</tr>

</table>

hücre

<table border=”4″>

<tr>

  <td>hücre</td>

</tr>

</table>

hücre

<table border=”6″>

<tr>

  <td>hücre</td>

</tr>

</table>

cellpadding

parametresi hücre içi marj değerini belirtir. cellpadding=0şik olmasını sağlar.

hücre

<table border=”1″ cellpadding=”0″>

<tr>

  <td>hücre</td>

</tr>

</table>

hücre

<table border=”1″ cellpadding=”5″>

<tr>

  <td>hücre</td>

</tr>

</table>

hücre

<table border=”1″ cellpadding=”10″>

<tr>

  <td>hücre</td>

</tr>

</table>

cellspacing

parametresi hücreler arası marjı belirler.

hücre1

hücre2

<table border=”1″ cellspacing=”1″>

<tr>

  <td>hücre1</td>

</tr>

<tr>

  <td>hücre2</td>

</tr>

</table>

hücre1

hücre2

<table border=”1″ cellspacing=”5″>

<tr>

  <td>hücre1</td>

</tr>

<tr>

  <td>hücre2</td>

</tr>

</table>

hücre1

hücre2

<table border=”1″ cellspacing=”10″>

<tr>

  <td>hücre1</td>

</tr>

<tr>

  <td>hücre2</td>

</tr>

</table>

align

parametresi tabloyu düşey hizalamada kullanılır, align=lefta dayalı yapar, align=center

hücre1

hücre2

<table border=”1″ align=”left”>

<tr>

  <td>hücre1</td>

</tr>

<tr>

  <td>hücre2</td>

</tr>

</table>

hücre1

hücre2

<table border=”1″ align=”center”>

<tr>

  <td>hücre1</td>

</tr>

<tr>

  <td>hücre2</td>

</tr>

</table>

hücre1

hücre2

<table border=”1″ align=”right”>

<tr>

  <td>hücre1</td>

</tr>

<tr>

  <td>hücre2</td>

</tr>

</table>

width

ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz.

hücre1

hücre2

<table border=”1″ width=”150″ height=”200″>

<tr>

  <td>hücre1</td>

</tr>

<tr>

  <td>hücre2</td>

</tr>

</table>

hücre1

hücre2

<table border=”1″ width=”80″ height=”80″>

<tr>

  <td>hücre1</td>

</tr>

<tr>

  <td>hücre2</td>

</tr>

</table>

hücre1

hücre2

<table border=”1″ width=”5″ height=”5″>

<tr>

  <td>hücre1</td>

</tr>

<tr>

  <td>hücre2</td>

</tr>

</table>

<td> etiketi için parametreler

<td bgcolor=”…”

background=”…”

width=”…”

height=”…”

align=”…”

valign=”…”>

bgcolor

lır.

hücre1

hücre2

hücre3

hücre4

<table border=”1″ cellpadding=”7″>

<tr>

<td bgcolor=”#ff0000″>hücre1</td>

</tr>

<tr>

<td bgcolor=”#00ff00″>hücre2</td>

</tr>

<tr>

<td bgcolor=”#0000ff”>hücre3</td>

</tr>

<tr>

<td bgcolor=”#ffff00″>hücre4</td>

</tr>

</table>

background

parametresi ile hücreye grafik-artalan yerleştirebiliriz.

hücre1

hücre2

hücre3

hücre4

<table border=”1″ cellpadding=”9″>

<tr>

<td background=”resim1.jpg”>hücre1</td>

</tr>

<tr>

<td background=”resim2.jpg”>hücre2</td>

</tr>

<tr>

<td background=”resim3.jpg”>hücre3</td>

</tr>

<tr>

<td background=”resim4.jpg”>hücre4</td>

</tr>

</table>

width

ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız heightini değiştirebilirken, widthiştiremeyiz.En büyük widtheri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda widtherini her hücre için değiştirebilirken en büyük heighteri tüm satır için geçerli olacaktır.

hücre1

hücre2

hücre3

hücre4

<table border=”1″ cellpadding=”7″>

<tr><td width=120 height=20>hücre1</td></tr>

<tr><td width=120 height=40>hücre2</td></tr>

<tr><td width=120 height=60>hücre3</td></tr>

<tr><td width=120 height=80>hücre4</td></tr>

</table>

hücre1

hücre2

hücre3

hücre4

<table border=”1″ cellpadding=”7″>

  <tr>

     <td width=40 height=30>hücre1</td>

     <td width=70 height=30>hücre2</td>

     <td width=90 height=30>hücre3</td>

     <td width=120 height=30>hücre4</td>

  </tr>

</table>

align

parametresi hücre içinde yatay hizalama yapar.

hücre1

hücre2

hücre3

<table border=”1″ cellpadding=”7″>

<tr><td width=”100″ align=”left”>hücre1</td></tr>

<tr><td width=”100″ align=”center”>hücre2</td></tr>

<tr><td width=”100″ align=”right”>hücre3</td></tr>

</table>

valign

parametresi hücre içinde düşey hizalama yapar.

hücre1

hücre2

hücre3

<table border=”1″ cellpadding=”7″>

<tr>

<td height=”80″ valign=”top”>hücre1</td>

</tr>

<tr>

<td height=”80″ valign=”middle”>hücre2</td>

</tr>

<tr>

<td height=”80″ valign=”bottom”>hücre3</td>

</tr>

</table>

Hücreleri Birle

ştirme<td colspan=”..” rowspan=”..”>

Aynı

satırdaki hücreleri birleştirmek için colspan sütundaki hücreleri birleştirmek için de rowspanyoruz. Birleştirilen hücreye ait <td>..</td>

A

B

C

D

E

F

G

H

I

J

K

L

<table border=”1″ cellpadding=”12″>

<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>

<tr><td>E</td><td>F</td><td>G</td><td>H</td></tr>

<tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>

</table>

Yukarı

daki tabloda; A ve B hücrelerini birle

ştirmek için A hücresine ait <td>ştirmek için E hücresine ait <td>

A

C

D

E

H

I

J

K

L

<table border=”1″ cellpadding=”12″>

<tr><td colspan=”2″>A</td><td>C</td><td>D</td></tr>

<tr><td colspan=”3″>E</td><td>H</td></tr>

<tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>

</table>

Aynı

şekilde E ve I hücrelerini birleştirmek için E hücresine ait <td>ştirmek için C hücresine ait <td>

A

B

C

D

E

F

H

J

L

<table border=”1″ cellpadding=”12″>

<tr><td>A</td><td>B</td>

    <td rowspan=”3″>C</td><td>D</td></tr>

<tr><td rowspan=”2″>E</td><td>F</td><td>H</td></tr>

<tr><td>J</td><td>L</td></tr>

</table>

etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait <td>G</td> , <td>K</td> etiketlerini siliyoruz. etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait <td>I</td> etiketini siliyoruz. C G ve K hücrelerini birle etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait <td>F</td>, <td>G</td> etiketlerini siliyoruz. etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait <td>B</td> etiketini siliyoruz. E F ve G hücrelerini birle etiketini siliyoruz. parametresini kullanı, aynı değ değ değ komutu ile her hücreyi değ komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğ parametresi hücreyi renklendirmede kullanı ortalar sola, align=right sağ hücre içinde bulunan unsurun (metin/grafik) hücre çerçevesine biti çerçevenin görünmemesini sağ parametresi çerçevenin kalı ve <td> etiketleri <tbody>…</tbody> arası arası etiketi ile belirtilir ve bunlar <td> etiketinde olduğ etiketi ile ikinci bir açı gövdeyi <tbody> etiketleri arası etiketi ile de sütunları etiketi ile satı etiketlerini yazı

Posted in Web (HTML) |

Tags: çet, chat, genel tablolar, hoschat, html, html web, tablolar |

No Comments »

Resimler (Html)

Haziran 23rd, 2009 |

Author: admin

Posted in Web (HTML) |

Tags: html, html res, Resimler, resimler html, web resimler html |

No Comments »

Renkler (Html)

Haziran 23rd, 2009 |

Author: admin

Posted in Web (HTML) |

Tags: çet, chat, hoschat, html bilgi, html renk ayarlari, renk, renkler html, web bilgi |

No Comments »

Metin (Html)

Haziran 23rd, 2009 |

Author: admin

Posted in Web (HTML) |

Tags: bilgi html, çet, chat, eğitim html, hoschat, html biçimleme, html metin, metin bicimleme |

No Comments »

Listeler (Html)

Haziran 23rd, 2009 |

Author: admin

HTML bize üç tip liste hazırlama imkanı veriyor.

Bunlar;

1. Sıralı listeler (ordered list)

2. Sırasız listeler (unordered list)

3. Tanımlama listeleri (definition list)

Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır. Sı

ralı Listeler

Liste içine alınacak metinler <ol>…</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Liste maddelerinin başına ise <li> (list item) etiketini getiriyoruz. Bu etikette tıpkı <br> etiketi gibi sonlandırılmıyor. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz. Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.

Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde) bölümünü vereceğiz. Kodun geri kalan kısımlarını kendi sayfanızda tam olarak yazmayı unutmayın.

<li>Kimya

<li>İ

norganik <li>Analitik

</ol>

<li>Fizik

<li>Dinamik

<li>Statik

</ol>

<li>Matematik

<li>Sayı

lar <li>Diğ

er <ol type=”i”>

<li>Türev

<li>İ

ntegral </ol>

</ol>

1. Kimya

a. Organik

b. İnorganik

c. Analitik

2. Fizik

a. Dinamik

b. Statik

3. Matematik

a. Sayılar

b. Diğer

i. Türev

ii. İntegral

Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak da mümkün. Dikkat edeceğimiz nokta; işe <ol> etiketi ile başlayıp liste maddelerinin her birisinin başına <li> etiketini getirmek ve listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak. Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar <ol> etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz. Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar, harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi) Sı

rasız Listeler

Bu tip listelerde de mantık aynı. Fark; listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler kullanabilmemiz. <ol> etiketi yerine <ul> etiketini kullanıyoruz, liste maddeleri için kullandığımız <li> etiketi burada da geçerli. <ol> için kullanılabilecek parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare). Compact parametresi sırasız listelerde de kullanılabiliyor.

<ul type=”disc”>

<li>Kimya

   <ul type=”square”>

    <li>İ

norganik    <li>Analitik

   </ul>

<li>Fizik

   <ul type=”square”>

    <li>Dinamik

    <li>Statik

   </ul>

<li>Matematik

   <ul type=”square”>

    <li>Sayı

lar    <li>Diğ

er       <ul type=”circle”>

         <li>Türev

         <li>İ

ntegral       </ul>

   </ul>

</ul>

·

§

§

§

Analitik İnorganik Organik ·

§

§

Statik Dinamik ·

§

Sayılar §

Diğer o

o

İntegral Türev Matematik Fizik Kimya

Tanı

mlama ListeleriBu listelemede kullanılan etiketler şöyle; <dl>…</dl> , <dd> , <dt> Listenin maddelerini belirtmek için kullandığımız <li> etiketinin yerini burada <dd> ve <dt> etiketleri alıyor. Aynı şekilde <ol>…</ol> veya <ul>…</ul> etiketleri arasına aldığımız listeyi bu sefer <dl>…</dl> arasına yazıyoruz. Yine parametre olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.

Hemen örneğimize geçelim, <font face=”verdana” size=”4″ color=”red”>Neler öğ
<dl compact>
<dt><font size=”3″ color=”blue”>HTML nedir?</font>
<dd><font size=”2″ color=”black”>HTML (HyperText Markup

Language-Hareketli-Metin İş

rendik?</font>
aretleme Dili) basitçe, browserlarla görebileceğ

imiz, internet dökümanları oluşturmaya yarayanbir çe

<dt><font size=”3″ color=”blue”>HTML’de Temel Unsurlar</font>
<dd><font size=”2″ color=”black”>Bu dilde binary veya

hexadecimal kodlar yok. Her

şit dildir…</font>
şey metin tabanlı ve bir HTML dökümanıolu

şturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip editörbulunuyor. Birisi metin tabanlı

<dt><font size=”3″ color=”blue”>Listeler</font>
<dd><font size=”2″ color=”black”>Sı

, kod yazmayı gerektiren…</font>
ralı listeler rakamveya harf yada her ikisini içiçe kullanarak liste olu

şturmamızı, sırasızlisteler rakam/harf yerine madde imleri koyarak liste

olu

şturmamızı sağlar…</font>

Posted in Web (HTML) |

Tags: çet, chat, hoschat, html, html egitim, html liste, listeler, Web (HTML), web bilgi |

No Comments »

hücre	<table border=”0″> <tr> <td>hücre</td> </tr> </table>
hücre	<table border=”2″> <tr> <td>hücre</td> </tr> </table>
hücre	<table border=”4″> <tr> <td>hücre</td> </tr> </table>
hücre	<table border=”6″> <tr> <td>hücre</td> </tr> </table>

hücre	<table border=”1″ cellpadding=”0″> <tr> <td>hücre</td> </tr> </table>
hücre	<table border=”1″ cellpadding=”5″> <tr> <td>hücre</td> </tr> </table>
hücre	<table border=”1″ cellpadding=”10″> <tr> <td>hücre</td> </tr> </table>

hücre1 hücre2	<table border=”1″ cellspacing=”1″> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table>
hücre1 hücre2	<table border=”1″ cellspacing=”5″> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table>
hücre1 hücre2	<table border=”1″ cellspacing=”10″> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table>

hücre1 hücre2	<table border=”1″ align=”left”> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table>
hücre1 hücre2	<table border=”1″ align=”center”> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table>
hücre1 hücre2	<table border=”1″ align=”right”> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table>