Frame, HTML'de birden fazla belgeye tek bir sayfada yer vermek amacıyla açılan pencereler. Bu şekilde sağda farklı bir pencere ve içerik, solda farklı bir pencere ve içerik olacaktır. Genellikle bir pencere linklerin bulunduğu alan, diğer pencere ise asıl içeriğin bulunacağı alan olarak kullanılır. Arama Motoru optimizasyonu için olumsuz etkileri olduğu için genellikle kullanılmaz. Biz yine de en önemli kısımlarıyla ele alalım:
Pencereleri bölmeye <frameset> koduyla başlarız. Dikkat etmemiz gereken <body></body> arasında yazılamaması gerektiğidir. Bu kısım frame tekniği desteklemeyen tarayıcılar için <noframes></noframes> arasında kullanılacaktır.
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Burada cols="deger1,deger2" şeklinde bir kullanım dikkatinizi çekmiştir. Burada belirteceğimiz değerler pencere sütunlarının oranlarını belirtmektedir. yatay pencereler kullanacaksak bu kezrows="deger1,deger2" şeklinde kullanmalıyız.
Bahsi geçen değerler yüzde (%) olarak ifade edilebileceği gibi piksel olarak da yazılabilir. Eğer bir pencerenin boyutu, diğeri için belirtilen dışındaki alan olacaksa (*) kullanırız. Bir örnek: cols="200,*" yazarsak. İlk pencere (frame_a.htm) 200 piksel genişliğinde olacaktır, diğer pencere ise (frame_b.htm) geriye kalan tüm alanı kaplayacaktır.
Son olarak şunu ekleyelim, değerler pencere sayısı kadar yazılacaktır. Eğer 3 pencere kullansaydık. Bu kez 3 pencere için sırasıyla ayarlama yapacaktık: cols="200,25%,*" gibi.
Bunun için frameset açılış ve kapanış etiketleri arasında <noframes>(tarayıcınız frame desteklemiyor mesajı)</noframes> şeklinde bir bölüm koyuyoruz. Burası html sayfamızın devamıymış gibi <body></body> tagları arasına almalıyız.
Yatay ve Dikey Pencereleri Bir Arada Kullanmak
Bunun için frame içinde frame kullanmalıyız. Üst tarafta yatay bir pencere ve hemen altında sağ ve sol olarak ikiye bölünmüş bir pencere örneği verecek olursak:
Frameleri birbirinden ayıran çizgiyi yok etmek için <frame src="#"> koduna frameborder="0"özelliği eklememiz yeterlidir.
Pencere boyutları sizin belirttiğiniz gibi başlangıçta çalışmakta fakat kullanıcı tarafından değiştirilebilmektedir. Bunu engellemek için <frame src="#"> koduna noresize="noresize" özelliği eklememiz yeterlidir.
IFRAME Kullanmak
Bunun yukarıda anlatılandan farklı yanı normal bir HTML belgesinde farklı bir sayfa ya da site için pencere açmanıza yaramaktadır. Pencere içerisinde boyutu belirttiğiniz boyutlarda olmak üzere belirttiğiniz site görünecektir:
Bir HTML belgesinde bağlantı (link) verme işini <a href="adres"> koduyla yapmaktayız. Link verdiğimiz kelime ortaya gelecek şekilde yine </a> ile bağlantı verme işini sonlandırmaktayız. Bu şekilde başka bir sayfaya ya da web sitesie bağlantı veririz. Aynı zamanda bu yolla bir müzik dosyası, bir zip arşivi vb. de link vermeniz mümkün.
Aşağıda sitenin bir sayfasına, başka bir siteye, mail adresine ve bir dosyaya link örnekleri görmekteyiz. Bunları inceleyelim:
<a href="index.html">HTML Dersleri için buraya tıklayın (Sayfa)</a>
<a href="http://sitesi.web.tr/">Ana sayfa için buraya tıklayın (Site).</a>
<a href="mailto:admin@venus.gen.tr">Bize e-mail göndermek için buraya tıklayın (E-mail).</a>
<a href="http://html.sitesi.web.tr/images/html.gif">Site logosunu görmek için buraya tıklayın (GIF resim dosyası).</a>
Dikkat: Bir siteye link verirken www.siteadresi.com şeklinde ya da siteadresi.com şeklinde yazarsanız link yine sayfanızda bu bağlantıyı arar. Bunun için başka bir siteye link verirken mutlaka http:// ile başlanmalıdır.
Bağlantıyı Yeni Pencerede Açmak
Bunun için target="_blank" özelliğini kodumuza ekleriz. Böylece bağlantı sayfamızda değil yeni bir pencerede açılacaktır:
<a href="http://sitesi.web.tr/" target="_blank">Ana sitemizi yeni bir sayfada açmak için tıklayın..</a>
Bazı durumlarda (özellikle uzun sayfalarda) sayfanın belirli bir bölümüne link vermek gerekebilir. Bunun için name="" özelliğinden yararlanırız. Böyle durumlarda href="" özelliği kullanılmaz.
Öncelikle sayfa içinde bağlantı vereceğimiz yere giderek <a name="etiket"></a> şeklinde yer imimizi belirtiyoruz. Böylece sayfanın bu kısmını işaretledik. Şimdi bu işarete link vermek için sayfa içerisinde başka bir yerde (en aşağıda ya da en yukarıda olabilir) <a href="#etiket">(metin)</a> şeklinde işaretlediğimiz yere link veriyoruz.
Örnekte görüldüğü gibi tıklandığı zaman daha önce <a name="top"></a> ile Bağlantılar yazısının hemen üstünde belirttiğimiz yere gidiyor. Bu bölüme dışarıdan link vermek içinhref="baglantilar.html#top" kullanılabilir. Sayfa yüklendikten sonra işaretli kısım görünecektir.
Bazı karakterler HTML dilinde çeşitli anlamlara gelebilmektedir. Örneğin (<) karakteri bir HTML kodunun başladığını anlatır ve bunu düz metin kısmında kullanmak kodlamalarda soruna yol açabilir. Böyle durumlarda (&) ya da (#) ile başlayan ve (;) ile biten bazı özel kelimelerden yararlanarak özel karakterleri kullanmalıyız.
Kaynak koduna baktığımızda bunlar < şeklinde görülmektedir. Fakat tarayıcının (<) işaretini oluşturduğunu görürüz.
Gözardı Edilemez Boşluklar
Normalde HTML dilinde boşluk ( ) karakterleri bazı özel durumlar hariç sayılmaz. Yani 10 tane boşluk kullanmış da olsanız bu tarayıcı tarafından boşluk yokmuş gibi algılanır. Bu durumu da özel karakterlerle halledebiliriz. Böyle bir durumda boşluk bırakmak için kullanacağımız metin ( )'dir. Aşağıda iki farklı örnekte birinde 10 tane boşluk karakteri, diğerinde 10 tane kullanıldı.
HTML dosyamızdaki metinleri biçimlendirirken (kalınlık, sağa yatık yazma, vurgu vb.) çeşitli kodlardan yararlanırız. Bunların birbirinden farklı en önemlilerine aşağıdaki listeden ulaşabilirsiniz. Tüm metin biçimlendirme çeşitleri ise aşağıdaki örnekte verilmiştir.
Etiket
Anlamı
<b>
Kalın yazmak.
<i>
Sağa yatık (italik) yazmak.
<u>
Altı çizili yazmak.
<del>
Üstü çizili yazmak.
<sup>
Üs yazmak.
<sub>
Alt hizada yazı yazmak.
<big>
Büyük yazı.
<small>
Küçük yazı.
<b>Kalın bir yazı</b><br />
<i>Sağa yatık bir yazı</i><br />
<u>Altı çizili yazı.</u><br />
<del>Üstü çizili yazı.</del><br /><br />
Normal Metin <sub>Yazı hizasının altında küçük yazı.</sub><br /><br />
Normal Metin <sup>Yazı hizasının üstünde küçük yazı.</sup><br /><br />
<big>Büyük bir yazı</big><br />
<small>Küçük bir yazı</small><br /><br />
<em>Vurgulu bir yazı</em><br />
<strong>Vurgulu bir yazı</strong><br />
<ins>Vurgulu bir yazı.</ins><br />
<s>Vurgulu bir yazı.</s><br />
<strike>Vurgulu bir yazı.</strike><br />
Kalın bir yazı Sağa yatık bir yazı Altı çizili yazı. Üstü çizili yazı.
Normal Metin Yazı hizasının altında küçük yazı.
Normal Metin Yazı hizasının üstünde küçük yazı.
Büyük bir yazı Küçük bir yazı
Vurgulu bir yazı Vurgulu bir yazı Vurgulu bir yazı. Vurgulu bir yazı. Vurgulu bir yazı.
Yazı Tipi, Yazı Boyutu ve Renk Seçimi
Bunun için <font> kodunu kullanıyoruz. Örneği inceleyelim:
<font face="Tahoma" size="1" color="red">Bu 1. örnek yazı..</font><br /> <font face="Verdana" size="2" color="blue">Bu 2. örnek yazı..</font><br /> <font face="Times New Roman" size="3" color="#CCFFCC">Bu 3. örnek yazı..</font><br />
Bu 1. örnek yazı.. Bu 2. örnek yazı.. Bu 3. örnek yazı..
face="yazıtipi" - Yazı tipi, font klasöründeki adıyla yazılır. size="boyut" - 1-6 arasında bir değerdir. color="renk" - Yazı rengini burdan belirtiriz. Renklerle ilgili bilgi verilecek..
Daha önceden de söylediğimiz gibi, HTML kodları çeşitli özellikleri desteklemekte ve bunlarıozellik="deger" tarzı bir kullanımla belirtmekteydik. Şimdi bunu örnekleyelim:
<h1 align="center">Ortalanmış Bir Başlık</h1>
H1 Başlık
Align özelliği h1, div, td, p gibi anahtarlarda desteklenen sayfa düzeni özelliğidir. Bu değer left (sola), right (sağa) ve center (ortalanmış) olabilir.
Başka bir örnek, tablo kenarlığını tarayıcıya anlatmak:
<table> - bir tablo başlattığımızı anlattık. <table border="0"> - bir tablo başlattığımızı, aynı zamanda bu tablonun kenarlığı olmadığını (0) anlattık.
Bir özelliği yazarken tırnak işareti ya da ayıraç kullanacaksak dikkat etmemiz gereken nokta kullanmadığımız karakterle özelliği belirtmek. Örneğin:
<a href="#" title="Murat'ın sayfası için tıklayın..">Benim Bağlantım 1</h1>
<a href="#" title='"Murat" ın sayfası için tıklayın..'>Benim Bağlantım 2</h1>
Bundan sonraki derslerde nesneleri, kullanabileceğiniz özellikleri ile birlikte tanıyacağız.
Bu bölümde H1-H2-H3-H4-H5-H6 olarak tabir ettiğimiz başlık yapısı (heading), paragraf açma ve satır atlamayı öğreneceğiz.
Başlık Kullanma
Başlıklar <H1>'den <H6>'ya kadar en büyükten en küçüğe doğru sıralanan ve sayfadaki yerine göre kullanacağımız, W3C standardında başlıklarımızdır. Bu başlıklardan sonra ayrıca bir satır atlanmaktadır...
<h1>H1 Başlık</h1>
<h2>H2 Başlık</h2>
<h3>H3 Başlık</h3>
<h4>H4 Başlık</h4>
<h5>H5 Başlık</h5>
<h6>H6 Başlık</h6>
H1 Başlık
H2 Başlık
H3 Başlık
H4 Başlık
H5 Başlık
H6 Başlık
Yukarıdaki örnekte H1'in değiştirildiğini görüyorsunuz. Daha sonra anlatacağımız CSS stil dosyaları ya da dosya içi stillemeler kullanarak başlık etiketlerinde (renk, boyut vs.) değişiklik yapmanın mümkün olduğunu göreceksiniz.
Paragraflar
Paragraf yeni bir satıra başlangıcı ifade eder. Bunu HTML dilinde <p> ile başlatır ve </p> ile bitiririz. Aynı başlık yapısında olduğu gibi paragraflardan sonra da kendiliğinden satır atlar.
<p>Bu bir paragraf örneği..</p>
<p>Bu da başka bir paragraf örneği..</p>
Bu bir paragraf örneği..
Bu da başka bir paragraf örneği..
NOT: Açılan bir kodu kapatmayı unutmayınız: Satır atlama (<br />) ve meta dışında <b>...</b> gibi kullanılmalı. Aksi takdirde sayfa düzeninde bozulmalar oluşabilir.
Satır Atlamak
Bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda, HTML dilinde satır atlamak için <br /> tagını kullanırız.
<p>Bu bir<br /> paragraf ve satır atlama<br /> örneği..</p>
Bu bir paragraf ve satır atlama örneği..
Temelde <br> ile <br /> arasında fark yoktur. Fakat (/) eklenmesinin nedeni, satır atlama kodunun bir kapanış tagı olmamasıdır (yani </br> şeklinde bir kullanım olamaz). W3C Standartlarına göre <br /> daha doğru bir kullanımdır (XHTML gereği).
HTML dili tag, etiket adlarını verdiğimiz kodlamalardan oluşur.
Bu kodlar < ile başlayıp > ile biterler.
Bir kod genellikle iki parçadan oluşur. Bu elementin başladığı ve bittiği kodlardır. Element bittiği zaman bölü işareti (/) ile başlangıçtaki değerin yazılması yeterlidir. Örneğin: <b>metin...</b>
Tabi her kod bu duruma uymaz. Bazı kodlar için kapanma anahtarı kullanılmaz, onun yerine bu işaret başlangıç kodunun sonuna eklenir. Örneğin: <br />, <hr />
Bu kodlar büyük-küçük harf fark etmeden işler. Yani <b> ile <B> arasında fark yoktur. Buna karşın W3C standartları gereği küçük harf kullanmak daha yararlıdır.
Aşağıda başlayan ve biten bir kalın yazma elementi görmekteyiz:
<b>Bu bir kalın yazıdır...</b>
Değişmez Sayfa Yapısı
Bir HTML dosyası her zaman aşağıdaki şekilde kodlanmalıdır:
<html> <head> <title>Sayfa Başlığı</title> (Meta etiketler, scriptler, RSS yolları ve CSS dosyası) </head> <body> (Diğer tüm elementler ve düz metin) </body> </html>
W3C Standardında bir HTML belgesinde bu kodlar olmazsa olmazdır. Sonuçta yerlerini ters yazsanız da ya da düz metin yazsanız da browser tarafından görünür fakat HTML ön bilgileri, sayfa başlığı, içeriğin bulunduğu yer tarayıcı tarafından görülmez ve hem arama motorları, hem ziyaretçi, hem de browser için bazı sıkıntılar doğurabilir..
Şimdi buradaki standart diyebileceğimiz kodlar ve aralarında geçen html kodlarını incelemeye başlayalım...
İpucu: HTML kodlarını öğrenirken anında deneme yapmak için sağ üstte bulunan HTML Editörü'nü kullanabilirsiniz..
Bu dili kodlamak için öncelikle HTML, XHTML, XML gibi dillerin temel yapı taşı olan elementlerin (aynı zamanda html kodu, html etiketi, html tagı olarak geçebilir) nasıl çalıştıkları hakkında bilgi vermek gerekir. Bu kodlar < ile başlayıp > ile biten anahtarlardır.
<html>
Tüm HTML belgesi bu şekil hazırlanmış kodlardan ve aralarında geçen metin (bunlar arama motorları tarafından ya da ziyaretçi tarafından çoğunlukla görülen düz metinler)'den oluşur. Bir HTML kodu ile ilgili bir özellik belirtilecekse tırnak işareti arasında özellik="değer" şeklinde yazılır:
<body bgcolor="black">
Hangi HTML tagının hangi işe yaradığı ve hangi özellikleri desteklediğini ilerleyen sayfalarda göreceksiniz. Şimdi elementler hakkında biraz daha fazla bilgi edinelim...
CSS Nedir?
Cascading Style Sheets, Yığmalı Stil Kağıtları(Yığmalı Stil Şablonları) olarak isimlendirilir. Sayfalarda kullanılan yazı tipi, rengi, boyutu, paragraf biçemi, linkler v.b. gibi özellikleri her satırda yazmak yerine, topluca bir defada tanımlama işlemidir.
CSS, sayfanın dizaynında tam esneklik vermesi amacıyla üretilmiş bir dildir. Kullanım kolaylığı sebebiyle Html’e eklenmesinden dolayı çoğu web tasarımcısının gözdesi olmuştur. Her türlü sayfa dizaynını kullanıcıya bırakarak bir esneklik sağlar.
Ayrıca bağlantılı stil şablonları(external style sheets) aracılığı ile de birden çok sayfayı etkiyebilir. Bu yöntemle kullanıcı web sitesinin görünümünü değiştirmek istediğinde onlarca sayfanın kodlarını değiştirmeden sadece css dosyasının değiştirerek bu eylemini gerçekleştirir.
CSS Çeşitleri
Css’in üç farklı kullanım alanı vardır:
In-Line Style Sheet(Satır İçinde Stil): Sadece tanımlanan HTML etiketi için özel olarak kullanılırlar.
Embedded Style Sheet(HTML’in İçine Gömülmüş Stil): Sayfadaki tüm HTML etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar.
External Linked Style Sheet(Bağlanmış Stil, Ayrı Bir Dosyada Harici Stil): Bağlantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde HTML sayfası içersine çağrılırlar.
In-Line Style Sheet(Satır İçinde Stil)
Yukarıda belirtildiği gibi Satır İçinde Stiller(Yerel Stil Şablonları), uygulanacak etiketi sadece bir kez bulunduğu yerde (yerel) etkiler. Örneğin;
<html> <head>
<title>Css Uygulamaları</title>
</head>
<body topmargin="50" leftmargin="50">
<h1>In-Line Style Sheet(Satır İçinde Stiller)</h1><br> <h1 style="font-size:20pt; color:blue">
In-Line Style Sheet(Satır İçinde Stiller)</h1> <h3 style="letter-spacing:36pt">BİÇEMLER</h3> <p style="text-align:justify; text-indent:20pt" align="left">
Cascading Style Sheets, Yığmalı Stil Kağıtları(Stil Şablonları) olarak isimlendirilir.
Sayfalarda kullanılan yazı tipi, rengi, boyutu, paragraf biçemi, linkler v.b. gibi
özellikleri her satırda yazmak yerine, topluca bir defada tanımlama işlemidir.</p> <font style="font:14pt comic sans ms" font color="red">
CSS, sayfanın dizaynında tam esneklik vermesi amacıyla üretilmiş bir dil. Kullanım kolaylığı ve kullanışlılığı ile Html'e eklenmesinden dolayı çoğu web tasarımcısının gözdesi olmuştur. Her türlü sayfa dizaynını kullanıcıya bırakarak bir esneklik sağlar. </font>
<br>
<center> <a href="http://bilmuh.ege.edu.tr/~kacan/index.html" style="text-decoration:none">HTML Dersleri</a>
</center>
</body> </html> Bu örneğimizi denemestil.htm adıyla kaydedip tarayıcı yardımıyla açıldığında iki tane In-Line Style Sheet(Satır İçinde Stiller) yazısıyla karşılaşılır. Fakat bunların yazım tarzı farklı olacaktır, çünkü ikinci <h1> tag’ını etkilemek üzere bir stil kağıdı oluşturuldu. Diğer biçemlerin görünümü ile ilgili görünüm Şekil-26’daki gibidir.
Şekil 26-In-Line Style Sheet Görünümü Embedded Style Sheet(HTML’in İçine Gömülmüş Stil)
Embedded Stil Şablonları bir önceki örnekte yapılan <h1> tag’ının tüm sayfada aynı özellikte olması istendiğinde kullanılır. Bunun için Stil Şablon özellikleri sayfanın başlangıcında <head></head> etiketleri arasında tanımlanmalıdır. <style type=”text/css”>..... tanımlamasıyla bunun bir stil şablonu olduğu ve </style> ile şablonun sona erdiği belirtilir. <!-- etiketi ile Css’i tanımayan tarayıcıların bu kısmı geçmesi sağlanır. Bu saklama işlemi --> etiketi ile son bulur.
Örneğin:
Sayfa içerisinde kullanılacak tüm <h1> tag’larının özellikleri sabitlemiş oldu. Sayfa içerisinde nerede <h1> tag’ı kullanırsa kullanılsın <h1> tag’ının stil özellikleri hep aynı olacaktır. Tarayıcı görünümü Şekil-27’deki gibi olacaktır.
Şekil 27-Embedded Style Sheet Görünümü External Linked Style Sheet(Bağlanmış Stil, Ayrı Bir Dosyada Harici Stil)
Harici stil şablonu ise hazırlanan web sitesinin içerisindeki tüm sayfalarda aynı biçem özelliklerinin kullanılması istendiği durumlarda kullanılır.
Not Defteri text editöründe yeni bir sayfa açılarak, bağlantılı olacağı sayfalara aktarılması istenilen biçemler yazılır. Hazırlanan dosya .css uzantısı ile kaydedilir. Ardından html dosyasının içerisine <head>... </head> tag’ları arasına aşağıdaki
<link rel="stylesheet" type="text/css" href="dosyaismi.css">
satır eklenir.
Örneğin:
body {
font:small verdana, arial,helvatica,sans serif, comic sans;
color:black;
background-color:#bbddff;
}
A:link{color:#0000ff}
A:link{active:#666666}
A:link{visited:#ff00000}
H1 {
font:bold large comic sans ms;
color:red;
}
H2 {
font:bold large comic sans ms;
color:maroon;
}
H3 {
font:bold medium comic sans ms;
color:blue;
}
P {
font-color:black;
font-size:12 pt;
font-family:bookman old style;
text-indent:1 cm;
text-align:justify;
}
UL {
font:small verdana;
color:blue;
}
OL {
font:Large helvatica;
color:red;
}
LI {
font:Bold Large tahoma ;
color:red;
}
DL {
font:small arial;
color:green;
}
DI {
font:small helvetica;
color:aqua;
}
DD {
font:small times new roman;
color:BLACK;
}
Bu dosya örneğin stil.css olarak ve daha sonra hangi web sayfasında kullanılacak ise o sayfanın bulunduğu klasöre kaydedilir. İstenilen Html dosyası içinden de,
<head> <link rel="stylesheet" type="text/css" href="stil.css">
</head>
tag’ları arasına yazılarak link verilir.
Html dosyasının kodları arasında geçen kodu stil.css dosyasındaki stil özelliklerinin kullanmasını sağlayacaktır. Bu kod istenilen diğer html dosyalarına da kullanıcı tarafından eklenebilir.
Formlar Oluşturmak
Formlar web sayfalarını ziyaret eden kullanıcılardan bilgi alınmasını sağlarlar. Basit olarak formlar ziyaretçilerden bilgi alınabilen alanlardır. Formlar sayesinde, kullanıcı Web sayfalarına anketler, misafir defterleri ve sipariş formları koyabilir. Dolayısıyla ziyaretçiler tarafından doldurulmuş olunan formun, Web sayfasını düzenleyen kişiye ulaşabilmesi çok önemlidir. Bununla ilgili olarak birkaç yöntem vardır.
Formlar iki yönlü çalışırlar. Bunlardan birincisi Web tarayıcısı tarafından ekranda oluşturulan görüntü, diğeri ise, ziyaretçi tarafından doldurulduktan sonra gönderilen ve Web tarayıcısınında bu bilgileri alarak sunucuda çalıştırılan bir uygulamaya iletmesidir.
Öncelikle bir formu hazırlamak için sadece HTML tag’larını bilmek yeterlidir ancak bu formun yerine ulaşabilmesi için farklı uygulamaların (örneğin, ASP, CGI yada diğer Web teknolojileri) kullanılmaları gerekebilir. Form verileri bir Veri Tabanına kaydedilebilir, bir E-Posta adresine gönderilebilir ve daha sonrasında ise, mySQL ile istenilen kriterlere göre veriler süzülebilirler. Örnek çalışmalarda Web sayfasında oluşturulan bir formun, Elektronik Posta olarak gönderilmesi konuları işlenecektir.
Formları oluşturmak için HTML’de, <form>....</form> tag’ları arasına elemanların eklenmesi gerekir. Form tag’ı form oluşturmak için kullanılır. Form tag’ı parametreleri ise aşağıda belirtilmiştir.
Form parametreleri Action(Eylem), Method(Yöntem) ve Enctype(Şifreleme-Kodlama Türü Text/Plain)’dir. ACTION parametresi ile form ile gönderilecek verilerin gideceği yer(nereye gönderileceği) belirlenir. Bir başka ifade ile, formun gönderildiğinde hangi program tarafından değerlendirileceği belirtilir.
Örneğin, gönderilen verilerin e-posta yoluyla Web sayfası tasarımcısının mail adresine gönderilmesi isteniyorsa HTML kodu aşağıdaki gibi olacaktır:
<form Action=mailto:kacan@bilmuh.ege.edu.tr>..</form>
Action parametresi için burada kullanılan seçenek mailto: seçeneğidir. Mailto: seçeneğinden sonra e-posta(e-mail) adresinin yazılması gereklidir. Action parametresinin ikinci bir kullanımı ise, formun çıktıklarını bir CGI göndermesidir.
Böyle bir durumda action parametresi kullanımında, mailto: seçeneğinin yerine kullanulacak cgi programının tam adresi yazılmalıdır. HTML kodu aşağıda verilmiştir:
<form action=”cgi-bin/bookform”>............</form>
Böylece doldurulup gönderilen formun, çalışması gereken CGI Script’inin yeri belirlenmiş olur. Form bilgilerinin web sunucusunun cgi-bin klasöründe yer alan bookform script’i tarafından işleneceği belirtilmiştir. CGI yazılımları genel olarak web server’larda CGI -BIN klasörü altında bulunurlar.
<form action=”/cgi-bin/users/sorubank/dersler/ustortam /perl/perl-cgi/formdeger.pl>........ </form>
Form bilgilerinin web sunucusunun cgi-bin klasöründe yer alan formdeger.pl uygulaması tarafından işleneceği belirtilmiştir. METHOD parametresi formun göderileceği metodu (yöntem) yani bilgilerin sunucuya hangi yolla gönderileceğini belirtir. Get ve Post olmak üzere iki seçeneği vardır. Get metodu ile en fazla 1000 karakter gönderilebilir. Hızlıdır ve web tarayıcısının adres satırını kullanarak veriyi gönderir.
Get metodu kullanıldığında, kontrollere giren içerik, o anda bulunulan adrese eklenip değerlendiriciye gönderilir. Kullanımı aşağıdaki gibidir:
<form action=mailto:kacan@bilmuh.ege.edu.tr method= ”get”> ........ </form> Post metodunda ise veri sınırlaması yoktur. Post metodu kullanıldığında, formun içeriği direkt olarak derleyici programa yönlendirilir. Kullanımı aşağıdaki gibidir:
<form action=mailto:kacan@bilmuh.ege.edu.tr method= ”post”> ........ </form> ENCTYPE parametresi ise, formun e-posta yoluyla mail adresine metin olarak gönderilmesi istendiği durumlarda kullanılır. Bazı e-mail programları formlar içindeki veriyi desteklemeyebilirler. Bu yüzden bir encode(şifreleme) programı kullanarak veri düzenlenir. Bunun için Enctype parametresinden sonra kullanılması istenilen encode tipi belirlenir. Kullanımı aşağıdaki gibidir:
<form action=mailto:kacan@bilmuh.ege.edu.tr method= ”post” enctype=”text/plain”>........ </form>
Sonuç olarak form tagının genel kullanımı:
<form action="url" method="post|get">...</form> şeklindedir.
Form tag’ı ile kullanılan önemli bir tag’da form elemanlarını eklemek için kullanılan Input tag’ıdır. Bu tag yardımıyla form içerisine veri giriş alanları yerleştirilir.
Input tag’ı ile yerleştirilecek veri giriş alanlarının tipininde(textbox, checkbox, radio, hidden, password, file, image, button, reset, submit, drop down list box ve scrolling text box) belirtilmesi gerekir. Veri giriş alanlarının tipinin belirtilmesi için kullanılacak parametre Type parametresidir. Input tag’ı ile kullanılacak veri giriş alanları aşağıdaki tabloda görülmektedir.
İsim
Veri Giriş Alanı
Tanım
Textbox
(Single Line Text Box)
Basit bir veri giriş alanıdır.Form içine 256 karakter girişine izin veren bir text kutusu açar.
Scrolling text box
(Multi Line Text Box)
Görüş ve öneriler mesajları gibi birçok satırdan oluşan karakter girişine izin verebilen text kutusudur.
Drop Down List Box
Aşağıya doğru açılan seçenekler(Çekme Kutusu) menüsü oluşturur.
Password
Şifre girişi için bir text kutusudur. Girilen karakterler *** şeklinde görünürler.
Radio Button
Kullanıcı tarafından işaretlenebilen seçenek düğmeleri ( yuvarlak kutular –Seçenek Kutuları) oluşturur. Sadece bir seçenek seçilebilir.
Checkbox
Kullanıcı tarafından işaretlenebilen seçenek kutuları (onay- kare kutular) oluşturur. Birden çok seçim yapılabilir.
Hidden
Gizli, formda görünmeyen fakat form verileri ile aktarılan bir alan oluşturur.
File
Dosya göndermek için oluşturulur.
Button
Bir buton oluşturur. Buton üzerine tıklandığında belirlenen yada tanımlanan bir fonksiyon çalışır. Düğmeler Formun birşeyler yapmasını sağlar.
Submit
Formun içeriğini gönderen bir buton oluşturur. Forma girilen tüm bilgileri Action parametresindeki yere gönderir.
Reset
Forma girilen bilgileri silmek için kullanılır.
Name parametresi ile, veri alanının isminin verilmesi gerekir. Verilen bu isim daha sonra form web tasarımcıya geri döndüğünde, ilgili veri alanlarının ismi olarak görünecektir. Kullanımı aşağıdaki gibidir:
<form action=mailto:kacan@bilmuh.ege.edu.tr method=”post” enctype=”text/plain” name=”Kişisel Bilgiler”>........ </form>
<input type=”text” name=”ad”> Textbox(Metin Kutuları) Form içerisine kullanıcıların metin girebilecekleri, tek satırlık basit bir metin alanıdır. Metin kutusu oluşturulurken girilmesi gereken parametreler aşağıda listelenmiştir:
type(tip), Metin kutusu oluşturuldupunu belirtir.
size(genişlik), Metin kutusu genişliğini(uzunluk) karakter olarak belirler.
value(değer), Metin kutusuna öndeğer vermek için kullanılır.
maxlength (maksimum uzunluk), Metin kutusuna kullanıcının belirttiği değer kadar karakter girişine izin verir. Kullanılmadığı durumda karakter girişi sınırsız olacaktır.
name(isim), Metin kutusuna bir isim verir.
Genel kullanımı:
<input type="text" name="isim" size="20" value="adiniz" maxlength="18">
<input type="password" name="textfield"> Scrolling text box , bir blok metnin(Çok satırlı metnin), kullanıcı tarafından girilmesine izin verir.
Scrolling text box oluşturulurken girilmesi gereken parametreler aşağıda listelenmiştir:
Cols:, Textarea' nın genişiliğini belirler.
Name, Textare'nın içeriğine verilen değişken ismi
Rows, Textarea' nın satır sayısını belirler.
Genel kullanımı:
<input type="textarea" name="oneri" cols="50" rows="4">
Drop Down List Box, aşağıya doğru açılan seçenekler menüsü oluşturur.
Select elemanı, seçilebilen bir listeden kullanıcının sadece birini seçmesine izin verir. Geçerli değerler OPTION elemanı ile belirlenir.
Option elemanının value paremetresi bize seçilen elemanın değerini gönderir. Örnekte "Izmir" seçildiğinde şehir değişkenine izmir değeri atanacaktır.
<select name="sehir" size="1">
<option value="izmir" selected>Izmir</option>
<option value="ankara">Ankara</option>
</select>
<select name="spor" size="3" >
<option value="Basket">Basketbol</option>
<option value="Voleybol">Voleybol</option>
CTRL tuşu ile birden çok seçim yapılabilir.
<select name="donaným" size="3" multiple >
<option value="HDD">Hard Disk</option>
<option value="Ram">Hafıza</option>
<option value="CPU">Islemci</option>
</select>
<select name="Yil" >
<option value="98">1998</option>
<option value="99">1999</option>
<option value="00" selected>2000</option>
</select>
Eğer 1999 seçeneğini seçersiniz ; Yil ="99" olacaktır.
Selected ifadesi listbox' un sayfa açıldığında görünen ilk seçeneğidir. Genelde web sitelerinde aşağıdaki kullanım yaygındır.
Ingilizce </p> Checked kelimesi size sayfa yuklendiğinde o kutucuğun işaretli olmasını sağlar.
Yaşınız
12-18
18-35
35-70
<input type="radio" name="yas" value="1218">
<input type="radio" name="yas" value="1835">
<input type="radio" name="yas" value="3570">
Eğer name parametreleri aynı olursa sadece bir radio button seçebilirsiniz.Yani yaş değişkeni için üç ayrı ihtimal vardır. Yaş 12-18 arası, veya 18-35 arası, bir diğer olasulık ise 35-70 arasıdır. Bunlardan sadece bir tanesinin seçilmesi mantıklı olanıdır. Checkbox, kullanıcı tarafından işaretlenebilen seçenek kutuları (Onay-kare kutular) oluşturur. Birden çok seçim yapılabilir.
İlgi alanlarınız:
Internet
<input type="checkbox" name="ilgi1" value="intenet"> Internet</p>
Muzik
<input type="checkbox" name="ilgi2" value="music"> Muzik</p>
Sinema
<input name="ilgi3" type="checkbox" id="ilgi3" value="sinema">
Sinema</p>
Kitap
<input name="ilgi4" type="checkbox" id="ilgi4" value="kitap" checked>Kitap </p> File, formda kullanıcını doldurması veya işaretlemesi gereken alanlarla birlikte kullanıcıya bize dosya gönderme imkanı da sağlayabiliriz. Örneğin:
<input type="file" name="cv">
Düğmeye tıkladığınızda işletim sistemi tarafından dosyayı sabitdiskinizde bulabilmeniz için bir pencere açılacaktır. Bu pencere aracılığı ile seçtiğiniz dosya, server'a "cv" adıyla gönderilecektir.
cv="ozgecmis.doc" Submit, formun içeriğindeki bilgiler form tagında bulunan action parametresinin işaret ettiği yere yine aynı tagın method parametresi doğrultusunda gönderilir.
Buton üstündeki yazıyı value değeri ile değiştirebilirsiniz.
<input type="submit" value="Submit">
<input type="submit" value="Gonder"> Reset, forma girilen bilgileri silmek için kullanılır.
<input type="reset" value="Reset">
<input type="reset" value="Sil">
Form elemanlarının kullanıldığı örnek uygulama aşağıda listelenmiştir:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-9">
<meta http-equiv="content-type" content="text/html;charset=windows-12554">
<meta http-equiv="content-language" content= "tr" >
<TITLE> Kendinizi Bize tanıtmak İstemezmisiniz?</TITLe>
</HEAD>
<style type="text/css">
Body {background:red;}
H1 {font:20pt Arial bold;}
P {background:yellow;}
A: {color: blue;}
A:link {color: red; text-decoration: none;}
A:visited {color: red; text-decoration: none}
A:hover {color: white; text-decoration: underline;}
</style>
<H1> Kendinizi Bize tanıtmak İstemezmisiniz?</H1>
<FORM NAME="İLETİSİMFORM" ACTION="FORM_ANALIZ.PL" METHOD ="POST">
<P>Adýnýz        :<INPUT TYPE="text" NAME="ADI" size="37" maxlenght="25"></p>
<P>Adresiniz     :<INPUT TYPE="text" NAME="ADRES" size="37" ></P>
<P>Posta Kodu:<INPUT TYPE="text" NAME="KOD" size="37" maxlenght="5"></P>
<P>E - mail       :<INPUT TYPE="text" NAME="mail" size="37" maxlenght="5"></P>
<P>EĞİTİM DURUMUNUZ</P>
<P><INPUT TYPE ="checkbox" NAME="İLKOKUL" VALUE="ON" >İLK
<P><INPUT TYPE ="checkbox" NAME="ORTAOKUL" VALUE="ON" >ORTA
<P><INPUT TYPE ="checkbox" NAME="LİSE" VALUE="ON" >LİSE
<P><INPUT TYPE ="checkbox" NAME="YUKSEKOKUL" VALUE="ON" >YUKSEKOKUL
<h2> bize iletmek istediğiniz bir mesaj varmı?</h2>
<P>MERAK ALANI :<SELECT NAME="MERAK " SIZE="1">
<P><OPTION SELECTED VALUE="BİR ALAN SEÇİNİZ"> BÝR ALAN </OPTION>
<P><OPTION VALUE="SIIR"> SIIR </OPTION>
<p><OPTION VALUE="MACERA"> MACERA </OPTION>
<P><OPTION VALUE="POLİSİYE"> POLİSİYE </OPTION>
<P><OPTION VALUE="AKSİYON"> AKSİYON </OPTION></p>
<P><textarea rows="5" name="mesaj" cols="33"> mesajýnýzý buraya yazabilirisiniz </textarea>
<p><input type="submit" value="gonder" name="gonder" >
<input type="reset" value="sil" name="sil"></p>
</form>
</body>
</html>
Html dosyasının çalıştırılması sonrası Web Tarayıcısındaki görüntüsü aşağıdaki gibi olacaktır.
<embed src=#> #=URL
Web sayfalarına avi, mpg, mpeg uzantılı animasyon, video cilp, wav, mp3, midi, au uzantılı ses ve resim eklenerek, daha görsel web sayfaları oluşturulabilir. Arkaplanda Müzik
<bgsound src=#> #=URL (wav dosyası adresi)
<bgsound loop=#> #=döngü sayısı <bgsound src="sound.wav" loop=3> Video Clip İlave Etmek
<img src="images/url.gif" dynsrc="url.avi">
<img src="images/SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI">
başla <img start=#> #=fileopen, mouseover #=fileopen seçeneği varsayılandır. Ayrıca fileopen ve mouseover seçeneklerinin her ikiside belirtililebilir. <img start=fileopen,mouseover> <img src="images/SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover>
kontroller <img controls>
<img src="images/SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls> döngü <img loop=#>
<loop=infinite> infinite seçeneğiyle devamlı çalma özelliği verilir. <img src="images/SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3>
