- HTML DERSLERİ

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

Renkler0 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

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

TABLOLAR

<table>

<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

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

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

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

</body>
</html>

</form>

Şimdi de yavaş yavaş form elemanlarımızı kullanmaya başlayalım;
İlk form elemanımız Ad Soyad bilgisini alacağımız metin kutusu olsun;

<head>
<title>Yucomp web form denemesi</title>
</head>

<table border="1" cellpadding="0" cellspacing="0" width="100%" height="134">
<tr>
    <td width="43%" height="22">
    <p align="right">Adınız Soyadınız:</td>
    <td width="157%" height="22"><input type="text" name="adsoyad" size="20"></td>
</tr>
<tr>
    <td width="43%" height="21">
    <p align="right">Üyelik Durumunuz:</td>
    <td width="157%" height="21">Aktif:<input type="radio" name="durum" value="Aktif" checked>Pasif:<input type="radio" name="durum" value="Pasif"><BR></td>
</tr>
<tr>
    <td width="43%" height="22">
    <p align="right">Bölüm:</td>
    <td width="157%" height="22"><select name="bolum"><option selected>Elektrik-Elektronik Müh</option><option>Bilgisayar Müh</option><option>Sistem Müh</option></select></td>
</tr>
<tr>
    <td width="43%" height="19">
    <p align="right">Görüşleriniz:</td>
    <td width="157%" height="19"><textarea name="gorusler" rows="2" cols="20"></textarea> </td>
</tr>
<tr>
    <td width="43%" height="19">
    <p align="right">Her Hafta Rapor Almak İster misiniz? </td>
    <td width="157%" height="19">
    <input type="checkbox" name="raporlar" value="İstiyorum" checked></td>
</tr>
<tr>
    <td width="43%" height="19">
    <p align="right"><input type="submit" value="Gönder"></td>
    <td width="157%" height="19"><input type="reset" value="Temizle"></td>
</tr>
</table>
<form>
</body>
<input type="text" name="adsoyad" size="20"> koduyla sayfamızda 20 karekter genişliğinde, adsoyad adında bir metin kutusu oluşturuyoruz. Eğer bir şifre alanı oluşturmak istiyorsanız yapmanız gereken sadece input type="text" yerine input type="password" yazmaktır, eğer metin kutusunun ekranda görünmeyeninden istiyorsanız-ileri uygulamalar için-input type="text" yerine input type="hidden" yazmanız gerekecektir.
Üyelik durumu bilgisini alacağımız iki tane radio düğme oluşturalım, kodu yazmadan radio düğme hakkında kısaca bilgi verelim: aynı ada sahip radio düğmelerden en az ve ne fazla biri seçilebilir,cinsiyet veya aktif-pasif sorgularında kullanılabilir
Aktif:<input type="radio" name="durum" value="Aktif" checked>Pasif:<input type="radio" name="durum" value="Pasif">
Bölüm(veya meslek) bilgisini alacağımız bir liste kutusu(combo box) oluşturalım;
<select name="bolum">
<option selected>Elektrik-Elektronik Müh</option>
<option>Bilgisayar Müh</option>
<option>Sistem Müh</option>
</select>
Not: <option>Deger1</option> Eger value degeri vermezseniz bu secenek seçildiğinde Deger1 gönderilir ancak;
<option value="Asildeger">Deger1</option> bu durumda bu secenek secildiğinde Asildeger gönderilir.
Metin kutusunun yetersiz kalacağı uzunlukta veri alışı yapacağımız metin alanı oluşturalım;
<textarea name="gorusler" rows="2" cols="20"></textarea>
Her hafta çalışma raporu almak istiyorum veya istemiyorum bilgisinin alınacağı onay kutusu oluşturalım;
Not:Eğer onay kutusu işaretlenip gönderilirse value değeri gönderilir,eğer işaretlenmemişse boş gönderilir.
<input type="checkbox" name="raporlar" value="istiyorum" checked>Anlaşılacağı gibi checked ibaresi varsayılan görünümü işaterli yapar,yeri gelmişken:herhangi bir form elemanında bu ibarenin olduğu yere disabled yazarsak o form elemanı işlevini yitirir,deneyip görünüz:))
Son olarak düğmelerimizi yerleştirelim;
Gönderme işlemini yapacak formların demirbaşı olan gönderme butonumuzu oluşturalım(her düğme gönderme işlemi yapmaz,birazdan siz de göreceksiniz)
<input type="submit" value="Gönder" >
Form alanlarını temizleyecek(ilaveten) düğmemizi de oluşturalım(bu düğme gibi);
<input type="reset" value="Temizle">

Şimdi de bu kodları kullanarak tablo yardımıyla düzgün bir şekilde gösterebileceğimiz sayfanın tüm kodlarını yazalım;

<html></html>
İşte bukadar.Formun hazır hali.

Formun Üstü

Adınız Soyadınız:
Üyelik Durumunuz:	Aktif:Pasif:
Bölüm:
Görüşleriniz:
Her Hafta Rapor Almak İster misiniz?

Formun Alt

<frameset cols="*,*"> cols="140,500" cols="25%,75%" cols="140,*"

<frameset rows="*,*"> rows="140,500" rows="25%,75%" rows="140,*"FRAMESET

frameborder="..." (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler.

border="..." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler.

1. Sıralı listeler (ordered list)

etiketi ile kullanabileceğimiz diğer parametreler şunları

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.

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şlarYazı 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

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 yaparYazı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.

</body>
</html>