//-->
Html Css Flash Siteniz için yüzlerce tema tasarım yayınlandı.. Devamı...
  • Fbml kodlar
  • Html kodlar
  • Css kodlar
Devamı...

Web Tasarım | Html kodlar - css kodlar -fbml kodlar - bedava - tema - şablon | Photoshop - Dreamweaver - Fireworks - Wordpress - Joomla - Mysql - Php - Drupal - Ajax - Javascript - Flash Html Css Kodlama Haber Ordu Akkuş İlçesi

Html Site Tasarimi

<title>

 

<body>

 

 

<h1> BAŞLIKLAR

<bgcolor>

 

<center>

 

<b>

 

<i>

 

<u>

 

 

 

<font>

 

<font> Takısının Parametreleri

<html>è Tüm Html sayfaları <html> ile başlar </html> ile biter. è è è Ekranın arka planının rengini belirlemek için <body> takısı ile birlikte kullanılır. è Yazıyı satırda ortalar è è è è Yazının tipini ve boyutunu ayarlamamızı sağlar.

<font face=arial size=5 color=ff00ff >

<font face=arial>

 

 

<font size=5>

 

<font color=ff00ff>

 

 

 

 

BR Etiketi ( Alt satıra geçmeyi sağlar)

 

HR Etiketi( Çizgi çizer)

è Yazının tipini è Yazının büyüklüğünü è Yazının rengini belirler.

 

HR Etiketi’nin Parametreleri

 

 

<hr width=100>

 

<hr size=20>

 

<hr color=ff0000>

 

<hr align=right> , left, center

 

Çizginin sayfadaki yatay konumunun sola, sağa veya ortaya hizalanmasını sağlar.

<marquee> Kayan Yazı

<marquee> Parametreleriè Sağdan, yukarıdan ve aşağıdan başlayarak kayması sağlanır è Yazılar kaydırılırken ekrandan kaybolmadan bir uçtan diğerine gider è Kayan yazıların arka plan rengini belirler.è Yazının kayacağı alanın yüksekliği ve genişliği ayarlanabilir.è Yazının kaç kez kayacağı belirlenir. Daha sonra da yazı durur.è Kaydırma

 

 

 

 

 

<marguee direction=right>,up,down

<marquee behavior=alternate>

<marquee bgcolor=ff00ff>

 

<marquee height=10 width=250>

<marquee loop=3>

 

<marquee scrolldelay=1>

 

 

 

Fontlar

 

<font face="..." size="..." color="...">...</font>

 

face= yazıtipinin adı (arial, tahoma, verdana, ...)
size= yazının büyüklüğü (1-7 arası)
color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri)

 

Renkler

0 1 2 3 4 5 6 7 8 9 A B C D E F

 

color=#xxxxxx

[10'un karşılığı A ... 15'in karşılığı F'dir.]

 

1. #000000=black(siyah) 2. #000080=navy(lacivert)
3. #0000FF=blue(mavi) 4. #008000=green(yeşil)
5. #008080=teal(koyu yeşil) 6. #00FF00=lime(parlak yeşil)
7. #00FFFF=aqua(turkuaz) 8. #800000=maroon(vişne çürüğü)
9. #800080=purple(mor) 10. #808000=olive(zeytuni yeşil)
11. #808080=gray(gri) 12. #C0C0C0=silver(gümüşi gri)
13. #FF0000=red(kırmızı) 14. #FF00FF=fuchsia(parlak pembe)
15. #FFFF00=yellow(sarı) #FFFFFF=white(beyaz)

 

 

 

 

LİNKLER

 

<a href=http://www.bilgiegitim.com target="_blank">

è <a name="1"> diye Link verilmek istenen alan isimlendirilir.

 

Sayfa içine link vermek için de

 

1-)

2-)

 

Kullanılır

 

<body> Takısının Parametreleri

 

<body bgcolor=ffff00 background=deniz.jpg text=ffffff link=0000ff hlink=ff0000 vlink=ff00ff>

 

 

bgcolor

è Arka plana bir resmin duvar kağıdı olarak döşenmesini sağlar.

Background

è Metnin rengini belirler.

Text

è Linklerin renklerini belirler.

Link

è Fare imleci link’in üzerine geldiğinde link’in hangi renkte görüntüleneceğini belirler.

Hlink

è Ziyaret edilen sayfaların linklerinin rengini belirler

Vlink

è

 

 

 

 

Listeler

 

 

Compact

3.

 

parametresi sırasız listelerde de kullanılabiliyor.

Resimler

 

<img src="resmin bulunduğu yer ve adı" width="x" height="y">

"resmin bulunduğu yer ve adı" ====c:html_dersresimgiflerkedi.gif

<img src=*.jpg>’nin Parametreleri

 

<img align=middle src= bilgisayar.jpg >

<img align=top src

 

<img align=left src= bilgisayar.jpg>

 

<img align=right src= bilgisayar.jpg>

 

<img src= bilgisayar.gif alt="???????? ??"

 

<img border=0 src=bilgisayar.gif>

 

 

 

TABLOLAR

 

<table>

<tr><td> </td></tr>

<tr><td> </td></tr>

 

 

<tr>

 

è Satır açar

<td>

 

 

 

<table> Takısının Parametreleri

 

<table border=1>

<table width=100>

 

<table height=50>

 

<table cellspacing=2>

 

<table cellpadding=5>

 

<table bgcolor=ffff00>

 

<table align=left> ; <table align=right>; <table align=center>

 

<table background=tugla.gif>

 

< table bgcolor=ffff00

 

 

 

<td> Takısının Parametreleri

 

<td align=left> right; center

<td bgcolor=00ffff>

 

<td width=250>

 

<td colspan=2>

 

<td rowspan=2>

 

<td background=hasan.gif>

 

 

 

colspan

rowspan

 

 

Çerçeveler

 

 

 

Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.

<frameset>...</frameset> Çerçeve oluşturmada kullandığımız etiket.

 

<frame name="..." src="..."> çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim vermeyi sağlıyor. src pencerede görüntülenecek html dosyasının yerini gösteriyor. form action=verial.asp method=post name=form1>

 

<frame name="sol" src="htm1.htm">

FRAME

 

<FRAME SRC="sol.html" NAME="sol" SCROLLING="NO" NORESIZE>

<FRAME SRC="sag.html" NAME="sag" MARGINWIDTH="0" MARGINHEIGHT="0"

 

 

Veri Giriş FORMları:

<

verial.php, verial.jsp, verial.pl, verial.cfm de olabilir.

POST

1-)Yavaş

2-) Güvenli

3-) http header’ı kullanır.

4-) Sınırsız bilgi gönderir

 

GET

1-) Hızlı

2-) Güvensiz

3-) Browser’in adres satırını kullanır.

4-) Max 2048 karekter gönderebilir.

 

<form action=verial.asp method=post name=form1>

Adınız

 

Şifreniz

 

Cinsiyetiniz

Bay

Bayan

 

Hobileriniz

 

Mesajınız

 

 

 

 

 

 

 

è Text (255 Karaktere kadar)è Passwordè Radio Sinema Müzik Tv è Chechboxè Textarea

q

 

q

 

q

 

 

İlgili Taglar

<input type=text name=ad>

<input type=password name=sifre>

<input type=radio name=cinsiyet value=bay> BAY

<input type=checkbox name=hobi1> Sinema

<textarea cols=35 rows=10></textarea>

<select name=gun>

<option> 01 </option>

</select>

<select name=ay>

<option> OCAK </option>

 

</select>

 

 

<select name=yil>

<option> 1971 </option>

 

</select>

<input type=submit value=Gönder>

<input type=reset value=Sil>

</form>

 

 

Web Formlarına Giriş

 

 

Web sayfalarından görmeye alışık olduğumuz web formlarını istemci gözüyle değerlendirmeye çalışacağız.

Form nedir? Formun tanımını yaparak başlayalım, formlar kullanıcılardan bilgi almak için kullanılan, çeşitli nesneler barındıran ortamlardır;bir iş başvurusunda bile karşımıza bir form gelir doldurup iletiriz(web sayfalaında doldurduktan sonra düğmeyle gönderiyoruz(submit)).Web sayfalarında formların en çok kullanıldığı yerler: iletişim bölümünden mesaj gönderme alanları,forumlarda mesaj gönderdiğimiz alanlar,anketlerde oy kullanmamızı sağlayan radio buttonlar(her seçeneğin başındaki,sadece birinin içi işaretleyebilindiği-soldaki anketimizde görüldüğü gibi-) ve göndermemizi sağlayan düğmeler(buttonlar),açılır kutular(combo box) form dediğimiz yapıların elemanlarıdır.

 

<form> </form> taglarıyla oluşturulur,bu tagların arasına veri alacağımız nesneleri bir bir yerleştireceğiz(inputlar).Bu veri alacağımız nesnelere geçmeden(inputlara), form taglarinin temel parametrelerini inceleyelim (nasıl ki table tagının <table bordercolor="#FFFFFF" border="1" gibi parametleri varsa, form taglarının parametreleri vardır ).Form taglarının en genel 3 parametresi vardır.
Bunlar name, action, method hadi bir de target diyelim.
name: forma vereceğimiz isimdir, örnek:
<form name="yucomp">
Form nesneleri buraya
</form>
Artık formumuzun bir ismi var ancak sadece isim hiç bir işe yaramaz,bu formun nereye gonderileceğini belirteceğimiz action parametresi olmadan.
action:Formun(verilerin) hangi dosyaya gönderileceğini action parametresine yazarız.örnek:
<form name="yucomp" action="islem.asp">
Form nesneleri buraya
</form>
Artık formumuzla göndereceğimiz bilgilerin gideceği yer belli. :Formumuzdaki bilgilerin gönderilme metodu,post ve get olarak iki yöntem vardır.Genellikle post kullanılır, anatomisine girmeden sadece şunu söyleyeyim get le gonderilen bilgiler adres çubuğunda görünür (Gelelim bu formların HTML ile oluşturulmasına,gelin sizde bir metin belgesi açın ve beraberce bir web formu oluşturalım.Olmazsa olmaz kodlarımızı hemen yazalım;

İstemci gözüyle diyorum çünkü bu dersimizde sadece istemci tarafını yani form taglarını, form nesnelerini, nasıl kullanıldıklarını öğrenmeye çalışacağız; gönderilen bilgilerin sunucuda değerlendirilmesini,kullanılmasını ilerki derslerimizde işleyeceğiz,şunu unutmayalım ki sunucu tarafli bir dil olmadan web formları bir anlam taşımaz,çünkü bu formlardan gelen verileri ancak bir sunucu taraflı dil yardımıyla alıp kullanabiliriz.<html>
<head>
<title> web form denemesi</title>
</head>
<body>

 

Formlar

www.yucomp.org?kac=3&nerde=listede gibi). Biz örneğimizde post methodunu kullanacağız. Eğer method bildirimini yapmazsanız method varsayılan olarak get olacaktır. Form taglarımızın son hali;<form name="yucomp" action="islem.asp" method="post">
Bir dahaki dersimizde burayı dolduracağız:)
</form>target: bu parametre pek gerekli olmuyor,eğer actionu yeni sayfaya vermek istiyorsanız,target="_blank" şeklinde kullanabilirsiniz.(hatırlayacağınız gibi a tagında -kopru verirken-<a href="dosyaismi.html" target="_blank">Buraya Tıklayınız</a> şeklinde yeni sayfada açtırabiliriz)
Veri alabiliceğimiz nesneleri(form nesnelerini) sıralayalım,sonrada kullanalım;
1) Metin Kutusu(textbox)
2) Düğmeler(Button)
3) Açılır Kutu(combobox)
4) Seçim Menüsü diyelim(select)
5) Metin alanı(textarea)
6) Onay Kutucuğu(check box)
7) Radio düğme(radio button)
8) Dosya yükleme(file) <html>
<head>
<title>Yucomp web form denemesi</title>
</head>
<body>

Geçen dersimizden <form></form> taglarını ve parametrelerini tanıdık.Form tagımızın parametrelerini şöyle belirleyelim;
<form name="yucomp" action="islem.asp" method="post">

method


 

 


En yaygın bunlar kullanılıyor.

Geçen dersimizle giriş yaptığımız "Web Formlarına" bu dersimizle devam ediyoruz.Bu dersimizde çeşitli form elemanlarını kullanacağımız genel bir web formunu beraberce hazırlayacağız.Fazla uzatmadan işe koyulalım;olmazsa olmazlarımızı hemen yazalım;

 

ÇALIŞMAMIZ BURADA OLACAK.

 

ÇALIŞMAMIZ BURADA OLACAK.

etiketi ile kullanabileceğimiz parametreler;

marginwidth="..." marginheight="..."    (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler.

scrolling=".."    (yes, no, auto) Kaydırma çubuklarının durumunu belirler.

noresize    Pencere boyutlarının sabit olmasını sağlar.
Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir.
Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir.
è è Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir.è Hücre genişliğini belirlemek için kullanılır.è è è Hücrenin arka planına bir resim yerleştirir.è Sütun Birleştirè Satır Birleştirir
Tablonun arkasına resim konulabilir.
è Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.è Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır.è Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır.è Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır.è Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır. è Tablonun genel arka plan rengini belirlemek için kullanılır.è Tablonun konumunu ayarlamayı sağlar.è > è Tablonun arka zemin rengini ayarlar. Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz.
è Sütun açar
Resmin etrafında çerçeve çıkmasını engeller.
Resmin üzerine gelince çıkması istenilen yazı
Yazı resmin sağından hizalanarak yazılmaya başlar
Yazı resmin solundan yazılmaya başlar
=bilgisayar.gif > Yazı resmin üstünden hizalanarak yazılmaya başlarè Yazı resmin ortasından hizalanarak yazılmaya başlarè è è è è

Liste içine alınacak metinler <ol>...</ol>

Listenin maddelerinin başına ise <li> (list item)

Listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz

2.

 

Sırasız listeler (unordered list)

<ol> etiketi yerine <ul> etiketini kullanıyoruz

 

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

 

<li> etiketinin yerini burada <dd> ve <dt> etiketleri alıyor

<ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz

 

 

Liste maddeleri için kullandığımız <li> etiketi burada da geçerliTanımlama listeleri (definition list) Link verirken de <a href="1"> 1 e Git </a> Arka plan rengini ayarlar.Target parametresi ile açılacak sayfanın farklı bir sayfada açılması sağlanabilir.
Çizginin kalınlığını ayarlamak için kullanılır.
Çizginin genişliğini ayarlamak için kullanılır.è è è Çizginin rengini ayarlamak için kullanılır.è
Yazıyı Altı çizgili yapar
Yazıyı İtalik, Eğik yapar.
Yazıyı Koyu, Kalın yapar.
Sayfa içinde çıkması istenen yazılar bu komut içine yazılır.
Sayfanın başlık kısmında çıkması istenen yazılar buraya yazılır.

<title>

 

<body>

 

 

<h1> BAŞLIKLAR

<bgcolor>

 

<center>

 

<b>

 

<i>

 

<u>

 

 

 

<font>

 

<font> Takısının Parametreleri

<html>è Tüm Html sayfaları <html> ile başlar </html> ile biter. è è è Ekranın arka planının rengini belirlemek için <body> takısı ile birlikte kullanılır. è Yazıyı satırda ortalar è è è è Yazının tipini ve boyutunu ayarlamamızı sağlar.

<font face=arial size=5 color=ff00ff >

<font face=arial>

 

 

<font size=5>

 

<font color=ff00ff>

 

 

 

 

BR Etiketi ( Alt satıra geçmeyi sağlar)

 

HR Etiketi( Çizgi çizer)

è Yazının tipini è Yazının büyüklüğünü è Yazının rengini belirler.

 

HR Etiketi’nin Parametreleri

 

 

<hr width=100>

 

<hr size=20>

 

<hr color=ff0000>

 

<hr align=right> , left, center

 

Çizginin sayfadaki yatay konumunun sola, sağa veya ortaya hizalanmasını sağlar.

<marquee> Kayan Yazı

<marquee> Parametreleriè Sağdan, yukarıdan ve aşağıdan başlayarak kayması sağlanır è Yazılar kaydırılırken ekrandan kaybolmadan bir uçtan diğerine gider è Kayan yazıların arka plan rengini belirler.è Yazının kayacağı alanın yüksekliği ve genişliği ayarlanabilir.è Yazının kaç kez kayacağı belirlenir. Daha sonra da yazı durur.è Kaydırma

 

 

 

 

 

<marguee direction=right>,up,down

<marquee behavior=alternate>

<marquee bgcolor=ff00ff>

 

<marquee height=10 width=250>

<marquee loop=3>

 

<marquee scrolldelay=1>

 

 

 

Fontlar

 

<font face="..." size="..." color="...">...</font>

 

face= yazıtipinin adı (arial, tahoma, verdana, ...)
size= yazının büyüklüğü (1-7 arası)
color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri)

 

Renkler

0 1 2 3 4 5 6 7 8 9 A B C D E F

 

color=#xxxxxx

[10'un karşılığı A ... 15'in karşılığı F'dir.]

 

1. #000000=black(siyah) 2. #000080=navy(lacivert)
3. #0000FF=blue(mavi) 4. #008000=green(yeşil)
5. #008080=teal(koyu yeşil) 6. #00FF00=lime(parlak yeşil)
7. #00FFFF=aqua(turkuaz) 8. #800000=maroon(vişne çürüğü)
9. #800080=purple(mor) 10. #808000=olive(zeytuni yeşil)
11. #808080=gray(gri) 12. #C0C0C0=silver(gümüşi gri)
13. #FF0000=red(kırmızı) 14. #FF00FF=fuchsia(parlak pembe)
15. #FFFF00=yellow(sarı) #FFFFFF=white(beyaz)

 

 

 

 

LİNKLER

 

<a href=http://www.bilgiegitim.com target="_blank">

è <a name="1"> diye Link verilmek istenen alan isimlendirilir.

 

Sayfa içine link vermek için de

 

1-)

2-)

 

Kullanılır

 

<body> Takısının Parametreleri

 

<body bgcolor=ffff00 background=deniz.jpg text=ffffff link=0000ff hlink=ff0000 vlink=ff00ff>

 

 

bgcolor

è Arka plana bir resmin duvar kağıdı olarak döşenmesini sağlar.

Background

è Metnin rengini belirler.

Text

è Linklerin renklerini belirler.

Link

è Fare imleci link’in üzerine geldiğinde link’in hangi renkte görüntüleneceğini belirler.

Hlink

è Ziyaret edilen sayfaların linklerinin rengini belirler

Vlink

è

 

 

 

 

Listeler

 

 

Compact

3.

 

parametresi sırasız listelerde de kullanılabiliyor.

Resimler

 

<img src="resmin bulunduğu yer ve adı" width="x" height="y">

"resmin bulunduğu yer ve adı" ====c:html_dersresimgiflerkedi.gif

<img src=*.jpg>’nin Parametreleri

 

<img align=middle src= bilgisayar.jpg >

<img align=top src

 

<img align=left src= bilgisayar.jpg>

 

<img align=right src= bilgisayar.jpg>

 

<img src= bilgisayar.gif alt="???????? ??"

 

<img border=0 src=bilgisayar.gif>

 

 

 

TABLOLAR

 

<table>

<tr><td> </td></tr>

<tr><td> </td></tr>

 

 

<tr>

 

è Satır açar

<td>

 

 

 

<table> Takısının Parametreleri

 

<table border=1>

<table width=100>

 

<table height=50>

 

<table cellspacing=2>

 

<table cellpadding=5>

 

<table bgcolor=ffff00>

 

<table align=left> ; <table align=right>; <table align=center>

 

<table background=tugla.gif>

 

< table bgcolor=ffff00

 

 

 

<td> Takısının Parametreleri

 

<td align=left> right; center

<td bgcolor=00ffff>

 

<td width=250>

 

<td colspan=2>

 

<td rowspan=2>

 

<td background=hasan.gif>

 

 

 

colspan

rowspan

 

 

Çerçeveler

 

 

 

Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.

<frameset>...</frameset> Çerçeve oluşturmada kullandığımız etiket.

 

<frame name="..." src="..."> çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim vermeyi sağlıyor. src pencerede görüntülenecek html dosyasının yerini gösteriyor. form action=verial.asp method=post name=form1>

 

<frame name="sol" src="htm1.htm">

FRAME

 

<FRAME SRC="sol.html" NAME="sol" SCROLLING="NO" NORESIZE>

<FRAME SRC="sag.html" NAME="sag" MARGINWIDTH="0" MARGINHEIGHT="0"

 

 

Veri Giriş FORMları:

<

verial.php, verial.jsp, verial.pl, verial.cfm de olabilir.

POST

1-)Yavaş

2-) Güvenli

3-) http header’ı kullanır.

4-) Sınırsız bilgi gönderir

 

GET

1-) Hızlı

2-) Güvensiz

3-) Browser’in adres satırını kullanır.

4-) Max 2048 karekter gönderebilir.

 

<form action=verial.asp method=post name=form1>

Adınız

 

Şifreniz

 

Cinsiyetiniz

Bay

Bayan

 

Hobileriniz

 

Mesajınız

 

 

 

 

 

 

 

è Text (255 Karaktere kadar)è Passwordè Radio Sinema Müzik Tv è Chechboxè Textarea

q

 

q

 

q

 

 

İlgili Taglar

<input type=text name=ad>

<input type=password name=sifre>

<input type=radio name=cinsiyet value=bay> BAY

<input type=checkbox name=hobi1> Sinema

<textarea cols=35 rows=10></textarea>

<select name=gun>

<option> 01 </option>

</select>

<select name=ay>

<option> OCAK </option>

 

</select>

 

 

<select name=yil>

<option> 1971 </option>

 

</select>

<input type=submit value=Gönder>

<input type=reset value=Sil>

</form>

 

 

Web Formlarına Giriş

 

 

Web sayfalarından görmeye alışık olduğumuz web formlarını istemci gözüyle değerlendirmeye çalışacağız.

Form nedir? Formun tanımını yaparak başlayalım, formlar kullanıcılardan bilgi almak için kullanılan, çeşitli nesneler barındıran ortamlardır;bir iş başvurusunda bile karşımıza bir form gelir doldurup iletiriz(web sayfalaında doldurduktan sonra düğmeyle gönderiyoruz(submit)).Web sayfalarında formların en çok kullanıldığı yerler: iletişim bölümünden mesaj gönderme alanları,forumlarda mesaj gönderdiğimiz alanlar,anketlerde oy kullanmamızı sağlayan radio buttonlar(her seçeneğin başındaki,sadece birinin içi işaretleyebilindiği-soldaki anketimizde görüldüğü gibi-) ve göndermemizi sağlayan düğmeler(buttonlar),açılır kutular(combo box) form dediğimiz yapıların elemanlarıdır.

 

<form> </form> taglarıyla oluşturulur,bu tagların arasına veri alacağımız nesneleri bir bir yerleştireceğiz(inputlar).Bu veri alacağımız nesnelere geçmeden(inputlara), form taglarinin temel parametrelerini inceleyelim (nasıl ki table tagının <table bordercolor="#FFFFFF" border="1" gibi parametleri varsa, form taglarının parametreleri vardır ).Form taglarının en genel 3 parametresi vardır.
Bunlar name, action, method hadi bir de target diyelim.
name: forma vereceğimiz isimdir, örnek:
<form name="yucomp">
Form nesneleri buraya
</form>
Artık formumuzun bir ismi var ancak sadece isim hiç bir işe yaramaz,bu formun nereye gonderileceğini belirteceğimiz action parametresi olmadan.
action:Formun(verilerin) hangi dosyaya gönderileceğini action parametresine yazarız.örnek:
<form name="yucomp" action="islem.asp">
Form nesneleri buraya
</form>
Artık formumuzla göndereceğimiz bilgilerin gideceği yer belli. :Formumuzdaki bilgilerin gönderilme metodu,post ve get olarak iki yöntem vardır.Genellikle post kullanılır, anatomisine girmeden sadece şunu söyleyeyim get le gonderilen bilgiler adres çubuğunda görünür (Gelelim bu formların HTML ile oluşturulmasına,gelin sizde bir metin belgesi açın ve beraberce bir web formu oluşturalım.Olmazsa olmaz kodlarımızı hemen yazalım;

İstemci gözüyle diyorum çünkü bu dersimizde sadece istemci tarafını yani form taglarını, form nesnelerini, nasıl kullanıldıklarını öğrenmeye çalışacağız; gönderilen bilgilerin sunucuda değerlendirilmesini,kullanılmasını ilerki derslerimizde işleyeceğiz,şunu unutmayalım ki sunucu tarafli bir dil olmadan web formları bir anlam taşımaz,çünkü bu formlardan gelen verileri ancak bir sunucu taraflı dil yardımıyla alıp kullanabiliriz.<html>
<head>
<title> web form denemesi</title>
</head>
<body>

 

Formlar

www.yucomp.org?kac=3&nerde=listede gibi). Biz örneğimizde post methodunu kullanacağız. Eğer method bildirimini yapmazsanız method varsayılan olarak get olacaktır. Form taglarımızın son hali;<form name="yucomp" action="islem.asp" method="post">
Bir dahaki dersimizde burayı dolduracağız:)
</form>target: bu parametre pek gerekli olmuyor,eğer actionu yeni sayfaya vermek istiyorsanız,target="_blank" şeklinde kullanabilirsiniz.(hatırlayacağınız gibi a tagında -kopru verirken-<a href="dosyaismi.html" target="_blank">Buraya Tıklayınız</a> şeklinde yeni sayfada açtırabiliriz)
Veri alabiliceğimiz nesneleri(form nesnelerini) sıralayalım,sonrada kullanalım;
1) Metin Kutusu(textbox)
2) Düğmeler(Button)
3) Açılır Kutu(combobox)
4) Seçim Menüsü diyelim(select)
5) Metin alanı(textarea)
6) Onay Kutucuğu(check box)
7) Radio düğme(radio button)
8) Dosya yükleme(file) <html>
<head>
<title>Yucomp web form denemesi</title>
</head>
<body>

Geçen dersimizden <form></form> taglarını ve parametrelerini tanıdık.Form tagımızın parametrelerini şöyle belirleyelim;
<form name="yucomp" action="islem.asp" method="post">

method


 

 


En yaygın bunlar kullanılıyor.

Geçen dersimizle giriş yaptığımız "Web Formlarına" bu dersimizle devam ediyoruz.Bu dersimizde çeşitli form elemanlarını kullanacağımız genel bir web formunu beraberce hazırlayacağız.Fazla uzatmadan işe koyulalım;olmazsa olmazlarımızı hemen yazalım;

 

ÇALIŞMAMIZ BURADA OLACAK.

 

ÇALIŞMAMIZ BURADA OLACAK.

etiketi ile kullanabileceğimiz parametreler;

marginwidth="..." marginheight="..."    (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler.

scrolling=".."    (yes, no, auto) Kaydırma çubuklarının durumunu belirler.

noresize    Pencere boyutlarının sabit olmasını sağlar.
Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir.
Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir.
è è Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir.è Hücre genişliğini belirlemek için kullanılır.è è è Hücrenin arka planına bir resim yerleştirir.è Sütun Birleştirè Satır Birleştirir
Tablonun arkasına resim konulabilir.
è Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.è Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır.è Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır.è Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır.è Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır. è Tablonun genel arka plan rengini belirlemek için kullanılır.è Tablonun konumunu ayarlamayı sağlar.è > è Tablonun arka zemin rengini ayarlar. Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz.
è Sütun açar
Resmin etrafında çerçeve çıkmasını engeller.
Resmin üzerine gelince çıkması istenilen yazı
Yazı resmin sağından hizalanarak yazılmaya başlar
Yazı resmin solundan yazılmaya başlar
=bilgisayar.gif > Yazı resmin üstünden hizalanarak yazılmaya başlarè Yazı resmin ortasından hizalanarak yazılmaya başlarè è è è è

Liste içine alınacak metinler <ol>...</ol>

Listenin maddelerinin başına ise <li> (list item)

Listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz

2.

 

Sırasız listeler (unordered list)

<ol> etiketi yerine <ul> etiketini kullanıyoruz

 

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

 

<li> etiketinin yerini burada <dd> ve <dt> etiketleri alıyor

<ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz

 

 

Liste maddeleri için kullandığımız <li> etiketi burada da geçerliTanımlama listeleri (definition list) Link verirken de <a href="1"> 1 e Git </a> Arka plan rengini ayarlar.Target parametresi ile açılacak sayfanın farklı bir sayfada açılması sağlanabilir.
Çizginin kalınlığını ayarlamak için kullanılır.
Çizginin genişliğini ayarlamak için kullanılır.è è è Çizginin rengini ayarlamak için kullanılır.è
Yazıyı Altı çizgili yapar
Yazıyı İtalik, Eğik yapar.
Yazıyı Koyu, Kalın yapar.
Sayfa içinde çıkması istenen yazılar bu komut içine yazılır.
Sayfanın başlık kısmında çıkması istenen yazılar buraya yazılır.


Bugün 11 ziyaretçi (23 klik) kişi burdaydı!
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol