Forum Ti - Tek İleti Göster - Adım adım HTML kodlari arsivi html sitenizi kurun

~~staticiation~~ · 24.09.2007

İÇERİĞE UYGUN TASARIM
• İÇERİK çok sık güncellenecekse buna uygun tasarım yapın. Yeni bir alt bölümü, resmi, metni, ' link'i ekleyip çıkarması son derece kolay olsun. Ön sayfanın tek bir görüntüden (imagemap) ibaret olduğu bir tasarım çok kullanışsızdır böyle bir durumda. Benzer biçimde statik bir atmosfer yaratan derin gölgeler atılmış düğmeler ya da resimler kullanmak da böyle bir içerikle bağdaşmaz. Yoğun olarak metin kullanmak gerekebilir, bu durumda metin renkleriyle oynayın, sayfayı sütunlara ayırın.

• Ön sayfada eğer tek bir nesne resmi, figür ya da portre kullanıyorsanız bunu büyük kullanın. Büyük kullanılmış bir resim her zaman çarpıcıdır.

• Fontlarla deneme yapın, içeriğe en uygun düşecek fontu bulmaya çalışın. Ve gerekmedikçe çok farklı fontlar kullanmayın, çoğu durumda tek bir font ailesi yeterlidir. Gerek grafiklerle gerekse HTML uygulamasını kullanarak birbirleri ile ilişkilerini gözden kaçırmadan yazı büyüklükleriyle oynayın. Canlılık sağlamak ve okunurluğu arttırmak için bold, italik yazı kullanın.

• Aşağıya doğru çok fazla sarkan sayfalardan kaçının. Çok uzun sayfalar hem yüklenme zamanı hem de okunulabilirlik açısından kötü bir uygulamadır. Bunun yerine içeriği fazla sayıda alt sayfalara dağıtın. Böylelikle kullanıcı görmek istemediği sayfa için beklemek zorunda kalmayacaktır.

• Kullanıcıların büyük bölümü 14 inch monitörde 256 renk görebilmektedir. Çalıştığınız bilgisayar ne olursa olsun kullanıcının göreceği koşullarda test edin sayfalarınızı. Farklı işletim sistemlerinde resimler farklı görünmektedir. Bazı durumlarda , özellikle de hareketli GIF görüntülerde, büyük kayıplar görülür. Eğer Macintosh'ta çalışıyorsanız son aşamada grafiklerinizin parlaklığını biraz arttırın. Ayni grafik PC'de, Mac'de olduğundan daha koyu görünmektedir.

• Sayfalarınızı ayrı ayrı tarayıcılarla test edin. Bu hem kullanılan renk paletleri hem de desteklediği HTML özellikleri açısından önemlidir. En yaygın iki tarayıcının da desteklediği özellikleri kullanmaya çalışın.

• Sitenizi ortalama kullanıcıyla test edin. Aranılan bir bilgiye ne kadar zamanda ulaşıldığı önemli bir sorundur. Sonuca göre sitenizin hiyerarşisinde değişikliklere gidin. Aranılan bilgi sezgisel olarak ulaşılabilir olsun. En alt bölümlerden bile diğer bir bölüme ulaşmanın kolay ve hızlı olmasına dikkat edin. PC Magazine Online uzunca bir deneme süresinden ve kullanıcı testlerinden sonra hizmete açılmıştır.

JPG Mİ GIF Mİ?
• DAHA sonra ayrıntılı değineceğiz ama, işte size bir resmi GIF formatında mı yoksa JPG formatında mı kaydedeciğiniz konusunda basit bir çözüm: Resmi hem GIF hem de JPG olarak ayrı ayrı kaydedin. Sonra büyüklüklerine bakın, daha küçük hangisi ise onu kullanın. Bu her zaman olmasa da çoğu zaman hangi formatın kullanılması gerektiği konusunda doğru sonuç verir. Resmi grafik programda değil tarayıcıya yükleyerek görüntü kalitesine bakın. Photoshop ile Internet Explorer ya da Netscape
Navigator'da resimler farklı görünmektedir.

• Siyah ve beyazın Web'de önemli bir avantajı vardır: Tüm işletim sistemlerinde ve bilgisayarlarda siyah ve beyaz bizim istediğimiz biçimdedir. Yani renkte sistem farklılığı ve ayarlardan kaynaklanan kaymalar yoktur, siyah siyahtır beyaz da beyaz. Bu iki rengi sonra nasıl görüneceği endişesine kapılmadan sık sık kullanabilirsiniz. Ayrıca zemin rengi olarak kullanmak etkileyici sonuçlar verebilir.

• Son olarak aslolan içeriktir! Tam bir kuru bilgi yığınına dönüşen Internet'te sitenizi bir konu üzerinde odaklayın ve sık sık güncelleyin. CNN'in başarısı yalnızca güncelleme için 160 kişinin çalışmasında olsa gerek.

KİMLİK SAYFASI
Pek çok sitede görmüşsünüzdür: Gezinti çubuğunun yer aldığı indeks sayfasından önce, kimliğin vurgulandığı bir ana sayfa vardır (' splash page' ). Buraya tıklayarak ya da doğrudan indeks sayfasına geçersiniz (' navigation page' ). Bu iki açıdan önemlidir: Birincisi kimliğe, prestije yönelik bir vurgu yapabilirsiniz; ikincisi de çokça kullanılacak indeks sayfasının yükünü azaltabilirsiniz. Ama şu da açık ki, çok fazla hit alan bir site için uygun bir çözüm değildir. Bu uygulama ile indeks sayfasında daha rahat davranma şansınız olur. Hem gezinti çubuğunun hem logonun hem de güncel bilgilerin yer alacağı bir sayfa yerine, yalnızca güncel uygulamalara yönelik bir sayfa tasarlayabilirsiniz. Diğer yandan verdiğimiz iki örnekte de siyah zeminin kullanılmış olması dikkatinizi çekmiştir. Daha önce belirttiğimiz gibi siyah ve beyazın doğru kullanımı gerçekten etkileyici sonuçlar vermektedir.
WEB SAYFALARINDA FORM KULLANIMI
FORMLAR, Web sayfası tasarlayan kişi veya şirketlerle Internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. HTML 2.0 standartlarının konmasıyla tanıştığımız formlar bir çok sitede kullanıcıların da bilgi göndermesine olanak tanıyarak etkileşimli bir ortam oluşturmaktadır.

Formlar iki yönlü olarak çalışır; Web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve Web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.

FORM NASIL DEĞERLENDİRİLECEK?

WEB üzerinden herhangi bir formu göndermek için sunucunuzun tipine göre bir ek programa ihtiyaç duyacaksınız. Peki bu programı nereden bulacaksınız? İşte pc magazine Türkiye size daha önce hiç bir gazetenin sunmadığı bir fırsat sunuyor ve " beleş" bir form değerlendirici bulabileceğiniz adresi size veriyor. nt-tools.com adresinden indirebileceğiniz Mail Form isimli programı web sitenize yerleştirerek kendi formlarınızı başkalarının göndermesini sağlayabilirsiniz.

Bir form oluşturmak için <FORM></FORM> tag"ları arasına istenilen kontroller INPUT tag"ı sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği FORM tag"ının içinde gösterilir. FORM ve INPUT tag"larının kullanımını inceledikten sonra örnek olarak verdiğimiz kodlara bakarak bu kodların nasıl bir görüntü oluşturduğunu görebilirsiniz.

FORM TAG'I
Genel kullanım: <FORM ACTION=url METHOD=get-post TARGET=pencere>

ACTION=url
Formun gönderildiğinde hangi program tarafından değerlendirileceğini belirtir.

METHOD=get-post
Bilgilerin sunucuya hangi yolla gönderileceğini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak derleyici programa yönlendirir.

TARGET=window
Netscape tarafından getirilen bu tag form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri FRAME konumuzu işlerken gösterdiğimiz " _blank" , " _top" gibi değerlerden biri olabilir.

INPUT TAG'I
Genel kullanım: <INPUT ALIGN=tip [CHECKED|] MAXLENGTH=uzunluk
NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=değer>

ALIGN=tip
TYPE değeri bir resim olarak atandığında bir sonraki satırın resme göre nasıl yerleştirileceğini belirtir. TOP, MIDDLE veya BOTTOM değerlerinden birini alabilir.

CHECKED
Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar.

MAXLENGTH=uzunluk
Metin kutusuna kullanıcının maksimum kaç karakter girebileceğini belirler.

NAME=isim
Kontrole bir isim verir

SIZE=boyut
Kontrolün boyutlarını karakter cinsinden belirlemenizi sağlar. TEXTAREA kontrolü kullanıldığında ' en,boy' gibi bir ifade kullanılarak kontrolün hem eni hem de yüksekliği belirtilebilir.

SRC=adres
Kontrol olarak resim seçildiğinde resmin bulunduğu adresi taşır.

TYPE=tip
Kontrolün cinsini belirler ve şu değerlerden biri olabilir:

CHECKBOX: Bir işaretleme kutusu görüntüler ve sadece doğru veya yanlış değerlerini alabilir.
HIDDEN: Web tarayıcısının penceresinde görünmez fakat içerdiği değer gönderilen form ile web sunucusuna ulaşır.
IMAGE Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar. Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag SRC ile birlikte kullanılır ve SRC komutu resmin bulunduğu URL'yi göstermelidir.
PASSWORD TEXT kontrolü ile aynı özellikleri taşır fakat kullanıcının girdiği karakterler bu kontrolde yıldız olarak görülür.
RADIO Kullanıcının bir çok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup içindeki RADIO kontolleri her zaman aynı ismi taşımalı kontrollerin değerleri VALUE değerine atanmalıdır.
RESET Tıklandığında form içeriğini temizler. Kullanıcının form'u tekrar doldurmasını sağlar.
SUBMIT Form içeriğini sunucuya yollar. VALUE değeri kullanılarak üzerindeki yazı değiştirilebilir.
TEXT Kullanıcıdan tek satırlık veri alınmasına olanak tanır. SIZE ve MAXLENGTH takıları, bu kontrolle birlikte kullanılabilir

İşte size bir örnek: resimde görmüş olduğunuz ve bizim
hazırladığımız formu kendiniz oluşturmak için...

<HTML><title>Web Okulu - Form Denemesi</title><body bgcolor=' #c0c0c0' >
<h2>Tüm Form Öğelerinin Kullanımı</h2>
<FORM ACTION=' http://internet/form' METHOD=POST>
<P>İsim<BR><INPUT NAME=' CONTROL1' TYPE=TEXT VALUE=' İsim Girecek' >
<P>Şifre<BR><INPUT TYPE=' PASSWORD' NAME=' CONTROL2' >
<P>Renk<BR><INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 0' CHECKED>Kırmızı
<INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 1' >Yeşil
<INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 2' >Mavi
<P>Görüşleriniz<BR><INPUT TYPE=' TEXTAREA' NAME=' CONTROL4' SIZE=' 20,5' MAXLENGTH=' 250' >
<P><INPUT NAME=' CONTROL5' TYPE=CHECKBOX CHECKED>Beni Email Listenizene Kaydedin
<P><INPUT TYPE=' SUBMIT' VALUE=' Gönder' ><INPUT TYPE=' RESET' VALUE=' Temizle' >
</FORM></body></HTML>

Resimlerinizin Haritasını Çıkartın
IMAGE map'ler kullanıcının belirli bir resmin değişik alanlarına tıkladığında farklı adreslere gidebilmesine olanak tanır. İki şekilde hazırlanabilecek Image Map'ler isteğe göre HTML sayfasına veya sunucu üzerindeki başka bir dosyaya yerleştirilebilir. Biz bu konumuzda HTML sayfalarına yerleştirilen Image Map'leri inceleyecek Paint Shop Pro yardımıyla bir resmin haritasının nasıl çıkarılacağını göstereceğiz.

<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS=' 7, 7, 119, 74' HREF="http://www.pcmagazine.com.tr">
<AREA SHAPE="CIRCLE" COORDS=' 178, 41, 35' href="http://www.idg.com.tr">
</MAP>

Öncelikle HTML sayfasında yukarıdaki gibi kodlar kullanır ve istediğimiz resimde hangi noktalara tıklandığında hangi adreslere bağlanılacağını belirtiriz. Daha sonra <IMG SRC=' map1.gif' USEMAP=' #map1' > gibi bir ifade kullanılarak haritasının çıkarılmasını istediğimiz resmi sayfaya yerleştirir ve bu resim için ' map1' isimli haritanın kullanılacağını belirtiriz.

MAP TAG'I <MAP NAME='deneme' > AREA takılarıyla tanımlanan haritaya başlangıç yapar ve bir isim verir.

AREA TAG'I
<AREA COORDS=koordinatlar SHAPE=tip HREF=url TARGET=pencere>

COORDS
Tanımlanan şekle göre değişik koordinatlar girebilmenizi sağlar

SHAPE=tip
Tip RECTANGLE, CIRCLE, POLYGON seçeneklerinden biri olabilir. RECTANGLE Bir kare tanımlar ve ' x1, y1, x2, y2' değerleri kullanılır. CIRCLE Bir çember tanımlar ve ' OrtaX, OrtaY, Yarıçap' değerleri kullanılır. POLYGON Bir poligon tanımlar. Birçok noktadan oluşabilir.

HREF
Şekle tıklandığında hangi adrese gidileceğini belirler.

24.09.2007	#3 (permalink)
~~staticiation~~ Katılma Tarihi: Şub 2006 Nereden: Bursa/es-es Yaş: 23 Mesajlar: 1,780	İÇERİĞE UYGUN TASARIM • İÇERİK çok sık güncellenecekse buna uygun tasarım yapın. Yeni bir alt bölümü, resmi, metni, ' link'i ekleyip çıkarması son derece kolay olsun. Ön sayfanın tek bir görüntüden (imagemap) ibaret olduğu bir tasarım çok kullanışsızdır böyle bir durumda. Benzer biçimde statik bir atmosfer yaratan derin gölgeler atılmış düğmeler ya da resimler kullanmak da böyle bir içerikle bağdaşmaz. Yoğun olarak metin kullanmak gerekebilir, bu durumda metin renkleriyle oynayın, sayfayı sütunlara ayırın. • Ön sayfada eğer tek bir nesne resmi, figür ya da portre kullanıyorsanız bunu büyük kullanın. Büyük kullanılmış bir resim her zaman çarpıcıdır. • Fontlarla deneme yapın, içeriğe en uygun düşecek fontu bulmaya çalışın. Ve gerekmedikçe çok farklı fontlar kullanmayın, çoğu durumda tek bir font ailesi yeterlidir. Gerek grafiklerle gerekse HTML uygulamasını kullanarak birbirleri ile ilişkilerini gözden kaçırmadan yazı büyüklükleriyle oynayın. Canlılık sağlamak ve okunurluğu arttırmak için bold, italik yazı kullanın. • Aşağıya doğru çok fazla sarkan sayfalardan kaçının. Çok uzun sayfalar hem yüklenme zamanı hem de okunulabilirlik açısından kötü bir uygulamadır. Bunun yerine içeriği fazla sayıda alt sayfalara dağıtın. Böylelikle kullanıcı görmek istemediği sayfa için beklemek zorunda kalmayacaktır. • Kullanıcıların büyük bölümü 14 inch monitörde 256 renk görebilmektedir. Çalıştığınız bilgisayar ne olursa olsun kullanıcının göreceği koşullarda test edin sayfalarınızı. Farklı işletim sistemlerinde resimler farklı görünmektedir. Bazı durumlarda , özellikle de hareketli GIF görüntülerde, büyük kayıplar görülür. Eğer Macintosh'ta çalışıyorsanız son aşamada grafiklerinizin parlaklığını biraz arttırın. Ayni grafik PC'de, Mac'de olduğundan daha koyu görünmektedir. • Sayfalarınızı ayrı ayrı tarayıcılarla test edin. Bu hem kullanılan renk paletleri hem de desteklediği HTML özellikleri açısından önemlidir. En yaygın iki tarayıcının da desteklediği özellikleri kullanmaya çalışın. • Sitenizi ortalama kullanıcıyla test edin. Aranılan bir bilgiye ne kadar zamanda ulaşıldığı önemli bir sorundur. Sonuca göre sitenizin hiyerarşisinde değişikliklere gidin. Aranılan bilgi sezgisel olarak ulaşılabilir olsun. En alt bölümlerden bile diğer bir bölüme ulaşmanın kolay ve hızlı olmasına dikkat edin. PC Magazine Online uzunca bir deneme süresinden ve kullanıcı testlerinden sonra hizmete açılmıştır. JPG Mİ GIF Mİ? • DAHA sonra ayrıntılı değineceğiz ama, işte size bir resmi GIF formatında mı yoksa JPG formatında mı kaydedeciğiniz konusunda basit bir çözüm: Resmi hem GIF hem de JPG olarak ayrı ayrı kaydedin. Sonra büyüklüklerine bakın, daha küçük hangisi ise onu kullanın. Bu her zaman olmasa da çoğu zaman hangi formatın kullanılması gerektiği konusunda doğru sonuç verir. Resmi grafik programda değil tarayıcıya yükleyerek görüntü kalitesine bakın. Photoshop ile Internet Explorer ya da Netscape Navigator'da resimler farklı görünmektedir. • Siyah ve beyazın Web'de önemli bir avantajı vardır: Tüm işletim sistemlerinde ve bilgisayarlarda siyah ve beyaz bizim istediğimiz biçimdedir. Yani renkte sistem farklılığı ve ayarlardan kaynaklanan kaymalar yoktur, siyah siyahtır beyaz da beyaz. Bu iki rengi sonra nasıl görüneceği endişesine kapılmadan sık sık kullanabilirsiniz. Ayrıca zemin rengi olarak kullanmak etkileyici sonuçlar verebilir. • Son olarak aslolan içeriktir! Tam bir kuru bilgi yığınına dönüşen Internet'te sitenizi bir konu üzerinde odaklayın ve sık sık güncelleyin. CNN'in başarısı yalnızca güncelleme için 160 kişinin çalışmasında olsa gerek. KİMLİK SAYFASI Pek çok sitede görmüşsünüzdür: Gezinti çubuğunun yer aldığı indeks sayfasından önce, kimliğin vurgulandığı bir ana sayfa vardır (' splash page' ). Buraya tıklayarak ya da doğrudan indeks sayfasına geçersiniz (' navigation page' ). Bu iki açıdan önemlidir: Birincisi kimliğe, prestije yönelik bir vurgu yapabilirsiniz; ikincisi de çokça kullanılacak indeks sayfasının yükünü azaltabilirsiniz. Ama şu da açık ki, çok fazla hit alan bir site için uygun bir çözüm değildir. Bu uygulama ile indeks sayfasında daha rahat davranma şansınız olur. Hem gezinti çubuğunun hem logonun hem de güncel bilgilerin yer alacağı bir sayfa yerine, yalnızca güncel uygulamalara yönelik bir sayfa tasarlayabilirsiniz. Diğer yandan verdiğimiz iki örnekte de siyah zeminin kullanılmış olması dikkatinizi çekmiştir. Daha önce belirttiğimiz gibi siyah ve beyazın doğru kullanımı gerçekten etkileyici sonuçlar vermektedir. WEB SAYFALARINDA FORM KULLANIMI FORMLAR, Web sayfası tasarlayan kişi veya şirketlerle Internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. HTML 2.0 standartlarının konmasıyla tanıştığımız formlar bir çok sitede kullanıcıların da bilgi göndermesine olanak tanıyarak etkileşimli bir ortam oluşturmaktadır. Formlar iki yönlü olarak çalışır; Web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve Web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar. FORM NASIL DEĞERLENDİRİLECEK? WEB üzerinden herhangi bir formu göndermek için sunucunuzun tipine göre bir ek programa ihtiyaç duyacaksınız. Peki bu programı nereden bulacaksınız? İşte pc magazine Türkiye size daha önce hiç bir gazetenin sunmadığı bir fırsat sunuyor ve " beleş" bir form değerlendirici bulabileceğiniz adresi size veriyor. nt-tools.com adresinden indirebileceğiniz Mail Form isimli programı web sitenize yerleştirerek kendi formlarınızı başkalarının göndermesini sağlayabilirsiniz. Bir form oluşturmak için <FORM></FORM> tag"ları arasına istenilen kontroller INPUT tag"ı sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği FORM tag"ının içinde gösterilir. FORM ve INPUT tag"larının kullanımını inceledikten sonra örnek olarak verdiğimiz kodlara bakarak bu kodların nasıl bir görüntü oluşturduğunu görebilirsiniz. FORM TAG'I Genel kullanım: <FORM ACTION=url METHOD=get-post TARGET=pencere> ACTION=url Formun gönderildiğinde hangi program tarafından değerlendirileceğini belirtir. METHOD=get-post Bilgilerin sunucuya hangi yolla gönderileceğini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak derleyici programa yönlendirir. TARGET=window Netscape tarafından getirilen bu tag form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri FRAME konumuzu işlerken gösterdiğimiz " _blank" , " _top" gibi değerlerden biri olabilir. INPUT TAG'I Genel kullanım: <INPUT ALIGN=tip [CHECKED\|] MAXLENGTH=uzunluk NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=değer> ALIGN=tip TYPE değeri bir resim olarak atandığında bir sonraki satırın resme göre nasıl yerleştirileceğini belirtir. TOP, MIDDLE veya BOTTOM değerlerinden birini alabilir. CHECKED Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar. MAXLENGTH=uzunluk Metin kutusuna kullanıcının maksimum kaç karakter girebileceğini belirler. NAME=isim Kontrole bir isim verir SIZE=boyut Kontrolün boyutlarını karakter cinsinden belirlemenizi sağlar. TEXTAREA kontrolü kullanıldığında ' en,boy' gibi bir ifade kullanılarak kontrolün hem eni hem de yüksekliği belirtilebilir. SRC=adres Kontrol olarak resim seçildiğinde resmin bulunduğu adresi taşır. TYPE=tip Kontrolün cinsini belirler ve şu değerlerden biri olabilir: CHECKBOX: Bir işaretleme kutusu görüntüler ve sadece doğru veya yanlış değerlerini alabilir. HIDDEN: Web tarayıcısının penceresinde görünmez fakat içerdiği değer gönderilen form ile web sunucusuna ulaşır. IMAGE Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar. Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag SRC ile birlikte kullanılır ve SRC komutu resmin bulunduğu URL'yi göstermelidir. PASSWORD TEXT kontrolü ile aynı özellikleri taşır fakat kullanıcının girdiği karakterler bu kontrolde yıldız olarak görülür. RADIO Kullanıcının bir çok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup içindeki RADIO kontolleri her zaman aynı ismi taşımalı kontrollerin değerleri VALUE değerine atanmalıdır. RESET Tıklandığında form içeriğini temizler. Kullanıcının form'u tekrar doldurmasını sağlar. SUBMIT Form içeriğini sunucuya yollar. VALUE değeri kullanılarak üzerindeki yazı değiştirilebilir. TEXT Kullanıcıdan tek satırlık veri alınmasına olanak tanır. SIZE ve MAXLENGTH takıları, bu kontrolle birlikte kullanılabilir İşte size bir örnek: resimde görmüş olduğunuz ve bizim hazırladığımız formu kendiniz oluşturmak için... <HTML><title>Web Okulu - Form Denemesi</title><body bgcolor=' #c0c0c0' > <h2>Tüm Form Öğelerinin Kullanımı</h2> <FORM ACTION=' http://internet/form' METHOD=POST> <P>İsim<BR><INPUT NAME=' CONTROL1' TYPE=TEXT VALUE=' İsim Girecek' > <P>Şifre<BR><INPUT TYPE=' PASSWORD' NAME=' CONTROL2' > <P>Renk<BR><INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 0' CHECKED>Kırmızı <INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 1' >Yeşil <INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 2' >Mavi <P>Görüşleriniz<BR><INPUT TYPE=' TEXTAREA' NAME=' CONTROL4' SIZE=' 20,5' MAXLENGTH=' 250' > <P><INPUT NAME=' CONTROL5' TYPE=CHECKBOX CHECKED>Beni Email Listenizene Kaydedin <P><INPUT TYPE=' SUBMIT' VALUE=' Gönder' ><INPUT TYPE=' RESET' VALUE=' Temizle' > </FORM></body></HTML> Resimlerinizin Haritasını Çıkartın IMAGE map'ler kullanıcının belirli bir resmin değişik alanlarına tıkladığında farklı adreslere gidebilmesine olanak tanır. İki şekilde hazırlanabilecek Image Map'ler isteğe göre HTML sayfasına veya sunucu üzerindeki başka bir dosyaya yerleştirilebilir. Biz bu konumuzda HTML sayfalarına yerleştirilen Image Map'leri inceleyecek Paint Shop Pro yardımıyla bir resmin haritasının nasıl çıkarılacağını göstereceğiz. <MAP NAME="map1"><!-- Örnek resmin HTML kodları --> <AREA SHAPE="RECT" COORDS=' 7, 7, 119, 74' HREF="http://www.pcmagazine.com.tr"> <AREA SHAPE="CIRCLE" COORDS=' 178, 41, 35' href="http://www.idg.com.tr"> </MAP> Öncelikle HTML sayfasında yukarıdaki gibi kodlar kullanır ve istediğimiz resimde hangi noktalara tıklandığında hangi adreslere bağlanılacağını belirtiriz. Daha sonra <IMG SRC=' map1.gif' USEMAP=' #map1' > gibi bir ifade kullanılarak haritasının çıkarılmasını istediğimiz resmi sayfaya yerleştirir ve bu resim için ' map1' isimli haritanın kullanılacağını belirtiriz. MAP TAG'I <MAP NAME='deneme' > AREA takılarıyla tanımlanan haritaya başlangıç yapar ve bir isim verir. AREA TAG'I <AREA COORDS=koordinatlar SHAPE=tip HREF=url TARGET=pencere> COORDS Tanımlanan şekle göre değişik koordinatlar girebilmenizi sağlar SHAPE=tip Tip RECTANGLE, CIRCLE, POLYGON seçeneklerinden biri olabilir. RECTANGLE Bir kare tanımlar ve ' x1, y1, x2, y2' değerleri kullanılır. CIRCLE Bir çember tanımlar ve ' OrtaX, OrtaY, Yarıçap' değerleri kullanılır. POLYGON Bir poligon tanımlar. Birçok noktadan oluşabilir. HREF Şekle tıklandığında hangi adrese gidileceğini belirler.