Seodanismani.net

“Adtech ile Reklam 2.0 Dönemi Başlıyor ve Trkycmhrytllbtpydrklcktr r10.net Seo Yarışması” Intel ve Ericsson, Intel’in Anti-Hırsızlık çözümüne ilişkin işbirliği anlaşması imzaladı. Çalınan bilgisayarlar bir mesaj ile etkisiz hale getirilecek
Ericsson ve Intel arasındaki bu işbirliği ile yaratılan çözümde, hırsızlık yönetimi servisi SMS ile dizüstü bilgisayarın içindeki mobil genişbant modülüne bir mesaj gönderiyor. Mesaj güvenli bir şekilde Intel’in Anti-Theft özelliğine ulaşarak bilgisayarı tamamen kilitlemek ya da kullanılmaz hale getirmek gibi uygun bir işlemi gerçekleştiriyor. Bilgisayar sonrasında sahibine ulaşması durumunda veriyi tekrar kullanılabilir hale getiren ikinci bir mesaj da gönderilebiliyor.
Yazinin Devami…

“Adtech ile Reklam 2.0 Dönemi Başlıyor ve Trkycmhrytllbtpydrklcktr r10.net Seo Yarışması” 14 başlık altında 21 kamu hizmetinin eloktronik ortamda sunulduğu sitelere link veren e-devlet kapısı Başbakan Recep Tayyip Erdoğan tarafından açıldı.
Başbakan Recep Tayyip Erdoğan, ”Bilgi toplumuna dönüşümün yolunu açan e-Devlet Kapısı Projesinin öncelikli hedefi, bürokrasinin asgariye indirilmesi, devletin vatandaşlarımıza ve iş dünyasına hızlı ve kaliteli hizmet sunmasıdır” dedi.

Yazinin Devami…

“Adtech ile Reklam 2.0 Dönemi Başlıyor ve Trkycmhrytllbtpydrklcktr r10.net Seo Yarışması” Firefox 2 ve 3 için beklenen yeni güncellemeler nihayet yayınlandı. Mozilla, hem Firefox 2, hem de Firefox 3 için yeni güncellemeler yayınladı.Firefox 2′yi 2.0.0.19  sürümüne yükselten Firefox 2 güncellemesi, eski dostumuz için takvimde yer alan son güncelleme  olarak duyuruldu. Ayrıca bu güncelleme ile birlikte tarayıcının phising koruması da kaldırıldı. 2.0.0.19 güncellemesinin aslında tek bir anlamı var: Mozilla artık Firefox 2′ye destek vermeyeceğini gösteriyor ve tüm kullanıcıları Firefox 3′e geçmeye davet ediliyor. Başka bir deyişle 2.0.0.19 güncellemesi aslında Firefox 2 için yolun sonu  anlamına geliyor…

Yazinin Devami…

Formun mantıksal olarak sonuna, kullanıcının dolduğu bilgileri ve yaptığı tercihleri formu sunan Internet alanına göndermesini sağlayan bir Gönder, veya forma yazdığı bilgileri ve yaptığı tercihleri değiştirmek isteyenlerin tümüyle silebilmesi için bir Sil düğmesi konması gerekir. HTML 4 standartları ile Form’lara düğme (BUTTON) etiketi koymak mümkün oldu. Bundan önce formların, ziyaretçinin bilgisayarı tarafından Server’a gönderilmesi veya o ana kadar yazdıklarını tümüyle silmesi, INPUT etiketinin SUBMIT ve RESET yüklemleriyle kullanılması ile mümkündü.

Bunun için INPUT etiketi şöyle kullanılır:

<INPUT TYPE=SUBMIT NAME=Gonder VALUE=”Gönder”>

<INPUT TYPE=RESET NAME=Sil VALUE=”Sil”>

HTML 4 sayesinde tarayıcının otomatik düğme şekli yerine kendi rdüğme grafiklerimizi kullanabileceğimiz gibi sayfaya birden fazla ve değişik maksatlarla düğme koyabiliriz. Ancak her düğmenin ayrı ismi ve ayrı değeri olması gerekir. Bu kodu şöyle yazabiliriz:

<BUTTON TYPE=SUBMIT NAME=Gonder VALUE=”Gönder”><IMG src=”gonder.gif></BUTTON>

<BUTTON TYPE=RESET NAME=Sil VALUE=”Sil”><IMG src=”sil.gif></BUTTON>

Örnek

Formlarla ilgili bu temel bilgileri sıraladıktan sonra, basit bir form örneği yapalım. Herzaman olduğu gibi, önce yapacağımız şeyin (formun ) stratejisini belirleyelim. Bu bir kitabevinin kitap sipariş formu olacak. Köşesine logomuzu koyacağız; ziyaretçinin adını soyadını, e-posta adresini ve adresini isteyeceğiz. Formda, ziyaretçinin ne tür kitaplarla ilgilendiğini belirtmesi için bir çok seçenekli liste sunabiliriz. Sonra ziyaretçiden bazı kutuları ve seçenekleri tıklayarak, bize kendisi hakkında bilgi vermesini isteyeceğiz. En sonunda da bu formu göndermesini veya tümünü silmesini sağlayan iki düğme sunacağız. Formumuz bir Web alanının parçası olacağı için, ziyaretçinin geri dönmesini ve ilk sayfamıza gitmesini sağlayan iki yol gösterme düğmesi koyabiliriz.

Bir formda form unsurları ile unsurların yanında yer alan ve neye ilişkin olduklarını belirten metinleri hizalamak oldukça zordur. Kutuların altalta gelmesi için, aralıktan yararlanmak ise hemen hemen imkansız denilecek kadar zordur. Bu nedenle mimari ilkemiz, formun içine bir tablo yerleştirmek ve form unsurlarını tablonun hücrelerine koymak olacak. Örnek form için, bir logo grafiğine ihtiyacınız olabilir. Bu grafik, görsel olarak alanınızdaki bütün sayfalar arasında birlik sağlayabilir ve form sayfasının hangi alana ait olduğunu gösterebilir. Örnek bir sayfa için şu kodu kullanabilirsiniz:

<html>

<head>

<title>Sizinle nasıl temas kuralım</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>

</head>

<body bgcolor=”#FF8040″>

<div align=”center”><center>

<table border=”0″ width=”100%”>

<tr>

<td width=”13%”><img src=”Logo.gif” width=”92″ height=”125″ alt=”Logo.gif (15642 bytes)”></td>

<td width=”54%”><h1><font face=”Arial” color=”#804040″>Sizinle nasıl temas kuralım?</font></h1>

</td>

<td width=”33%”></td>

</tr>

<tr>

<td width=”13%”></td>

<td width=”54%”><form method=”POST” name=”temasform” action=”Post”>

<div align=”center”><center><table border=”0″ width=”103%” height=”448″>

<tr>

<td width=”42%” height=”23″><div align=”right”><p>Adınız</td>

<td width=”61%” height=”23″><input type=”text” name=”Adınız” size=”37″ tabindex=”1″

maxlength=”25″></td>

</tr>

<tr>

<td width=”42%” height=”23″><div align=”right”><p>Adresiniz</td>

<td width=”61%” height=”23″><input type=”text” name=”Adresiniz” size=”37″ tabindex=”2″></td>

</tr>

<tr>

<td width=”42%” height=”23″><div align=”right”><p>Posta Kodu</td>

<td width=”61%” height=”23″><input type=”text” name=”Kod” size=”37″ tabindex=”3″

maxlength=”5″></td>

</tr>

<tr>

<td width=”42%” height=”23″><div align=”right”><p>E Posta</td>

<td width=”61%” height=”23″><input type=”text” name=”eposta” size=”37″ tabindex=”4″></td>

</tr>

<tr>

<td width=”103%” height=”44″ colspan=”2″><font face=”Arial”><strong><big>Sizi tanıyabilir

mıyız?</big></strong></font></td>

</tr>

<tr>

<td width=”42%” height=”19″><div align=”right”><p><font face=”Arial”>Eğitim düzeyim:</font></td>

<td width=”61%” height=”19″><input type=”checkbox” name=”ilkokul” value=”ON” tabindex=”5″>Ilk<input

type=”checkbox” name=”Orta” value=”ON” tabindex=”6″>Orta<input type=”checkbox” name=”yuksek”

value=”ON” tabindex=”6″>Yüksek</td>

</tr>

<tr>

<td width=”42%” height=”31″><div align=”right”><p><font face=”Arial”>Merak Alanım</font></td>

<td width=”61%” height=”31″><select name=”Merak” size=”1″ tabindex=”7″ style=”font-family: sans-serif”>

<option selected value=”Bir alan seçiniz”>Bir alan seçiniz</option>

<option value=”Polisiye”>Polisiye</option>

<option value=”Siir”>Şiir</option>

<option value=”Tarih”>Tarih</option>

<option value=”Siyaset”>Siyaset</option>

</select></td>

</tr>

<tr>

<td width=”103%” height=”36″ colspan=”2″><div align=”left”><p><font face=”Arial”><strong>Bize

iletmek istediğiniz bir mesaj var mı?</strong></font></td>

</tr>

<tr>

<td width=”42%” height=”117″></td>

<td width=”61%” height=”117″><textarea rows=”5″ name=”mesaj” cols=”33″ tabindex=”9″>Mesajınınızı buraya yazınız</textarea></td>

</tr>

<tr>

<td width=”42%” height=”25″></td>

<td width=”61%” height=”25″><input type=”submit” value=”Gönder” name=”Gonder”

tabindex=”10″

style=”font-family: sans-serif; font-size: 14pt; background-color: rgb(128,128,0); color: rgb(255,255,255)”>

&nbsp; <input type=”reset” value=”Sil” name=”Sil” tabindex=”11″

style=”font-family: sans-serif; font-size: 14pt; background-color: rgb(128,128,0); color: rgb(255,255,255); text-align: center”></td>

</tr>

<tr>

<td width=”42%” height=”18″></td>

<td width=”61%” height=”18″><div align=”right”><p><a href=”#”>Geri dön</a>

&nbsp;&nbsp;&nbsp; <a href=”#”>İlk Sayfaya git</a></td>

</tr>

</table>

</center></div>

</form>

</td>

<td width=”33%”></td>

</tr>

</table>

</center></div>

</body>

</html>

Bu HTML dosyasının oluşturduğu form ise ekranda şöyle görünüyor:Burada, Form etiketine daha önce belirttiğimiz özelliklerini veren yüklemlerden farklı olarak, fodrma bir isim verdiğimiz dikkatinizi çekmiş olmalı. Ayrıca kullanıcıya kutudan kutuya, klavyede TAB (Sekme) tuşuna basarak ilerleme imkanı veren ve tarayıcının formda kutulara hangi sırayla gideceğini gösteren “tabindex=..” yüklemine dikkat ediniz. Bu yüklemi bütün form elemanları için kullanabilirsiniz. Formu içine koyduğumuz tabloya çerçeve çizgisi vermemekle, formun “form gibi” görünmesini sağladık. Tablonun hücrelerinin enini (width) mutlak sayı ile değil de yüzde kullanarak sınırladığımız için, formumuz ziyaretçinin ekranında sağda solda boşluk bırakmadan, büyüyüp, küçülebilecektir.

CGI

Forma ilgili bütün bu çaba, bir tek karşılık için, ziyaretçinin bize bilgi veya sipariş vermesi, başka bir deyişle ziyaretçinin formu doldurarak, “Gönder” düğmesinin tıklaması içindir. Fakat bu düğmenin tıklanması, bizim formdan beklediğimizin gerçekleşmesine yetmez. Ziyaretçinin tarayıcı programının Server’a ileteceği bilgi ile Server’da “bir şey yapılması” gerekir. Bunu yapacak olan da ziyaretçilerle Server arasındaki arabirim olan CGI (Common Gateway Interface) programlarıdır.

Microsoft’un NT işletim sisteminin, Ağ (Network) işletim sistemi olarak Unix sisteminin yerine ciddi bir aday olduğunu ilan ettiği iki üç yıl öncesine kadar, ağ dendiği zaman otomatik olarak akla Unix işletim sistemi gelirdi. Bu sistemin Internet uzantısını sağlayan programlar ise Unix ortamı için geliştirilmiş diller ve programlar kullanırlardı. “Perl” ve “tcl” bu dillerin en yaygınlarıdır. Bu diller o denli yayıldı ve klasik hale geldi ki, NT ortamı için Perl çeviriciler geliştirildi. Bir Web Server’ın DOS ortamında işletilmesi halinde, CGI programları sdandart DOS “batch programları” bile olabilir. Ancak NT sistemleri için kendi doğal dillerini ve programlarını kullanmak yerinde olur. Nitekim günümüzde Perl’ün yerini hızla Visual Basic ile yazılmış Active Server Page denen arabirimler alıyor. Ayrıca C ve C++ dilleri ile yazılmış arabirimler, örneğin formunuzu alıp, ona uygun arabirim işlemcisi yazan programlar edinebilirsiniz. Macintosh ortamında ise en uygun dil olarak, Applescript sayılabilir.

CGI arabierimi ve programları, bu kitapçığın kapsamı dışında kalıyor. Ama, Qeb tasarımcısı olarak neye ihtiyacınız bulunduğunu bilmeniz için, ziyaretçi “Gönder” tuşuna bastığı zaman, ziyaretçinin bilgisayarı ile sizin Web Server’ınız arasında olup biteni kısaca özetlemekte yarar var.

FORM etiketine koyduğunuz ACTION ve bu eylemin yöntemine ilişkin METHOD yüklemleri doğrultusunda, Web sayfalarınızın bulunduğu Servar’a, formun içerdiği bilgiler toplu halde gönderilir.

Server bu bilgileri, METHOD olarak GET veya POST yöntemlerinden hangisini seçtiğinize bakarak, bu bilgileri CGI programına aktarır. CGI programınız, türüne göre, bu bilgileri önce formdaki değişkenlere verdiğiniz isimlere ve değerlere göre ayırır ve bir liste yapar. Bu listedeki veriler, yine CGI programınızın yapmasını istediğiniz işlemde kullanılır. Çoğunlukla bu bilgilerin (1) bir veri tabanına işlenmesini, (2) ziyaretçiye gönderdiği bilgilerin alındığına ilişkin olarak ya tarayıcısına bir HTML sayfa göndererek, veya elektronik posta ile bir mesaj yollayarak bir karşılık verilmesini, ve (3) Web yöneticisine forma bir ziyaretçinin daha karşılık verdiğine ilişkin bir uyarı mesajı gönderilmesini isteriz. CGI programı bu üç işi birden yapar ve devreden çıkar. Oluşturulacak veritabanı daha sonra çeşitli programlar yardımıyla kullanılabilir.

<FORM>…</FORM> etiktenin arasını ya kullanıcının dolduracağı boşluklar, ya da tercih yapmasına imkan veren listeler ve düğmelerle doldurmanız gerek. Bunu sağlayan başlıca kontrol elemanlarınız INPUT , SELECT ve TEXTAREA etiketidir. Şimdi bunları sırasıyla inceleyelim:

INPUT

INPUT etiketi ile ziyaretçiye, forma klavyesinden veya fare ile işaretlemek suretiyle bilgi girmesi imkanı veririz. Bu etiketi kullanmanın genel biçimi şöyledir:

<INPUT TYPE=”…” NAME=”…” VALUE=”…” SIZE=”…” MAXLENGTH=”..” SCR=”…” CHECKED”….”>

Şimdi bu etiketin kullanım ilkelerini kullanıcının yapabileceği işlere göre ayırarak inceleyelim

Kullanıcının klavyesi ile bir metin girmesi için:

TYPE=TEXT NAME=”…” VALUE=”…” SIZE=”…” MAXLENGTH=”…”

“Size” hanesi bu kutunun kullanıcının ekranında gösterileceği genişliği karakter olarak belirler; “Maxlenghth” hanesi ise kullanıcının girebileceği metnin uzunluğunu karakter olarak belirler. Bu haneyi koymaz ve bir değer vermezseniz, tarayıcı azami metin uzunluğunu 21 karakter olarak varsayar. Bu kutu ekranda gösterildiğinde içinde bir yazı olsun istiyorsanız, bunu “Value=…” hanesine tırnak içinde yazın. Daha sonra CGI programı düzeyinde bu bilgiyi bir veri bankasına işlemek, bir elektronik mektup içinde veya herhangi bir başka tarzda kullanmak istiyorsanız, bu alana “Name=…” hanesinin içine yazmak suretiyle isim vermeniz gerekir.

·         Kullanıcının parola girmesi için:

TYPE=PASSWORD NAME=”…” VALUE=”…” SIZE=”…” MAXLENGTH=”…”

Metin girme kutusu ile aynı özelliklere sahiptir; fakat bu kutunun içine kullanıcının gireceği bilgiler ekranda gösterilmez yerine yıldız simgesi gösterilir.

·         Kullanıcının bir kutuya işaret koyması:

TYPE=CHECKBOX NAME=”…” VALUE=”…” [CHECKED]

Ziyaretçi, bu komutla oluşturacağınız işaret kutusunun içine fare ile tıklamak veya klavyede aralık tuşuna basmak suretiyle bir çarpı işareti girer veya otomatik olarak konan işareti kaldırabilir. Bu kutuda işaret varsa, tarayıcı “Value=” hanesine yazacağınız bilgiler ve kutunun adını bir çift olarak Server’a gönderir. Kutuda işaret yoksa kutunun adı ve değeri Server’a gönderilmez. Bu kutuyu oluştururken mutlaka Name hanesine tırnak içinde bir isim girmeniz gerekir; yoksa gelecek bilgi hiç bir işinize yaramayabilir. Kutunun otomatik ohardak işaretlenmesini istiyorsanız, CHECKED kelimesine yer verin; istemiyorsanız, bu kelimeyi yazmayın. Bu suretle oluşturulacak kutunun ekranda otomatik şekilde bir yaftası olmayacaktır. Bu nedenle bu kutuyu oluşturmadan önce veya sonra bu kutunun ne işe yaradığını yazın

Kullanıcının yuvarlak bir boşluğun içine siyah bir nokta koyması (Radyo düğmesi):

TYPE=RADIO NAME=”…” VALUE=”…” [CHECKED]

İşaretlenecek yerin kare kutu değil de bir daire olması dışında bu unsurun bütün özellikleri ve ilkeleri CHECKBOX gibidir.INPUT etiketi ile forma grafik veya gizli metin koymak da mümkündür. HTML 4 ile gelen ekranda kullanıcının fare simgesi ile tıklayabileceği düğme oluşturan BUTTON etiketi yerine, örneğin Gir ve Sil gibi kullanıcının bilgileri Server’a göndermesini veya doldurduğu bilgileri tümüyle silmesini sağlayan işlemler de bu etiketle yapılabilir.

SELECT

Bu etiketi kullanarak, formda bir kutu ve yanında bir aşağı ok oluşturabilirsiniz; kullanıcı aşağı oku tıklamak suretiyle açacağı listeden bir unsuru seçerek, kutunun içine yazılmasını sağlayabilir. Arzu ederseniz, bu unsurlardan birisi otomatik olarak seçilmiş olarak da gösterilebilir. Bu etiketin kullanım şekli şöyledir:

<SELECT NAME=”….” SIZE=”…” [MULTIPLE]>…..</SELECT>

Size hanesine 1, 2, veya 3 vs.. yazarak, ekrandaki kutunun kaç seçenek göstereceğini belirleyebilirsiniz. Bu hane konulmazsa, otomatik 1 seçenek varsayılır. Bu kutuda gösterilecek seçenekler, <SELECT….>..</SELECT> etiketlerinin arasına <OPTION> etiketiyle yazılır. (<OPTION> etiketi kapatılmaz.) Herhangi bir seçeneğin otomatik olarak seçilmesi için önündeki <OPTION> etiketinin içine SELECTED kelimesi konulur. Örnek:

<select name=”Temas” size=”1″><option selected>Lütfen bir tercih yapınız<option value=”Telefon”>Telefon<option value=”EPosta”>E Posta<option value=”Gel”>Şahsi Görüşme</select></p>

TEXTAREA

Metin kutusu, ziyaretçiye, Web Server’a uzun metin gönderme imkanı sağlar. bu etiketin kullanım şekli şöyledir:

<TEXTAREA NAME=”…” rows=.. cols=..>Kutunun içine otomatik yazılması istenen metin buraya yazılır </TEXTAREA>

“Name=….” yüklemi ile metin kutusuna Server’a gelecek metnin işlenmesi ve kullanılması için gerekli ad verilebilir. “rows=” ve “cols=” yüklemlerinin karşısına verilecek rakamlarla bu kutunun formda kaç satır yüksekliğinde ve kaç harf genişliğinde bir yer alacağı belirtilir. Bu iki ölçünün kutuya girilecek metnin uzunluğu ile ilgisi yoktur.

Web alanınızda bir form  oluşturmak için kullanacağınız <FORM> etiketi, kullanıcının tarayıcı programına bu formdaki bilgileri ne yapması gerektiğine ilişkin talimatı da içerir. Bunun için FORM etiketinin içinde, tarayıcıya ACTION yüklemiyle bu formun doldurularak gönderilmesi halinde içindeki bilgilerin nerede, hangi adreste, hangi programa teslim edileceğini söylersiniz. HTTP protokolü Web Server ile ziyaretçinin bilgisayarı arasında iki tür iletişime imkan verdiği için bu bölümde tarayıcıya hangi yöntemi seçmesi gerektiğini de METHOD yüklemiyle bildirmeniz gerekir.

Dolayısıyla Form etiketinin yazılış kuralı şöyle olacaktır:

<FORM ACTION=”url” METHOD=POST veya GET>

Burada url harfleri yerine bu form ile gelecek bilgiyi işleyecek programın adresi bulunacaktır. Örneğin: “/cgi-bin/siparis.cgi”

CGI programları için aşağıda daha geniş bilgi bulacaksınız.

METHOD hanesine ya GET ya da POST yazabilirsiniz. Get ve Post, ziyaretçinin bilgisayarı ile Web Server arasında kurulacak HTTP prorotokolüne dayanan bağlantı, ziyaretçinin Server’a bu iki yöntemden birisiyle bilgi göndermesini sağlar. Aralarındaki fark, Get yönteminde bilgiler Web Server’da “querry_string” denen değişkenin içine yazılırken, Post yönteminde bu bilgiler “stdin” değişkenine yerleştirilir. Server’larda ikinci değişken birincisinden çok yer tutar; yani Post yöntemiyle daha çok bilgi gönderilebilir. Web alanı işletmecileri giderek daha yüksek oranda Post yöntemini tercih ediyorlar. Gerçek bir form yaptığınız ve Web alanınıza koyacağınız zaman, Web alanınıza ev sahipliği yapan firmanın teknik yetkililerine, formlarınızda ACTION ve METHOD yüklemlerinin karşısına ne yazacağınızı sormanız gerekir.

Form etiketinin önüne form bilgisi ziyaretçinin bilgisayarından sizin Web Server’ınıza nasıl bir şifreleme yöntemi ile gelsin istiyorsanız, onu da yazabilirsiniz. Fakat bu bilgi Web Server programlarına göre değiştiği için burada böyle bir imkanın varlığını belirtmekle yetineceğiz. “ENCTYPE=”…..” şeklinde yazılan bu bölümü doldurmazsanız, varsayılan şifreleme yöntemi, HTTP’nin standart kodlama yöntemi olan MIME olacaktır.

Internet, bilimadamlarının birbirlerine araştırmalarıyla ilgili rapor vermelerini sağlayan bir Ağlar-arası Ağ olarak başlamış ise de, bugün hemen herkesin, yararlı olsun, olmasın, her türlü bilgiyi alıp-verdiği başlıca alan haline gelmiş bulunuyor. Kimine göre, Internet, duragan bilgisayar ekrarınını televizyon ekranına çevirdiği için bu kadar cazip hale geldi. Kimine göre, Internet’in sırrı ulaşım ve talep etme kolaylığı getirmesinde. Her türlü mal ve hizmet, artık Internet’te yapazarlanıyor ve Internet yardımıyla edinilebiliyor. Ödemelerinizi Internet’te yapabilirsiniz. Bu grup, Güvenli HTML (SHTML) denen yeni bir protokolün yaygınlaşmasıyla, Internet’te elektronik ticaretin de artacağı kanısında.

Internet’in bu ikinci işlevi, yani Internet’in sadece Web sayfası sahibinin sunduğu bilgilerin ziyaretçi tarafından alınmasına yarayan tek yönlü bir yol değil de, ziyaretçinin de Web sayfası sahibine birşeyler gönderebilmesi, HTML’in Form başlığı altında toplanan imkan ve yetenekleri sayesinde mümkün oldu. Elektronik ticaret de, HTML’in FORM etiketinin kullanımından başka bir şey değil.

FORM, sizin Web tasarımcısı olarak sayfanıza koyacağınız ve içinde ziyaretçinin dolduracağı boşluklar veya ziyaretçinin yapacağı tercihleri belirteceği kutular bulunan ve en sonunda bu bilgileri size göndereceği bir düğme bulunan bir Web sayfasıdır. FORM, bir sayfanın içinde bir bölüm olabileceği gibi, başlıbaşına bir sayfa da olabilir. FORM, ziyaretçiye “girdi” yapma imkanı verebilir; vermeyebilir. FORM düz bir metin olabilir; resimlerle süslenmiş olabilir. Ne kadar işlenmiş olursa olsun, bütün HTML etiketleri gibi formlar da bir etiketle başlar ve biter. Şimdi bu bölümde <FORM>..</FORM> etiketinin arasını doldurmayı öğrenelim.

Bu arada bir uyarı notu: Oluşturacağınız form, ekranda çizilecek ve  size başarılı bir form yapıp, yapmadığını görme imkanı verecektir. Ama formun gerçekten yapmasını istediğiniz işleri yapıp, yapmadığını sınamak için, örneğin altına koyacağınız Gönder düğmesine basmanızın bir faydası olmayacaktır. Çünkü HTML’de form, karşısında o formdaki bilgileri alıp bir şeyler yapacak bir program olsun ister. Bu programlar, genellikle Web Server dediğimiz, ziyaretçilere Web sayfalarındaki bilgileri sunan programların bir bölümüdür. En yaygın Web Server programları (Unix ortamında Apache, Windows ortamında  Microsoft Internet Information Server, ziyaretçiden gelen form bilgisini alacak ve işleyecek “Web Server’a ortak Giriş Kapısı” diye adlandırabileceğimiz CGI (Commen Gateway Interface) oluştururlar ve burada ziyaretçilerden gelen formları işleyecek programlara yer verirler. Bu programlar genellikle CGI programı adıyla bilinir. Bu tür programları, Internet hizmeti yapmadan sadece formlarınızı sınamak amacıyla PC veya Macintosh bilgisayarlara koymak da mümkündür. Ancak bilgisayarınıza böyle bir CGI programı kurduğunuz taktirde formlarınızı bu programa “göndererek” sınayabilirsiniz.

Formun Bölümleri

HTML formunun üç bölümü vardır. Bunlar, Web tasarımcısının formdan beklediği eylemin (Action) ne olduğunu gösteren ve ziyaretçinin tarayıcısına hitabeden bölümü; ziyaretçinin doldurması gereken boşluklar veya tercih etmesi gereken seçenekler; ve ziyaretçiye bu formun eylem komutunu harekete geçirme veya vaz geçme imkanı veren komut düğmeleri.

Bu örneklerde HTML’in temel unsuru olan paragraf (<p>..</p>) etiketini kullandık ve çeşitli şekillerde biçimlendirdik. Ancak HTML paragraftan başka metin unsurlarını da tanır. Bu bölümde bu etiketleri ele alacağız.

HTML’in paragraftan sonra metne ilişkin en önemli yapı taşı, başlık etiketleridir. nitekim bizim yaptığımız örnek sayfanın da eksiği başlığının olmaması. Sayfamıza başlık koyşmadan önce HTML’in başlık etiketlerini daha yakından tanıyalım.

HTML bize H1, birinci yani en büyük, H6 sonuncu, yani en küçük olmak üzere altı ayrı büyüklükte başlık kullanma imkanı veriyor. Farklı başlık büyüklüklerini daha yakından tanımak için, şu sayfayı yazarak, örneğin baslik.htm adıyla kaydedin:

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>

<title>Başlıklar</title>

</head>

<body>

<p><font face=”Arial”>

<h1>H1: Bir numaralı başlık<h1>

<h2>H2: İki numaralı başlık<h2>

<h3>H3: Üç numaralı başlık<h3>

<h4>H4: Dört numaralı başlık<h4>

<h5>H5: Beş numaralı başlık<h5>

<h6>H6: Altı numaralı başlık<h6>

Normal Metin

</font> </p>

</body>

Bu dosyayı tarayıcınızda açın. Tarayıcınızın temel font ölçüsünü ortalamada tutuyorsanız, şuna benzer büyüklükler verir:

Şimdi bu bilgiyle, örnek sayfamıza başlık verebiliriz. Bunun için, paragrafın hemen üstüne,

<h1>Tasarımcı kimdir?</h1>

<h2>Tasarım nedir? </h2>

satırlarını yazın ve sayfanızı kaydedin. Tarayıcıda açtığınız zaman sayfamızda iki başlık göreceksiniz.Paragraf etiketi gibi, başlık etiketinin de arkasına koyabileceğiniz tek özellik ALIGN’dır ve bununla başlığın sola, sağa, ortaya bloklanmasını veya sağ sol marjların aynı anda bloklanmasını sağlayabilirsiniz.Yerel biçimlendirmede kullanabileceğimiz stil unsurları paragraf, başlık ve bunların <B>, <I> ve FONT etiketleri ile biçimlenmesinden ibaret değildir. Diğer temel biçimlendirme etiketlerini kısaca sıralayalım:

<BASEFONT>: Temel font etiketi, bir sayfadaki bütün metinlerin temel fontunu, tarayıcının varsayılan fontu ne olursa olsun, istediğiniz font ailesine (Helvetica, Times gibi) veya font türüne (serif, sans serif gibi) çevirmenizi ya da büyüklüğünü belirlemenizi sağlar. (Bu etiketin sonlandırıcı eşi, yani </BASEFONT> etiketi yoktur.)

<BIG>…</BIG>: İşaretlediği metnin temel fonttan bir ölçü büyük olmasını sağlar. Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel fonttan iki ölçü büyük olacaktır.

Örnek: <p><font face=”Times New Roman”><big>Rudolf Koch</big> - <i>Alman harf dökümcüsü, kaligraf</i></font></p

<SMALL>…</SMALL>: İşaretlediği metnin temel fonttan bir ölçü küçük olmasını sağlar. Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel fonttan iki ölçü küçük olacaktır.

Örnek: <p><font face=”Times New Roman”>Rudolf Koch - <small><i>Alman harf dökümcüsü, kaligraf</i></small></font></p>

<CENTER>..</CENTER>: Ortalama etiketi, işaretlediği metnin, içinde bulunduğu kutuda (bu bir tablonun hücresi olabileceği gibi, sayfanın kendisi de olabilir) yatay olarak ortalanmasını sağlar.

Örnek: <p><center><font face=”Times New Roman”>Rudolf Koch - <i>Alman harf dökümcüsü, kaligraf</i></font></center></p>

<S>..</S>: Ortasından Çizgi Çek (Strikethrough) etiketi, işaretlediği metnin ortasından çizgi çekilmesini sağlar. Bu etkiyi, bir metinden çıkartılmış yerleri göstermek için kullanabilirsiniz.

Örnek: <s> Biz inanıyoruz ki,</s> en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır..

reh015.tif

<TT>..</TT>: Teleks Metni (Teletype Text) etiketi, işaretlediği metnin eşit genişlikte fontlarla (Courier gibi) gösterilmesini sağlar. Bu etkiyi, bir metinde örneğin bilgisayar kullanıcısının kendi yazması gereken bölümleri göstermekte kullanabilirsiniz.

Örnek: <p><font face=”Arial”>Programın <tt>kullanıcının adını</tt> soran diyalog kutusuna adınızı yazınız</font> </p>

<U>..</U>: Altını Çiz (Underline) etiketi, işaretlediği metnin altına çizgi çekilmesini sağlar. Bu etkiyi, bir metinde vurgulamak istediğiniz bölümü göstermekte kullanabilirsiniz.

Örnek: <u>Biz inanıyoruz ki,</u> en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır.

<HR>: Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde, vereceğiniz yüklemlere göre yatay bir çizgi çizilmesini sağlar. Bu etiketin etkisinin bittiği yeri belirten eşi yoktur. Yatay çizginin yüklemleri arasında sağa, sola veya ortaya bloklanacağını gösteren ALIGN, gölgesiz olmasını sağlayan NOSHADE, pixel veya yüzde olarak kalınlığını belirleyen WIDTH vardır. Doğrudan betin biçimlendirmeye yaramamakla birlikte bu etiket, metnin bölümlerini ayırmakta kullanılabilir.

Örnek: <HR><p><font face=”Times New Roman”>Rudolf Koch - <i>Alman harf dökümcüsü, kaligraf</i></font></p>

HTML’in metin biçimlendirmekten çok metnin bölümlerini tanımlamakta kullanılan ve özellikle Internet’in metin ağırlıklı olduğu ilk dönemlerinden kalma, ACRONYM, BLOCKQUOTE, CITE, CODE, DEL, DFN, EM, INS, KBD, PRE, Q, SAMP, STRONG, SUB, SUP, VAR etiketlerini ve kullanıldıkları yerleri Başvuru bölümünde bulabilirsiniz.

Fakat burada kısaca da olsa, Internet giderek daha çok bilgi sunma ve bu bilgilerin bulunduğu yerleri gösteren bağlantıların listesi haline döndüğüne göre, listelerden söz etmek yerinde olacaktır. HTML bize birçok liste türü kullanma imkanı veriyor. Bunları sırayla inceleyelim ve uygulayalım.

Sıralı Listeler

<OL>..</OL>: Sıralı (Ordered) listeler, liste unsurlarının başına, tasarımcının arzusuna göre, ya rakam, ya harf koyarak, sıralanmış listelerdir. Listenin başladığını ve bittiğini belirten bu iki etiketin arasına liste unsurları (list item) <LI> etiketi ile yazılır. (Bu etiketin bittiğini gösteren eşi yoktur.) Etiketi biçimlendiren TYPE (1, rakamla; A, büyük harfle; a, küçük harfle; i küçük Romen rakamları ile; ve I, büyük Romen rakamları ile sıralanmayı sağlar), COMPACT, (listenin mümkün olduğu kadar az satır aralığı ile verilmesine yarar) ve START (listenin harfi harf veya rakamdan başlayacağını belirtir) şeklinde üç yüklemi olabilir.

Örnek sayfamıza, Web’de hemen herkesin tarayıcısının gösterebileceği güvenli renklere ilişkin bir sayfa koyalım. Akılda kolay kalması için kaç adet renk olduğunu belirtmek üzere, listemizde yer alacak unsurların rakamla veya harfle sıralanması uygun olur. Web Tasarım Rehberi sayfasının HTML kodunu açın ve mevcut paragrafı şöyle değiştirin:

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>

<title>Web Tasarım Rehberi - Renkler</title>

</head>

<body>

<p><font face=”Arial”>

<h1>HTML Sayfada Güvenli Renkler</h1>

<ol type=1 compact>

<li>#000000=black (Siyah)

<li>#000080=navy (Lacivert)

<li>#0000FF=blue (Mavi)

<li>#008000=green (Yeşil)

<li>#008080=teal (Koyu Yeşil)

<li>#00FF00=lime (Parlak Yeşil)

<li>#00FFFF=aqua (Turkuaz)

<li>#800000=maroon (Vişne çürüğü)

<li>#800080=purple (mor)

<li>#808000=olive (Zeytunî yeşil)

<li>#808080=gray (Gri)

<li>#C0C0C0=silver (Gümüşî gri)

<li>#FF0000=red (kırmızı)

<li>#FF00FF=fuchsia (Parlak pembe)

<li>#FFFF00=yellow (Sarı)

<li>#FFFFFF=white (Beyaz)

</ol>

</font> </p>

</body>

</html>

Herşeyi yolunda gitti ise, tarayıcınızda şu sayfa karşınıza çıkacaktır:Denemiş olmak için, liste etiketinde, TYPE yüklemini “1” değil, “a” olarak verin. Sayfadaki listeniz, bu kez rakamla değil, küçük harflerle sıralanmış olacaktır:(Bu liste “ç” ve “ı” gibi Türkçe harflerin olmadığını görüyorsunuz. Peki, listemiz çok unsur içerse, “z” harfinden sonra ne olur? İşte size güzel bir ev ödevi konusu!)

Sırasız Listeler

Sayfamızı tarayıcıda inceledikten sonra, aslında bu listenin rakam veya harfle sıralanmış olmasının istediğimiz görsel etkiyi yapmadığına karar verdik, diyelim. İstiyoruz ki listemizde, unsurların başına siyah, yuvarlak bir nokta gelsin. Bunun için, HTML’in sağladığı sıralanmamış liste etiketini kullanmak zorundayız.

<UL>..</UL>: Sırasız (Ordered) listeler, liste unsurlarının başına, tasarımcının arzusuna göre, ya içi dolu ya da içi boş bir yuvarlak, veya dört köşe nokta konularak sunulan listelerdir. Listenin başladığını ve bittiğini belirten bu iki etiketin arasına liste unsurları (list item) <LI> etiketi ile yazılır. (Bu etiketin bittiğini gösteren eşi yoktur.) Etiketi biçimlendiren TYPE (DISC, içi dolu daire; CIRCLE, içi boş daire; SQUARE dörtköşe nokta ile sıralanmayı sağlar) ve COMPACT, (listenin mümkün olduğu kadar az satır aralığı ile verilmesine yarar) şeklinde iki yüklemi olabilir.

Şimdi HTML kodumuzda gerekli değişikliği yapalım. Yani liste etiketini <UL></UL> olarak değiştirelim, TYPE yüklemini de DISC yapalım:

<ul type=disc compact>

Listemiz, tarayıcıda değişik bir görünüm alacaktırListe türünü diğer iki unsuru deneyerek, değiştirebilirsiniz.

Tanımlama Listeleri

HTML’in, Internet’in daha çok bilimadamlarının bilimsel rapor alışveriş alanı olduğu günlerde, sayfa tasarımcılarına kolaylık sağlamak üzere geliştirilmiş tanımlama listeleri üç gruba ayrılabilir.

<DL>..</DL>: Tanımlama (definition) listesi etiketinin içinde, tanımlamalara (<DD>), tanımlama terimlerine (<DT>) veya her ikisine birden yer verilir. DL etiketine sadece COMPACT yüklemi verilebilir. DD ve DT’nin sonlandıran eşi yoktur. Bu etiketlerle oluşturulacak listeleri de birer örnekle inceleyelim:

Diyelim ki Web tasarımını ciddî bir şekilde meslek olarak edinmek isteyenler için Web Tasarım rehberi sayfamızda bazı HTML işlemcilerin ve grafik programlarının tanıtımını yapalım. Tabiî önce bu programları gruplara ayıracağız. Dolayısıyla önce sayfamızı ziyaret edenlere, bu gruplarda ne tür programların yer aldığını anlatmak zorundayız. Başka bir deyişle tanımlama listemiz üç tanımlama terimi (<DT>) ve bunlara ait üç tanımlama (<DD>) içerecek. Buna göre, HTML kodumuzun liste bölümü şöyle olabilir:

<h1>Web Tasarımcısının Alet Çantası</h1>

<dl compact>

<dt>HTML İşlemciler

<dd>Tasarımcıya, program ekranında Web sayfasını bir kelime işlem veya masaüstü yayıncılık programı gibi hazırlama imkanı veren ve ortaya çıkan sayfayı HTML kodlarını koyarak kaydeden yazılımlar.

<dt>Grafik Programları

<dd>Mevcut grafik programlarından farklı olarak, Web için güvenli renklerle çalışan ve oluşturulan grafiği tarayıcıların tanıyabileceği biçimlerde kaydeden programlar.

<dt>Web Alanı Yönetim Programları

<dd>Web yöneticisinin kendi bilgisayarındaki sabit diskte oluşturacağı sayfaları, Internet Hizmet Sunucu firmanın bilgisayarına aktarma ve güncelleştirme imkanı veren programlar

</dl>

Bu kodun oluşturduğu tarayıcı sayfası ise şöyle görünecektir:

Menüler

<MENU>..</MENU>: Tabiî burada kastedilen bir lokantanın menüsünden çok, tek kelime veya bir satıra sığabilecek uzunlukta, kısa ve çok az yer kaplayan listeler. Menü listeleri, diğer listelerden çok daha az satır yüksekliğine ve satır aralığına sahiptir.

Web tasarımcısının alet çantasında yer alması gereken programları kısa bir menü listesi olarak vermek istersek, HTML kodumuzun liste bölümününde şu değişikliği yapmak zorundayız:

<menu compact>

<li> HTML İşlemciler

<li> Grafik Programları

<li> Grafik Programları

</menu>

Bu şekilde değiştirdiğimiz sayfamız ise tarayıcıda şöyle görünecektir:

Bu listenin kapladığı dikey alanın, aynı unsurları içeren sıralı ve sırasız listelere göre daha az, ya da daha çok yer kapladığını kolayca bulabilirsiniz. Ve bunu yaparken, listeler konusunu bir kere daha gözden geçirmiş olursunuz!

Liste etiketleri türlerini sayarken, özellikle dosya adı gibi bir dizin içindeki unsurların adını sıralayan <DIR>..</DIR> etiketinden de söz edelim. Bu etiketin içine de liste unsurlarını <LI> etiketi ile yazarız. Ortaya çıkacak liste, Menü ya da unsurları noktalı sırasız listeden farklı olmayacaktır.

Listelerden, yukarıda verdiğimiz örneklerde olduğu gibi bilgi sıralama amacının yanı sıra, liste başlıklarına veya unsurlarına başka sayfalarla bağlantı yaptırarak, çeşitli şekillerde yararlanabilirsiniz. Bağlantılar’ı ilerde ele alacağız.

Listeleri, madde başlarında kendi oluşturacağınız veya başka bir kaynaktan sağlayacağınız grafik unsurları kullanarak, güzelleştirebilirsiniz. Aşağıdaki örnekte, açık yeşil renkli küçük bir dikdörtgen nokta olan dot.jpg grafiğini kullanarak, program tanım listesini görsel açıdan zenginleştirelim. Bunun için, HTML kodumuzun liste bölümünde şu değişikliği yapacağız:

<dt><img src=”dot.jpg”>HTML İşlemciler

…….

<dt><img src=”dot.jpg”> Grafik Programları

…….

<dt><img src=”dot.jpg”> Grafik Programları

…….

Burada yaptığımız şey, <dt> etiketinden sonra bir grafik kaynağı (image source) etiketi koymak ve kaynak olarak sabit diskimizdeki grafik dosyasının adını vermekten ibaret. Siz kendi örneğinizde uygun bir başka grafik dosyasının adını verebilirsiniz. HTML sayfada grafik unsurlara nasıl yer verildiğini ve kurallarını ilerde ayrıntılı olarak ele alacağız. Bu noktada dikkat edeceğiniz tek şey, grafik dosyasının HTML dosyası ile aynı dizide durmasıdır. Daha sonra başka dizinlerdeki grafikleri sayfalarımıza alma yollarını gözden geçireceğiz. Bu kodun oluşturduğu sayfa ise tarayıcıda şöyle görünüyor:

Listeler konusunu kapatırken, liste etiketlerini iç-içe kullanarak, farklı görsel etkiler oluşturabileceğimizi belirtelim. Örneğin, sırasız bir liste etiketinin içinde herhangi bir maddenin alt-maddelerini belirmek amacıyla, başka bir sırasız liste etiketi kullanabilirsiniz. Örneğin şöyle bir liste sunmak istiyorsunuz:

Madde 1

Madde 2

Madde 3

Madde 3-Paragraf A

Madde 3-Paragraf B

Madde 4

Madde 5

Madde 6

Bu etkiyi sağlayabilmek için, <UL>..</UL> etiketinin arasını şöyle doldurmanız gerekiyor:

<ul><li>Madde 1</li>

<li>Madde 2</li>

<li>Madde 3</li>

<ul><li>Madde 3 Paragraf A</li>

<li>Madde 3 Paragraf B</li></ul>

<li>Madde 4</li>

<li>Madde 5</li>

<li>Madde 6</li>

</ul>

Bu kod, tarayıcıda, şöyle görünüyor:Burada dikkat edeceğiniz nokta, iç içe açılan etiketlerin sıralı şekilde kapanması olmalıdır. Tabiî, bir süre sonra başınız dönmezse!